Current Style in Modern Web Design

In this article I try to sum up the current state-of-the-art in graphic design for web pages (late 2006, but still highly relevant today), and identify the distinctive features that make a modern web page look fresh, appealing and easy to use.

The key feature of modern web design is simplicity.

To learn how to apply simple web design to your own sites, you need to read “Save the Pixel – The Art of Simple Web Design”, which takes you through a full set of simple design tools, illustrated with 22 before & after redesigns.

I’m glad to say that web design is better today than ever – and it’s continuing to improve. That’s not just because there are more web sites out there, so more good stuff to look at. There’s still an awful lot of crud too. I just think that more web designers know more about how to design than ever before.

The examples below (which I’ll roll over time) show excellent modern graphic design technique. They all look good, and are clear and easy to use.

Hotties

I’m not saying these are the very best sites out there, just that they’re typical of today’s best design.

Common features

The great sites above share the following design features:

 

Let’s look at these features one by one.

Simple layout

It feels like we’re seeing more simple 1- and 2-column designs than in previous years.

The overall feel you get is that designers generally agree that simple pages work better.

These pages read in a straightforward way from top to bottom, and you don’t find your eye skipping around trying to work out what to look at. It’s a much calmer and more solid browsing experience than in times gone by.

Centered orientation

The other thing you notice about all the hot picks above is that they’re all laid out around a central axis.

Whereas a couple of years ago, you’d find a lot of liquid layouts and left-aligned fixed-width layouts, today content goes in the centre of the screen.

Diagram showing left-aligned, liquid and center-aligned page orientations

Left-oriented layouts are much less common than they used to be.

Also, liquid (full-width) layouts are less popular.

The wisdom has always been that we should try to get as much information “above the fold” (i.e. visible on the screen without scrolling). Liquid layouts achieves this.

However, today we seem to be more comfortable with scrolling, and we’re willing to put up with scrolling for the benefits of increased white space and line height.

Design the content, not the page

Good modern web designs put less energy into designing the page background – the canvas and permanent page features – and rather focus on designing the content itself.

This is one of the central themes of Save the Pixel, my ebook on the art of simple web design.

We see the effects in:

  • Freer, less boxed-in page layouts
  • Softer, simpler, receding page “furniture”
  • Strong colour and 3D effects used to draw attention to the content itself, including the main branding
  • The focus is on making the site’s subject look good, rather than making the web designer look good (which is better for the designer in the long-term!)

To take away…

What designers should learn from this trend is that it’s not enough to design a blank page, to be stuffed with content later. As I’ve written elsewhere, content is our problem. As designers, we’re communicators (not decorators) and site content carries the majority of our message.

Why center-align?

I like center-aligning, and have been tending to use it on my designs for a while.

When the content sits in the centre of the screen, it feels up-front and confident.

It also gives a sense of simplicity and balance, which reflects the move towards clean, more Zen, design.

The most common centered designs are either fixed-width (i.e. master width in pixels or percent) or sometimes zoom-width (i.e. master width in ems, e.g. Forecast Advisor). The benefit of restricting the width of the content (particularly with zoom-width, which resizes as the font size changes) is that the line-length is prevented from getting too long on larger screens. (Very long lines of text are less efficient.)

However it’s also possible to have a liquid layout with a center-orientation, as the Alternative Energy Store site shows.

On this site, just centering the logo brings the friendly, forward-facing feel of the centered site, while getting a lot of content visible on the screen.

3D effects, used sparingly

Every single one of the hotties uses gradients subtly, either to give bars a slight roundedness, to create a soft feeling of space in the background, or to make an icon stand out with embossing and subtle drop-shadows.

Reflections & fades are very prevalent. Drop-shadows are still used, but with care.

Reflection from Iomega.com Reflection from wishingline.com Fade from 31Three.com Reflection from sirruf.com Drop shadow on squarespace.com Drop shadow on Iconbuffet.com

Trademark round flashes are everywhere.

Flash from emaginacion Flash from 31three Flash from www.folieto.at Flash from www.bmf.jugem.cc Flash from sirruf.com Flash from stylegala

Soft, neutral background colours

