Page 1

Making Sense of GymShark

route one

To create a unique, striking first impression we have created a real feature of the header area, using dynamic imagery, powerful angles, strong typography and inspirational copy. These all come together to display a powerful brand with fitness and movement at its core. The interactivity of the header immediately grabs users attention, creating great engagement with the brand and products - driving sales and ensuring a return to the site. Taking inspiration from the nike site, we have created a clean, minimal site with strong navigation. The logo and homepage inspires diagonal lines throughout the nike style navigation. This not only gives us a strong style of navigation but also brings a very unique feel. These lines also create a real sense of direction forwards and ahead of the pack! Product is king throughout the site, with large clear product shots, both isolated for great clarity, but equally as importantly, in use. This not only displays the products in their natural environment, but also inspires users to get to the gym and moving - in their new GymShark clothing!

HOME PAGE INITIAL VIEW 1. Users can easily switch their country of origin to meet their shopping needs.

2. This interactive sliding header creates a dynamic feature of the hompage. On click the section expands out to full width of the header 3. Photographs of the products in-situ automatically works as a visual clue to what GymShark is about, whilst the in-situ shots demonstrate a serious fitness brand.

4. Colour coding the collections brings differentiation and vibrancy to the site.

5. Until users interact with the header, the overlaying colours appear on a carousel affect, from men through to sale, each with their different colours appearing individually. 6. Using angles within the navigation creates a unique, playful visual which also strengthens the brand language throughout.


1. News items and sale promos can appear here to drive sales and expand the brand. By displaying a great knowledge of fitness GymShark can compete against big brands.

2. Videos of GymShark products in use can demonstrate just how well they perform.

3. Social icons appear in these angular boxes to once again reinforce the sharp, angular branding 4. A clean, clear footer which is simple to navigate means that users can always find what they are looking for on the site.

HOME PAGE EXPANDED HEADERS 1. The ladies section expands to full width with featured products, creating an overview of the selected part of GymShark.

2. The angles of the navigation carries through to the expanded header - reinforcing the dynamic nature of the brand.

3. Featured items make the product king. With each section containing numerous products, there is plenty of scope for customers to find an item they desire straight away on entering the site.

4. Users are able to scroll through the sections, browsing each of the headers.


1. The clean, full width dropdown menu ensures very clear navigation, with plenty of room for lots of collections.

2. Colour coding follows through into the dropdown menu.

3. Seasonal sports or sales can be promoted within the dropdown menu for an extra push towards desired collections.


1. Large sale signs really grabs user’s attention on the clean layout.

1. Filters allow customers to search for desired items quickly and easily

1. Once again angles are used to reinforce the brand.

2. Product details are listed with plenty of space to ensure a clean, minimal approach.


1. Large product images help users make a decision about buying the item.

2. Clear ‘add to bag’ buttons with great stand out helps sale conversion.

3. Expandable information fields ensure that all the information users need is on the page whilst ensuring a clean, minimal


route one

like what you see? click the link below to see the full visual and leave feedback



but wait, there’s more!

we’ve prepared a second option for you to review so keep turning the pages

route two

Taking inspiration from the Nike site, we have created a visual where the header, navigation & lifestyle images takes advantage of the full width of the browser to create a great first impression. As the ultimate aim of the website is to sell, product is always put first. We have included a “Best of Gymshark” product range that is featured on the home page, this collection could either be automatically populated with best sellers or you could hand pick the selection that goes here. As well as the “best of” range we have also included a fully featured drop down menu that allows the user to jump to different subcategories as quick and easily as possibly, making the shopping process as seamless as possible. Our second priority with this visual was the Gymshark community. After seeing how active your community was on facebook we thought it would be great to try and encourage that community onto your site but with minimal effort on your behalf. To achieve this we have a social feed pulled straight from your twitter & facebook accounts on your homepage, we feel this along side a latest gymshark news section that allows the users to comment and contribute could really help drive traffic to your site with an aim of increases sales.

HOME PAGE INITIAL VIEW 1. The visual uses a number of striking diagonals that are inspired from the logo and help to create a dynamic and unique look & feel to the store. 2. The primary & Secondary navigation is designed to allow the user to quickly browse for products or gain access to the sites key store utilities such as accounts, search or currency selection.

3. The large lifestyle header can be used to promote latest offers or popular ranges. The user can also cycle through the offers & promotions.

4. Putting product first, the homepage will feature a “best of” range that can be either automatically filled with best sellers or alternatively manually selected by you. 5. Sales tags are visually inspired by the diagonal lines of the branding, while a ‘was/now’ price clearly indicates the savings.

Drop Down Menu

1. Inspired by the Nike navigation the drop down menu is full width and features a number of subcategories allowing for quick and easy navigation for the user.


1. The gymshark community is a direct feed pulled from facebook & twitter. As your facebook feed is very visual, we have position photos first with any text being revealed on mouse over.

2. Gymshark News on the homepage is a direct feed from your blog including comment count. This would be a great for you to shout about new product ranges or success stories of the Gymshark community. It would encourage your customers to comment on posts and bring the community to your website, not just on facebook & twitter and while they are here, hopefully they browse some products and make a purchase too!


1. Bread crumbs allow the user to easily navigate back to previous pages.

2. Sort by feature allows the user to easily organise products how they wish, depending on if they are looking for the best sellers or the cheapest shoes.

3. Collection filtering is hugely popular with shoppers and quickly and easily allows the user to narrow down to the exact product they desire.

PRODUCT DETAIL PAGES 1. Product thumbnails allow the user to cycle through different product images. 2. Large product images with zooms functions allow the user to easily see the detail of the product to aid in the decision making process. 3. At this stage the layout is aimed at purely guiding the users eyes to making a buying decision. Distinct & contrasting call to action means the user is never stuck trying to move to the buying process.

4. Additional product information is easily available but hidden by default so not to distract the user from the buy process.


route two

like what you see? click the link below to see the full visual and leave feedback



thank you for looking we look forward to your feedback

+44 (0)1271 344 265

Gymshark website visuals