Interactive Design / Project 1: Website Redesign Proposal
14/5/2025 - 27/5/2025 (Week 4 - 6)
Rachel Ng Jie Ting/ 0378902
Bachelors of design (Honours) in creative media
Interactive Design / Project 1: Website Redesign Proposal
Table of content
Week 4 : Web StandardsLectures
Week 4 : Web Standards
Fig 1.1 - Week 4 Lecture slide
To summarise: Basic knowledge of HTML language and how the web works.
Some notes:
Screen resolution - The number of pixels a display, like a
monitor or screen, can show. (Pixel width and height)
HTML (HyperTextMarkup Language) - a markup language used to
structure the content of a web page,
CSS (Cascading Style Sheets) - used to style and visually lay out
the content on a web page.
Opening tag - <p>
Closing tag - </p>
First file of html must always be index.html.
Week 5 : ID and Class attribute
Fig 1.2 - Week 5 Lecture slide
To summarise: Extra Markup on HTML and introduction to CSS
Some notes:
CSS method precedence (aka Priority)
3 methods: inline > internal > External > Browser default
Week 6 : CSS Selectors
Fig 1.3 - Week 6 Lecture slide
To summarise: Types of CSS Selectors and Why There Are Many
Selectors
Some 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.
They are a crucial part of web development because they
enable you to control the presentation and layout of your
web pages.
Week 7 : Box Model
Fig 1.4 - Week 7 Lecture slide
To summarise: The Display Property, Box Model, and Flexbox
Some notes:
The Display Property
Display is CSS's most important property for controlling
layout.
Every element has a default display value depending on what
type of element it is.
The default for most elements is usually block or inline.
Box Model in CSS
Most HTML elements are containers. Consider some of the HTML
elements we've used so far: body, p, h1, h2, div, ul, ol, li.
Each of these is a container, or box.
Each box has three layers that surround its content. The layers
are, in order from inside to outside:
• Padding
• Border
• Margin
Tutorials
Tutorial 1: Html basics - Making a simple webpage
Create:
A page title (shown in browser tab).
A main heading <h1> with your name.
A subheading <h2> for a short nickname or fun fact.
A short paragraph <p> to introduce yourself.
A short paragraph <p> to introduce your family.
Use at least:
- One bold word (e.g. your hobby)
- One italic word (e.g. your favorite quote or food)
- Add a horizontal line <hr> to separate sections.
Create a section with:
- An unordered list <ul> of your favorite 3 hobbies.
- An unordered list <ul> of your favorite 3 movies.
- An unordered list <ul> of your favorite 3 foods.
- An ordered list <ol> of 3 goals you want to achieve this year.
- Add some <br> line breaks where necessary to make it more readable.
--------------------------------------------------------------------------------------
Getting started
During class we were instructed to create a simple webpage by writing the html code on notepad. Below is my work, and how it shows up on the web browser.
Fig 2.1 - Html code in notepad
Fig 2.2 - Webpage view on google chrome
In the next class, we learned how to work in Adobe
Dreamweaver. I have learned how to make the background of my
webpage pink and the heading font blue.
Fig 2.3 - Learning how to customize and arrange
elements in Dreamweaver
--------------------------------------------------------------------------------------
Tutorial 2: CSS basics
Getting started
In this class, we created a new webpage called 'Selector
tutorial'. This webpage is for us to learn and practice on
CSS (Cascading style sheet). I have learned how to
decorate specific elements in my webpage. Below is my work, and how it shows up on the web
browser.
Fig 2.4 - Html code view in Dreamweaver
Fig 2.5 - CSS code view in Dreamweaver
Fig 2.6 - Webpage view on google chrome
Instructions
Module Information Booklet
Project 1: Website Redesign
Proposal
Getting started
For this project, we are tasked with select an existing website which
we 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
Here is my website redesign proposal I have done using Canva.
Project 1 - Website Analysis
by Rachel Ng
Fig 3.1 - Project 1 - Website Analysis Canva presentation
Feedback
Week 4
General feedback : -
Specific Feedback : Good work
Week 5
General feedback : -
Specific Feedback : Good work
Week 6
General feedback : -
Specific Feedback : Good work
Comments
Post a Comment