Layout Examples
Boring examples:
https://www.gutenberg.org/
https://en.wikipedia.org/wiki/WordPress
Exciting examples:
https://www.lego.com/en-us
https://www.disney.com/
https://www.nasa.gov/learning-resources/nasa-kids-club/
Bad Navigation Examples:
Yale School of Art – art.yale.edu
- Desktop: chaotic layout, scattered links.
- Mobile: even harder to use, navigation not prioritized.
Arngren.net– arngren.net
- Desktop: infamous for clutter, everything crammed together.
- Mobile: essentially unusable.
Good Navigation Examples:
Apple – apple.com
- Desktop: clean top bar with clear categories.
- Mobile: collapses into a simple hamburger menu with icons and easy scrolling.
BBC News – bbc.com/news
- Desktop: logical mega-menu, news categories easy to find.
- Mobile: streamlined top navigation with “More” dropdown.
Airbnb – airbnb.com
- Desktop: smart use of icons and categories.
- Mobile: very touch-friendly, sticky nav bar, clear search focus.
Animations & Effects Examples
Good examples:
- Small animations to highlight features, hover effects, and slide-ins that don’t distract.
- Micro-interactions when scrolling, subtle fade-ins, clean transitions.
https://www.apple.com/studio-display/
Article with good and bad examples:
https://www.prontomarketing.com/blog/a-guide-to-proper-web-animation/
Good Portfolio Grid Examples
- Behance – behance.net
- Classic grid of creative projects, very visual.
- Dribbble – dribbble.com
- Designers showcase work in a modular grid.
Product Showcase Grid Examples
Grids & Portfolios
Bad examples:
- https://www.drudgereport.com/
- Uses a grid-like structure for news links, but it’s visually overwhelming, tiny, and unbalanced.
- https://www.discountbedsbelfast.co.uk/
- https://www2.pnwx.com/