home
HOME/NEWS : USEFUL LINKS : VIRUS PROTECTION : SITEMAP : ABOUT
: WebDev : GUI : Design&Cultures1 : Consumer Studs : Portfolio Pres : Prev
web dev main

web dev class

assessment 2 sample plan

As a really simple example of what to do for Assessment 2a (Planning stage for online mini photo-album):

SITE SYNOPSIS (Project Overview)

I'll be building a small site with just 9 photos. The intention of the site is to be a short photo essay on the theme of Progress. An old house nearby was recently torn down, and it gave me a feeling of sadness, loss - even though I'd never even noticed the house before that. Collaborating with Jasper (who took the photos) we developed a narrative. I thought about writing to go with each picture, but then decided the images were probably more powerful without words.

THE LOOK (Visual Concepts)

I want the site to combine aspects both of the industrial and the homely/childish, as the contrast between these two was probably what struck me most about the site (ie, the demolition site). I'm therefore going to have a black background and use a combination of grungy-industrial looking fonts (such as Amertype broken-typewriter style) and childish (such as Kidstuff). I want to keep the layout as simple as possible, as I find the pictures themselves pretty powerful & don't want to detract from that. Similar look to jaspercook.com and louiselister.com.

I will be using very small thumbnails so that they all fit on one page. This is to keep it simple. If I had more time, I'd probably choose a different structure, perhaps even just a linear one without thumbs (like a book) but then that wouldn't meet the requirements of the Assessment so I won't do that ;)

I want to have hilighted thumbs that go to their true colours when rolled over. This way you won't quite be able to see what they are until you roll over them - this keeps it a bit more mysterious. In addition, my thumbnailing will be quite abstract, so you can't quite tell what the picture is going to be, but hopefully will be interesting enough to make you want to click.

SITEMAP: I've chosen the most simple of all possible structures that meets the requirements.

Home - photo of machine in front room of house to show overview of what's going on (ie, house is being ripped down).
Page 1 - scoop
Page 2 - door
Page 3 - arm
Page 4 - shaft
Page 5 - window
Page 6 - rubble
Page 7 - scrunch
Page 8 - crush
Page 9 - joan's ball
Sitemap - titles of each photo, links to our other main art sites to contextualise.

Then I will resize my photos to 500x500, add the copyright name onto them, then make both "states" of my thumbnails at 50x50, as per my layout here. (Note: if you're using a background image, just make sure that the maximum dimension of your photos is 500 pixels or whatever fits your layout, and we'll control the consistent placement of the images using a fixed-width single cell table later).

I might experiment to see if dark>normal rollover looks better with the black background than light>normal rollover... or perhaps B&W as my first-state rollover?

I will then make my title gifs in Photoshop, ImageReady or at home in PaintShop Pro. I'll put them all into appropriate folders (making sure that neither folders nor filenames have spaces, &'s or anything else apart from letters and numbers). Eg:

/katsite (overall folder) containing subfolders:

  • /bigpics (containing my resized jpegs 500x500 with my name on them, made in Photoshop)
  • /thumbs (containing both versions of every thumbnail 50x50 jpeg, made in Photoshop)
  • /titles (containing all my gif titles, both versions if I want them to have rollovers of a different colour, or to be a different colour to show what page the viewer is currently on)
  • /temp or /workinprogress (this folder won't be uploaded, or ever used in our Dreamweaver files, it's just somewhere to collect everything until we get it right and put it into one of the above folders - eg, unsized photos, Photoshop files in psd format to harvest layers from etc)

Then... we can start to build the thing in Dreamweaver. There are a bunch of Dreamweaver tutorials linked now, although remember that there are a lot of functions that we won't be using, so be careful if you start to build your site before we start in class, because I might have to make you start again if you use any of the functions that don't meet our basic Assessment requirements (eg, tables only, suits both 800x600 and 1024x768, javascript rollovers only exception to basic html, etc). Go to Assessment 2 Building page

NOTE: Having tested the site at school on the Mac with their "puffy" browser navigation, I've decided to make all my pics smaller so they'll fit in the browser at 800x600 resolution as well as 1024x768. My photos will become 400x400 pixels, and my thumbs, 40x40 pixels.

Kat's Web Rescue Site

retrokat.com quite nice sites

all graphics, text and design: copyright retrokat.com 2001-4


Note: If you personally hold copyright to any images or other content herein and wish it to be removed or credited, please email me on kat@retrokat.com and I'm more than happy to do so.