You may have heard the term wireframing when it comes to the design process. In this post we are going to explain what wireframing is, why we do it and how it is beneficial to the University when planning new services and products.
What is Wireframing?
Wireframing is the process of designing a new product at a structural level thinking about the position and hierarchy of the underlying elements. For example if we were looking at a website, this could be planning the layout of a particular page and where a sidebar might be placed on the page. Wireframes are usually basic and can be just rough sketches of a designers work but allow for the layout and flow to be considered. Colours, typography and other finer details are added at a later stage in the design process, usually when wireframes are converted into high-fidelity screens.
Where in the process are wireframes produced?
Edinburgh Napier have adopted the Double Diamond design methodology so in our case we would produce wireframes in the Develop stage of the second diamond. This is usually once we have gathered a proper insight into the problem by gathering user research and narrowed down our focus on ensuring we are designing the right solution.
One of the great benefits of prototyping is that it allows the designer to rapidly come up with ideas in such a short amount of time. One of the techniques I have used in the past is the Crazy Eights design sprint. It challenges you to come up with 8 different designs/layout in 8 minutes. This further conveys the statement that your first idea isn’t always your best idea, so it’s best to generate a good amount and analyse these together.
Why are wireframes beneficial?
Wireframing allows us to strictly think about how something is going to flow rather than thinking too much about the visuals. It improves communication throughout the team allowing developers to easily see modules or elements that are going to be produced at a basic level.
Wireframes above all else are time and cost effective. It allows us to get initial feedback from users and stakeholders without much investment.
References
Wireframe cover image: https://miro.com/templates/low-fidelity-wireframes/
Double Diamond Process: https://en.wikipedia.org/wiki/Double_Diamond_%28design_process_model%29
