The importance of wireframing is not a deniable fact – the benefits that wireframes bring in the larger development process have been stressed repeatedly by designers (there are more articles on the benefits and importance of wireframing on the internet than you could count in a lifetime). If you’re reading this, then, odds are you don’t necessarily need to be sold again on the benefits of wireframing. Even if you’re using a program like LiveTiles, which makes designing and customizing a SharePoint page a matter of only a few clicks, creating a wireframe to plan your page’s functions and features is still an important step. Particularly if wireframes are reviewed by business users or stakeholders.
Why? Because it’s crucial for business stakeholders (whether they are within your own organization or a client) to first understand how a new page or site will function and meet business requirements before getting distracted by other concerns – whether intentionally or not. When page design is made easy, as it is with using LiveTiles to design SharePoint pages, it’s possible for a designer to get a little carried away with the functions and present a more detailed visual mockup than a business user or stakeholder is ready to see. Danielle Bailey, for example, has pointed this out – visual representations, regardless of detail, can be overwhelming to a client or business user because they appear to be more final version of a design instead of the sketches they usually are. For a designer, especially using this kind of software, it’s easy to create and recreate on the fly, but for a stakeholder taking them through a simple, low-fidelity wireframe first with an explanation of its purpose is ideal to get the right feedback on the prototype.
Low-definition wireframe created using LiveTiles(right), and the full color design after exiting wireframe mode (left)
This is where a SharePoint wireframe tool like LiveTiles’ wireframe mode becomes very useful, for a variety of reasons. First, you can drag and drop tiles to create a low-fidelity wireframe within the design canvas in only a matter of minutes. With the canvas in wireframe mode, the page elements or tiles are shown in grayscale, with simple font and lack regular interactive functions.
The process of moving forward with this initial SharePoint wireframe – adding more visual details like color schemes and branding, as well as building out the finished product—is made much easier using LiveTiles. When the low-fidelity SharePoint wireframe created inside the design canvas gains approval, a designer doesn’t have to open a new page and start again from scratch. By clicking the “Wireframe Mode” button in the design view, a designer can toggle out of wireframe mode and into the regular designer view – meaning the tile colors, font, and other visual elements can be altered. Furthermore, any image tiles added to the wireframe will now show up in full color, allowing for the incorporation of visual branding elements to tie into the page’s color scheme. The point being, that when using LiveTiles to create a SharePoint wireframe, it’s unnecessary to recreate separate images, using separate wireframing software, for progressively advanced versions. Within LiveTiles, you can build your most basic SharePoint wireframe; add, reorganize, and change elements inside it; add increasing levels of detail, including color schemes and branding; and eventually complete your fully-designed page, all without leaving the program.
It seems like stating the obvious to declare that it’s important to wireframe for functionality first, and save the flashier aspects of design for later stages. However, with UX and UI design software like LiveTiles now easier than ever to use, keeping your initial ideas strictly functional when talking to clients or business users is important to a successful design process.