Interactive Design | Project 1 : Website Redesign Proposal
April 21,2025
ZHANG TIANYAO/0376838
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
3. Exercise
4. Project 1 : Prototype Design
5. Reflections
Lectures
Week 4
Physical Class
During this week’s physical class, Mr. Shamsul introduced us to the core structure and elements of an HTML document. We learned that every HTML file begins with <!DOCTYPE html>, followed by the <html> tag, which contains <head> and <body> sections.
The <head> area includes the page <title> and can link to external resources like CSS files or fonts (such as Google Fonts). The visible webpage content must be contained within the <body> tags.
For practice, we used several fundamental HTML tags:
<h1> to <h6> for headings of various sizes,
<p> for paragraphs,
<b> for bold text,
<i> for italics,
<hr> for horizontal lines (used to divide sections),
<br> for line breaks,
<ul> and <ol> for unordered and ordered lists,
<li> for list items,
<a href=""> for hyperlinks, with attributes like target="_blank".
Proper nesting and closing of tags are crucial. Self-closing tags like <hr> and <br> do not need a separate closing tag. Attributes appear inside the opening tags and are written in name="value" format.
Class Activity:
Create a basic webpage that features a title, a main heading (<h1>), a nickname or fun fact (<h2>), and introduction paragraphs about yourself and your family, including use of <b> and <i>. Use <hr> to separate content, craft lists of hobbies, favorite movies, and foods, and list your personal goals in an ordered list. Line breaks (<br>) can be added for proper formatting.
This activity helped me understand how webpages are structured and how browsers interpret and display HTML content. I now feel more confident in creating simple yet well-structured web pages for future projects.
Week 5
Physical Class
In this lesson, Mr. Shamsul guided us through using Adobe Dreamweaver to create basic HTML websites. We discovered how to change background colors, modify font styles and sizes, and add images by using simple tags like <p>, <h1>, <img>, and <a>. He also explained the difference between block-level elements such as headings and paragraphs, and inline elements like bold and italic text.
He further taught us how to assign unique IDs and reusable classes to HTML components, which allows us to tweak their styles accurately with CSS. We delved into how CSS operates with selectors and property-value pairs, which specify how certain elements should look—whether it's changing fonts, colors, or spacing. Additionally, we learned about internal versus external CSS stylesheets and how to connect an external CSS file to an HTML page using the <link> tag inside the <head>.
That session deepened my understanding of how visual elements—such as text, colors, and images—are arranged to produce an organized and appealing webpage. Mr. Shamsul highlighted the importance of alignment, spacing, and overall visual harmony in web design, making me more conscious of how aesthetic choices influence user interaction.
Working with Dreamweaver streamlined the learning process because it instantly shows the visual result of our code, helping me grasp HTML structure better and see how CSS styles can enhance a plain webpage into a more professional-looking design. As a beginner, I found it very valuable, and I am eager to learn more about linking pages, creating navigation menus, and adding interactive features in future lessons.
All in all, this class offered a comprehensive introduction to the visual aspects of web development, and I look forward to improving my skills in HTML coding and design.
Week 6
Physical Class
In this week’s Interactive Web Design class, our instructor started by showing us how to set up and manage a website project in Dreamweaver. We learned to organize a project folder, specify the site location, and create a new HTML file named index.html. Next, we explored the fundamental layout of an HTML document: we added a <header> section containing an <h1> element with a unique ID, and a <nav> section that included an ordered list <ol> with four items—Home, About, News, and Contact—each assigned the class nav-link for styling.
We expanded our structure with a <section> element holding two paragraphs; the first paragraph was given the class first-para. We also created a <ul> with the class list. Additionally, we designed a basic form with input fields and two buttons — submit and reset — and concluded the code with a <footer> that displayed a copyright symbol.
In the second part, the focus shifted to CSS. Using the CSS Designer panel, we linked an external stylesheet (style.css) and styled the buttons by applying background colors, borders, border-radius, hover effects, and cursor styles with the :hover pseudo-class and cursor: pointer.
Our homework was to complete the HTML and CSS code following the provided instructions and bring it back next week for review. The instructor also mentioned that the next lesson would cover the CSS box model and its use in web layout design.
Instructions
Exercise
For the practical task, I built an HTML page with the following content:
A <title> and an <h1> heading with my name
An <h2> with my nickname
Introduction paragraphs wrapped in <p> tags
One <b> and one <i> tag for emphasis
A hyperlink to my blog, using <a> with href and target attributes
A <hr> tag to create a section separation
An <ul> list showcasing my hobbies, movies, and foods
An <ol> list outlining my personal goals
<br> tags to improve spacing between elements
This exercise helped me strengthen my understanding of HTML syntax and webpage structure, making me more confident in building simple web pages.
In this lesson, Mr. Shamsul demonstrated how to use Adobe Dreamweaver for creating a simple webpage with HTML and CSS. We learned to set background colors, customize fonts, insert images, and utilize tags such as <p>, <h1>, and <img>. He also explained the usage of ID and class attributes to style elements and clarified the difference between block-level and inline elements.
To practice these skills, we designed a Personal Introduction Page where we wrote about ourselves, our family, and our favorite hobbies, foods, and movies. This practical activity helped me see how layout, colors, and structure work together in web design. Using Dreamweaver allowed me to visualize my webpage easily and see the effects of my changes immediately. It was an engaging and educational introduction to HTML and CSS, giving me a chance to express my personality through the webpage design.
In this project, I used the UK website https://www.innocentdrinks.co.uk/ as the prototype for my redesign of the Pacific Coast Fence website.
Too much information: The page content is rich, but some information is crowded, which may make users feel overwhelmed. It is recommended to optimize the information architecture and layout.
Responsiveness: On some devices, the responsive layout may need further improvement to ensure smooth browsing across various screen sizes.
Loading speed: Due to the many images, the website’s loading speed might be affected. It is advisable to compress and optimize images to improve the user experience.
Link to Proposal
Reflections
Engaging in Project 1 was instrumental in expanding my skills in web development. I started by practicing writing HTML tags manually, focusing on creating meaningful and accessible content. Transitioning to Dreamweaver, I applied my knowledge to style pages efficiently, experimenting with layout and design elements. Developing a personal biography webpage helped me develop a more intuitive sense of visual hierarchy, while redesigning an existing site gave me practical experience in assessing usability and aesthetics. Additionally, I utilized Canva to produce presentation slides for my project proposals, which sharpened my ability to convey ideas visually. Overall, this experience has not only strengthened my technical expertise but also fostered my creative problem-solving skills, preparing me to approach future projects with confidence.
Comments
Post a Comment