> Markdown version of [/videos/518-design-principles-for-the-web](https://www.wearedevelopers.com/videos/518-design-principles-for-the-web). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Design Principles For The Web

A worthwhile design principle forces hard choices, not empty platitudes. Discover why prioritizing native HTML and radical backwards compatibility over pixel-perfect interfaces is the web's true superpower.

- **Speakers:** Jeremy Keith
- **Event:** World Congress 2022
- **Published:** June 15, 2022
- **Duration:** 29:11
- **URL:** https://www.wearedevelopers.com/videos/518-design-principles-for-the-web

## Summary

Understanding the full lifecycle of product development requires distinguishing between divergent idea generation and convergent decision-making, a contrast best modeled by the Double Diamond design process. To navigate these phases effectively, teams must surface early assumptions and move from a core organizational purpose into actionable design principles, which ultimately dictate user interface patterns. However, a worthwhile design principle is never a universally agreeable platitude like "make it usable." Instead, it forces productive prioritization using an "X even over Y" framework, passing a reversibility test where an entirely different context could reasonably adopt the reverse. Applying this prioritization philosophy to the World Wide Web reveals architectural truisms that should guide modern engineering. By embracing Postel's Law (the robustness principle) to be conservative in what is sent down the wire—such as avoiding heavy client-side JavaScript payloads—and tolerant in what is accepted from users, teams build more fault-tolerant systems. Furthermore, adhering to the Principle of Least Power encourages developers to solve problems lower in the frontend stack, opting for native native semantic HTML instead of complex CSS or brittle ARIA workarounds. Ultimately, the true superpower of the modern web is not pixel-perfection but radical backwards compatibility, meaning robust digital products must aggressively prioritize foundational ubiquity even over strict visual consistency.

**Keywords:** double diamond design process, divergent and convergent thinking, ux prioritization frameworks, design principled formulation, reversibility test in ui design, postel's robustness principle, principle of least power, client-side javascript optimization, declarative html semantics vs aria, frontend web accessibility, ubiquity over visual consistency, architecture backwards compatibility, under-engineered frontend logic, the priority of constituencies

## Chapters

1. **The design process and Double Diamond model** (00:25) — How the Double Diamond diagram clarifies divergent and convergent thinking during software design.
1. **Running explicit divergent and convergent meetings** (02:09) — Why it is essential to clearly separate brainstorming phases from definitive decision-making meetings.
1. **Surfacing assumptions and establishing organizational values** (03:41) — How early research and discovery exercises help uncover expectations, biases, and inherent organizational purpose.
1. **How core values drive technical design principles** (05:31) — Understanding the cascading effect from organizational purpose to guiding principles and user interface patterns.
1. **Evaluating design principles with the reversibility test** (08:23) — How phrasing principles as prioritization decisions ensures they are genuinely arguable and useful.
1. **Priority of constituencies and eponymous tech laws** (10:15) — An examination of conflict resolution models and universal technological truisms like Hofstadter's and Murphy's laws.
1. **Influential design principles from the early web** (13:05) — The historical context of the web's creation and the original axioms of web architecture.
1. **Applying Postel's robustness principle in web design** (15:15) — Why being conservative in what you send and liberal in what you accept builds more resilient systems.
1. **The cost of client-side JavaScript execution** (17:56) — The performance impacts of sending non-conservative payloads and relying heavily on client-side JavaScript.
1. **Utilizing the principle of least power** (19:33) — Why choosing the simplest, least powerful language for a problem creates more robust and reliable web applications.
1. **Choosing native HTML elements over custom components** (22:41) — The practical trade-offs between under-engineered native web components and over-engineered custom solutions.
1. **Prioritizing ubiquity in modern web development** (26:58) — Why the web platform inherently favors universal accessibility over platform-specific visual consistency.

## Related Moments

- [Re-evaluating core programming principles in web architecture](https://www.wearedevelopers.com/videos/1427-how-to-kill-javascript-from-your-stack-with-htmx-and-kotlin) (from "How to kill JavaScript from your Stack with HTMX and Kotlin")
- [Prioritizing business logic and user value over technology choices](https://www.wearedevelopers.com/videos/118-how-to-stop-choosing-javascript-frameworks-and-start-living) (from "How to Stop Choosing JavaScript Frameworks and Start Living")
- [Examining the historical evolution of web design practices](https://www.wearedevelopers.com/videos/1822-wearedevelopers-live-11ty-and-a11y) (from "WeAreDevelopers LIVE - 11ty and a11y")
- [Introduction to building accessible web frontends](https://www.wearedevelopers.com/videos/403-the-what-why-who-and-how-of-accessibility-on-the-web) (from "The What, Why, Who and How of accessibility on the web")
- [Leveraging community resources for sustainable web design](https://www.wearedevelopers.com/videos/636-reducing-the-carbon-footprint-of-your-website) (from "Reducing the carbon footprint of your website")
- [Showcasing web design capabilities through extreme user interface customization](https://www.wearedevelopers.com/videos/1753-wearedevelopers-live-spicy-vanilla-web-css-magic-more) (from "WeAreDevelopers LIVE – Spicy Vanilla Web, CSS Magic & More")

## Related Articles

- [How Developers Can Focus on Maintaining Satisfaction With Accessibility](https://www.wearedevelopers.com/magazine/109-how-developers-can-focus-on-maintaining-satisfaction-with-accessibility)
- [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front)
- [Dev Digest 139 - Soft and hard queries](https://www.wearedevelopers.com/magazine/487-dev-digest-139-soft-and-hard-queries)
- [How to Avoid Over-Engineering](https://www.wearedevelopers.com/magazine/546-how-to-avoid-over-engineering)

## Related Jobs

- [Senior Web Designer, Growth](https://www.wearedevelopers.com/jobs/ext/102722-senior-web-designer-growth) at **Intercom, Inc.**
- [Senior Product UI Designer](https://www.wearedevelopers.com/jobs/ext/1998621-senior-product-ui-designer) at **Almedia**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/639235-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/645320-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/644637-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/679408-remote-senior-full-stack-engineer) at **Edge Impulse**