When I started designing, the only way I knew to begin a web design project was to fire up photoshop & start building the site. That wasn’t the best way then, and that isn’t the best way now. With time I learned that the best designs don’t just look good, but solve real problems at a much deeper level. Designers today are not just designing pages but solving complex problems through interfaces.
Once you have a decent idea of what you want to build and you’re ready to work on the design, the first step should always be to create a wireframe. At the wireframe level, your ideas are young and unpolished, exactly how they should be. Because there’s always a lot which can improve in a wireframe.
Let’s start with the fundamentals. You must have heard the terms wireframes, mockups and prototypes. They might be similar in a broad sense, but as a designer you must understand the difference between the three and never use the terms interchangeably even if your clients do.
Wireframe
Wireframe is a very basic layout made up of just lines and colorless boxes/circles. The purpose of a wireframe is to highlight the information architecture on the page/screen. It builds the framework for designing the navigation system, different sections of the page & global elements like header, footer, sidebar etc. Most of the elements are in simple shapes (e.g an image may be represented by a grey box, a primary button by a dark rectangle and a secondary button by a light/hollow rectangle).
The only exception to that is you should try your best to avoid placeholder lorem ipsum data and use real content instead. More on that later. While most wireframes are static, some tools let you make interactive wireframes which are very useful to understand and fix navigation challenges.
Tools for creating a wireframe: pen & paper, Illustrator, Justinmind, Axure etc.
Mockup
The mockup is where the colors start to show. The rectangles in the project are replaced by actual buttons and images. You apply the brand colors and the proposed visual elements. The typography is taken care of in this step. All this, while still keeping the wireframed structure intact. In simple words, mockups are the higher resolution versions of the wireframe and they look closer to what a user would see on screen later on. Although this is where a client would feel more comfortable, you should understand that making iterations in information & navigation structure would take a lot longer in the mockup stage than it would have taken in the wireframe stage.
Tools for creating a wireframe: Photoshop, Illustrator, Sketch etc.
Prototype
A prototype is usually the last stage of design before it’s delivered to the developers. You build a prototype only when you have all the pages/screens of the project ready. You stitch them up using a tool which makes it interactive. For a client, this is the closest functional model which mimics the app/website they will get at the end of the project.
The purpose of a prototype is to let you (or your clients) test the final product before the developers start working on code. Although this may seem like an unnecessary additional step in your design workflow, this can be really useful in the end. Every hour spent prototyping is worth the effort. Read more about it here.
Tools for creating a prototype: Principle, Framer, Flinto, Justinmind etc.
Now coming back to why wireframing is important. Let’s assume you skipped the wireframing and direct jumped into Photoshop to make a very good looking, pixel-perfect page. The usual way it works is that you replicate the design in a few different colors to let the client have a choice. Simple and straightforward. But this is where the problem starts. If the client says he doesn’t like the way the information is organised and, even worse, if he doesn’t like the header menu you spent pixel-perfecting for three days, you have to spend several days updating the design and maybe even replicating the same changes through all the different colored colored versions. Then you go back to the client, he likes everything except that he wants the sidebar to be on the left instead of the right. Or he might even ask you to try placing the sidebar information in different areas of the site and see which one works best.
You’re back to spending several hours, if not days. You’d have to make the changes in each colored version, move every layer, one by one, and then replicate the design to make several new versions with the sidebar information in different places. At this point, you might be really pissed, but you know what, the client is not the problem, your approach is. If you start with wireframes, you’ll be a lot more confident when you actually start working on the visual design, irrespective of the tool you use.
Think of the wireframe as a blueprint of your app. You might have to explain your clients that they should ignore the branding/colors and focus on the information hierarchy and content structure at this stage. And if it’s an interactive wireframe, they should be testing the navigation structure as well. Keep in mind that it might still be difficult for a client to understand the wireframe properly because they are used to seeing actual products. In that case, you might have to hard-sell the idea to them.
Here are some best practices while creating a wireframe:
- Keep it simple – Start with a simple sketch. Use a pen & pencil and start drawing boxes & lines. Do this until you get a basic structure. It’s as simple as that. Once you feel confident, use a tool to convert it to a digital wireframe.
- Don’t use colors – It might seem tempting (or your wireframing tool might make it easy) but avoid using colors. If needed, use different shades of grey to add emphasis on certain elements on the page/design.
- Use simple shapes – Stick to simple, basic shapes wherever possible. Just use boxes and lines. You can add the rounded corners and drop shadows later.
- Reuse elements – One of the most powerful aspect of a wireframe is the organisation. Since you’re using basic shapes, try to avoid creating new elements as much as possible. Reuse the same buttons throughout the page. Use the same shape+shade for representing images. You may not realise it, but using different shapes/shades to represent the same element in different places might confuse the client.
- Use actual content – This is very important. Unless really necessary, try to avoid dummy content on the wireframe. Remember, content is king. And the design you’re creating should only compliment the actual content and bring focus to it. So you have to start with the real copy and build your design/wireframe around it.
- Take feedback early – The purpose of a wireframe is to let you iterate quickly. So try to involve the client early in the wireframe, preferably when you have the first few pages ready. Let’s say you’re making a 30-page website. You complete the wireframe, and the client wants the sidebar to be moved from left to right, you’d have to redo all 30 pages. You can avoid this simply by sharing the first 2–3 pages with the client and keep creating more pages keeping pace with the feedback.
Wireframes are extremely important in keeping every stakeholder on the same page, especially if you’re an agency and/or work with a distributed workforce. As I mentioned earlier, your wireframes are like an architect’s blueprints which they make & get it approved before building a house. A well-made wireframe is a solid foundation to a product. A wireframe might be able to catch critical workflow problems in the business and conversion process. It also makes you look a lot more professional and organised because you’re working from ground up.
(This article is written on a special request from Justinmind, a wireframing & prototyping app.)
