Trends in Web Design

1
Trends in Web Design

• by
• Reshma Kumar Marina Naito

2
Trends in Web Design

• Sources
• 2003 Webby Award Winners
• CA Interactive Annual 8, 2002 Winners
• Books/Articles
• Site-seeing A Visual Approach to Web Usability
  by Luke Wroblewski
• Add Other Articles
• Web Developers Journal

3
Trends in Web Design

• Whats new in web design?
• How are sites changing?
• Where are we heading?

4
How Are Sites Changing?

• Simple Sharing Era Beginning of the web
  academic focus.
• The Design Intro Era Advent of more graphics.
• Techno-Hype Era Designers clients looked for
  new ways to standout and get attention using the
  latest web gimmicks such as applets, flash,
  videos.
• Attention to the glitz glam and less to the
  content.
• Usability Era Cool sites were no longer as cool
  as they initially appeared to be (large graphics,
  gratuitous animations). Focus on usability and
  user studies.

5
Where We Are Now

• Site design has stabilized over past few years.
• Big corporations now dominate the Web - bring
  stability.
• More conservative trends.
• More gateway-oriented.
• More navigational design.
• Internet is a core component of corporate
  strategy.
• Branding, marketing and technical communications.
• Corporations are big fans of usability theory
• User-centered and usage-centered designs.
• Premiership sites are slick, fast-loading, plain
  and look pretty much the same as each other.
• Plenty of comforting familiarity and little
  confusion.
• So it's goodbye to the old days of in your face
  graphics and fancy backgrounds.

6
Where We Are Now
7
Where We Are Now
8
Where We Are Now

• We are now in a stage of web evolution where a
  good web experience is the result of mutual
  collaboration between
• Presentation visual design.
• Interaction response to users.
• Organization site structure.
• When a visitor comes to your web site, they have
  only the presentation to tell them what you have
  to offer.
• Both organization and interaction are dependent
  on presentation.

9
Integrated Design
Presentation fonts, colors, images
Organization IA, writing, labeling, content
decisions
Interaction How users and systems behave, HCI,
human factors and engineering disciplines aid in
developing interaction models technological
solutions
10
Integrated Design

• Getting It Right
• Where the three considerations intersect.
• Small areaThis area is reflective of how
  difficult it is to get things right.
• On the web, interaction, organization, and
  presentation are intertwined and ceding one for
  another is a surefire way to limit the success of
  your web site.

11
Web Site Styles
Text Only Sites

• Few graphics, white background, and black text.
• Advantage often such sites favor content to
  design graphics.
• Disadvantage text only pages can be
  uninteresting to some users.

12
Web Site Styles
Graphic Only Sites

• Information crammed into a corner or small
  boxes.
• Advantage great looking site/visual appeal.
• Disadvantage less content rich more intricate
  difficult to use longer load display
  time can lose audience. Eg. 2advancedstudios.com

13
Web Site Styles

• Two examples represent the extremes of web
  design.
• Most sites fall between these two trends.
• Successful web site design strikes a balance
  between the visual and the information.
• The two elements must blend together in a unified
  piece of design.
• The role of graphics is that of enhancing the
  readability and perception of the message.

14
Visual Design Trends

• Visual design that is high quality, appropriate,
  and relevant for the audience and the message it
  is supporting.
• More grid structures, clean designs, lots of
  white space.
• Use of color to differentiate grids of content.
• Use of flat/solid colors to provide areas of
  transition.
• Reduce size of graphics, use in key areas.
• Minimize use of gif text.

15
Where Are We Heading?

• 2003 Webby Best Practices
• Best Practices Sites demonstrating unparalleled
  excellence across The Academy's six criteria
  content, structure navigation, visual design,
  interactivity,functionality, and overall
  experience.
• Best Practices sites serve as an industry
  benchmark for the most current, innovative, and
  advanced practices in Web development.
• CA Interactive Annual 8, 2002 Winners

16
Tour of Leading Sites

• MoveableType (2003 Webby Winner Best
  Practices)
• http//www.movabletype.org

17
Tour of Leading Sites

• PeopleSoft (CA 2002 Winner - Business)
• http//www.peoplesoft.com/corp/en/public_index.jsp
  
• Extensive content is presented inside an
  understandable hierarchy and a careful use of
  images and subdued color choices make up a visual
  design thats uncluttered, intelligible, and
  professional.

18
Tour of Leading Sites

• Wired (2003 Webby Peoples Choice Best
  Practices)
• http//www.wired.com

19
Tour of Leading Sites

• edutopia (2003 Webby Best Practices Nominee)
• http//www.glef.org

20
Tour of Leading Sites

• Theban Project (2003 Webby Best Practices
  Nominee)
• http//www.thebanmappingproject.com

21
Tour of Leading Sites

• Commanding Heights (2003 Webby Best Practices
  Nominee )
• http//www.pbs.org/wgbh/commandingheights/hi/index
  .html

22
Tour of Leading Sites

• Sleeping Giants (CA 2002 Winner - Advertising)
• http//www.kodak.com/US/en/corp/features/sleepingG
  iants/
• A subdued color palette and a discriminating use
  of Flash help to create a visual design and
  interface that never overpowers the content...

23
Tour of Leading Sites

• Queue Game (CA 2002 Winner - Entertainment)
• http//www.shockwave.com/bin/content/shockwave.jsp
  ?idqueue_free
• I always have time for crisp axiometric/pixel-ins
  pired multidimensional games.

24
Tour of Leading Sites

• Utah Carol (CA 2002 Winner - Entertainment)
• http//www.utahcarol.com
• The visually low-contrast site, with a subdued
  color palette, has a grid-based format that aids
  in the presentation of information.

25
Tour of Leading Sites

• CBC Tuning the World (CA 2002 Winner Info
  Design)
• http//www.tuningtheworld.com
• This is a gorgeous and ingenious site thats
  almost, but not quite, ruined by a two to four
  minute load time and an inability to function on
  Macs

26
Tour of Leading Sites

• 2bMe (CA 2002 Winner Info Design)
• http//www.2bme.org/2bMe.html
• It feels so good to see the Web used for
  something other than commerce, corporate-spin and
  gambling, especially when the sites designed as
  well as this one.

27
Tour of Leading Sites

• Shawns Folk Art (CA 2002 Winner Self
  Promotion)
• http//www.shawnsfolkart.com/
• It breaks from the mold, its true to the
  product, it follows through on the premise..

28
The Future

• Visual design that is high quality, appropriate,
  and relevant for the audience and the message it
  is supporting.
• Broadband ability to deliver richer content

29

• Questions