If you’re feeling so overwhelmed by the many resources available that even to contemplate starting a morgue file for inspiration is beyond you, take a few minutes to browse through those sites. Look past the colors and textures to the boxes that make up the layout, and try to identify standard ideas and design trends. By doing this, I’ve started to notice a few trends that seem to be emerging in website layouts.
Navigationless Magazine Style
On the Web, we tend to be a lot more goal-oriented and consume information in bits and pieces. Site navigation allows us to be quick, efficient … and erratic. What if you don’t want your visitors skipping to another page? What if the information you need to convey is best consumed as a whole, like a book or magazine article? If that’s the case, why include navigation at all? That’s the approach that Design Informer takes with each of its art-directed articles. Other than a tiny Design Informer logo in the header graphic, there are no site navigation links on each article’s page until you reach the comments section in the footer. A trend from one website, you ask? Take a look at the other examples below — just great uninterrupted content, from The Bold Italic and 52 Weeks of UX:
This one is less of a trend and more an ongoing phenomenon. I featured expansive footers in the first edition of my book The Principles of Beautiful Web Design, and these continue to grow today, both in size and in the types of information people are putting in them. Rather than using the footer for just essential links and a copyright notice, many sites are utilizing this once-neglected piece of page real estate to include contact information, expanded site navigation, and social media content. Although putting a site’s main navigational element at the bottom of the page is a bad idea, including “bonus” navigation and content in that space is an obvious solution. A great example of this trend is the FortySeven Media-designed Show & Tell Consignment Sale:
Other examples include:
Similar to the “navigationless” magazine style and quite contrary to the expansive footer concept, many sites are removing a lot of the standard web content fare. Minimalist design is all about reducing your design down to the most essential elements. Screenshot below the guys from Analog Coop accomplish this by reducing its copy to a single, fun-to-read page. For them being a minimalist is having a home page with simply a list of portfolio links, a quote on design, and some contact info. It’s an easy concept to apply: just go through each element of each page and ask yourself what it’s adding to your website. If you’re without an answer, toss it out. (Oh, and there a few a few easter eggs on Analog’s site — see if you can uncover them!)
Minimalism isn’t a new design trend by any stretch of the imagination—even on the Web. In the art world, the minimalist movement of the 1960s and ’70s was a reaction against the overly self-expressive era of abstract expressionism. Similarly, the recent explosion in minimalism and single-page designs on the Web is a reaction against the overly interactive Web 2.0 era. It’s an attempt at balancing out the hustle and bustle of social media with the equivalent to a peaceful café or quiet art gallery.
The Principles of Beautiful Web Design
This article is from Jason Beaird’s The Principles of Beautiful Web Design book (the second edition of which is out now). This is the tenth part of the first chapter.
The entirety of the color chapter has been digitized, so if color is more (or also) your type of thing check out the color chapter here on Design Festival.
Next up we’ll look at various layout types: fixed, fluid, and “responsive”.
Jason Beaird is a designer and front-end developer with over ten years of experience working on a wide range of award-winning web projects. With a background in graphic design and a passion for web standards, he’s always looking for accessible ways to make the Web a more beautiful place. When he’s not pushing pixels in Photoshop or tinkering with markup, Jason loves sharing his passion for the Web with others.
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers
Form Design Patterns