When you\u2019re working on something new, it\u2019s exciting and unfamiliar, making it tempting to skip over the wireframing stage and dive straight into designing a solution. But, by doing this, you\u2019re missing out on an opportunity to better understand the problem and may end up spending more time revising, editing or even recreating your design.<\/p>\n
Wireframing can sometimes feel like an unnecessary stage in the design process, but in the long run it\u2019ll make you a more effective designer. Done right, both Lo-Fi (low fidelity) and Hi-Fi (high fidelity) wireframing can help you get crucial feedback in the earliest stages of your design process, putting you on the right track earlier.<\/p>\n
When we talk about \u2018fidelity,\u2019 this refers to the level of detail in a design, which can range from no detail at all, to a rich, fully finished UI.<\/p>\n
Here\u2019s what the different phases of wireframing mean, and how they can fit into the projects you\u2019re working on every day.<\/p>\n
\u2018Lo-Fi\u2019 wireframes should be the quickest possible sketches of the UI, right out of the gate as you start your project. Ideally, you\u2019re drawing a bunch of boxes on paper just to get the ideas out because this forces you to experiment without tools getting in the way or defining how it might appear.<\/p>\n
The beauty of lo-fi prototypes is that you can throw them away as you begin experimenting and discover new information. That\u2019s the point!<\/p>\n
Think of this as a brainstorm: if you were trying to create the next hit Disney movie, you\u2019d expect a bunch of scribbled down notes, characters and storylines on a napkin to be the catalyst, not a highly-polished render of the scenes you see in the final cut.<\/p>\n
Paper prototypes<\/a> are a valuable way to validate with your team quickly: draw your ideas on paper, cut it out, and have team members interact with them as you observe. You\u2019ll learn valuable insights that might challenge your own assumptions before you move forward with higher fidelity wireframes.<\/p>\n Hi-Fi wireframes are the next step for discovering more about your assumptions, and ensuring they holistically address the need you\u2019re solving.<\/p>\n Tools like Marvel<\/a> help you produce wireframes with higher levels of polish, rapidly. Without getting in the way of the process, they\u2019re a useful way to demonstrate to others how using the product in the real world will feel.<\/p>\n High fidelity wireframes do more than their low fidelity counterparts: they often show what real interface elements will be used, contain much more detail about potential design decisions, but generally avoid making conscious choices about color, fonts or other aesthetics.<\/p>\n They also help communicate potential outcomes much earlier in your process. Presenting your work early can ensure your client, manager, other stakeholders are onboard, rather than springing the final product on them.<\/p>\n Here\u2019s a great practical example of how your process may improve; using Marvel to make your wireframes interactive<\/a> will give you a more tangible insight into crucial UX decisions like user flow. Another excellent benefit of these high-fi wireframes is involving developers early on will help you learn about any potential technical limitations.<\/p>\n Ultimately, high fidelity wireframes will help avoid stopping the design process later when a new use case is discovered, which may require changes across your entire solution and waste many more hours creating a fix.<\/p>\n Wireframing doesn\u2019t need to feel unnecessary; if implemented thoughtfully, and practiced on a regular basis, it won\u2019t feel like they are getting in the way of producing your final design, but instead will help you stay on track and get better at what you do.<\/p>\n Skipping the wireframing process means you\u2019re spending more time creating designs that aren\u2019t fit for purpose. If you find out too late that your users don\u2019t think it makes sense, the work might need to be done from the beginning.<\/p>\n You can easily start small, introducing low-fidelity prototypes into your workflow today, gradually adding higher-fidelity processes and tools to solicit further feedback only once you\u2019re comfortable.<\/p>\n On your next project, scribble something down before you open any design tools, ask for feedback, and see what you learn: you might find that you discover an entirely new way to solve the problem, or that a whole different approach is needed!<\/p>\n","protected":false},"excerpt":{"rendered":" When you\u2019re working on something new, it\u2019s exciting and unfamiliar, making it tempting to skip over the wireframing stage and dive straight into designing a solution. But, by doing this, you\u2019re missing out on an opportunity to better understand the problem and may end up spending more time revising, editing or even recreating your design. Wireframing can sometimes feel like… Read More ￫<\/a><\/p>\n","protected":false},"author":231,"featured_media":16532,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[496],"tags":[],"class_list":["post-16515","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-prototyping-design-thoughts"],"acf":[],"yoast_head":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\n\n\n\n\t\nSo, what about Hi-Fi Wireframing?<\/h2>\n
Lo-Fi or Hi-Fi, don\u2019t skip the wireframing stage<\/h2>\n