Building the Blueprints
Wireframes are the essential blueprints of any good design. They lay the framework for how a design will be laid out and are “used to communicate the structure of individual pages and how those pages connect (how the interface will work from a user perspective).” Wireframes are the foundation of the user experience, and it is important and focus on them and build them out properly, before jumping into the colors and fonts of the design.
So what do good wireframes look like?
Wireframes are static representations of the final design, but this does not mean they are without detail. They can be created as low-fidelity, mid-fidelity, or high-fidelity, which all contain different amounts of detail.
Low-fidelity Wireframes
Low-fidelity wireframes have very minimal detail and appear very quick and sketchy. In these wireframes, lines may not be straight and icons not evenly arranged. They are a great way to quickly get down ideas, but do require further processing and should not be the final wireframes.
Mid-fidelity Wireframes
Mid-fidelity wireframes have significantly more detail and neatness compared to low-fidelity wireframes. They are the most commonly used wireframes and include enough information to tell what content is on the pages and how to navigate between them.
High-fidelity Wireframes
High-fidelity wireframes are the most detailed out of all the wireframes. These typically include logos, headers, button icons, and sometimes images as well.
Even if you start with a low-fidelity wireframe, it is important to also make wireframes of higher fidelity, to make sure that you still have enough information where one can navigate between the wireframe pages and understand the flow of the app. Wireframes should “provide a clear overview of the page structure, layout, information architecture, user flow, functionality, and intended behaviors.” Wireframes can either be created digitally on apps such as Adobe XD, InVision, or Sketch, as well as being hand-drawn in a sketchbook. Either way, it is key to have them clean and readable.
Wireframes keep the concept user-focused
Wireframes clarify and define the features
Wireframes are quick and cheap the create
Wireframes don’t have to be something big and scary. Infract, there are many free tools and kits out there that can help you create great wireframes.
This past week I have worked on my own wireframes for my redesign of the app, Planty. I created my pages based on the information architecture I made last week. I used Adobe XD to create all of the individual wireframes and created 33 pages for my app.
I also spent this week conducting some visual research. It is important to look at great UX and UI designs to inspire your own. I also began exploring app visuals and the different vibes or feels that I wanted the redesign to have. Additionally, it is important to have a series of different color palettes and explore fonts for the app. I complied all these different aspects that inspired me into a Pinterest board, to help organize my ideas.
Sources:
https://xd.adobe.com/ideas/process/wireframing/wireframe-templates-for-ux-designers/
https://xd.adobe.com/ideas/process/wireframing/wireframe-design-definition/
https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe-guide/