8 Wireframe Tips Every Designer Must Know

The wireframe is a process of drawing and mapping out the user journeys in a low fidelity drawing/sketches. Think of it as scribbles of boxes, writings. Sometimes there is color, sometimes there aren't but that's not really the whole point of a wireframe.

The wireframe is useful to show people how our design works and how are we taking users through every step.

if you google the word "Wireframe", you will see images like this :

example of wireframes

And in reality, yes, most wireframes look something like this.

Sometimes some designers will use digital drawing based on simple shapes, but you get the idea. They are low fidelity.

In this article, I am sharing tips on how to create awesome wireframe! Let's go!

1. Make sure it is clear

You want your wireframe to be as clear as possible. Even if it should be low-fidelity, doesn't mean it has to be low quality. The main goal of the wireframe is that people can understand your idea. If you make scribbles and handwriting that are very unclear, your wireframe won't serve its function.

In this demonstration, I make the criteria to be as exact as researchers would use when they conduct a healthcare survey

2. Make the content as detailed as possible

The drawing can be low fidelity, but I think it is so much better if your content can be highly detailed. For example, if you want this area to be filled with the description of the magazine, write an accurate magazine description there. Yes, you can draw some lines to show that the texts will be here but having a highly detailed content can make whoever seeing the wireframe understand even better and easier and it may also skip some questions such as "what kind of text will be there?"

Sample of detailed wireframe. Even in graphs, explain which legend for which bar.

3. The content has to make sense

If your wireframe includes some calculations and some specific result, then show that in your wireframe as well. For example, item price + shipping = total price customer has to pay. If the item price is $5 and shipping is $5, the total should be written $10. Just because this is a wireframe, you should not ignore the logic, or else whoever's reading the wireframe may get the wrong idea. For example, if you simply write item price $5, shipping is $5 and the total is $13, some questions might appear such as "why is there an additional cost that is hidden? Is that part of the design? Is that intentional?".

Example of logical content. 75+45 = 120. This has to be applied in wireframe.

4. Have a naming system

Every screen you draw has to have a name and every flow has to have a name. For example the flow of user "sign up to the platform" is called "Flow A", then the first screen in this flow can be called A1, the next screen will be A2, and so on. This is done to ensure flow is clear and that whoever reading this wireframe can have something to refer to. For example, they might ask "What would the content be in screen A2?" , instead of finding it hard to explain which screen are they referring to like "What would the content be in the screen over there on the top, the right, with that square thingy?". Or it could also be they have a problem with a certain flow, then they will ask like this: "I like the whole user journey but I find flow B to be a bit problematic". It will be easy for you and to whoever reading to refer to which screen and which flow when there are questions or further discussions needed.

5. Avoid using color unnecessarily

It has been said over and over again but I think designers still want to use color unnecessarily in wireframe. What I mean by unnecessary is using color for decorative purposes when the wireframe itself does not support decoration purposes. It is meant to be understood. The use of color might cause unnecessary distraction and concerns such as "I like the whole flow but the color is bad" and then you might reply "yes these colors will be decided later". In this case, why show it in the wireframe in the first place? Colors also take some time to generate and with the time it takes to generate color, it is much better that you spend the time to get the content and flow right.

example of a necessary use of color in wireframe. This is to highlight which tab is active.

6. Aim to have the least amount of question as much as possible

Keep this in your mind. When you show your wireframe, you want the least amount of questions asked by other parties. You want only quality and extremely necessary questions asked. For example, you don't want questions such as "Why is the content in other languages? Is that auto-translate?" or "Why is the content says Female but the radio button is selected on Male?". Instead, you want only quality questions asked such as "I like how users don't have to click any button to generate content but will your development side can handle all the requests? Because typically user do it fast and they are expecting to see a lot of content in such a short period of time.". What I mean is don't tell your stakeholder "hey don't ask me low-quality question" but make your wireframe so clear that your stakeholder doesn't feel like asking those kinds of questions.

7. Research to know what kind of UI component will be used

This is an obvious one but I think some designers (including myself) might still be missing out. If your content requires a dropdown, use dropdown UI. Dropdown usually would have box, text, and arrow on the side. Don't put a plain box with the text because whoever's reading the wireframe might think that is some text field users have to type themselves. It is unclear, misleading, and raises questions that are skippable.

8. Keep them consistent

Again, just because it is a wireframe, that doesn't mean you ignore everything to the point the other party doesn't understand your idea at all. If every other page that has the same context and state has the logo on top, keep the logo on top. If you have one page with the same context and state has no logo on the top, this will raise some questions such as "why is there no logo on this page?" which you will reply "oh there will be!". In this case, include the logo. Only exclude the logo when you have a clear and strong reason not to make it consistent such as "Yes although the state seems similar, this page cannot have a logo on top because user is actually going to other platforms".


You have read this far. Thus, you deserve a BONUS TIP!!

9. Use relevant, non-offensive names.

If your design consist of people's name, refrain from using offensive or fantasy names, don't use fantasy names such as "Chewbacca" or "Han Solo" or "Harry Potter". And of course, don't use offensive names such as a German nazi leader name or any infamous person. There are literally millions of names you can use that are non-offensive and still relevant.

In a bigger company, there are extra rules that might apply. For example, if you work in Microsoft, do not use names containing "Bill" and/or "Gates". Same goes to facebook, apple, and so on.

It is just professional to refrain from using these kinds of names in your wireframe or any of your designs.

I hope you find all these tips insightful!

This is not a sponsored post but I think I have to introduce you to the best wireframing tool I found.

If you want to make clear and easy wireframe, try Balsamiq!

Balsamiq is a tool to make wireframes. Yes, especially just for wireframe!

It is super easy because you only have to drag and drop UI components that are relevant to your idea and edit the content yourself. With this, you can have more time thinking about user flow, the logic, perfecting the content, and less time on designing the interface.

Its low fidelity hand-like drawing makes it easy for people not to focus on the small UI details such as alignment, size, padding, etc. But at the same time, it is clear enough to read and understand.

Balsamiq also has the cloud version so your team can all work at the same time!

Thanks for reading and see you all in my next post


79 tampilan0 komentar

Mau website kayak gini GRATIS ?

Klik disini