Visual Design Articles & Videos

  • 5 Design Principles in Context: Stripe

    Every design has 5 key visual design principles. Here’s how they appear in the real website, Stripe.

  • Analyzing Good Designs: Ritual.com

    A close look at how complementary colors, visual hierarchy, and clean imagery come together to make Ritual.com's UI feel effortless.

  • Analyzing Good Designs: Figma’s Shortcut

    In Figma’s Shortcut, typography and other elements are aligned to a grid, a clear visual hierarchy is established, and various design elements are used consistently in the design.

  • Validate Your Visual Design: 6 Methods

    Test your site’s visual design using these 6 methods: 5-second test, first-click test, preference testing, visual design questions after usability testing, eyetracking, and A/B testing.

  • Anatomy of Good Icons

    Icon clarity is shaped by consistent layout, stroke thickness, and the handling of exterior and interior corners.

  • Preference Testing for Assessing Visual Design

    Preference testing is a tool to evaluate multiple design variations, helping you make informed decisions that align with your brand and resonate with your audience.

  • Button States 101

    Understand how button states support usability. Design clear visual cues for each state to guide and inform user actions.

  • Grids 101

    Page grids use columns, gutters, and margins to structure content—boosting layout consistency, readability, and visual flow.

  • Visual Design Principles in Action

    Use the 5 key visual design principles—scale, hierarchy, balance, contrast, and Gestalt principles—to objectively critique and improve designs.

  • Card View vs. List View

    List view allows for easy sorting and is space efficient, while card view is visually engaging and creates effective groupings.

  • Why 90’s Designs Are Coming Back

    Understanding the cyclical nature of design trends allows us to build on the past and fulfill the evolving needs of users. 3 examples of returning trends are neumorphism, dark mode, and gradients.

  • What is Whitespace?

    Whitespace is an effective principle to achieve a balanced design, making it easier for your users to scan and read. Consider using a consistent spacing system and the proximity principle to achieve a balanced use of whitespace.

  • 5 Common Mistakes Junior Designers Make

    There are 5 common mistakes junior designers make. They focus on the look instead of usability, commit type crimes, work outside of design systems, lack confidence when presenting their designs, and ask for feedback too often.

  • Squint Test

    Use the squint test to identify elements that catch attention and assess the visual hierarchy in your design. Ensure high-priority content stands out visually.

  • Visual Design Hacks for the Non-designer

    Make your work look visually compelling by using these visual-design hacks: preexisting color palettes, cohesive icons, and grids for alignment.

  • Balance in UX Design: Symmetry, Asymmetry, and Radial Balance

    The kind of balance you use in your visual depends on what you want to convey. Symmetry is quiet and static. Asymmetry creates energy and movement. Radial balance leads attention to the central point.

  • Visual Design of UX Maps

    Don’t make a UX map pretty for the sake of making it pretty. Invest in creating a visual system for your map then testing it and getting feedback.

  • Visual Treatments that Improve Accessibility

    To design accessible visuals, account for color contrast, don’t rely on color alone, and make interactive elements easy to identify.

  • Clutter-Free Charts

    Clear out chartjunk (unnecessary visual elements) for a more minimalist and understandable data visualization.

  • What is Visual Weight?

    Visual weight measures how much design elements draw attention from the viewer. Objects that are bigger in size, simpler in shape, use dark colors, or have high contrast appear visually heavier.