Pro-level UI Tips for Beginners
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 primary tool to guide users through an interface by controlling contrast, scale, color, grouping, and spacing.
-
•
White space around elements increases their prominence and helps users focus on key actions.
-
•
Poor hierarchy, as seen on ESPN's homepage, leads to confusion due to competing visual elements without clear flow.
-
•
The Athletic’s homepage demonstrates effective hierarchy that makes scanning and content selection seamless.
-
•
The 'squint test' or 'blur test' is a simple technique to check if the most important elements stand out visually.
-
•
Proper alignment, especially aligning text with text and images with images, greatly improves the ease of scanning content.
-
•
Grid systems, common from print design to web and app frameworks like iOS or Bootstrap, help maintain proportional alignment and layout consistency.
-
•
Clarity involves three dimensions: clarity of structure (familiar patterns), clarity of content (concise, necessary information), and clarity of action (obvious primary actions).
-
•
Intentional lack of clarity can be used to influence user behavior, such as dark patterns designed to slow down account cancellation.
-
•
Small UI improvements like distinguishing primary vs. secondary buttons, clear input field labels, and removing non-essential fields (like birthdays early in signup) enhance clarity and usability.
Notable Quotes
"Hierarchy is almost subconscious — you can design for how our eyes are naturally drawn to elements."
"The first thing your eyes see is usually the highest-contrast or largest element, then you flow downwards."
"ESPN’s site is a great example of poor hierarchy and alignment — it’s hard to know where to start or where to go next."
"The Athletic’s homepage is very simple, easy to scan, and has a clear flow — one main headline with supplementary lists."
"The squint test helps you see if the right elements are popping on the page without distraction."
"Aligning text with text and images with images sets an easy flow for scanning — mixing them breaks the user’s rhythm."
"All major digital product frameworks have grid systems—use them to keep your layouts clean and consistent."
"Clarity means the interface behaves the way you expect so you can master it quickly."
"Audible’s cancellation process intentionally uses unclear structure and multiple primary buttons to slow users down — a dark pattern."
"Removing unnecessary fields like birthday on signup avoids tripping users up — get them started fast."
Or choose a question:
More Videos
"Songs become methodologies—the way you identify who is at the door is through the song they sing."
Victor UdoewaBeyond Methods and Diversity: The Roots of Inclusion
March 26, 2024
"The system always kicks back—the consequences of our actions unfold over time."
Peter MorvilleThe Architecture of Understanding
May 13, 2015
"Ask yourself, who is not included in this future? Be self-reflexive to reduce bias."
Sam LadnerHow Research Can Drive Strategic Foresight
March 9, 2022
"We created research indexes with search blocks that update over time to help people focus on the most recent insights."
Michelle Bejian Lotia Anne-Marie MorellRolling Out a Repository: How Zapier Centralizes Insights from Across their Organization
March 28, 2023
"When negotiating, bring plan A—show what you need and what good looks like—even if it seems outrageous."
Leisa ReicheltOpening Keynote: Operating in Context
November 7, 2018
"In Toronto it’s now illegal to transmit a Wi-Fi signal in designated public spaces, with penalties for violations—a policy driven by people wanting to unplug from digital life."
Sarah GallimoreInspire Progress with Artifacts from the Future
November 18, 2022
"The task objects are central to a popular conceptual design approach called OOUX."
Joerg Beringer Thomas GeisScaling User Research with AI: Continuous Discovery of User Needs in Minutes
September 10, 2025
"When the design team is organized into coherent teams working across multiple squads, designers feel more supported and less isolated."
Peter MerholzCustomer-Centered Design Organizations
June 8, 2017
"The moment they begin to shift their thinking and make decisions based on that work, they’re actually giving you a seat."
Dalia El-ShimySo You've Got a Seat at the Table. Now What?
March 31, 2020