INTERACTIVE DESIGN - FINAL PROJECT

Develop a fully functional 5-page website for Blinkee.com (a glow party gear brand), transforming the prototype into a live site with consistent design, comprehensive interactive elements, and responsive performance. The site includes: Homepage, Colour Products, Holiday Products, Contact, and About pages.

Key Requirements

Maintain design consistency: Purple gradient theme (#0f0520, #2a0f40), neon accents, and Inter font family.

Implement interactive features: Dropdown menus, shopping cart, contact forms, and hover effects.

Ensure responsiveness across devices (desktop/tablet/mobile) and compatibility with major browsers.

3. Final Project

3.1 Project Overview & Setup

Project Overview & Setup

Prototype & Development Tools

This was a WordPress site that was made using an Adobe XD prototype created for Task 2. Dreamwearver's "Live View" feature enabled us to see the layout in real time, ensuring that code and prototype design matched visually.

Fig 1-1 Prototype design for project 2 （Adobe XD）

Resource Preparation

All product photos were pulled from Pinterest and chosen specifically to relate to Blinkee’s glow party gear niche (neon colors, light up features.) There are compressed with the excellent service TinyPNG for a good tradeoff between image quality and load time.

Fig 1-2 Product materials are all from pinterest

Fig 1-3 The images are in a folder called images

Key Improvements

Address comments from prototyping stage:

1) Transferred the homepage from a "Discount-focused" page to a welcome page, and focus on brand information;

2) Deepened content for 2nd-tier pages (Colour and Holiday sections) so as not to present superficially.

Fig2-1

Fig 2-2

Fig 2-3

Fig 2-4

3.2 Homepage (index.html)

Design Improvement: From "Discount-Oriented" to "Welcome-Oriented"

Following feedback, the homepage was restructured as a welcome page: Top section retains brand logo and navigation; middle section features a "welcome message" ("Welcome to Blinkee—illuminating every special moment with glow") to enhance first-visit friendliness, aligned with prototype adjustments.

Fig 3-1

Core Features & Challenges

1. Dynamic Welcome Area: Uses CSS gradient background (linear-gradient(135deg, #0f0520, #2a0f40)) with text shadow (text-shadow: 0 0 10px #fff) to reinforce brand identity.

2. Category Navigation: "Colour Products" and "Holiday Products" entry cards use hover effects (transform: scale(1.03)) to guide users to secondary pages, resolving vague navigation in the prototype.

Fig 3-2

Promotion Integration: 20% discount information is placed below the welcome area in a collapsible panel (expandable on click) to avoid overshadowing the welcome message, fitting the "welcome page" core positioning.

Fig 3-3 Redesigned promotion button

3.3 Colour Products Page (colour.html)

Content Enhancement: From "Superficial" to "Detailed"

First, the welcome page design is the same as the homepage to ensure a unified style

Fig4-1 Colour Products Page

Addressing feedback on "insufficient content in secondary pages," this page details four color-coded LED products with usage scenarios:

Red LED Bracelet: "Adds vibrant energy to parties, ideal for birthdays and music festivals," priced at $19.99;

Blue LED Glasses: "Cool glowing effect, a standout piece for night events," priced at $24.99;

Green LED Headband: "Stylish glowing design to elevate party looks," priced at $14.99.

Fig 4-2 About color fluorescent stick product display

Technical Implementation

Product cards use grid layout (grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) to automatically adjust column count across devices;

3.4 Holiday Products Page (holiday.html)

Content Optimization: Strengthening Holiday Relevance

First, the welcome page design is the same as the homepage to ensure a unified style

Fig4-3 Holiday Products Page

Similarly addressing "insufficient content," this page focuses on holiday scenarios with product descriptions:

Holiday LED Lights: "Perfect for Christmas and New Year home decoration, with multiple colors/patterns to create festive ambiance," priced at $19.99;

Holiday LED Headbands: "Must-have glowing accessories for parties, battery-powered and easy to use—stand out on New Year’s Eve," priced at $9.99.

Fig4-4 Holiday Products Page

Technical Solution: Uniform Image Sizing

Pinterest-sourced images had inconsistent aspect ratios, causing layout clutter. For holiday product images, the original code was:

To solve this problem, I independently consulted front - end development materials (referring to MDN and W3School's CSS layout guides), and found that the object-fit: cover property can perfectly meet the requirements - this CSS property enables the image to maintain the aspect ratio and automatically crop the redundant parts within a fixed - size container, while retaining the core visual information (such as the LED light - emitting effect).

Adjusting height: 180px unifies all product image heights, preserving key details for a neat layout.

Fig 4-5 The above code

Design Adaptation

Page background features subtle snowflake textures (background-image: url('snowflakes.png')) to reinforce holiday themes;

Product cards have gold borders (border: 2px solid #ffd700) to echo festive celebrations, consistent with Adobe XD prototype visuals.

3.5 Contact Page (contact.html)

Core Function: Facilitate user inquiries via forms and display business information.

Form & Information Enhancement

Contact form adds "inquiry type" dropdown (product questions/order issues/partnerships) to resolve limited functionality in the prototype;

Clearly displays business address (614-CS Business IH35 PMB 1028, New Braunfels, TX 78130), phone (415) 261-0675, and hours (Monday-Saturday: 6:00 AM - 12:00 Midnight PST), improving information completeness compared to the prototype.

Fig 4-6 Contact Page

Responsive Optimization

Form uses single-column layout on mobile with 100% input width to avoid "crowded mobile forms" in the prototype.

3.6 About Page (about.html)

Narrative Focus:

Tell Blinkee’s story (founded 2015) with timeline and team sections.

Content & Design

Fig 4-7 About Page

•Timeline details key milestones: Founded in 2015 by "party enthusiasts" starting with glow sticks; 2020 sustainability initiative introducing rechargeable products and eco-friendly packaging—more detailed than the prototype;

•Team profiles include roles (e.g., Founder Sarah Johnson oversees brand strategy; Creative Director Michael Chen leads product design) to enhance content substance.

Fig 4-8 About Page

SUBMISSION LINKS

Live Website: BLINKIEE

Google Drive Folder (Public Access): BLINKIEE Folder

4. Feedback & Testing

Technical Fixes

Redundant Dreamweaver-generated code slowed loading; manual cleanup improved speed by 30%;

Mobile navigation was prone to accidental clicks in the prototype—fixed by increasing click area (padding: 15px) and adding delay triggers (setTimeout).

5. Reflections

1.Tool Synergy: Adobe XD and Dreamweaver streamlined design implementation—prototype size markers directly guided code width and margin settings. ChatGPT provided critical support for details like image sizing, significantly boosting efficiency.

2.Feedback-Driven Growth: Instructor feedback on homepage positioning and content richness guided core improvements, highlighting the importance of "user perspective" in design—websites must be not just visually appealing but also understandable and useful.

3.Areas for Improvement: Future additions could include JavaScript-based product search and optimized image lazy loading to enhance mobile experience.

Search This Blog

Wang JiHeng（0378904）