Summary of the session

Design a visually appealing site video session.

1. Start (1:08)

2. Two elements of good design (3:35)
Usability
-functionality, interaction, visitor route, etc.
Aesthetics
- colors, fonts, pictures, images

useit(?).com vs

3. Design inspiration (6:15)
To find design inspiration:

Merchant sites - check merchant sites during research in the first week work, i.e. layout navigation, what is available, etc.)

Competitors sites - make note what I like and don't like, no rip off, etc.

Design galleries - CSS Beauty, CSS Vault, CSS Elite, Style Gala

4. Inspiration example (9:23)

5. Collect design examples (11:10)
Yahoo my web - save pages & images in current state using toolbar. screen capture, tag, categorize,

Snag it - save regions, pages, scrolling pages, capture screen shot of entire web page, even navigation, etc.

(13:57) Helpful toolbars - web development toolbar (for FireFox, i.e. layout, see/hide only images, ), colorzilla (find out color used in a web site), firebug (trouble shooting codes, etc.)

Inspiration folder (folder and physical folder) - save images, background, fonts, design ideas, etc.

6. Common layout blocks (16:44)
Container, header, logo/ tagline, search, primary navigation, local navigation, content area, footer.

7. VOIP Buying guide - illustration/ example for design layout (17:10)
Use container but with subtle background. Not loud background.

8. Layout examples (20:17)
Single column (20:40) - fixed width.

Two column left navigation content area (22:37) - if navigation is more important. Make sure left navigation 25% - 33% of total width.

Two column content area right navigation (24:16) - if content is more important. Read left to right. Popular as many blogs use this format. Put a call to action at top left corner to increase conversion rate.

Three column left & right navigation content area (25:44) - to many information and distractions. 15% +15% at left and right navigation.

Three column content area two right navigation (27:10) - least favorite of Jeremy Palmer. Too many elements at the right site.

9. Best Layout Resources (27:56)

Layout gala screen (28:20) - http://blog.html.it/layoutgala/, 40+ layouts for use, as starting point.

Yahoo YUI CSS Guide (29:50) - http://developer.yahoo.com/yui/grids/,

Yahoo Grid Builder (yahoo user interface grid) - http://developer.yahoo.com/yui/grids/builder/, generate codes by clicking to decide on layout (i.e. columns, rows, etc.)

10. Color (31.55)

Browser safe colors? Don't worry. Not relevant now.

Color psychology - important

Color tools
- Well styled (34:11) - click on a color and get recommendation of matching colors http://www.wellstyled.com/tools/colorscheme2/index-en.html

- Snook.ca (35.24) - checking color contrast, indicating "yes, no, sort of" for colours compliant.

- Visibone (36:30) - color wheel not so easy to use

11. Typography (36.53) - use 2 - 3 font styles through out the website (i.e. one header, one content, one image caption, etc.) for consistency & professional look,

- Use "web safe" fonts
- Image typography is flexible
- Use relative font sizes in HTML - relative font size (for user to adjust)
- Never use light fonts on dark backgrounds
- Professional fonts - Fonts.com, Myfonts.com, adobe Font Folio
- Free fonts - 1001 fonts, Da Font

12. Imagery (41:13)
Image types and uses (41:21)

- Illustrations (vector) : logos, backgrounds, icons, buttons, design elements

- photographs (bitmap): products shots, action shots, screen shots, backgrounds (caution) no so easy to control

File formats and uses (43:17)

- Gif: 256 colors of less, illustrations, simple animations, icons, logos, transparency (must use .gif, not jpg)
- Jpg: more than 256 colors, photos, screenshots, product shots, no transparency background. Good due to compression method for photograph. Do not save a gif as jpg, look bad.
- Png (8, 24, 32): Smaller png (8) can be used similar to gif. Larger png (24, 32) sizes can be used similar to jpg. JP's prefer this format.
- You can compare gif, jpg and png side-by-side using 2up or 4up preview to decide.
- Use "export to web" or "save to web" for all web graphics

Image best practices (46:24)
Do:
a. use website optimization for speed report (47:05) (www.websiteoptimization.com),
b. ask your merchant for product images (48:35),
c. use relevant and interesting images,
d. use istockphoto,

Don't:
a. steal image,
b. hotlink to images,
c. use clipart

13. Design resources (51:59)
Sites: web2.0 how-to design guide, open source web design, template monster, wordpress theme gallery
Books: principles of beautiful web design, don’t make me think, the design of sites (design pattern), the usability kit (design pattern), save the pixel (54:58 end)

14. Q&A (57:00)

- Landing page similar to merchant page? Yes. (57:10)
- CSS design for CMS (58:18)
- Outsourcing web design. Put contest at 99design.com (59:23)
- Approval to use merchant logo. Ok to use. (1:01:05)
- Tiff format not so good at web. File size can be big. (1:02:12)
- Hotlinking to image (1:02:45)
- Istockphoto credit expire after 1 year (01:03:28)
- Istockphoto smaller photo good enough for web, larger for print (01:03:53)
- Php's include function (01:04:40)
- Landing pages using large header. It depends on niche. (01:06:16)
- Dreamweaver (01:07:31) If the template is the same as CSS template.
- Using people in the web site (01:08:45). Important to show the images of people who use the products. Images relate to customer
- Music download 24 7 dot com (01:10:12)
- Finding template for niche (01:11:30)
- Website optimization tool, link available (01:12:30)
- Outsourcing design (01:12:58) (developer toolbar come in handy)
- Drupal (01:14:34) - tutorial, forum, etc.
- Html editors (01:15:32)
- Free site photo stock (01:16:40)
- Building site architecture on without file extension (01:17:45)
- Images (01:19:40)
- Browser shop/ camp (?) (01:20:22)
- Alternative for firefox tool (01:20:50)
- Microsite is very simple web site (01:22:05)