Emerging design trends

Published on: July 16, 2007 by Paul Boag

Web 2.0. brought with it a lot of things. One was a new style of design. However, design is a fickle thing and we are already seeing some new trends emerging.

Gradients, reflections, drop shadows and rounded corners are all classic elements of web 2.0. design. For a while now these kind of stylings have dominated emerging websites. However, I have started to notice a shift recently and I have to say I like what I am seeing. Below I outline a few of the design elements that are currently in vogue and why I particularly like them.

Don't get me wrong. This is not to say that I think these design elements are new (many are blatantly not), I am simply saying that they seem to be becoming trendy again.

Goodbye to the Fold

With web 2.0. came bigger font sizes and bolder designs. A consequence of this was less emphasis on cramming content above the mythical line that is the fold. Although many elements of web 2.0. design are falling out of favor, rejecting the fold seems to be growing in popularity. You see more and more sites willing to embrace the idea that users do in actual fact scroll and at this years @media the whole subject was met with considerable passion!

Personally I view this as a huge step forward for design. In many ways it is as significant as the end to the web safe palette. We now know that users are happy to scroll and although it is still good practice to keep key content above the fold, that doesn't mean everything has to be.

It was always a false concept anyway with the fold moving depending on resolution, browser type, toolbars and window size. Accepting this and moving on, is progress indeed.

Functional Footer

The footer has always been an underused page element. Often it was used as nothing more than a nice way to finish off a design and a place to dump all of the crap that we don't know what to do with! Now however, we are beginning to see sites that actually utilize this screen element to provide supporting navigation and information.

These "expanded footers" such as you find on Apples website, are being adopted more widely and provide some real "added value" to the user. They often contain things like; contact information, related links, and about us.

Resolution dependent layout

Another feature that seems to be growing in popularity is resolution dependent layout. This is where the layout adapts based on the viewable area. The most classic implementation of this is where at resolutions greater than 800 by 600 a third column of content is displayed. At 800 by 600 the content is pushed down to the bottom of the main column.

This is quite a hard feature to explain. It is much easier if you see it in action. Go to Patrick Haney's website and reduce your window size. As you reduce it down you will suddenly see that the third column disappears and the content can now be found at the bottom of the page.

This approach makes better use of available space than either fixed width (with its empty space) or fluid (with its long line lengths). In my opinion this approach gives a real alternative to the fixed/fluid debate.

Right column navigation

Traditionally navigation on the web either appears on the left or at the top. Right hand navigation has somewhat been frowned upon. However, more recently this trend seems to have been changing with more websites adopting it. I think this is partly due to blogs, which seem to have right hand navigation by default. However, it has always struck me as strange that the convention is towards left. If you think about it there are a lot of good reasons for right hand navigation...

It puts the content first visually
Your cursor natural hovers near the scrollbars on the right
We are familiar with right hand navigation from tabs in books
We know from usability research that whether navigation is on the left or right, it makes no difference in the time it takes to complete a task

Overall I am hugely in favor of right hand navigation and I am glad to see it becoming more popular.

Focus on content

I have also observed a growing movement towards more content focused websites. By that I mean that more user interfaces are becoming understated in order to put the emphasis on the content rather than the design.

The most classic example of this is Garrett Dimon's blog which is understated to the point of minimalism. The entire site is built to make the process of accessing and reading the content as easy as possible.

Although this doesn't work well for every site (where there is as great a need to build brand identity as convey information) I do think that overall this is a healthy move. Too many designers are more concerned with showing off their design prowess than they are with focusing on content. The irony is it takes more design skill to build a clean, content orientated design than something more flashy.

Emphasis on typography

Finally, thanks to people like Richard Rutter we are seeing a growing interest in typography. For too long web designers have ignored typography concluding that we are too limited in fonts to do anything useful. However, typography is more than type. It is about things like leading, spacing, and style. Much more than typeface alone.

A growing number of web designers are recognizing this and doing ever more creative things with the limited number of fonts at our disposal.

So there you go. Those are the design trends I see emerging at the moment. What about you? Have I missed anything? What other things are going on that we should all be aware of?

Right, all I need now is some time to redesign this site :)

Comments

Comments are for the discussion of this post. If you have other questions / comments then post them to the forum or send me an email

Post by Ross Bruniges on July 16, 2007 10:21 AM

