Having an eye-catching and functional website is an important component of running a successful business. In Activbody's case the current website layout was functional, but it was decidedly out of date. There were large portions of the site that had a poor usage of space, the colours and styling were rather drab and when looked at in totality the website didn't really convey a business that was producing exciting, cutting edge fitness products and services. I believe that I provided a reimagined, reinvigorated design that would provide Activbody with the kind of differentiation it would need to compete in such a highly competitive market.
(*Note: This project was a brief, personal html/css project made before their actual redesign, it's by no means associated with Activbody, and isn't a complete representation of my final "product", so to speak)
+ INITIAL DESIGN STAGES
I wanted to keep the original colours of Activbody as I thought they were still pleasing to the eye, but moving forward with the project I incorporated some slight variations that could be used in various circumstances such as drop down menus. In regards to everything else I wanted to move away from standard Arial fonts and towards more modern font choices. The inclusion of relevant stock photography and iconography was also important. I made a quick design system to cover these for reference.
Below is an example of the older website for reference. There was an even older version that I was referring to in the beginning of this article, unfortunately the WayBack Machine wasn't able to retrieve it for display purposes. As you can see even the reworked original design was rather spartan.
.
+ HOMEPAGE LAYOUT & RESPONSIVE DESIGN
The homepage was where I wanted prospective buyers / visitors to get the vast majority of relevant information. In a way it's technically a splash page, but it needed to further convey what Activbody is, who it's for and why it's a worthy product/service. As such I split my information across 3 major groups that Activbody largely caters to; the fitness community, professional trainers and rehab workers and/or recipients. Each of these blocks would ideally have one (or more) paragraphs. These would be responsive so as to easily fit onto mobile devices, stacking on top of one another. In regards to graphics I went for a more minimalist design overall, basing my work on other competing websites / services at the time.
Here you can see a prototype of the responsive design in action (local files only**). This would need to be adjusted later on to have better margins, but I think it gets the concept across.
.
+ INTERNAL LAYOUT
The internal website layout is fairly straight-forward, it has the same stacking responsive design as the splash page with some outgoing links to their ecommerce page. In hindsight I would have used much better graphics for these pages, but at the time I was limited to using square-shaped imagery/graphics for the sake of ease and simplicity on the coding end of things. This was a good learning exercise, it showed me what was realistically possible with my current html/css skills and what simply wasn't.
