Visual Design Articles & Videos

  • Scroll-Triggered Text Animations Delay Users

    When misused, animations intended to add aesthetic appeal slow down content consumption and get in the user’s way.

  • Flat-Design Best Practices

    Avoid the negative side effects of flat design by clearly differentiating between clickable and unclickable elements.

  • Wireflows: A UX Deliverable for Workflows and Apps

    Wireflows are a combination of wireframes and flowcharts. They can document workflow and screen designs when there are few pages that change dynamically.

  • Cards: UI-Component Definition

    A “card” is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card.

  • Visual Indicators to Differentiate Items in a List

    Users are 37% faster at finding items within a list when visual indicators vary both in color and icon compared to text alone. If choosing between using color or an icon, icons with strong information scent perform better than color alone.

  • Trustworthiness in Web Design: 4 Credibility Factors

    The methods that people use to determine trustworthiness on the web have remained stable throughout the years, even with changing design trends.

  • The Anatomy of a List Entry

    To support scanning and product comparison, item descriptions on listing pages should have a visual design and layout that preserve content priorities.

  • Front-End Style-Guides: Definition, Requirements, Component Checklist

    Front-end style guides help efficient design and testing, and enforce UI consistency. We present 8 style-guide requirements and 25 common components.

  • Young Adults Appreciate Flat Design More than Their Parents Do

    18-to-25-year olds gave slightly higher ratings of flat designs than older adults did. That increased aesthetic appeal may not be worth the cost of flat design.

  • Using the Microsoft Desirability Toolkit to Test Visual Appeal

    Measure people's attitudes toward a user interface by a controlled vocabulary test: give users the list of product reaction words and asks them to select those that best describe the design.

  • Website Logo Placement for Maximum Brand Recall

    Users are 89% more likely to remember logos shown in the traditional top-left position than logos placed on the right.

  • Usability Testing of Icons

    To ensure that people understand the meaning and purpose of icons, conduct multiple types of tests at various stages of the product-development cycle.

  • The Illusion of Completeness: What It Is and How to Avoid It

    Users can think they see the entire web page, although additional content exists off-screen. Designers must help users discover all relevant information.

  • Long-Term Exposure to Flat Design: How the Trend Slowly Decreases User Efficiency

    Clickable UI elements with absent or weak visual signifiers condition users over time to click and hover uncertainly across pages — reducing efficiency and increasing reliance on contextual cues and immediate click feedback. Young adult users may be better at perceiving subtle clickability clues, but they don’t enjoy click uncertainty any more than other age groups.

  • Navigation: You Are Here

    You-are-here navigation consists of signs that help orient website visitors as they explore the site. Many websites need stronger location indicators.

  • Ensure High Contrast for Text Over Images

    If you place text over a background image, make sure it’s readable by providing adequate contrast. Subtle tweaks can increase the contrast without affecting the overall aesthetic of the site.

  • Which Comes First? Layout or Content?

    Avoid awkward and difficult page layouts by fitting flexible templates to content whenever possible. Test often during design, and plan to scale up.

  • Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users

    Flat design is a web-design style that became popular around 2012. It is still widely used today, and its overuse can cause serious usability problems.

  • Mobile Faceted Search with a Tray: New and Improved Design Pattern

    Displaying faceted-search controls on mobile devices in a ‘tray’ overlay is a new effective solution to the challenge of showing both results and filters on small screens.

  • 4 iOS Rules to Break

    Page control (dots), Submit at top, and the Plus (+) and Move icons are 4 common iOS patterns that cause usability problems in testing.