Design is a curious creature. When done well it goes almost unnoticed – whether it’s in the architecture of a courthouse, a mobile app or a kitchen mixer. According to Donald Norman, however, when design is poor it can negatively affect the way a person interacts with an object. That is, if bad design doesn’t discourage use entirely. For user experience (UX) and user interface (UI) designers, creating a wireframe is a first step to understanding function and how a design will appear – and is therefore valuable to the design process for both developers and business end users alike. Therefore, we’ve pulled together a list of the most important reasons to create a SharePoint wireframe before you build a site or page:
Wireframe mode – showing a SharePoint wireframe – in LiveTiles SharePoint (left), and the same page when wireframe mode is turned off (right)
1. Save development time.
To a business user, a wireframe may appear to be no more than a plain sketch of a solution. However, that would gloss over the fact that it is a visual representation of a page’s information architecture, particularly the prioritization of elements and content. According to Orbit Media, the development team having an idea of page’s elements and syntax before coding begins will save time spent on code revisions while you’re building a solution.
2. Communicate ideas within your design team.
In a similar vein, a wireframe also serves as a way to communicate any feedback or comments from within the team before building. According to Dan Ritzenthaler, a wireframe has great value as a communication tool among the design team – synthesizing the design work done prior through brainstorming and sketches, and providing a clear idea of the forward trajectory of that design. Especially in a project with a multi-person development team, with each developer working on interconnected parts of one site or page, using the wireframe as a tool to clear the air of any misunderstandings and gain as much agreement as possible is a good step to take before building.
3. Gain effective client feedback.
Setting aside your internal development team, if you’re creating a solution for an external client or customer, the wireframe also serves as a way to save time in gaining feedback from your client. According to both Orbit Media and 45royale, by creating a wireframe and then a high-fidelity mockup before you begin building, you present the chance for the client to make sure that business requirements will be met by the end solution, instead of receiving batch comments after development that would require returning to the drawing board.
4. Focus on usability.
By developing a low-fidelity wireframe – again according to Orbit Media and Usability.gov– you essentially create a simulation of how the page or site will function for a user. In a wireframe, you identify navigation, the relationship different pages or elements have with each other and other factors that might present stumbling blocks for a user accessing the final product. Though it’s nowhere near testing a prototype with actual users, in this first iteration you might identify very simple usability issues and address them when moving forward with the design.
Using LiveTiles’ wireframing mode you can create a SharePoint wireframe in a matter of minutes, and then immediately convert that wireframe into a living high-fidelity mockup at the click of a button. This drastically shortens the amount of development time; instead of arranging and editing a mockup, and then building the solution out of nothing based on a visual guide, your end result is born directly from the wireframe itself.
With or without LiveTiles SharePoint’s wireframe mode, a wireframe (specifically a SharePoint wireframe) is an important tool in the building of a SharePoint site. It not only serves to save time in the development process but also to ground internal and external communication. In short, while sometimes disparaged, a wireframe is a multifunctional design and communication tool that can help to make a successful user-friendly final product.
[button link=”http://livetilesglobal.com/request-demo” type=”big” color=”green” newwindow=”yes”] Wireframe your Digital Workplace [/button]