Design Awareness

By Mark Seymour

Making Snow Angels

There's nothing like a foot of snow on the ground (as I write this) to make you think of winter, so this month we'll again work on the website for our winter sports equipment company:

Last issue we created a colorway, a color logotype, and a logotype variant for use on a color background (go here to refresh your memory), along with the home page for the company. We also created a first-level internal directory page.

This month we'll extend the line to include a raw product line page.

It doesn't look like much, and isn't very useful, without images of the products. In addition, it will be problematic to put a lot of informative text (product specs, etc.) on top of that pretty gradient.

To put some flesh on the bones of the line, here's the revised version (I'd like to thank the Grivel equipment company for the ice axes loosely described in these pages; see their site for accurate information.)

Note that, in order for the images to 'read' against the gradient, we've limited them to small, high contrast, black-and-white photographs. Adding the space for the photos also allowed us to include some additional information for each of the axes, allowing the viewer to chose more readily which one fits their needs.

That leads us to a specific product page:

Note that we've gone to an all-white background, rather than the gradient, in order to free up our use of color images and text. The layout is heavily gridded (which we talked about in the September 2004 column) to visually match the previous, more general, pages.

These pages have also been sized to be non-scrolling and the photos have been kept small for quick opening. The specification link on each product page, if active, would take the viewer to a different page grid, allowing for much more text or detailed photos. There are also links to industry certification of the product, along with one to a QuickTime video of the product being made in the notional AlpineGear factory. Note that we've also allowed for non-US customers by providing a currency conversion page that, using pop-ups (like those here, or you could avoid all the programming and just let the customer use that site in a new window), would automatically convert the price of the product into any of the 180 or so major currencies (assuming your credit card company allows you to accept payments in colons, leks, pulas, or takas). There are also direct links to the shopping cart, allowing the customer to add or remove the product without having to view the cart.

While this has been a look at a very simply styled website, and presents only a few pages of what could be a several-hundred page site, I hope it has helped you visualize how choices of color and style will shape the presentation of information.

Next month we'll return to the basics and talk about building a logo or a logotype. As ever, if there's something specific you're interested in, let me know.

 

---

I started doing graphic design in junior high school, when it was still the Dark Ages of technology. Bill Gates and Steve Jobs were both eleven years old, and the state of the art was typing copy on Gestetner masters. I've worked on every new technology since, but I still own an X-acto knife and know how to use it.

I've been a freelancer, and worked in advertising agencies, printing companies, publishing houses, and marketing organizations in major corporations. I also did a dozen years [1985-1997] at Apple Computer; my first Macintosh was a Lisa with an astounding 1MB of memory, and my current one is a Cube with a flat screen.

I've had a website up since 1997, and created my latest one in 2004. I'm still, painfully, learning how web design is different from, but not necessarily better than, print.