Web Design Workshop
-
Upload
susez -
Category
Technology
-
view
2.188 -
download
1
description
Transcript of Web Design Workshop
![Page 1: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/1.jpg)
Web Design Workshopthings that you don’t need to know if you are print designer
![Page 2: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/2.jpg)
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.
![Page 3: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/3.jpg)
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.
![Page 4: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/4.jpg)
Web design canvas is code and browsers
![Page 5: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/5.jpg)
![Page 6: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/6.jpg)
![Page 7: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/7.jpg)
![Page 8: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/8.jpg)
Needs to adapt to standards
![Page 9: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/9.jpg)
No custom fonts
• Fonts depends of Operation System font set
![Page 10: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/10.jpg)
• Recommended font set
‣ times, serif
‣ helvetica, sans-serif
‣ verdana, sans-serif
‣ “Trebuchet MS”, sans-serif
‣ “Courier New”, monospace
No custom fonts
![Page 11: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/11.jpg)
• User can change font presentation in the browser.
No custom fonts
![Page 12: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/12.jpg)
• Texts flows. Text changes
No custom fonts
![Page 13: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/13.jpg)
• 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
No custom fonts
![Page 14: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/14.jpg)
No accurate colors
• No image color profile (some browsers support it but more file weight)
• Users have different screens and color profiles.
MacBook Dell
![Page 15: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/15.jpg)
Web design live in boxes
![Page 16: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/16.jpg)
Design thinking in boxes
![Page 17: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/17.jpg)
The boxes are straight. No inclined boxes, no inclined text
![Page 18: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/18.jpg)
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
![Page 19: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/19.jpg)
Boxes can overlap each other, and modify opacity (but doesn't have effects like multiply, difference, etc.)
![Page 20: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/20.jpg)
With JavaScript boxes can change (move, fade in, fade out, slide, drag, change style or content, etc.)
![Page 21: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/21.jpg)
How "dress" the box. Web designers should know at least the basic rules of
how html/css works
![Page 22: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/22.jpg)
Web design loads
![Page 23: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/23.jpg)
The less images the better
~5s load time for ~125K ~2s load time for ~42K
![Page 24: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/24.jpg)
The less colors in an image the better
JPEG: 2.42K
PNG: 14.44K
JPEG: 2.84K
PNG: 0.21K
![Page 25: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/25.jpg)
The less transparencies the better
81.6K (+jQuery script for ie6)
16K
7K
![Page 26: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/26.jpg)
Web design is used
![Page 27: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/27.jpg)
• 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.)
Web designers should know usability bases:
Don’t make users think
![Page 28: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/28.jpg)
Web Design Resources
![Page 29: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/29.jpg)
Web Design Tools
![Page 30: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/30.jpg)
Illustrator is good for illustrations
Web Design Tools
![Page 31: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/31.jpg)
Photoshop is good for...
Web Design Tools
![Page 32: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/32.jpg)
Adobe FireWorksRapidly prototype and design for the web
Web Design Tools
• 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.
![Page 33: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/33.jpg)
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
![Page 34: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/34.jpg)
• Articles/tutorials: http://www.alistapart.com
• CSS showcase: http://www.csszengarden.com
Web Design Webs
![Page 35: Web Design Workshop](https://reader038.fdocuments.us/reader038/viewer/2022103014/54b4cb6a4a7959bd488b4660/html5/thumbnails/35.jpg)
Thanks!