Interactive Design - Project 1

  INTERACTIVE DESIGN - Project 1

|| 15/10/2025 – 1/11/2025 (Week 4 – Week 6)
|| Yang Shumeng 0378848
|| Interactive Design / Bachelor of Design (Honours) in Creative Media
|| Interactive Design / Project 1

TABLE OF CONTENTS

1. Lectures
2. Instructions
3. Process Work
4. Reflection 

    Lecture Summary: HTML & CSS Fundamentals

    1. ID Attribute

    • The ID attribute gives a unique identity to an HTML element.

    • Each page can only have one element per ID — duplicates are not allowed.

    • Main purposes:

      • Apply a unique style to a specific element (e.g., highlight one paragraph differently).

      • Target elements precisely in CSS or JavaScript.

    • Example:

      <p id="intro">Welcome!</p>

    2. Class Attribute

    • The class attribute groups elements that share the same styling or behavior.

    • Multiple elements can use the same class name.

    • Commonly used to style similar sections, such as important notes or tooltips.

    • Example:

      <p class="highlight">Important text</p>

    3. Block vs Inline Elements

    TypeDescriptionExamples
    Block-level elementsAlways start on a new line and take up the full width.<h1>, <p>, <ul>, <li>
    Inline elementsStay within the same line as other elements.<b>, <i>, <em>, <a>, <img>

    4. Cascading Style Sheets (CSS)

    CSS controls the appearance and layout of web elements — such as background, color, font, and spacing.
    By separating content (HTML) from style (CSS), web pages become easier to maintain and update.

    5. CSS Syntax

    Each CSS rule contains two key parts:

    selector {
  property: value;
}

    • Selector: Defines which HTML element is styled.

    • Declaration: Describes the style property and its value.

    6. Three Ways to Apply CSS

    1. External CSS

      <link href="style.css" rel="stylesheet" type="text/css">

    2. Internal CSS

      <style>
  p { color: blue; }
</style>

    3. Inline CSS

      <p style="color: red;">Hello</p>

    7. Common CSS Style Applications

    Color

    • Defines text, background, or border colors.

    • Key properties: color, background-color, border-color.

    Background

    • Controls the overall appearance behind content.

    • Key properties: background, background-image.

    Text

    • Adjusts how text is displayed.

    • Key properties: text-align, text-decoration, text-indent, text-shadow.

    Font

    • Defines font family, size, and weight.

    • Key properties: font-family, font-size, font-style, font-weight.

    2. Instructions：

    3. Process Work：

    Project 1 - Website Redesign Proposal：

    Objective:
    The objective of this assignment is to develop a comprehensive proposal for the redesign of an existing website. The proposal shoulddemonstrate your ability to critically evaluate a website’s design and functionality, and to propose design solutions that enhance user experience, aesthetics, and performance.
     
    Assignment Description:
    You are required to select an existing website which you feel has several design and UX issue and prepare a detailed proposal for its redesign. The proposal should address the following key aspects:
         
    Website Analysis:
     
    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.
     
    Functionality:
    Evaluate the website’s performance, including load times, interactivity, and compatibility across different devices and browsers.
       
    Redesign Goals:
    Objectives: Clearly define the goals of the redesign (e.g., improved usability, modernized look, enhanced brand alignment).
     
    Target Audience:
    Describe the intended audience for the redesigned website and how the new design will better meet their needs.
           
    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.
     
    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

    Reflection

    Over the past few weeks, my understanding of web design has grown significantly. I have developed the ability to critically evaluate existing websites by identifying outdated visual elements, usability challenges, and structural inconsistencies. Through this process, I’ve learned how to propose practical and user-focused improvements. This experience has deepened my appreciation for key design principles such as visual hierarchy, responsive design, user-centered navigation, and web accessibility. I now approach web design not just as a visual task, but as a holistic process that balances aesthetics, functionality, and user experience.

    评论

    发表评论

    此博客中的热门博文

    Typography | Task 1: Exercises

    图片
      Typography | Task 1: Exercises LIST / JUMPLINK Lectures Instructions Exercises Feedback Reflections Further Readings 21.4.2025 - 26.5.2025（Week 1 - Week 6) Yang Shumeng（0378848） Typography / Bachelor of Design (Honours) in Creative Media / Taylors University Task 1 / Exercises LECTURES Week 1 Typo_0_Introduction During this lecture, we've grasped the significance of typography. Typography is a crucial cornerstone in all design fields. It sharpens our eye for detail and hones our compositional abilities. Widely utilized in web design, app interfaces, logo creations, book layouts, and poster designs, it serves a...
    阅读全文

    DIGITAL PHOTOGRAPHY AND IMAGINE

    图片
      21.4.2025 - 26.5.2025（Week 1 - Week 6) Yang Shumeng（0378848） DPI / Bachelor of Design (Honours) in Creative Media / Taylors University  Exercises LIST / JUMPLINK Lectures Instructions Exercises Feedback Reflections Further Readings LECTURES WEE K1 This class introduced digital photography fundamentals, showing how science and art merge in design. Key points: • Learned Photoshop: A vital tool for designers/photographers, crucial for image editing/manipulation. • Creative techniques discovered: Broadened perspectives, sparked enthusiasm for future learning. • Photoshop’s value: Powerful yet user-friendly, enabling creative ideas in tasks like designing business cards, restoring old photos, and cartoonizing images—offers endless visual expression possibilities. EXERCISES graphic design composition work 1          • Eye - catching composition: Geometric shapes such as circles and squares cut through the picture, breaking the convention. They create a uni...
    阅读全文

    Illustration and Visual Narrative—task1

    图片
    ILLUSTRATION & VISUAL NARRATIVE | TASK 1: EXERCISES -  April 21, 2025 21/04/25 - 12/05/25 (Week 1 - Week 4)  Yang Shumeng,0378848 Illustration and Visual Narrative Task 1: Exercises TABLE OF CONTENTS 1. Lectures 2. Instructions 3. Task 4. Reflection Lectures Week 1 During our first tutorial, Mr. Hafiz introduced us to Adobe Illustrator , a powerful tool for creating vector graphics. We began by exploring two key types of digital images: Raster Images Made up of individual pixels, these images lose clarity when enlarged. Common file types include JPG and PNG . Vector Images Constructed from mathematical paths, these can be scaled infinitely without quality loss. Typical formats are AI and SVG . A key point discussed was the issue of missing links when importing external images or Illustrator files into a project. Mr. Hafiz explained how to avoid this by properly embedding assets. We also reviewed several important file formats used in Il...
    阅读全文