Wednesday, 30 March 2011

design for web - session I

Before designing a website you need to:

  • Identify workflowYou 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.
Notes:
  • Spend more time on preparation of navigation over aesthetic
  • Don't use templates. There is no sense of originality through this.
  • Most graphic designers don't know coding. They simply design the website and hand it over to a Dreamweaver expert.

Designing for a website

File Management
  • Create a 'root folder' and store everything that is designed for the website in the folder. It is good to name it the same as the website.
  • Always work in lower case letters when naming a folder.
  • Never use spaces in naming a folder.
  • Keep your file names at a maximum of 8 characters or there will be more of a chance of corruption of the file.
  • 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. For example, you can tell the website to use Helvetica instead of Arial if Arial is not on the viewing computer.
  • You can get around 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 go to Image > Image size, change the resolution to 72. The 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. file 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.

No comments:

Post a Comment