INTERACTIVE DESIGN - FINAL PROJECT

This week, we explored how to create a basic homepage layout using HTML and CSS. The techniques we practiced will be applied in the development of our final project.

FINAL PROJECT

Project Description:

Create a fully functional website consisting of at least five (5) pages, based on the design and planning completed in Project 2. The final website should reflect the design direction, user experience decisions, and feedback incorporated throughout the development process, resulting in a professional and polished product.

Project Requirements:

Implementation:

Translate your approved prototype into a fully operational website using HTML, CSS, JavaScript, and other necessary front-end technologies.

Design Consistency:

Maintain visual and structural consistency with your original prototype. This includes accurate use of typography, color palette, imagery, spacing, and layout elements.

Responsive Design:

The website must be fully responsive, providing an optimal user experience across all screen sizes — from desktops and laptops to tablets and smartphones.

Cross-Browser Compatibility:

Ensure the website works correctly and consistently across multiple modern browsers (e.g., Chrome, Firefox, Safari, Edge).

Core Features:

Navigation System
Design and implement an intuitive navigation structure that allows users to easily access all key pages and sections of the website.
Interactive Components
Incorporate interactive elements such as buttons, forms, and dynamic content to improve user interaction and engagement.

Technical Requirements:

Performance Optimization
Enhance website performance through optimized code and assets. This includes reducing file sizes, applying caching and compression techniques, and ensuring efficient loading times.
SEO Fundamentals
Apply basic Search Engine Optimization (SEO) techniques: using proper meta tags, meaningful image alt attributes, descriptive titles, and clean URLs to improve search visibility.

Final Testing and Deployment:

Testing
Conduct thorough testing to check for usability, responsiveness, and cross-browser functionality. Document any issues encountered and describe how they were resolved.
Deployment
Publish the website using a live hosting service (e.g., Netlify, GitHub Pages, Vercel). Make sure the website is publicly accessible via a working URL.

Submission Requirements:

A live URL linking to the fully functional website.
A brief development report (approximately 800–1000 words) detailing the design-to-code process, challenges, and solutions.

(Optional) A 5–7 minute video walkthrough, showcasing the website’s features, design choices, and user experience.

3.1 Recap of Prototype

Chosen Website for Redesign: BARNES-NOBLE

Website Redesign Proposal – Project 2

Due to persistent technical issues and frequent crashes while using Adobe Dreamweaver, I decided to build the website in Visual Studio Code, which provided a more stable and efficient working environment.

Brief Report on Website Development Based on My Design Using HTML and CSS
This report outlines the process of developing a fully functional website based on my original design concept, using HTML and CSS. The final version reflects the visual style and layout proposed in Project 2, with close attention to design consistency, user experience, and responsiveness.

Figure 3.1.1 Overview of Prototype in Project 2 / Week 10 (28/06/2025)

Before starting the development process, I initially set up Adobe Dreamweaver by creating a new server and a local folder to store all my HTML files and images. I planned to create five separate HTML pages and organized my project structure accordingly. I also created an “images” folder where I saved all image assets, ensuring that they were properly resized to maintain consistent pixel dimensions across the website.

However, during the process, I encountered multiple technical issues with Dreamweaver, including unexpected crashes and the loss of unsaved work. To ensure a more stable and efficient workflow, I transitioned to Visual Studio Code for writing and editing my HTML and CSS files. I also used GitHub to manage my files and host the project online. This allowed me to version-control my code and maintain backups of my work throughout the development process.

3.2 Homepage

Figure 3.2.1 Homepage Overview / Week 13 (26/07/2025)

To begin, I create a structured folder:

index.html
style.css
images

Figure 3.2.2 HTML for homepage and navigation menu / Week 12 (26/07/2025)

Figure 3.2.3 HTML for homepage and navigation menu / Week 12 (26/07/2025)

After setting up the project, I began by writing the basic HTML structure, including the <html>, <head>, and <body> tags. I then inserted images into the homepage, which I had previously exported from my Figma design.

Navigation Bar Implementation:

