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
"Can you show me your process, not just your portfolio? That shows me your real design thinking."
Adam Cutler Karen Pascoe Ian Swinson Susan WorthmanDiscussion
June 8, 2016
"We don’t get upset when users say one thing and do another, but we freak out when our leadership behaves that way."
Peter MerholzThe Trials and Tribulations of Directors of UX (Videoconference)
July 13, 2023
"If you haven’t designed who your teams are and who your players are, expecting people to comply with standards won’t work."
Lisa WelchmanCleaning Up Our Mess: Digital Governance for Designers
June 14, 2018
"Policy change is the backbone of effective climate strategies in urban areas."
Vincent BrathwaiteOpener: Past, Present, and Future—Closing the Racial Divide in Design Teams
October 22, 2020
"OKRs are a tool for each of us to tidy our house and focus on what’s important."
Brenna FallonLearning Over Outcomes
October 24, 2019
"Most organizations are still asking design questions at a global level; we need to be hyper-local now."
Tricia WangSpatial Collapse: Designing for Emergent Culture
January 8, 2024
"Proto personas created by cross-department participants helped us build unbiased, relevant survey questions."
Edgar Anzaldua MorenoUsing Research to Determine Unique Value Proposition
March 11, 2021
"With proper maintenance, knowledge becomes a vehicle that probes the most hidden spaces of possibility and brings the best decisions to the surface."
Designing Systems at Scale
November 7, 2018
"The conversion design process creates collective knowledge, which gets reinfused to strengthen future experiments."
Erin WeigelGet Your Whole Team Testing to Design for Impact
July 24, 2024
