Wireframing
Design
Art

Wireframing

How to Do it Just Right

Dan Petrenko's portrait
Dan Petrenko
Head of Customer Success
Wireframing

Wireframing is very important. You do not go straight to design without them. Let’s talk about why and how, as every designer should know and follow these rules.

Why

Why Wireframes give you, your colleagues and developers the information about the specific page or element: the layout, position of elements, structure and what will be present on it. It specifically tells you what and how it will look in design. Wireframes help you plan the layout of your project without any distracting elements like colors. They are usually done in grey tones, but you are free to make them in any other. Important: do not make them colorful, as you are getting away from the main idea of wireframing: building the skeleton of the future pages. You have to do it in neutral tones, okay? There are also two types of wireframes: low-fidelity and high-fidelity: Low-fidelity wireframes are very basic, and use shapes only to describe where the content and UI will be. It is used to plan the initial layout. High-fidelity wireframes are usually filled with content and UI approved. It has everything to start the actual design.

How

How Research. Look through the competitors’ websites and try to learn whatever you can from their success, while jotting down what they’ve got wrong and what you will do better. It is a good practice to start your research with this. Inspiration. Draw some inspiration from your favorite websites. We have discussed it in a post, so check it out if you haven’t already and learn to control your inner demons! User Flows. It will help you to quickly build the wireframes without stumbling somewhere in the middle not knowing where to go next. User Flows are maps that guide you through the paths users can take upon entering the website. Decide on fidelity. If you have time, you can do low fidelity first, and then go to the high fidelity. Most of the time, designers choose to do high fidelity right from the start, especially if all of the content is already available. Create a layout. Create a main UI to be used on every screen of your project. Add elements. Add unique or specific elements to each screen. Fill the content. If you already have it, that’s great, fill all the screens with it. Test. It is very important to do the testing and ask others for feedback and their opinion. It is an awesome idea to talk to your QA specialist and let them take a good look at your wireframes. They will consult you and give advice on how you can improve your UI. Now you know all the important but constantly overlooked steps on how to do wireframes. Be sure to do them, allright? You’ll see, your projects will be faster, more efficient and with better UIs. Best regards, Movadex team