Interactive Design - Project 1 : Website Redesign Proposal
26/10/2025-5/10/2025 / Week4-Week6
Tan Tzu Yu / 0374460
Interactive Design / Bachelor of Design (Honors) in Creative Media / Taylor's University
Website Redesign Proposal
LECTURE NOTES
In today’s class, we explored how to enhance a webpage by adding background designs, images, and tables.
First, we learned how to apply background colors and images to make a page more visually appealing. For free, high-quality photos, we can use Pexels.com, which offers a wide variety of choices.
Next, we went through how to import images into our webpage, followed by how to create and style tables using HTML and CSS.
[ Background Design ]
<body style="background-image: url(images/img-bg.jpg);
background-repeat: no-repeat;
background-size: cover;">
This code sets a background image for the webpage.
• background-repeat: no-repeat; makes sure the image doesn’t tile.
• background-size: cover; ensures the image fills the whole screen nicely.
[ Importing an Image ]
<img src="images/img-profile.jpg"
alt="My Profile Picture"
title="My Profile Picture"
width="30%">
This code adds an image to your webpage.
• The alt text describes the image if it doesn’t load.
• The title shows a tooltip when you hover over the image.
• The width adjusts the image size.
[ Table Design ]
<table border="2" width="60%" cellpadding="5" cellspacing="2"
style="border-collapse: collapse; background-color: antiquewhite;">
<tr style="background-color: cadetblue;">
<th colspan="4">My Timetable</th>
<th rowspan="2">Tue</th>
</tr>
</table>
Here, we learned how to:
• Add borders and background colors.
• Use colspan to merge columns and rowspan to merge rows.
• Style tables with colors to make them more readable and attractive.
 |
| Fig 1.0: Webpage in safari 1 |
 |
| Fig 1.1: Webpage in safari 2 |
[Extra Markup for ID Attribute]
Unique Identification: Every HTML element can carry an ID attribute, which uniquely identifies that element from others on the page. This uniqueness is crucial; no two elements should have the same ID value. If they do, the ID loses its uniqueness.
Styling Flexibility: Assigning a unique ID allows you to style that specific element differently from others. For instance, if you want one paragraph to have a distinct style compared to other paragraphs, you can achieve that through its ID.
[Extra Markup for Class Attribute]
Multiple Identifications: Every HTML element can also have a class attribute. This attribute is useful for grouping several elements that require similar styling, distinguishing them from others.
Shared Class Values: Elements can share the same class name, allowing for collective styling. For example, if you have multiple paragraphs that contain crucial information, you can assign them the same class for similar formatting.
[ID and Class Attribute Overview]
Presentation Independence: By default, using ID and class attributes does not change an element's appearance. Their visual impact is only realized if paired with a CSS rule that dictates how they should be styled.
[Extra Markup Block and Inline Elements]
-Block Elements
Definition: Block-level elements always begin on a new line in the browser. They take up the full width available, causing subsequent elements to move to a new line.
Examples: Common block elements include
<h1>,<p>,<ul>, and<li>.
-Inline Elements
Definition: Inline elements do not start on a new line; instead, they continue on the same line as neighboring elements. This allows them to be embedded within block elements.
Examples: Key inline elements include
<b>,<i>,<em>,<a>, and<img>.
[Introducing CSS]
Purpose: CSS (Cascading Style Sheets) creates rules to determine how an element's content should appear. For example, you might specify that your page's background is cream, all paragraphs appear in gray using Arial font, and all headers are displayed in blue, italic Helvetica.
[CSS Style Rules with HTML Elements]
Structure: A CSS rule consists of two parts: a selector and a declaration.
Selector: Indicates the HTML element(s) to which the rule applies. For example,
p { font-family: Arial; }means all<p>elements will use Arial typeface.Declaration: Specifies how the element should be styled, broken down into property-value pairs.
[CSS Properties Affect How Elements Are Displayed]
Components: CSS declarations are encased in curly brackets and consist of properties and values separated by colons. Multiple properties can be included in a single declaration, each separated by a semi-colon.
Example:
h1, h2, h3 { font-family: Arial; color: yellow; }indicates that all heading elements (<h1>,<h2>, and<h3>) will use Arial font in yellow color.
[Methods to Employ CSS]
-Using External CSS via <link>
Link Element: An HTML document can use the
<link>element within the<head>section to link to an external CSS file.Attributes required:
href: Specifies the path to the CSS file.
type: Indicates the document type, typically set to
text/css.rel: Describes the relationship between the HTML page and the linked file, usually set to
stylesheet.
Multiple Styles: An HTML page can link to more than one CSS stylesheet, allowing different styles for presentation (fonts and colors) and layout.
-Using Internal CSS via <style>
Style Element: CSS rules can also be included directly within an HTML page using a
<style>element in the header.Type Attribute: The
<style>element should specify its type astext/css.
Advantages of External Styles: Using external CSS enables consistent styling across multiple pages without the need to repeat the same code. This separation helps manage and apply changes easily.
[CSS Color and Background]
Text and Border Colors: CSS allows you to set colors for text and borders.
Background Features:
Set background color.
Use background images.
Control background repeat and attachment options.
[CSS Text Formatting]
Text Properties: CSS provides various properties for text formatting, including:
Color: Changes the color of the text.
Alignment: Specifies how text should be aligned.
Decoration: Used for underlining or striking out text.
Transformation: Alters the case of the text.
Spacing: Adjusts spacing through
text-indent,letter-spacing, andword-spacing.Text Shadow: Adds shadow effects to text.
[CSS Fonts]
Web Safe Fonts: Below is a list of the best web safe fonts for HTML and CSS:
-Verdana (Sans-Serif)
-Tahoma (Sans-Serif)
-Trebuchet MS (Sans-Serif)
-Times New Roman (Serif)
-Georgia (Serif)
-Garamond (Serif)
-Courier New (Monospace)
-Brush Script MT (Cursive)
Adding Fonts: CSS also supports adding fonts through services like Google Fonts for enhanced styling options.
PROJECT 1 : WEBSITE REDESIGN PROPOSALObjective:
The objective of this assignment is to develop a comprehensive proposal for the redesign of an existing website. The proposal should
demonstrate our ability to critically evaluate a website’s design and functionality, and to propose design solutions that enhance user experience, aesthetics, and performance. Assignment Description:We 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 our ideas for the new visual design, including visual references, mood board and wireframes. Discuss the rationale behind our 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 our E-portfolio link that includes an embedded link of your proposal. The proposal can be prepared using any form ofpresentation application such as Google Slide or Canva
My selected website is La Cornue (https://lacornue.com/en-GB), it is a French company that produces luxury kitchen appliances, offering a range of products from professional-grade ranges and rôtisseries to kitchen accessories. It serves as a platform for customers to explore their high-end product lines, view design customization options, find inspiration, and learn about the brand's history of craftsmanship and culinary excellence.
Fig 1.0: La Cornue website
link to my website redesign proposal : https://drive.google.com/file/d/15c0L76ff2pmqg7pYE58n8e7F7jTFDOSX/view?usp=sharing
The objective of this assignment is to develop a comprehensive proposal for the redesign of an existing website. The proposal should
demonstrate our ability to critically evaluate a website’s design and functionality, and to propose design solutions that enhance user experience, aesthetics, and performance.
devices, or improving load times
Submission:
 |
| Fig 1.0: La Cornue website |
Comments
Post a Comment