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
"User experience metrics can give you a well-rounded perspective beyond mere site analytics."
Caroline VizeThe State of UX: Five Lessons from 2021 to Accelerate Digital Experience in 2022
March 9, 2022
"We ran community gatherings with themes, presentations, and breaks, because people needed space to just chat and connect."
Kara KaneCommunities of Practice for Civic Design
April 7, 2022
"We don’t need a north star, we need a constellation that allows us to see the full picture."
Jon Fukuda Ellie KryslDesign Planning and Management Support
October 3, 2023
"Culture plus empathy equals pride—and pride powers the most successful organizations."
Mark TempletonCreating a Legacy: the ultimate experience
June 9, 2017
"Our relationship is like a genuine brotherhood. We hang out almost every day."
Jim KalbachPeace is waged with sticky notes: Mapping Real-World Experiences
June 14, 2018
"Notion really became a single source of truth where you can go for any context around the work."
Scott StephensThe Next Generation in DesignOps Toolsets
July 28, 2022
"Instead of rewarding owners of ideas, reward collaboration."
Cheryl PlatzCollaborative Creativity through Improv
November 7, 2018
"Learning is the foundational design pattern of complex systems. It's emergent, relational and contextual."
Jen BriselliLearning Is The Engine: Designing & Adapting in a World We Can’t Predict
April 16, 2025
"We set a two-year goal to advise leadership on top issues for annual planning, even though we hadn’t figured out all the steps."
Mac SmithMeasuring Up: Using Product Research for Organizational Impact
March 12, 2021