Guidelines for Brutalist Web Design

• A website’s materials are its content and the context in which it’s consumed.
• A website that embraces Brutalist Web Design is raw in its focus on content, and prioritization of the website visitor.
• Content is readable on all reasonable screens and devices.
  • By default, a website that uses HTML as intended and has no custom styling will be readable on all screens and devices.
  • Only the act of design can make the content less readable, though it can certainly make it more.
• Only hyperlinks and buttons respond to clicks.
  • A website is a hypertext document that allows for two primary forms of interaction: navigating a link to another location, and submitting information back to a server.
• Hyperlinks are underlined and buttons look like buttons.
  • A hyperlink has no analog in the real world. Since the dawn of the web, convention dictates a hyperlink use an underline to reveal its existence (which is a wonderful solution, since underlining has no place in modern typesetting).
  • Buttons, however, do have an analog in both the real world and computer programs. The browser being a computer program, it stands to reason that buttons rendered in a browser should look like buttons rendered on the computer operating system running said browser.
• The back button works as expected.
  • All browsers have a built-in button called the back button. This button is a form of “undo”, taking the user back to where they were before their last navigational click.
• View content by scrolling.
  • A website is neither a book nor a magazine. Because it’s viewed in a browser, users can scroll the browser’s viewport to read content that can’t fit on one screen.
  • Scrolling also allows the visitor to consume content at their pace using a method they prefer. Like the back button, this can only be broken by intentional design and careless implementation.
• Decoration when needed and no unrelated content.
• Performance is a feature.
• Start with left-aligned black text on a white background, and to apply styling only to solve a specific problem.
• Tips:
  • Understand the semantic meaning of HTML elements.
  • Learn about typography.
  • Try designing for a small screen by default.