Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Creating Inspired Design Part 3: You Never Give Me Your Money

Last updated Oct 17, 2003.

By Andy Clarke

"One sweet dream
Pick up the bags and get in the limousine
Soon we’ll be away from here"

— Lennon-McCartney, 1969

When designers create inspired design, they create new and exciting work for the web. They do this by looking outside of the web for their ideas and combining inspiration from different media as well as the world around them.

In this month's article on Creating Inspired Design, I turn my attention to design for ecommerce stores and ask the question, "Why do so many online stores look so visually similar?" and "Where can we look for inspiration to create a new kind of ecommerce store design?"

The "If It Works, Don't Fix It" Approach

Everybody loves shopping. OK, so that's a sweeping generalization. I know many women and men who love to shop. I also know plenty of men who trail three steps behind their shop happy partners on a Saturday afternoon, wishing that they could be at home, or in the pub, or even in their potting shed tending to giant leeks.

I have to confess. I'm a terrible person to go shopping with. I'm fine when I'm shopping for myself or flipping through some vinyl in a record shop. But take me shopping for clothes and I instantly become Mr. Grumpy.

"Yes, dear, that looks lovely."

To me, all women's clothes shops look the same. Sorry ladies, it's true. I can't tell my Monsoon from my French Connection. And don't get me started on...

My other trouble is that so many online stores look the same to me too. For an area of our industry where there has been so much innovation in technology and so much commercial success, I find online stores terribly boring. Now, I know that's not supposed to be the point. These sites are not supposed to excite me; they're supposed to make it easy for me to part with my hard-earned squids, but really.

Point your browser towards Amazon, Best Buy, Play.com, Toys ’R Us, and Walmart and run a search for "Star Wars." Go on try it now, I'll wait here until you get back.

If you are anything like me, by now you should be sensing a little déja vu. Amazon may have set the gold standard, but now it seems that so many sites aiming to emulate its success also have product displays that feel somewhat, er, similar.

The same is rarely the case in the offline world. Retailers try hard to be different from their competitors. They try hard to create happy retail experiences, to give their customers a unique feeling of what it is like to shop in their stores. They tailor these experiences to their predominant customers; a shop selling teenager fashions will not look, feel or sound the same as one selling mainly to people who are in their thirties or forties.

And yet online, a drive to create stores that are highly "usable" seems also to have created experiences that are, frankly, often bland and dull. I think that it is a mistake to believe that successful usability is simply about helping a customer to get from A to B. Usability should be about so much more than the layout conventions that seem now to define it. The experience of a journey can be just as important as your final destination.

So are there lessons that designers can learn from the retail experience? Are there factors that we can adapt for the online world to create shopping experiences that are pleasurable rather than strictly functional? I hope so.

Looking To Print Design

I believe that the layout of a store, both offline and online can say a lot about the brand of a business. If a brand is simply a "functional" brand, then perhaps today's established conventions for ecommerce design work well. But what if your brand is a "lifestyle" brand? Don't you ache to design that site a little bit differently?

When you walk into any newsagents, you will likely find rack upon rack of lifestyle magazines, from heath to home furnishings, fashion to fast cars. You will find different magazines aimed at different reader age ranges, each with a visual tone that is different from the next.

In this series, I have already confessed my habit for ripping pages from magazines and pasting them into my inspiration scrapbooks. One major factor in my obsession is that magazines covering many different subjects present product information in as many different ways.

Take this example from a home furnishings magazine. If you look closely, you will see that it is nothing more complicated than an ordered list of featured products that—if adapted for the web—could be marked up the same way. And yet the layout design need not look like a list.

Figure 1

Figure 1: An ordered list of products in a home furnishing magazine

You might use CSS to add the product images either as a single background image to the list or to its containing element. You might also position individual images using absolute positioning. Creating such an interface can often be simple to achieve from the most minimal markup and CSS and doing so would create a distinctive interface for an online store.

My next scrapbook example is a little more complex and might require you to think a little more laterally.

