Summary
Wireframes are a fantastic place to start learning UI Design. They are simple, yet powerful. Harnessing proper UI design principles within your wireframes will allow you to transform your simple sketches into artifacts you can use for user research or kickkstart development. In this session Billy will demonstrate a few simple tips to take your wireframes or designs to the next level.
Key Insights
-
•
Visual hierarchy is the foundational UI principle for guiding user focus through contrast, size, spacing, and placement.
-
•
The squint or blur test helps designers quickly identify what pops in their layouts, revealing hierarchy effectiveness.
-
•
Proper alignment using grids improves scan-ability by grouping related content like text with text and images with images.
-
•
Spacing and white space around elements enhance visual hierarchy and ease of navigation.
-
•
Poor hierarchy and alignment create cognitive overload, making it hard for users to decide where to look or act.
-
•
Clarity involves structure (pattern consistency), content (concise text), and action (clear, prioritized buttons).
-
•
Dark patterns manipulate clarity by obscuring primary actions, increasing user hesitation and confusion.
-
•
Designers should avoid unnecessary input fields (e.g., birthday in sign-up), focusing on frictionless user journeys.
-
•
Alignment remains a challenging principle to communicate and implement for engineers working with responsive layouts.
-
•
Web3 interfaces should still follow core design principles like hierarchy, alignment, and clarity despite new tech capabilities.
Notable Quotes
"Hierarchy is almost designing for our subconscious and how it actually looks at these things."
"If you want to look for hierarchy, do a squint test or blur the image and see what is popping on the page."
"Separating text with text and images with images makes it easy for me to scan all the different content pieces on the page."
"Misalignment throws off users and adds to cognitive load, making it harder to parse information."
"Clarity means the interface behaves in a way that I’m going to expect so it allows me to feel comfortable even when I’m using something new."
"Removing extra text is important — we just need to be very clear and concise to avoid confusing users."
"You can use a lack of clarity intentionally to control the experience if that’s what you want to do."
"If you want to get someone into their account quickly, don’t ask for info like birthday upfront — ask for it later."
"Grids are not just for marketing websites — applications use them too, like Spotify’s album page."
"Web3 design doesn’t fundamentally change the interfaces — good design principles still apply."
Or choose a question:
More Videos
"Knowledge is power; empowering communities leads to better conservation outcomes."
Alex Hurworth Bonnie John Fahd Arshad Antoine MarinDesigning a Contact Tracing App for Universal Access
October 23, 2020
"Investing in new practitioners is mutually rewarding; we learn from their fresh perspectives and reassess what we know ourselves."
Laine Riley Prokay Lisa GordonCarving a Path for Early Career DesignOps Practitioners
September 9, 2022
"You won’t know what success looks like until you put something out there and see how it works in practice."
Eniola OluwoleLessons From the DesignOps Journey of the World's Largest Travel Site
October 24, 2019
"Traditional MBAs are confident about many things that aren’t true, and your research will often challenge their worldview."
Nathan ShedroffDouble Your Mileage: Use Your Research Strategically
March 31, 2020
"Voice control on mobile goes beyond digital assistants and can fully control the device for users who cannot use touch."
Sam ProulxMobile Accessibility: Why Moving Accessibility Beyond the Desktop is Critical in a Mobile-first World
November 17, 2022
"Product and design teams are usually the best initial stakeholders to engage for rapid research programs."
Feleesha SterlingBuilding a Rapid Research Program (Videoconference)
May 18, 2023
"You have the power, like Navy Seals of user research, to influence the biggest issues of our time, one interaction at a time."
Neil BarrieWidening the Aperture: The Case for Taking a Broader Lens to the Dialogue between Products and Culture
March 25, 2024
"Leadership roles have to evolve depending on whether you’re building awareness, influence, capacity, or measuring impact."
John DevanneyThe Design Management Office
November 6, 2017
"Small experiments that fit into existing structures make it easier to involve collaborators and reduce resistance."
Katy MogalBut Do Your Insights Scale?
March 12, 2021