1. Web Design Workshop
things that you don’t need to know if you are print designer

2. What a print designer is used to?
• Specify virtually any typeface.
• A high control over the spatial layout of every element.
• An emphasis on visual invention.
• The final art never change.
• Usually approach web by Flash or Dreamweaver.

3. What web designers should
know about web design?
• Web design canvas is code and browsers.
• Web design live in boxes.
• Web design loads.
• Web design is used.

4. Web design canvas is
code and browsers

8. Needs to adapt to standards

9. No custom fonts
• Fonts depends of Operation System font set

10. No custom fonts
• Recommended font set
‣ times, serif
‣ helvetica, sans-serif
‣ verdana, sans-serif
‣ “Trebuchet MS”, sans-serif
‣ “Courier New”, monospace

11. No custom fonts
• User can change font presentation in the
browser.

12. No custom fonts
• Texts flows. Text changes

13. No custom fonts
• We can get custom fonts
‣ Technics:
- Flash replacement: http://dev.novemberborn.net/sifr3/beta2/demo/
- Image replacement: http://plugins.jquery.com/project/txt2img
‣ Disadvantages:
- More developing time
- More files to load
- More rendering time

14. No accurate colors
• No image color profile (some browsers support it but more file weight)
• Users have different screens and color profiles.
MacBook Dell

15. Web design live in
boxes

16. Design thinking in boxes

17. The boxes are straight. No inclined boxes, no inclined text

18. The boxes can be fixed or flexible (liquid layout)
http://www.rightmove.co.uk/viewdetails-21145298.rsp?pa_n=1&tr_t=buy
http://www.globrix.com/property/buy/nw1?ns=true&rd=1&br=buy&qt=NW1

19. Boxes can overlap each other, and modify opacity
(but doesn't have effects like multiply, difference, etc.)

20. With JavaScript boxes can change
(move, fade in, fade out, slide, drag, change style or content, etc.)

21. How quot;dressquot; the box.
Web designers should know at least the basic rules of
how html/css works

22. Web design loads

23. The less images the better
~5s load time for ~125K ~2s load time for ~42K

24. The less colors in an image the better
JPEG: 2.42K
PNG: 14.44K
JPEG: 2.84K
PNG: 0.21K

25. The less transparencies the better
81.6K (+jQuery script for ie6)
16K
7K

26. Web design is used

27. Web designers should know usability bases:
Don’t make users think
• Design for scanning not reading
• As simple and clear as possible
• Clear visual hierarchy
• Make things look like they are
• Know where we are and easy to move
• Homepage has to answer:
• What is this?
• What do they have here?
• What can I do here?
• Why this site is special?
• Think about messages (error, info, etc.)
• Think about extreme cases (no content, long text inputs, etc.)

28. Web Design Resources

29. Web Design Tools

30. Web Design Tools
Illustrator is good for illustrations

31. Web Design Tools
Photoshop is good for...

32. Web Design Tools
Adobe FireWorks
Rapidly prototype and design for the web
• Essential bitmap and vector tools.
• Common elements library.
‣ bullets
‣ buttons
‣ browser elements
• Customizable library/styles/shapes
• 9-slice tool
• Groups/Layers/Pages
• Export Area tool
• Illustrator and Photoshop integration.

33. Web Design Books
• Don't Make Me Think (sec. ed.) - Steve Krug - New Riders
• Prioritizing Web Usability - Jakob Nielsen - New Riders
• Homepage Usability - Jakob Nielsen - New Riders
• Defensive design for the Web - 37signals - New Riders
• HTML, XHTML, and CSS, Sixth Edition - Elizabeth Castro - Peachpit Press
• The ZEN of CSS Design - Dave Shea - New Riders
• Bulletproof Web Design - Dan Cederholm - New Riders
• CSS Mastery: Advanced Web Standards Solutions - Andy Budd - Friends of Ed

34. Web Design Webs
• Articles/tutorials: http://www.alistapart.com
• CSS showcase: http://www.csszengarden.com

35. Thanks!