From Today’s Class

Here is an example Project Proposal (Scroll down to see the full requirements or look at the assignment): Google Doc Proposal

These are some example wireframe PSD documents

960_grid_12_col_Wireframe_InClass_HowTheyGrow_and_Eating.zip

960_grid_12_col_Wireframe_InClass.zip

Today we are going to work on making wireframes.

Sitemaps

I’m not going to cover sitemaps in class. You can either follow the guides listed in the link below for how to use MS Word, draw it on your own, or use the techniques we will learn today to create it in Photoshop.
Sitemaps: http://webdesign.blogs.peopleio.net/planning/sitemap/

Wireframes

We will spend most of our time covering wireframes today. This page has general info on wireframes: http://webdesign.blogs.peopleio.net/planning/wireframe/

Grids

I find that it is easier to draw out your wireframes if you have an underlying grid on which to draw them. We will also see next week that planning them on a grid makes it easier to convert them to HTML and CSS.

The grid template we will use today is part of the 960 grid system.
http://960.gs/

It has files you can download that have grids and even pdf you can print to draw on paper. I’ve selected some of them in the following files:

sketch sheets: sketch_sheets.zip

grid templates: templates.zip

Creating the Wireframes

We are going to use the Photoshop 12 column template today. Here is our process

1. Wireframe One Page Using 12 Column Template. Here is the tutorial: http://profstein.clarify-it.com/d/2v796p
2. Copy that wireframe .psd file for the next page. You keep the header/footer/navigation elements that are the same on each page and change the others.
3. Export your wireframes as .png files
4. Import those pages into MS Word as part of your Project Proposal

Project Proposal

This is a document describing your final project. You can create it in MS Word (or other similar software like Open Office if you like).

The project proposal should contain the following

1. Cover Page with(see example image below).
   1. the words: Final Website Project Proposal
   2. Project title, this is optional
   3. Your Name
   4. The date
   5. The class name and semester
   6. My name: Professor Stein
2. Project Description. Briefly describe:
   1. What is you project about?
   2. Who is the target audience?
   3. What kind of mood/emotion are you trying create with the design?
   4. Give examples of some design elements that will help create that mood (colors, spacing, images, fonts etc.).
3. Sitemap
4. Wireframes