Telling a Story with Environment

In "White Lily" you saw a design process that started with choosing keywords and adjectives, and categorizing content. In this assignment you'll work on choosing images that go with your theme by thinking of a place and then deciding what kinds of things might exist in that place. The reading for this assignment covers two different (or maybe similar) locations: "underground" and "office".

Reading: "What Lies Beneath" (pp. 154-159) and "Corporate ZenWorks" (pp. 256-261)

Hand in: Your lists of themes: 50, 10, 5, and 1. Your PhotoShop file (PSD) or Fireworks file (PNG). Attach your file to an e-mail to Ms. Green. The subject of your e-mail should be: "Telling a Story with Environment".

Instructions:

  1. Print out this sheet. Write down 50 different places. Don't think too much about this -- just write them down.
  2. Now look through your list and narrow it down to 10. Write those in their own list.
  3. Narrow those down to 5. Write them in a list.
  4. Now choose 1. This will be your environment.
Now that you have your environment, think of as many things as you can that might exist in that environment, even if they seem silly or ridiculous. Take a lesson from Rob Shields: (p. 50): "Instead of limiting his image selections, he chose any he thought would be useful and fired up Adobe Photoshop to work with the images until he found a composition that he liked."

Once you have a bunch of ideas for images, go to work finding images for your design. Use the digital camera if you want to take pictures, or look on sites like istockphoto.com. Remember that your final product cannot use copyrighted images! If you are having trouble finding an image you want, please talk to Ms. Green.

If you don't know where to start with your design:

  1. Decide which image will be your main image, the one that is the focal point of your page. It may be connected to your logo.
  2. Find a font that goes well with your image and gives the kind of feeling you want.
  3. Decide which color will be your main color. Then pick two more colors: a color that is your secondary color, and a color that is your "accent" color. The accent color might be used for headings, etc., but it won't be used very much on the page. You may want to use the eyedropper tool to select colors from your main image. If you can't decide which colors to use, BORROW, BORROW, BORROW! Get on the Web and find a page with a color scheme you like, and use those colors.

Other things to think about:

Now: open up PhotoShop or Fireworks and create a large canvas. Paste a bunch of your images onto the canvas. Move them around, resize them, etc., until you see a design you like. Use "lorem ipsum" text or text from the webProgramming.html file to get a sense of how text will look in your page. How does your content fit into this design? How do the categories you chose from the last assignment fit into this design? As always, ask Ms. Green or one of your classmates if you are stuck.

Congratulations! You have just completed a "mockup" of your Web page. Please save your PSD file as a GIF or JPG file to hand in.