Following the development of the sitemap it was important to create wireframes in order to represent the pages of the application that must be developed. Wireframes are essentially the bones of a website or application, they represent the visual aspects of the application devoid of any design elements. Emphasis is placed on layout and content placements, placing functionality to the forefront of the development process. As sitemaps can be difficult to visualize it is important to develop wireframes as they are the first visual process when developing a navigation, and allow you to focus on developing a successful user interface (UI).  They allow for the elimination of any unnecessary pages and allow for changes to the navigation before the development phase. “During a wireframe project, web designers have the chance to focus on user experience only – the factor that matters most to everything from conversion, to customer loyalty. Without the distraction of fonts, colours and imagery, wireframes can allow designers to work on the underlying elements of a website, and eliminate the need for expensive changes in the long-run.” ( McLoughlin, 2017)

Early variations of the wireframes were unsuccessful as they focused on design and details as opposed to functionality, which in turn led to the development of a prototype that was difficult to use. When redeveloping the wireframes focus was placed on functionality, referring back to personas and scenarios were quite beneficial when creating the wireframes. It is important to focus on usability during the wireframing process. Placement of content and functionality are the two key aspects when creating wireframes. Redeveloping the wireframes allowed for the application’s architecture to be restructured in order to develop a more successful navigation. “Wireframes allow you to map out the functionality of the pages, catch problems early, and save time on revisions later.” (Pronto, 2017)

Wireframes allow the focus to be placed on usability and functionality as opposed design. Wireframes bring clarity to a project and allowed for the development of content placement and the interactions of the application.

References

McLoughlin A, (2017), 5 Key reasons why wireframing is important in web design, viewed 17/04/19 via <https://www.tone.co.uk/5-key-reasons-wireframing-important-web-design/>

Pronto.io, (2017), Why Wireframes Are Important in the Design Process. 17/04/19 via <https://medium.com/@protoio/why-wireframes-are-important-in-the-design-process-de4e773e611>