INTERACTIVE DESIGN FINAL PROJECT: DESIGN, EXPLORATION & APPLICATION

HTML and CSS Framework if you want to develop a website with less coding of CSS. It's not a template but a framework. But still need to customize the CSS so that it doesn't look too plain.

https://getbootstrap.com/docs/5.3/getting-started/introduction/

INSTRUCTIONS

TASKS

FINAL PROJECT: SINGLE PAGE LIFESTYLE MICROSITE

Project Overview:

In this web design project, you will create a single-page website dedicated to your favorite topic. This project will help you develop your web design and development skills while allowing you to showcase your passion for the topic of your choice.

Project Requirements:

Artist Selection: Choose your favorite topic as the subject of your website. Ensure you are genuinely interested in the topic, as this will help you create a more engaging website. Decide the site's goal to ensure that the site has clear content.

Content:

Your content should have at least 5 sections that explain the topic of interest. It should engaging and significant to the topic. You should also include one CTA button that reflects the content.

Design Elements:

Choose a color scheme and fonts that reflect the artist's style or your taste.
Ensure a visually appealing layout with a balanced use of text and multimedia.
Create a responsive design that adapts to different screen sizes (mobile-friendly).

Navigation: Implement smooth scrolling navigation or a simple menu that allows users to jump to different sections of the page.

Interactivity: Consider adding interactive elements such as image sliders, hover effects, or lightboxes for multimedia content.

FINAL PROJECT IDEA: WEBPAGE FOR TASTY CHICKEN RICE RESTAURANT

Purpose/Why?
To engage more audiences and sales / let more people know more about this restaurant

Things to consider to be included:

Navigation Bar: Home, About us, Menu, Contact us
Home page
-Hero Section: Contact us now/Locate us
About (Since 2001, Short description of Tasty Chicken Rice Restaurant /Values)
Highlights: Featured/Favourited dishes (about 3 boxes)
Cert (optional)
Order now! Available Ordering Platforms: GrabFood, ShopeeFood, FoodPanda
Footer
-Contact number, Location, Operating Hours

PROCESS

On Week 11, we had to create 5 sketches of layout for our final task. We need to think of the content, and find inspirations of webpage layout on Pinterest, refer to it for our final webpage.

VISUAL REFERENCES

Fig T3.1 Visual References

FONT SELECTION:

Here I searched for the fonts that I find may be suitable for my webpage on Google Fonts.

1. Lobster 2. Playfair Display-Bold 700 3. Playfair Display-SemiBold 600 4. Raleway

Fig T3.2 Font Selection for Heading

1. Roboto 2. Open Sans

Fig T3.3 Font Selection for body text

Final chosen fonts:

Heading= Playfair Display semi bold 600

SubHeader= Raleway

Body Text= Open Sans

SKETCHES

Fig T3.1 Sketches for webpage

Since we didn't get enough feedback due to lack of time after class and incomplete ideas. Two of my classmates and I scheduled a zoom meeting with Mr. Shamsul on Friday. Then, I got the feedback for my prepared sketches, font and colour selection.

PROTOTYPE

After sketching the layout, we started making the prototype for our single-page web. Taking into account the feedback from Mr. Shamsul, I began with the hero section, featuring a CTA button directing viewers to our location with an embedded map. The other sections included Customer Favourites, About Us, and Contact Information. I chose not to include the carousel, as it wasn’t relevant to my restaurant, which doesn’t offer set lunches or promotions. Although a carousel could be useful for this exercise, I wanted the design to be more realistic.

In the second prototype, I decided to incorporate videos to showcase reviews. I extended the content by adding Instagram reels featuring our shop and feedback from customers who tried our dishes. These honest reviews add authenticity and interest to the website, providing viewers with genuine insights into our offerings. Description and ratings of the top dishes were included. I also included the testamonials in screenshot(not for the actual). I was not very sure for the contact section beside the embeded map, it was obvious that part was not very eye-catching.

For the final prototype, I used a timeline to narrate the restaurant's history in the About section. To maintain simplicity, contact information was organized into a clean, accessible bar. I opted not to include social media links, as the restaurant’s accounts are inactive and unkempt. Instead, I added a dedicated contact section with a form for inquiries.

Fig T3.2 Prototype in Figma

WEBSITE DEVELOPMENT

I replaced the Bootstrap HTML code and started with the navigation bar, followed by the hero section. I worked on the HTML and CSS simultaneously to ensure the outcome matched my expectations, rather than finishing the HTML code before reviewing the design.

Fig T3.3 Process

For the navigation bar, I utilized Bootstrap code and made modifications based on previous exercises. I customized the items by adjusting the font color, as well as the hover and visited states, to align with the design requirements.

Fig T3.4 Navigation Bar (HTML & CSS)

Here's the Hero section includes a CTA button that directs users to the Location section.

