Interactive Design

Interactive Design | Project 1

21/04/2025 - 29/05/2025 | Week 1 - Week 6

Jesslyn Octavia Tjong / 0374562 / Bachelor of Design (Honors) in Creative Media

Interactive Design / Taylors' University

Table of Contents

I. LECTURE

II. INSTRUCTION

III. FEEDBACK

IV. REFLECTION

V. QUICK LINKS

I. LECTURE

The Web & Language (Week 4)

I.. Web Standards

Evolving Web Access: Web access has diversified from keyboards/mice to phones, tablets (touchscreens), and audible interfaces. This supports users with varying abilities.
Hardware & Software Variety: Users employ diverse browsers, operating systems (Windows, Mac OS, Linux), and screen resolutions.
Standards are Crucial: Due to this diversity, websites must adhere to web standards to ensure content accessibility across all devices and configurations. Without standards, many users might be unable to access a site.
W3C (World Wide Web Consortium): This organization creates and maintains web standards, including HTML and CSS.
Why Standards? They improve the internet for developers and visitors, simplify development (easier code understanding), and ensure consistent website display across browsers without rewrites.

II. How the Web Works

Server Connection: Visiting a website means your browser connects to its web server, which can be anywhere globally.
DNS (Domain Name System):

You type a domain name (e.g., www.google.com) via your ISP.
Your computer contacts DNS servers, which provide the unique IP address for that domain (like a phone book). Every web device has a unique IP address.
This IP address allows your browser to contact the web server (a computer continuously connected to the web, set up to send pages).
The web server then sends the requested page back to your browser.

III. Structure of a Web Page

Understanding Structure: Like physical documents (newspapers, forms), web pages rely heavily on structure to convey messages and help users navigate.
HTML Describes Structure: HTML (HyperText Markup Language) describes web page structure by adding code (elements) to content.
Tags and Elements:

HTML Elements: Code units describing structure, made of an opening tag (e.g., <p>) and a closing tag (e.g., </p>).
Content sits between tags.
Each element informs the browser about its content.

Attributes:

Provide additional information about an element's content.
Appear on the opening tag.
Comprised of a name and a value (e.g., <p lang="eng-us">)

IV. Essential HTML Elements

<body>: Contains all content visible in the main browser window.
<head>: Contains information about the page (metadata), usually before <body>.
<title>: Inside <head>; its content appears in the browser's tab bar.
Headings (<h1> to <h6>): Six levels to create information hierarchy.
Paragraphs (<p>): Creates text blocks, typically starting on a new line.
Bold (<b>): Makes characters bold; visually different, no additional semantic meaning.
Italic (<i>): Makes characters italic; for terms said differently (e.g., technical terms, foreign words).
Lists:

Ordered Lists (<ol>): Numbered steps.
Unordered Lists (<ul>): Bullet points.
List Item (<li>): Each item in a list.
Nested Lists: Sub-lists within an <li> element.

Links (<a>):

Connects web pages.
href attribute specifies the destination page.
Absolute URLs link to other websites.

Images (<img>):

Links images into a page (not embeds them).
Empty tag (no closing tag), uses attributes.
src: Image path.
alt: Alternative text for accessibility.
title: Tooltip for the image.

HTML & CSS Week 5

ID Attribute:

Used to uniquely identify a single HTML element on a page.
Every HTML element can have an ID attribute.
Crucially, no two elements should have the same ID value to maintain uniqueness.
Allows an element to be styled differently from other instances of the same element.
Example: Assign a specific paragraph a unique style.

Class Attribute:

Allows you to identify multiple elements as different from others on the page.
Every HTML element can have a class attribute.
Elements can share the same class value or name.
Example: Distinguish paragraphs containing more important information.

ID & Class Presentation:

By default, using these attributes does not change an element's appearance.
They only affect appearance if a CSS rule specifies how they should be displayed differently.

II. Block vs. Inline Elements

Block Elements:

Always start on a new line in the browser window.
Examples: <h1>, <p>, <ul>, <li>.

Inline Elements:

Always continue on the same line as their neighboring elements.
Examples: <b>, <i>, <em>, <a>, <img>.

