Labels

Interactive Design - Project 1: Website Redesign Proposal

13/05/2025 - 25/05/2025 (Week 4 - Week 6)

Chang Wing / 0367807 

Interactive Design / Bachelors of Design (Honours) in Creative Media / Taylor's University

Project 1: Website Redesign Proposal


TABLE OF CONTENTS




LECTURES

Week 4

The Web and Language

Designing interfaces that follows the web standards is important, it establishes a standard framework that enables developers and designers to understand each other more easily while ensuring consistent and accurate display across various browsers.

Mr. Shamsul introduced us to fundamental HTML coding patterns, including the structure of opening and closing tags, as well as the use of specific symbols for defining attributes, formatting content, and organising elements.

Figure 1.8 Opening and closing tag

Figure 1.9 Paragraphs, bold and italic

Figure 1.10 Ordered list


Class Activity

We were required to create a simple html website using TextEditor (for mac users), applying the foundational coding concepts covered this week.

Figure 1.11 Html coding in TextEditor


Figure 1.12 Created page file:///Users/torpedo/Downloads/MyHTMLFile/index.html




Week 5

HTML & CSS

ID & Class Attributes

  • ID: Uniquely identifies one HTML element; only one element can have the same ID.

  • Class: Identifies multiple elements with a shared style or purpose; can be reused.

  • Neither affects appearance unless styled with CSS.


Block vs Inline Elements

  • Block-level: Starts on a new line (e.g., <h1>, <p>, <ul>, <li>).

  • Inline: Stays within the same line (e.g., <b>, <i>, <a>, <img>).

CSS Basics

  • CSS = Cascading Style Sheets; used to control how HTML elements appear.

  • A CSS rule = selector + declaration (property + value).
    Example: p { color: red; font-family: Arial; }


Selectors & Declarations

  • Selector: Targets HTML elements.

  • Declaration: Defines styles using propety-value pairs inside { }.

Applying CSS

1. External CSS: Use <link> in <head> to load .css file (recommended for multi-page sites).
  • Attributes: href, type="text/css", rel="stylesheet"

2. Internal CSS: Use <style> tag in <head> to write CSS directly on the page.

3. Multiple CSS files can be linked to one HTML page (e.g., one for layout, one for typography).



Week 6

CSS Selector

Mr. Shamsul introduced different CSS selectors that are used to target specific HTML elements for styling.

1. Universal Selector:

* {
    /* CSS styles go here */
}

2. Type Selector:

p {
    /* Styles all <p> elements */
}

3. Class Selector:

.class-name {
    /* Styles elements with class="class-name" */
}

4. ID Selector:

#id-name {
    /* Styles the element with id="id-name" */
}

5. Group Selector:

h1, h2, p {
    /* Styles h1, h2, and p elements */
}

6. Descendant Selector:

div p {
    /* Styles <p> elements inside <div> */
}

7. Child Selector:

div > p {
    /* Styles <p> elements directly inside <div> */
}


8. Pseudo-class Selector: 

a:hover {
    /* CSS styles go here */
}


9. Pseudo-element Selector: 

selector::pseudo-element {
    /* CSS styles go here */
}

*Example:     p::first-line {
                      font-weight: bold;
                      }



INSTRUCTIONS


Project 1: Website Redesign Proposal 

Select an existing website with UX issues. Prepare a detailed proposal covering:

1. Current Design Evaluation:
Provide a critique of the current design, focusing on layout, color scheme, typography, imagery, and overall aesthetics. User Experience (UX): Assess the site’s usability, navigation, accessibility, and responsiveness. Identify pain points or areas that could be improved.

2. Functionality:
Evaluate the website’s performance, including load times, interactivity, and compatibility across different devices and browsers.

3. Redesign Goals:
Objectives: Clearly define the goals of the redesign (e.g., improved usability, modernized look, enhanced brand alignment).

4. Target Audience:
Describe the intended audience for the redesigned website and how the new design will better meet their needs.

5. Design Proposal:
Visual Design Concepts: Present your ideas for the new visual design, including visual references, mood board and wireframes. Discuss the rationale behind your design choices.

6. UX Enhancements:
Propose changes to improve user experience, such as simplified navigation, better content organization, or enhanced interactivity.
Technical Considerations: Outline any technical updates or changes, such as optimizing for mobile devices, or improving load times



Project 1: Website Redesign Proposal

Link to Chosen Website: https://www.kumon.com/about-kumon


Figure 2.1 Kumon's Website


Proposal (Final)

Figure 2.2 Website Redesign Proposal (Final) (PDF)
​


FEEDBACK

Project 1: Website Redesign Proposal 

Week 5 (20/05/2025)
Feedback: -


Week 6 (27/05/2025)
Feedback: -





REFLECTION

Through this task, I got to better understand how a website interface works behind the scenes, especially its navigation structure and how each part contributes to draw users in and keep them engaged.

By studying existing corporate websites, conducting research, and analysing how layout and information flow are planned, I began to see how marketing strategy, hierarchy, clarity, and user intention all influence design decisions. Strategic placement of CTA buttons at key scroll points can subtly guide user behaviour, while thoughtfully placed visuals can break up dense content, add context, or support storytelling.

Overall, it reminded me that a website isn’t just about looking good, it needs to deliver a snooth user experience while reinforcing the brand’s identity. A well-designed website serves as a strong communication tool that shapes perception and builds trust. Moving forward, I’ll continue applying principles of usability, UX and UI knowledge to create designs that not only look polished but also feel intuitive and purposeful.













Labels:

Comments

Post a Comment