# visual hierarchy

Published articles for visual hierarchy.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## Meta Just Launched an AI That Uses Websites for You. That Could Be a Big Deal for Web Designers

DevFeed: [Meta Just Launched an AI That Uses Websites for You. That Could Be a Big Deal for Web Designers](<https://devfeed.tech/articles/meta-just-launched-an-ai-that-uses-websites-for-you-that-could-be-a-big-deal-for-web-designers-9272.md>)

Original publisher: [Read original article](<https://webdesignerdepot.com/meta-just-launched-an-ai-that-uses-websites-for-you-that-could-be-a-big-deal-for-web-designers/>)

Author: Noah Davis

Published: 2026-09-09T15:12:00Z

Content type: article

Language: en

Sources: [Web Designer Depot](<https://devfeed.tech/sources/web-designer-depot.md>)

Topics: [AI Agent](<https://devfeed.tech/topics/ai-agent.md>), [User interface design](<https://devfeed.tech/topics/ui-design.md>), [Artificial Intelligence](<https://devfeed.tech/topics/ai.md>), [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [computer-use](<https://devfeed.tech/topics/computer-use.md>), [Document Object Model (DOM)](<https://devfeed.tech/topics/dom.md>), [Claude](<https://devfeed.tech/topics/claude.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [agentic-ai](<https://devfeed.tech/tags/agentic-ai.md>), [ai](<https://devfeed.tech/tags/ai.md>), [ai-agent](<https://devfeed.tech/tags/ai-agent.md>), [ai-agents](<https://devfeed.tech/tags/ai-agents.md>), [ai-automation](<https://devfeed.tech/tags/ai-automation.md>), [ai-tech](<https://devfeed.tech/tags/ai-tech.md>), [artificial-intelligence](<https://devfeed.tech/tags/artificial-intelligence.md>), [browser](<https://devfeed.tech/tags/browser.md>), [browser-agents](<https://devfeed.tech/tags/browser-agents.md>), [cloud](<https://devfeed.tech/tags/cloud.md>), [design](<https://devfeed.tech/tags/design.md>), [design-trends](<https://devfeed.tech/tags/design-trends.md>), [forms](<https://devfeed.tech/tags/forms.md>), [future-of-the-web](<https://devfeed.tech/tags/future-of-the-web.md>), [future-of-web-design](<https://devfeed.tech/tags/future-of-web-design.md>), [human-computer-interaction](<https://devfeed.tech/tags/human-computer-interaction.md>), [meta](<https://devfeed.tech/tags/meta.md>), [meta-muse](<https://devfeed.tech/tags/meta-muse.md>), [muse](<https://devfeed.tech/tags/muse.md>), [muse-ai](<https://devfeed.tech/tags/muse-ai.md>), [ui-design](<https://devfeed.tech/tags/ui-design.md>), [user-experience](<https://devfeed.tech/tags/user-experience.md>), [ux](<https://devfeed.tech/tags/ux.md>), [ux-design](<https://devfeed.tech/tags/ux-design.md>), [visual-hierarchy](<https://devfeed.tech/tags/visual-hierarchy.md>), [web-accessibility](<https://devfeed.tech/tags/web-accessibility.md>), [web-design](<https://devfeed.tech/tags/web-design.md>), [web-development](<https://devfeed.tech/tags/web-development.md>), [website-design](<https://devfeed.tech/tags/website-design.md>)

### AI overview

The article examines Meta's Muse personal AI agent and argues that web designers may need to design websites for both human visitors and agents acting on users' behalf. It highlights semantic structure, accessibility, predictable controls, and trust as important considerations.

### Source excerpt

Your website's next visitor might not be human. Meta's new Muse agent can navigate sites, fill out forms and take action for you--and it could force web designers to rethink exactly who they're designing for.

## Keyboard Navigation and Data Entry

DevFeed: [Keyboard Navigation and Data Entry](<https://devfeed.tech/articles/keyboard-navigation-and-data-entry-9062.md>)

Original publisher: [Read original article](<https://ixdf.org/literature/article/keyboard-navigation-and-data-entry>)

Author: William Hudson

Published: 2026-09-04T00:00:00Z

Content type: article

Language: en

Sources: [UX Daily - User Experience Daily](<https://devfeed.tech/sources/ux-daily-user-experience-daily.md>)

Topics: [User interface design](<https://devfeed.tech/topics/ui-design.md>), [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [data](<https://devfeed.tech/topics/data.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [amazon](<https://devfeed.tech/tags/amazon.md>), [compliance](<https://devfeed.tech/tags/compliance.md>), [design](<https://devfeed.tech/tags/design.md>), [forms](<https://devfeed.tech/tags/forms.md>), [transactions](<https://devfeed.tech/tags/transactions.md>), [usability](<https://devfeed.tech/tags/usability.md>), [visual-hierarchy](<https://devfeed.tech/tags/visual-hierarchy.md>)

### AI overview

This article explains how keyboard navigation, clear action hierarchy, flexible data entry, and review steps improve the usability and accessibility of forms. It covers tab order, assistive technology users, minimizing keyboard-mouse switching, and WCAG guidance for important transactions.

### Source excerpt

Forms are an essential part of many interactions, but good form layout and clear labels are only part of the picture. Forms also need to work in all the ways users interact with them. Not everyone uses a mouse. Many users rely on keyboards, whether by preference, motor impairments, or because they use assistive technologies such as screen readers. How a form handles keyboard navigation, action buttons, and data entry has a direct impact on both usability and accessibility compliance.In the video, William Hudson explores the interaction side of form design: how users move through forms, how primary and secondary actions should be distinguished, and why flexible input handling is one of the si...

## Why Your Favorite Websites Look Like 2005 (And Why You Secretly Love It)

DevFeed: [Why Your Favorite Websites Look Like 2005 (And Why You Secretly Love It)](<https://devfeed.tech/articles/why-your-favorite-websites-look-like-2005-and-why-you-secretly-love-it-9281.md>)

Original publisher: [Read original article](<https://webdesignerdepot.com/why-your-favorite-websites-look-like-2005-and-why-you-secretly-love-it/>)

Author: Alex Harper

Published: 2026-07-28T11:30:00Z

Content type: opinion

Language: en

Sources: [Web Designer Depot](<https://devfeed.tech/sources/web-designer-depot.md>)

Topics: [Google](<https://devfeed.tech/topics/google.md>), [amazon](<https://devfeed.tech/topics/amazon.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [Latency](<https://devfeed.tech/topics/latency.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Font](<https://devfeed.tech/topics/font.md>)

Tags: [amazon](<https://devfeed.tech/tags/amazon.md>), [amazon-design](<https://devfeed.tech/tags/amazon-design.md>), [cognitive-load](<https://devfeed.tech/tags/cognitive-load.md>), [complexity](<https://devfeed.tech/tags/complexity.md>), [conversion-rate-optimization](<https://devfeed.tech/tags/conversion-rate-optimization.md>), [cost](<https://devfeed.tech/tags/cost.md>), [customer-trust](<https://devfeed.tech/tags/customer-trust.md>), [data](<https://devfeed.tech/tags/data.md>), [design](<https://devfeed.tech/tags/design.md>), [design-psychology](<https://devfeed.tech/tags/design-psychology.md>), [digital-accessibility](<https://devfeed.tech/tags/digital-accessibility.md>), [digital-marketing](<https://devfeed.tech/tags/digital-marketing.md>), [fonts](<https://devfeed.tech/tags/fonts.md>), [functional-design](<https://devfeed.tech/tags/functional-design.md>), [google](<https://devfeed.tech/tags/google.md>), [google-search](<https://devfeed.tech/tags/google-search.md>), [human-centric-design](<https://devfeed.tech/tags/human-centric-design.md>), [information-density](<https://devfeed.tech/tags/information-density.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [latency](<https://devfeed.tech/tags/latency.md>), [minimalism](<https://devfeed.tech/tags/minimalism.md>), [speed](<https://devfeed.tech/tags/speed.md>), [ui](<https://devfeed.tech/tags/ui.md>), [user-experience](<https://devfeed.tech/tags/user-experience.md>), [user-interface](<https://devfeed.tech/tags/user-interface.md>), [ux-strategy](<https://devfeed.tech/tags/ux-strategy.md>), [ux-usability](<https://devfeed.tech/tags/ux-usability.md>), [visual-hierarchy](<https://devfeed.tech/tags/visual-hierarchy.md>), [walmart-ecommerce](<https://devfeed.tech/tags/walmart-ecommerce.md>), [web-design](<https://devfeed.tech/tags/web-design.md>), [web-performance](<https://devfeed.tech/tags/web-performance.md>), [website-usability](<https://devfeed.tech/tags/website-usability.md>)

### AI overview

This opinion argues that the seemingly dated interfaces of Google, Amazon, and Walmart succeed because they reduce cognitive load, make tasks predictable, and prioritize speed over visual complexity. It contrasts these designs with heavily animated, asset-intensive websites that can delay interaction and frustrate users.

### Source excerpt

Why are the world's most powerful websites still stuck in the early 2000s? While boutique brands chase "sleek" designs that only end up frustrating users, giants like Amazon and Google have realized that "ugly" is actually a superpower for trust and speed.

## GPT-5.6 is now available in Figma Make

DevFeed: [GPT-5.6 is now available in Figma Make](<https://devfeed.tech/articles/gpt-5-6-is-now-available-in-figma-make-9741.md>)

Original publisher: [Read original article](<https://www.figma.com/blog/gpt-5-6-is-now-available-in-figma-make/>)

Author: Gui Seiz

Published: 2026-07-09T12:00:00Z

Content type: article

Language: en

Sources: [Figma Blog](<https://devfeed.tech/sources/figma-blog.md>)

Topics: [Figma](<https://devfeed.tech/topics/figma.md>), [Code](<https://devfeed.tech/topics/code.md>), [App](<https://devfeed.tech/topics/app.md>), [dashboards](<https://devfeed.tech/topics/dashboards.md>), [GUI](<https://devfeed.tech/topics/gui.md>), [Playback](<https://devfeed.tech/topics/playback.md>), [FIRST](<https://devfeed.tech/topics/first.md>)

Tags: [app](<https://devfeed.tech/tags/app.md>), [audio](<https://devfeed.tech/tags/audio.md>), [building](<https://devfeed.tech/tags/building.md>), [code](<https://devfeed.tech/tags/code.md>), [design](<https://devfeed.tech/tags/design.md>), [efficiency](<https://devfeed.tech/tags/efficiency.md>), [evals](<https://devfeed.tech/tags/evals.md>), [figma](<https://devfeed.tech/tags/figma.md>), [gpt](<https://devfeed.tech/tags/gpt.md>), [music](<https://devfeed.tech/tags/music.md>), [openai](<https://devfeed.tech/tags/openai.md>), [playback](<https://devfeed.tech/tags/playback.md>), [prototypes](<https://devfeed.tech/tags/prototypes.md>), [search](<https://devfeed.tech/tags/search.md>), [ui](<https://devfeed.tech/tags/ui.md>), [visual-hierarchy](<https://devfeed.tech/tags/visual-hierarchy.md>), [workflow](<https://devfeed.tech/tags/workflow.md>)

### AI overview

This article announces OpenAI's GPT-5.6 integration in Figma Make, describing faster, higher-quality first results, efficient iteration, error self-healing, and faithful conversion of Figma designs into interactive prototypes and production code.

### Source excerpt

With accurate first results and fast iterations, OpenAI's GPT-5.6 gives your builds a strong start in Figma Make.

## Using Provocations to Shake the Status Quo

DevFeed: [Using Provocations to Shake the Status Quo](<https://devfeed.tech/articles/using-provocations-to-shake-the-status-quo-39157.md>)

Original publisher: [Read original article](<https://open.nytimes.com/using-provocations-to-shake-the-status-quo-7e884b866310?source=rss----51e1d1745b32---4>)

Author: The NYT Open Team

Published: 2025-07-22T16:23:11Z

Content type: opinion

Language: en

Sources: [New York Times](<https://devfeed.tech/sources/new-york-times.md>)

Topics: [Users](<https://devfeed.tech/topics/users.md>), [format](<https://devfeed.tech/topics/format.md>), [context](<https://devfeed.tech/topics/context.md>)

Tags: [approach](<https://devfeed.tech/tags/approach.md>), [design](<https://devfeed.tech/tags/design.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [figma](<https://devfeed.tech/tags/figma.md>), [photography](<https://devfeed.tech/tags/photography.md>), [process](<https://devfeed.tech/tags/process.md>), [recipe](<https://devfeed.tech/tags/recipe.md>), [ux-design](<https://devfeed.tech/tags/ux-design.md>), [visual-hierarchy](<https://devfeed.tech/tags/visual-hierarchy.md>), [visualization](<https://devfeed.tech/tags/visualization.md>)

### AI overview

A case study of how NYT Cooking used high-fidelity design provocations to rethink recipe cards. The approach prioritized photography, flexible recipe information, a modernized format, and a more streamlined evaluation process while keeping the project scope controlled.

### Source excerpt

The bold approach NYT Cooking used to define a strategy for recipe cards.Illustration by Ben Denzer By Jayne Lee In The New York Times Cooking, "cards," or the containers that represent our content, are the first impression of our brand. They're the window into our recipes and users rely on them to evaluate and choose what to cook. NYT Cooking users are particularly attracted to our appetizing food photos. In every research session, participants get distracted by a delicious-looking dish while answering the moderator's questions. People tend to browse with their stomachs first and then see if the recipe specifications meet their personal criteria (For example, do I have enough time to cook this?). A problem we encountered: our beautiful photography was muddied by the page's gray background. The white card containers sitting on top of the gray page forced your eyes to focus on the container instead of the photo. The visual hierarchy was at odds with the preferred reading and browsing order of our audience: photo first, then recipe information. Recipe information varies, so the card needs to afford that variability. Using containers forced us to keep our cards the same height, resulting in unnecessary whitespace. Since the cards were so tall, this limited the amount of recipes a user could see at once, increasing the time users scanned for recipes. We needed to highlight our photography, modernize the format and streamline the recipe evaluation process. While designing solutions, I realized that I had more questions than answers. Answering each question would have significantly bloated the project scope. Some examples were: What order of recipe information is most helpful when deciding between recipes? Are recipe bylines important? Which presentation of ratings is more effective? Because the priority was to update the format rather than improve comprehension, and to avoid bloating the scope of the project, I started with design provocations over design specs. Because

## Designing a Tinted iOS 18 App Icon with Alternate Brand Marks and Alpha Gradients

DevFeed: [Designing a Tinted iOS 18 App Icon with Alternate Brand Marks and Alpha Gradients](<https://devfeed.tech/articles/oh-no-i-need-to-design-a-tinted-ios-18-app-icon-9126.md>)

Original publisher: [Read original article](<https://www.sketch.com/blog/tinted-app-icons/>)

Author: Marcelo Marfil

Published: 2024-11-11T09:00:00Z

Content type: tutorial

Language: en

Sources: [Sketch Blog](<https://devfeed.tech/sources/sketch-blog.md>)

Topics: [iOS](<https://devfeed.tech/topics/ios.md>), [Sketch](<https://devfeed.tech/topics/sketch.md>)

Tags: [apple](<https://devfeed.tech/tags/apple.md>), [brand-identity](<https://devfeed.tech/tags/brand-identity.md>), [customization](<https://devfeed.tech/tags/customization.md>), [design](<https://devfeed.tech/tags/design.md>), [ios](<https://devfeed.tech/tags/ios.md>), [learn-design](<https://devfeed.tech/tags/learn-design.md>), [macos](<https://devfeed.tech/tags/macos.md>), [visual-hierarchy](<https://devfeed.tech/tags/visual-hierarchy.md>)

### AI overview

A Sketch design article explains how its team adapted an iOS app icon for iOS 18's tinted appearance. It focuses on alternate brand marks and alpha gradients, along with clarity, contrast, and consistency with stock iOS icon design.

### Source excerpt

Tinted app icons in iOS 18 were met with plenty of concerns over visual hierarchy and brand identity. Here are a few tricks we used to make ours look good and feel right at home.

## Little Big Outtakes

DevFeed: [Little Big Outtakes](<https://devfeed.tech/articles/little-big-outtakes-9945.md>)

Original publisher: [Read original article](<https://www.figma.com/blog/little-big-updates-behind-the-scenes/>)

Author: Figma

Published: 2023-03-28T00:00:00Z

Content type: article

Language: en

Sources: [Figma Blog](<https://devfeed.tech/sources/figma-blog.md>)

Topics: [Figma](<https://devfeed.tech/topics/figma.md>), [User Experience](<https://devfeed.tech/topics/user-experience.md>), [Sorting](<https://devfeed.tech/topics/sorting.md>), [bug](<https://devfeed.tech/topics/bug.md>)

Tags: [design](<https://devfeed.tech/tags/design.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [experimentation](<https://devfeed.tech/tags/experimentation.md>), [feature](<https://devfeed.tech/tags/feature.md>), [features](<https://devfeed.tech/tags/features.md>), [figma](<https://devfeed.tech/tags/figma.md>), [prototyping](<https://devfeed.tech/tags/prototyping.md>), [sorting](<https://devfeed.tech/tags/sorting.md>), [updates](<https://devfeed.tech/tags/updates.md>), [user-experience](<https://devfeed.tech/tags/user-experience.md>), [visual-hierarchy](<https://devfeed.tech/tags/visual-hierarchy.md>)

### AI overview

Figma's "Little Big Outtakes" describes the design and engineering decisions behind more than 30 small feature updates. It focuses on improving multi-select search through clearer sorting logic, specialized interfaces, visual hierarchy, and experimentation, and briefly introduces blur effects for prototyping overlays.

### Source excerpt

The quick pivots and aha moments we made on the way to launching 30+ Little Big Updates.