Website design, thought through

Each answer opens with a short answer, then shows its reasoning, its sources and the questions teams ask about it.

  • 50 answers
  • 92 questions teams ask
  • 142 links between answers

Every answer

Newest first, on a 12-column grid: a card spans as many columns as its reading time asks for. Page 1 of 2.

  1. Why Web Accessibility Has Become a Legal Requirement

    Web accessibility became a legal requirement through several separate laws, and which one binds you depends on who you are. In the United States, a 2024 Justice Department rule requires state and local governments to meet WCAG 2.1 Level AA by April 2027 or April 2028, depending on size, Section 508 binds federal agencies, and the ADA's general duty covers businesses open to the public without naming a technical standard. In the European Union, the European Accessibility Act has applied to listed consumer services since June 28, 2025, with an exemption for microenterprises.

    7 min read

    Web accessibility became a legal requirement through several separate laws, and which one binds you depends on who you are. In the United States, a 2024 Justice Department rule requires...

  2. Why Component-Based Design Has Become the Industry Standard

    Among front-end frameworks, component-based tools lead the rankings. In the 2025 Stack Overflow Developer Survey, 44.7% of respondents to the web frameworks question had done extensive work in React over the past year, more than any other front-end framework; only Node.js, a JavaScript runtime, ranked higher at 48.7%. Angular (18.2%) and Vue.js (17.6%), both built around components, followed. Older approaches have not disappeared: jQuery still stood at 23.4%.

    7 min read 3 questions teams ask

    Among front-end frameworks, component-based tools lead the rankings. In the 2025 Stack Overflow Developer Survey, 44.7% of respondents to the web frameworks question had done extensive work in React over...

  3. Where and How to Place Social Proof Elements for Credibility in Web Design

    Put social proof where the visitor's doubt is highest, and only use proof you could defend if someone asked who said it, what connection they have to you, and whether their result is typical. Placement decides whether a testimonial gets read at all. The three questions decide whether it helps or becomes a liability, because in the United States the FTC treats claims made through testimonials as the advertiser's own claims.

    6 min read

    Put social proof where the visitor's doubt is highest, and only use proof you could defend if someone asked who said it, what connection they have to you, and whether...

  4. When to Use SVG Instead of PNG and Other Image Formats in Web Design

    Use SVG for artwork made of shapes: icons, logos, simple illustrations, and charts. Use a bitmap format for photographs, screenshots, and detailed textures, and for those, serve AVIF or WebP first with JPEG or PNG as the fallback. PNG is no longer the only answer for transparency, and SVG is not automatically smaller: its file size grows with the complexity of the drawing, not its dimensions.

    5 min read

    Use SVG for artwork made of shapes: icons, logos, simple illustrations, and charts. Use a bitmap format for photographs, screenshots, and detailed textures, and for those, serve AVIF or WebP...

  5. When to Use Icons Instead of Text and How to Balance Both in Web Design

    Use an icon without a visible label only for the very few symbols nearly everyone recognizes, and pair every other icon with text. Nielsen Norman Group's research on icon usability says only a few icons enjoy mostly universal recognition and gives home, print, and the magnifying glass for search as examples. Even those need an accessible name in the code, and any icon you are unsure about is a candidate for testing with your own users.

    5 min read 4 questions teams ask

    Use an icon without a visible label only for the very few symbols nearly everyone recognizes, and pair every other icon with text. Nielsen Norman Group's research on icon usability...

  6. When Popups and Modals Hurt User Experience in Web Design

    A popup hurts when it blocks the content a visitor came for before they have any reason to want what it offers, when it traps keyboard users, or when it hides the element they are trying to reach. The shorthand that Google applies a "mobile popup penalty" is out of date. Google's current guidance is broader: it covers intrusive dialogs on any device and frames the problem as content that search engines and people cannot easily get to.

    5 min read

    A popup hurts when it blocks the content a visitor came for before they have any reason to want what it offers, when it traps keyboard users, or when it...

  7. When Breadcrumb Navigation Becomes Important for User Orientation

    Breadcrumbs earn their space once a site's hierarchy is three or more levels deep, and especially when visitors land on deep pages from search or an outside link. With only one or two levels, they add little: Nielsen Norman Group's guidelines say that for sites "with only 1 or 2 levels of categories, a breadcrumb isn't needed as a wayfinding device." The rest of this page covers where they matter, which kind to use, and how to build them.

    6 min read 3 questions teams ask

    Breadcrumbs earn their space once a site's hierarchy is three or more levels deep, and especially when visitors land on deep pages from search or an outside link. With only...

  8. When and How to Conduct User Testing Throughout the Web Design Process

    Test at every stage, with the method that fits the question you have at that stage: interviews and observation before design, paper and wireframe tests while the structure is forming, task-based sessions on interactive prototypes, and analytics, recordings, and A/B tests after launch. Qualitative tests need only a handful of people per user group. Anything you want to report as a number, such as a success rate or a usability score, needs many more.

    7 min read 4 questions teams ask

    Test at every stage, with the method that fits the question you have at that stage: interviews and observation before design, paper and wireframe tests while the structure is forming,...

  9. What Roles Will AI Play in the Future of Web Design

    Nobody can say exactly how far AI will go in web design, and confident forecasts in either direction outrun the evidence. What can be said is which roles AI already plays in shipped products, which ones vendors are still testing, and which decisions stay with people because someone has to be accountable for them. Planning around that split is more useful than planning around a prediction.

    5 min read

    Nobody can say exactly how far AI will go in web design, and confident forecasts in either direction outrun the evidence. What can be said is which roles AI already...

  10. What Problems Emerge When the Wireframing Stage Is Skipped in Web Design

    Skipping wireframes does not remove structural decisions; it moves them later, into polished mockups or code, where each change costs more and feedback drifts toward colors and imagery. The problems that follow are predictable: structure nobody reviewed on its own, content that breaks the layout, behavior developers have to guess, and fewer alternatives explored. Whether skipping is worth it depends on how much of the structure is still undecided.

    6 min read 4 questions teams ask

    Skipping wireframes does not remove structural decisions; it moves them later, into polished mockups or code, where each change costs more and feedback drifts toward colors and imagery. The problems...

  11. What Heatmap Analysis Reveals About User Behavior in Web Design

    Heatmaps reveal where visitors click or tap, how far they scroll, and, on desktop, where the mouse cursor travels. They do not show where people look, and they never show why people did what they did. Read as behavior data with those limits, and collected from enough visits, they are a fast way to find the parts of a page worth investigating with recordings, tests, or interviews.

    5 min read

    Heatmaps reveal where visitors click or tap, how far they scroll, and, on desktop, where the mouse cursor travels. They do not show where people look, and they never show...

  12. Visual Hierarchy Principles for Directing User Attention in Web Design

    Visual hierarchy is the order in which a visitor's eye picks up what is on a page. Nielsen Norman Group's definition is that "A clear visual hierarchy guides the eye to the most important elements on the page" and is created through "variations in color and contrast, scale, and grouping." The practical job is to decide what matters most on each page, make that element win on those variables, and then check, with a blur test or real users, that it does.

    5 min read

    Visual hierarchy is the order in which a visitor's eye picks up what is on a page. Nielsen Norman Group's definition is that "A clear visual hierarchy guides the eye...

  13. The Long-Term Benefits of Design Systems for Consistency and Efficiency

    A design system pays off through reuse, and it keeps costing money for as long as it exists. The long-term benefits are real: measured time savings on matching tasks, fewer one-off decisions, faster changes across products, and a written record of why things look the way they do. Whether they outweigh the cost depends on how many people and products reuse the system, so the business case has to count both sides.

    8 min read 2 questions teams ask

    A design system pays off through reuse, and it keeps costing money for as long as it exists. The long-term benefits are real: measured time savings on matching tasks, fewer...

  14. Reducing Sustainability Impact, Energy Efficiency, and Carbon Footprint in Web Design

    Cutting a website's environmental impact starts with knowing where its energy goes. The Sustainable Web Design Model, version 4, allocates 22% of the energy in its system to data centers, 24% to networks, and 54% to user devices. Green hosting addresses the first slice; lighter pages and less work on visitors' devices address the other two. The model's authors warn that with its broad boundaries "it is likely that the total estimation results produced by this model will overestimate actual emissions". Read every carbon figure below as an estimate.

    7 min read 4 questions teams ask

    Cutting a website's environmental impact starts with knowing where its energy goes. The Sustainable Web Design Model, version 4, allocates 22% of the energy in its system to data centers,...

  15. Overcoming Design and Content Challenges in Multilingual Website Development

    Three decisions address the problems that otherwise appear when translations arrive: size layouts for text expansion by string length, put text direction and language in the markup, and set up the translation workflow before the first page is translated. Skip them and you risk buttons that break, right-to-left pages that mirror the wrong things, the wrong glyphs for Japanese text, and translations that quietly go stale.

    8 min read 4 questions teams ask

    Three decisions address the problems that otherwise appear when translations arrive: size layouts for text expansion by string length, put text direction and language in the markup, and set up...

  16. Optimizing Images for Retina and High-Resolution Displays

    An image looks blurry on a high-density screen when the browser has fewer image pixels than device pixels to fill. On a 2x display, each CSS pixel is drawn with a 2 by 2 block of device pixels, so the same area holds four times as many pixels as on a standard screen. The fix is to offer larger versions of the image and let the browser choose, without sending those larger files to screens that cannot use them.

    5 min read

    An image looks blurry on a high-density screen when the browser has fewer image pixels than device pixels to fill. On a 2x display, each CSS pixel is drawn with...

  17. Optimizing Collaboration Between Designers and Front-End Developers

    Collaboration between designers and front-end developers improves when developers see the work before it is final, both sides use the same names for the same things, and one person owns the check that what shipped matches what was designed. Those practices can run as a fixed sequence through the project, backed by clear decision rights for the moments when the two sides disagree.

    6 min read

    Collaboration between designers and front-end developers improves when developers see the work before it is final, both sides use the same names for the same things, and one person owns...

  18. Landing Page Design Elements That Drive Conversion Rates

    A landing page exists to get one action: a signup, a purchase, a download, a demo request. The elements that drive that action are a headline that states the value, a visible call to action, credible proof near it, a form that asks only what it needs, a length matched to the offer, and testing that tells you which of these is holding the page back. Everything else on the page either supports the action or competes with it.

    6 min read 4 questions teams ask

    A landing page exists to get one action: a signup, a purchase, a download, a demo request. The elements that drive that action are a headline that states the value,...

  19. Is the Hamburger Menu Really the Best Mobile Navigation Solution

    Not as the only navigation. The hamburger menu works, and most users now recognize it, but hiding navigation means people use it less and can take longer to reach what they need. The approach the research supports is to keep your three to five most important destinations visible and let the hamburger hold everything else.

    6 min read 3 questions teams ask

    Not as the only navigation. The hamburger menu works, and most users now recognize it, but hiding navigation means people use it less and can take longer to reach what...

  20. Integrating Storytelling Techniques Into Web Design and User Journeys

    Storytelling in web design is an ordering decision: what the visitor sees first, which problem the page names, what evidence answers it, and where the page asks for action. A story-led page puts the visitor's situation before your product and lets the scroll move from problem to resolution. The techniques below cover page structure, characters, visuals, scroll, and data, and each one comes with the condition under which it helps or gets in the way.

    8 min read 4 questions teams ask

    Storytelling in web design is an ordering decision: what the visitor sees first, which problem the page names, what evidence answers it, and where the page asks for action. A...

  21. How User Habits and Mental Models Should Limit Design Innovation

    Break a user habit only when the benefit to users clearly exceeds what it costs them to relearn, and test that before launch. Habits limit innovation because people bring them from everywhere else: Nielsen Norman Group's Jakob's Law states that "Users spend most of their time on websites other than yours." They arrive expecting your site to work like those. That expectation should constrain change where people depend on familiar patterns, and leave room for it elsewhere.

    6 min read 2 questions teams ask

    Break a user habit only when the benefit to users clearly exceeds what it costs them to relearn, and test that before launch. Habits limit innovation because people bring them...

  22. How Typography Shapes Brand Perception and Readability in Web Design

    Typography does two separate jobs, and they are judged differently. Brand perception is about character: a typeface contributes to the first impression a site makes, along with color, layout, and imagery. Readability is about mechanics: line length, line spacing, size, contrast, and how quickly the text appears. The first is a matter of fit and testing; the second has measurable limits and accessibility requirements.

    6 min read

    Typography does two separate jobs, and they are judged differently. Brand perception is about character: a typeface contributes to the first impression a site makes, along with color, layout, and...

  23. How to Achieve and Test Contrast Ratio Standards in Web Design

    To meet WCAG 2.2 Level AA, normal text needs a contrast ratio of at least 4.5:1 against its background, large text at least 3:1, and the visual parts of controls and meaningful graphics at least 3:1. The ratio is calculated, not judged by eye, and it is not rounded, so a gray that measures 4.48:1 fails even though it looks identical to one that measures 4.54:1. Achieving the standard is mostly a matter of choosing approved color pairs early and testing the places tools miss.

    5 min read

    To meet WCAG 2.2 Level AA, normal text needs a contrast ratio of at least 4.5:1 against its background, large text at least 3:1, and the visual parts of controls...

  24. How Page Speed Shapes User Behavior and Conversion Rates

    If you are deciding whether speed work is worth the budget, start with this: every published dataset in the table below links faster pages with better outcomes, such as fewer abandoned visits, lower bounce, or more conversions and revenue, but the famous numbers are older, narrower, or more conditional than their usual retelling, and none of them proves speed alone caused the difference. Use them to decide that speed deserves a look. Use your own field data to decide what to fix and what it is worth.

    6 min read

    If you are deciding whether speed work is worth the budget, start with this: every published dataset in the table below links faster pages with better outcomes, such as fewer...

  25. How Navigation Complexity Affects User Drop-Off and Site Success

    Navigation complexity costs users in ways you can measure: when the path is unclear, people can find less, take longer, and turn to search or leave. The best-documented case is hidden navigation. In a 2016 Nielsen Norman Group study with 179 participants on 6 sites, desktop users used hidden menus in only 27% of cases, against 48% when the navigation was visible, and they were at least 39% slower when it was hidden. Your own drop-off has to be measured on your own site, and this page shows how.

    6 min read 2 questions teams ask

    Navigation complexity costs users in ways you can measure: when the path is unclear, people can find less, take longer, and turn to search or leave. The best-documented case is...