III. Introduction to Cascading Style Sheets (CSS)

Purpose of CSS:

Allows you to create rules that specify how the content of an HTML element should appear.
Separates content (HTML) from presentation (CSS).
Enables consistent styling across multiple pages by altering a single CSS file.
Examples: Setting page background color, paragraph text style, or header colors.

CSS Style Rules:

CSS works by associating rules with HTML elements.

Each rule has two parts: a selector and a declaration.
Selector: Indicates which HTML element(s) the rule applies to. Multiple elements can be selected by separating their names with commas.
Declaration: Indicates how selected elements should be styled.

Contained within curly brackets {}.
Split into a property and a value, separated by a colon :
Multiple properties can be specified within one declaration, separated by a semicolon.
Property: Specifies the aspect of the element to change (e.g., color, font-family, width, height, border).
Value: Defines the setting for the chosen property (e.g., Arial for font-family, yellow for color).
Example: p { font-family: Arial; } makes all <p> elements appear in Arial.
Example: h1, h2, h3 { font-family: Arial; color: yellow; } styles <h1>, <h2>, <h3> in Arial and yellow.

IV. Methods to Employ CSS

External CSS (<link> element):

The <link> element tells the browser where to find an external CSS file.

It is an empty element and lives inside the <head> element of an HTML document.

Requires three attributes:

href: Specifies the path to the CSS file.
type: Specifies the document type, value should be text/css.
rel: Defines the relationship, value should be a stylesheet.
An HTML page can link to more than one CSS file.

Internal CSS (<style> element):

CSS rules are placed directly within an HTML page inside a <style> element.
Typically located inside the <head> element.
The <style> element should use type="text/css".
Best practice for multi-page sites: Use external CSS to:
Apply the same style rules across all pages without repetition.
Keep content separate from presentation.
Allow styling changes across all pages by modifying just one file.

V. Common CSS Properties

CSS Color: Sets background color, text color, and border color.
CSS Background: Sets background color, image, repeat, and attachment (shorthand available).
CSS Text Formatting: Controls text color, alignment, decoration, transformation, spacing (indent, letter-spacing, word-spacing), and shadow.
CSS Fonts:
Web Safe Fonts: A list of commonly available fonts for HTML and CSS: Arial, Verdana, Tahoma, Trebuchet MS (sans-serif); Times New Roman, Georgia, Garamond (serif); Courier New (monospace); Brush Script MT (cursive).
Adding Fonts: Fonts can also be added using services like Google Fonts

CSS Selectors ( Week 6 )

CSS selectors are the first part of a CSS rule. They indicate which HTML element(s) the rule applies to, allowing you to precisely target content for styling.

I. Basic Selectors

Element (Type) Selector:
- Targets all instances of a specific HTML element type.
- Syntax: elementname { /* declarations */ }
- Example: p { font-family: Arial; } (Applies to all <p> elements)
- Example: h1, h2, h3 { color: yellow; } (Applies to all <h1>, <h2>, and <h3> elements)
ID Selector:
- Targets a single, unique HTML element identified by its id attribute.
- The id attribute must be unique within the entire HTML document.
- Syntax: #idvalue { /* declarations */ }
- Example: If you have <p id="intro">, you can style it with #intro { font-size: 1.2em; }
Class Selector:
- Targets one or more HTML elements identified by their class attribute.
- Multiple elements can share the same class name.
- Syntax: .classvalue { /* declarations */ }
- Example: If you have <p class="important"> and <li class="important">, you can style them with .important { font-weight: bold; color: red; }

II. Grouping Selectors

You can apply the same CSS rule to multiple selectors by separating the selector names with commas.
This avoids repeating the same declarations for different elements.
Syntax: selector1, selector2, selector3 { /* declarations */ }
Example: h1, h2, h3 { font-family: Arial; color: yellow; } (Applies Arial font and yellow color to all <h1>, <h2>, and <h3> elements).

II. INSTRUCTION

Project 1's assignment involved developing a redesign proposal for an existing website. The process included critically evaluating its current design, UX, and functionality, and then proposing design solutions to enhance user experience, aesthetics, and performance.

