Why do we wireframe?
For one, wireframes are completely awesome — while they might take some time, they help visualise, and make the design process a lot more iterative.
Wireframes are a great starting point for any design project.
# Bring clarity to projects:
Helps focus on content, and not aesthetics.
Wireframes are a great tool to get your clients to focus on what you want them to think about, very early on in the design process. They bring a lot of clarity to projects by helping the stakeholders think about what their needs are, helping them define their project goals, and what the product’s primary focus should be.
# Kill problems early:
Through iteration, minor problems are caught early on.
Wireframes help kill problems early on. That’s right. It allows you to map out the functionality of the pages and save time on revisions later. They help you gather feedback and figure out issues before they become a problem.
# Push usability to the forefront:
Empathy is key and wireframes help keep everyone in mind.
It forces everyone to look objectively at a website’s ease of use, conversion paths, naming of links, navigation and feature placement. They can point out flaws in your site architecture or how a specific feature may work.
# Make the design process iterative:
By continuous improvement, you can reach an optimal design.
Instead of trying to combine the functionality/ layout and creative/ branding aspects of the website in one step, wireframes ensure that these elements are taken in one at a time. More iterations lead to a more refined final product.
# Give developers a head start:
Content layout is enough for developers to get started.
Wireframes give the developer a clear picture of the elements they will need to code. How should the layout adjust for smaller-sized devices? What is the hierarchy of the content? How does the navigation respond to smaller screens? All of these questions can be answered by detailed wireframes itself.
Wireframing do’s & don’ts
Do’s
- Keep it simple — You need to eliminate noise
- Focus on content — Aesthetics can be worked on later
- Always collaborate — Use all points of view
- Remain monochromatic — Colours add layers of complexity
Don’ts
- Don’t push pixels — Focus on functionality
- Don’t start digitally — Start with a pen and paper
- Don’t skip features — Make a list of crucial features
- Don’t get too attached — This is meant to be iterative
Types of wireframes
Wireframing is like a relay-race. You need to hand over artifacts multiple times before you cross the finish line. Dive into our simplified take on different types of wireframes.
📝 Paper wireframes
Paper wireframes are a great starting point, and the simplest visual representation of your product. They are the blueprint for design acting as a rough and basic guide to where your content would be placed. You don’t need to be an artist — just get down to it.
Things to keep in mind while making paper wireframes;
- Sketch, don’t illustrate — Don’t focus on specifics, you need to iterate
- Use pencils and erasers — Edit on the fly, avoid pens
- Use dotted grid sheets — They help you draw uniformly
- Collaborate with others — You need all ideas on the sheet
📐 Low-fidelity wireframes
Low-fi wireframes are basic visual representations of a webpage, and present basic architectural features, including some graphic elements as well as some units of actual content. While they might be fairly rough representations, they help remove any details that aren’t necessary, or that could be a potential distraction. Usually, instead of just black and white, they are created in grayscale.
Things to keep in mind while making low-fidelity wireframes;
- Start envisioning content: Explore certain arrangement according to data
- Don’t use images; yet: Images can add cognitive bias to your designs
- Remain monochrome: Leave the colour decision to later on in the process
- Don’t prototype: Remain static and and present to your ideas
📱 High-fidelity wireframes
High-fidelity wireframes hold a lot of detail and boast pixel-specific layouts. They are used to ensure that the designer and client have the same idea about how the final product would look, and what it would say. They are generally saved for the latter stages of the design cycle.
Things to keep in mind while making high-fidelity wireframes;
- Start adding real life copy: Stop using lorem ipsum for your text
- Use realistic images: Don’t use photos of cats for recipe covers
- Practise non-attachment: You can always do that on your wireframes
- Start prototyping: Give your stakeholders a simulation of the end product
Trying to design something your client will love? Wireframes might seem basic on the surface, but they are extremely helpful and save a lot of time and effort in the long run. Wireframes definitely help us get approvals at key stages of the product build phase, and enables us to meet our clients’ expectations.
20 wireframe resources
How can I map the UX for my end user? Where will the UX elements be positioned on the screen? How can I get my client to visualise what I have in mind? These are some of the questions we have hoped to answer so far before diving into our list of wireframe resources with ideas for tools, kits and offline materials to help you design better.
Software tools
- Wireframe.cc — A simple wireframing tool that doesn’t get in your way
- Balsamiq Cloud — Fast, approachable, collaborative wireframing
- Whimsical — Wireframes, flowcharts, sticky notes and mind maps
- Mockflow — Easy to use wireframing software
- Moqups — A web app that helps you collaborate on wireframes
Offline material
- Griddzly — Make your own grid paper with Griddzly
- Sketchize — Pre-made device sketch sheets
- Sketchsheets — Ready to print sketch sheet templates for UX designers
- Sneakpeekit — Printable grids for design wireframing
- Paper + pencil — As the gods intended
Design kits
- Figma kit — A wireframe kit pre-included with Figma for your hi-fi needs
- Form — Free wireframe kit from InVision
- Wireframekit.pro — Easy and fast with ready-to-go with UI wireframe kit
- Contra Wireframe Kit — Open source wireframe kit for design and prototyping
- Source Wireframe Kit — Library of 537 blocks for desktop and mobile
prototyping
Learning ressources
- Tutorial: Creating your First Wireframe
- Wireframing for Beginners
- How to Make your First Wireframe
- The Complete Guide to Wireframing
- Web Design: Wireframes to Prototypes
At the end of the day, as designers we’re here to delight with the products that we build. Wireframes are a small but largely important part of this process. Go on, get exploring.
Did we miss something? Let us know in the comments.