I used a <div> element to group and organize sections of content, allowing for easier styling and layout control.
The <nav> tag was utilized to define the navigation section of the website, containing links to other pages.
The <a> tag was implemented to create hyperlinks between different sections or pages.
At this stage, I used href="#" as a placeholder, indicating that the links were not yet directed to actual destinations.

Hero Section

Large banner text with a minimalist call-to-action:

<h1>The Best Books</h1>

Styled with:

Figure 3.2.4 HTML for homepage and navigation menu / Week 13 (26/07/2025)

font-size: 90px and text-transform: uppercase

Font families: Kantumruy Pro

Smooth transitions on hover (.read-more-btn:hover)

Figure 3.2.5 Process / Week 13 (26/07/2025)

Categories Grid

Icon-based clickable categories (e.g., Romance, Sci-Fi, Biography). CSS styles include:

display: flex and flex-wrap: wrap
Consistent spacing (gap: 20px) and padding
Text styling: .category-name { font-size: 18px; text-transform: uppercase; }

Sliders & Product Cards

Sliders were created for sections like:

Bestsellers
Everyone’s Talking About
Fiction / Nonfiction
Kids' Books

Each product card includes:

Book cover image
Title, author, and star ratings
Buttons with hover styles: background color transitions on .slider-button:hover

Layout styling uses:

display: flex; overflow-x: auto;

Fixed card width (min-width: 200px) to ensure smooth scrolling

Figure 3.2.6 HTML for homepage and navigation menu / Week 13 (26/07/2025)

This section displays a horizontal slider of featured books under a specific category, such as Bestsellers or Editor's Picks. Each book is presented within a structured .book-card container that includes:

Book Cover: Displayed using an <img> tag inside a styled div .book-cover1.
Title: Rendered in a styled <div class="book-title1">, limited to one or two lines.
Author: Displayed beneath the title in .book-author, using smaller font styling.
Star Ratings: A row of 5 stars represented by <div class="star"> elements. Some stars have the class .filledto indicate the rating visually.

Figure 3.2.6 HTML for homepage and navigation menu / Week 13 (26/07/2025)

HTML

Figure 3.2.7 HTML for homepage and navigation menu / Week 13 (26/07/2025)

Since the homepage of my website is quite extensive and includes multiple sections such as navigation bars, sliders, promotional blocks, and footers, the overall HTML and CSS code is very long. Therefore, in this e-portfolio, I have only included screenshots showing a portion of the homepage code — specifically the first half — to keep the documentation clear and readable.

CSS

Figure 3.2.8 CSS for homepage and navigation menu / Week 13 (26/07/2025)

The full code is available in the actual project files, but for presentation purposes, only the key segments are displayed here to illustrate the structure and development process.

Challenges with the Homepage

While developing the homepage, I faced a few challenges:

Large code size: Since the homepage included many sections (navbars, sliders, promos), the code became very long and hard to manage.
I organized the code with comments and clear class names to keep it readable.
Slider issues: The book sliders didn’t scroll properly at first.
I fixed the layout using overflow-x: auto in CSS and simple JavaScript for arrow navigation.
Mobile layout problems: On small screens, elements overlapped.
I used media queries to adjust spacing, font sizes, and layout for responsiveness.
Dreamweaver crashes: The software kept freezing and didn’t save my progress.
I switched to Visual Studio Code and GitHub, which were more stable and secure.

3.3 Contact Us

Figure 3.3.1 Contact Us / Week 13 (26/07/2025)

The Contact Us page was developed using semantic HTML structure, combining clear layout sections and custom class names to enhance both accessibility and visual clarity. The page consists of several key elements:

Navigation

Two navigation bars were reused from the homepage to ensure consistency. The top navigation bar provides links to core sections such as Books, Blog, and Contacts. The category navigation offers quick access to product categories like Fiction, Audiobooks, and Teens & YA.

Help Center Search & Breadcrumb

The top of the page includes a search input field (<input type="text">) where users can type queries for the help center. Just below that, a breadcrumb trail simulates navigation within the help center hierarchy.

