If you are looking to become a UX designer, you\u2019ve probably heard of \u2018wireframes\u2019 once or twice in your research so far. Wireframing is an essential part of the product design process. But you might be wondering what wireframes are and how to create them.<\/p>\n
Everything you need to know about wireframes is in this guide. We\u2019ll dive in by learning:<\/p>\n
[GET CERTIFIED IN UX]<\/p>\n Take our Professional Diploma in UX Design course<\/span>\n <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n A wireframe is an outline of a webpage or app. It\u2019s usually a two-dimensional skeleton outlining what you\u2019ll include in each view of your app, kind of like a blueprint. Wireframes can be hand drawn on paper or built out digitally.<\/p>\n Wireframes are used by UX designers<\/a> and web designers to provide a clear visual understanding of page structure, layout, information architecture, user flow, functionality and intended behaviours. Wireframes are presented to stakeholders like designers, developers, researchers and investors to agree on concepts before the interface is built out with code.<\/p>\n The downsides of wireframing<\/strong> It can also be easy to get bogged down by your wireframes. You might spend too much time designing them or even over-designing them. Plus, changing your wireframes multiple times can be tricky if you\u2019re hand drawing or using a complicated technical system.<\/p>\n The benefits of wireframing<\/strong> Additionally, wireframing helps designers see if the ideas they have in their heads translate well into real life. Wireframes are sometimes presented in user testing to determine whether they\u2019ll work for the final prototype. Wireframes help designers keep users at the centre of their focus, which leads to the best results.<\/p>\n Wireframing generally occurs during the exploratory design phase of the product life cycle. This phase is where designers begin to understand the product\u2019s scope, collaborate on ideas and nail down business requirements. The wireframe is usually the first iteration of a webpage or app. It\u2019s used as the basis for the rest of the product\u2019s design.<\/p>\n After the initial wireframe is created, it\u2019s usually presented to users to gain user feedback. Then, designers can make the next iteration of the product’s design, another wireframe, the prototype or a mockup. Want to learn more about the next phase? Check out our complete guide to prototyping<\/a>.<\/p>\n [GET CERTIFIED IN UI DESIGN]<\/p>\n Take our Professional Certificate in UI Design course<\/span>\n <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n Much like prototypes, wireframes are made with varying levels of fidelity. Fidelity simply means how precisely a wireframe lines up with the final product. Different fidelities of wireframes have different uses, functionality, visual design and content.<\/p>\n Regardless of fidelity, nearly all wireframes include pseudo-Latin placeholder text, headers, search fields, image placeholders, logos, share buttons and menus. Most wireframes are created in shades of grey to represent colours but keep it simple.<\/p>\n Let\u2019s take a look at the three most commonly used wireframes.<\/p>\n Low-fidelity wireframes<\/strong> Low-fidelity wireframes, sometimes called lo-fi, are rough visual representations of a webpage or app. This is usually what the designer starts with. They\u2019re simple and don\u2019t usually consider scale, grid or pixel accuracy.<\/p>\n Lo-fi wireframes are often hand-drawn and don’t include actual content. Instead of images or text, they\u2019ll often have boxes with an X through them, basic labels or scribbles instead of actual text or pictures. They also don\u2019t include typography or colour in this phase.<\/p>\n Mid-fidelity wireframes<\/strong> Unlike lo-fi wireframes, mid-fidelity wireframes provide more precise representations of the layout. They still don\u2019t include images, typography or detailed content. But more detail and attention are dedicated to showing specific components and features clearly.<\/p>\n Mid-fidelity wireframes are still in black and white. But designers will often use different shades of grey and different font weights to convey visual differences. This wireframe phase is usually created with a digital design tool<\/a>. Keep reading to learn more about the best tools for wireframing.<\/p>\n High-fidelity wireframes<\/strong> High-fidelity wireframes, a.k.a. hi-fi, have pixel-specific layouts that are designed to scale. Hi-fi wireframes are often presented as initial prototypes.<\/p>\n A high-fidelity wireframe will usually have actual images and written content that is proposed to appear in later iterations of the app or webpage. High-fidelity wireframes are created using a digital tool. They feature actual typography, detailed features and menu systems.<\/p>\n We rounded up the top 7 wireframing tools for you to try out and their benefits, so you don\u2019t have to search. We\u2019ve listed them here in order of popularity.<\/p>\n 1. Sketch<\/strong> But once you create a UI element yourself, you can reuse it easily with the symbols feature. Plus, it allows you to update styles across every view you\u2019ve created which will save you so much time. Third parties offer UI kits to make your wireframes even more detailed.<\/p>\n 2. Balsamiq<\/strong> 3. Invision Freehand<\/strong> 4. Photoshop<\/strong> 5. Marvel<\/strong>What is wireframing?<\/h2>\n
\nSometimes there are downsides to wireframing but they\u2019re pretty minute compared to the benefits. For starters, wireframes can feel complicated to present to clients or non-technical team members. You may find yourself explaining that wireframes aren\u2019t prototypes more than once during your career.<\/p>\n
\nWireframing allows all stakeholders to get on the same page before an app or webpage is built out with code. This saves time because developers won\u2019t have to re-do their work if the functional prototype isn\u2019t to the designer\u2019s liking. It also saves money because companies won\u2019t have to pay for as many design phases.<\/p>\nWhen should I wireframe?<\/h2>\n
The 3 types of wireframes<\/h2>\n
\nUse:<\/strong> a starting point, mapping user flow, deciding navigation layout, explaining initial concepts<\/em><\/p>\n
\nUse:<\/strong> explore design ideas, establish spacing and buttons, establish user flow<\/em><\/p>\n
\nUse:<\/strong> exploring complex concepts, finalising design features for prototypes, user testing<\/em><\/p>\nTop 7 wireframing tools<\/h2>\n
\nSketch<\/a> might be the most popular digital wireframing tool. Designers can combine artboards and vector design shapes to create pixel-accurate wireframes efficiently. Unlike Balsamiq, there\u2019s no UI library.<\/p>\n
\nBalsamiq<\/a> is another popular wireframing tools. Its interface is minimalist and clean. Balsmiq uses a static canvas with drag-and-drop tools for a simple, but not pixel-perfect, experience. It also offers auto-alignment, making it easy for even beginners to use. With a built-in UI component library, you can test out your design on various screen sizes too.<\/p>\n
\nInvision Freehand<\/a> allows you to digitally create a \u201chand-drawn\u201d wireframe using your cursor. Or you can add basic images and shapes to a template. You can move your work from Invision Freehand over to Sketch and Photoshop, too.<\/p>\n
\nPhotoshop<\/a> is a more advanced option for wireframes. Designers can create pixel-perfect wireframes using their own components or a third-party kit. This one has a steep learning curve, but once you understand it, you\u2019ll easily be able to create high-fidelity wireframes quickly and beautifully.<\/p>\n
\nIf you don\u2019t want to seek out UI components or make your own, Marvel<\/a> offers pre-designed sections to help you rapidly create wireframes and prototypes. It also has a handy comment feature, allowing your co-workers to easily comment on your design.<\/p>\n