Project 1: Website Redesign Proposal
23/04/2025 – 28 /05/2025 (Week 1 – Week 6)
Valerius Ethan Wirawan / 0372774
Interactive Design / Creative Media / School of Design
Project 1: Website Redesign Proposal
TABLE OF CONTENT
1. LECTURES
Web Standards
-
Early web access was via keyboard, mouse, and monitor, but now includes mobile devices, tablets, and audible interfaces.
-
Users may rely on various browsers (e.g., Internet Explorer, Firefox, Chrome, Opera, Safari) and operating systems (Windows, Mac OS, Linux) with different screen resolutions.
-
Websites can appear differently to users; the content must be accessible to all.
-
Web standards, set by the World Wide Web Consortium (W3C), ensure consistency and accessibility. Key standards include HTML and CSS.
-
Following standards simplifies development and ensures compatibility across browsers and devices.
How the Web Works
-
Users connect to the web via an Internet Service Provider (ISP).
-
Typing a domain name (e.g., www.google.com) prompts the computer to contact DNS servers, which resolve the domain to an IP address.
-
The browser uses the IP address to contact the web server, which sends the requested page back to the browser.
Structure of a Web Page
-
Web pages, like documents (newspapers, forms), rely on structure for clarity.
-
Structure is conveyed using headings, subheadings, and paragraphs, reflecting a hierarchy of information.
-
HTML describes this structure using elements (tags) inside angle brackets (e.g.,
<element>content</element>). -
Elements often have attributes providing extra information (e.g.,
<p lang="en-us">)1
Key HTML Elements
-
Headings: Six levels,
<h1>to<h6>, indicate importance and hierarchy. -
Paragraphs:
<p>tags wrap blocks of text. -
Bold and Italic:
<b>for bold,<i>for italic, used for emphasis or different voice. -
Lists:
-
Ordered lists (
<ol>) for numbered steps. -
Unordered lists (
<ul>) for bullet points. -
List items use
<li>. -
Lists can be nested for sub-lists1
-
Links and Images
-
Links:
<a href="URL">text</a>creates hyperlinks, withhrefspecifying the destination. -
Images:
<img src="path" alt="description" title="tooltip"/>embeds images, withsrc,alt, andtitleattributes. The<img>tag is self-closing and only uses attributes.
WEEK 5: HTML & CSS
ID and Class Attributes
-
ID Attribute:
-
Every HTML element can have an
idattribute, which must be unique within the page. -
IDs allow specific elements to be targeted for unique styling or scripting.
-
Example:
<p id="special">This paragraph is unique.</p>.
-
-
Class Attribute:
-
Every HTML element can also have a
classattribute. -
Classes are used to group elements for common styling or identification.
-
Multiple elements can share the same class value.
-
Example:
<p class="important">This is important.</p>.
-
-
Effect on Presentation:
-
By default,
idandclassattributes do not change how an element looks. -
Their appearance only changes if CSS rules are applied to those attributes.
WEEK 6: HTML Structure & Core Elements
HTML Document Structure
-
Every HTML document has a standard structure that includes essential elements to define the page's content and metadata.
-
The basic structure typically looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- The text goes here. This code won't show up on the outcome -->
</body>
</html>
-
<html>: The root element that wraps the entire content. -
<head>: Contains metadata, such as the document title and links to stylesheets or scripts. -
<title>: Sets the title shown in the browser tab. -
<body>: Contains all the visible content of the page.
Block vs. Inline Elements
-
Block-level elements start on a new line and take up the full width available.
Examples:<div>,<p>,<h1>,<ul>,<section> -
Inline elements do not start on a new line and only take up as much width as necessary.
Examples:<span>,<a>,<strong>,<img>
Semantic Elements
Semantic elements clearly describe their meaning in a human- and machine-readable way.
Examples:
-
<header>: Defines a header for a document or section. -
<nav>: Contains navigation links. -
<main>: Specifies the main content of the document. -
<section>: Defines sections in a document. -
<article>: Represents a self-contained composition. -
<footer>: Defines a footer for a document or section.
Nesting and Hierarchy
-
HTML elements can be nested within each other to create a hierarchy and structure.
-
Proper nesting ensures the document is well-formed and renders correctly in browsers.
Example:
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Subitem 2.1</li>
</ul>
</li>
</ul>
Attributes Recap
Elements can have attributes that provide additional information.
Common attributes:
-
id: Uniquely identifies an element. -
class: Groups elements for styling or scripting. -
lang: Specifies the language of the content. -
href: Sets the destination URL for links. -
src,alt,title: Used in images for source, alternative text, and tooltips.
Best Practices
-
Use proper HTML structure for clarity and accessibility.
-
Use semantic elements to improve SEO and support for assistive technologies.
-
Use unique
idvalues and meaningfulclassnames for easier maintenance. -
Use attributes effectively to enhance both functionality and accessibility.
2. INSTRUCTION
3. PROJECT 1: WEBSITE REDESIGN PROPOSAL
4. FEEDBACK
5. REFLECTION
Experience
Crafting the Website Redesign Proposal, I learned more about web design basics such as HTML tags for structure and CSS for styling, as well as user experience best practices. I began by learning the lecture materials which covered semantic elements, web standards and the difference between block and the inline elements. This allowed me to notice holes in the design and user interface of the site that was chosen.
We found it helpful to generate and share a Table of Contents early on. It gave me the opportunity to decide on the format of the proposal and to get some initial feedback from the teacher. And thank you for the reminder to never stop turning back to the task brief, which helped in keeping my proposal on track and on task.
Observation
After inspecting the current website, I found several problems with it: unclear navigation, layout inconsistencies and non-responsive design. I noticed that there were still a good number of sites that paid no attention to semantics (which isn't great for accessibility, SEO etc). This made me understand that web design is not only about being pretty but it is also about being functional and inclusive.
It also gave me a greater appreciation for web standards (like those defined by the W3C) and how they help improve accessibility and consistency across various devices and browsers. This is absolutely necessary in today's multi-platform digital landscape.
Findings
From this project I learned the importance of blending technical precision and creative problem-solving. Semantic HTML, good IDs and classes and structure for structure’s sake all contribute to better functionality and design. I realised the importance of early critical feedback to help steer the project and prevent the design deviating from the brief.
In general, this project taught me to see web design in a different light. It pushed me to think past visuals and into user experience, site structure and accessibility.
Comments
Post a Comment