[본문스크랩] 최근 Web Style 경향

Current Web Style

This is where I try to sum up the current state-of-the-art in graphic design for web pages, and identify the distinctive features that make a web page look fresh, appealing and easy to use.

I’ll update this article over time as new features stick out.

I’m glad to say that web design in 2006 is better than ever. And it’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:

  • Simple layout
  • 3D effects, used sparingly
  • Soft, neutral background colours
  • Strong colour, used sparingly
  • Cute icons, used sparingly
  • Plenty of whitespace
  • Nice big text

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. In our hottie selection:

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.

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.

Exceptions are emaginacion which uses the popular white-to-skyblue fade, and squarespace which has flat earth colours.

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

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.

http://www.webdesignfromscratch.com/current-style.cfm

…………………………………………………..

최근 미국의 Web Style 경향을 아래의 7가지로아주 잘 요약.

  • Simple layout
  • 3D effects, used sparingly
  • Soft, neutral background colours
  • Strong colour, used sparingly
  • Cute icons, used sparingly
  • Plenty of whitespace
  • Nice big text
  • 예를 든 사이트는가끔 들려볼 만한 곳들.

    그나저나 울나라는 언제쯤 테이블과 이미지의 악몽에서 벗어날 수 있을런지.

    CSS를 이용한 깔끔한 사이트를 보기가 어찌 이리도 힘들단 말인가.

    One Comment

    1. 담아갑니다. 좋은 정보 감사해요.

    답글 남기기