Interactive Design Final Project : Final Working Website
Interactive Design
Project Overview:
Design & Branding Strategy:
To reinforce brand identity, the website uses:
- Orange as the primary color
- Dark blue as accent color
- Modular layout
- Rounded buttons and shadows
Development Process:
The website was developed using:
- HTML5 for structure
- CSS3 for styling
- Embedded Google Maps
- Responsive layout techniques using Flexbox
The following pages and features were built:
- Landing/Home Page with call-to-action (Learn More)
- Quote Request Form with fields for name, email, phone, service selection, and budget
- Contact Page with address, phone, email, and Google Maps integration
- Navigation bar and footer with consistent branding across pages
Special Features:
- Button system with hover effects, defined by .btn-dark, .btn-orange, .btn-gold classes
- Map integration: Added using Google Maps iframe
- Service showcase: Highlighting brand merchandise for artists, using product images and packaging templates
Challenges Faced & Solutions：
1. Navbar and Background Color Mismatches
In early development, the header and footer colors were inconsistent with the design plan.
Solution: Standardized color variables in CSS and applied .background-dark class for consistency across sections.
2. Button Visibility Issue
Buttons like "Learn More" were not showing properly.
Solution: Added contrasting background color to the button's container and refined the .hover-button CSS rules for better visibility.
3. Responsive Layout Bug
On certain screens, large white gaps appeared on the left side, and some elements overflowed the container.
Solution: Identified misplaced margins and applied box-sizing: border-box; globally. Adjusted width properties to prevent overflow.
4. Code Management Difficulty
As the site grew, the CSS and HTML structure became messy and hard to manage.
Solution: Broke the code into clear sections with comments, removed unused styles, and followed a modular naming convention.
5. Section Animation Limitations
Initially planned animation effects (e.g., fade-ins and floating elements) could not be implemented
Solution: Prioritized clarity and performance, replacing complex effects with simpler transitions.
6. Adding Decorative Elements
Tried adding a decorative orange block above the navbar but couldn't align it correctly.
Solution: Created a div above the navbar with fixed height and background color, styled as a thin horizontal strip using position: relative and z-index.
Development Process:
The contact section includes:
<p><strong>Address:</strong> Vision Van Gogh, 11521 Eagle Street NW, Suite 6, Minneapolis, MN 55448</p>
<p><strong>Phone:</strong> 1-800-368-6701 or 763-323-8834</p>
<p><strong>Email:</strong> Info@VisionVanGogh.com</p>
<iframe src="https://www.google.com/maps?q=..." width="100%" height="300"></iframe>
Upload & Hosting:
The full project folder includes:
- index.html (main homepage)
- style.css
- contact.html- quote.html(for the quote request page)
- Images and icons
The full folder has been uploaded to Google Drive and is accessible publicly.
Click here to view the final website folder on Google Drive
Reflection:
Experience
Building the Vision Van Gogh website was a hands-on journey that pushed my skills and creativity. I started with a vision to create a sleek and visually engaging platform that not only showcases creative services like design and printing but also communicates clearly with its users. I worked on structuring core pages such as the homepage, merchandise, quote request, and contact. Each step from selecting the orange-centered color scheme to creating the layout and form, was carefully considered to fit the brand identity. I especially enjoyed crafting the interactive buttons and layout transitions that made the site feel more alive and professional.
Observations
During the process, I noticed how small technical details could cause unexpected layout issues. For example, a background design I had envisioned didn't appear as planned, and I ran into invisible spacing problems that caused uneven layouts. Debugging became one of the most time-consuming tasks at times, I would edit CSS over and over only to find the issue was in an overlooked div or margin. I also observed how important navigation is for user experience; just adding hover effects and clean structure in the navbar made a noticeable difference. While styling the buttons, footer, and title sections, I learned that even consistent fonts and color coordination greatly affect the site's overall feel.
Findings
Through trial, error, and refinement, I've come to understand that building a website isn't just about code, it's about clarity, branding, and communication. One major takeaway was how form design could shape user interaction: by organizing input fields clearly and linking the form to real contact methods, I created a space that felt both functional and welcoming. I also learned how to host the project on GitHub and link it to GitHub Pages, completing the process from development to deployment. Despite challenges, the project gave me confidence in handling real-world design constraints and the motivation to continue improving my coding and design skills.
Comments
Post a Comment