WEB DESIGN BASICS

Before You Begin Who are you talking to? – Defining your audience Where do you ultimately want to end up? – Design for the future How will you structure the site? – Deep vs Wide – One big page or multiple smaller ones?

Using Inspiration for Structure

Organizing Your Files Folders – Subdivide your site – Separate graphics folders

Organizing Your Files File Names – index.htm & default.htm Files names browsers always look for The default file names – Grouping Give related files a “starting code” so they will all be grouped together.

Organizing Your Files Titling and Saving Pages – Makes sure your pages have titles (this is what shows in the taskbar at the bottom of the screen when the page is open), it is NOT the file name. This is where you enter the page title in Dreamweaver

Organizing Your Files In this unsaved window the document TITLE (what shows in the Taskbar) is Untitled Document. The document FILE NAME (the file name you save it as) is Untitled-1.

Basic Design Principles Alignment – Items on the page should be lined up – Nothing should be placed on the page arbitrarily – Pick an alignment and stick to it Right, Center, Left – Don’t leave “orphans”

Basic Design Principles Proximity – The relationship items develop when they are close together – Grouping for identity – The eye should not have to “jump around” the page, nor have to search for related information.

Basic Design Principles Repetition – Repeating certain elements that tie all the parts together – Use of color, type treatments, navigation bars, graphic elements, etc.

Basic Design Principles Contrast – What draws your eyes to the page – Making things VERY different – Use color, size, spatial arrangement, contrasting backgrounds, etc.

Kelly Goto Idea Integration Creative Director 635 Townsend Street San Francisco, CA

Kelly Goto Creative Director Idea Integration 635 Townsend Street San Francisco, CA

Using Breaks v. Paragraphs Produces different spacing on the web page Normal “Enter” produces a “double space” look A “Break” (Shift + Enter) produces a “single space” look

Using Breaks v. Paragraphs