Can You Spot The Web Design Mistake?

Key Concepts

• Design Principles: Balance, Contrast, Imagery, Typesetting, Grouping, Hierarchy, Alignment, Consistency, Responsiveness, Simplicity, Appropriateness.
• Technical Terms: Negative Space, Hero Section, Call to Action (CTA), User Interface (UI), Maximalist Design, Humanist Sans-serif, Serif Font, Display Font, Figma, Fonts Ninja.
• Common Mistakes: Unbalanced layouts, lack of clear hierarchy, inconsistent typography and imagery, non-responsive design, visual clutter, inappropriate design choices, generic "Welcome to" messages in hero sections.

---

The video identifies and analyzes five common website design mistakes found on live, contemporary websites. For each example, the presenter challenges the viewer to spot the mistake within five seconds, then reveals the answer, explains the underlying design principle, and demonstrates a quick fix or compares it to a well-designed site. The goal is to equip viewers with the knowledge to recognize, avoid, and apply these principles to improve their own design work.

1. Website 1: Enjoy Tasmania, Australia – Violating Balance

Mistake Identified: The primary issue is a lack of balance.

• Specific Details: The hero section features a repeated headline ("Enjoy Tasmania" twice) that pulls the visual weight heavily to the left, extending beyond the apparent left margin. This creates an excess of clear space below the headline, making the layout feel unbalanced. Additionally, the people in the image are looking towards the left, but there's nothing in that direction to lead the viewer's eye, missing a significant opportunity for engagement.
• Design Principle: Balance refers to the distribution of visual weight in a design.
• Proposed Fix/Comparison:
  • Making the top navigation shallower creates a more unified header.
  • Adjusting the headline placement to lead the eye towards the main image.
  • While not a fan of centering type often, it can work for short, formal text, especially if it aligns with a visual element (e.g., within the width of a hot tub).
  • Adding subtle line art illustrations in the corners, using a complementary color (like navy) and Tasmanian motifs, could balance the negative space without making it feel cluttered.

2. Website 2: King Technology Inc. – Violating Hierarchy

Mistake Identified: The main problem is a lack of clear hierarchy.

• Specific Details:
  • The site uses generic stock photos in the background.
  • It commits a "cardinal sin" by using "Welcome to" in the hero section, especially for any website designed after 2005, as the logo (expected in the top left) already identifies the site. This is a complete waste of space.
  • The headline "trusted partner for IT" is redundant given the company name and logo.
  • All elements in the hero section (logo, navigation, headline, scrolling client logos) are of similar visual weight or size, preventing any single element from drawing the eye first.
  • Moving client logos at the bottom distract attention from the main content.
  • The navigation is cluttered, with a repeated menu in the hero section and another at the top, lacking clear organization.
• Design Principle: Hierarchy is arguably the most important design principle, establishing an order of importance to guide the user's eye through content (e.g., primary, secondary, tertiary elements).
• Proposed Fix/Comparison: A best-practice example from a similar software development company demonstrates effective hierarchy:
  • A large, clear headline ("Trusted software development company since 1999") immediately conveys identity and establishes credibility.
  • The logo is simply placed at the top.
  • An explanatory byline and social proof (client logos) support the main claim.
  • A visually engaging video (contained within the logo shape for branding) draws the eye but then leads to the main content.
  • A much simpler, cleaner navigation with fewer sections and a prominent "Contact Us" button.
  • Effective use of negative space around elements.

3. Website 3: Jeweler in Calgary – Violating Consistency

Mistake Identified: The site suffers from a severe lack of consistency.

• Specific Details:
  • Typography: An excessive number of fonts are used, including multiple weights within Open Sans and Montserrat (two humanist sans-serifs that clash), a display font, and another serif font. This creates an "uneasy combination." The "Fonts Ninja" plugin reveals the extent of this issue.
  • Imagery: Images are inconsistent in style, background, and quality. Some are isolated on a black background, others have a starry background, and reflections appear fake. Below these, there are "in situ" images (items on a surface, dirty hands), low-resolution images, disproportionate images, and images with various effects and blue backgrounds.
• Design Principle: Consistency ensures a unified and professional look and feel across a website, making it predictable and easy to navigate.
• Proposed Fix/Comparison: Tiffany & Co. serves as an industry leader demonstrating strong consistency:
  • Color Palette: Primarily uses Tiffany blue (a brand-owned color) with black, white, and off-white/light gray.
  • Typography: Limits itself to one sans-serif typeface with different weights and one classic serif font, used sparingly.
  • Imagery: Maintains consistent styling for image rows (e.g., all isolated on white, or all with a Tiffany blue gradient, consistently lit and exposed). Styled images have a consistent color grade. This consistency contributes to a premium, "expensive" feel.