All the hotties have a plain background, the most popular being white and greyscale fades. These give a cool, neutral, soft base against which you can flash strong colour to draw the eye.

Strong colour, used sparingly

A soft, stylish background is the perfect base for adding eye-catching features. Strong colours and tonal constrast are great for drawing the eye to the more important elements on the page.

Strong colour from Iomega.com Strong colour from 31Three.com Strong colour from LinkedIn.com Strong colour from Patrickhaney.com Strong colour from Stonewall.co.za Strong colour from Iconbuffet.com

Iomega uses more strong colour than the others, with its intense dark red promotion area. However this doesn’t drown the rest of the page, because the colour is consistent and simple in shape.

Cute icons, used sparingly

There’s a theme here: Don’t use too many attractive elements on the same page view (i.e. that appeals to the eye and draws the user’s attention).

As with strong colour and 3D effects, appealing icons and buttons can add that bit of polish to help give a page a high-quality feel. But used too much, they’ll have the counter effect, cluttering the page and confusing the user.

Cute icon from Patrickhaney.com Cute icon from Patrickhaney.com Cute icon from Iconbuffet.com Cute icon from Plaxo.com Cute icon from 31Three.com Cute icon from Avalonstar.com

Plenty of whitespace

Today’s web designs are so fresh, they feel like they’ve taken a deep breath.

Sometimes I imagine taking a page design that’s too crowded and sticking it on a balloon, then blowing air in until everything on the page pulls apart to leave healthy gaps.

Your eye needs space (guttering in typo language) round stuff to help you clearly and cleanly identify things.

In general, the more white space the better. It’s very rare that I look at a page and think: “Gosh, they really need to cram that page up a bit!”

Of course, “white” space doesn’t have to be white. But it does have to be space!

It’s great to see so many designs using good-sized margins to space elements apart, and extra line-height to aid on-screen reading.

Look at all this lovely refreshing white space!

White space on LinkedIn White space on Mozilla White space on Plaxo

Nice big text

I’m not saying that all the text on your web site should be supersize. In fact, in some scenarios, small text is fine (we tend to take in more when text is a bit smaller).

What these good designs show is:

Make the most important text on the
page bigger than normal text

Like the other design techniques we’ve seen, it works when used in moderation. If all your text is big, then none of your text is big.

Use bigger text to help your visitors see quickly what the page is about, what’s most important, and figure out where they want to look next to find what they want.

Links

Below are links to other collections of sites that may be beautiful, highly compliant, effective, or all three together! Make up your own mind.

Further reading

Your Chance to Learn ALL My Pro Web Design Methods

