Design for the Web 1 Final: Microsite Case Study
This website is for anybody from a bodybuilder to a brand new gym goer. Our website hopes to branch out everyone's knowledge on correct form when they are executing their own workouts at home and at the gym. Correct form leads to fast results that we hope helps to improve motivation and determination in each and every client.
To exemplify the individuals that could be using this website I created two fake personas shown below. These two gentlemen seek help in my website because they have been avoiding the gym. Both of these personas hold the same goal for getting themselves on this website, getting in shape. They share the same qualities in minimal activity day to day and look to improve their exterior look. But these aren't the only reason someone might stubble upon this website. There is quite a broader audience. This is because everyone and anyone can learn something new. There is always room to grow even if you have been working out for years.
During this process I learned that I wanted to target specific parts of the body. In doing so the user is able to categorize workouts into muscle groups to make learning more cohesive. At first I thought of doing a design that the majority of workout websites show; Endless exercises to do with a video alongside to help the viewer visualize the task at hand. I wanted to put an importance on the area that is being exercised because over the past 3 years at the gym I have realized the significance of mind to muscle connection. Yes, people can look at a video and copy the movement with ease. However, is it being done properly? With simple form tips and the constant reminder to think about the muscle you are working, seeing results in your physical as well as mental health will come in no time.
In my wireframes I looked to create geometric shapes. I felt like these forms emphasized the structure brought with the information in the website.
In order to transform my wireframes into designs a color palette needed to be chosen. As stated before the harsh lines of the geometry brought a sense of structure but I also wanted the website to not be a bore. After all, working out should be something to look forward to. Therefore I went for a vibrant color palette to balance the construction of the website.
I definitely learned that I was over shooting when it came to my homepage. Being a first time coder I got ahead of myself therefore the following pages, upper bod, lower bod, and not just form, are much more simplistic.
As I was building out my ideas in GitHub I realized that this would not be as easy as moving, resizing, and creating on Adobe Illustrator like I was used to. As time went on I began to think of my workspace as a grid. This allowed me to figure out what should be grouped together in divs and sections. One thing that I struggled with and still can not quite wrap my head around is the position CSS.
