If you’ve ever created something and later had to circle back around to make alterations, wireframes may be that missing step.
“Wireframes are a powerful way to spot issues before they become expensive problems.” [justinmind]
When it comes to designing a website there are many factors that must be considered in order to create an interactive, user-friendly, and usable site. These factors can include and are certainly not limited to, the actions you wish your users will take, how you want to display your content, what you’re hoping to accomplish through the creation of your site, and many more. There are countless benefits to starting the design process with wireframes instead of choosing fonts and picking out color schemes upfront (Hillery, 2019). As justinmind stated, wireframes and sketches can open a designer’s eyes to all kinds of problems before spending hours designing a beautiful website that simply will not operate properly.
In my opinion, writing things down and sketching ideas out helps me to see the proposed visual before diving into wireframing and design. In the example (shown below) I mapped out exactly where I wanted the text to live and what kinds of imagery I would use when the design came into play. This allowed me to see my vision come to life on paper before spending hours designing and mapping out the low-fidelity wireframe.
Wireframes are the next step in the design process for some, although some designers may skip hand-drawn sketches and head right to wireframes. This is the opportunity to work out any of the kinks or issues you may come across in the design process. Wireframes allow you to see a more “complete” look of your desired idea. This is also the opportunity to see where your site design may be lacking, especially when addressing pain points. These pain points will vary from project to project but they will give you insight into how you wish users will easily navigate your website without having major issues. A wireframe is a practical map that lays out design and functional-use aspects. They allow you to position text, visuals, and content along with the proposed navigation. The examples below are considered low-fidelity wireframes as they depict a rough outline of the end result. High-fidelity wireframes would provide much more detail, resulting in a fine line between wireframes and a prototype or mockup. All in all, wireframes and/or sketches are essential for mapping out your design and determining the pain points in which you are aiming to address in your finished design.
A prototype is where your entire design and mapping process comes to life! Prototypes include the main components as displayed in wireframes or mockups but with much more detail, almost presenting the final design. Colors, logos, typography, and basic navigation are included in prototype designs (justinmind, 2019). Prototypes are likely mid-to-high-fidelity models that allow designers and users alike to test navigation and usability all while determining if the design completes the goals in mind during ideation. Similarly to physical prototypes, having a website prototype will give you a lot of insight into how you, as a designer, navigate the site in comparison to a real-life user. This is the step where all the issues will hopefully be worked out before heading into “final production.”
After taking a look at the steps of website design, it may seem intimidating, but beginning with sketches, revisiting the design, and slowly working your way towards a prototype will certainly set you up for success! Next time you are tasked with creating or updating a website, app, or webpage, how will you begin that process?