D r e a m   B i g .

K
a r l
K
n u t t e l

Go back home

David Downes Fitness.

David Downes Fitness website
David Downes Fitness website
David Downes Fitness website

The Project

David Downes Fitness is a Dublin based personal trainer and nutrition coach operating for over 5 years. He was without a web presence (aside from social media) so I was chosen to create an SEO friendly, fully responsive site that demonstrates all of the services he offers clients with the aim of increasing his customer base.

Visit Site →
Role:

Web Designer/Developer/Logo Design/Branding

Context:

Business Website

Period:

Early 2018

Design

As the client didn't have any web presence prior to the establishment of the site, complete branding, including logo design, was undertaken. We first tried to understand the image and tone of voice that the site should present. Being a personal trainer, it should be bold and energetic, trustworthy, knowledgeable yet friendly.

Thus the choice of a strong primary color along with a bold, square, and sturdy display font, combined with a softer, rounder typeface for copy, all set against monochromatic images and dark backgrounds.

$eerie-black

$charleston-green

$selective-yellow

$dark-medium-gray

$isabelline

Anton Roboto

The choice of yellow for the primary accent color was made to invoke that feeling of vitality and energy. The varying shades of dark and light greys were chosen to allow the yellow to pop. And a counterpoint of very light grey maintains that sense of lightness and energy, while playing well with the visual style of the site.

The monochromatic images and background video were chosen partly because it works visually, lending a sense of cool, integrity, and general visual consistency. But the choice was also somewhat pragmatic as the quality of the images provided, namely from the clients' own photographs, varied widely.

David Downes Fitness viewed on Apple devices.

Development

The site was developed from the ground up using elements of bootstrap (grid system and some typography Sass files), and for the 'slide' based functionality, a jQuery library called fullPage.js. Bootstrap helped in making the elements responsive, but very little else was used and the styling, all animations, and the layout are almost entirely custom. A lot of custom jQuery was written to enable much of the functionality of the site.

I discussed with the client the possibility of using a CMS such as Wordpress. However, due to budget and the lack of a need for dynamic content, a pure HTML/CSS site layout was seen to be a better choice. Nevertheless, I developed the site with Sass (SCSS) and NPM, and created a number of reusable 'modules' so the site can be easily expanded in the future. I also developed it with the possibility of future CMS integration in mind, so it would be quite simple to convert it to a Wordpress site should the client need it down the line.

Skills

I was responsible for the entire design, branding, and development of the site. I created wireframes and mockups during the design stage.

The main skills and technologies used were:

HTML5

CSS3

Bootstrap

jQuery

SCSS

BEM

Photoshop

Illustrator

VS_Code

PHP

Nodejs

Gulp

View Next Work