Interactive Design - Final Project: Design, Exploration & Application

29.06.2024 - 03.08.2024 / Week 10 - Week 15

Teo Mei Hui / 0358315

Interactive Design / Bachelors of Design (Honors) in Creative Media / Taylor's University

Final Project: Design, Exploration & Application

---

CONTENTS

1. Instructions
2. Task
3. Feedback
4. Reflections

---

INSTRUCTIONS

---

TASK

Final Project - Design, Exploration & Application

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.

Process

Idea

I decided to create a website for a florist shop, because I think it would look very nice.

References

Figure 1.1 References

Sketches

I made 5 sketches for my website design. The layouts are roughly the same, just that they have different styles. Out of 5 sketches, Mr. Shamsul recommended me to go with either sketch #1 or sketch #3.

Figure 1.2 Sketches

Prototype

I made the prototype according to sketch #1. There are six sections to my website, consisting of hero section, selling-points, best-sellers, services, about and contacts. At first I decided to go with a purple color theme, but Mr. Shamsul suggested me to imitate the color theme of the florist shop's actual website, since it looks nicer. I agreed with the suggestion as well because there is more contrast and it matches with the images better.

Figure 1.3 Initial prototype & final prototype

Figure 1.4 Final Prototype

Building the Website

Set Up

First, I created the index.html and css style sheet. I also included the link for bootstrap, however I ended up using it minimally as I found it confusing to use and style. I mainly used it for the icons. Then, I embedded my chosen fonts.

Figure 2.1 Setting up html, css and bootstrap

Navigation Bar

I struggled with the navigation bar because I had to make it a responsive hamburger menu when the screen is in other sizes. Fortunately, I was able to find tutorials online, although there were many that included Javascript which I couldn't use. For navigation bar to show up at normal-sized screen, the label is set as display:none;.

 

Figure 2.2 Navigation bar html & css

Hero Section

For the hero section, I initially set the position as absolute for the image. However, I quickly realized it would be hard to make it responsive, so i changed it to fit in a div container.

Figure 2.3 Hero section html & css

Figure 2.4 Navigation bar & hero section

Selling-point Section

The selling-point section is just 3 div containers, but the middle one is set to a different class to add borders, so that it would look like there is a dividing line between them.

 

Figure 2.5 Selling-points html & css

Figure 2.6 Selling points section

Best-seller Section

For this section, I created 3 cards using div containers and added hover effect to them. I spent longer on this section because to adjust the pictures of the flowers, since I wanted them to be slanted like the hero image. However, it would cause them to be off-centered, so I had to adjust the original image. The width of the images are set as 100% so that it is responsive.

Figure 2.7 Best-seller cards html & css

Figure 2.8 Best-sellers cards

Services Section

Here I also used div containers then set them as display: flex; and the width of the images are set as 100% so that it is responsive.

Figure 2.9 Services section html & css

Figure 2.10 Services section

About Section

Div containers and display: flex; is also used here.

Figure 2.11 About section html & css

Figure 2.12 About section

Contact Section

For contacts section, I made a form using a template from previous exercise.

Figure 2.13 Contact form html

 

 

Figure 2.14 Contact form css

Figure 2.15 Contact section

Buttons

The buttons are set as the same style and hover effects.

Figure 2.16 Buttons css

Footer

For the footer, I used the icons from bootstrap, and I also embedded the Google Maps location of the actual store.

Figure 2.17 Footer html & css

Figure 2.18 Footer

Media Responsiveness

Lastly, to make the website responsive, I set all the flex-direction into columns. I also made the navigation bar into a hamburger menu at smaller screen size.

Figure 2.19 Media query css

Figure 2.20 Responsive web design

Final Link

https://jdfloral-bymeihui.netlify.app/

---

FEEDBACK

Week 10

• Try to find an actual floral shop that exists,.
• There is potential in the future maybe you can sell to them.

Week 11

• Sketch 1 and Sketch 3 looks nice. Go with either one of them.

Week 12

• The prototype is a bit messy, try to make it feel neat like your reference website.
• There needs to be more alignment.
• Add a contact form as the way for customers to make order.

Week 13

• Maybe try a similar color scheme to the existing website of the florist store, it looks nicer.
• Can embed the location to the florist store.
• Maybe you can direct them to the actual florist store website when they press order buttons (up to you, just a suggestion).
• You can start with the HTML and CSS.

---

REFLECTIONS

Experience
Through this task, I was able to put my HTML and CSS skills accumulated through this semester to use. This task tested my understanding on how the codes work. Fortunately, it was not as difficult as I thought which means that I have mastered the basics. I also learned how to design decent website layouts and sections that serve their purposes effectively in this task.

Observation
There were still frustrating times where I had to spend really long to find out why the code was not working, just for it to be a single small mistake. It definitely requires us to be very attentive to details. Through my practice from the previous task, I find myself struggling a lot less for this task. I also realized the importance of ease of navigation and good visual design for a website's overall user experience.

Findings

Through Mr. Shamsul's feedback, I was able to obtain valuable insights as well. For instance, it is important to make our website neat and aligned. Besides that, the effective choose of color themes should also be considered every time we build a website. When designing the website and adding interactive elements, always think about the functionality and necessity of it, and how it contributes to the overall user experience.