23/04/25 - 28/05/25 (Week 6 - Week 10)
Gabriella Grace Christyanti / 0371915Interactive Design / Creative Media / School of Design
TABLE OF CONTENTS
1. Lectures
2. Instructions
3. Task
4. Reflection
1. LECTURES
Week 9 - Box Model and Layout in CSS
Display Property
The display property controls how elements appear on a page. The two main types are:
- Block Elements:
- Inline Elements:
- inline-block
- flex
- grid
Most HTML elements (like <div>, <p>, <h1>, etc.) are boxes. These boxes have three main parts:
- Padding – space inside the box, around the content
- Border – the edge around the padding
- Margin – space outside the border
Flexbox
- Flexbox helps you create flexible, responsive layouts. It works by arranging items inside a container using the Box Model for spacing and positioning.
2. INSTRUCTIONS
3. TASK
Task Instruction:
The assignment requires us to transform our website redesign proposal into a functional, interactive prototype that shows our improvements. Using Figma you will create a clickable prototype that allows users to navigate through the redesigned website and engage with its key features. This prototype should demonstrate our understanding of design principles and user experience (UX) strategies.
The prototype must include three key page types:
Homepage (with navigation, hero section, and main
content areas),
at least one Core Content Page (such
as About Us, Services, or Products),
a Contact Page
(with functional form elements).
The design should prioritize usability and interactivity, incorporating clear navigation, intuitive interfaces, and responsive elements like buttons and form fields. Along with the prototype (submitted as a shareable link or downloadable file), we are told to write a 500–800 word explanation in our e-portfolio, detailing the design features, decisions made during development, and how your prototype fulfills the goals set in your original redesign proposal.
Website Redesigned : Pop Mie Website
Key Features of the Prototype
One of the first things I fixed was the navigation. The original website had two home buttons, which was confusing. In my redesign, I made the Pop Mie logo the only home button to keep it simple and clear. I also added hover effects to all navigation links so users can see which page they are pointing at.
The homepage layout was also improved. The original version felt empty and very short, and the events page also had a very messy white space design. I redesigned the home page to use space better and to make each section feel more connected and also added some events to the . I added more content and fixed the white space to improve the flow of the page.
For typography, I used the Shrikhand font for headings because it looks very close to the Pop Mie logo’s font. This helps users connect the website to the brand. I also used another font, Bowby, in some parts to create a good visual hierarchy.
I improved the use of colors too. The original website mostly used blue and yellow, but the yellow text was used too much, so it lost its effect. I kept the brand colors but added a few more to make the site feel more modern. I also used yellow only where it’s really needed to keep the emphasis strong.
The product page is one of the most important parts of the site, so I made it more interesting and interactive. I changed the layout of the product descriptions by putting the text in colored boxes, making it easier to read. I also adjusted the size of the product carousel so it’s more fun to look through. The product type filter was changed into a full rectangle with rounded edges, inspired by the Pretty Patty website.
Design Decisions Made During Development
While working on the design, I received feedback from Sir Shamsul which helped me improve the prototype.
He mentioned that my first version didn’t have enough white space, and the navigation text was too large. I fixed this by reducing the font size and adding more space around the elements to make everything easier to look at.
He also told me to change the footer and make the icons the same color. I followed this advice and used an image from Freepik to make the footer look more consistent and professional.
For the events section, I was told to use a white background. But when I did that, the white text blended in too much, so I changed the text color to a light gray and added a drop shadow around the boxes. This helped the text stand out better while still following the white theme.
Lastly, I improved the Contact Us page after being told to research how other websites design theirs. I changed the layout and made it simpler and easier to use based on what I learned from other sites.
How the Prototype Meets the Objectives in the Redesign Proposal
In my proposal, I pointed out several problems with the original Pop Mie website. The prototype I made solved most of these problems. The navigation is now simple and clean, with one home button and better spacing. Typography is improved using two fonts with clear roles. The yellow text is now used carefully, so it keeps its purpose for emphasis. The layout is more balanced, and the product page is now more engaging, colorful, and easier to explore.
Overall, the new design looks more modern, feels more fun, and supports the Pop Mie brand better than the original. It also makes the site easier to use and more enjoyable to interact with.
4. REFLECTION
Experience
Creating the prototype was a new and challenging experience for me. The process took a lot of time, effort, and attention to detail, especially since I was still learning. Because of class delays and a tight schedule, I felt rushed and overwhelmed at times. It was hard to keep up with tutorials, lectures, and self-learning all at once. Even though it was stressful, I enjoyed the creative part of designing and want to explore prototyping more in the future. I'm also really thankful for Sir Shamsul’s tutorials, it helped me stay motivated.
Observation
During the design process, I noticed how important it is to organize content clearly. Breaking the site into sections like "About Us," "Services," and "Contact" made it easier to understand and use. I also learned that being consistent with design elements like buttons, icons, and logos makes everything look more polished and professional. Using Figma helped me test out ideas and see how users would interact with the site.
Findings
I realized that small choices, like typography, make a big difference in how a website feels. At first, I didn't do too much on the navigation bar, but it didn’t match the look I wanted. After feedback, I switched to make the text smaller to give the nav bar more white space, which improved the design a lot. I also learned that time management is important for finishing the project. I'm happy with how the prototype turned out, and it taught me a lot.
Comments
Post a Comment