The categories I will be researching and writing about will be based on :

Website Analysis

Current Design Evaluation
User Experience (UX) Assessment
Functionality Evaluation

Redesign Goals

Objectives
Target Audience

Design Proposal

Visual Design Concepts

UX Enhancements

Technical Considerations

Proposal Process

Week 1

These were the two websites I had in my mind to do a redesign. This redesign proposal chose the second option, after careful consideration against another candidate, a French "shark" website primarily needing content organization changes. While that site presented challenges, this website exhibits more critical and pervasive issues. Its current layout suffers from pervasive overlapping images and a severe lack of visual presentation for its food and menu, resulting in terrible usability. Therefore, the clear winner of the choices between the two is the website that has more cons than pros, giving it to Sate Khas Senayan.

Chosen Website: https://sks.sarirasa.co.id/

When I started looking at the website, my first step was always to perform a thorough User Experience (UX) assessment.

My observations have shown that :

The overall usability felt clunky, with navigation being unintuitive and key actions often hidden or unclear.
Aesthetically, the visual design felt jarring, with overlapping elements and a general lack of polish that didn't reflect the brand's quality.
The biggest red flag was the complete inaccessibility on mobile devices – that's a non-starter in today's digital world. I also saw the poor contrast from the terracotta text and missing image descriptions.
I experienced slow loading times and could tell there were underlying technical issues impacting performance.

Once I had a clear picture of the problems, I thought about what the ideal state of the website would be. Each major challenge directly informed a strategic goal:

Because of the aesthetic and engagement issues, I knew we needed to Elevate Visuals & Engagement.
The confusing navigation and content flow led directly to the goal of Content Organization
To combat the slow speeds and ensure stability, I made the goal for Optimize Speed & Desktop Reliability.
Finally, the critical mobile problem absolutely proposed the goal to work on the Mobile responsiveness

My Rationale Process Thinking

When it came to writing the rationale, I really focused on a couple of key ideas to explain why this specific redesign is happening. My thinking began by pinpointing why this particular website was the priority, given its critical issues with layout, visuals, and overall usability. From there, I focused on the main goal: to genuinely upscale their brand identity by improving core aspects like layout, navigation, and user experience. I also made sure to highlight how refining their traditional warm color palette would enhance readability while preserving their authentic heritage, blending problem-solving with brand essence in one clear statement.

Final Submission :

( https://drive.google.com/file/d/1ts5nS-bX3ynq0Bq2tzpwUGlwHVc-pKuG/view?usp=sharing )

III. FEEDBACK

Week 5

I had a short consultation about the website I've chosen. I'd just learned about wireframes in class, so it was good timing to get some real feedback.

The main takeaway was about the menu layouts. It was pretty clear that the area needed a lot of improvement. The biggest priority now is getting images for the menu items onto the page. That's a top focus that strengthened my previous goals and objectives.

Week 6

The biggest piece of feedback was a clear warning about using Pinterest for inspiration. Sir explained that while it's fantastic for general visual ideas, those concepts often don't pop up nicely in prototype or redesigning as they don't key in factors for coding.

Instead of Pinterest, the new direction was to look at more local places online. My goal became to understand how they framed images within their menus. I specifically focused on finding examples that managed to show food appealingly, providing just enough visual information without being too much or making the user feel overstimulated.

IV REFLECTION

Experience :

This task allowed me to transform the ideas, not for one stop but continuously modified in response to particular feedback and new requirements. I was constantly challenged to think critically when I had to adjust to changes, like shifting image contexts or improving technical details.

Observation:

I saw how crucial it is to provide clear instructions and ongoing feedback. The output was greatly influenced by even small requests, such as changing perspective or condensing text, highlighting the iterative nature of design communication. It was crucial to divide intricate proposals into manageable chunks and provide clear explanations for every design decision.

Findings:

My main takeaway from this assignment is how important flexibility is to design communication. When it comes to the wireframes, layout, and other ideas that needed to be conceptualized, I realized the the key desire to push concepts from abstract ideas to workable, user-centered solutions by iterating and improving them in response to feedback.

Search This Blog

Jesslyn Octavia Tjong (0374562)