INFO18081 Project 2: Mock-up

PROJECT BRIEF: This project will enable you to explore graphical styles for a web page through a stile type and create a mock-up of the page in Photoshop. You will be working to your wireframe layout (created in Interaction Design 1), but now putting the actual detail of the design and content into the page. Style tiles are a design deliverable consisting of fonts, colours and interface elements that communicate the essence of a visual brand for a Web site. The mock-up is a pixel-perfect design of what your final working site will look like.


Style tile for “FIT”.
Mock-up for “FIT”.


For this project, I chose to create a style tile and mock-up for my website, called “FIT”. This website is for people who are interested in or live a healthy, active lifestyle and are looking to find athletic centres in their area. There are three categories to choose from: fitness centre, sports facility and community centre. Once the user selects a category, they must simply input a city name or address in the available field. The search results that appear offer information on the location of the facility, its amenities and what is has to offer, as well as additional photos and related results.

I was inspired by multiple fitness website mock-ups that I found online. A common theme that I noticed between all of them is that they contain dark colour schemes (black to gray to white) and introduce a sudden pop of colour, such as blue, green, orange, yellow, etc. For my website, I chose the colour green because it’s a bright, fresh colour, and one that is associated with energy and health.


Like mentioned above, I wanted to follow a similar colour scheme to the designs that I drew inspiration from. This includes dark grays, light grays and a bright green, which is the accent colour for this website.


The logo for this website was designed with a very simple concept in mind – make sure that the word “FIT” is in it. Instead of creating a symbolic logo, I chose to work with the words and create a typographic logo. The map marker is a key element of the design because the website is based on the idea of searching for athletic facilities that can help you maintain a healthy, active lifestyle.

Out of these designs, the final logo that was chosen is the following:


The font family that I chose for this website is Franklin Gothic. I found that it was a modern and simple sans-serif font that seemed to fit the aesthetic of the website, while differing from the fonts that many modern websites use (Helvetica, Verdana, Futura, Arial). Playing around with the bold and condensed options allowed me to explore different type styles that fit in different places on the website.


For the mock-up, the images that I found were all based around fitness and exercise. They were downloaded from the stock websites, Unsplash and Pexels.

The images that were used for the style tile were found on Pinterest and followed a similar colour/lighting scheme. This type of dark and moody colouring is very common with fitness websites.


In terms of similarity, the wireframe and mock-up are very similar in format and layout design.


Personally, I quite enjoyed working on this project and designing what my website would look like. I think that having the reference images really helped with the concept planning and the mock-up turned out quite well. I knew that I wanted to make it modern and I believe that that’s what I achieved.