Al's TAFE Certificate IV I.T. (Website Design) Exercises

Semester TWO

Lesson 2 » What are the visual design principles?

• There are many design principles that apply to web pages, but we're only going to look at four major principles.
  • Alignment is about lining up elements on a page.
  • Proximity is about placing items that really belong together so that they are together.
  • Repetition is about using the same patterns and features consistently on each page in a site.
  • Contrast is about placing page elements so that they contrast with the rest of the page and draw the eye into the page.

• The following is an example of various heading alignments.

Alignment of a Heading

Headline	Text of the paragraph that goes with the headline. Text of the paragraph that goes with the headline. Text of the paragraph that goes with the headline.
Second headline	Only a small amount of text this time.

Sometimes a better technique for embedding graphics is to use a table. Place the text that relates to the picture in one cell of the table, with the picture in a different cell. If you don't use any width attributes in the table it will fit and the browser will be able to resize the cells to fit. Maybe you could right-align or justify the text too. Don't forget you can use some padding in the table so that the text doesn't butt right up against the graphic (the down side in this instance is that the left side of the text doesn't line up with the other paragraphs).

LeftTop	CentreTop	RightTop
LeftBottom	CentreMiddle	CentreBottom

Exercise 1

• Assess the main page (not the splash/entry page) of around 6 major websites. Discuss the sites with fellow students, and then create a table in Dreamweaver to summarise your analysis. Make the links to the various sites open in separate windows.
  
  
• This is my example of site and my assessment.
  

  Site	Alignment	Proximity	Repetition	Contrast	Rating 1 - 10
  www.com	Two-row, three column. Content is in centre column. Text and illustrations are left-aligned in this column	Headlines, whether active links or just text are kept close to each other	Each page in the site follows a theme; headings and sub-headings are consistent and communicate the hierarchy of lesser importance	Uses a main illustration and colors to create contrast and focus	7 for layout, no focus on P2
  Holden	3 column, with header nav-bar left aligned text left aligned on left of page site approx 700 pixels wide	effective rollover links text and pics are close together	each page is very repetitive	very clean with minimal colors	8 layout
  Flyingfish	2 column, menu bar & body header & menu are left aligned text is left aligned in center of page takes up whole of screen	text is left aligned with a relevant pic of topic on the right	each page is very repetitive	dark colored picture around the top & left border with white background for text in centre.	9 layout
  Kristina Dragomir	content is centre aligned	all graphics are close along with the menu for them	each page is very repetitive	white background with the graphics makes it a clean site with no clutter	8 layout -5 for whole site being in flash
  German Shephard	3 column centre aligned	graphics are right aligned in close proximity to the relevant text	splash page is nicely laid out, then the links take you to another site where their search pages is repetitively left aligned	white background with black text colors	6 for splash page, 2 for other pages
  The Logo Factory	2 column site right aligned links in header, left aligned links in body	header is very large lots of flash pics used	site layout is consistent throughout	very clean site with white background, black text although to many pics used	5 layout
  Animals	3 column site header & nav-bar are left aligned text is left aligned in center of page	text is centred with a relevant pic of topic on the left	each page is very repetitive	light colored border around the top & left with pale blue/green background and text.	8 layout, 2 for contrast
  Cert IV	2 column site header consistent throughout menu bar left aligned body text left align across the rest of the page	header is neat and tidy links are neat & clearly labeled	a consistent theme is used throughout the site	the site is easy on the eyes with a white background, soft blue text and a brown text to highlight notes	10 layout, 10 for contrast, 10 for minimal pics, 10 for just being good.