Dreamweaver web workshop

1. Identify purpose of website - Online portfolio to showcase your work
                               - To get employment/work


2. Identify purpose of target audience - Design studios, Corporate clients, events/exhibitions,buyers, collaborators, potential employers, awards(to gain recognition).


3. Identify the audience needs - work/examples, contact details, specific target audience ie high-end or small business


4. Demonstrate an understanding of interface and basic layout techniques


Research look at similar industry websites, ask opinions


Interesting websites


http://listeningwithmyeyes.com/

Horizontal scroll bar

Magnetic North

http://mnatwork.com/#/?state=0

Engaging/Interactive or gimmicky

From the Awwwards

youandigraphics.com/

The scroll down button was confusing as I though you had to use the screen to scroll down.

AWWWARDS  Examples of good websites which are critted and marked by pros

Next stage with a client - SCAMP- hand-drawn layout

Site map ie Homepage and links - the products, how it works, video etc. 

Examples to inspire design

3- 5 seconds to grab web users attention

Max f pages easy to navigate

Web standards

Fonts

Colours

Size

Scroll down

Light box to display video/images over the top of something

- Position, size of navigation, homepgae

Find websites which break web standards  - Web buttons which move on pages ie thirteen.co.uk  Good practice to keep fixed navigation ie monsieurcabinet.com

Websafe fonts

font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: 'Bookman Old Style', serif;
font-family: 'Comic Sans MS', cursive;
font-family: Courier, monospace;
font-family: 'Courier New', Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'Lucida Console', Monaco, monospace;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: 'MS Serif', 'New York', sans-serif;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, 'Zapf Dingbats', sans-serif;

To use Custom fonts they need to be images - Not searchable by a search engine

Websafe colours

On photoshop - tick Only websafe colours.  They are specified by their hexacode 

Note colour on scamp

Can use the hex number in Dreamweaver

kuler

What page do you need?

1. Home

2. Work

3. About

4. Contact

Link blog - networking embedded - REMEMBER YOUR TAGET AUDIENCE

Lock FB down so only friends