⚡️Design Tips ⚡️ How to design better wireframes?⁠ - By: @tomkoszyk - When talking with less experienced designers I noticed that wireframing can be the trickiest part of the design process for them.⁠⠀ - It's only natural. 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:⁠⠀ - 1️⃣ Using not well-suited design patterns and interface elements⁠⠀ Example: using a hamburger menu when tab bar navigation would suit better⁠⠀ - 2️⃣ Being not consistent and careful ⁠⠀ Example: using inconsistent design tokens like margin and padding values across the wireframe⁠⠀ - 3️⃣ ⁠⠀ Thinking about specific elements in separation from the rest⁠⠀ Example: Placing section header closer to the other section than its content⁠⠀ - What you need to design better wireframes is 3P. You need to learn principles, patterns and then practice. 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!⁠⠀ - Do you enjoy this kind of posts? Let me know what would you like to learn next in the comments!⁠