HOW DOES WIREFRAME MODE WORK?

As you discovered in the last Episode, you can toggle to Wireframe toggle via Layouts Drawer.

It is important to understand that Wireframes are only ever seen via your MOBLE site name, and never on your actual live domain name.

Therefore, you can still view wireframe mode even if your website is live. As follows:

• https://your-site-name.moble.site - Can see and share Wireframes via your Site Name
• https://www.your-website.com - Can never see or share Wireframes via your Domain Name

In Wireframe mode the text, images, and other components are replaced to show placeholders, that denote where the content will appear.

Wireframes are often used by Website Designers to create a Prototype during the design process. These Wireframes can be discussed with the client for rapid and undistracted revision and approval of the page Layout.

Since the Layouts on MOBLE automatically pull your brands colour scheme from the Styles area, Wireframes are in most cases now redundant design practice.

The traditional rationale for designing wireframes was to quickly draft mocks before committing to more time consuming visual design and coding.

Though, since the Visual Design on MOBLE is automatically coded, and instantly responsive, in most cases there is simply no need to waste time with Wireframes, or HTML, unless you have an actual UX or development requirements for creating Wireframes.

On MOBLE there really is no distinction between a Wireframe, Visual Design, and Code. Your Layouts instantly pick up your brands Styles (CSS) to create your Visual Design. The HTML writes itself automatically, meaning the time-consuming processes of Wireframing, Photoshop Design Mocks and Coding are not required, they all happen instantly in one rapid process using MOBLE Layouts.

Having instant responsive Wireframes automatically created for you saves phenomenal amounts of design time. In the past, you might have to mock up Wireframes for three different device Layouts for every screen, then having to do it all again when you design your Visual Design Layout in Sketch or Photoshop. With MOBLE you can skip Skip offline mockups of Wireframes and Visual Design, and even Skip the Coding phases as everything happens instantly in the Visual Page Editor, with the flip of a switch.

While Wireframing is becoming a redundant process for Website Design, there still can be use cases. For example, Prototypes can be created by the sales team, marketing team or content team, as a brief before being passed over to the Visual Design team. Though, rather than being an essential tool, Wireframes have become a cool feature to have in your toolkit, should you ever need them.

Please also note that in main global Settings area you can even flip the entire website into Wireframe mode, and of course, just like visual design layouts, Wireframes are fully responsive to showcase to your team and clients directly in the browser.

You MOBLE designs are always accessible via the browser, meaning that they can easily be shared with a link. While sharing a wireframe or any design layout is really simple though there are a couple of things to keep in mind:

1. Click into Wireframe mode.
2. When you're ready to share go to the top right an click 'Save and View'.
3. A new tab will open showing the Wireframe in the browser.
4. Now copy the URL and share it with your team.
5. IMPORTANT Before you share, we would recommend flipping your page into 'Hidden' mode, this can be done in the Page Settings are or in the main Pages area. Hidden mode means that anybody with the link can see the page e.g. the company CEO etc. If you prefer to keep the link private by keeping the page in 'Draft' mode. To see the page in Draft mode, people will have to log in to MOBLE to view it.
6. You can set up new team members in the Team area found via the Main Menu. See Series 1 Episode 2 for more information.