Introduction
As you read in your Weinman textbook, comps are screen designs created with a graphics application like Fireworks. A designer creates comps to share ideas with the client, then after the design is approved, it's translated to HTML and images.
In this lab, you'll pretend that you have been asked by a client to create a main page design (choose your own topic). You'll use Photoshop and/or Fireworks to create your Web site home page design. Your home page design should include a title/subtitle, rollover buttons, and text. An excellent design will apply design principles described in the course textbooks and will clearly show the purpose and navigation of the site. Design for screen dimensions less than 980 pixels wide. Want to see a few examples?
Upload the Photoshop or Fireworks file (psd or png) to Blackboard.
What to Do
- Choose a topic and research similar sites. Make
note of color schemes, layouts, and how sites are organized.
- Gather or create images that support your topic (logo,
photos, line art). Choose one or more to use in your title or page
design. If you choose more than one, make sure colors and styles
coordinate.
- Make a pencil and paper sketch of your screen design. Figure
out the placement of title, logo, buttons, text, and images. Review
the Weinman chapter on aesthetics and use a grid for your design. Avoid "rectangle-itis" and
allow white space.
- Select a few main coordinating colors and a few accent
colors. If you have chosen a strong image to work with, use it
to guide color selection. You should also consider the kind of content
you will share on sub-pages. If the content will be colorful
photos (as with a site for shopping), choose a neutral color scheme
that will work with multiple colors.
- Use Fireworks and/or Photoshop to create your screen design. You don't need to export your design yet, but you will do it in a later project, so keep in mind that your final design will need to be sliced and converted to HTML tables.
- Save your comp as a gif or jpg, put it in your local_root folder, and upload it. Insert the image on your 217homework.htm or add a link to it from 217homework.htm. You will turn in the png or psd file to Blackboard.
Submitting work
- Submit main.png or main.psd to Blackboard.
Grading - 50 points
| Points | Requirements |
|---|---|
| 10 | Title is interesting and clear, subtitle helps explain what the site is about |
| 10 | Rollover buttons are clearly labeled and well-aligned |
| 10 | Text clarifies the purpose of the site and is well written with correct spelling and grammar |
| 10 | Colors are carefully chosen. |
| 10 | Layout demonstrates strong alignment and use of grid |