INTERACTIVE DESIGN: FINAL PROJECT _WEBSITES REDESIGN DEVELOPMENT

 

 

|  24/09/24-24/12/24
||  Sun Jia Yi / 0370449
||  Interactive Design / Bachelor of Design (Hons) in Creative Media
||  Project 2 / Website Redesign Development

---

TABLE OF CONTENTS

1. Instructions

2. Feedback 

3. Reflection 

---

INSTRUCTIONS

This is the Module Information Booklet for this Module: 

Project 3: Website Redesign Development

• Development process 
• Challenges 
• Interactive Element 
• Testing 
• Final Submission 

Development process:

I started by making five HTML files using unique CSS stylesheets. The home page, comments page, genre page, charts page, and contact page are the five primary pages that were developed.

The horizontal scrolling of the card content was the most difficult aspect of the entire production process. This required intricate Javascript and CSS coding. I utilized a multi-column slider framework to do this.

Here is the tutorial of the multi-column

Challenges:

The difficulties I encountered during the development phase are listed here, along with the corresponding fixes:

1. Layout and Structure Challenges

Responsive Design

Problem: 

• The Homepage (Frame 1): The homepage has a mix of horizontal and vertical sections (e.g., banners, "Best Seller" section, "Find Your Own Best Product"). Ensuring these sections adapt without breaking the layout requires careful planning.
• Product Pages (Frames 2-5): The grid layout showing product images and prices needs to dynamically adjust based on screen width (e.g., 2 products per row on mobile, 4 on desktop).
• Contact Form (Frame 6): Maintaining the alignment and usability of the form on smaller screens can be difficult.

Solution:

• Use CSS Flexbox or CSS Grid to define layouts and create responsive structures.
• Apply media queries in CSS for specific breakpoints (e.g., @media screen and (max-width: 768px) for tablets).

2. Navigation Challenges

Header and Menu

Problem:

• Implementing a consistent navigation bar that:
• Stays fixed at the top while scrolling.
• Works responsively (e.g., collapsible menu for smaller screens).

Solution:

• Use HTML <nav> tags with CSS for styling.
• Add JavaScript or a framework like Bootstrap for mobile navigation functionality (e.g., hamburger menu).

3. Dynamic Content Challenges

Sorting and Filtering (Frames 2, 4, 5)

Problem: 

• Implementing sorting and filtering functionality for products by price or categories.
• Users expect this to work dynamically, without reloading the page.
• Sorting options must update the displayed products in real-time.

Solution:

• Use JavaScript to capture user actions and re-render the product grid dynamically.
• Store product data in JSON format or fetch it from a server (if a backend is used).
• Example: Use the Array.sort() method in JavaScript to reorder products based on price.

4. Interactivity Challenges

Call-to-Actions and Animations (Frame 1)

Problem: 

• Buttons like "Take the Quiz" and "Shop the Gift Guide" need hover effects, smooth transitions, and event handling when clicked.

Solution:

• Use CSS for hover effects and animations (e.g., transition: all 0.3s ease-in-out;).
• Use JavaScript for handling button clicks (e.g., redirecting users to another page or loading content dynamically).
• Contact Form (Frame 6)

Problem:

• Form validation for fields like Name, Email, Phone Number, and Message. Ensuring the data is valid before submission can be challenging.

Solution:

• Use JavaScript for real-time validation.

5. Styling Challenges

Consistency Across Frames

Problem: 

• Maintaining consistent colors, fonts, and spacing throughout the site.
• Frames 1-5 include product cards with specific styles for images, names, and prices.
• The footer and header sections also need to align perfectly across all frames.
• Solution:
• Create a CSS variables file for global styles like colors and fonts.

Example:

:root {

    --primary-color: #add8e6; /* light blue */

    --font-family: 'Arial, sans-serif';

}

• Use CSS utility classes for margins, paddings, and typography (e.g., class="text-center").

Hover Effects

• Problem: Applying hover animations for product cards, buttons, and links consistently.
• Solution: Use CSS :hover pseudo-classes and @keyframes for animations.

6. Image and Media Handling

Image Optimization

Problem:

•  Loading product images (Frames 2-5) quickly without affecting performance.
• High-resolution images can slow down the page.

Solution:

• Use optimized image formats like WebP or compressed JPEGs.
• Backgrounds and Icons

Problem: 

• Background banners and icons must scale correctly on all devices.
• Solution: Use CSS background properties like background-size: cover; and background-position: center;

7. Testing and Debugging Challenges

Problem: 

• Cross-browser compatibility issues and bugs in layout or interactivity.
• Some CSS or JS features may behave differently in browsers like Chrome, Safari, or Edge.

Solution:

• Use browser developer tools for testing.
• Test the website on multiple devices and browsers.

Interactive Elements

The website has been updated with a few interactive features to improve customer happiness and experience overall. 

Carousel 

The "<" and ">" buttons allow you to modify the three short-described photos that make up the home page carousel. 

carousel

Price Color change

Button 

Most of the buttons are customized to change color while hovering.

Button 

Textarea & Button 

In review and contact page, there is a textarea dedicated for review post and user's opinion. 

Demo Video / Testing 

                                                                    demo video_Desktop view 

Final Submission 

                                                      Screengrab of redesign website- Laneige website

Link to Redesign Website- Laneige official Store

HTML/ CSS / Javascript 

Homepage_Index.html

                                                             Homepage_index.css

                                                                  Homepage_script.js

                                                                  Bestseller Page_bestseller.html

                                                       Bestseller Page_bestseller.css

 Bestseller Page_bestseller-dropdown.js

                                                      NewArrivals Page_newarrivals.html

                                                   New arrivals Page_newarrivals.css

                                                         Bestseller Page_bestseller-dropdown.js

                                                            MakeUp Page_makeup.html

                                                                  MakeUp Page_makeup.css

 

                                                             MakeUp Page_makeup_dropdown.js

                                                                Contact page_contact.html

---

REFLECTIONS

This project has been both enjoyable and challenging! The process of developing the website's coding language has numerous ups and downs. Even though I could spend hours stuck on what seems to be a simple problem, it is really satisfying to get over such challenges. Learning, trying, and creating something from scratch may be exciting, despite the fact that it can occasionally be a little unpleasant.I think that my ability to solve problems has significantly improved as a result of this project. I've noticed that I'm less likely to freak out when faced with difficulties. Additionally, I may use a variety of approaches and techniques to deal with the issues. Overall, I'm happy with how the project turned out. Although there is still a lot of room for improvement, I consider this to be a designer.