I'm a bit stuck on design for this one...

 

I have a div that needs to display a number of colour options, including the names of each colour.

 

I'm struggling to come up with a nice way of displaying the data, and can't find many inspiring designs online to look at... wondered if anyone had any ideas? It's the yellow table that displays when you hit 'see more colour options'

 

http://www.rubytuesd...site/snood.html (site v. much under construction so please ignore everything)

 

One suggestion I've got so far is making the images for each shade circular (using border radius probs) and having it on a neutral bg. Rather than the block of square pics it'd be cute little circles with the name underneath. Even perhaps a bg image of two knitting needles so it almost looks like a ball of yarn with needles stuck into it to display each shade, though this may be too fussy.

Edited October 17, 201213 yr by Fran Haselden

Does the name have to be displayed, or could you just have a grid of the colours with the name in a tooltip?

Does the name have to be displayed, or could you just have a grid of the colours with the name in a tooltip?

It kinda needs to be obvious, because when you go to order you'll need to pick the name from a drop down menu.

 

Unless I can rework a way of you clicking the colour to select the item and add it to your basket. I'm not sure if the cart engine I'm using allows that, and it's probably beyond my scope for this (I need this site to go live on Saturday really so I need to make it as simple as possible to put together!)

You could use radio buttons to select the colour as a product option - the product + colour value would then be passed to the cart:

 

<label for="colour1"><input type="radio" id="colour1" name="colour" value="Red" /> Red</label>
<label for="colour2"><input type="radio" id="colour2" name="colour" value="Green" /> Green</label>
<label for="colour3"><input type="radio" id="colour3" name="colour" value="Blue" /> Blue</label>

 

You'd then use the LABEL class to add the colour image, or you could add the image inline...

How about dragging an image <div> of the coloured wool balls into/onto a basket and using that action to populate the form,

or like BlueDreamer's radio buttons there should be a way with jQuery to use clicking on an image to pass the information to where you need it.

 

That way the visitor does not have to remember what the colour is.

You could maybe create a background image with all of the available colours that looks like a swath colour book thingy you would pick up from a paint shop, and then add a transparent layer over the top in a sort of CSS layer grid with some Javascript fade in fade out that will bring up the name of the colour that is also a link when the visitor scrolls over the colour. I shouldn't be too hard to put together but could look awesome. just a thought.

 

Yak Out!

Edited October 19, 201213 yr by Renaissance-Design
Irrelevant link removed

How about dragging an image <div> of the coloured wool balls into/onto a basket and using that action to populate the form,

or like BlueDreamer's radio buttons there should be a way with jQuery to use clicking on an image to pass the information to where you need it.

 

That way the visitor does not have to remember what the colour is.

 

I've not put in a way that clicking the circles changes the selection in the dropdown list, so you can then add to your basket. I'm going to try and change it as well so when you hover over the colour, the main picture changes (I have some pictures of models wearing the garment in the particular colour. In cases where I don't, it'll just be a bigger view of the shade)