A Few Design Trends

Jason Beaird

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:

example 1&thinmspace;—&thinmspace;designinformer.com: no nav; just great content

example 2&thinmspace;—&thinmspace;designinformer.com: no nav; just great content

example 3&thinmspace;—&thinmspace;designinformer.com: no nav; just great content

Expansive Footers

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:

Expansive footers

Other examples include:

Bare-bones Minimalism

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!)

The gorgeous, minimalist website of Analog Coop

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”.