What’s that you say? “Wireframes are dead?” No! Website Wireframing is an important phase in any screen, UI, or web design process. Whether it’s just a quick sketch on paper or you’re building a high-fidelity prototype, incorporating some form of wireframing within your workflow is a critical step.
This article will give you 27 Tips and Tricks to improve the essential process of wireframing.
1. Be Clear About Your Objective.
Sadly, website designing projects are rarely simple and anyone with experience will know what a myriad of unforeseen challenges and issues awaits you if you go down this route. A website wireframe helps you identify issues in a way that is time and cost-effective. The process helps to create an understanding of the application. The final output will be a blueprint from which developers, architects, designers, and project managers will work and makes sure everyone is in sync.
2. Be Selective and Keep it Simple.
When we have lots of new ideas, it’s easy to try and make them all work together or confuse elements of one idea with another. Give each idea their own platform.
3. Make it Functional, Not Pretty.
The variations in how website wireframes are presented reflect in the various tools available. Technically, it is about the functional parts of an application. For example, that a page will have 5 textboxes and 3 buttons. It’s about function not form.
4. Don’t use color. If you do, use it intentionally.
Colors are mighty! But, it can also be distracting at the same time. If you use color, use it sparingly and consistently.
5. Draw on Your Experience.
Skills in website development or website design are not really necessary. All anyone needs experience in using web applications or websites. The more the experience, the better it is.
6. Decide Who’s In Charge.
Make sure the one who owns the website wireframe process(the one with the idea and vision who understands the end goal), keeps it up to date and managing feedback, changes, etc.
7. Never Wire Alone. Involve Everyone.
When we liberate ideas, their potential for greatness doubles. Many a time, you’re not the expert, so get over your ego and be great together.
8. Set a Deadline for Completing the Wireframe.
The initial website wireframing session could be one day or several depending on the size of the application. But set a period, stick to it.
9. Consistency is Key.
Your wireframes are not meant not distract, but to facilitate. One of the best ways to do this is to be consistent with things like delivery, spacing, and typography.
10. Use Actual Content.
Don’t have content? write it! Content writing is a design skill, it will help you understand the client’s story better.
11. Keep it Clean.
If a particular web page requires two text boxes and a button then it should have just that, no more, no less.
12. Avoid Designing Your Wireframe Too Much.
Website Wireframing has nothing to do with presentation or design, it’s all about the functional way in which something operates. Trying to avoid anything that could be construed as design, always distract the audience. Add a little blue just to try and make it more interesting and you will have a half an hour conversation about the merits of blue. Website designs should be left to designers.
13. Set clear expectations.
Negotiate with the client on how your website wireframing would be used. If a client’s expectations are not met, it doesn’t matter how ingenious work is, they will not hear you. The best way to proactively avoid failed expectations is to communicate them clearly and often.
14. Think About the User while Designing Website.
It’s easy to get caught up in creating a website wireframe and forget about the user. The functions are to be focused on yet it is still important to consider the user experience that is being created. For example, by creating a registration form that is five pages long you probably won’t find that many people fill it in.
15. Don’t Get Lazy.
It is easy to say “the login page is obvious to let’s not included it in the website wireframe”. Make sure your website wireframe everything! Every step counts and none should be ignored.
16. Organise Your Website Wireframe into Sections.
An app or website is often divided into sections such as news, products, and user account. Break up your website wireframe document accordingly for easier reference.
17. Number Your Website Pages.
A website application often consists of a number of processes; a checkout is a good example. Often these are linear but sometimes users can choose different paths such as skipping a step. Number the website wireframing pages in your document and then label which pages a particular action (such as clicking a button) takes the user to.
18. Look for Repetition in your Website Pages.
Consistency within an application is helpful to users, developers, and designers. Repetition of groups of elements can therefore be a good thing. For example, wherever a user enters an address it should be the same fields in the same order. Look for the repetition as you wireframe.
19. Check it All Makes Sense.
The final document should be easy for anyone to follow. Ask at least one person who has nothing to do with the project if they understand it.
20. Communicate functionalities and interactions statically.
Wireframing and prototyping are amazing tools, but they serve very different purposes. Prototyping is more time-intensive than wireframing. Key functionalities or interactions can be easily communicated statically. Ask the client what they need. If user testing is an important part of the project, prototyping may get you far. The key is to know when you’ve crossed over to prototyping and be deliberate about it.
21. Ads are Functional.
Many sites include advertising for monetization, this may be as simple as Google ads but it is functional and not design, so include it.
22. It’s Not Just the Public Site.
Many sites have an administration area for managing content, viewing registered user profiles, resetting passwords, etc. This may not be viewed by many people but it is still important. Sometimes it can contain data that is not publicly available (such as a user account enable button). This is important information to developers when designing the database.
23. Know When to Stop.
Make sure all relevant stakeholders have the opportunity to give feedback but don’t turn this exercise into painting the Sistine Chapel. Typically I would say three drafts should get the job done. The first gets the idea onto paper. The second reflects feedback from other parties such as developers and designers. The third should be the final polish.
24. Practice non-attachment.
Don’t get too attached to your wires, they’re not glamorous portfolio pieces. With rapid ideation, we must be willing to entertain change and pivot often.
25. Choose the Right Tools.
Paper and Pen are often the way to start. It is much easier than using a computer. It lets you get thoughts and ideas down as the concept evolves. Use the tool you’re most comfortable with. Developers for example may use Microsoft Visio, Designers Adobe Fireworks, PowerPoint.
The website wireframe should be a document, rather than something interactive (like design, it could be a distraction) and therefore creating HTML may not be the best thing.
26. Avoid unnecessary barriers to success.
Don’t let the program be a barrier to setting your ideas free, if you’re using a program like Axure. Take time to learn the basics or choose a more natural medium like whiteboarding or sketching.
27. Consider Dependencies.
Everyone knows what a shopping cart process is, right? That is why it’s easy to wireframe and put aside. What if you’re using a third-party payment provider such as Google Wallet? That may influence how parts of the website must work. Research the areas where there will be dependencies and make changes accordingly. It’s always easier to do it now than later.
