25/06/2025 - 27/07/2025 (Week 10 – Week 14)
Gabriella Grace Christyanti / 0371915Interactive Design / Creative Media / School of Design
TABLE OF CONTENTS
1. Lectures
2. Instructions
3. Task
4. Feedback
5. Reflection
1. LECTURES
2. INSTRUCTIONS
3. TASK
Prototype
Before starting on the website code, we created a Figma prototype for the redesign of the Pop Mie website. This prototype serves as the visual foundation for the project. The overall design of the final code will closely follow this layout, but I plan to further refine and enhance the version built in Dreamweaver to ensure it is clean, polished, and optimized.
To begin the coding process, I created a new folder specifically for this final project and set up the site in Dreamweaver. This made managing and organizing the website files much easier. I also created a new folder dedicated to storing all the images used in the project.
Navigation Bar / Header
Before starting the homepage design, the first element I focused on was the header or navigation bar, which would be consistently used across all pages. I referred back to one of my older exercise files, based on a lesson from Sir Shamsul, to guide the basic structure of the nav bar. From there, I made several design adjustments to better match the updated look I created in Figma.
I positioned the navigation bar at the top, with the logo and buttons to help viewers go between pages are placed at the top left while the top right has the register and login buttons. I fixed the Pop Mie logo to the top left of the header and added a link to 'index.html' so that clicking the logo returns the user to the homepage. Lastly, I ensured all navigation links were active, have good hover effects and are properly connected to the other pages planned for the site.
Footer
Next, I moved on to designing the final section of the pages, the footer, which also would be consistently used across all pages. The footer is divided into four main columns: About Pop Mie, Products, Quick Links, and the company’s contact details and social media. Each column is clearly labeled with bold headings and contains relevant links for easy navigation. The company info section includes the Indofood logo, company address, a “Contact Us” button, and a call button with a hover effect for better user experience. Below the main content, I added a row with copyright details and important site links such as Privacy Policy, Cookies Policy, Website Terms, Conditions, and Accessibility Statement. I also included recognizable social media icons (Facebook, Instagram, Twitter, YouTube, Spotify) to enhance brand presence and encourage user engagement.
Home Page
The homepage of the Pop Mie website consists of three main sections, each designed to capture the brand's fun, bold identity while maintaining a clean and user-friendly layout.
Section 1: Hero Section
The first section is a full-width hero area that features a custom background image designed in Adobe Illustrator. Initially, I had the idea to make the color similar to the one pop mie uses in the official website. The original colors I've used still exists in the Figma version, but I ended up recoloring the colorful background to one that uses mostly blue to fit into my Pop Mie website color better.
At the center of this section is a bold red “ORDER NOW” button, which includes a smooth hover effect that changes the background to white and the text to red. Clicking the button navigates users directly to the product page (product.html). The section is designed to make a strong first impression and encourage immediate action.
Section 2: About Us Teaser
The second section gives a brief introduction to the Pop Mie brand. Set against a soft cream-colored background (#FFF7E3), it features left-aligned text alongside a rotating Pop Mie image. The title “About Pop Mie” is styled using a shimmering animated gradient to draw attention and convey a sense of motion and energy.
Below the text is a “LEARN MORE” button, which links to the full About page. The layout uses Flexbox for side-by-side alignment of the text and image, making the section visually balanced and easy to navigate.
Section 3: New Product Highlight
The third and final homepage section highlights a featured product: Pop Mie Tori Kara! This section uses a bold blue background overlaid with a linear black gradient for contrast and legibility. On the right, text content introduces the product with a strong headline and supporting description, while a "DISCOVER OUR PRODUCTS" button encourages users to explore more offerings. To create visual depth, I used ::after pseudo-elements for the overlay and carefully layered the content using z-index. The layout ensures responsiveness and aesthetic appeal across devices.
About Us Page
The About Us page of the Pop Mie website is designed to inform and inspire users by showcasing the brand’s history, values, mission, and career opportunities in a visually engaging and structured format. This page is divided into five main sections.
Hero Section
The page begins with a bold hero section featuring a large, gradient background in Pop Mie’s signature blue tones, layered with subtle radial highlights for added depth. The heading "ABOUT POP MIE" is styled with a playful font and a bright yellow color to catch attention, followed by a short italicized introduction paragraph that sets the tone for the rest of the page. I used text-shadow, z-index, and animated background overlays to create a layered visual effect without affecting readability.
Section 1: Our Story
This section introduces users to Pop Mie’s legacy, beginning in 1987. It includes two descriptive paragraphs that explain how the brand has evolved through innovation and cultural relevance, including partnerships with popular e-sports teams like EVOS and RRQ. A clean, light background and justified text ensure readability while maintaining visual balance.
Section 2: Our Values
Set against a dark blue gradient background, this section features a responsive grid layout that highlights four core brand values: Quality & Excellence, Innovation with Purpose, Customer Focus, and Sustainability. Each value is placed in a semi-transparent card with a soft blur effect and hover animations, adding interactivity and depth. The headings are styled with bold uppercase fonts in vibrant yellow to ensure contrast and hierarchy.
Section 3: Mission & Vision
Here, I used a two-column flexbox layout with gradient-styled cards to present Pop Mie’s mission and vision. Hover animations, rotating background effects, and bold yellow headlines enhance the user experience and emphasize the brand’s commitment to quality and innovation. The responsive design ensures accessibility across different screen sizes.
Section 4: Careers
The final section invites users to explore career opportunities with Pop Mie. A short paragraph outlines the brand’s work culture, followed by a call-to-action button styled in bold red with hover effects that change the background to cream and the text to red. This keeps the button consistent with the overall color palette while still drawing attention.
Product Page
The product page was developed to provide a comprehensive and engaging display for Pop Mie's diverse product line. The design prioritizes clear categorization and an immersive viewing experience for each product.
Hero Section
The hero section is purposely made similar with the hero section of the about us page for consistency, which meant it had all of the overall design choices from the color, backgroud to the font family.
Section 2: Product Category Buttons
A linear-gradient background with a soft box-shadow was implemented to define this section as a distinct interactive area. The category buttons themselves were styled with rounded corners and a primary blue color for the text on a neutral light gray background, framed by a blue border. This color scheme allows the buttons to stand out while maintaining a clean aesthetic. Upon clicking one of the category, the coding will help auto scroll to the right carousel.
Section 3: Product Carousels
The core of the product page functionality revolves around multiple, dedicated product carousels for "Newest Product," "Fried Pop Mie," and "Soup Pop Mie." For each product carousel, the carousel-bg-image associated with each item has a dominant visual, covering the entire background via object-fit: cover. To ensure readability of text captions while maintaining the visual impact of the product image, a linear-gradient overlay is applied. This overlay introduces a subtle darkening. Navigation between carousel items is using custom nav-button elements positioned at the sides. These buttons were designed with an interactive hover state that visually swaps a default icon with a hover-specific icon, providing clear cues for interaction. A "View Detail" button, consistently styled in bold red with white text, was colored that way for consistency with the other previous buttons.
Gallery Page
The Gallery page was designed to act as a visual archive, presenting Pop Mie's activities and content in a chronological and organized manner, encouraging users to explore the brand's history and current engagements.
Hero Section
Same with both Product page and About us page.
Section 2: Gallery Content Section
This primary content area of the gallery was designed to be easily navigable and visually appealing. A soft cream-colored background was chosen for this section. The content is structured into distinct year-section div elements. The "Bowlby One" font was selected for these year titles to create a strong, clear visual hierarchy to identify different time periods. An underline with a linear-gradient in blue tones helps separate each year section. Within each year-section, a gallery-grid was implemented using CSS Grid, configured to display three columns. Each gallery-item features a white background, border-radius, and box-shadow. A transition effect for transform and box-shadow was applied to the items, creating a subtle lift and shadow expansion on hover. Images within each item are scaled using object-fit: cover to ensure consistent visual presentation across varying image aspect ratios.
Contact Page
The Contact page was designed to facilitate direct communication with users, providing both a comprehensive contact form and essential company contact information in an accessible format.
Hero Section
Same as all the ones before
Contact Box Structure
The main interactive component is the contact form, housed within a white .contact-box with box-shadow and border-radius. The "Get In Touch" heading uses "Shrikhand" font in blue. Form fields are organized with input-row and input-group divs. Inputs and textarea have border-radius, padding, and blue border-color with box-shadow on focus. The "Send" button is bold red with white text and box-shadow, and its hover effect changes to white background, red text/border, and includes transform for visual feedback.
Contact Information Section
Immediately below the form, within the same .contact-box, this section displays static contact details. It features a primary blue background, contrasting with the form above. The "Send Us a Message" heading uses "Shrikhand" font in vibrant yellow. Contact information (email, phone, address) is presented in a table. Labels (e.g., "Email") are yellow with 600 font weight, while the details are in white, ensuring readability.
Responsiveness
I've only made 1 max-width at 992px, though at first I planned on making more for each media like desktop, ipad and phone, thankfully I found that one is already enough. Here is the coding for the responsiveness:
4. FEEDBACK
During the process of making my website, I had several feedback that influenced how the final website looked in the end. Though Mr.Shamsul praised the consistency of my website, he suggested me to also have the same design or at least the same border radius for all the buttons I create on the website. He also suggested to put the "view job openings" button in the middle like how I did it in the contact us page.
And for my home page, he suggested me to change the pop mie image I used in the hero image so it looks sharper, but he did mention to only do it if it's possible. And after a view attempt, I actually managed to make the image look more high quality, it was a pleasant surprise and the home page looks much better now.
5. REFLECTION
Experience
After going through all the exercises and putting all the knowledge acquired from the exercises to redesign a whole website, I feel like I've learned most of the basics of coding already. Though at the beginning, creating the website was very challenging and there are times where I wish I can just close my laptop and throw it away, I soon found out that once I got over the beginning phase and lock in, coding isn't too bad after all. But I wouldn't say I really enjoy it enough to take it as a specialization, for the time I had learning and doing it, it was an enjoyable challenge.
Observation
I found that once you understand the basics of what each code does, everything just slowly click into place. And working with my peers during coding is definitely the best option when doing coding because the problems they ran into is probably also going to be a problem I'm going to face sooner or later. During our time doing coding together, I find that the most important part of coding is determination and spite. Our biggest solution to get our code to work the way we want to is to find some type of loophole in order to override the previous code. From what I've observed, this module really trained our mental mind and patience. Because if we don't have the right mind for this, some of us would've already walked out the door after the second week during the redesigning of the website task.
Findings
Using w3schools and bootstrap greatly enhances the speed in making the website. I was able to finish a carousel so much faster with the use of the code already provided because it removes most of the process of throwing random stuff at the code and praying that it works, and instantly just jump to the working phase. All that's needed was a little customization. I also found that some artificial intelligence are better than others when explaining code, especially when there's a code that isn't working and I don't know why, there are some artificial intelligence sites that I learned not to trust with those problems anymore.
Comments
Post a Comment