Expand your prototyping knowledge

10 tips to improve your wireframes in the web design process

10 tips to improve your wireframes in the web design process

Are you looking for a way to enhance the wireframing phase of your web or software design process? Read on! We’ve got just the thing!

What’s that you say? “Wireframes are dead?” Nonsense! 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 10 tips and tricks to improve the essential process of wireframing. #winningwithwireframes

1. Identify the problem

At the beginning of the design process, there is a tendency to think about solutions, before the actual problem is tackled. A customer request – “make the logo bigger” – is not identification of a problem, it’s actually a proposed solution without raising awareness of the bigger picture issue.

Imagine you’ve got a great idea and you’re thinking of jumping straight into coding your product. Don’t do it! The thought of being able to get straight on with developing something may seem temping, but…*fools rush in* Web and software projects are never that simple and it won’t be long before a handful of problems – some small and manageable, others bigger and hairier – get in the way.

So what’s the solution? A wireframe. With a wireframe, you can identify the problem and visualize your main objective in an efficient way, as well as saving yourself a lot of effort in the meantime. It’s always easier to make changes to an early draft or initial framework than to hundreds of thousands of lines of code. With a well-made wireframe, you can avoid errors, changes and rework, at the same time as understanding the need for your product from the very beginning. Visualizing an idea with the help of a wireframe prompts you to ask questions and triggers new ideas that you might not have considered beforehand.

2. Set a deadline and stick to it
If you want to keep a project moving, set aside predefined periods of time and decide on a final deadline(s) for your deliverables and keep to it. The initial, early wireframing session could be one day or several, depending on the size of the application or webpage being designer. And then of course, there will be iterations, and more iterations after stakeholder feedback and user testing. Depending on your process, set a period and live by your own rules. With this mindset, you’re setting yourself off down a more organized and systematic design path—efficient design, better product.

3. Choose functionality over beauty (at least for now)

Woah there, slow down! The aesthetics can wait! Get that initial framework right first. By creating easy to visualize wireframes, you allow your clients to better understand what you are presenting. There are variations in how wireframes are presented and this is reflected in the various tools available. However, the primary task of the traditional wireframe is to define the usability and functionality of the product in mind. It is for this reason that they are worked on prior to the final design, where color, contrast, typography etc. is dealt with.

4. Consider the content

Even though wireframes don’t necessarily focus on the details, you’re still going to want to home in on some of the atomic elements and features of your final end-product. If your wireframes aren’t sketches, be realistic about the amount of content that will be added to the page. This holds true for the number and length of links in the navigation too. If possible, use accurately sized fonts, images and graphics, and consider what will happen to the design when more content is added. The last thing you want it stakeholders thinking that heaps and heaps of extra content can be included.

5. Keep everyone in the loop

One of the key objectives of wireframing is to communicate an idea. Keep your wireframes simple and make sure that they fulfill their purpose of communicating and translating ideas.

It’s important that everyone involved in the process, from designers and developers to stakeholders and users has a say and can give feedback. A wireframe can act as a blueprint with which designers, developers, architects and project managers can work on to get everyone up to scratch. so allow it to work its magic. An early wireframe should aim to gather feedback, a second should show how this feedback has been taken into account and implemented, and the final wireframe should demonstrate more polish and concrete ideas, before a high-fidelity mockup or prototype is built.

Download Justinmind today and get your wireframes up to scratch now!


6. Think about users, always!

Even if you’ve got the functionality sorted, don’t forget about the user experience. Mistake! Usability and user testing is essential, even at early stages of wireframing, with low-fidelity models. It is essential that the value to the user is the same as your own intended value! But how do you capture the user’s needs?

The first step towards capturing the user’s needs is to understand your target users and customers, using personas. Personas are fictional characters used in design and typically have a name and picture; relevant characteristics such as a role, activities, behaviors, and attitudes; and a goal, which is the problem that has to be addressed or the benefit that should be provided. You could also try to develop user stories to fully understand all the types of your target users and customers. After all, user stories want to tell a story about the users using the product.

You + Us + Them = Something Useful

Pick Your End Point: if you can define these personas and write the right user stories, you can then incorporate the new-found knowledge into your wireframe. What are you left with? Something that your users will genuinely want and need to use.

Working out who the potential end-product users will be can help you to understand what your wireframe needs to be: e.g. what level of fidelity is required. Remember that there’s alwayys a relationship between the level of fidelity and type of feedback.

7. Aim for consistency

A consistent app or webpage is always helpful, to users, developers and designers alike. Customer loyalty is built with trust, and trust requires consistency. Consistency makes the world go round, and, of course, sites easier to use. From the point of view of the user, it removes uncertainty and builds trust. For instance, they’re more likely to revisit your website if they can easily navigate it the first time round. Repetition of groups of elements can therefore be useful and clarify things to users.

8. Integrate with 3rd party tools

Choose a tool that allows you to perform user tests and import real data. This is an important point as stakeholders tend to get more involved in the review of a wireframe if they see real data in it. Justinmind allows you can import real data and run a user test on your wireframe to evaluate interactions, features and the overall experience in real-world. Check out our recent integration with leading user research and user testing platform, Validately.

9. Host your wireframes yourself

Pick a tool that allows you to host your wireframes on your own servers, for added security and personalization. This is particularly important when working with sensitive or confidential material. Stakeholders will feel more comfortable if your work can be configured to comply with their specific needs.

With Justinmind Enterprise, your entire organization is able to collaborate on-premise behind your corporate firewall. You can also password protect each of your wireframes for added security.

10. Pick the right tool, period…!
Using the wrong tool to build your wireframe can not only ruin your initial design and cause rework, but it can also spoil your chances of reaching the next design level: the high fidelity prototype. Putting things on paper is often a good way to start throwing together ideas and concepts. However, you should be thinking about moving on to hi-fi wireframing and prototyping as the project evolves. As soon as your stakeholders want more, want to see a more realistic model, you will need a tool that allows you to build in dynamic content, interaction and animation.

Justinmind is a comprehensive wireframing and prototyping platform that allows you to work up from low-fidelity wireframes until you have a high-resolution, high-fidelity prototype that really represents your final product to everyone: your team, your stakeholders, and your users. If you haven’t already, try it out for yourself today.download-justinmind-prototyping-tool-banner-1

Emily Grace Adiseshiah

About the Author

Emily is Marketing Content Editor at Justinmind

Comments are closed.