Labels

Interactive Design | Project 2 - Website Redesign Prototype

|| 14/05/25 – 28/05/25  

|| Tee Zi Tong, 0366165

|| Interactive Design

|| Project 2 - Website Redesign Prototype

LECTURER NOTES

Lecture 6: CSS Selector 

Types of Selectors

Universal Selector (*)
  • Selects all elements on the page.
  • Use with caution as it affects everything.
Element Selector (p, div, etc.)
  • Targets HTML elements by tag name.
ID Selector (#id)
  • Selects a specific element with a unique ID.
Class Selector (.class)
  • Targets one or more elements with the same class.
Descendant Selector (.parent tag)
  • Selects elements inside another element.
Child Selector (parent > child)
  • Targets only direct children.
Pseudo-class Selector (:hover, :active, etc.)
  • Styles elements based on their state or position.
Pseudo-element Selector (::before, ::after)
  • Targets parts of elements like the beginning or end.

Why CSS Has Many Selectors
  • Specificity: Allows fine control over which elements are styled.
  • Structure: Helps in targeting deeply nested or sibling elements.
  • Attribute-Based: Styles elements based on attributes (e.g., [type="text"]).
  • Pseudo-classes/Elements: Style elements in specific states or parts.
  • Responsive Design: Media queries apply styles based on screen/device.
  • Stateful Interactions: Styles change based on user interactions (e.g., focus, click).
  • Cross-Browser Compatibility: Ensures consistent behavior across browsers.
  • Ease of Maintenance: Makes code cleaner and reusable.
  • Accessibility: Enhances readability and usability for all users.

Lecture 7: Box Model

Display Property

Purpose: Controls how elements are rendered and laid out.

Common Display Types:

  • Block (e.g., <div>): Starts on a new line and spans the full width.

  • Inline (e.g., <span>): Flows with text and does not start a new line.

  • inline-block: Like inline, but allows width/height styling.

  • flex and grid: Used for complex, responsive layouts.

Customization: You can override default display behavior (e.g., make <li> inline for horizontal menus).

Box Model

Every element is made up of four layers:

  1. Content – The actual text/image.

  2. Padding – Space around the content, inside the border.

  3. Border – Surrounds padding and content.

  4. Margin – Space outside the border, separating it from other elements.

Flexbox

Purpose: Build responsive layouts by distributing space and aligning items.

Key Parts:

  • Flex Container: Parent element with display: flex.

  • Flex Items: Direct children of the container.

Core Properties:

  • flex-direction: Row (default) or column layout.

  • justify-content: Aligns items horizontally (main axis).

  • align-items: Aligns items vertically (cross axis).



INSTRUCTIONS


CLASS EXERCISES

Using the existing index.html file, add a new column to the layout.




LINK TO PROTOTYPE 



PROJECT 2 - PROGRESSIONS 

Before getting started, I explored various beginner tutorials online to get more familiar with using Figma effectively. This helped me build a strong foundation and speed up my workflow for the project.

For the prototype redesign of my selected website, I planned and created five desktop pages, each designed at a 1280px width.

  1. Homepage
  2. Recipes
  3. About
  4. Teas
  5. Contact
This is a screenshot showcasing my design process in Figma for the five prototype pages.



PROJECT 2 - PROPOSAL 

Project 2 - Website Redesign Prototype by Tee Zi Tong 0366165

A Brief Write Up 

The Lipton Tea website redesign prototype modernizes the brand’s digital presence by addressing outdated aesthetics, poor usability, and weak storytelling. The goal was to create a visually engaging and user-friendly experience that aligns with Lipton’s identity as a globally trusted tea brand while appealing to health-conscious millennials, Gen Z, and tea enthusiasts.

One of the key improvements is the modernized visual design. The prototype reduces the overwhelming use of bright yellow, opting instead for a balanced palette of earthy greens, warm yellows, and neutral whites to convey freshness and cleanliness. Typography has also been refined, with Raleway for headings and Montserrat for body text, ensuring better readability and hierarchy.

Navigation has been simplified to enhance usability. The current site’s cluttered dropdown menus were replaced with a streamlined menu bar, making it easier for users to find products, recipes, and health information. The prototype also improves mobile responsiveness, ensuring a seamless experience across all devices.

Product presentation has been upgraded with high-quality lifestyle imagery and close-ups of tea products. Each tea variant now includes detailed descriptions, brewing instructions, and sustainability credentials, such as Rainforest Alliance certification. The "Quick Chill Recipes" section has been redesigned to be more visually appealing and easier to follow, encouraging user engagement.

Accessibility was a priority in the redesign. The prototype features better contrast ratios, larger clickable areas, and clear calls-to-action (CTAs) like "Shop Now" and "View More." These changes ensure the site is inclusive and user-friendly for all audiences.

The prototype also emphasizes storytelling to strengthen brand connection. Sections like "Nature Is Our Factory" highlight Lipton’s sustainability efforts, while the "About Us" page reinforces the brand’s heritage and commitment to quality.

Overall, the redesign achieves its objectives by modernizing the UI, simplifying navigation, and enhancing product storytelling. The result is a cohesive, inviting, and functional website that aligns with Lipton’s brand values while meeting the needs of today’s consumers.


Labels:

Comments

Post a Comment