Figure 3.3.2 HTML Contact Us / Week 13 (26/07/2025)

Figure 3.3.3 HTML Contact Us / Week 13 (26/07/2025)

Contact Information Section

The main content includes:

A prominent <h1> heading: “Contact Us”.
Informational <p> blocks with helpful links for order status, membership renewal, or contacting via chat and email.
A call-to-action button (“Contact Us”) designed as a styled <button> to attract attention.
A final note regarding user agreement with the Privacy Policy.

All communication methods (chat, email, etc.) are presented as clickable links, providing users with multiple contact options.

Figure 3.3.4 HTML Contact Us / Week 13 (26/07/2025)

Informational Footer

The page concludes with a detailed multi-column footer, including:

Service links (e.g., Affiliate Program, B&N Membership)

Company information
Shopping categories
Newsletter subscription form and store locator
Social media icons and legal links

The structure was implemented using <footer>, <ul>, and <div> containers styled via external CSS to ensure a clean grid layout.

3.4 Mystery & Thriller Page – Category Layout

This page represents one of the category sections within the Barnes & Noble website – specifically, the "Mystery & Thriller Books". It shows how users can browse and discover titles by genre, using a two-column layout.

Figure 3.4.1 Mystery & Thriller Page / Week 13 (26/07/2025)

HTML Structure

At the top of the page, I implemented two navigation menus:
- The main menu containing site sections such as Books, Gifts, Contacts, etc., structured with the <nav> tag.
- A secondary menu with product categories like Fiction, Nonfiction, eBooks, allowing users to quickly switch between sections.
The main content is divided into two columns inside a container called gridTemplate:
- The left column (grid1) holds a comprehensive list of genres and subcategories with headings and links. I used simple markup with text and <span> elements to create clear visual hierarchy.
- The right column (grid2) displays the selected genre, number of results, a search prompt, and a carousel featuring popular books.
  
  Figure 3.4.2 HTML Mystery & Thriller Page / Week 13 (26/07/2025)

Styling and Layout

I used CSS Grid to create the two-column layout, which gave me flexibility in controlling the widths and placement of the columns.
The top navigation menus are styled with Flexbox to align items horizontally and ensure responsiveness.
Book cards in the slider have fixed sizes and include the cover image, title, author, and rating — styled with CSS for better visual appeal.
Links and buttons include hover effects to enhance interactivity and user experience.

Implementation Highlights

Due to the large amount of information in the left column, I organized the text with headings and separators for easy scanning.
Styles are placed in an external CSS file (inde.css) for better maintainability and performance.

The layout is responsive and tested across different screen sizes to ensure usability on mobile devices and tablets.

3.5 The Book Details Page: “Sandwich: A Novel”

For this project, I developed a detailed book page for Sandwich: A Novel, replicating a realistic e-commerce book product page layout inspired by Barnes & Noble.

Figure 3.5.1 The Book Details Page: “Sandwich: A Novel” / Week 13 (26/07/2025)

Left Column — Book Cover & Sidebar

The left column is wrapped in an `<aside>` element with the class `mystical-tome-altar`. This semantic tag highlights that this content is complementary to the main details.
Inside, I positioned the book cover image using an inline SVG placeholder for rapid prototyping. The image uses a class `legendary-manuscript-vessel` for styling — size, border-radius, and shadows are controlled via CSS to make the cover stand out.
Above the cover, I added two small navigation buttons (up/down arrows) with the class `ethereal-navigation-spirit`. These are intended for potential future scroll or carousel controls.
Below the cover, there is a wishlist link with a heart icon (`wishlist-heart-rune`) to encourage user interaction.
Additional promotional links like “Our Monthly Picks” and “Best Reviewed” are provided to engage the user and guide them to related content.

Right Column — Book Details & Purchase Options

