Objectives

1
(No Transcript)
2
Objectives

• Understand what people want from the web
• Get the big picture
• Appreciate web design as a collaborative effort
• List key steps in the website design development
  process
• Understand design concept and visualization as
  applied to web design
• Realize the need for engaging content
• Learn to maximize the potential of available
  technology
• Grasp the basics of motion
• Understand visual basics for screen-based media
• Design for interactive media

3
Definitions

• Websites are a collection of pages or files
  linked together and made available on the World
  Wide Web and are authored and owned by companies,
  organizations, and individuals.
• Content is the body of information that is
  available to visitors. It is the subject and
  substance of the text and graphics.
• Information architecture is the careful
  organization of website content into hierarchical
  (or sequential) order.
• The visual design of information architecture is
  the navigation system.
• Motion aesthetics refers to the process and
  consideration of how form creates impact over
  time in a design.

4
Web Design The Big Picture

• Technology evolves daily and we can predict that
  digital media presentations, applications, and
  uses for visual communication will significantly
  evolve over the next decade. Since the 1990s, the
  Internet has played an important part in
  advancing technological changes, and its impact
  on daily life will continue be felt in
  innumerable ways.
• Along with technology, environmental issues make
  regular headlines. As we find opportunities to go
  green, more information that was formerly
  available in print can go digital.

ELF YOURSELF (OFFICE MAX) WEBSITE EVB, SAN
FRANCISCO
5
Purposes of Websites

• Compared with print, interactive media is in its
  infancy however, younger generations have grown
  up with the web and many spend most of their
  leisure time with interactive media. Website
  purposes include

• Hybrid/experimental
• Gaming
• Entertainment
• Video sharing
• Photo sharing
• Blogs
• Communities
• Social networking
• Professional networking
• Intranet

• Public servicenonprofit groups
• Organizations
• Government
• Commercial
• Educational
• Editorial
• Reference
• Institutional promotion
• Transactional
• Self-promotion

6
Successful Design

• A successful design includes
• An online experience that is entertaining,
  educational, exciting, intriguing, or rich
• Make website visitor become an active participant
  (user) by making choices
• visit a site
• move through a site

• enter information/comments
• generally interact with content

THE STUNTMAN (UNILEVER, REXONA) WEBSITE GRUPO W,
MEXICO
7
Successful Design

• A visitor can search for and download
• information or programs
• purchase products
• play games
• enter contests
• watch movies or TV programs
• comment on message boards
• IM
• blog
• view animations and videos
• read information and fiction
• obtain news
• take academic courses

8
Collaboration

• Web design is a collaborative process that takes
  a team of experts usually including
• Lead creative team
• IT (information technology) professionals
• Producers
• Writers
• Animators
• Programmers
• Testers
• Client
• Psychologist or social anthropologist (perhaps)

9
Website Development

• Besides the usual stages of creating proposals
  and creative briefs, the web design application
  process requires thorough prototyping, where the
  site is created and tested for usability.
• There are ten key steps in this part of the
  website development process 1. Project plan 2.
  Creative brief 3. Site structure 4. Content
  outline 5. Conceptual design 6. Visual design
  development 7. Technical specs 8. Prototype 9.
  Technology 10. Implementation

10
Conceptual Developmentand Visualization

• A design concept is the driving ideathe
  backbone of the planning for any interactive
  solution, based on the content, strategy, goals,
  and the brief, which should address the specifics
  of the goals for the website.

NATIONAL ARCHIVES WEBSITE AND VISUAL
EXPLORATIONS SECOND STORY INTERACTIVE
11
Conceptual Developmentand Visualization

• Related to design concept development is that of
  formulating a theme. If you can identify a theme
  that best tells your group or brands story, that
  theme can be used as a consistent design element
  throughout to drive the flow of the design.

NATIONAL ARCHIVES WEBSITE AND VISUAL
EXPLORATIONS SECOND STORY INTERACTIVE
12
Conceptual Developmentand Visualization

• The brand image, conveyed through concepts and
  visual design, should be consistent across all
  media in order to sustain a brand.
• For visualization, there must be a consistent
  look and feel with the existing or concurrent
  design of the brand identity.

13
Conceptual Developmentand Visualization

• Within a site, each page may have differences,
  yet there is still a visual unity
  throughout.  Pages should have a very clear
  visual hierarchy and make finding information
  easy, enhancing the concept and visual design.

GLACEAU (VITAMIN WATER) WEBSITE BIG SPACESHIP,
NEW YORK
14
Navigation

• The visual design of information architecture is
  the navigation system. The home page is the
  primary entrance to a website and contains the
  central navigation system.
• Types of web navigation
• Portal navigation that leads to many other
  websites
