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

Step 1

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

Step 2

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

Step 3

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

Step 4

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

Step 5

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

Step 6

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

Step 7

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

Step 8

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.

09 Type

Step 9

Choosing the right font is essential as it is the voice of the website. Since we are speaking to a young, female audience, choose a sans serif font called Print Clearly. It is modern, feminine and legible as body copy text. Then give it a matching teal colour to make it fit right in.

10 Banner image

Step 10

As the banner is the first thing a user sees, it needs to make a connection and leave an impact. We illustrated a girl with flowing hair. Secondary elements like the palm leaves, flowers, extension of the hair and gentle background gradient enhance visual interest and lasting impression.

11 Banner text

Step 11

Now the banner needs a title. We chose an energetic and legible font called Confusions on a Dancefloor. Play with the exact placement, position and size of the text, as you want it to simultaneously stand out as well as share equal importance as the girl’s face

12 Menu

Step 12

A web menu needs to list everything logically. The easiest way is by category, so divide it into five main headings. As a menu contains plenty of information, it is important that it doesn’t trump the banner in visual importance and hierarchy. A softer font and neat alignment does the trick.

13 Content

Step 13

We designed a grid of boxes for the images and text. The dresses should be the same relative size and position to remain consistent. The light blue from the boxes adds consistency as it simultaneously shows off the colours of the dresses and ties them together in one cohesive design.

14 Alignment

Step 14

Streamlining through alignment is the most obvious way to make a design neat and tidy. Add an extra layer for the guides to turn them on and off easily. To add a guide, press Cmd/Ctrl+R to bring out the ruler, then drag the guides out horizontally or vertically.

15 Use existing patterns

Step 15

We scanned samples of Japanese paper and plaid trousers, then copied and pasted the vector dress outlines from Illustrator into Photoshop and put them on top as a Smart Object. Using the outline, select the negative space with the Magic Wand and delete from the pattern layer.

16 Vector pattern swatch

Step 16

Two of the dresses’ patterns were created with a vector pattern swatch in Illustrator. First, we drew a square – this is the dimension of the swatch and any design of the pattern should be contained within. Then we drew a wavy pattern for one of them and a polka dot for the other.

17 More swatching

Step 17

Drag your swatch into the Swatches window. Then select the dress object and apply the swatch by clicking it from the window. To resize the pattern, select the patterned dress, hit S then Enter and resize it in the dialog box with only the Patterns option checked.

18 Shopping cart

Step 18

Create the shopping-cart icon so the user can understand that the clothing can be purchased right from the website. For the icon, omit unnecessary information and include only the defining elements, as there is not enough room for detail. Draw a simple shopping cart with the Pen tool.

19 Cart sidebar

Step 19

The shopping-cart section should be secondary to the product section. Create a smaller section for it so the user can see what they’ve bought but not be distracted by it. They should see what they’ve added to their cart and price easily, so the body copy format remains the same.

20 Footer bar

Step 20

With the Pen tool, draw an organic shape and apply a gradient similar to the banner to be consistent. Add floral elements on top by creating four different flowers. Then using Cmd/Ctrl+Opt/Alt, drag and duplicate the flowers, adjusting, resizing and rotating for variety.

21 Workflow

Step 21

When managing your project, follow the format ‘clientname_projectname_description_version.app’ and put files of the same application into the same folder, titling it ‘Illustrator’ or ‘Photoshop’. Having separate folders for scans, linked images and roughs makes things simpler.

22 Linked images

Step 22

In Illustrator, an image can be embedded once imported. But if further revisions are made, it won’t automatically update. For the patterns, we placed but didn’t embed them until the final stage. Thus, they can be automatically updated if we need to revise them outside of Illustrator.

23 Crop Area (in Illustrator)

Step 23

Crop Area is a handy function. It makes crop marks around the art board and cuts off anything beyond it when the file is exported for JPEG, TIFF, etc. This is great for eliminating unwanted and extra artwork and miscellaneous images bleeding off the page.