Interactive Design | Project 2 : Working Web Page
April 21,2025
ZHOU BOYING / 0369087
01/06/2025 - 15/06/2024(Week 6 - Week 8)
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Project 2 : Working Web Page
LIST
1. Lectures
2. Instructions
3.Project 2 : Working Web Page
4. Feedback
5. Reflections
Lectures
In this week’s Interactive Design class, Mr. Shamsul gave us a home assignment to build a basic HTML webpage. Based on what we learned in class and additional references from w3schools.com, I created a personalized version of the “Pacific Coast Fence” website.
The webpage includes a semantic HTML structure, with elements such as <header>, <section>, and <footer>. I also designed a navigation bar, several paragraphs, a services list, and a styled contact form. By using external CSS, I enhanced the overall look with hover effects, rounded buttons, Google Fonts, and a Scandinavian-inspired color palette.
In addition, I added an “About Us” section featuring three curated images with short captions to showcase visual inspiration and layout balance. This task helped me understand not only how to write clean HTML and CSS, but also how to apply aesthetic principles to create a functional, well-structured webpage.
Week 7
In Week 7, Mr. Shamsul introduced the fundamental concept of the CSS Box Model and the display property, both of which are crucial for understanding web layout design. The lecture began with an explanation of how every HTML element behaves as a box, and how their visual structure is defined by the box model. This includes four main areas: content, padding, border, and margin. He clearly showed how these parts interact by using visual diagrams and live coding examples, helping us understand how spacing is controlled in CSS.
Next, we explored the display property. Mr. Shamsul emphasized the difference between block, inline, and inline-block elements, and how these types affect the positioning and flow of content. He also introduced more advanced display types like flex and grid, especially highlighting how display: flex is used to create flexible layouts that can easily align and distribute space among items.
He provided a practical demonstration using simple HTML and CSS, where he created a white background box with padding, a blue border, and controlled margin spacing. This helped us visually understand how changing padding and margin affects the layout. For example, a p tag styled with background-color: white; padding: 1em; border: 10px solid blue; margin: 10px would render a box with content clearly separated from other elements.
Lastly, the lecture touched on the basics of Flexbox, a powerful layout model. We learned how to use display: flex on a container and apply properties like justify-content and align-items to align child elements horizontally and vertically. This concept became particularly useful for designing centered navigation menus and placing multiple images in a row — both of which we applied in our practical tasks during the same week.
Week 8
In this week’s tutorial video, Mr. Shamsul introduced the process of designing interactive components using Figma, a collaborative web-based interface design tool. The lesson focused on creating a functional button with hover effects and smooth transitions, guiding us step by step through the design and prototyping process.
Key Content Covered:
Introduction to Figma
Figma is a powerful tool commonly used by UX/UI designers to create wireframes, prototypes, user journey maps, and mood boards. As it is web-based, it allows real-time collaboration between team members.
Button Component Creation
- A button was created using the Frame tool.
Padding, background color, border, and corner radius (e.g., 30px) were added.
Text was inserted into the frame, and the entire frame was turned into a reusable Component.
Adding Variants for Hover States
- A second variant of the button was created to represent the hover state.
The hover variant included a different fill color.
In Prototype mode, the interaction was set to trigger “While Hovering,” allowing the button to switch between default and hover states.
Applying Auto Animation
- The transition animation type was set to Auto Animate.
The default duration of 300ms was adjusted to 200ms for a quicker visual response.
- The hover effect was previewed and refined to create a smoother user experience.
Copying & Reusing Components
- The component was duplicated using Option/Alt + drag.
- Text inside each button copy could be edited individually.
- All instances automatically update when the original component or its variants are modified.
Prototype Structure Recommendations
Mr. Shamsul reminded us to ensure our prototype includes the key components of a homepage, such as:
- Logo
Navigation Bar
Hero Section
Call-to-Action Buttons
Linked Content Sections
Footer
Reflection
This tutorial helped me better understand how to build responsive and interactive components in Figma using variants, prototype interactions, and animation timing adjustments. The ability to reuse and update components efficiently also showed me the importance of working systematically in interface design. I look forward to applying these techniques in my own prototype layout.
Week 9
In Week 9, Mr. Shamsul taught us how to build a responsive navigation bar with a dropdown menu using HTML and CSS. He explained the structure of using <nav>, <ul>, <li>, <a>, and <div> elements to create a user-friendly menu interface.
In this exercise, I created a simple navigation menu with links such as “Home,” “About,” “Services,” and “Contact.” The “Services” item includes a dropdown list with four service options (Car Paint, Oil Change, Tyre Service, and Aircond Service).
I used Flexbox (display: flex) to align the menu items horizontally and added hover effects using CSS pseudo-classes (:hover). The dropdown menu was styled with position: absolute and z-index to ensure it appears correctly when hovered. I also used rounded corners (border-radius) and soft colors like darksalmon, orchid, and antiquewhite to create a friendly and approachable visual.
Additionally, I imported Google Fonts (specifically Poetsen One) using <link> in the <head> section and applied the custom font to the entire page for a more distinctive look.
Reflection
This week’s task helped me understand how to:
- Structure semantic HTML navigation using nested lists.
- Apply Flexbox for layout control.
- Design interactive menus using only CSS, without JavaScript.
- Improve my confidence in styling and typography choices using Google Fonts.
- This exercise was based on Mr. Shamsul’s in-class guidance during Week 9 and reflects the techniques we practiced in class.
Instructions
Homework
In this week’s Interactive Design class, Mr. Shamsul gave us a home assignment to build a basic HTML webpage. Based on what we learned in class and additional references from w3schools.com, I created a personalized version of the “Pacific Coast Fence” website.
The webpage includes a semantic HTML structure, with elements such as <header>, <section>, and <footer>. I also designed a navigation bar, several paragraphs, a services list, and a styled contact form. By using external CSS, I enhanced the overall look with hover effects, rounded buttons, Google Fonts, and a Scandinavian-inspired color palette.
In addition, I added an “About Us” section featuring three curated images with short captions to showcase visual inspiration and layout balance. This task helped me understand not only how to write clean HTML and CSS, but also how to apply aesthetic principles to create a functional, well-structured webpage.
Fig 1.1 html Homework 1
Fig 1.2 html Homework 2
1）Class Exercise
This week, Mr. Shamsul taught us about the CSS Box Model and display properties. I applied this knowledge in Dreamweaver by building a simple personal webpage.
I started with a centered navigation bar using display: flex and styled it with a white rounded background. Below it, I added a content box with an image to show how padding, border, and margin work.
In the About Me section, I styled the first letter using ::first-letter and practiced list formatting. I also created a contact form with vertically stacked fields and styled the buttons and input areas to match my color theme.
Finally, I made a 3-column food gallery using Flexbox, with each block including a title, image, and short caption. This project helped me understand layout structure and visual hierarchy more clearly.
Week 7 – Self-Directed Task: HTML Tag Fixing
In this week's self-directed exercise, I worked on improving and refining the webpage based on the HTML and CSS structure provided by Mr. Shamsul. While the original code was functional, I identified several opportunities to enhance its visual presentation and user experience.
Here are the key improvements I made:
Overall Centered Layout: I adjusted the layout to ensure that the entire webpage—including the title, navigation bar, paragraphs, card section, and form—is centered on the screen. This improves visual balance across different devices.
Title Styling: I replaced the original dashed border with a simple and elegant underline. Using pseudo-elements, I was able to control the line’s width and color, giving the title a more polished and focused appearance.
Navigation Bar Enhancement: I placed all navigation items inside a white, rounded container and used Flexbox to center them horizontally. Each link now shows a subtle inner border on hover, enhancing visual feedback and interactivity.
Card Design Refinement: While maintaining the three-column structure, I added rounded corners and soft shadows to each card. This makes the content more visually distinct and modern.
Form and Button Adjustments: I fine-tuned the form’s width and spacing between input fields for better readability. The buttons now follow a consistent rounded style with a smooth hover color transition, reinforcing the overall visual harmony.
Through this exercise, I developed a deeper understanding of the importance of layout centering, visual hierarchy, stylistic consistency, and interactive feedback in web design. These enhancements not only improved the professionalism of the page but also helped me pay closer attention to design details during development.
Final Self-Directed
Project 2 : Working Web Page
In this web redesign project, I used Pacific Coast Fence, a fencing company based in California, as a case study. I completely restructured and restyled their outdated website, which originally suffered from disorganized content, outdated layout, and poor functionality. Through layout reorganization, content rewriting, and the application of modern design principles, I developed a new prototype with enhanced usability and a more professional appearance.
Key Features
1.Goal-Oriented Homepage Layout
To fulfill the first objective in my proposal — building a clean, modern layout — I structured the homepage into five clear zones: Hero Banner, Company Introduction, Service Highlights, Testimonials, and Quick Quote Entry. This linear flow supports user attention, especially with the early placement of the “Get a Free Quote” button and a bold headline that reinforces brand identity. Every section is intentionally spaced to avoid clutter and support fast reading.
2.Service Selection with Booking Integration
To enhance usability and boost conversion — as outlined in my proposal — I added an integrated service scheduling section on the homepage. Users can select their area, preferred fence type, and desired installation date, then proceed with one click via the “Schedule Now” button. This streamlined input method minimizes navigation friction and improves engagement.
3.Modular Product Gallery for Visual Decision-Making
To support better information clarity and decision-making — a core objective in my proposal — I developed a dedicated “Our Products” page featuring five fencing types (e.g., Iron, Vinyl, Wooden). Each product is presented in a modular card layout with a title, brief description, starting price, and a “Get a Quote” button. This structure improves visual scanning and helps users make informed choices quickly.
4. Comprehensive Services Page for User Convenience
To further improve service transparency and user navigation, I designed a dedicated “Services” page that clearly presents the core offerings of Pacific Coast Fence. This page features six key services: Custom Fence Design, Free Site Measurement, Fence Installation, Commercial Fencing, Fence Repair, and Residential Fencing.
Each service is introduced with a brief, engaging description and a "Read More" link to provide detailed information. The layout uses clear headings, modular sections, and consistent "Get a Quote" buttons to encourage user interaction.
This Services page helps users easily explore available options, compare service details, and quickly request quotations, effectively supporting the proposal’s objective to enhance usability and increase conversion rates.
5.Trust-Building with Feature Highlights
To reinforce brand credibility and address real user concerns, I designed a “Why Choose Us” section with three icon-based feature cards. These include “Transparent Pricing,” “Experienced Team,” and “Durable Materials.” This section directly aligns with my proposal objective to establish user trust and provide concise, value-driven messaging.
6.Testimonials with Social Credibility
To strengthen social credibility and build trust, I added a testimonial section on the homepage that features three realistic customer reviews. Each review includes the person’s name, professional role, and location (e.g., “Interior Designer, Los Angeles”). These testimonials are supported by five-star icons, which visually reinforce satisfaction and demonstrate the brand’s reach across diverse audiences. This aligns directly with my proposal’s objective to enhance trust through real-world user narratives.
7.Streamlined Contact Section with Visual Anchors
To improve conversion rates, I designed a clear and intuitive contact section. The form includes fields for name, email, WhatsApp, and message, with a prominent “Submit” button. On the right, a Google Map and contact details help users locate the service area. The layout uses consistent round-corner inputs and buttons, with sufficient white space to enhance readability and interaction clarity.
Design Decisions
Colour Scheme
In this prototype, I used white as the primary background to create a clean and modern visual foundation. Warm browns (#6E4420 and #895C3C) are applied to buttons, headers, and section backgrounds to evoke the natural tone of fencing materials. I introduced soft yellow (#F5D47C) as a secondary highlight to bring rhythm and friendliness to the design. To maintain clarity, I used dark gray and black text tones to define hierarchy. This colour strategy directly supports my proposal goal of building a brand image that feels both warm and trustworthy, while also ensuring readability and contrast.
Typography
Headings use a bold, serif typeface to communicate strength and professionalism, while body text is set in a clean sans-serif for improved legibility. This contrast balances clarity with authority.
Visual Rhythm & White Space
I applied a modular layout with generous white space to create visual rhythm and reduce clutter. Consistent spacing between sections improves scannability and supports focused reading, directly aligning with my goal of enhancing information clarity.
Responsive Design Thinking
While designing the high-fidelity prototype, I created mobile wireframes in parallel. All buttons expand to full width on smaller screens, type scales adjust for readability, and the menu collapses into a hamburger icon for ease of navigation.
Content Rewriting
To improve communication clarity, I rewrote all website content. Long and vague phrases were replaced with concise, action-oriented messages—such as changing “serving fencing needs of a various clientele” to “Upgrade your outdoor space with a fence that lasts.” The new copy is focused on user benefits and engagement.
Addressing Proposal Objectives
Build a modern and credible brand image
A white-based layout with warm browns and consistent iconography conveys a modern yet trustworthy brand image.
Improve usability and information clarity
Modular sections, clear labels, and consistent text layout help users navigate easily and locate key content.
Ensure responsive design across devices
Mobile responsiveness includes hamburger menu, scalable buttons, and flexible text/image blocks.
Increase user engagement and conversion
Repeated CTA buttons with anchor links streamline the inquiry process and drive engagement.
Conclusion
This project guided me through a complete UX-centered workflow—from proposal to high-fidelity prototype. I learned how to merge visual hierarchy with functional logic to meet both branding and usability goals. Each design decision—color, layout, structure—was made in direct response to the objectives I initially set.
One of the most valuable takeaways was understanding the connection between visual clarity and user action. While there’s still room to improve visual consistency and responsive behavior, the current prototype has successfully translated strategic goals into an interactive design solution.
Interaction Flow Design
To ensure smooth user navigation, I designed a clear and intuitive interaction flow across the entire website. Each primary navigation link, service button, and call-to-action element is connected to its respective destination to minimize user confusion and reduce navigation friction.
The homepage serves as the central hub, providing direct access to:
The Services page via "Learn More" and service overview buttons.
The Product page via "View All Fence Types" and product-specific links.
The Contact page via "Get a Free Quote" and inquiry buttons.
Additionally, the service cards on the Services page are fully clickable, allowing users to explore detailed information about each offering. I also implemented anchor links and multiple CTA buttons throughout the site to streamline the inquiry process and encourage user engagement from any page.
The prototype flow diagram demonstrates the logical and user-friendly connection between all frames, supporting a seamless browsing experience that aligns with modern usability standards.
Final
Reflections
This project gave me a clearer understanding of how design theory, coding, and user experience work together in real-world web development. Starting from basic HTML structure and CSS styling, I gradually learned how to improve layout balance, visual hierarchy, and responsiveness through hands-on tasks.
By redesigning the Pacific Coast Fence website, I practiced applying semantic HTML, Flexbox layout, and external CSS styling in Dreamweaver. I also used Figma to explore interactive button components and learned how to apply auto-animation and variant states in UI design.
Throughout the process, I made several design decisions — from color palette to layout spacing — and connected them to real user needs. Although some parts can be improved further, like image consistency and responsive behavior on small screens, this project helped me build confidence in combining both design and development to create a more usable, modern webpage.
Comments
Post a Comment