Rosenverse

This video is only accessible to Gold members. Log in or register for a free Gold Trial Account to watch.

Log in Register

Most conference talks are accessible to Gold members, while community videos are generally available to all logged-in members.

Pro-level UI Tips for Beginners

Gold
Friday, September 9, 2022 • DesignOps Summit 2022
Share the love for this talk
Pro-level UI Tips for Beginners
Speakers: Billy Carlson
Link:

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."

Ask the Rosenbot
Briana Thomas
The Quiet Force: Uncovering Hidden Leadership in High-Impact Design Teams
2024 • DesignOps Summit 2024
Gold
Maish Nichani
Sparking a Service Excellence Mindset at a Government Agency
2021 • Civic Design 2021
Gold
Amelia Cole
Data-Prompted Interviews
2021 • QuantQual Interest Group
Jay Bustamante
Navigating the Ethical Frontier: DesignOps Strategies for Responsible AI Innovation
2023 • DesignOps Summit 2023
Gold
Sarah Coyle
Design and Analytics with Sarah Coyle
2020 • DesignOps Community
Ali Jeffery
How DesignOps Helped Enable Wall Street to Work Remotely
2020 • DesignOps Summit 2020
Gold
Patrizia Bertini
Designing Within the Lines: How the EU AI Act Can Spark Better AI Innovation
2025 • DesignOps Community
Kristin Skinner
Theme 2: Introduction and Provocation
2024 • DesignOps Summit 2020
Gold
Josh Clark
Sentient Scenes and Radically Adaptive Experiences
2025 • Designing with AI 2025
Gold
Yasmine Khan
Checking Bias and Listening to Financially Vulnerable Americans
2020 • Advancing Research 2020
Gold
Nathan Shedroff
How Will Design be Taught When the Schools Shut Down?
2026 • Rosenfeld Community
Tamara Hale
War Stories LIVE! Tamara Hale
2020 • Advancing Research 2020
Gold
Steve Portigal
Looking Back…to Look Ahead
2024 • Advancing Research 2024
Gold
Marc Rettig
Discussion
2015 • Enterprise UX 2015
Gold
Jemma Ahmed
Democratization: Working with it, not against it [Advancing Research Community Workshop Series]
2024 • Advancing Research Community
Sofia Quintero
Beyond Tools: The Messy Business of Implementing Research Repositories
2022 • Advancing Research 2022
Gold

More Videos

John Cutler

"Everyone is circling around similar topics but in very different ways—there’s a battle of models but more similarities than differences."

John Cutler

Oxbows, Rivers, and Estuaries: How to navigate the currents of change (without burning out)

December 3, 2024

Darian Davis

"If you’re generating buy-in, don’t forget what it will mean for your difficult stakeholders—they may have external pressures you don’t know about."

Darian Davis

Lessons from a Toxic Work Relationship

January 8, 2024

Dave Gray

"Executive air cover is having someone in a senior role who protects and supports the design team from other business pressures."

Dave Gray

Group Activity: Making Sense of DesignOps

November 7, 2017

John Cutler

"Quality is value to some person who matters."

John Cutler

The Alignment Trap

November 29, 2023

Abby Covert

"Diagrams help when we feel stuck—providing stability, transparency, understanding, clarity, and kindness."

Abby Covert

Stuck? Diagrams Help

October 27, 2022

Mark Interrante

"Side-pav proposals answer what’s going on, why it matters now, what you propose, what action to take, and what benefit comes from it."

Mark Interrante

Collaboration Flows in Product Development

June 9, 2017

Devon Powers

"Afrofuturism shows us the future must reckon with the past and center difference and diversity."

Devon Powers

Imagining Better Futures

March 9, 2022

Prayag Narula

"Unbiased qualitative research does not exist. The best we can do is acknowledge and minimize biases."

Prayag Narula

How to Empower Your Designers to Do Good Research – And Why You Want To

June 10, 2022

Peter Van Dijck

"Your short term memory is the context window; too big, and the model has trouble accessing everything."

Peter Van Dijck

Hands on AI #3: Claude Code for UX people

October 22, 2025