• Primary global or meta navigation within one
  website
• Secondary or sub-navigation (for second-tier
  information)
• Single web page navigation

15
Motion

• A designer working with motion must consider
  concept generation, function, form, aesthetics,
  meaning, and ultimately, communication.

HTC G1 LAUNCH SIZZLE REEL HORNALL ANDERSON,
SEATTLE
16
Mixed Media

• More and more we see a convergence of media,
  where, for example, a mobile phone can become any
  persons media hub with an Internet connection,
  programmed content, GPS, and more.
• The brand image, conveyed through concepts and
  visual design, should be consistent across all
  media in order to sustain a brand. If you can
  identify a theme that best tells your group or
  brands story, that theme can be used as a
  consistent design element (images, color palette,
  and typography) throughout to drive the flow of
  the design.

17
Mixed Media
NOKIA URBANISTA DIARIES MULTIPLE DIGITAL
APPLICATIONS R/GA
18
Mixed Media

• A screen-based design solution is composed of a
  number of media items (events, frames, images,
  and sound), each of which has its own duration.
• Audio provides a strong component in screen-based
  media, lending to audience enthusiasm,
  engagement, and to making the piece memorable.

19
Summary

• As we find opportunities to go green, more
  information that was formally available in print
  can go digital.
• Designing for interactive media is highly
  collaborativeinvolving a team of experts,
  including IT members, who develop and execute web
  design applications.
• Web designers must work cooperatively with
  information technology (IT) programmers.
• Designing for digital media is an iterative
  process, requiring prototyping and testing,
  maintenance, publicity, site seeding, and updates
  or redesign.
• Websites are a collection of pages or files
  linked together and made available on the World
  Wide Web and are authored and owned by companies,
  organizations, and individuals.

20
Summary

• Web design involves strategy, collaboration,
  creativity, planning, design, development, and
  implementation.
• Websites serve a variety of purposes including
  educational, governmental, commercial, nonprofit,
  and entertainment.
• The project development process involves
  designers, content producers, and technology
  programmers who work independently and
  cooperatively from kickoff through concept
  development through design development through
  production and implementation.
• Content is the body of information that is
  available to visitors on a website.
• Information architecture is the careful
  organization of website content into hierarchical
  (or sequential) order.

21
Summary

• The visual design of information architecture is
  the navigation system.
• The home page is the primary entrance to a
  website and contains the central navigation
  system. A visitor can also sometimes enter via a
  link to a page other than the home page.
• A design concept is the driving ideathe
  backboneof the planning for any interactive
  solution, based on the content, strategy, goals,
  and the brief, which should address the specifics
  of the goals for the website.
• If you can identify a theme that best tells your
  group or brands story, that theme can be used as
  a consistent design element (images, color
  palette, and typography) throughout to drive the
  flow of the design.

22
Summary

• The brand image, conveyed through concepts and
  visual design, should be consistent across all
  media in order to sustain a brand.
• If the designer fully understands the content,
  then the web hierarchy becomes a natural
  outgrowth of that content.
• A strong grid creates a visual identity and
  maintains order, creating a sense of geography
  and location, making it easy for the visitor to
  quickly locate various options and have a smooth
  passage through a formidable amount of
  information.
• The visual design of a website grid has a master
  layout, used to guide the composition and
  placement of every elementtext, headers, and
  graphicsfrom screen to screen.

23
Summary

• More and more we see a convergence of media,
  where, for example, a mobile phone can become any
  persons media hub with an Internet connection,
  programmed content, GPS, and more.
• A designer working with motion must consider
  concept generation, function, form, aesthetics,
  meaning, and ultimately, communication.
• Motion aesthetics refers to the process and
  consideration of how form creates impact over
  time in a design.
• A temporal relationship exists in screen-based
  mediathe relationship or interplay between two
  separate events or images this involves
  chronologythe order of events.

24
Summary

• A screen-based design solution is composed of a
  number of media items (events, frames, images,
  and sound), each of which has its own duration.
• Audio provides a strong component in screen-based
  media, lending to audience enthusiasm,
  engagement, and to making the piece memorable.
  Summary
• Visual communication professionals work in a
  variety of settingsdesign studios, branding
  firms, companies, corporations and organizations
  with in-house design departments, publishers,
  interactive agencies, unconventional marketing
  firms, advertising agencies, and integrated
  communication firms, as well as in their own
  studios as freelancers. They collaborate with a
  good number of other creative professionals as
  well as with their clients.

25
Summary

• Design matters Visual communication helps
  society in a great number of ways, from driving
  the economy to informing the public.
• Visual communication professionals need to be
  well educated with a strong liberal arts
  background and excellent training in design and
  writing. They must also be conversant in ethics.