Page Designer Wireframe Mode

This article will address the following:

1. What is Wireframe Mode?
2. How do you use Wireframe Mode?
3. How does it work?
4. Best Practices

What is Wireframe Mode?

Summary: The main purpose to enabling Wireframe Mode is to help users focus on the structure (and placement) of elements within a site rather than the superfluous aspects of the experience. By eliminating the aesthetic characteristics of page, users can strictly focus on content and structure. Below is an example of how a web page might look like in Wireframe Mode.  

Why Wireframe Mode? Wireframing can be a useful tool for channeling your creative energy and ideas in the appropriate direction. This mode can also help users direct their focus to content and structure and less on visual appearance (aesthetics). 

How do you use Wireframe Mode?

In order to turn Wireframe Mode on, you will need to go to the page settings. At the bottom of the Page Settings window, there is a toggle called Enable Wireframe Mode. Once this has been checked on and the settings have been saved, you will see a new button appear in the top right corner of your page, left of "Page Settings". You may need to save and reload the page. When you click on this, the style of the page will change to Wireframe Mode. This will change the font to a sketch style font, the tiles to grayscale, and make the tiles look more hand drawn.

How does it Work?

You will be able to focus on function and placing in this mode, as color and fonts styles will not be applied until Wireframe Mode has been turned off. In addition, when you save the page, the Wireframe style will be saved, allowing the page designer to be able to share the page in the low fidelity view of Wireframe Mode to allow for feedback.

In addition, if you enable the setting to allow other users to toggle Wireframe Mode on/off, the people are viewing the page will be able to turn off Wireframe Mode to see what the page will look like in high fidelity, with color and font choices.

Best Practices

Consider the four steps to properly using Wireframe Mode:

1. Identify the Problem/Use Case. The most important aspect of wireframing is defining the problem. Is the company in need of a document repository? Maybe the landing page experience is cluttered and outdated. Defining the problem you are trying to solve with your design will help streamline the wireframing process by allowing you to focus on the necessary rather than wasting energy on the aesthetic features.
2. Mine customer Resource/Insights. In pursuit of a consumer grade UX, it is important to not lose sight of creating something that is relevant to the user as well as visually engaging. At LiveTiles POCs are often created based on customer input, RFPs or screenshots of the existing intranet. Use all available resources as you begin drawing out your wireframe. 
3. Paper Wireframe. Once you've completed the above steps, create an outline of your page on paper. It will help you to get a better understanding of the overarching goal of enabling Wireframe mode. 
4. Digitize your Wireframe with LiveTiles. With the paper wireframe, you can use LiveTiles to emulate it, mapping out the ground work for your user experience at the same time. 

Enabling Wireframe Mode allows users to toggle between the paper wireframe view from the original view. The toggle option converts the page into black and white as well as any images that might be present on the page. It also nullifies any page background images or colors that you may be using. This simple aesthetic allows designers to concentrate on the structure of their site and placement of elements rather than branding, colors and other flashy aspects while recreating their wireframe draft in a digital environment 

While beginning wireframe using Livetiles, do not forget to implement some UX design best practices when structuring your content.