Questions teams ask

Open an answer to see its questions; each goes straight to its reply.

Why Component-Based Design Has Become the Industry Standard 3 questions
  1. How do we know if a component is too small or too big?
  2. Should we share components between web and mobile apps?
  3. Different people on our team design component APIs differently. What helps?
When to Use Icons Instead of Text and How to Balance Both in Web Design 4 questions
  1. Our design team wants icon-only navigation for a cleaner look. How do we push back?
  2. Icon library or custom icons?
  3. Can we use emoji as icons?
  4. Our icons tested well, but some customers are still confused. Why?
When Breadcrumb Navigation Becomes Important for User Orientation 3 questions
  1. Do breadcrumbs hurt SEO by spreading internal links too thin?
  2. Our content belongs to several categories. How do we handle breadcrumbs?
  3. Users aren't clicking our breadcrumbs. Should we remove them?
When and How to Conduct User Testing Throughout the Web Design Process 4 questions
  1. We don't have budget for professional recruiting. What can we do?
  2. Is it possible to test before the product exists?
  3. Our stakeholders don't believe in user testing. How do we convince them?
  4. Is remote unmoderated testing worth it?
What Problems Emerge When the Wireframing Stage Is Skipped in Web Design 4 questions
  1. We're agile and build incrementally. Do wireframes fit?
  2. Our designer prefers designing directly at high fidelity. Should we force wireframes?
  3. Clients don't understand wireframes. They want to see "real" designs.
  4. Our projects are too fast for wireframing. We have days, not weeks.