Fig T3.5 Hero Section (HTML & CSS)

For the Menu section, I used Bootstrap HTML code and incorporated a star rating. While searching for chicken rice images on Google proved unfruitful, I found suitable images on the GrabFood app/website, which matched the desired background and overall look. Additionally, I used ChatGPT to standardize the descriptions, ensuring consistent card heights across the section.

Fig T3.6 Hero Section (HTML & CSS)

In the About section, I titled it "Our Story" to attract more attention from viewers. The description was crafted from the newspaper to ensure accuracy and authenticity.

Fig T3.7 About Section (HTML & CSS)

I explored various tutorials for creating testimonials in HTML and CSS and found a website offering a sliding review feature. However, it’s on a trial plan and may become inactive after 7 days unless I opt for a paid subscription. 😓

Fig T3.8 Reviews Section (HTML & CSS)

Fig T3.9 Responsive design of Reviews section in screen recording

In the Popular Reviews section, I organized the content into three columns and embedded the Instagram reel links for easy access and viewing.

Fig T3.10 Overview of the popular reviews section

Fig T3.11 View before publishing

Fig T3.12 Responsive design of Popular Reviews section in screen recording

Here's where the CTA button brings users to, the location section.

Fig T3.13 Location section

Fig T3.14 Responsive design of Location section in screen recording

In the Contact section, I included a CTA button linking to the WhatsApp business chat. Additionally, I added the phone number and links to food delivery apps/websites in the navigation bar.

Fig T3.15 Contact section

Fig T3.16 Responsive design of Contact section in screen recording

After everything was completed, I uploaded the file to Netlify and got my first link. Nevertheless, there was one problem, the layout was messy on the mobile version. So, I needed to make more edits on the CSS file. (but i still cant figure out the code for the testimonial slider)

Fig T3.17 Before adjustments on the CSS file

Fig T3.18 CSS on mobile version

Fig T3.19 Outcome on mobile

As mentioned earlier, the google reviews appeared like that in the mobile version, because I couldn't figure out on how to fix the issue. As for the logo, I realize it seems to appear a little distorted although it seemed fine on other(not all but most) phone devices. But other than these minor problems, the website was responsive and smooth.

Fig T3.20 Updated version on mobile

After checking the mobile version again, the arrangement of the google reviews appeared fine.

SECTIONS

Section 1: Hero Section
The hero section prominently features the restaurant's name, 'Tasty Chicken Rice Restaurant,' along with a compelling CTA button labeled 'Locate Us.' This button directs users to the location section, making it easy for them to find us.

Section 2: Menu Section
Titled 'All Time Favourites,' this section showcases TCR's top dishes, each accompanied by a mouthwatering description. It gives visitors a glimpse of our most popular and beloved menu items.

Section 3: About Section
This section narrates the story and history of Tasty Chicken Rice Restaurant in a timeline format. It provides a detailed background of our journey, highlighting key milestones and achievements over the years.

Section 4: Review Section
Here, testimonials from Google reviews are displayed. These reviews can be slid through, allowing visitors to read various customer experiences and feedback, enhancing credibility and trust.

Section 5: Review Section - Food Reviewers
This section features Instagram reels from food reviewers who have visited our restaurant and shared their honest reviews. These reels not only promote our business but also give exposure to the reviewers' accounts, fostering a mutually beneficial relationship.

Section 6: Location Section
An embedded Google map is placed here, providing an interactive way for visitors to find our exact location. This makes it convenient for customers to navigate to our restaurant.

Section 7: Contact Section
This section includes essential contact information such as our phone number and a CTA button that links directly to a WhatsApp chat. It also lists other ways to order, including delivery apps and websites like GrabFood, FoodPanda, and ShopeeFood.

Section 8: Subscription Section
A form is available here for visitors to enter their name and email address. This allows us to build a mailing list for updates, promotions, and newsletters.

Footer
The footer includes additional navigation links, social media icons, and any other necessary information to help users easily explore the website.

FINAL WEBBAGE DESIGN

Final Single page website here !

Fig T3.21 Final webpage design for Tasty Chicken Rice

FEEDBACK

WEEK 10

no aircond, changed to online meeting

General Feedback

view page source to complete the coding

WEEK 11

General Feedback

must show progress
feedback is crucial
must have 5 sketches
complete prototype after confirmation of layout

Specific Feedback

