design for web - session I

Before designing a web.....

• Identify workflow. You need a brief to work with before you begin designing a website. A website is a form of promotion, point of contact, informing, persuading.
• Analyse & evaluate websites.
• Identify purpose of the website, target audience & audience needs.
• Create an interface design for a website.

• spend time over navigation system. before the aesthetics

Designing for a website

File Management

• Create a 'root folder' and store everything used in the website in that folder
• Always work in lower case letters when naming a folder.
• dont use space bar in naming folder
• Keep your file names at a maximum of 8 characters
• Create a subfolder called 'images'. Use this folder to store all the media that will appear on the website. Images, videos, music, etc.

Document Setup/Web Standards - Size-Font-Colour

• The setup needs to be completely universal so that it works on all screens around the world. Alway design with the lowest common denominator in mind. This is considered to be 800x600 pixels. Design to fit this at least.
• You are restricted in what fonts you can use on a website. Fonts on websites work with whatever fonts are on the computer the website is being viewed from. Specify a font family
• You can get round this font problem by working with the text as images rather than text. This can still be a drawback as images take much longer to load than text. Remember: the average person gives a website only 5 seconds before they decide to stay or go.
• Never use an image for body text as it will increase the size of your website and it's not searchable.
• ALWAYS work in RGB colour mode as you are designing for screen.
• Keep resolutions at 72. The apt resolution for screen.
• Work with 'Only Web Colours' in Photoshop and Illustrator as you have a narrower selection of colours for web. Use the 'hexadecimal code' when you are transferring to Dreamweaver.

Images for Web

• The larger the file, the slower the website. Images need to be optimised for web.
• Try to keep a website at 5mb or less to keep it running at a steady speed. It also means that more people can go on it as it will take longer to go over the bandwidth.
• To make images suitable for web in Photoshop

>> Image size >> resolution to 72. Then go to File > Save for Web and Devices.

Work in the '4up' view as it is much more versatile. Save the original as a tiff.

then change the resolution. You can change the quality. In the 4up view it tells you how long the image will take to load up on the website. Save the image as a Jpg. This is imperative for every image that is used on a website.