4. Website 4: Springfield Park District – Violating Responsiveness & UI Design

Mistake Identified: The primary issue is a lack of responsiveness, compounded by a cluttered User Interface (UI).

• Specific Details:
  • Responsiveness: Hero carousel images are completely cut off on desktop screen sizes, making them unusable. While the site eventually breaks to a mobile/tablet layout where images work, it fails on common desktop resolutions. This is unacceptable for a modern website.
  • UI Clutter: The navigation is overly busy with multiple nested dropdowns and layers. Colored social icons grab attention unnecessarily. The use of many different colored icons to represent different sections is overwhelming and does not effectively guide the user, instead pulling the eye in too many directions.
• Design Principle: Responsiveness ensures a website adapts and functions correctly across various screen sizes and devices. Effective UI Design focuses on clarity, usability, and guiding the user intuitively.
• Proposed Fix/Comparison: The Royal Parks website offers a cleaner approach:
  • Navigation: Sensibly laid out in a single row with large, easy-to-navigate dropdowns.
  • Hero Section: Features a single, orienting image and a clear, concise headline (even if it uses "Welcome to," it's direct). A short, two-sentence paragraph explains the site's purpose.
  • Content Layout: Presents 10 different parks in a well-arranged grid with consistent image and headline sizes, making them easy to scan. (Note: 10 is considered the upper limit for such a group before needing subgroups).
  • Clarity: Sections are easy to take in, focusing on specific topics (charity, park care, newsletter), leading to a clean footer. This contrasts sharply with the "dizzying" and inconsistent styles of the problematic site.

5. Website 5: Westwood's Lodge – Violating Simplicity & Appropriateness

Mistake Identified: The most significant problem is a lack of simplicity, though appropriateness is also a factor.

• Specific Details:
  • Visual Clutter: The site is visually overwhelming. Two complicated logos are placed on top of a busy background image, making them illegible (e.g., "lodge" in green script is unreadable). An opaque box behind the logos attempts to fix this but is insufficient.
  • Content Overload: Too many words and "nonsense" in the hero section.
  • Hero Image: A wide shot of the restaurant interior lacks a focal point, creating busyness without guiding the viewer's eye.
  • Call to Action: An "About Us" button, which is not a strong CTA, leads to a "coming soon" page, indicating poor planning.
  • Typography & Texture: Multiple fonts, including a "fancy stencil font," combined with a dark, overdone wood texture in the background, make the site feel cheap and cluttered. A promotional bar at the top adds to the visual noise.
• Design Principle: Simplicity aims for clarity and ease of understanding by removing unnecessary elements. Appropriateness ensures the design style aligns with the brand and its target audience. While the site attempts to be appropriate by reflecting the restaurant's interior, it fails in execution.
• Proposed Fix/Comparison: The Ivy restaurant (UK) demonstrates how a "maximalist" or graphically rich design can be expertly crafted while maintaining clarity:
  • Appropriate Style: The design successfully brings through the restaurant's maximalist interior style (plants, wallpaper, textures) with flourishes, borders, and illustrations.
  • Clear Focal Point: The hero photograph features subjects looking towards a beautifully presented plate, drawing the viewer's eye to the food and the adjacent headline.
  • Clear CTA: Prominent "Book a Table" or "Menu" CTAs are easily found, reinforced by a solid white bar.
  • Refined Consistency: Despite its busyness, the design is refined, with consistent styling, regal green and gold elements, marble textures, and detailed illustrations. It has a strong personality that appeals to a specific clientele (e.g., women, as suggested by the imagery).
  • Legibility: Even with multiple layers and textures, the design ensures legibility and easy navigation, demonstrating thoughtful execution.

Synthesis and Conclusion

These examples highlight that common design mistakes are prevalent even on live websites today. By understanding and applying fundamental design principles such as balance, hierarchy, consistency, responsiveness, simplicity, and appropriateness, businesses can significantly improve their online presence. The video emphasizes that the goal for most businesses isn't to "reinvent the wheel" but rather to avoid these major pitfalls and adhere to best practices. This approach ensures a functional, user-friendly, and effective website that accurately reflects the brand and engages its audience.