Final Project - Interactive Design
Week 10 - Week 14
Aurellia Franseska Djauhari - 0365053
Interactive Design
Bachelor of Information Technology (Minoring in Creative Media Design)
Project Title: PT. Horng Dar Footwear
Live Link: https://cheery-bonbon-30f74a.netlify.app/
Technologies Used: HTML, CSS, Netlify (for deployment)
Live Link: https://cheery-bonbon-30f74a.netlify.app/
Technologies Used: HTML, CSS, Netlify (for deployment)
1. Introduction
The goal of this project was to develop a clean, responsive, and brand-appropriate product catalog website for PT. Horng Dar Footwear, a company specializing in EVA-based footwear like flip flops, slides, and sandals. The website acts as a digital product showcase, presenting the company’s profile and product in a catalog-style layout, with each product linking to a dedicated detail page. This report documents the full development process, challenges encountered, and how they were addressed.
2. Planning & Design
Before coding, I began with basic planning and layout design. I decided to:
- Use HTML and CSS to keep the site simple and efficient.
- Create a homepage with about us, contact us, and product cards linking to individual product detail pages.
- Design the product detail pages to resemble catalog cards, with photos, descriptions, and back buttons.
- Make a Contact page so that client can reach out to the company.
3. Website Structure
The website consists of several key HTML files:
- index.html: Homepage
- about us.html: Tells about the company page
- products.html: Product overview grid
- flipflop-details.html: Flip Flop catalog page
- slides-details.html: Slides catalog page
- sandals-details.html: Sandals catalog page
- contact us.html: to contact the company page
For index, about us, and contact us, I used separate CSS file. There is a shared CSS file for the products file was used to maintain a consistent style across all pages. I created reusable class structures for the navbar, footer, buttons, and product cards.
4. Development Process
The development process began by building the homepage (index.html). It features a welcoming section with a call-to-action, followed by key sections that highlight the company’s innovation, product offerings, and contact opportunities. A navigation bar at the top allows users to easily move between pages, and a footer with social media links was added for branding and credibility.
Fig 1.1 Navigation Bar Code
Fig 1.2 Footer Code
Each of the major sections like About Us, Products, and Contact Us, was built using semantic HTML to improve accessibility and structure. The design emphasizes simplicity and cleanliness, ensuring users can quickly understand the purpose of each section without unnecessary clutter.
The Products page (products.html) showcases the product categories using a responsive grid layout. Each product has a “View Details” button that links to its corresponding detail page. The detail pages (flipflop-details.html, slides-details.html, and sandals-details.html) were designed to mirror a catalog-style layout, with a section title, a collection of product cards, and a back button for easy navigation.
5. Styling with CSS
To achieve visual consistency and modularity, I created four main CSS files for different sections of the site:
- style1.css: used for the homepage (index.html)
- style2.css: used for the About Us page (about us.html)
- style3.css: used for the Contact Us page (contact us.html)
- style4.css: shared across all product pages, including products.html, flipflop-details.html, slides-details.html, and sandals-details.html
Each CSS file focuses on the unique layout and visual style needed for its respective section, while maintaining a cohesive overall theme through shared colors, typography, button styles, and consistent spacing.
Key CSS techniques and components:
- Flexbox and CSS Grid were used extensively for layout alignment and responsiveness.
- Media queries were added to ensure the site works well on various screen sizes.
- Reusable class names (like .navbar, .btn, .footer, .section-title, and .detail-card) helped streamline the styling process and ensure a unified design language across all pages.
Extra effort was put into:
- Designing product detail cards to feel like a print catalog.
Fig 1.3 Products Card HTML
Fig 1.4 Products Card CSS
- Proper centering of buttons and section titles.
- Maintaining image aspect ratios using object-fit to prevent distortion.
6. Challenges and Solutions
Several challenges were encountered during development:
- Responsive Layout Issues: Initially, product cards did not stack well on screens. I solved this using flex-wrap and media queries to adjust the layout for different screen sizes.
- Image Scaling: Some images appeared stretched or uneven across cards. This was addressed using object-fit: cover and fixed width/height styles in the CSS.
- Non-working back buttons or navigation links: These issues were usually tied to wrong file paths or incorrect spelling and were fixed by carefully checking file structures and updating the href values.
7. Reflection and What I Learned
Skills Developed:
- Designing responsive layouts using CSS Flexbox
- Writing modular and maintainable HTML/CSS code
- Structuring a multi-page website with a navigation bar
- Hosting and deploying a static website with Netlify
Personal Growth:
This project helped reinforce my understanding of frontend structure and layout design. I also gained confidence in deploying a real website and resolving layout bugs during development.
I learned the importance of:
- Planning consistent styles from the start
- Testing responsiveness frequently during development
- Hosting with tools like Netlify that simplify deployment
8. Conclusion
Overall, the development of the PT. Horng Dar Footwear website was a rewarding experience that combined technical skills, design thinking, and problem-solving. From initial planning to final deployment, each step helped build a fully functional, visually consistent, and user-friendly website that meets the goals of showcasing products professionally. By using only HTML and CSS, the site remains lightweight and easy to maintain, while Netlify made deployment fast and accessible. This project not only improved my web development skills but also gave me real-world experience in creating a multi-page portfolio site from scratch. I now feel more confident in designing structured, responsive layouts and publishing websites to a live audience. Moving forward, I am excited to apply these skills to more complex projects that incorporate interactivity, JavaScript, and advanced styling techniques.
Comments
Post a Comment