Introduction
Many Web sites include a header with a logo, title image, and navigation at the top of the page. The header sets the tone for the whole Web site and orients the user to the purpose of the site. In this project, you will create your own header image for a fictional Web site.
Before you begin, browse these examples created by former students in this class. As you view them, ask yourself these questions:
- Is the site topic clear?
- What kind of audience would this appeal to?
- Is the header visually appealing and interesting? What design elements make it interesting and attractive?
- Does the header have a focal point? What pattern do the eyes follow?
- Is there a tagline (subtitle) to help explain the purpose of the site?
- Is the text easy to read and are different faces/sizes/angles used?
- Do the colors coordinate? How do the colors add to the impact of the image?
- Are bitmaps used? How are edges treated?
- Would you describe the header as boxy or curvy? Which do you find more appealing?
(Note that these examples may not include all components required in the current assignment.)
What to Do
- Choose a topic for your fictional Web site. This should be different than the topic you chose for your logo assignment.
- Create a new Fireworks document 960 pixels wide by
200 pixels high (or smaller).
- Choose an interesting font and a few coordinating
colors. Choose a vector or bitmap image that fits with your topic.
- For a more interesting image:
- avoid symmetrical design
- use different sizes for text
- integrate bitmap and vector graphics into image behind text rather that next to it
- keep your image simple and clean
- Your header image must include text and bitmap and must be organized in layers. You do not need to include navigation (buttons) in this header image.
- Save in a Web Format (gif or jpg). Experiment to get high quality and small file size.
Submitting work
- Submit header.psd and header.gif or header.jpg to Moodle.
Grading - 50 points
| Points | Requirements |
|---|---|
| 20 | includes text AND vector or bitmap image(s) |
| 10 | image is organized in layers |
| 10 | header does a good job of orienting the user to the purpose of the site |
| 5 | header is appealing and interesting |
| 5 | image shows creativity, skill, or effort |