Part 2 Assignment Specifics (for classes 3-5)

(Due Class 3)

Names and Logo sketches

(Due Class 4)

APPLICATIONS USED: Web Browser | Word or a Text Editor | Photoshop
Online Flowchart or Illustrator

Sitemap and Flowcharts
A sitemap is an outline of the sites content by listing its menu items and the hierarchical structure of the site.

You will create a sitemap of your homepage, submenu and content page for your site. How can you better categorize, organize the information?

A flowchart is a graphical chart of your site which shows how pages relate to each other.
Examples will be shown in class and files made available to you.

Start to research content for your site, both text and images. Are there textures you would like to use, graphics, illustrations, photos?

(Due Class 5)

Collect and organize your content for the site.

This assignment starts with creating this content before any design is added.

By focusing first on the content there will be time at the later stages of the assignment to do the technical coding (XHTML) and the designing (CSS).

There are 3 sections which require content: main section, submenu page and content page.

1. Open a word document and save file as “web-content.doc”
2. Copy/Type content that fits your websites main section
3. Copy/Type content that fits users brief
4. Find potential photos or illustrations to use on your site.


Create wireframe II.2-----------------------------

You will be creating a wireframe using Fireworks.

A wireframe uses boxes to represent the main components of your website.

You will label each element ie (navigation, advertisement, users, etc.).

A wireframe is a bit like a “skeleton” of your website.

In Fireworks, create a new file:
1. The file will be 950 pixels (px) width
2. and 900 pixels (px) height
3. Save the file to "web layout" folder as a png file depending on the application
4. Start to create boxes to represent the different sections of your website including graphics, content, links, etc...


Create web specs and dimensions in wireframe II.3----------------

You will now be adding specs and dimensions to each section of the wireframe

1. Open Fireworks
2. Create a new file
popup will appear requesting page dimensions
width: 950 pixels (px)
height: 900 pixels (px)
resolution: 72 pixel/inches
Canvas color: white
3. Save the file
4. Name the file "layout"
5. Make sure the file is a png
6. Save to "web layout" folder

Add a new page to the Fireworks file:
1. Using the pane that has "page and layers and history", create a new page (this appears to the right of the screen)
There is a white square that says “Page 1” to its right
2. You may edit “Page 1” by double clicking if you wish to change the name
*Note if you place your cursor over an icon a small description will appear describing the icon
There is an icon that looks like a small page right next to a trash bin icon
3. Click the small page and watch a new page appear called “Page 2”

To create exact dimensions we can use guides
1. Guides are pulled from the left and top rulers just like in other applications.

You will now recreate the boxes from the first rough wireframe to have the same dimensions as the wireframe example (print out example or digital example)

To create exact dimensions
1. Use the "info" pane from the "mixer and swatches and info" pane, which is also to the right. You can tell the boxes what their height and width are and where on the x and y axis of the page they go.
*Note the x axis runs right to left and the y axis goes up and down

2. Create all the boxes that represent each section
3. Using the “info” pane make each box it's specific width and height
4. Create guides to align each section
depending on where you place the guides here is where you can use the x & y axis to align the boxes
5. Move each box into its designated area
6. Using the text tool, which is in the toolbar on the left with the letter “A” input the name of each box (navigation, advertisement, logo, content, headers, etc...) for future reference also put the dimensions of each box (ie advertisement 400x 500). It may come in handy.

It may seem a bit redundant to create this version of the wireframe, but you didn't start with this to give you time to think about the basic wireframe

You can now use these dimensions to create the actual graphics for the website

Create web graphics II.4-------------------------------

APPLICATIONS USED: Photoshop | Illustrator

This is a very open section when you will create the graphics for the site as per your dimensions from your last wireframe.

Here you will be using Photoshop, Illustrator, or web images to create the graphics.

You can create the documents to fit the specs of each individual box or you can create larger graphics and than crop and shrink them to fit the boxes.

*Please note that resolution for the web is 72. Once you save your file via “save for web” it will automatically convert whatever resolution it was originally into 72.

You will be saving 2 versions of each element.
Version 1 will be the native (original) file
if using photoshop a (psd) file
if using illustrator a (ai) file
You will be saving these files into “web element originals” folder
Version 2 will be the web ready images( jpg, gif or a png file )

To save for web
1. Select > File > save for web & devices...
Shortcut press (Shift+Option+Apple+S)Mac

A window will open with multiple windows of your image
There will be a copy of the original image with the file size
The other images will allow you see the quality in various formats (gif, png, jpg, etc...)
To the right is the area where you can play with the quality and format
Once you are satisfied with the image quality you can save the image
*Please try to make the images as small in file size as possible and keep the best quality. (file size does not mean the width and height of the image) Try to get others to view your image quality because some see things a little clearer.

You will be saving these files into “web ready images”

(in the sample site, these images are created; use these as a guide)
1. Create 1 image for of the user (person who is signed-on from this community)
2. Create 1 image for small advertisement
3. Create 1 small graphic for external link (ie yahoo, google, etc...)
4. Create 1 image for youtube video
5. Create 6 images of friends
6. Create 1 small background via http://www.tartanmaker.com/ or look for other background generators online. Rename the file background.png

You now have all the images you need to create the homepage

Insert graphics into wireframe II.5

APPLICATION USED: Fireworks CS3

1. You will now create another wireframe, which will allow you to see what your site will look like.
2. You will open up the Fireworks file with the 1 or 2 wireframes created earlier
3. You will now create another new page
4. To keep the things aligned to match the previous wireframe we can copy and paste from the specs & dimensions wireframe page by selecting all the elements.
5. Select All (Hold Apple/Command + A)
6. Copy (Hold Apple/Command + C)
Now in the new page we can paste everything at once
7. Paste (Hold Apple/Command + V)
*Note that you can (select all, copy and paste) by going to “Edit” for each step

8. Now you will go into the “web ready images” folder and literally drag each image into the new wireframe and place it into its section, which will literally cover boxes that were copied from the last wireframe. Once this is done we see what the website will turn out to be with graphics.

You will now add the web content/text
1. Open “web-content.doc”
2. Copy content into it's designated section using the text tool, which is in the toolbar on the left with the letter “A”
3. Copy and paste the content
4. Create text to represent all web links
5. Create main navigation
6. Create supplementary navigation
7. Create website legal information

You now have the preliminary main page for your website.
*Note: You will not add the actual background until the CSS section because it will be a small gif/png file approximately 144 pixels by 144 pixels, which will repeat and tile through the whole website as seen in the live website.