The Long-Term Benefits of Design Systems for Consistency and Efficiency 2 questions
  1. Should we build our own system or adopt one like Material Design?
  2. Our design system keeps getting worked around. What do we do?
Reducing Sustainability Impact, Energy Efficiency, and Carbon Footprint in Web Design 4 questions
  1. Does sustainable design rule out rich experiences?
  2. Our clients do not ask about sustainability. Should we raise it?
  3. How big is one website's impact?
  4. Is sustainable web design a passing trend?
Overcoming Design and Content Challenges in Multilingual Website Development 4 questions
  1. Does all content need to be in all languages?
  2. Our team doesn't speak some of our target languages. How do we control translation quality?
  3. Our CMS handles multiple languages badly. Rebuild or work around it?
  4. Should we launch all languages at once or roll out gradually?
Landing Page Design Elements That Drive Conversion Rates 4 questions
  1. How do I know if my landing page is working?
  2. Should a landing page have navigation?
  3. Won't visitors leave if they see a long page?
  4. How much testing is enough?
Is the Hamburger Menu Really the Best Mobile Navigation Solution 3 questions
  1. Should we add "Menu" text to our hamburger icon?
  2. Can we use both a hamburger and a bottom tab bar?
  3. Our users are young and tech-savvy. Does the discoverability concern still apply?
