Website
Focus Fuel is a concept that was inspired by the busy and non-stop lifestyle of BCIT’s new media students. The demand for caffeinated beverages such as coffee and energy drinks are high in environment where students wake up early and sleep late in order to meet the deadlines set out by the intensive program.
Process
My approach to developing and designing the website came down to wanting it to be simple yet effective. A landing page with our main product would grab the users attention at the same time allowing them to learn more about product and the company story through a CTA button next to the hero banner. All this was done in a short period of time with the help of bootstrap framework.
Information Archtecture -Low Fidelity Wireframe
I developed the wireframe on the Adobe XD. The layout was clear to me after having low fidelity wireframe. I was able to get the sense of the components, where items and contents are to be placed on the website.
User Interface - Color Guide
The colors of the project was chosen by the client. They wanted a green color with white accent. I created a style guide to display the feel and the look of the project to the client. By having the style guide, the design of the website stayed consistent.
User Interface - High Fidelity
The design of the website mockup help the team to see the direction of the website and how it will display on the live site.
Final - Website
The final website front end of the website is completed. The client is impressed with the look and feel of the website. They like the simplicity of it.