Visual Design Articles & Videos

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

  • The Characteristics of Minimalism in Web Design

    Our analysis of 112 minimalist websites revealed the defining features of minimalism: flat design, limited color schemes, few UI elements, use of negative space, and dramatic typography.

  • The Roots of Minimalism in Web Design

    Many popular web-design trends originate in minimalism, a movement that aims to reduce information overload by presenting content in its simplest form.

  • Low-Contrast Text Is Not the Answer

    Low-contrast text may be trendy, but it is also illegible, undiscoverable, and inaccessible. Instead, consider more usable alternatives.

  • Beyond Blue Links: Making Clickable Elements Recognizable

    Whether you adopt a flat-design style or not, interactive components must retain sufficient cues to suggest clickability. Signaling clickability with cues such as borders, color, size, consistency, placement, and adherence to web standards can give interactive components the proper look.

  • The Fold Manifesto: Why the Page Fold Still Matters

    What appears at the top of the page vs. what’s hidden will always influence the user experience — regardless of screen size.

  • Image-Focused Design: Is Bigger Better?

    Large images are visually appealing, but they can harm the overall user experience if they aren't appropriately prioritized.

  • Animation for Attention and Comprehension

    Moving elements are a powerful tool to attract users’ attention. When designing an animation consider its goal, its frequency of occurrence, and its mechanics.

  • Icon Classification: Resemblance, Reference, and Arbitrary Icons

    The tighter the mapping between icons and the thing they represent, the easier they are to understand, but standardization can also make an icon easy.

  • Icon Usability

    A user’s understanding of an icon is based on previous experience. Due to the absence of a standard usage for most icons, text labels are necessary to communicate the meaning and reduce ambiguity.

  • Beware Horizontal Scrolling and Mimicking Swipe on Desktop

    Even as more sites mimic swiping gestures and incorporate horizontal scrolling in desktop designs, users remain reluctant to move sideways through content.

  • Mobile Navigation: Image Grids or Text Lists?

    For mobile navigation, image grids should be saved for deeper IA levels where visual differentiation between menu items is critical.

  • The Magnifying-Glass Icon in Search Design: Pros and Cons

    People usually recognize that a magnifying-glass icon indicates a search tool, even when it has no label. Unfortunately, showing only the icon makes search more difficult to find.

  • Instructional Overlays and Coach Marks for Mobile Apps

    Instructions in mobile applications must be designed for optimal scannability, as users tend to dismiss them quickly and do not read thoroughly.