INTERACTIVE DESIGN (FINAL PROJECT / FINAL WORKING WEBSITE)
INTERACTIVE DESIGN (FINAL PROJECT / FINAL WORKING WEBSITE)
Objective
The aim of this assignment is to build a working website (minimum 5 pages) based on the prototype you created earlier. Your final website should reflect your design ideas, user experience decisions, and technical skills in a clear and professional way.
Assignment Summary
Using your previous proposal and prototype, you now need to create a complete website. It should show that you understand web design, basic coding, and how to improve user experience and accessibility.
What to Include in Your Website
-
Build the Site
Use HTML, CSS, JavaScript, or a framework like Bootstrap to turn your prototype into a real website. -
Match the Design
Make sure your final site looks like your prototype — same fonts, colors, layout, and images. -
Mobile Friendly
Your website should work well on phones, tablets, and desktops. -
Browser Compatibility
The website must look and work correctly on different browsers (Chrome, Safari, Firefox, Edge).
Must-Have Features
-
Navigation
Clear menu so users can easily go to any page. -
Interactive Elements
Include buttons, forms, or any other interactive parts that improve the user experience.
Technical Tips
-
Speed
Make sure the site loads quickly by keeping file sizes small and using clean code.
Testing and Launch
-
Test Everything
Check for broken links, layout issues, and whether it works on all screen sizes and browsers. Note any problems and how you fixed them. -
Publish Your Site
Upload your website to a platform like GitHub Pages, Netlify, or your own domain. Share the live URL.
What to Submit
-
A public link to your live website
-
A short report (800–1,000 words) explaining your process and any problems you solved — post this in your E-Portfolio
-
A Google Drive folder with your full project files (set to public), and share the link in your E-Portfolio
Homepage：
The homepage adopts a structured and accessible layout that aligns with modern web design principles. A central <div class="container"> ensures content is properly aligned and spaced across all devices. At the top, a responsive <header> features a logo and a navigation bar, built using Flexbox. This structure remains sticky during scrolling, improving usability.
A hero section follows, defined within a .main-content block. While this page does not use a full-bleed image background like traditional landing sections, it still employs spacing and color contrast to draw user focus to the headline and introductory information. Typography uses the serif "Cormorant Garamond" for a classical, trustworthy tone.
This page also integrates a user prompt for registration or login, accompanied by <button> elements with hover effects, enhancing interactivity and guiding the user toward account creation.
At the bottom of the page, the <footer> contains social media icons and utility links. The icons are spaced using Flexbox and employ simple hover states, contributing to a consistent user experience.
Page 1: New Tartans
This page introduces users to the newest entries in the Scottish Register. Structured within .main-content1, it begins with a descriptive heading and paragraph that provides context about registration benefits. An information legend is also included to explain icons (e.g., samples held in the National Records of Scotland).
The list of tartans is structured using .tartan-list and individual .tartan-item blocks, each using Flexbox for layout. Each item includes a thumbnail, name, designer, date, and category. The modular design allows for easy extension as more tartans are added.
The responsive layout switches to vertical stacking under 768px, maintaining clarity on small screens.
Page 2: Contact Us
The contact page contains both static information and interaction functionality. It starts with a consistent header layout and then presents important contact details in a structured .main-content1 section. It uses multiple <p> blocks for clarity and organization.
Important contact categories like general inquiries, technical issues, and customer service feedback are each broken down with headings and red-highlighted email addresses for visual hierarchy.
The page does not contain a full form but serves as an information hub. However, it maintains consistent button components (.button1, .button2) and header styling to match other pages.
Page 3: Compare Designs
This page offers a simulation tool-like interface that helps users visualize tartan designs. Structured with a central .main-content1 container, it includes fields for inputting a "Palette" and "Threadcount" using <div class="item3"> placeholders.
Text guidance and example syntax are provided to ensure users understand the input format. A single large button labeled "Generate Tartan" is centered below the form using .button3.
The two-column layout (palette on the left, threadcount on the right) is achieved via floated elements and clears with .clearfix. On smaller screens, it reflows into a single-column layout for optimal usability.
Page 4: Search the Register
This is the most interactive and content-rich page. It includes standard search inputs, advanced search options, and color-based filters. The form is divided into three main sections: standard search, advanced search, and color selection.
Search fields are organized into .search-section and .search-row, with Flexbox used to arrange .search-column fields. Color selection is handled by .color-palette and .color-box items, which allow user interaction via click events. JavaScript enhances interactivity with toggling and hover feedback.
Checkboxes and buttons allow users to refine search criteria. Additional textual guidance and warnings provide context for search results and registration criteria.
Responsiveness is ensured with media queries that switch layout from row to column on small screens, preserving usability.
fig 1.9 Search Form HTML & Color Box UI
fig 2.0 Advanced Search & Responsive CSS
Final Project Development Report: Website Redesign & Implementation
Overview
This project marks the final phase of the website redesign task, where the initial prototype was transformed into a fully functional, responsive website. The final version includes five distinct pages: Home, New Tartans, Contact Us, Compare Designs, and About. The entire development process was carried out using HTML, CSS, and JavaScript, with additional attention given to responsive layout, accessibility, and performance optimization.
Implementation Process
1. Translating the Prototype into Code
The website structure was recreated from the previously approved prototype using semantic HTML5. Each section (header, content, footer) was structured based on a responsive grid layout using CSS Flexbox and media queries to ensure compatibility across screen sizes.
I followed the color schemes, typography, and layout specifications designed in Figma, making sure that font weights, spacing, and button styles were consistent throughout all pages. All image assets and branding elements were also aligned with the design system used in the prototype.
2. Navigation & Interactivity
A responsive navigation bar was developed for both desktop and mobile views. The desktop version features a horizontal navigation menu, while the mobile version implements a hamburger toggle menu using JavaScript, allowing smooth navigation on small screens.
Interactive elements include:
-
A search bar in the header
-
Buttons with hover effects for actions like “Sign Up” and “Search”
-
A form in the Contact page styled for clarity and accessibility
-
A dynamic display section for comparing tartan design formats
Design Consistency
Throughout development, design consistency was maintained by:
-
Reusing CSS classes across pages for buttons, titles, and containers
-
Defining a base color palette and applying it globally
-
Using web-safe fonts and ensuring consistent heading hierarchies
-
Structuring content blocks within consistent margins and padding
Responsiveness and Cross-Browser Compatibility
Responsive behavior was tested using Chrome DevTools to simulate devices such as iPhones, iPads, and Android phones. Layouts adjust using breakpoints at 1024px, 768px, and 480px. Font sizes, button widths, and image scales were adapted to ensure smooth viewing across devices.
Cross-browser tests were conducted on:
-
Google Chrome
-
Mozilla Firefox
-
Safari (Mac/iOS)
-
Microsoft Edge
Minor rendering differences (e.g., font weight or spacing inconsistencies) were resolved with CSS normalization and fallback values.
Challenges and Solutions
1. Mobile Layout Breaks
Some sections, especially the two-column layouts, collapsed incorrectly on smaller screens. I resolved this using Flex-wrap and adjusting flex-basis and width percentages within media queries.
2. Menu Toggle Functionality
The hamburger menu initially didn’t close properly when toggled. I added a simple JavaScript event listener to toggle an .active class, which resolved the issue on all screen orientations.
3. Inconsistent Rendering in Safari
Certain elements like object-fit and input borders behaved differently in Safari. I implemented -webkit- vendor prefixes and tested using BrowserStack for confirmation.
4. Image & Button Scaling
Some images and buttons didn’t scale properly at 320px screen width. This was addressed using max-width, object-fit: contain, and media-specific adjustments to button padding and font size.
Performance Optimization
To improve load times:
-
All images were compressed before upload
-
Unused CSS was removed
-
Code was organized and minified where possible
-
External fonts were limited to reduce HTTP requests
Testing and Deployment
Testing included:
-
Manual walkthroughs of each page on multiple browsers
-
Simulated device testing in Chrome DevTools
-
Functional testing of form submissions, navigation toggles, and button behaviors
The final site was deployed using Netlify, which provided continuous deployment and a live URL:
Netlify Link: https://aesthetic-dieffenbachia-dd144e.netlify.app/
The entire project folder was uploaded to Google Drive for backup and linked in the e-Portfolio:
Experience:
This project gave me hands-on experience building a complete, responsive website from prototype to deployment. I became more confident using HTML, CSS, and basic JavaScript to structure content, style interfaces, and implement interactivity. I also applied design thinking consistently, aligning technical implementation with visual and UX goals.
Observation:
I realized the importance of spacing, typography, and responsive behavior in shaping user experience. Even minor margin or font-size tweaks significantly affected readability. I also noticed how certain designs don’t scale well unless carefully planned with mobile-first strategies.
Finding:
This project helped me understand the bridge between design tools like Figma and real code. CSS Grid and Flexbox were especially powerful for layout control. I also discovered that consistent testing is crucial—small bugs can become large UX problems later if not caught early. The experience showed me that great web design is not only about visual appeal, but also clarity, accessibility, and function.
Comments
Post a Comment