Interactive Design - Project 1 Proposal

May 05, 2025

Interactive Design - Project 1 Proposal

14/5/25 - 26/5/25 (Week 4 - Week 6)
Anggia Tsani Rachmadiyanti, (0368487)
Interactive Design / Bachelor in Design (Hons) in Creative Media / Taylor's University
Task: Project 1: Web Proposal

CONTENT LIST

Lecture notes
Link of Chosen Website to redesign
Brief & Instructions
Class HTML exercise
Project 1 - Web Redesign Proposal
Feedback
Reflection
Further Reading

LECTURE NOTES:

Lecture 4: The Web (Intro to HTML Coding)

Web Standards - core set of rules for developing websites.
The most important part of your website is its content, and all users should be able to access that.
The standard markup languages we'll be: HTML & CSS

HTML DESCRIBES THE STRUCTURE OF PAGES
To describe the structure of a web page, we add code to the words we want to appear on the page.
The HTML code is made up of characters that live inside angled brackets <>
These are called HTML elements
Elements are usually made up of two tags: an opening tag and a closing tag
<element>Information</element>
Each element tells the browser something about the information that sits between its opening and closing tags.

Headings Notes:

<h1> main heading
<h2> subheadings
<h3> sub subtitle
(only until h6)
<p> blablabla... </p>
include <b> for bold
<i> for italic
ordered list : <ol>
unordered list : <li>
links : <a href="http://www.oreo.com">TEXT DISPLAY</a>
alternative image : <img src="img", alt ="alt img", NAME OF IMAGE>

Lecture 5: CSS Intro Brief Notes

CSS3, HTML5 Are what we are using now.
Closing tag ends that specific element, so other content wont follow that format.
CSS allows you to create rules that specify how the content of an element should appear
A CSS rule contains two parts: a selector and a declaration
CSS declaration sit inside curly brackets and each is made up of two parts; a property and a value, separated by a colon.
There are some fonts that are already installed and can be instantly used for css already but we can use google fonts and install new fonts if we want to.

Lecture 6: CSS Brief notes

CSS (Cascading Style Sheets) selectors are a fundamental part of CSS that allow you to target and style HTML elements on a web page.
Selectors are used to define which elements should receive specific styles, such as colors, fonts, spacing, and more.
CSS enable you to control the presentation and layout of your web pages.
Universal Selector: Selects all elements on the page. It's represented by an asterisk (*). Use it with caution, as it can affect all elements and lead to inefficient CSS.
Other types of selectors: Element, ID, Class, Descendant, Child, Pseudo-class, Pseudo-element.

Why There Are Many Selectors:

Specificity: Different situations may require different levels of specificity when selecting elements.
Structure: Web pages often have complex structures with nested elements.
Attribute-Based Selection: You may want to style elements based on their attributes or attribute values.
Pseudo-Classes and Pseudo-Elements: These selectors help you style elements based on their state or position within the document.
Responsive Design:enable you to apply different styles to elements based on the user's device characteristics, such as screen size, orientation, or resolution.
Stateful Interactions: Selectors like :focus, :active, and :checked allow you to style elements based on user interactions.
Cross-Browser Compatibility: Different web browsers may interpret and apply CSS rules differently.
Ease of Maintenance
Accessibility: Properly structured and labeled HTML elements can be targeted and styled using CSS selectors to improve accessibility by providing styles that enhance readability and usability for individuals with disabilities.

Link of My Chosen Website :

https://www.rainbow-kennels.com/index.htm

Module Brief

Project 1: Web Proposal Instructions

Objective:

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: Submit your E-portfolio link that includes an embedded link of your proposal. The proposal can be prepared using any form of presentation application such as Google Slide, Canva or Microsoft PowerPoint.

HTML class exercise

In class (week 5), sir gave us several instructions for out first HTML try class exercise. We learned on opening and closing tags such as for Headings, Paragraphs, Lists, Section Line breaks, Formatting text to Bold and Italic and adding links and images.

FINAL WEB PROPOSAL CANVA SLIDES:

PROJECT 1 - PROPOSAL WEB REDESIGN 0368487 ANGGIA TSANI RACHMADIYANTI by Anggia Tsani.R

Click here to go to Canva slides

Backup PDF In Case Canva cannot open:

Project 1 - Feedbacks

Week 4 - Holiday wesak

Week 5 - We did our first exercise on html in class and started doing our proposal for our chosen website to redesign.

Week 6 - We were introduced to Dreamweaver in class. Sir said my work was good.

Project 1 - Reflection

To conclude, working on the Web Redesign Proposal has been both a challenging and rewarding experience. The process of analyzing an existing website critically and developing a redesign proposal not only enhanced my technical understanding of web design principles but also deepened my appreciation for the user’s perspective. At the beginning of the project, I selected a website that I personally found frustrating to use due to its poor navigation, cluttered layout, and outdated aesthetic. Identifying these UX and UI issues helped me better understand how even small design choices can significantly impact user experience.

One of the things I developed during this assignment was design thinking, being able to empathize with the user and propose solutions that not only look better but also work better. Through this lens, I was able to approach the redesign with clarity and purpose. I considered hierarchy, visual balance, mobile responsiveness, accessibility, and speed optimization in my solutions. Using Canva to present the proposal allowed me to practice visual storytelling. I focused on making my slides clean, engaging, and informative. I realized the importance of aligning visuals with verbal explanations to communicate ideas effectively, especially to an audience that might not have a design background.

If I were to do this project again, I would spend more time conducting user feedback sessions or surveys to back up my design decisions with real user input. Overall, this project strengthened my critical thinking, presentation skills, and my ability to propose meaningful, user-centered design solutions.

Search This Blog

Anggia Tsani Rachmadiyanti (0368487)