First look closely at the meaningful essence of what you see. Despite the design's apparent visual complexity, you should find little more than a list of products. You might choose to float each of the list items to create the six columns at the top of the layout. You might also position the larger product images outside of the list at the bottom of the design using CSS absolute positioning.

In both of these examples, the goal of creating a different type of product display need not involve resorting to presentation markup to achieve a distinctive visual result.

Figure 2

Figure 2: A more complex magazine example

Putting Ideas Into Action

No Creating Inspired Design column would be complete without a little content-out markup and CSS to make a real world example for you to adapt to your work. This time you are going to create a simple, but different, style of interface to display products on a store selling Lego Star Wars toys. Oddly, my design was inspired by the layout of make-up products in a style magazine.

Figure 3

Figure 3: My inspiration for this design was an article displaying make-up products in a style magazine.

One of the main reasons for adopting a "Transcendent CSS" approach in your work is that it gives you the ability to create complex visual interfaces from the most minimal, meaningful markup. Take a look at the inspirational artwork above and then at the final result that you’re going to create below: a flexible layout that will expand to 92% of the browser window or containing element, but will never expand wider than 770px and one that will adapt well to changing text sizes.

Figure 4

Figure 4: A different style of interface to display products on an ecommerce store

You might first assume that achieving this resulting two-column effect will require using two divisions, one for each of the two columns. But look again and remember back to my introduction to the content-out approach that I introduced in the last article.

What do you see? I hope that you see a list of products and not a division in sight. With this in mind, you should start at the most granular level, in this case, with an unordered list—the only element that you need to complete this result.

Similar to the example from the last article, each of the items in this list is a compound of other elements and contains a heading for the name of the product, plus a paragraph description, and lastly an image.

To allow you to style each of the products individually using descendent CSS selectors, you should also give each of the list items its own unique id. This markup could not be simpler.

<ul>

<li id="grievous">

<h3>General Grievous Starfighter</h3>
<p><a href="#"><img src="1-1.png" alt="" /></a>The LEGO General Grievous’ starfighter...</p>

</li>

<li id="destroyer">
<h3>Imperial Star Destroyer</h3>
<p><a href="#"><img src="1-2.png" alt="" /></a>Boasting a 1,366 piece-count, new figures included with the Imperial Star Destroyer...</p>

</li>

<li id="deathstar">
<h3>Death Star</h3>
<p><a href="#"><img src="1-3.png" alt="" /></a>The ultimate power in the universe...</p>

</li>

<li id="atst">
<h3>Imperial AT-ST</h3>
<p><a href="#"><img src="1-4.png" alt="" /></a>The AT-ST served as a significant addition to the Imperial side of battlefields in the Galactic Civil War...</p>

</li>
</ul>

Ensuring that your markup stays valid throughout your development process can save many hours of debugging, corrections, and general head scratching, particularly when working with CSS. So after completing your markup, your next task should be to preview your content in your development web browser and check using the W3C or a similar validation tool to ensure that no errors have crept into your markup. With this accomplished, it’s time for you to move onto writing some compact CSS to add the visual styling to create your design.

To set the stage for this design, begin by applying some initial styles to the body element of your page. You will be using Calibri, one of the latest typefaces that was recently introduced with Windows Vista and backed up by other typefaces that are in more common circulation.

