Produce eCommerce sites with genuine style

SHOPPING FOR A NEW WARDROBE ONLINE IS NOW ALL THE RAGE. LEARN HOW TO DESIGN A SITE THAT’S BOTH FASHIONABLE AND FUNCTIONAL!

This tutorial will show you how to design an eCommerce fashion site. Eye-catching and trendy graphics are great for drawing attention to a website, but ease of navigation will always reign supreme as the user should be able to swiftly browse and see the products no matter what. We created a mock layout in order to show how to combine fashion and function to make this happen. Remember the importance of clarity and hierarchy; what you initially want to draw the user in with (an image, tag line or both?), what products are available and what section of the website the user is currently on. We illustrated six dresses for the clothing section and built the website around it, as the products should always be the primary feature. The rest is all about tailoring (if you’ll pardon the pun) and choosing the right colours, patterns and the right amount of detail to maximise the overall appeal – just like a real outfit!

01 Initial idea

First, figure out the target audience for the site and what theme would best appeal to them visually. Then establish a solid theme or look for the project. For this youthful, fun fashion site, we chose a nature and dream-inspired theme. Explore and brainstorm for the appropriate imagery

02 Rough sketches

Now you have a theme, you need to come up with some visual elements. The sketches at this point are loose and uninhibited – anything goes! Next we refined the better of the batch and developed them into a more finalised stage. We lightly shaded it with pencil for a rough guide

03 Layout

A good layout makes the website more user-friendly and understandable. It should be built on the nature of the site: what is the main function? Make a list of the main components of the site and divide them into a banner, menu, main section, shopping-cart section and footer.

04 Layers

Organisation is absolutely critical in vector projects. Whenever you’re dealing with multitudes of elements, put related elements on separate layers and label them with a short and effective description. This also helps to think logically about the stacking order of the artwork.

05 Tracing refined sketches

The sketches are scanned and placed in a template layer in Illustrator at 50 per cent Opacity. Trace with the Pen tool to turn the sketches into vector shapes. Initially, use a black stroke with no fill so the sketch is visible underneath. Colour is added later when the shapes are developed.

06 Hierarchy

A solid hierarchy increases the overall design flow. A banner establishes the mood, the product section is next and then the shopping-cart section since it is an online store. The screenshot above shows how the eye should travel from one to three.

07 Colours

It is important to choose colours that suit the nature/dream theme, so we went with gradients of teals and pale greens. Exploring with colours is the best way to create an image that you’re most satisfied with. Above are screenshots of some other options experimented with.

08 Shapes

Illustrator’s most powerful tool is the Pen tool, and it can lead to a ton of fun and endless experimentation once you master its Bezier Curves. Keeping in tune with the theme, create various nature-inspired organic shapes, like flowers and palm leaves that embody dream-like qualities.

Pages: 1 2 3