The right column is enclosed in a `<section>` with the class `ethereal-essence-cathedral`, indicating the primary content area for the book details.
The book title is placed in an `<h1>` with the class `omnipotent-title-declaration` for prominent display.
The author name follows in a smaller `<div>` (`soul-weaver-attribution`) with a clickable link to the author’s page.
The rating system combines star icons styled with classes (`stellar-constellation-badge`) and a numeric rating display (`dimensional-feedback-echo`). The “Write A Review” link encourages user feedback.
Pricing and formats are clearly separated:
The current format and price are shown in distinct blocks, with the selected format visually highlighted (`enchanted-format-orb selected`).
Other available formats (hardcover, eBook, audiobook, large print) are displayed as clickable or selectable blocks for easy comparison.
Below formats, a link “View All Available Formats & Editions” offers extended options for the user.
Promotional information about premium membership discounts and rewards is placed in a clearly styled block (`premium-enchantment-codex`), including links to learn more.

Figure 3.5.2 HTML The Book Details Page: “Sandwich: A Novel” / Week 13 (26/07/2025)

Styling and Interaction Details

CSS classes use a consistent naming convention with thematic words, which helped organize styles and apply specific fonts, colors, and spacing.
The layout uses CSS Flexbox/Grid to align the cover and details side by side, ensuring responsiveness.
Interactive elements like buttons and links have hover and focus effects, improving accessibility and encouraging clicks.
The wishlist heart icon is styled for a subtle but noticeable interactive cue.

BACK TO TOP

3.6 Additional Pages

For this project, we were required to create at least five pages for our redesigned website. These included key sections such as the Homepage, How It Works, Subscription, Reviews & Community, and Contact + FAQ.
However, I decided to go beyond the minimum requirement and created additional pages to enrich the user experience and make the website feel more complete. These extra pages included:
Genre-specific book sections (e.g., Mystery & Thriller, Science Fiction, Romance)
A detailed book information page (e.g., Sandwich: A Novel)
Navigation panel with functional category links
Genre filter sidebars that appear across different pages
Each page was carefully designed in Figma first, following the visual style guide I established (colors, typography, layout consistency), and then I translated them into actual code using HTML and CSS. I maintained a consistent layout, reused components like the navigation bar and footer, and made sure the content blocks were structured clearly with semantic tags (`<section>`, `<article>`, `<aside>`, etc.).
This expansion allowed me to demonstrate better information architecture, improve navigation logic, and show my ability to implement more responsive and interactive layouts, even though we were only expected to complete a limited number of pages.
Figure 3.6.1 Additional pages / Week 13 (26/07/2025)

BACK TO TOP

3.7 Final Outcome
Google Drive Link:
https://drive.google.com/drive/folders/1KuYMg-Qkdsl2vEDBSHf7xoULHOx0evDw?usp=share_link
Link: https:
https://aidina10.github.io/BARNES-NOBLE/sevenpage.html

REFLECTION

Experience

Working on the final project for Interactive Design was both challenging and rewarding. One of the most difficult parts for me was the coding process. As someone who is still learning HTML and CSS, it took time and effort to figure out how to structure each section properly and make everything responsive.
Additionally, I decided to go beyond the basic task requirements. While only five pages were mandatory, I created more sections and interactions to improve the overall user experience. This made the project much larger in scope and required even more time and attention during development. Despite the difficulties, I was proud to see how my design turned into a functional website.

Observations

Through the process, I observed how important consistency, layout, and spacing are to creating a good user experience. The original Barnes & Noble website felt overwhelming and visually unbalanced, so I focused on simplifying the layout, improving navigation, and creating a clear hierarchy of information. I also realized how crucial responsive design is, and I spent extra time ensuring that the site worked on different screen sizes.

Findings

This project taught me that even small design decisions can have a big impact. Elements like font size, spacing, button placement, and alignment can change how users feel while browsing the site. I also learned that transferring a visual design into actual code isn’t always a direct process — I often had to adjust and test things multiple times to get the layout right.
In the end, I improved both my design thinking and my technical skills. I now understand the importance of planning the structure of a site before coding and have gained more confidence in building user-friendly digital experiences.

BACK TO TOP

Search This Blog

Aidina Begimbaeva (0380489)