Right hand navigation is an interesting one, especially with the way that we (I) currently use CSS to have it display on the left but appear after the content (and essentially displaying to the "right" of the content.

With WCAG now saying that the way the page displays should also be how it is structured it could be argued that this approach will now help aid the accessibility of our pages...

and yes, quoting Nate Koechley - "FUCK THE FOLD MAN"
Post by Richard Bateman on July 16, 2007 10:47 AM

I'm in love with tags at the moment. Be it the ones found over at last.fm or at virb.com.

Especially well designed tags. Maybe not a new thing but the current design trend of tags are floating my boat.
Post by Oliver Coningham on July 16, 2007 12:12 PM

Another great list! I have to wholeheartedly agree with idea of placing navigation on the right hand side. I have been doing this much more recently with the newer sites I have designed. Firstly, I find that it just feels more natural to have it on the right hand side, as like you say, your mouse tends to hover over by the scrollbars. To me, to have to push my mouse over all the way to the left to reach the navigation is too much like exercise for me! :p

I also agree in that it puts the content first, which, in most cases, is a good thing. Although the use of this technique should be evaluated on a site-by-site basis. And I guess a lot of people are still going by design standards such as always having a header with the logo on the left, and then the navigation in a column on the left too. In my opinion, although I can see that these standards will aid people in terms of usability and what they expect from a website, it's nice to break from tradition now and again and set new standards.

Oliver Coningham
Website design in Yeovil by Oliver Coningham
Post by Frank Fortin on July 16, 2007 1:55 PM

Can you find another way to provide the usability study you provide a link for? The link doesn't currently work, and we've got a raging internal debate going abut left/right navigation.
Post by Ben on July 16, 2007 3:55 PM

I've always been a fan of minimalism. Big graphic-orientated sites have to be done just right for me to like them, and most Flash sites don't even get 100% loaded by me before I close them.

I'm also a fan of typography (though not as well versed in it as I'd like to be), but Richard Rutter site, for me, is unreadable unless I increase the font three times! Doesn't make sense to me...
Post by Aaron on July 16, 2007 7:24 PM

I don't see the resolution dependent layout as anything new: it is just a product of the float, and I know I, personally, have used it in many designs over the years.
Post by Brody on July 16, 2007 9:38 PM

I've always hated the idea of designing sites with the task of putting as much content "above the fold" as possible. Adding a large headline or some other attention-grabbing element is a good idea, but I feel like scrolling is a simple enough task that people do it anyways--whether their attention is grabbed at the top or not. So the "Goodbye to the Fold" trend is wholeheartedly welcomed by me.
Post by Paul Boag on July 17, 2007 9:50 AM

Sorry it would appear that the usability report is currently down. The link is right so it might come back soon.
Post by Leonardo on July 17, 2007 2:25 PM

'No Fold' and 'Functional Footer' are ideas that are connected and that I embrace.

In fact, every content section should be pretty functional (yet simple), in the sense that there should be a fuction/purpose for it.
All other visual space should be clean.
Post by Greyroo on July 20, 2007 1:45 PM

it seems like we are going full circle in web design. web pages from 10+ years ago were focused on the content (text) and visual elements second. As the browsers and standards developed so did all the extra "fruit". The one benefit we have now over back then is CSS and browser support.

As always its about the content.
Post by luggage on July 21, 2007 2:11 PM

Great post with lots of keen observations. I’m particularly interested in this as someone who keeps track of how the web is influencing more traditional forms of reading and vice versa. For instance, I would guess that the early tendency to use left hand navigation may initially have been inspired by the way we’ve traditionally read – we’ve always been trained to look at a page from left to right. Even on television, the crawler at the bottom of the screen moves from left to right. We’ve already seen the web change the way readers approach a text, with scanning much more common than it used to be. And while I also applaud the return of content to web pages, it’s a different sort of content than one might see in more traditional forms of media. Is it possible other changes in our normal strategies for reading and writing are on the horizon?
Post by Darren Stuart on July 21, 2007 9:37 PM

great post, as a developer who designs I tend not to focus on this stuff as much as I should.

I love the 3rd column rule but have you ever tried getting a client or account manager to sign off on it because they think it is broken...
Post by Tim on July 23, 2007 12:01 PM

