Heel Holland Bakt
HTML, CSS, JavaScript
Overview
Timeline: September 2019 - November 2019
Client: HvA (Heel Holland bakt)
My role: Frontend Developer
Skills: Front-end, user-testing
Tools: HTML, CSS and JavaScript
Device: Responsive (phone, tablet, laptop)
1. Project Summary
During this course we had to use code to support the wireframes that students from a different course had made (which is a bit reversed from my usual work as a UX/UI designer). The wireframes are of the website of the Dutch "Bake Off" and have a few functions. By following these designs and analyzing the website and branding I tried to bring the wireframes alive.
The main goal of this course was for the code to work multiple devices.
2. Functions
The wireframes were following the concept of a website with recipes, so I worked according to those. The scenario the user follows here is that of logging in (or creating an account), browsing through recipes, filtering through preferences and downloading recipes for offline use. So the main functions that I implemented are:
-
A login
-
Filtering
-
Downloading recipes
What does it look like?
Function 3: The download button has not been activated yet
Function 3: The recipe has been downloaded
3. Deliverables
At the end of the course I was able to deliver code that works according to responsive web design. The most important functions here are logging in, downloading recipes. It was important to make a responsive design so I made sure that the website would adapt easily to different device sizes. The website is designed and coded from a 'mobile first' approach.
As seen in this overview from Github the website is mostly HTML and CSS based with some hints of JavaScript to run some of the functions.
The different devices in perspective
The image below shows the devices in order: desktop, tablet and phone and gives a perspective of the different layout per device
