INTERACTIVE DESIGN:

Final Project - Single-Page Website

03.07.2024 - 10.08.2024 (WEEK 11-14)

Koh Xin Yee / 0363349 / Bachelor of Interactive Spatial Design (Hons)

Interactive Design

Final Project

Final Project 2: Creating a Single-Page Website

To do:

Topic Selection:

I wanted to do a website for a cafe.

The subject will be a cafe of a friend of mine, "Tiennielicious" (the cafe was already shut down due to some personal reasons). I chose this topic because I used to love the vibes of this cafe and thought of creating a minimalist design website for my final project.

Website Objectives:

attracting customers, promoting the café's menus, and facilitating easy contact

logo of the cafe

Content:

the content of the website is divided into 5 sections:

Hero Section
- a carousel slider with pictures of the cafe
- brief introduction to the café
- CTA button: "Explore Our Menu"
About Us
- opening hours
- history
Menu
- showcase of 3 of the most favourite specialities of the cafe: cakes, drinks, pies
- "see full menu" button
Contact Us
- Address, phone number, email.
- Social media links.
- Contact form for inquiries or reservations.
Footer
- Links to sections, terms of service, privacy policy.
- Social media icons.

Moodboard:

Wireframes:

I created a few wireframes for my website in figma, to better plan and visualise how my website layout should be, then only choose out the one which is visually appealing but simple and effective.

I try to arrange all the content in different ways, including the logo, headings, small text, and images. The text and images are represented by boxes of different sizes, while logos are represent by circles.

I personally like the third wireframe the most, as it feels less boring but is simple and neat at the same time.

Feedback: (03/07/2024)

Mr. Shamsul suggested that I should find another typeface more suitable for the heading. The current choice is not that ideal.
Also, not to include so many colours in the colour pallete, just one primary colour and a secondary colour, and another ascent colour which is to show big contrast.
Mr. Shamsul also provided some cafe website as references for me, such as Kenny Hills and Paris Baguette.
The main objective of the website should be to allow the users to look at the menu and the price of the food served there, then they can decide whether to visit the cafe or not, so the menu section is important. Showcasing 3 of the specialities in the cafe should be fine.
For the booking and reservations function, I planned to include it in the contact form, Mr. Shamsul is okay with that.
I'm planning to choose the third wireframe for my design layout, and Mr. Shamsul agrees with it.

Final Moodboard:

According to Mr Shamsul's feedback, I edited my moodboard to come out with the final version.

I cut down the choices of colours to 3, 1 primary, 1 secondary and 1 ascent colour. The fourth one in the list is the colour of the original cafe logo.

how I plan for the design to look like:

References:

BeCafe 2 – BeTheme (muffingroup.com)

Kenny Hills Bakers

Paris Baguette - Your neighborhood bakery café

Prototype:

Without further ado, I started prototyping the website in figma after getting enough ideas and inspirations from bunch of references.

As planned, the prototype contains a navigation bar and a footer, and 4 main sections in between.

Layout:

Navigation bar (home, about us, logo, menu, contact us)
Hero section with CTA button (name of cafe, short and catchy subtitle, "Explore Our Menu" button)
About Us section (history & description of the cafe) + opening hours
Menu section (3 sections with main title, name of dish, description and price: cake slices, pies&tarts, beverages + "See Full Menu" button)
Contact Us section (address, phone no., email, social medias, contact form with submit button)
Footer (logo, cafe name, nav bar)

As the menu section should be the main function and objective of the website, it takes up most space in the layout design.

The pretty images I'm using are all downloaded from the cafe's social media posts. I intentionally pick those which are visually appealling and fits the visual design scheme and my moodboard.

I tried to avoid placing containers here and there unorderedly, after learning lessons from the previous project, when I had a hard time arranging the container in HTML code.

Feedback: (04/07/2024)

Mr. Shamsul likes the overall design and completeness of the website.
"Explore Our Menu" call-to-action button should be moved up to the hero section, otherwise wouldn't be able to see the CTA in full screen mode
dashes at the "See Full Menu" text is unnecessary
the left right arrow should be proper, 90° angle, don't use the < > which actually stands for more than less than
change the font weight of the price, so that the visual hierachy is more clear
no need to code two more pages for terms and privacy policy, only a single page website will do

before

after

before

after

before

after

Progress:

I first started coding without using bootstrap, as I'm not familiar with it and still not sure if I could handle it.

But it turns out to be harder to achieve it without using bootstrap, as I have to take care of a lot of things, including the responsive design which always bother me

So I have no choice but to learn how to code bootstrap. It seems hard in the beginning, I was struggling to figure out how it works, as it is somewhat like a premade template which I am suppose to find the style I wanted from the template, then insert them into the code, then only style them with CSS.

But no regrets, after figuring the concept out, it is far more easier than I thought, and my CSS code no longer look so messy .

1. head element:

At the <head> element in my html, I inserted the embeded fonts link from Google Fonts, the Bootstrap CSS and Custom CSS link.

Initially I was using bootstrap v4.3(?), and I dunno why 😂. However, after translating the whole page into HTML, I find that I can't stick the nav bar to the top no matter what, so I changed to version 5.3 which solved the problem immediately. Of course I had to change some of the bootstrap CSS, to keep the design in form.

2. navbar:

Still, there are some restrains where I couldn't use bootstrap to achieve my initial prototype design, such like the nav bar. I initially planned to center the logo, and place the section names at two sides, but there's no bootstrap style which can fufill this, so I changed the design to a more simplified one.

One thing I'm happy about using bootstrap is that it will automatically help to handle the responsive design, so I no longer need to scratch my head to figure out how to make my nav bar responsive.

3. home section:

The home section ate up some time of mine, as mentioned above, I can't seem to achieve the original design in my prototype with bootstrap, so I changed it. I removed the circle image design and made it a full screen carousel with the help of bootstrap. And it was easier than I thought.

Initially I was using the images posted on the cafe's social media, they are all in 1:1 size, and the resolution is not quite high enough when it comes to full screen. Therefore I decided to change all the carousel pictures into images I found on online royalty free image platforms.

4. about section:

The about section is pretty straight forward, nothing much to worry about.

5. menu section:

For the menu section, I use grid system in bootstrap, "col-md-6" which can easily seperate into two columns, one side for the image, another side for the menu.

I also added some hover effects for the image and the menu title text.

6. contact section:

The contact section is quite easy as I only needed to focus on building a form for the customers to fill in. I didn't want the section to look so compact so I only included two social media logos, which when clicked on, will be directed to respective social media pages. But since it's unnecessary, it will scroll back to the hero section, the same goes to the submit button.

7. footer:

Last but not least is the footer.

Outcome:

Netlify link: https://tiennielicious-cafe.netlify.app/

Feedback: (24/7/2024)

overall design is clean and nice
would not encourage to change the boldness of the font in the nav bar when the text is hovered over, as the text would be shifted, just change the colour will do
consider to change the font of the button at hero section as it is a little unreadable
button in contact section should have the same design as the button at the hero section
other than that is perfect

before