Welcome to Web Design Graphics

1
Welcome to Web Design Graphics

• John Goodwin
• Office C132
• Phone Extension 2226
• e-mail john.goodwin_at_durhamc.on.ca

2
Designing for the Web - Active Space

• The web is an Active Experience, Television or
  Radio which is Passive
• Watching TV requires little or no action other
  than channel surfing
• The web however, cannot usually be viewed this
  way, it demands interaction
• This interaction is sometimes perceived as
  movement

3
Designing for the Web - Active Space

• Knowingly or unknowingly, we as Users perceive
  the web as a space
• This is evident in the terminology and vocabulary
  we use to describe the web, such as
• Demand for freedom of movement
• Clearly marked paths
• Quick delivery
• Immediate answers
• Site maps, shortcuts and alternate routes

4
Virtual Space

• Yet for all these physical demands, the web is a
  virtual place
• Websites are streams of data residing on servers,
  sharing storage with other sites of no relation
• You cannot touch, taste or smell a web site - it
  has no tangible form like print

5
The User Experience

• The web is primarily a visual medium
• Its messages are conveyed via the tools available
  to the web designer
• The role of a web developer, and even more so the
  graphic designer, is to heighten that User
  Experience

6
Digital Documents

• The web, in its infancy, was a collection of
  electronic documents that related to one another
  via hypertext links
• As interest in the Internet grew, so did the
  desire for more appealing ways to represent ideas
• Designers began finding ways to introduce basic
  layout principles via images and tables

7
Then Along Came Movement

• Animation was born to the Internet in the form of
  the animated GIF in the early 1990s
• Animation again heightened the User Experience by
  drawing the attention of the viewer to a specific
  focal point

8

• The medium is the message.
• Marshall McLuhan
• The motion is the message.
• Hillman Curtis

9
Media on the Web

• The HTML layer has become a foundation for new
  media designers to mount media rich content to
  enrich the User Experience
• DHTML
• VRML
• Streaming video
• Streaming audio
• Macromedia Flash

10
Sound on the Web

• Sound now has a big role on the Net - its no
  longer about bad MIDI music on web pages
• Half of any really strong motion graphics piece
  is sound - without it, animation lacks impact
• Sound allows us as developers to set a rhythm,
  tempo and mood
• Sound give us a voice for narrative beyond text

11
The Web - A Storytelling Device

• Another way to think about designing for the web
  is from the perspective of a storyteller
• Everyone has a story to tell - that story can be
  about anything
• History and culture are both passed on from
  generation to generation as a series of stories
• New media and the web give us a forum to tell
  that story effectively and globally

12
Designing for the Web

• Designing for the web is very different from
  designing for Print
• The web places restrictions on us as designers
• The web is a horizontal world - even though pages
  can be scrollable landscapes, the designer must
  always be wary of placing important content above
  the fold
• 800 x 600 resolution equates to 770 x 400

13
Designing for the Web

• Desktop resolutions define how a User sees your
  content
• Monitor sizes define how big or small that
  content is to the end User
• Different browsers will render your pages a
  little differently - Internet Explorer and
  Netscape
• The same browsers will render your page a little
  differently on different platforms!

14
Designing for the Web

• Printability - when a page translates from the
  screen to a printer, awful things can happen to
  your design
• Your design may not fit on an 8 x 10 printout,
  effectively getting cut off
• Frames dont generally get printed as one layout
• Background graphics are not sent to the printer
  by default

15
Designing for the Web

• Bandwidth considerations
• The 12 second rule If a User has to wait longer
  than 12 seconds for something to happen, theyll
  leave
• Different Users have different connection speeds
  so you cant predict how fast or slow theyll get
  your message
• Web development requires careful optimization

16
Designing for the Web

• Rich media comes with consequence - Plug-ins
• Flash has become widely accepted because of
  excellent market penetration
• Flash 5 plug-in penetration 80 N.A, 85 Europe
• Flash 4 plug-in now enjoys over 97 market
  penetration

17
Designing for the Web

• Limited palettes on the web, called Web-safe
  Colour RGB 6 x 6 x 6, or 216 colours.
• You can develop outside of that colour spectrum,
  but you cant guarantee what it will look like
  for all Users
• Image compression is a fundamental part of web
  design - the most compression with the least
  degradation of quality is always a goal for the
  web designer

18
Design for the Web

• Type is still very limited on the web
• For text copy, youll probably want to use a
  System Font which is cross platform to ensure
  Users see the same thing, otherwise the browser
  will make its own substitution
• Embedded fonts are non-standard between Netscape
  and IE TrueDoc fonts and WEFT (Web Embedded
  Fonts Tool)
• Most typography is still handled as images

19
Designing for the Web

• Layout is always a concern for the designer
• Its very easy to fall into the trap of boxy
  design on the web, due to the nature of grids and
  tables
• Dont sacrifice your design to these
  restrictions!
• There are always ways to break up your elements
  to create flowing design that doesnt visually
  conform to a grid