For your third website assignment, you will create either:

Student Examples

Brochure creative brief

A company has asked you to build a web site for them. They have given you a brochure and want you to create something using the same design.

They want a multi-page website that is easy to navigate and relates to the brochure. No matter how bad the brochure looks, create a multipage web site containing all of
the information on the brochure.

Use the colors and fonts from the brochure in your web site in order to keep the same look and feel, however, feel free to update it for the web.

Brochure guidelines

Choose any brochure or informational material.

Scan images and graphics from the brochure into the computer.

Use the same color scheme and the same or similar fonts.

Minimum of four pages.

Must have a usable navigation scheme that is persistent on all pages.

Must have contact page with simple form (I’ll give you more information on this later).

You will be awarded points for using the techniques we’ve learned so far (tables, animations, rollovers, etc) with good judgement.

CSS – the entire web site must get its fonts and colors from either an external style sheet, internal style sheet, or both.

Personal Portfolio Creative Brief

Create a portfolio web site for your work. This web site should have at a minimum 4 pages:

main page,

a portfolio page,

a contact page, and

a resume page.

Your site should be aesthetically cohesive, and should have a usable navigation scheme that is persistent on all pages. All your pages should include the details and design elements that you’d expect to find on a quality portfolio site.

Portfolio Guidelines

Choose instances of your work that you’d like to show to prospective employers.

Digitize them by scanning, or by converting to jpegs.

Come up with a page design template that coordinates with your logo and stationery.

Must have contact page with simple form (I’ll give you more information on this later).

You will be awarded points for using the techniques we’ve learned so far (tables, animations, rollovers, etc) with good judgement.

CSS – The entire web site must get its fonts and colors from either an external style sheet, internal style sheet, or both.

Project timeline

Nov. 27 Tue – Work on Brochure/Portfolio Site. I’ll be gone and you’ll have a sub.

Nov. 29 Thurs–

Interim deadline for B/P site – Photoshop/Illustrator/Fireworks prototype of your site ready for a crit. If you don’t have some kind of a draft ready to show, your final grade will be lowered 10 points.

Project requirements:

To create a tight prototype of your site using Photoshop or Illustrator,

To slice and optimize the prototype in the program of your choice, and then to lay out the site using CSS,

To create a consistent graphic look throughout the whole site, and

To use the copy provided.

All copy, with the exception of logo, decorative text and headlines will be html.

Do not add or remove logo elements, or change the font in the logo.

Project Timeline:

Oct 25 – In class, we will discuss the project, brainstorming and wireframing. We will start gathering source materials for the assignment.

Oct 30 – In class, we will work on creating a site prototype and on wireframing. (Also, intro to Dreamweaver)

Nov 1 – Work day. (Also, we’ll talk about making absolutely positioned divs and other CSS rules with Dreamweaver.)

Nov 6 – Interim deadline and crit- you’ll need to show three things: sketches, wireframes and a Photoshop/Illustrator prototype. If you don’t have these items ready, your final grade will be lowered 10 points.

Nov 8 – Work day. (Also, review of some spans and divs.)

Nov 13 – Work day. (Also, I’ll show you how to make web forms – both the easy way and the hard way.)

YOU HAVE BEEN HIRED TO CREATE THE ART AND GRAPHICS ONLY FOR A SINGLE PAGE SITE.

An art director has already determined the layout of each page. Your job is to create the artwork to fit within the grid. It is crucial to the programmer/coder that you create graphics to exact sizes indicated on “map,” and use naming scheme as shown in two documents:

Musician_map.pdf

artist.html

OBJECTIVES

Explore using Photoshop and Illustrator and Dreamweaver to:

create static comps for web pages;

turn static comps into sliced and optimized images for use in a web page;

create simple Javascript behaviors to enhance the interactivity of a web page;

GUIDELINES

MAIN ILLUSTRATION:

You may use photos for illustration reference only. Any photos must be dramatically altered to be included.

Illustration style is open. However, it should reflect the mood/personality of subject. For example, a nice peaceful pastel color portrait of Marilyn Manson would probably not be appropriate.

Consider caricatures, satires, collages, found objects, non-literal interpretations. The only rule is that the illustration must bear some resemblance to your subject(s).

Illustrations must be created to fit within layout.

NAVIGATIONAL BAR:

Could contain the following choices, and there must be at least three:

Bio

Influences

Body of Work

Photo Gallery

Home

Prepare as one graphic to size. We’ll go over how to slice the nav graphic into separate buttons and how to make them change on hover in class.

BACK/NEXT BUTTONS:

The “back” and “next” elements must also be rollover buttons. You’ll prepare them using the same methods we learned preparing the nav buttons.

TITLE BAR:

Must contain the name of artist/group. Be creative. Consider warp and special effects features in Illustrator and photoshop and traditional media for creation. Font choice and colors are very important for consistency within page.

ANIMATION:

This is an accent graphic that should reflect something about the artist or group. For example, if you choose Elvis, your animation could be of a little swiveling pelvis.

OVERVIEW OF TASKS

Choose artist and gather images

Using Photoshop, create a static comp of your artist page.

Slice up the comp into the required areas: titlebar, navi, etc. Slicing, BTW, is a Photoshop term that means cutting up a comp,

Optimize each slice appropriately for the web. We will cover slicing and optimizing thoroughly.

Open the Artist.html page from the materials folder in TextWrangler. Save it as your Artist webpage. In this html page, place the images you created in the slice/optimize process in their correct divs.

Returning to the ani slice, we’ll make a gif animation using Photoshop.

Returning to the navi and back and next slices, we’ll make rollover animations using Photoshop.

In this assignment you are given some text and some graphics files. Your job is to make a multipage web site out of these files. You must use all of the graphics files and the site must be under 100K. Decide how large you want to make each of the images and what is the best way to compress them. (JPEG, GIF … )

You will need a number of files for this project.

I’ve put the files you’ll need in a zipped folder, which you can download here.

They are all PSD or Illustrator files so you will need to convert them.

Here’s a list of the files

PSD

diver.psd

sand_water.psd

deepdown.psd

fish2.psd

beach.psd

Illustrator

scubadiver

scubaequipment

Text

divertext.txt

This assignment will help you become more familiar with Adobe Photoshop and Illustrator.

Here are links to some sample pages:

In this assigment, you have the task of recreating (or start from scratch) your resume as an html document. Consider organizing everything into a multi-page web site that is user friendly. However, if you want to make it just one page, that’s ok.