How to design better 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.
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.
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.
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.