select between nail art and restaurant
'choose the nail art one since you girls like these kind of things'
after further consultation: 'do the restaurant one since its more meaningful'
CTA button to restaurant location(embed google maps/use waze icon)
use back same colour theme as the restaurant(red black white)
people would want to see the menu first so show menu first
include testimony(about 3 reviews from customers)
secondary CTA button: whatsapp to place order, when there's no booking option
can consider adding promotion/set/carousel at hero section
look for pictures from websites or recipes from website and screenshot instead of Pinterest, cz the design is just for concept, layout doesn't follow web standards
can use thhe web images as design inspirations for visual reference
top favourite food/best sellers for content is a good choice
no need extra 'check out more' below the menu
choose less decorative typeface, go with playfair display semi bold 600 for header
use raleway for subheader
body text(open sans/roboto) are both good choice
go with sketch 1
can remove the delivery platform section if don't know what to include inside
in one section, put contact info and other half is the google map (left and right)
complete prototype by next week

WEEK 12

General Feedback

consider bootstrap
body font size: 1em
bright colours huge headline

Specific Feedback

make image darker by multiply or overlay in PS, to make the text stand out
more negative space
add testimony below history at about section
add image of shop interior
write about owner
nav end(right)
add form for details
neater layout
icons or whatsapp, social media(fake)
at the card section include description and star rating
embed maps--share <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d9571.92515633186!2d101.59140309816993!3d3.154028452761062!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31cc4f1fe3d528f5%3A0xd0d14f373da7e2d!2sTasty%20Chicken%20Rice%20Restaurant!5e0!3m2!1sen!2smy!4v1720581019579!5m2!1sen!2smy" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

WEEK 13

General Feedback

no feedback given

Specific Feedback

make image darker by multiply or overlay in PS, to make the text stand out
can create a timeline at the about section with short description of what happened back then to now instead of having just one paragraph of description
refer to the link of creating testimony, can find examples there and find your style
can’t use screenshot for testimony, use div column
maybe can use the interior image as the background of the title for contact us section, make it dark like the hero section
use found logo
the reels in the testimony section together with the reviews
“what people/public say about us” “popular reviews” but make it more catchy
social medias— because we don’t have active accounts then can consider the reels that promoted the restaurant
can embed reels but it’ll show preview only but it’s fine
include the indicators/info that tells this is from instagram, caption at the bottom so people can follow their accounts while promoting their account and my own restaurant
contact form under socials then footer
deadline extended to week 16
can use bootstrap cuz they already help in building the phone layout

WEEK 14

General Feedback

deadline changed to Week 15😨

Specific Feedback

WEEK 15

submission on 03/08/2024.

REFLECTION

Experience

This final task was indeed meaningful. Settling on this topic provided a fantastic opportunity to apply the skills I learned throughout the exercises, culminating in the creation of a single-page website for my family business. Although the current version may not be ready for actual use, it served as an excellent practice run and might eventually evolve into a fully functional website for my dad's restaurant. Despite not being highly proficient in HTML and CSS coding yet, the process of designing and developing the layout was both rewarding and challenging. It pushed me to think critically and creatively to achieve the desired outcome. The outcome of the website was responsive on desktop, however, the mobile version still requires lots of work. This project has been an invaluable learning experience, enhancing my understanding of web design and giving me a glimpse of what it takes to bring a digital vision to life.

Observation

Throughout this project, I observed the critical importance of user experience (UX) in web design. Ensuring the website was user-friendly and intuitive involved careful attention to layout, navigation, and aesthetics. Incorporating feedback from Mr. Shamsul greatly improved the prototype, especially by adding relevant content like videos and prioritizing key sections. The challenge of coding with HTML and CSS enhanced my problem-solving skills and deepened my understanding of web development. Balancing visual appeal with functionality was essential, as I aimed to create a visually attractive yet highly functional website. This project underscored the value of responsive design and the need to adapt to various devices, ultimately providing a comprehensive learning experience in web design.

Findings

Throughout the process of creating the single-page website, I found that effective web design requires a balance between aesthetic appeal and functionality. User feedback, especially from Mr. Shamsul, was invaluable in refining the layout and content, highlighting the importance of iterative design and responsiveness to suggestions. I discovered that including multimedia elements, such as videos and interactive maps, significantly enhances user engagement and provides a richer experience. Additionally, I learned that simplicity and relevance in content selection are crucial for maintaining user interest and ensuring the website serves its intended purpose. The project also emphasized the importance of responsive design to accommodate various devices, enhancing accessibility for a broader audience. Overall, these findings underscore the multifaceted nature of web development and the importance of continuous learning and adaptation.

FURTHER READING

https://webflow.com/blog/testimonials-on-website

This website(blog) was recommended by Mr Shamsul, this blog provides various designs of the testimonials. He asked me to refer to this since I had to include testimonials in my website. I got a better idea and got to proceed with my HTML and CSS coding.

QUICK LINKS

EXERCISES: WEB ANALYSIS & REPLICATE A DESIGN

TASK 1: PROTOTYPE DESIGN

TASK 2: WORKING WEB PAGE

FINAL PROJECT: DESIGN, EXPLORATION & APPLICATION

FINAL COMPILATION & REFLECTION