Interactive Design | Project 1 : Website Redesign Proposal
April 21,2025
ZHOU BOYING / 0369087
21/04/2025 - 01/06/2024(Week 1 - Week 6)
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Project 1 : Prototype Design
LIST
1. Lectures
2. Instructions
4. Project 1 : Prototype Design
5. Reflections
Lectures
In this week’s physical class, Mr. Shamsul introduced us to the fundamental structure and elements of an HTML document. We learned how to write semantic HTML using the correct structure:
The HTML document starts with <!DOCTYPE html>, followed by <html>, <head>, and <body>.
The <head> section includes the <title> and can contain links to CSS or fonts (e.g., Google Fonts).
All visible content (such as paragraphs, headings, lists, images, and links) must be placed within the <body> section.
We practiced using the following HTML tags:
Tag Purpose
<h1> to <h6> Headings of different levels
<p> Paragraphs
<b> Bold text
<i> Italic text
<hr> Horizontal line (used for section break)
<br> Line break
<ul>, <ol> Unordered and ordered lists
<li> List items
<a href=""> Hyperlinks with attributes like target="_blank"
Mr. Shamsul emphasized the importance of proper tag nesting, tag closure, and using attributes inside opening tags (e.g., href, src, alt). He reminded us that:
Each HTML document should have only one <head> and one <body>.
Tags like <hr> and <br> are self-closing.
Attributes always appear in the opening tag, and are written in the format name="value".
Class Activity
We were instructed to complete a simple HTML file with the following structure:
A page <title>
<h1> heading for name
<h2> for a fun fact or nickname
A <p> to introduce ourselves
A <p> to introduce our family
Use of at least one <b> and one <i>
A <hr> to separate sections
Lists:
<ul> of 3 hobbies
<ul> of 3 movies
<ul> of 3 foods
<ol> of 3 personal goals
Use <br> for line breaks when needed
This class gave me a solid foundation in writing HTML by hand. I now understand how web pages are structured and how to use different tags for layout and formatting. The practice helped me learn not only the syntax but also the logic of how browsers read and render content. I feel more confident in building a basic webpage and look forward to applying these skills in future design projects.
n this class, Mr. Shamsul taught us how to use Adobe Dreamweaver for basic HTML web design. We learned how to set the background color of a webpage, change font styles and colors, and insert images using simple HTML tags such as <p>, <h1>, <img>, and <a>. He also introduced us to the use of block-level elements like headings and paragraphs, and inline elements such as bold and italic text.
Mr. Shamsul explained how to apply unique IDs and reusable classes to HTML elements, allowing us to control styles precisely through CSS. We explored how CSS works with selectors and declarations, where each rule defines how a specific element should appear—for example, changing font families, setting text color, or adjusting layout spacing. We also learned the differences between internal and external CSS stylesheets, and how to link a CSS file using the <link> tag in the <head> section of an HTML document.
This session helped me understand how visual elements like text, color, and images are arranged to create a clear and structured layout. Mr. Shamsul also emphasized the importance of alignment, spacing, and visual balance in web design, which made me more aware of how design choices affect user experience.
Using Dreamweaver made the learning process easier because it allows us to see the visual outcome of our code instantly. It gave me a better grasp of HTML structure and how CSS styles can transform a plain page into something more polished and engaging. I found it very helpful as a beginner, and I’m excited to explore more features like linking pages, creating navigation bars, and adding interactive elements in future lessons.
Overall, it was a great introduction to the visual side of web design, and I look forward to improving my HTML and design skills further.
In this week’s Interactive Web Design class, the lecturer first guided us on how to create and manage a website project in Dreamweaver. This included setting up a project folder, defining the site location, and creating a new HTML file named index.html. We then learned the basic structure of an HTML document: inserting a <header> with an <h1> element assigned a unique id, and adding a <nav> section containing an ordered list (<ol>) with four items—Home, About, News, and Contact—each given a class name nav-link for styling purposes. The structure was further expanded by adding a <section> element containing two paragraphs, with the first paragraph using the class first-para, and a <ul> with the class list. We also created a simple form with input fields and two buttons (submit and reset), and ended the HTML layout with a <footer> that included a copyright symbol. The second part of the lesson introduced CSS, where we used the CSS Designer panel to create and link an external stylesheet (style.css). The instructor demonstrated how to style the buttons by applying background colors, borders, border-radius, hover effects, and cursor styling using the :hover pseudo-class and cursor: pointer. Finally, we were assigned homework to complete the HTML and CSS structure following the instructions inside the file and bring it back next week for review. The lecturer also mentioned that the next lesson would cover the CSS box model and how to use it for web layout.
Instructions
Eexercise
1）Class Exercise
Class Activity Description
ENGLISH：
In this week's class, we practiced writing a basic HTML page based on the structure and tag rules introduced by Mr. Shamsul. The class activity required us to include a page title, headings, paragraphs, a horizontal line, bold and italic text, and several lists (unordered and ordered). We also learned how to insert hyperlinks using the <a> tag and apply attributes like href and target.
I completed the following HTML page content as part of the hands-on class task:
- Page <title> and <h1> with my name
- <h2> with a nickname
- Introduction paragraphs using <p>
- One <b> and one <i> tag
- A hyperlink to my blog
- Section break using <hr>
- <ul> lists of hobbies, movies, foods
- <ol> list of personal goals
- <br> to improve spacing
This exercise helped reinforce my understanding of HTML syntax and web structure.
Final Self-Introduction 1
2）Class Exercise
In this class, Mr. Shamsul taught us how to use Adobe Dreamweaver to design a basic webpage using HTML and CSS. We learned how to set background colors, change fonts, insert images, and use tags like <p>, <h1>, and <img>. He also introduced ID and class attributes for styling, and explained the difference between block and inline elements.
We applied these skills by creating a Personal Introduction Page, where we wrote about ourselves, our family, and our favorite hobbies, foods, and movies. This hands-on task helped me understand how layout, color, and structure work together in web design. Using Dreamweaver made it easier to visualize the webpage and see changes in real time. It was a fun and meaningful way to learn HTML and CSS basics while expressing my personality through design.
Project 1: Website Redesign Proposal — Pacific Coast Fence
In this project, I selected the official website of a fence service company based in California — Pacific Coast Fence — as the subject for redesign.
The current website has several issues in terms of design and user experience, including:
Outdated layout
Inconsistent typography and color scheme
Poor mobile responsiveness
Overloaded content that’s hard to scan
Lack of interactive features (such as contact forms or CTA buttons)
After analyzing the site, I proposed a new visual style and UX improvements.
The goal is to enhance the website’s usability, aesthetics, and functionality.
Link to Proposal
Comments
Post a Comment