38 Comments Leave a comment

  1. Philwebservices says:

    You’ve got the best design of the day. thanks for sharing your design.

  2. Pingback: The Daily ALIEN » Blog Archive » An overview of web design styles

  3. Philwebservices says:

    Thanks for all your designs it helps me a lot!!!!!!!

  4. Trackback: goyange's me2DAY

  5. qlt says:

    “less is more”
    And your design proved it wonderfully

  6. Tyler Harris says:

    Great article thanks I’m about to undertake a new build for a client and nice to know we are on the same page.

  7. timo says:

    great article, thanks!

  8. MVP says:

    can u give us some bad design examples?

    • WDFS says:

      MVP, great idea for another article. I’ll add it to my list of things to do.

  9. Heidi – Botanical PaperWorks says:

    Thanks for this. I found the article thanks to a Google search and it provided just the info I was looking for. Will be following you in the future. ~Heidi

  10. Jaganathan Mani says:

    Very nice article by which we can really design a good web page.!!!
    Thanks
    Jagan

  11. Jolly Agarwal says:

    Is there any standred width for 2.0 web layout?

    • WDFS says:

      I wouldn’t say there’s a standard. But fixed-width, centred is by far the most common layout. I would also say that, for content sites, we’re moving toward narrower (say 980px) widths, which goes along with fewer columns and reasonably short line lengths. The result is a page that may take more scrolling, but is nice and easy to read.

  12. beck dave says:

    that’s good article .

  13. Steve – Rugged Depot says:

    Great insights! I think a good design boils down to simplicity and excellent usage of graphics which actually work towards enhancing content. Flashiness and sophistication won’t cut the cake if all they do is distract readers.

  14. Pingback: Web 2.0 Design – How to Design Web 2.0 Style | Design Tailors

  15. bob says:

    Exploding banana cake

    • Dan Johnson says:

      Indeed, Bob! Thanks for your insights.

      • bob says:

        No problem, I’m here to help!
        All joking and random posting aside, very nice article.

  16. Brian Flynn says:

    Hey Ben,

    Loved your book, love your philosophy!

    - just one problem with you I’m afraid!

    WHY HAVE YOU STOPPED DOING WEB DESIGN?

    - Disillusioned?, no money in it? – you worry me!!

    • Ben Hunt says:

      Hi Brian.

      Please don’t worry. I do still do web design, but for my own business and occasional hand-picked clients.

      There is money in web design, if it’s done right. In fact, the world needs good web designers more than ever!

      So my main focus right now is training other people how to do great websites, and earn a good living doing it.

      See http://www.prowebdesignalliance.com/ to see how.

      ~ Ben

  17. baidu678 says:

    I think you have vision. This is awesome content. Im impressed with how you presented it. I plan to return in hopes to read more.

  18. Kevin says:

    These examples are terrible. I hope you aren’t “teaching” people how to make websites like these because they are current…

  19. Ron says:

    some examples are ok but Kevin is kinda right – please update this page =) Need some new fresh liquid 100% width designs (large image backgrounds)

  20. Robbi says:

    Hi Ben – recently discovered your work and appreciate your insight.

    But I’m writing because your screen capture of the ForecastAdvisor page features the weather in Egegik, Alaska. I know for a fact that this is in the middle of nowhere with a year-round population of like 60. HOW IN THE WORLD DID YOU COME UP WITH EGEGIK OF ALL PLACES????? (I spend my summers fishing for salmon there).

    Sorry everyone else for the useless comment. But this coincidence is totally blowing my mind.

  21. nico says:

    I like your writing style.

    “If all your text is big, then none of your text is big”
    “‘white’ space doesn’t have to be white. But it does have to be space!” and
    “As designers, we’re communicators (not decorators)…”
    are nail-hitting statements for me.

    I believe you understand the way many folks think and even if it’s just for that purpose, I’ll buy your book. There is not much chance that it will make me a good web designer — I know my limitations — but I am confident that it will give me a better perspective on the subject.

    Thanks, Ben.

    • Ben Hunt says:

      Thanks Nico. If you want to be a good web designer, check out the Alliance. That’s what it’s for!

  22. Angela Brown says:

    Thanks for nice sharing. From there we come to know modern techniques of web design.

  23. Dave says:

    I’ve bookmarked this page and seem to always keep coming back to it, really helps me stay on track when working on a web design layout. It’s amazing how elusive Simplicity can be.

    Thanks for your help Ben, Cheers!

    Dave

  24. reihaan says:

    I am a web developer, and designer, often visit various blogs for inspiration, and learning new concepts, I really found your blog interesting and like the way you have provided the information.
    This article about modern web design is awesome…
    Thanks for sharing!

  25. jaffa says:

    Great thing.

  26. Pingback: Research – Web 2.0 « Sophie Elliston

  27. jikol says:

    yoo this site looks terrible and even the examples of modern design sucks where the f… u came from peoples look around whats heapening on the internet floating aristic design with animations and interactive buttons
    ….

    • Ben Hunt says:

      Sorry Jikol, your comment doesn’t make much sense. But I get you’re in the “design is sexy” camp. Go and jerk off all you like over sexy design.. Hey – I like beautiful websites too! But the fact is, I’m afraid to say, sexy usually doesn’t get results.

  28. Michael Lysiak says:

    Thanks for sharing. I enjoyed looking at your examples and reading your article. It helped me to get some ideas of my own to simplify some areas on my site.

  29. web design company in nigeria says:

    when it comes to Modern Web Design Style, Good Web Design, everybody has their own opiniun.
    i do not disagree with you. but not all the points giving are great %90 are but
    all the same i really do enjoy the article. :)

  30. Pingback: Good Web Design | spncrbbtt

  31. Don says:

    Very shortly this website will be famous among all blogging and site-building people, due to
    it’s pleasant content