Healthy Life Fitness

Sketches

Style Tile

Wireframes

Wireframe for the front page of Healthy Life Fitness.

Wireframe for the workout page of Healthy Life Fitness.

Wireframe for the music page of Healthy Life Fitness.

Wireframe for the food page of Healthy Life Fitness.

Wireframe for the calendar page of Healthy Life Fitness.

Version 1

Screenshot of the initial version of the food page.

Screenshot of the initial version of the calendar page.

Screenshot of the initial version of the palylist page.

Screenshot of the initial version of the workout page.

Version 2

Screenshot of the second version of the top of the front page.

Screenshot of the second version of the food page.

Screenshot of the second version of the playlist page.

Screenshot of the second version of the calendar.

Screenshot of the second version of the workout page.

Final Version

Screenshot of the top of the playlist page.

Screenshot of the top of the work out page.

Mockup

This website was created using Bootstrap 5, HTML, and CSS. The goal of this project is to create a realistic site based on the provided name, Healthy Life Fitness. This site is designed to be a one stop site for a person who wants easy access to several aspects of health. Different pages were created to reflect different health related focuses; such as workout ideas, ready made playlists to listen to, nutritious food options, and a simple health tracker.

The logo is a buff apple with a bite out of it that brings to mind the adage “an apple a day keeps the doctor away.” Pops of red are included throughout the site to invoke the high energy needed for exercising. Images of the various foods or exercises are shown in their respective pages as a reference and encouragement to the viewer.

Since exercising can be hard enough for people, this design is kept clean and simple so that it is easy and intuitive to use.