Introduction
Many Web sites include a page banner or header at the top of the page with a logo, title image, and navigation. The banner 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 banner 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 banner visually appealing and interesting? What design elements make it interesting and attractive?
- Does the banner 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 banner 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 banner image must include text and bitmap and must be organized in layers. You do not need to include navigation (buttons) in this banner image, but it is ok if you do.
- Save in a Web Format (gif or jpg). Experiment to get high quality and small file size.
Submitting work
- Submit banner.png and banner.gif or banner.jpg to Moodle.
Grading - 50 points
| Points | Requirements |
|---|---|
| 20 | includes text AND vector or bitmap image(s) |
| 10 | image is organized in layers |
| 10 | banner does a good job of orienting the user to the purpose of the site |
| 5 | banner is appealing and interesting |
| 5 | image shows creativity, skill, or effort |