Overview
Time: 2022 May- June, 4 weeks Roles: Design, HTML, CSS, JS Team: Sooa Mo, Jenny Choi Tools: Figma, Visual Studio, Git
Objective
To help design and develop a website for companies to enhance their products using HTML, CSS, and minimal JS.
Deliverable
A website for Churros Company: ChuChu link
Approach
My partner and I decided to create a website for a food company focussing on the brand churros, which started as a food truck and then opened as a store. Keeping in line with the brand we came up with the name ChuChu.
screenshot of the first style guide
First Style guide: Initial Style Guide ChuChu, the brand of churros, that started as a churros food truck and opened the store.
Design
I researched the page flow through websites selling various drinks and foods, such as Starbucks and Tim Holton, and used Figma to share ideas.
Screenshot of the Figma
Initial chuchu menu page
I looked at the existing style guide but felt it needed to be improved. I decided to change the colours, images and codes but kept the existing font. This was done through Figma and discord. I always welcome feedback in order to improve my work and asked for feedback from my TA. It was felt that the initial menu did not show the price for the product title which I have now changed.
After chuchu menu page
Develop
To develop the website's menu page, cart page, payment processing pages and main navigation through HTML, CSS and JS.
screenshot of the menu page
detail page
carts page
checkout page
confirmation page
ChuChu Github website link: ChuChu Github
git contributor
We used Github's branch to code at the same time. However, since the CSS was shared, it was difficult to overlap the name of the class. To solve this problem, the name of the CSS was further subdivided.
Result
A website for Churros Company: ChuChu link
scrennshot of the main page
We successfully designed and developed the ChuChu website for the churros company. However, I felt that there were many unnecessary CSS codes in the main CSS, and it would have been better if we set the criteria for the name of the CSS class when it was first written.