Introduction to Web Design


Published on

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.

Published in: Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Introduction to Web Design

  1. 1. Book design Poster design Print design Illustration Video/Game design
  2. 2. “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
  3. 3. Employs graphic design elements More like a typeface Rosewood vs. Helvetica Architecturally speaking
  4. 4. 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
  5. 5. 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
  6. 6. a never ending changing landscape before internet explore and firefox still not done evolving text, graphics, animation, video
  7. 7. as the web evolves, so too has design
  8. 8. 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
  9. 9. 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
  10. 10. the red headed step child of web design often the last thing to be taken into consideration impacts everything embrace it
  11. 11. navigation usability interaction design prototyping wireframing
  12. 12. designing for the experience understanding the user(s) user personas, user paths wireframes, sitemaps, prototypes
  13. 13. remember our friend content? site mapping gives you the big picture wireframing helps you organize site prototyping allows you to walk through interactive elements
  14. 14. 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
  15. 15. the browser wars W3C HTML, XML, XHTML, CSS, DOM closer, but still not there transcending web design
  16. 16. ie6 - the browser from hell ie, ff, safari, chrome, mozilla, opera... websites do NOT have to look the same for everyone graceful degradation
  17. 17. graphic design!
  18. 18. a video from web designer Mike Kus showcasing his graphic design process
  19. 19. Do you go for the 500m or team relay? web designer, authors, producers, etc... front-end, middle-end, back-end
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. you can never get comfortable books, online sites, classes, etc. twitter lists, rss feeds design trends shift quickly w/tech
  24. 24. typography challenges cross-browser compatibility multiple personalities download speeds resolution/monitor sizes
  25. 25. build your design map out your coding technique slice and dice
  26. 26. Photoshop Transmit Fireworks CSS Edit Illustrator Firebug Dreamweaver Web Inspector Coda And many more Espresso
  27. 27. photoshop first, building second? designing as you code? somewhere in between
  28. 28. 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
  29. 29. Q&A