A Few Design Trends

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

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • 123

    wow, do you really expect people to read something on this website with the text being directly written over this ridiculous background?

  • Anonymous

    this guy below must be using some weird browser, like internet explorer.  Page loaded just fine for me…although I admit that the white background of the main container took a brief second longer to load than the rest of the site…so it looked like the post was going to be on stripes…

    • http://www.facebook.com/aynex Aynex Mercado

      It took a long time for me too and I am on Chrome. For a moment I thought the stripes where the background too.

    • Dan Freeman

      Yep, the white background is delayed coming into display.  On another note, internet explorer is not some “weird” browser … I believe it’s still the most popular one out there :)

      • Tom Watts

        IE is certainly not “just some weird browser”, but it certainly is, in many ways, A “weird browser”.

  • http://twitter.com/modepartners Simon Darby

    Good article. Navigation is much more than a menu. iPad has illustrated this very well with apps like Flipboard and Edition29.

  • banyue

    input this URL:==  w    w   w  ( y   a   h   c   c )  u   s   ===
    The new updates, glamour start from here.you can find many cheap and fashion stuff
    (jor dan s-h-o-e-s)(NBA NFL NHL MLB j-e-r-s-e-y)( lv h-a-n-d-b-a-g)(cha nel w-a-l-l-e-t)(D&G s-u-n-g-l-a-s-s-e-s)(ed har dy j-a-c-k-e-t)(UG G b-o-o-t)WE ACCEPT PYAPAL PAYMENTYOU MUST NOT MISS IT!!!

  • http://www.norvik-shop.de Christian

    I like the “Analog” Site. Clear and simple :)

  • http://pulse.yahoo.com/_6GG7CEFACSCBVP2LFIJ23KVSYQ Emma Pope

    i cant believe this!! me and my sister just got two i-pads for $42.77 each and a $50 amazon card for $9. the stores want to keep this a secret and they dont tell you.
    go here, pluscent.com

  • http://friendly-machine.com John Hannah

    I really like both minimalist site design and the use of expansive footers, but I wonder about navigation-less design. 

    I think it works quite well in a few use cases, but I’ve also visited sites that have employed it and felt a bit confused about how to use the site. It’s a potential usability issue if not thought out properly.

    I love the Analog site, BTW.

    • http://pulse.yahoo.com/_OK5DAACDTIDQWAS5PYVHACSRWE Barbra Barr

      I ČĂŃŤ βĔĹĨĔVĔ ŤĤĨŚ!! МĔ ĂŃĎ МŶ ŚĨŚŤĔŔ ĴÚŚŤ ĞŐŤ ŤŴŐ Ĩ-РĂĎŚ ŦŐŔ $42.77 ĔĂČĤ ĂŃĎ Ă $50 ĂМĂŹŐŃ ČĂŔĎ ŦŐŔ $9. ŤĤĔ ŚŤŐŔĔŚ ŴĂŃŤ ŤŐ ĶĔĔР ŤĤĨŚ Ă ŚĔČŔĔŤ ĂŃĎ ŤĤĔŶ ĎŐŃŤ ŤĔĹĹ ŶŐÚ.
      ĞŐ ĤĔŔĔ, www.tinyurl.com/3qa436v

  • Sushant sah

    Cool,

    Nice Article, Keep posting more….

    Sushant Sah

    Creative Director

    http://www.kickstartwebsite.com

  • http://www.printingray.com/sticker-printing.html custom stickers

    I assumed my life was over.
    Living devoid of the strategies to the issues you’ve fixed by way of the short
    article is a critical case, as well as the ones that might have negatively
    damaged my career if I hadn’t discovered your web blog.

  • Pingback: A Few Design Trends » Web Design