Topshop - Website Design

The website attracts 1.9 million users per week, that's almost 8 million a month!



The general layout of the Topshop website is simplistic, minimal and easy to navigate around. The Topshop logo is situated on a banner centrally across the top of the page, and also includes the 'search' bar, the 'shopping basket', 'sign in' and the option to select where you're shopping from and which currency. The 'sign in' option allows returning customers to log into their accounts and review any items previously saved in their shopping baskets or alternatively allow new customers to sign up.

• They commonly use typeface 'ITC Johnston Bold' for their magazine headings
• Use all sans-serif typefaces for logos, labels and everything else

The closest typeface I could find to match theirs was 'Kannada Sangam M' on photoshop, however I did find online that the font 'Benton Sans Book' is extremely close to the Topshop logo but I couldn't afford to buy it as it is a commercial font. I did find after much research, 'Helvetica Neue Light' which was very close demonstrated below. I placed it above the original logo and edited the 'S' and this is the font I intend to use later on when I am creating content for the website.

The running colour theme is monochromatic, with colour only being introduced through the editorials or items for sale. This results in each story standing out to the audience.

Topshop have created an interactive site, that attracts it's target audience by portraying an achievable image or look that its desired target audience want to buy into.

When you first go onto their website, you're introduced to their most recent editorial campaign shots via a banner image.
- when you role over the banner image nothing changes
- there is a 'shop now' or 'shop the feature' button which is a link to the clothing featured.

After a couple of minutes on the site, a pop up comes onto the screen asking you to give them feedback - it's an interactive site.

Above is an updated version of their landing page. It features a full image banner. 

• The models stances portray attitude and confidence
• Varied ethnicity's
• Urban - the background is a scruffy brick wall, the styling features ripped jeans
• Features models that appear to fit into their target market age range, all look in their early 20s
• Facial expressions are very direct and somber

Below I have two screen-shots of the 'drop down' menu that happens when you hover the cursor over one of the menu selections. Under each category it is split into various sub-genres making the website extremely quick and easy to navigate around. The drop down menu always includes an image to the right of the sub-genres that is relevant to that area e.g. under the 'new in' menu you get the image of the latest editorial or under the 'shoes' menu you get a close up shot of shoes that features another interactive link.

Once you click on the 'magazine' button, you're sent through to their features such as GIFS, flat-lays, interviews and their editorial shots. The editorials are separated out amongst the rest of the content, and all are clearly titled and sub-headed. I've chosen below to look at their editorial feature with Karlie Kloss as this is something I am keen to recreate.

Note: when you hover over any of these article options nothing happens to the image or the page. It is simply a link directly through to the relevant story.

In this get to know Karlie section, it features images of their campaigns she's recently featured in. The images overlap one and other with a quote running across them both. One is taken in a studio, whilst the other is on location. 

• Both are extremely posed
• Stance is direct with the camera
• Hair and make-up is natural looking, and the paired with the styling, portrays a 'girl next door' look 
• Cropped into shots that are mid-lengths

Below are screenshots of one of their editorial spreads featuring Kendall and Kylie Jenner. The piece is elegantly presented and flows down the page showcasing each beautifully shot image. They include a variety of shots, some close ups, mid-lengths and full length shots.

• The mood of the images is quite sultry
• They're clearly made up, however it isn't over the top. A good base has been applied, along with contouring
• Hair is either straightened and left loosely hanging or soft waves
• Location is in a studio with a grey colourama, however it's texture adds to the image rather than it being block coloured it makes for an edgier look
• Models are 18 and 20 and consequently are right in the middle of Topshop's target audience

Again each image is framed and placed next to another, however this time there is no over lapping and a much cleaner overall look. These images are of a higher quality, and so have been presented in a manner that reflects this.



 

Below is another example of how they present their images. Text is always included and they've also shown shots which are cropped in to emphasize the detail. They've placed a small graphic on each of the looks stating 'NO.1' and so on, which overlaps with the image and the white background where the text is placed. I like the composition and layout of these images and how it's been presented on the site, this is something i'm going to take forward when recreating the site with my own work.

I also noted that when browsing the site, on almost every product you roll over with your cursor, the image flips to a model wearing it. This is called a roll over and is evident with almost all of their listings they have on the site. The only difference with the rollovers is the lighting, on some shots the backdrop is a very light grey almost white, and others it is grey.

  
Similarly when you move your cursor over the menu bar along the top, the colour of the typeface changes to a lighter shade of grey and the drop down menu with the sub-genres you can select automatically appears. The same happens when you run your mouse over one of the sub-genres.



With the sidebar they don't have any rollover functions, you simply click and select the box(s) of the products you wish to view, making it the site quick and easy to use and navigate around. At first all the products appear, however if there is a particular garment you're after you don't need to search through all the pages.



Finally at the bottom of their website you have a large selection of options. Each one works similarly to the rest of the site,when you hover your cursor over one the colour of the typeface lightens. Under 'help', ' your order' and 'about us' there are several sub-categories, each being an interactive button taking you to the desired page. This allows the customer to gather any extra information she needs. It also has all of their social media advertised as well as their app. Their advertising is quite subtle, the customer would need to be looking for this information because although it is featured on every page, not everyone scrolls down to the bottom of the page once they've found what they're looking for.