body 	{ 
width : 92%; 
min-width : 770px; 
margin : 0 auto; 
padding : 100px 0; 
background-color : #fff; 
font : 88%/1.4 Calibri, "Lucida Grande", Verdana, sans-serif; 
color : #333; }

To accomplish this design, you will be using a combination of CSS relative and absolute positioning. If you missed last month's article where relative positioning was introduced, now might be a good time to look back at it.

To establish the unordered list as a positioning context for all of its positioned children, start by adding position : relative; to your list. At the same time, add a decorative border and a background image that repeats vertically in the center of the list.

ul { 
position : relative; 
border : 2px solid #cbcdc8; 
background : url(ul.png) repeat-y 51% 0; }

This design demands that each of the list items should fill half of the width of the list, so set a width of 49.5% to avoid any complications with browsers that may unintentionally break your design should the width of contained elements add up to exactly 100%. At the same time, add a little bottom padding to visually separate the list items.

li { 
width : 49.5%; 
padding-bottom : .5em; }

At this point, look back at the inspiration layout. Notice how the designer has added visual movement by using transparent images that break out of their containers? Fortunately, it is now possible to achieve similar visual effects for the web by using a combination of CSS positioning and alpha-transparent PNG images. To accomplish this design, you’re going to use absolute positioning to move the images outside of their containing elements.

To establish the list items as the positioning context for their positioned images, add position : relative; but no offsets to the list items.

li { position : relative;}

With your basic style building blocks in place, it is now time to style each of the list items individually, by making use of the unique id attribute that you gave each one. You will be styling three of the four items, giving them background, margins, and positioning properties.

li#grievous { margin : 5px; background : #cbcdc8; color : #000; }
li#deathstar { margin : 5px; background : #2a2c2a; color : #fff; }
li#atst { position : absolute; top : 0; right : 0; }

Typography Control

Your next task should be to tackle the typography of the headings and paragraphs that each of the list items contains—first by applying common styles to all headings, then once again by making use of the unique id attributes that you added to each list item.

h3 { 
margin : 0 10px; 
padding : 10px 0; 
font-size : 120%; 
letter-spacing : 1px; 
line-height : 1.1; }

li#destroyer h3 { 
margin-right : 0; 
padding-left : 180px; }

li#atst h3 { 
margin : 0 20px 10px 30px; 
padding-bottom : 10px; 
font-size : 140%; 
border-bottom : 1px solid #333; }

To give your design a more organic feel, you will be giving each of your images its own unique positioning styles. As each of the images is contained within a paragraph element, you should first create the space into which these images will be positioned. Do this by using a combination of padding and margins. The amount of padding will change according to the size of the images in any given design.

p { 
margin : 0 10px; 
padding-bottom : 10px; }

li#grievous p { margin-right : 0; padding-right : 110px; }
li#destroyer p { margin-right : 0; padding-left : 180px; }
li#deathstar p { margin-right : 0; padding-right : 130px; }
li#atst p { margin : 0 30px 10px 30px; }

Positioning Your Images

Having created the space to contain them, it is now time for you to position the three images on the left side of the design. You should position each one using absolute positioning inside its list item, which acts as positioning context, first by setting common properties for all images and then by giving each image its own unique coordinates.

li img { position : absolute; }
li#grievous img { top : 10px; right : -40px; }
li#destroyer img { top : 20px; left : 0; }
li#deathstar img { top : 10px; right : -50px; }
Figure 5

Figure 5: The left side of your design is now complete

It’s the large image on the right of the design—inside the list item with an id of "atst"—that requires some special treatment. You’ll need to use a combination of floating, relative positioning and negative margins to achieve the visual effect that we’re looking to achieve in this design. Start by floating this image to the right to allow its neighboring text to flow around it.

li#atst img { float : right; }

Now, offset this image 100px to the top and 60px to the right of where it would normally visually appear. This will position the image outside of the confines of both its list item and the unordered list to create a layout that appears less boxy.

li#atst img { position : relative; top : -100px; right : -60px; }

But, there's a gotcha. What about the white space where the image would normally have appeared before you offset it? One of the interesting behaviors of relative positioning is that when you offset an element, elements that follow it in the normal flow cannot move to occupy that space.

To allow the surrounding text to wrap around the image and complete the design, add negative margin values to this offset image.

li#atst img { margin : 0 0 -60px -50px; }
Figure 6

Figure 6: With a little positioning and margin magic, the final image falls into place

Now, take a look at the final result in your web browser: a new layout for presenting product information on an ecommerce store. A layout that you have made from the humblest, most minimal, meaningful markup, a combination of CSS techniques and a little lateral thinking.

Figure 7

Figure 7: Your final, inspired result.

That's enough from me until next month. I can't wait to see what inspired designs you create until then.