12 Exciting Ways That Web Design Has Evolved
:: By Aaron Kupferberg ::
Web design neither stands still nor waits for technical innovations before evolving new
approaches. The best Web designers observe how people interact with the interfaces they create
in order to find what design approaches work best. And from several recent redesigns of
sites, several design trends appear to be emerging.
1) Apple-Inspired Designs. Apple, one of the most creative and
innovative companies in the world, has set a new standard for
website usability. Its signature style (glass tabs and pale gray) gives
sites the appearance of high-end quality. Designers have already
made the floor reflection of icons a visual cliché. This trend started
out in a subtle way, but has continued because Apple products and
visual cues continue to attract attention from users. One example of
an Apple-inspired design is Jeremy Koempel's Small Transport.
2) Rich User Interfaces. Improving the user experience is
top-of-mind for most Web designers this year. This means the
inclusion of more white space on pages along with responsive AJAX
and Flash interactions that do more than just animate. The interfaces
have intuitive visual clues that tell users when a button was clicked, by
showing a pressed or shadowed look, or even including animation on
the rollover state.
3) Huge Typography. Font sizes above 36 pixels in
height and more expensive, non-standard typography
give newer sites a more solid and customized look.
Check out Web designer Francesco Mugnai's site for an excellent example.
4) Modal Boxes or 2nd Generation Pop-Ups. These boxes,
triggered by user actions, are built into rich-media sites and
often darken the main window (such as the login on www.lala.com)
until the user interacts with the second window.
5) More Flash Video. As broadband penetration continues,
users can now view full videos in a more attractive and
satisfying way without waiting for the video stream to begin. The big
advantage here is you can entertain the user and quickly communicate
your product or service. Keep in mind that some users might
not have the latest Flash plug-in; make sure you provide an alternative
video presentation for them. A good example of this can be found on TheStreet.com.
6) Carousels. This might be considered a variation on the Apple
iTunes album browsing menu that was popular in the past.
Carousels are essentially slideshows that rotate horizontally and are
usually used to display photos or showcase portfolio work in a quick
and easy way. Some carousels are information-based, so users can scroll
quickly through news stories.
7) Introduction Blocks. Because your eye scans a website beginning
in the upper left corner of the page area, this zone is the
most critical part of your landing page. So it makes sense to put your
site’s slogan or introduction here. Introduction blocks take up plenty
of space (usually between 250 and 400 pixels) and are common
to sites that offer a service or new technology. A good example is
www.blubolt.com. (It also contains a carousel.)
8) Multi-Column Layouts. These are usually devoted to sites
with a lot of content, making it easier for users to explore
information in compact, short columns. More designers are using
multi-column fixed layouts with wide grids of 1,000 pixels or more;
these provide users with a brief overview of the content options
surrounded by white space. A four column layout can be seen at labs.mozilla.com.
9) Large and Vibrant Graphics. It’s not just typography that’s
getting bigger. Huge illustrations, photos or textures are
developed and used as backgrounds by many Web designers. Even
the icons used for software products have grown bigger each year.
Check out IconDesigner.net for a great example.
10) More White Space. One of the best trends in recent
years is the increase of white space on Web pages. This is
due in no small part to the sales of larger, wider screens and better
Web design that allows site elements plenty of visual breathing room.
In fact, unless your site is an aggregator of information like
Digg.com, you can get away with almost as much white space as the
classic Google design. Designer and Web developer Wilson Miner is a good example.
11) Social Media Icons. On today’s blogs, you’ll often have a
hard time finding an empty space that doesn’t promote the
latest social icons beneath a post or alongside the related article links
of the page. Twitter, Flickr and RSS feed icons are the most common.
12) Use of Real World Textures. Designers are adding more
textures in the backgrounds of sites, and it looks like that
old chestnut — the repeating pattern or logo background — is disappearing.
From wood grain and brushed metal to a hand-carved
look in the typography, it’s a welcome departure from designs that
only showed solid color palettes. Visit FishMarketing.net for a good example of using real world textures.
Overall, the aesthetic of Web 2.0 dominates; you might remember
those huge Comic Sans headers and funky Web visitor counters that
were abundant a few years ago. But the more you look at these new
sites, the more you see how much has changed. The era of CSS-based
layouts is here to stay and today’s Web designers are sticking with
simplicity as the primary goal of site design.
About the Author: Aaron Kupferberg is art director and interaction designer for Didit and
develops website audits based on user-oriented goals. Since 1996, Didit
combines top-tier SEM strategy, highly sophisticated analytics and modeling,
and best-of-breed technology to service more than 100 clients across
all major verticals. Didit was co-founded by industry thought leader,
SEMPO founding board member, and Didit Chairman & CEO Kevin Lee.
Kupferberg can be reached at Aaron.Kupferberg@didit.com.