Integrating Storytelling Techniques Into Web Design and User Journeys 4 questions
  1. Our product is technical and dry. Can storytelling still work?
  2. Visitors want quick answers. Does a story slow them down?
  3. Is video worth the cost?
  4. Our competitors do not use storytelling. Will we look unprofessional?
How User Habits and Mental Models Should Limit Design Innovation 2 questions
  1. Our competitors are all conventional. Isn't a novel interface a competitive advantage?
  2. We tested an innovation, users struggled, and we still believe it is better long-term. Should we ship it?
How Navigation Complexity Affects User Drop-Off and Site Success 2 questions
  1. Our site has 500 pages. How do we make that navigable?
  2. Should we replace our mobile hamburger menu?
How Insufficient Whitespace Harms User Experience in Web Design 3 questions
  1. Stakeholders keep adding content until the space disappears. How do we stop it?
  2. Our competitors use dense layouts and seem successful. Is whitespace overrated?
  3. How much whitespace is right?
How Headless CMS Increases Design Freedom and Development Flexibility 4 questions
  1. Our editors like WordPress visual editing. Will they adapt?
  2. Is headless more expensive than a traditional CMS?
  3. We only have a website. Is the multi-channel benefit wasted?
  4. Can we move to headless gradually?
How Footer Design Contributes to Site Usability and Information Architecture 4 questions
  1. Our footer has grown huge with legal requirements and link requests. How do we trim it?
  2. Should newsletter signup go in the footer or somewhere more prominent?
  3. Our analytics show almost nobody clicks footer links. Does the footer still matter?
  4. Single-page apps handle footers differently. What's the best approach?
