fbpx
WE CREATE BRANDS PEOPLE L♥VE
Share

How to design better wireframes? ⁠


Tegra - February 14, 2020 - 0 comments

Practical guide to better wireframes. 
How to translate high-level artefacts into professional-level wireframes?

⚡️Design Tips ⚡️ How to design better wireframes? ⁠

Courtesy of @tomkoszyk

When talking with less experienced designers I noticed that wireframing can be the trickiest part of the design process for them.⁠

This is the first phase of the design process when you stop thinking about the interface on a high level. Now it’s time to translate content and functions into graphical interface element and arrange them on the canvas.⁠

What are the most commonly spotted mistakes? From my perspective: ⁠

✅ Using not well-suited design patterns and interface elements⁠
Example: using a hamburger menu when tab bar navigation would suit better⁠

✅ Being not consistent and careful ⁠
Example: using inconsistent design tokens like margin and padding values across the wireframe⁠

✅ Thinking about specific elements in separation from the rest⁠
Example: Placing section header closer to the other section than its content⁠

Here’s a quick step-by-step process for learning how to design better wireframes: ⁠

1️⃣ Get familiar with Gestalt Psychology ⁠
2️⃣ Learn 10 Usability Heuristics from nngroup.com⁠
3️⃣ Study Material Design Guidelines at Material.io⁠
4️⃣ Analyse apps that you use on a daily basis and their design patterns⁠
5️⃣ Find a mentor, more experienced designer who’ll be willing to provide you with feedback⁠
6️⃣ Be consistent! aka use the grid and keep your margins, padding or type sizes consistent⁠
7️⃣Iterate, practice makes better! ⁠

Wireframing is… 
often the most challenging part of the design process as you start thinking visually. To design great wireframes, you must master two things: 
 - Principles 
Basic rules and ideas which are describing how people perceive visuals and interactions. 
 - Patterns 
 Describes Interface Design good practices: solutions with which people are familiar, like hamburger menu.

Wireframing is…

often the most challenging part of the design process as you start thinking visually. To design great wireframes, you must master two things:
– Principles
Basic rules and ideas which are describing how people perceive visuals and interactions.
– Patterns
Describes Interface Design good practices: solutions with which people are familiar, like hamburger menu.

Principles Gestalt Psychology 
We all make sense of things by seeing a whole rather than individual parts. 
Gestalt 6 principles describe how people perceive separate visuals (rectangle, circle, line, a text) as a whole (an item on the list) and as such is exremely important for all designers.

Gestalt Psychology

We all make sense of things by seeing a whole rather than individual parts.
Gestalt 6 principles describe how people perceive separate visuals (rectangle, circle, line, a text) as a whole (an item on the list) and as such is exremely important for all designers.

Principles 10 Usability Heuristics 
Created by Jakob Nielsens: 10 general principles for interaction design. They are called heuristics because they are broad rules of thumb. Heuristics are very helpful! in measuring interface usability. 
Visibility of system status heuristic example 
 The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

10 Usability Heuristics


Created by Jakob Nielsens: 10 general principles for interaction design. They are called heuristics because they are broad rules of thumb. Heuristics are very helpful! in measuring interface usability.
Visibility of system status heuristic example
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

Material Design & HIG 
These are great resources describing most common interaction patterns. 
Material.io is the best guide, which should be the starting point for beginner designers. 
You should understand each pattern described here before experimenting.

Material Design & HIG

These are great resources describing most common interaction patterns.
Material.io is the best guide, which should be the starting point for beginner designers.
You should understand each pattern described here before experimenting.

Everyday life examples 
We all use mobile and web apps daily. Many of which may serve as a great inspiration. 
My first tip for beginners is always to analyse what you need to design and take a look at how other products cope with such a problem. Don't try to be over creative before gaining enough experience

Everyday life examples

We all use mobile and web apps daily. Many of which may serve as a great inspiration.
My first tip for beginners is always to analyse what you need to design and take a look at how other products cope with such a problem. Don't try to be over creative before gaining enough experience

Bonus — 4 tools that may be useful in your designer way:

Crello — the simplest online image editor. A simple but powerful tool to create awesome designs for any social media format — posts, covers, graphics, and posters using the best software on the web. It’s easy! A lot of animated designs.
Webflow — all-in-one web design tool that allows users to design, build, and launch responsive websites visually.
Funnelytics — an incredible tool that helps you build the best marketing funnel mapping.
Flowkit — allows designers to create frighteningly fast user flows within Sketch and Figma.

Be free to send us any feedback by reply or reach us in DM on Instagram
Do you want to receive insights using FB Messenger or Telegram or Email? 👈 Subscribe now.

Related posts

Post a Comment

Your email address will not be published. Required fields are marked *