Speaking as someone who knows (almost) nothing I've always felt that scrolling ~was~ more difficult 10-12 years ago when it meant physically moving your mouse to the top right corner, grabbing that skinny slider bar, and pulling it down - or locating a tiny down arrow at the bottom right corner and clicking on it.

However, scroll wheels have made scrolling so much easier and more intuitive - the action of rolling the scroll wheel with your index finger mirrors the action of placing your finger on a physical piece of paper and sliding it down (well sort of - sliding your finger 'down' makes the on-screen paper slide 'up' and vice versa - but I digress!) But there's no doubt that scroll wheels are so intuitive and quick to learn that all the 'drama' that used to be associated with scrolling is completely removed.

Perhaps if we'd always had scroll wheel mice, the whole issue of scrolling and the fold never would have existed!
Post by Eoghan McCabe on July 23, 2007 1:07 PM

Good post, Paul.

Re "the fold": I tend to a agree that in general, trying to push everything "above the fold" makes no sense. But this doesn't mean there is no fold.

My views are biased as I just launched a little app called FoldSpy which measures user's screen sizes. We sell it as a tool for advertisers and say that for the sake of their ad revenue, it's better to keep ads above the fold. This is something I've run tests on over the past four months and found to be true on a range of sites. It seems to be simply because people spend more time near the top of a page (as the ClickTale stats show).

And that's the reason I say there is a fold. Even if it's now easy for us to scroll and we don't mind doing it much, something near the top of the page still has a higher value. Saying that all areas on the page are equal would be like like saying that a shelf at the back of the supermarket is equal to one beside the till. It's not. And that's why they put milk and all the essentials at the back and use the high-profile places to push the nasty impulse-purchase items (chocolates and other stuff you could do without). :-)
Post by Eoghan McCabe on July 23, 2007 1:11 PM

Just noticed your link to us. Thanks!
Post by Pinky punky on July 23, 2007 3:19 PM

Amazing! Lovely stuff
Post by Jim on July 23, 2007 6:42 PM

Another good example of resolution dependent layout is http://fortes.com/ -- there are two completely different designs used depending on the screen size
Post by TJ on July 23, 2007 7:12 PM

Resolution dependent layout - This may in fact settle the debate of fixed versus liquid layout, but I nearly guaratee that you'll never see this approach utilized by a website that employs a marketing/advertising manager that oversees web design.

There are very few marketing/advertising managers that obtained a degree when the web would have been part of the cirriculum. They learned their trade with a focus on print. Mix in the fact that most of their work experience likely falls into the print world, and concepts of liquid layout and / or dynamic layout causes their brain to melt.

