Interactive Design - Project 1

16/10/2024-20/11/2024

FENG SHIWEN  /  0374595

Bachelor of Design in Creative Media   

Taylor's University 

INSTRUCTION


LECTURE


WEEK 3 - HTML & CSS
  •  HTML Basics
ID and Class Attributes
ID Attribute: Assigns a unique identifier to an HTML element, useful for applying distinct styles or scripting logic. No two elements on the same page should share the same ID.
Class Attribute: Groups elements with a shared name, enabling consistent styling or behavior across multiple elements.
Block and Inline Elements:
Block Elements: Such as <h1> and <p>, occupy the full width of the page and start on a new line.
Inline Elements: Such as <a> and <img>, remain in the same line as neighboring elements.
  • CSS Overview
Purpose of CSS: Defines the appearance of web content, including colors, fonts, spacing, and layout.
CSS Rule Structure:
Selector: Targets the HTML elements to style.
Declaration: Specifies styling attributes, consisting of a property and a value.
Example: p { color: red; font-size: 16px; }
  • Common Methods for Using CSS
1. External Stylesheet:
Use a <link> tag in the HTML document to connect to an external CSS file.
Recommended for multi-page projects to maintain consistent styling.
2. Internal Stylesheet:
Defined within a <style> tag in the <head> section.
Suitable for single-page applications.
3. Inline Styles:
Directly applied within HTML tags using the style attribute.
Discouraged due to poor readability and maintainability.
  • Key CSS Properties
Background: Customize background color, images, and repeat settings.
Text: Control color, alignment, decoration (e.g., underline), and spacing.
Fonts: Safe font options include Arial, Verdana, and Times New Roman.
Lists: Create unordered (<ul>) or ordered (<ol>) lists with <li> elements, supporting nested structures.




WEEK 4 - The Web
  • Web Standards
Importance:
Ensures websites display correctly across various devices (PCs, phones, tablets) and browsers (Chrome, Edge, Firefox).
Following standards simplifies development and improves code clarity for others.
W3C:
The World Wide Web Consortium is responsible for defining and maintaining web standards, including HTML and CSS.
  • How the Web Works
1. Users connect to the internet via an ISP (Internet Service Provider).
2. When entering a domain name, DNS (Domain Name System) translates it into an IP address.
3. The browser contacts the web server at the given IP address to fetch the requested webpage.
4. The server sends the webpage back to the browser for display.
  • Webpage Structure
HTML for Structure:
Tags and Elements: HTML uses tags (e.g., <p>) enclosed in angle brackets to define elements.
Attributes: Provide additional details, such as lang="en" for specifying language.
Basic Page Sections:
<head>: Contains metadata like the <title>.
<body>: Houses the main content of the webpage.
  • Common HTML Tags
1. Headings: <h1> to <h6> represent different heading levels.
2. Paragraphs: Use <p> tags to define text blocks.
3. Lists:
Unordered Lists: Created with <ul> and styled with bullet points.
Ordered Lists: Created with <ol> and numbered items.
Nested lists are supported within list items.
4. Links:
Created with <a> tags, where href specifies the destination URL.
5. Images:
Inserted with <img> tags, using src for the image path and alt for accessibility.
  • Web Accessibility
Ensures usability for screen readers and voice-controlled devices.
Features such as alt text and semantic tags enhance user experience and inclusivity.




WEEK 7 - CSS Selectors
  • Overview
CSS selectors are essential tools for targeting and styling HTML elements. They determine how and which elements will be styled.
  • Types of Selectors
1. Universal Selector (*): Affects all elements, often used for global resets.
* {
    margin: 0;
    padding: 0;
}

2. Element Selector: Targets HTML tags.

p {
    color: blue;
}

3. ID Selector (#): Targets elements with a unique ID.

#header {
    font-size: 20px;
}

4. Class Selector (.): Targets elements sharing the same class.

.button {
    background-color: red;
}

5. Descendant Selector: Styles nested elements.

div p {
    margin: 10px;
}

6. Child Selector (>): Styles direct children.

ul > li {
    list-style: none;
}

7. Pseudo-classes: Target elements based on state (e.g., :hover, :nth-child()).

a:hover {
    color: green;
}

8. Pseudo-elements: Style parts of an element (e.g., ::before, ::after).

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

9. Attribute Selectors: Target elements based on attributes.

input[type="text"] {
    border: 1px solid black;
}

  • Purpose of Multiple Selectors
Precise styling for different scenarios.
Address complex structures, attribute-based styling, and stateful interactions.
Facilitate responsive design and accessibility.

Project 1 - 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.

Comments

Post a Comment

Popular posts from this blog

Information Design - EXERCISE 1&2 : QUANTIFIABLE INFORMATION

Image
23/9/2025-Ending Week FENG SHIWEN  /  0374595 Bachelor of Design in Creative Media   Taylor's University TABLE OF CONTENTS INSTRUCTIONS LECTURES EXERCISE REFLECTION INSTRUCTIONS LECTURES WEEK 2 Exercise 1: Quantifiable Information – Quantify raw data and visualize information as a photograph A is a visual representation of numerical data that allows for easy interpretation and analysis.  Instruction: Gather a set of objects and separate it into category such as color, shape, pattern, and other quantifiable factor. Example: 1. Box of Lego 2. Jar of button 3. Jar of marble ball 4. Set of colourful rubber strap In this exercise you're required to quantify our chosen objects and arrange them into a presentable layout or chart. ...
Read more

Advanced Interactive Design - Final Project

Image
21/4/2025-Ending Week FENG SHIWEN  /  0374595 Bachelor of Design in Creative Media   / Advanced Interactive  Design Taylor's University INSTRUTIONS FINAL PROJECT Completed Thematic Interactive Website Students will synthesise the knowledge gained in tasks 1 and 2 for application in task 3. Students will create integrated visual assets and refine the prototype into a complete working and functional product experience, a minimum of 5 working pages. Deploy the final website to Netlify or GitHub.  Review of the production process For this project, I used Adobe Animate to create the animation. I initially ran into an issue where the exported HTML showed a black screen, but after checking the file paths, organizing the folder structure, and uploading everything to Netlify, it was successfully resolved. Here are a few key screensho...
Read more

Games Development - Task 1

Image
26/9/2025-Ending Week FENG SHIWEN  /  0374595 Bachelor of Design in Creative Media   Taylor's University TABLE OF CONTENTS INSTRUCTIONS LECTURES TASK 1 REFLECTION INSTRUCTIONS TASK 1 -Individual Game Ideation For Task 1 of this course, each student is required to come up with an individual game idea. I chose to design a mini-game that combines stargazing, plants, and myths from different cultures. The game is called “The Altar of Stars and Flowers.” The concept is that players observe the stars and collect plants to complete rituals at an altar, gradually unlocking myths from Chinese, Greek, Egyptian, and other cultures. Fig 1.0 Star chart The theme of this game is to...
Read more