Tips for making better wireframes for your website

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 a 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, reflects in the various tools available. Technically, it is about the functional parts of an application. For example, that a page will have 5 text boxes 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 same time. If you use color, use it sparingly and consistently.

5.Draw on Your Experience.

Skills in website development or website design is not really necessary. All anyone needs is 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 understand 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. Often times, 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 you 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 is to be focused on yet it is still important to consider the user experience that is being created. For example, 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 let’s not include it in the website wireframe”. Make sure your website wireframe everything! Every step counts and none should be ignored.

16.Organise Your Webiste 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 page 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 monetisation, 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 is 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 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 to a side. 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.