Shopping Green

Kaktus double quilt cover set £14.99/5 pcs
Knitted jersey; easy-care, non-iron quality. 100% cotton. Quilt cover 200×200cm. 4 pillowcases 50×80cm. Green/light green. 401.241.74.
Bibbi Snurr double quilt cover set £16.99/5pcs
100% cotton. Designer: Caroline Abild Jessen. Quilt cover 200×200cm. 4 pillow cases 50×80cm. Green. 701.032.74.
Nyttja frame £1.99/2 pk
Foil finish. 13×18cm. Assorted colours. 101.170.33. Shown with
Katrin fabric £3.59/m
100% cotton. W150cm. Assorted colours 201.130.15.
Kassett box with lid £4.99/2 pk
Paperboard. Designer: Jon Karlsson. 28×35, H18cm. Green. 101.154.87.
Vacker clothes box with lid £8.99
Cover: 65% polyester, 35% cotton. Designer: Louise Hederström. 42×56cm, H30cm. Green/white. 801.044.09.
new Urban chair £25
Plastic. Designers: C Öjerstam/M Elebäck. 52×51, H81cm. Seat H45cm. Green. 501.223.39.
new Syntes Skiss range
Earthenware
Bowl £1.99
∅17, H6cm. White/light green. 501.132.26.
Plate £1.49
∅26cm. Light green. 400.877.32.
Kryp blanket £2.99
100% polyester. 100×125cm. Green. 300.562.03.
Hedda Rak cushion cover £4.99/2 pk
100% cotton. Designer: Synnöve Mork. 50×50cm. Green. 301.142.22.
Unni bedspread/blanket £17.99
100% polyester. 220×250cm. Green. 501.207.88.
new Marek wall/floor lamp £12.99
Handmade paper and steel frame. Designers: A Efverlund/O Wihlborg Max 40W. 25×96cm. Assorted colours. 701.208.10.
Hedda rug £105
100% pure new wool pile. Designer: Kazuyo Nomura. 140×200cm. Off-white/green. 401.141.70.

Description

Original page.

The design above shows a web coded version of pages 128 - 129 from the (printed) Ikea catalogue for the first half of 2008. The original scanned pages are featured along with this text. Notice the tear mark where this double paged spread was removed from the magazine for scanning.

I chose this design to turn into a web page because it's something that by its nature hasn't been coded before (and so I couldn't just copy); it offered a challenge as I wasn't sure if it could be replicated faithfully on the web. Also, as far as I know there was no precedent set on how to go about it.

Coding

Initially it's important to determine the meaning of the page. Ultimately the text content on this page describes the items on sale. xHTML offers a number of ways to code this list of Title/Description content, but in this case I decided to place the text inside a 'definition list'. It is on this meaningful markup that I based the style (visual design) of the page.

Clever Stuff

Designing

The style (colour, layout, image) on the page comes completely from CSS (Cascading Style Sheets). This aids the accessibility and usability of the site because if the style sheet is switched off (e.g. in Firefox select "View >> Page Style >> No Style") the text content can be viewed on its own. The download size of the page would be reduced as, the way this page is coded, there would be no images loading without CSS.

Images

The images on the page are reduced versions of the originals, however they are still large in file size. The largest is 52Kb and the smallest less than 4Kb. I guess this seems excessive, however be confident that I've used Adobe Photoshop to reduce the image sizes as much as possible without sacrificing quality. This would've been an issue for other types of pages (e.g. a homepage) aimed at a different audience, however in this instance and as a one off example page, I think it's justifiable.

I've processed all of the images using Adobe Photoshop. They all needed scratches removing and, as mentioned before, resizing (pixel and file size). The images spanning the central fold needed special attention and some creativity mainly using the 'Clone Stamp' and 'Polygonal Lasso' tools in Photoshop. You'll probably be able to make out from the thumbnail of the original pages that I've had to recreate bits of the products in order to seamlessly stitch the two sides together. Nowhere was this more of a problem than on product seven, the circular earthenware bowl.

Layout

Once I had the images copied and processed I mocked up the layout of the page in Adobe Fireworks. I settled on a width of 960 pixels, large enough to get the pictorial detail in but small enough to fit on the average computer screen ("Currently 1024×768 Extended Graphics Array is the most common display resolution", Wikipedia). For info: I don't normally work in pixel width, usually I use EM or percentage based sizing. This method of sizing just seemed to fit this case.

The layout of the page uses 'absolute' positioning which means it can't be resized. Although on many pages this would've been a cop-out and could've presented accessibility problems, there is method here. The original page is image heavy and sparse on text. The images are situated next to each other with no room for movement. Using the graphic elements I had to start with, where the products disappear underneath one another, that's the end of the image. As mentioned before, the text can still be resized and the page can be viewed without style switched on. Also due to its semantic code, the page would make sense to screen reader users.

Functionality

In the future this page could include the product microformat (when the standard is complete) for extra functionality. An upgrade to this page would include JavaScript that scrolls the list to show a product's description when the user hovers over its image. It would also be good to get the highlight to 'hug' the edges of each product, at the moment the square borders present a small amount of ambiguity.

Last updated: 14 February 2008.

Back to homepage