Fitness Bud Web
Web Design & Development
Overview
After designing a workout app, I wanted to design and develop a promotional website for the mobile application. This website would exhibit the main features of the app and how it functions. I made my own research on how to make the screen size responsive (web, tablet, and mobile).
My Contributions
Designed and developed the whole website.
Tools used: Adobe XD, Adobe Illustrator, Html, CSS, Javascript, GitHub
Timeline: 2 weeks
Wireframe
Before starting to develop the website, I had to design the basic structure of each page. This would help me visualize how the promotional website could look like. In this low-fidelity wireframe, I tried to keep the design clean and simple.
Low fidelity wireframe assets from Hand-drawn UI Kit by Impekable.
Visual Guide
Following the mobile app's style guide, the website should also reflect the sports theme throughout the web.
Prototype
After finalizing the style guide and website structure, it was time to build a high-fidelity wireframe that will reflect how the website will look like. With the help of Adobe Xd, I was able to design the website and build a prototype (with minimal interaction).
HTML website
With the design process done, I decided to start developing the website in HTML, CSS. I used a lot of references from w3schools to learn about responsive web designs. Later on, after developing the website according to the design, I also wanted to explore JavaScript animations (GreenSock).