A reflective account of my small business website project
Introduction
For this project, I chose to design a website for Alf’s Cycles, an independent bicycle shop based in Hatfield, England. As part of a campaign to bring customers back to the high street, my goal was to create a marketing tool that would encourage people to visit the shop in person while showcasing their expertise in bike sales, repairs, and servicing. The website needed to feel professional, trustworthy, and modern while still retaining the warmth of a local, family-run business.
Design Decisions
Why Alf’s Cycles?
I selected Alf’s Cycles because I wanted to work with a business that had a strong local identity and clear community focus. Cycling is something I’m personally interested in, which made it easier to understand the target audience and design with real users in mind. Bikes also offer strong visual potential, allowing me to create an engaging layout using high-quality imagery that immediately communicates the brand’s purpose and services.
Color Scheme
I decided on a dark background with blue accents because the dark theme allows product photography to stand out while giving the site a premium, modern feel. Blue was chosen as the primary accent color because it conveys trust, professionalism, and reliability—qualities that are important for a service-based business.
The specific colors used were:
- Background: Deep black (#000) to create contrast and sophistication
- Accent: Electric blue (#1a44ff) to add energy and highlight key elements
- Text: White (#fff) and soft gray (#888) to maintain readability
This palette reinforces Alf’s Cycles as a contemporary but approachable local shop.
Typography
I chose two complementary Google Fonts:
- Alumni Sans for headings, as it is bold and eye-catching, making it effective for hero text and section titles
- Syne for body text, as it is clean, modern, and highly readable across different screen sizes
Line-height was carefully adjusted (1.7 for body text and 1.2 for headings) to ensure the content remained comfortable to read on both mobile and desktop devices.
Logo Design
I also designed a custom logo for Alf’s Cycles to support the overall brand identity of the website. The logo is minimal and text-based, which helps it remain clear and legible at different sizes, particularly in the navigation bar. I chose a simple, bold style so it would work well against the dark background and feel professional rather than decorative. Designing the logo alongside the website helped ensure visual consistency across the site and reinforced the shop’s identity as a modern, trustworthy local business.
Layout & Structure
The site consists of four main pages: Home, About, Service, and Contact. Content was structured so that essential information such as services, opening times, and reasons to choose the shop appear above the fold. This ensures users immediately understand what the business offers and how to visit.
Technical Approach
Mobile-First Development
I followed a mobile-first workflow by designing initially for a 320px screen and progressively enhancing layouts for tablets and desktops using min-width media queries. This approach helped keep layouts simple and ensured all interactive elements met accessibility guidelines, including the 44x44px minimum touch target size.
Semantic HTML
The site was built using semantic HTML elements such as <header>, <nav>, <main>, <section>, and <article>. This improved accessibility, SEO, and overall code clarity. I also maintained a logical heading hierarchy to help screen readers and assistive technologies navigate the content effectively.
CSS Organization
All styling was contained within a single CSS file, organised with clear comment sections. I relied heavily on the CSS cascade and combinators to reduce unnecessary classes and IDs, keeping the stylesheet efficient and easier to maintain.
Image Optimization
All images were converted to WebP format to reduce file size without sacrificing quality. Images were sized appropriately for their context and included descriptive alt text to improve accessibility.
Challenges & Solutions
One of the biggest challenges was managing four pages within a single CSS file. I solved this by carefully structuring the stylesheet and using specific selectors where needed. Another challenge was responsive navigation on small screens, which I addressed by allowing flexible wrapping instead of forcing a stacked menu. Typography scaling was also refined through testing to ensure consistency across devices.
This design represents what I originally expected to create; however, I found the development process more difficult than anticipated. While I had a clear visual idea of how the website should look, translating that design into responsive, well-structured code was challenging. As a result, the final website does not fully match my initial vision. This experience helped me recognise areas where I need further practice, particularly with layout control, CSS structure, and responsive design. Although challenging, this project has highlighted clear areas for improvement and has helped me understand how to approach similar projects more confidently in the future.
What I Learned
This project reinforced the importance of planning content before writing code, adopting a mobile-first mindset, and fully understanding the CSS cascade. I also gained a stronger appreciation for semantic HTML and responsive typography, both of which significantly improve usability and maintainability.
What I Would Do Differently
If I were to repeat this project, I would spend more time creating wireframes, test earlier on real devices, develop a style guide before coding, and introduce more subtle animations to enhance user interaction.
Conclusion
This project demonstrated that a clear process and thoughtful design decisions lead to strong results. By combining mobile-first development, semantic HTML, and carefully structured CSS, I created a website that effectively promotes Alf’s Cycles and encourages customers to visit the shop in person.
Tools Used
- Code Editor: Visual Studio Code
- Browser Testing: Chrome DevTools, Firefox, Safari
- Validation: W3C HTML & CSS Validators
- Performance: PageSpeed Insights
- Images: Unsplash, Freepik