Design Practice: OUPD201 task 6

Wednesday, 9 May 2012

All Dreamweaver files are kept in a root folder ie images, html,css and psd files

To find your root-folder click on manage sites

site

Select -Local site folder by clicking on folder icon

Rollover images

Useful for navigation to give the user a an indication of what can be clicked to move around.

Preview in Safari

Wednesday, 25 April 2012

Web workshop

Three limitations when designing a website :

Websafe colours
Websafe typefaces
The resolution 800x600 px

Adobe Dreamweaver wyziwyg what you see is what you get.

HTML coding hypertext markup language

HTML tags - Order on a web page

<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
</BODY>
</HTML>

How to see tags on a webpage?

IN SAFARI - View, Page source

Looking at code Other code Eg Kate Morass .

'how search engines pick up websites style pages how layout looks . Javascript

the above is CSs division of a website

Wednesday, 28 March 2012

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