Interactive Design - Project 2

20/11/2024-7/12/2024

FENG SHIWEN  /  0374595

Bachelor of Design in Creative Media   

Taylor's University 

---

INSTRUCTION

---

LECTURE

WEEK 9 - Box Model

• Overview

The box model is a fundamental concept for understanding layout in CSS. It consists of four areas:
1. Content: The innermost part containing text or images.
2. Padding: Space between the content and border.
3. Border: Surrounds the padding, defined by width and style.
4. Margin: Space between the border and adjacent elements.

• Key Properties

Define sizes using units like px, em, or %.
Example:
div {
    padding: 10px;
    border: 2px solid black;
    margin: 20px;
}

• Display Property

1. Block: Elements start on a new line and stretch across the page (e.g., <div>).
2. Inline: Elements stay in the same line as the content (e.g., <span>).
3. Inline-block: Combines block’s size control with inline’s flow.
4. Flex/Grid: Used for advanced layouts.

• Flexbox

Simplifies responsive design using display: flex.
Important properties:
  - Flex-direction: Row or column layout.
  - Justify-content: Aligns items horizontally.
  - Align-items: Aligns items vertically.




WEEK 10 - Position

• Overview

The position property determines how elements are placed relative to others.

• Positioning Types

1. Static (default): Follows the natural document flow.
.static-element {
    position: static;
}

2. Relative: Positioned relative to its original location.
.relative-element {
    position: relative;
    top: 20px;
}

3. Absolute: Positioned relative to the nearest non-static ancestor.
.absolute-element {
    position: absolute;
    top: 50px;
}

4. Fixed: Positioned relative to the viewport and does not move with scrolling.
.fixed-element {
    position: fixed;
    bottom: 10px;
}

5. Sticky: Behaves as relative until a specified scroll position is reached, then behaves as fixed.
.sticky-element {
    position: sticky;
    top: 0;
}

---

Project 2 - Website Redesign Prototype

The objective of this assignment is to translate your website redesign proposal into a functional prototype. This prototype should visually and interactively represent the proposed changes, demonstrating your ability to apply design principles and UX strategies effectively.

Building upon your previous assignment (Website Redesign Proposal), you are now required to develop a prototype of the redesigned website. This prototype should reflect the proposed visual design and user experience improvements, providing a tangible representation of the final product.

The redesigned prototype for the 2024 Webby Awards' Public Service & Social Impact game winner's showcase page aims to effectively highlight the winning entry while enhancing user experience and visual appeal. This design focuses on showcasing the winner's work, providing an engaging browsing experience, and maintaining alignment with the competition’s mission of recognizing impactful digital initiatives.

Key Features of the Prototype ：

• Layout and Navigation

The prototype introduces a clear and intuitive layout divided into three main sections: **navigation**, **project showcase**, and **contact information**. The navigation bar prominently connects users to the winner's project details and other relevant Webby Awards sections, such as previous winners and submission guidelines. This strategic adjustment simplifies navigation, allowing users to effortlessly explore the site and learn about the competition.

• Typography Choices

Two typefaces were chosen to enhance readability and aesthetics:

1. Archivo : Used for headings and large blocks of text, this sans-serif font is modern, clean, and easy to read.

2. Aclonica : This font is applied to interactive buttons and key elements related to the winner’s project. Its distinctive, playful style adds visual interest and draws attention to actionable elements, balancing functionality with creativity.

This deliberate typography combination ensures textual hierarchy and minimizes user fatigue by maintaining a coherent and engaging reading experience.

• Button Visibility and Interaction

To improve usability, key buttons were redesigned for greater visibility. Interactive elements now feature hover effects that change colors when the cursor passes over them, distinguishing them from static text. This interactive feedback not only guides users intuitively but also creates a dynamic browsing experience.

• Visual Enhancements

The previous design’s heavy reliance on text was addressed by incorporating relevant icons and visuals. For instance:

The “Contact Us” section now includes logos of popular communication platforms (e.g., email, LinkedIn, and social media), allowing users to identify contact options instantly without relying on lengthy text descriptions.

The project showcase incorporates visual elements, such as screenshots and illustrations from the winning game, highlighting its core features and impact. These additions make the page visually stimulating and provide an immediate sense of the project's essence.

• Color Palette

The color scheme uses black, gray, and green, reflecting the themes of professionalism, social responsibility, and environmental awareness. Black and gray maintain a clean, authoritative aesthetic that aligns with the Webby Awards’ prestige, while green symbolizes the competition's focus on societal and environmental impact. This thoughtful combination balances visual appeal with thematic relevance.

Design Decisions ：

• Addressing Readability Issues

One significant improvement was resizing and standardizing font sizes. The original design’s inconsistent typography led to readability challenges—some fonts were too small and easily overlooked, while others were unnecessarily large. Adjustments were made to ensure that all text is appropriately scaled and aligned with its purpose.

• Enhanced User Interactivity

Mouse-hover effects for buttons and menu items were added to clarify which elements are clickable. This subtle yet essential enhancement eliminates ambiguity and reinforces the site’s user-friendliness.

• Improving Content Structure

The winner’s project is given prominence through a dedicated section featuring detailed descriptions, images, and key achievements. This section is designed to not only inform but also inspire visitors, encouraging them to engage with and share the showcased work.

• Addressing Redesign Goals

The redesigned prototype successfully achieves the primary objectives of:

1. Highlighting the Winner’s Project: By restructuring the layout and using engaging visuals, the winning game is presented in a way that captivates and informs the audience.

2. Enhancing Usability: Clear navigation, responsive buttons, and logical content flow improve the overall user experience.

3. Aligning with Competition Themes: The color scheme, typography, and content organization reflect the competition's mission of fostering societal impact and innovation.

In conclusion, this redesigned webpage prototype balances functionality with aesthetics, creating a user-friendly platform that effectively showcases the Webby Awards' commitment to recognizing impactful digital achievements.🏆

Link : https://www.figma.com/proto/jFEXNDe92ev9gBApeEvVgo/Website-design?node-id=0-1&t=Hg1DrYqhFQ5po1HV-1