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

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.

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

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:
– Public service
nonprofit groups
– Organizations
– Government
– Commercial
– Educational
– Editorial
– Reference
– Institutional promotion
– Transactional
– Self-promotion

–
–
–
–
–
–
–
–
–
–

Hybrid/experimental
Gaming
Entertainment
Video sharing
Photo sharing
Blogs
Communit...

1 10 1990s 2 3 4 5 6 7 8 9 academ across activ address advanc advertis aesthet agenc along also amount anderson anim anthropologist appli applic appreci architectur archiv art audienc audio author avail backbon background base basic becom besid best big blog board bodi brand brief care central chang choic chronolog clear client collabor collect color comment commerci communic communiti compani compar compon compos composit concept conceptu concurr connect consid consider consist contain content contest continu converg convers convey cooper corpor cours creat creativ daili decad definit depart design develop diari differ digit download drive durat easi economi editori educ effort element elf engag enhanc enter entertain enthusiasm entranc environment ethic evb event everi evolv exampl excel excit execut exist experi expert explor feel felt fiction file find firm flow form formal former formid formul frame francisco freelanc fulli function g1 game general generat geographi get glaceau global go goal good govern government gps graphic grasp great green grid group grown grupo guid header headlin help hierarch hierarchi high home hornal hous howev htc hub hybrid/experimental idea ident identifi im imag impact implement import in-hous includ independ individu infanc inform information/comments innumer institut integr interact internet interplay intranet intrigu involv issu item iter key kickoff launch layout lead learn leisur lend liber life link list locat look made maintain mainten make mani market master matter max maxim may mean media member memor messag meta mexico mix mobil motion move movi multipl must nation natur navig need network new news next nokia nonprofit number object obtain offic one onlin opportun option order organ outgrowth outlin own page palett part particip passag peopl perhap person phone photo pictur piec placement plan play portal potenti predict present primari principl print process produc product profession program programm project promot propos prototyp provid psychologist public publish purchas purpos quick r/ga read realiz redesign reel refer regular relat relationship requir rexona rich san screen screen-bas search seattl second second-ti secondari see seed self self-promot sens separ sequenti serv servic set share signific sinc singl site sizzl smooth social societi solut sometim sound spaceship spec specif spend stage step still stori strategi strong structur studio stuntman sub sub-navig subject substanc success summari sustain system take team technic technolog tell tempor ten test tester text theme thorough throughout tier time togeth train transact tv two type typographi ultim unconvent understand unilev uniti updat urbanista usabl use user usual varieti various via video view visit visitor visual vitamin w want watch water way web websit well wide within work world write writer yet york younger