Presentation given at Montclair State University's Graphic Design II course on Introduction to Web Design. This presentation was geared towards year two graphic design students with little to no exposure to web design and predominant print backgrounds.
4. “Web design is the creation of digital environments that
facilitate and encourage human activity; reflect or adapt
to individual voices and content; and change gracefully
over time while always retaining their identity.”
- Jeffrey Zeldman
5. Employs graphic design elements
More like a typeface
Rosewood vs. Helvetica
Architecturally speaking
6.
7. the world is your oyster
pms, cmyk, print calibration
a look you can put a guarantee on
no waffling on the final dimensions
conventional oven cook time: 40 min
8. think twice about that font
what you see is not what you get
fun house mirror magic
from 3 inches to 30 inches in 0.0 sec
microwave cook time: 5 min
9. a never ending changing landscape
before internet explore and firefox
still not done evolving
text, graphics, animation, video
10. as the web evolves, so too has design
CNN.com
Nike.com
11.
12.
13.
14.
15.
16.
17.
18. Developer (27.8%) Web Producer (1.8%)
Web Designer (12.7%) Information Architect (1.6%)
Designer (8.4%) Web Director (1.6%)
Webmaster (4.4%) Writer, Editor (1.2%)
Project Manager (3.7%) Usability Expert (1.0%)
Interface/UI Designer (3.2%) Marketer (0.9%)
Creative Director (3.0%) Educator (0.5%)
Art Director (1.9%) Accessibility Expert (0.2%)
Statistics from 2008 A List Apart : The Survey for People Who Make Websites
19. corporate sites portfolio sites
eCommerce sites musician/band sites
movie promotion sites educational sites
video game sites web applications
car sites blogs
auction sites mobile sites
20. the red headed step child of web design
often the last thing to be taken into
consideration
impacts everything
embrace it
22. designing for the experience
understanding the user(s)
user personas, user paths
wireframes, sitemaps, prototypes
23. remember our friend content?
site mapping gives you the big picture
wireframing helps you organize
site prototyping allows you to walk
through interactive elements
24. how do i get people to see what i see?
can’t i just use images instead?
fine, then I’ll just use flash
accept and embrace the challenge
introduction of @font-face with CSS3
28. a video from web designer Mike Kus
showcasing his graphic design process
29. Do you go for the 500m or team relay?
web designer, authors, producers, etc...
front-end, middle-end, back-end
30. where does flash belong
motion design
eliminates many challenges of the web
all in or just dip your toes in the water?
and yes, you will still need to code
31. flash has it’s own set of issues too
doesn’t scale well to mobile (or at all)
buggy, crashes often
HTML5 is changing the landscape
Star Wars Intro
32. a whole new set of challenges
designing for new mobile phones
creating a mobile version of your site
function, function, function!
mobile banking, travel, hotel, shopping
mobile web applications
33. you can never get comfortable
books, online sites, classes, etc.
twitter lists, rss feeds
design trends shift quickly w/tech
38. Percent of respondants
0 7.5 15 22.5 30
< $10k
$10-20k
$20-40k
$40-60k
$60-80k
$80-$100k
$100-120k
$120-150k
$150 >
Statistics from 2008 A List Apart : The Survey for People Who Make Websites