An all in one web design tool kit. Design in the editor without code, or get under the hood to write HTML, CSS & JS. Be the designer every business loves and make beautiful drag and drop layouts for your clients to enjoy.
Watch as 1000's of Drag and Drop layouts are instantly tailored to your Brand. Manage content in moments with a beautiful visual editor, supported by powerful dynamic widgets to serve news, galleries, media, docs and more.
With the Frame Tools you can create any combination of content types that you desire. Once you have layouts that you like you can save them to reuse them on any page in the future. Just click the Layouts tab at the top left of this page to view your saved Custom Layouts.
NEW VIDEO IN PRODUCTION. STAY TUNED VIA YOUR INBOX OR SIGN UP NOW
HOW DOES WIREFRAME MODE WORK?
As you discovered in the last Episode, you can toggle to Wireframe toggle via Layouts Drawer.
Toggle Wireframe Mode via the 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.
SHARING YOUR WIREFRAMES
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:
Click into Wireframe mode.
When you're ready to share go to the top right an click 'Save and View'.
A new tab will open showing the Wireframe in the browser.
Now copy the URL and share it with your team.
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.
You can set up new team members in the Team area found via the Main Menu. See Series 1 Episode 2 for more information.
Whatever the size of your website, all MOBLE Plans come complete all the features!
MOBLE plans are based on the number of website pages, whatever the size of your website, you can be sure it will be packed with all the features from Dynamic Layouts, to Payment Forms, Integrations, Contact Manager and of course, Web School!
MOBLE. A WEB BUILDER FOR DESIGN. A CMS FOR BUSINESS.
Do it yourself or Hire a Pro! We serve all businesses from SME's to Enterprise. Talk with us for custom website design and website development, ecommerce websites, directories, intranets and social networks.