How to Fix 80% of Web Designs

Key Concepts

• Website Usability Checklist: A six-step process for improving website design and functionality.
• Visual Hierarchy: The arrangement of elements to guide the user's eye and emphasize important information.
• Legibility & Readability: Ensuring text is easily readable through contrast, weight, spacing, and line length.
• Color Theory & Consistency: Utilizing color intentionally and maintaining a unified color palette.
• Grid Systems: Using a structured grid to align elements and create visual order.
• Graphic Communication: Effectively conveying information through visual elements.

Removing the Unnecessary (Step 1)

The first step in improving a website is to eliminate unnecessary elements that detract from clear communication. The speaker highlights common mistakes like redundant text – specifically, repeating the tagline “design, build, install” from the logo in the hero section. He also points out the questionable value of decorative elements like “hanging rules” that don’t contribute to the overall design or functionality, particularly when the color combination (gray on red) is visually jarring. The core principle is that every element should serve a purpose; if it doesn’t, it should be removed.

Improving Text Legibility (Step 2)

Legibility, the ease with which individual letters are distinguished, and readability, the ease with which text is understood, are crucial for user experience. The speaker demonstrates this by pointing out instances of poor text contrast – red text on a complex background and gray text on red. He recommends increasing text weight and ensuring sufficient contrast between text and background colors. Specifically, he suggests bumping up the weight of the navigation text, which was deemed too small and thin. Proper paragraph breaks, line spacing, and line length are also emphasized as contributing factors to improved readability.

Using Color Intentionally (Step 3)

Color should be used strategically, not randomly. The speaker identifies inconsistencies in the color palette of the example website – differing shades of gray and black used without a clear system. He advocates for simplifying the color scheme to a core palette of one red (as the brand color), white, and one black – a slightly red-tinted black to maintain harmony with the brand red. This unified approach creates a more bold and graphical aesthetic, aligning with the established style of the logo and headline font. Color can also be used semantically, such as for buttons and icons.

Applying Consistent Spacing (Step 4)

Consistent spacing is vital for creating a sense of order and professionalism. The speaker introduces the concept of a 12-column grid system, utilizing the original website’s margins as a starting point. He then advocates for an eight-pixel grid system, where all spacing increments are multiples of eight. This ensures alignment and creates “room to breathe” for each section. While users may not consciously notice consistent spacing, its absence creates a feeling of unease. Correct spacing, conversely, contributes to a calmer and more premium user experience.

Maintaining Visual Consistency (Step 5)

Visual consistency builds trust and reduces cognitive load for the user. The speaker points out a form on the website that introduces different fonts, graphical styles, and inconsistent spacing, disrupting the established visual language. He also highlights the inconsistency of social media icons introducing new colors and gradients. Simplifying these elements – for example, turning the icons white – maintains the overall visual consistency. He notes that even with simplification, ubiquitous icons like social media logos remain recognizable.

Enhancing Graphic Communication (Step 6)

Effective graphic communication is the ultimate goal of website design. The speaker demonstrates this by moving images that were previously buried lower on the page to the hero section. This immediately communicates the company’s services – designing, building, and installing signs – without relying on explanatory text. He also suggests transforming service descriptions into clickable cards with larger text, improving both visual appeal and usability. He states, “It’s key for them to communicate their services, but the old version was easy to gloss over.” Further improvements, such as quality photography and layout experimentation, are recommended for continued enhancement.

Notable Quotes

• “Call me conservative, but I think that’s pretty important [that we can actually read what’s written on the page].” – Emphasizing the importance of text legibility.
• “You might think that inconsistent spacing is something that users wouldn't really notice. But overall, it produces an effect where things just feel off.” – Highlighting the subtle but significant impact of consistent spacing.
• “It’s key for them to communicate their services, but the old version was easy to gloss over.” – Illustrating the power of improved graphic communication.

Synthesis/Conclusion

The speaker presents a practical, six-step checklist for significantly improving website usability and design. By focusing on removing unnecessary elements, enhancing legibility, utilizing color intentionally, applying consistent spacing, maintaining visual consistency, and enhancing graphic communication, designers can address 80% of the problems found on 80% of websites. The process emphasizes the importance of intentional design choices and a user-centered approach, ultimately leading to a more effective and engaging online experience. The speaker encourages viewers to utilize the resources available at Flux Academy and on their website for further learning and development.