TSW Personal Training

Website Development

Website Design

Search Engine Optimisation

Digital Infrastructure

Visit TSW Training's website.

Project Introduction

Having been a client of Tom's for 4 months prior, we had discussed that he was starting to build a website, but was overwhelmed by the content, design and management process. I stepped in to help him discuss his ambitions for his website, the overall purpose and initially generate some content that would be suitable. Following a few meetings, I had produced a website design that we could develop on that would be the base of his website.

The website required a few key features that would allow future and present clients to easily interact with Tom's services.

  • Responsive Design - made around the primary use on mobile as the majority of his clients came from Instagram, a mobile-only platform.
  • Well-navigated menus so customers can find the information they want and quickly
  • Precise search engine optimisation to ensure ranking in search engines
  • Consultation form for first-time customer enquiries

Once the design had been completed to Tom's specification, I continued to develop the content of the website, involving going round with Tom during one of his training sessions and acquiring suitable photos for his website and also social media use.

Initial Design

Live Website


Typography

I began by working through a list of typography styles which would best suit the content shown. As a result of the formality that the bistro established, a serif font was the clear winner, which I chose Lora from Google Fonts for any headings. To accompany this font in paragraphs and navigation, I chose Nunito Sans as it remains bold and enticing, while a smoother, cursive appearance.

The typography used on Tom's website

Colour Palette

The colour scheme of Tom's website was a mixture of the red used in his logo and also the red used by the gym he works for, Snap Fitness. The majority of the sections on the website use one shade of red, with a darker shade used for hover states. Where the Snap Fitness logo is used, the darker shade of red is used to differentiate brand identities.

Shades of red used on Tom's website in mid-sections.

Navigation

The navigation on the previous design was obvious, however not displayed in an appropriate way as it did not seem part of the website and instead 'thrown' onto the page. The new website is designed mobile-first, resulting in a responsive navigation bar. The navigation is fixed to the top of the page, enhancing the user experience by having instant access to navigating the sitemap.

Top navigation of Tom's website, with a hero image.

Call To Action

At the bottom of most of the pages, there is a ribbon banner with a call to action to book a free consultation. This reminds visitors once they have read the content to take action. Using global statistics from the majority of leading websites, only 25% of visitors go below the fold and near the footer, so along with the call to action ribbon, there is also a call to action button in the navigation bar.

The call to actions on the footer of Tom's website

Photography

Get in touch!

Are you interested in working on your digital appearance or have general questions? I'm available to contact via a number of platforms. For business enquiries, contact me on LinkedIn or via email, or if you want to contact me for a non-business related matter, direct message me on Instagram!

Contact Me LinkedIn Instagram