Produce eCommerce sites with genuine style

09 Type

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

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

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

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

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

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

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.

Pages: 1 2 3