Marketing/advertising managers are control freaks (can you say "font pixel sizing") and website usability escapes them (I'm certain they initiated the "fold" theory). Show them a site where the page starts to fold under itself along the y-axis and they'll absolutely freak.

With that said, I'm not sure I wouldn't disagree with them. Now that the web is so pervasive that your grandparents are surfing, I'd be very inclined to think that having the last columns fold under would cause a huge usability problem. I fear most people, including avid users, just wouldn't get it. And if they did get it, they think its a mistake (as Darren Stuarts comment points out).
Post by Sholom Sandalow on July 23, 2007 8:53 PM

Good post. You put together a nice little list of recent web site designs. However I would have to quibble about one point. It really is a matter of semantics, but I think defining terms is so important in the design industry...
In your section, Focus on Content, you stated "more user interfaces are becoming understated in order to put the emphasis on the content rather than the design."
It is the design of content that makes that content readable. Minimalist sites are no less designed--and in some cases more so--than sites with elaborate backgrounds, or other frills.

I think by design you mean visual flair or style.
Post by Neil Scott on July 23, 2007 9:28 PM

Very good article, but at the start you seem to be confusing fashion with conventions. Conventions are things like putting your logo top left, fashion is having a shiny glass effect.

Conventions are what make a site usable and it is right to focus on them, but fashions also hold much interest (I am fascinated by all the 70s circles you see everywhere nowadays - see Pownce etc).
Post by Oliver on July 24, 2007 8:14 AM

I noticed quite a few blogs having two sidebars now: left column = content, right column = sidebar (tag cloud etc.), rightmost column = sidebar (links). people hate it i noticed (i heard more than a few people complain). i clutters up the page even more.

one of your examples (the flexible page example) is such a layout.

not good.

but as always, people will copy because it's new, not because it's good.
Post by David Mercer on July 24, 2007 7:51 PM

Interesting that Patrick Haney's website, the one you touted for its resolution-dependent layout looks awful on my browser (IE7). If I resize the window, it looks OK, but as soon as I try to scroll, it overlaps some of the elements so that they are unreadable. Jim posted a better one, that works fine on my browser: http://fortes.com/.
Post by manu on July 25, 2007 9:15 PM

As someone else pointed it out, your resolution-dependent layout example is just a set of fixed-size floats which wrap when the window cannot contain them...

here is what I understand to be a resolution-dependent layout

when the window gets too small the columns turn to rows !
Post by Rick Sloboda on July 28, 2007 8:21 AM

Paul, I’m a first-time visitor and am impressed with the depth of knowledge and info.

I agree with your points. In fact, I believe we need to start thinking of visitors as actual guests. It’s a subtle mind shift that can help us better serve and advance the online community at large.
Post by Glen on July 29, 2007 5:39 AM

This is a great post! i was just telling a friend how all of these new trends are influencing my new clients. I am getting more requests to customize blogs.
Post by SEO web design on July 29, 2007 6:43 PM

One thing i noticed about web 2.0 design is that all of the good ones use the same color pallette.

i love these colors...but, dont want to look like the other million of them out there.

are there any other color palletes that work well with web 2.0 web design?
Post by Web Designing Delhi on July 31, 2007 5:18 AM

I was looking for a long time some best designing tips that includes the features of web 2.0. I found your post and go relax. I instantly forward this mail to my designers to have some best tips from your post. It's realy great post.

Thanks
Post by Bruce on August 17, 2007 2:21 AM

Yeah ... and the comments about the end of the "fold" are erroneous. The issue with the "fold" has nothing to do with whether users are willing to scroll down to access more content, any more than it has to do with whether users turn over the newspaper to read the article. The issue has to do with capturing the NON-MOTIVATED or CASUAL user's attention. You only have a few seconds to capture browse-by visitors and they certainly aren't not going to scroll down if nothing captures their interest. This isn't a design or usability issue, it's a basic marketing principle. Designers should stick to design, not marketing.
Post by hrm on August 22, 2007 3:54 AM

HOORAY. I've been dying to put my links on the right, because I can't stand the way information seems to shift to the lower-right part of a website. I want to make more balanced page layouts, and I've been itching to to right-side nav. for a while now. I don't know why I was waiting for permission!! But I'm glad I got it. ;)
Post by SmartFolio on October 2, 2007 12:47 PM

yeah i agree, well said!!!!
Post by SmartFolio on October 2, 2007 12:47 PM

yeah i agree, well said!!!!
Post by SmartFolio on October 2, 2007 12:47 PM

yeah i agree, well said!!!!
Post by Sally, design guru on October 19, 2007 3:20 PM

But we got accustomed to use left side navigation bars... For many people it's hard to specialize to any changes.
Post by portrait artist on December 4, 2007 5:51 AM

Thanks for this tips. Based on experience we always give emphasis on the left nav links. This is because the human nature of reading things is from left to right. It is therefore best to give the left nave links the best and user-friendly so as not to irritate or discourage site visitors.
Post by w7e on December 6, 2007 11:35 AM

cool list :)
me likes ^^
heh, I had right hand navigation since 2002 ^^ (as well as a top navigation)...

I do like that 3 column floaty thing, although putting the 3rd column at the bottom is a bit awkward in my opinion. Would be cool if it could move to a bar across the top or something similar. Too bad I got no clue if something like that would be programmable at all.. ^^
Post by Web designer on March 6, 2008 2:37 PM

Really nowadays this an open question about the most appropriate site resolution to be perfectly observed by the majority of customers.
Post by 泰拳 on April 9, 2008 8:36 AM

Can you find another way to provide the usability study you provide a link for?
Post by Todd Kinniburgh on June 17, 2008 4:42 PM

Very useful information. I completely agree with the scrolling issue.
Seems that I constantly get in the argument that a website does not need to be constructed so that it can be viewed on a small laptop.

White space... love white space.

A podcast for those who design, develop and run websites.

Latest shows

Have your say

Posts by tag

Emerging design trends

Goodbye to the Fold

Functional Footer

Resolution dependent layout

Right column navigation

Focus on content

Emphasis on typography

Comments

Leave a comment

Additional Information

Interesting links

Supporting boagworld

Speaking and writing