Home > Prototyping and wireframing > Wireframing do’s and don’ts: 10 must-follow tips for building web and mobile wireframes

Build better web and mobile wireframes with these 10 best practices, from user testing techniques to design team collaboration

Wireframes are beautifully simple. And you know what they say – simplicity is the ultimate sophistication. Or at least that’s what Leonardo da Vinci reportedly said, and if simplicity is good enough for da Vinci it’s good enough for the Justinmind team. We love wireframes!

While web and mobile app wireframes should be kept simple, it’s all too easy to complicate them by failing to follow these 10 golden do’s and don’ts of successful wireframing. Incorporate these wireframing best practices into your upcoming wireframing projects and you’ll notice the improvement in the entire design process.

What is a wireframe and how is it different to a prototype?

A wireframe is the basic skeleton of your app or website. Wireframes have a low-tech look to them – basic shapes, content blocks (although they can incorporate content-first design), navigation flows etc. The building blocks of the final product are first imagined in the wireframe.

1-inspiring-wireframes-prototypes-banking

There are two sorts of wireframe – low fidelity and high fidelity. A low fidelity, click-through wireframe is like the image above – often grayscale with a basic UI aesthetic and a focus on information architecture.

A high fidelity wireframe is also known as an interactive prototype. This is a more advanced prototype that includes animations, interactions, real data, gestures and transitions. Hi-fi wireframes are web and mobile prototypes that look and feel like the finished product.

 


Download Justinmind today and build incredible web and mobile wireframes!

DOWNLOAD FREE


When to use a wireframe?

Lo-fi wireframes are best used internally or with tech-savvy users and potential clients. Showing a wireframe to someone who isn’t familiar with the web or app design process will likely result in questions like “will it say lorem ipsum in the real app?”

Use low fidelity wireframes early on in the design and development process to validate basic functionality, target users, general user flows and behavior, and information architecture.

Use a high fidelity wireframe, or interactive prototype, to carry out in-depth user testing, sell your product idea to investors or clients, test feasibility and validity, align branding and USPs, and more.

What are the limitations of low fidelity wireframes?

Lo-fi wireframes are awesome in their simplicity, but there are some things they just can’t do. They can’t convey interactivity or dynamism, and they confuse user testers sometimes.

What are the limitations of high fidelity prototypes?

If you’re designing with an advanced prototyping tool like Justinmind, there are very few things you can’t do with an interactive prototype. All the functionality of a finished website or app can be mocked up with Justinmind just by dragging and dropping UI elements into the tool interface.

The only limitations to a hi-fi prototype are in how your team use them. They can be time-consuming to create, and designers can get too attached to high fidelity wireframes, mainly because they look so great.

Check out 10 inspiring wireframes and prototypes here

Wireframing do’s and don’ts

Whether you’re working on low fidelity static wireframes or high fidelity prototypes, here are 10 do’s and don’ts that will boost both your designs and your final products.

DO

  • Carry out user research. This is a cardinal rule of any product development project. User research will identify your target users, their needs and their pain points. Without it you won’t know how big your potential market is, or how to reach them, let alone build websites or apps that make their lives better. Build your wireframes on a solid foundation of user research.
  • Build navigation patterns into your very first web and app wireframes. It’s important to reassure the user that they are in the place they want to be. Use breadcrumbs, color or other visual aids to guide users.
  • Categorize information as early as possible, then refine your categories. Mixing different content blindly and expecting the user to sort it out is bad practice. Test your categories on real users using card sorting, then refine your wireframe.  If you can simplify something, do it.
  • Collaborate and listen. Wireframing tools improve team collaboration and facilitate collection of user feedback. Use your wireframing tool to work simultaneously on wireframes, comment on them and make them shareable on any browser or device. Listen to what people have to say about your work and then go back to the wireframe. Hive-mind collaboration is a great way to rapidly iterate.
  • Keep it simple! Take advantage of a wireframe to validate basic functionality and make it as strong as it can be. Don’t over-egg the pudding – simple, strong wireframes convey ideas with force and clarity. Remember, simplicity is the ultimate sophistication.

DON’T

  • Don’t elevate style over substance. The wireframing stage is not the moment to deliberate over colors, or images or anything strictly visual. Leave that to the final stages of UI prototyping, when you’ve got the nuts and bolts down. Validate basic functionality before aesthetics and your workflow will be vastly improved.
  • Don’t get too attached. Web and app wireframes are made to be tossed away. Yes, we know it hurts to trash something you’ve spent time on and think is great, but wireframes are there to help you fail forward, not to fall in love with.
  • Don’t skimp on content. Yes, wireframes are meant to be quick and dirty. But using real content can avoid having to do huge reworks later on in the design (or worse, development) stages. If you don’t have the actual web or app content yet, write up something similar. With Justinmind you can also use real data to drive your wireframing process.
  • Don’t ignore mobile devices. 65% of UK adults access the web on their mobile devices, says eConsultancy. Mobile browsing is far from a niche activity. So start thinking responsive even at the wireframe stage, and ensure your content and features work for every device and every OS.
  • Don’t forget to test wireframes on real users. They may be kind of basic but early stage testing can break open the design process and shine light into dark product corners. Try activities such as participatory design and triading with small groups of users and static wireframes.

Wireframing do’s and don’ts – the takeaway

Wireframes are essential to creating websites and mobile apps that keep users coming back for more. Keeping wireframe simple will make them more effective and your design process more efficient. These 10 tips and a good wireframing tool are all you need to get started.

download-justinmind-prototyping-tool-banner-1

Cassandra is Marketing Lead at Justinmind

Download Free