28/04/2025 - 05/05/2025
Interactive Design / Bachelors of Design (Honors) in Creative Media
/ Taylor's University
Samantha Kristalyn / 0373905
Project 1 - Proposal
JUMPLINKS
LECTURE NOTES
Introduction to HTML & CSS – Web Design Basics
Lecture 4: Understanding the Web and HTML
Creating a functional and accessible website starts with understanding the core building blocks of the web: HTML and CSS. At the heart of any website lies its content, and web standards exist to ensure that this content is accessible to all users, regardless of device or ability.
What is HTML?
HTML (HyperText Markup Language) is used to define the structure of web pages. It allows developers to organize content using tags, which are enclosed in angle brackets like < >. These tags are called HTML elements, and most come in pairs: an opening tag and a closing tag.
Example:
<p>This is a paragraph.</p>
Each element tells the browser how to display or treat the content it wraps.
Common HTML Tags
-
<h1> to <h6> → Headings (from most important to least)
-
<p> → Paragraphs
-
<b> → Bold text
-
<i> → Italic text
-
<ol> → Ordered list
-
<ul> → Unordered list
-
<li> → List item
-
<a href="https://example.com">Link Text</a> → Hyperlink
-
<img src="image.jpg" alt="Description"> → Image with alt text
HTML ensures your content is well-structured, easy to navigate, and accessible for users and search engines alike.
Lecture 5: Introduction to CSS
While HTML provides the skeleton of the web page, CSS (Cascading Style Sheets) controls the appearance — from fonts and colors to layout and spacing.
CSS Basics
A CSS rule consists of:
-
Selector → The HTML element you want to style
-
Declaration block → Contains styling rules wrapped in { }, made up of:
-
Property → What you're styling (e.g., color)
-
Value → The setting (e.g., blue)
Example:
h1 {
color: navy;
font-size: 32px;
}
This rule makes all <h1> headings appear navy blue and larger in size.
Fonts in CSS
CSS supports fonts already installed on devices. You can also add Google Fonts for a more customized and brand-consistent look by importing them into your stylesheet.
Lecture 6: CSS Selectors & Responsive Design
CSS selectors let you target specific elements on a page to style them precisely.
Common CSS Selectors
-
* → Universal selector (targets all elements)
-
p, h1, div, etc. → Element selectors
-
.className → Class selector (for reusable styles)
-
#idName → ID selector (for unique elements)
-
element element → Descendant selector
-
element > element → Direct child selector
-
:hover, :focus, :active → Pseudo-classes for user interaction
-
::before, ::after → Pseudo-elements for styling parts of elements
Responsive Design & Accessibility
With media queries, CSS allows you to adapt your layout for different screen sizes.
Example:
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
}
This ensures your website is easy to read on mobile devices. Accessibility is also improved by using well-structured HTML and CSS rules that support readability and usability for all users.
Final Thoughts
By combining HTML's structure with CSS's styling power, you can create websites that are both beautiful and functional. These two tools form the foundation of front-end web development, and mastering them is essential for building modern, user-friendly websites.
Week 4 (Wesak, Public holiday)
In-class HTML Coding
During Week 5's practical class, we were instructed to try out an HTML exercise. We learned how to use opening and closing tags for elements such as headings, paragraphs, lists, section breaks, as well as how to format text with bold and italic styles. Additionally, we covered how to add hyperlinks and images to a webpage.
Fig. 3.1, Week 5 In-class Activity
Week 6
In-class HTML Coding
On Week 6's class, Mr. Shamsul taught us on how to input our .html file from last week into Adobe Dreamweaver and he taught us how to change the background color and fonts.
He instructed us to get the fonts from Google fonts, after that, I changed the body text to Jost; and the headings to Playwrite Danmark Loopet.
Fig. 3.2, left: final website after modification; right: coding process in Adobe Dreamweaver.
INSTRUCTIONS
TASK
Project 1: Web Re-design 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:
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 or Canva.
Final Work
FEEDBACK
Week 4 (Wesak)
(Consulted on Week 3) I consulted the website that I am going to
re-design for this project.
He said that the website has a very old, 2000s set-up. Mr. Shamsul reminded
me to keep the color scheme since it is the theme / branding color of the
company unless I am planning to re-brand the whole thing which will be extra
work.
Week 5
-
Week 6
-
REFLECTION
The web redesign proposal task was a valuable chance to apply theoretical learning of user experience (UX) and visual communication to a real project. During this project, I had the chance to delve into not just the visual and structural components of web design but also the way these components align with user requirements, business objectives, and contemporary design principles.
One of the most significant parts of the task was carrying out a critical analysis of the current website. This step illuminated the significance of user testing and heuristic review in unlocking fundamental usability issues. It was understood that design is not merely a matter of appearance; it also encompasses functionality, ease of use, and users' confidence. I achieved the ability to think critically from the user's point of view, understanding how features such as navigation, hierarchy, layout, and responsiveness affect the overall user experience.
The process of suggesting a redesign required not only creative thinking but also methodical thinking. I had to support every design decision with evidence, drawing upon resources such as user experience best practices, user personas, or comparisons with competitor sites. This requirement motivated me to enhance my design rationale communication skills and make proposals in a professional and convincing way. Additionally, tools such as wireframes, mood boards, and site maps improved my visual communication significantly and facilitated the process of bringing abstract concepts to concrete results.
Moreover, the project enhanced my understanding of the inherently collaborative process in web undertakings. Even in a virtual environment, I had to think about how my contribution would be blended with that of developers, content strategists, and client stakeholders. Balancing user requirements with business goals needed a systematic, iterative process and not guesswork or personal biases.
In sum, this project enhanced both my people skills and my technical skills. It was a reminder that good web design is a holistic process—one that demands empathy, research, strategic thinking, and creative problem-solving. With each passing step, I feel more assured that I can carry out similar projects with a user-centered approach and a defined design process.
.png)
.png)
Comments
Post a Comment