Interactive Design - Project 1

日期：

 6/13/2025 -  /10/2025 / Week 4-

YANG SHUO / 0384037

Bachelor of Design (Hons) in Creative Media

Interactive Design / Project 1

LIST

LECTURE

ID and Class attribute

ID Attribute
  • Gives an element a unique identity
  • No two elements can share the same ID on a page
  • Used to style or target one specific element
  • Code element: id=" "
Class Attribute
  • Groups elements that share the same style
  • Multiple elements can have the same class name
  • Code element: class=" "
Difference
  • ID is used for a unique element (#idname)
  • Class is used for a group of elements (.classname)
  • These attributes alone do not change appearance; CSS must be applied
Block Elements
  • Always start on a new line and take up full width
  • Code elements: <h1> <p> <ul> <li>
Inline Elements
  • Stay on the same line with surrounding content
  • Code elements: <b> <i> <em> <a> <img>


CSS (Cascading Style Sheets)
Purpose
  • Controls the appearance of webpage content such as color, font, and layout
Structure
  • A CSS rule consists of a selector and a declaration
  • The selector targets the element; the declaration defines the style
  • A declaration includes a property and a value
  • Code element: selector { property: value; }

Methods to Apply CSS

External CSS
  • CSS stored in a separate file and linked in the HTML head
  • Ideal for multi-page sites to keep styles consistent
  • Code element: <link rel="stylesheet" href="style.css">
Internal CSS
  • CSS written within the head section of the HTML file
  • Suitable for single pages or testing
  • Code element: <style> </style>


Common CSS Style Categories

Color
  • Sets text, background, or border color
  • Code elements: color background-color border-color
Background
  • Controls background color or image
  • Code elements: background background-image
Text
  • Controls alignment, decoration, spacing, and shadow
  • Code elements: text-align text-decoration text-indent text-shadow
Font
  • Sets font family, size, and style
  • Code elements: font-family font-size font-style font-weight

INSTRUCTION


    EXERCISE

    Website Redesign Proposal

    Objective:
     The objective of this assignment is to develop a comprehensive proposal for the redesign of an existing website. The proposal should demonstrate 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.

    Submission：

    REFLECTION

    Strengths:
    Through lecture exercise, I learned how to use ID and Class attributes with CSS to improve structure and consistency in my webpage redesign. This helped me make the layout clearer and the design more organized.

    Weaknesses:
    Sometimes I made coding mistakes because of carelessness, such as missing symbols or wrong selectors, which affected how the page displayed.

    Reflection:
    Project 1 made me realize that a successful webpage redesign needs both aesthetic improvement and clean, functional code. I need to pay more attention to details and test my design carefully to achieve a balance between form and usability.



    评论

    发表评论