How Cultural Differences Influence Color, Symbol, and Layout Choices in Web Design 4 questions
  1. We can't afford full localization. What should we prioritize?
  2. Where is the line between localization and stereotyping?
  3. Should we build separate sites per country or one site with localization?
  4. Our product is inherently Western. Do we still need to localize?
Grid Systems in Web Design: Creating Consistency and Professional Appearance 3 questions
  1. Should we use a framework like Bootstrap or build our own grid?
  2. How do we choose between CSS Grid and Flexbox for a layout?
  3. Our CMS content varies in length. How do we keep the grid intact?
Does Mobile-First Design Compromise Desktop User Experience 3 questions
  1. Our analytics show 85% mobile traffic. Do we still need to care about desktop?
  2. Where should we invest design time, mobile or desktop?
  3. Should we design mobile first or desktop first?
Designing User-Friendly and Helpful Error Messages in Web Design 3 questions
  1. What if we don't know what caused the error ourselves?
  2. Our developers want error codes shown for support. How do we include them?
  3. How do we keep error messages good over time?
Designing for Screen Reader Compatibility: What to Consider and Test 4 questions
  1. We have never tested with a screen reader. Where do we start?
  2. Do all images need alt text?
  3. How do we make carousels and accordions accessible?
  4. Our site uses icons without text. Is that a problem?
Core Principles of Intuitive Interface Design and Reducing Learning Curves 2 questions
  1. We followed the conventions, and users still find the interface confusing. Why?
  2. Our users are experts who use the product all day. Does intuitiveness still matter?
Common Communication Problems Between Designers and Developers During Handoff 3 questions
  1. Our designers use Figma, but developers don't check it. How do we change that?
  2. Design keeps changing during development. How do we manage this?
  3. Our team is small, or one person does both jobs. Do we need a formal handoff?
Can No-Code Tools Replace Professional Web Design and What Are Their Limits 4 questions
  1. We started on no-code and now need custom features. What are our options?
  2. Will no-code tools eliminate the need for developers?
  3. Our agency builds client sites on no-code tools. Is that appropriate?
  4. I'm learning web design. Should I start with no-code or with code?
Balancing User Experience and Visual Aesthetics in Web Design 4 questions
  1. If attractive interfaces hide usability problems, is that a bad thing?
  2. How do we get stakeholders to weigh performance against visual complexity?
  3. Does accessibility limit creative freedom?
  4. What is the minimum visual standard for a functional product?
Balancing Convention and Creativity in Web Design 4 questions
  1. Our industry is conservative, but we want to stand out. How far can we push?
  2. Design awards go to highly creative sites. Should we design for awards?
  3. Our conventional site underperformed. Will creativity fix it?
  4. We are redesigning. How do we keep the creative elements users loved?
Are Trend-Following Designs Riskier Than Timeless Classic Approaches 4 questions
  1. We just launched a trend-led site. Was it a mistake?
  2. Our brand guidelines require trend-driven elements. What can we do?
  3. Doesn't timeless just mean generic?
  4. We are a startup and will redesign within a year. Why plan for longevity?