{"id":51,"date":"2026-01-30T14:54:13","date_gmt":"2026-01-30T14:54:13","guid":{"rendered":"https:\/\/luca05.co.uk\/my-space\/?page_id=51"},"modified":"2026-01-30T22:16:02","modified_gmt":"2026-01-30T22:16:02","slug":"alfs-cycles-website-design-process-reflections","status":"publish","type":"page","link":"https:\/\/luca05.co.uk\/my-space\/alfs-cycles-website-design-process-reflections\/","title":{"rendered":"Alf&#8217;s Cycles Website: Design Process &#038; Reflections"},"content":{"rendered":"\n<p><em>A reflective account of my small business website project<\/em><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p>For this project, I chose to design a website for <strong>Alf&#8217;s Cycles<\/strong>, 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.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Design Decisions<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Why Alf&#8217;s Cycles?<\/strong><\/h3>\n\n\n\n<p>I selected Alf&#8217;s Cycles because I wanted to work with a business that had a strong local identity and clear community focus. Cycling is something I\u2019m 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\u2019s purpose and services.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Color Scheme<\/strong><\/h3>\n\n\n\n<p>I decided on a <strong>dark background with blue accents<\/strong> 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\u2014qualities that are important for a service-based business.<\/p>\n\n\n\n<p>The specific colors used were:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Background<\/strong>: Deep black (#000) to create contrast and sophistication<\/li>\n\n\n\n<li><strong>Accent<\/strong>: Electric blue (#1a44ff) to add energy and highlight key elements<\/li>\n\n\n\n<li><strong>Text<\/strong>: White (#fff) and soft gray (#888) to maintain readability<\/li>\n<\/ul>\n\n\n\n<p>This palette reinforces Alf\u2019s Cycles as a contemporary but approachable local shop.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Typography<\/strong><\/h3>\n\n\n\n<p>I chose <strong>two complementary Google Fonts<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Alumni Sans<\/strong> for headings, as it is bold and eye-catching, making it effective for hero text and section titles<\/li>\n\n\n\n<li><strong>Syne<\/strong> for body text, as it is clean, modern, and highly readable across different screen sizes<\/li>\n<\/ul>\n\n\n\n<p>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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Logo Design<\/strong><\/h3>\n\n\n\n<p>I also designed a custom logo for Alf\u2019s 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\u2019s identity as a modern, trustworthy local business.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Layout &amp; Structure<\/strong><\/h3>\n\n\n\n<p>The site consists of <strong>four main pages<\/strong>: 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.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Technical Approach<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Mobile-First Development<\/strong><\/h3>\n\n\n\n<p>I followed a mobile-first workflow by designing initially for a 320px screen and progressively enhancing layouts for tablets and desktops using <code>min-width<\/code> media queries. This approach helped keep layouts simple and ensured all interactive elements met accessibility guidelines, including the 44x44px minimum touch target size.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Semantic HTML<\/strong><\/h3>\n\n\n\n<p>The site was built using semantic HTML elements such as <code>&lt;header&gt;<\/code>, <code>&lt;nav&gt;<\/code>, <code>&lt;main&gt;<\/code>, <code>&lt;section&gt;<\/code>, and <code>&lt;article&gt;<\/code>. 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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>CSS Organization<\/strong><\/h3>\n\n\n\n<p>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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Image Optimization<\/strong><\/h3>\n\n\n\n<p>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.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Challenges &amp; Solutions<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><\/figure><div class=\"wp-block-media-text__content\">\n<p><\/p>\n<\/div><\/div>\n\n\n\n<div data-wp-interactive=\"core\/file\" class=\"wp-block-file\"><object data-wp-bind--hidden=\"!state.hasPdfPreview\" hidden class=\"wp-block-file__embed\" data=\"https:\/\/luca05.co.uk\/my-space\/wp-content\/uploads\/2026\/01\/cycle-website_compressed-1.pdf\" type=\"application\/pdf\" style=\"width:100%;height:600px\" aria-label=\"Embed of cycle website_compressed.\"><\/object><a id=\"wp-block-file--media-c0875db8-1e09-4483-bb53-5e07b4ce12f8\" href=\"https:\/\/luca05.co.uk\/my-space\/wp-content\/uploads\/2026\/01\/cycle-website_compressed-1.pdf\">cycle website_compressed<\/a><a href=\"https:\/\/luca05.co.uk\/my-space\/wp-content\/uploads\/2026\/01\/cycle-website_compressed-1.pdf\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-c0875db8-1e09-4483-bb53-5e07b4ce12f8\">Download<\/a><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">What I Learned<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">What I Would Do Differently<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>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\u2019s Cycles and encourages customers to visit the shop in person.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Tools Used<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Code Editor<\/strong>: Visual Studio Code<\/li>\n\n\n\n<li><strong>Browser Testing<\/strong>: Chrome DevTools, Firefox, Safari<\/li>\n\n\n\n<li><strong>Validation<\/strong>: W3C HTML &amp; CSS Validators<\/li>\n\n\n\n<li><strong>Performance<\/strong>: PageSpeed Insights<\/li>\n\n\n\n<li><strong>Images<\/strong>: Unsplash, Freepik<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/luca05.co.uk\/design-for-web-content\/small-bussiness-website\/home.html\">view website<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>A reflective account of my small business website project Introduction For this project, I chose to design a website for Alf&#8217;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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-51","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/luca05.co.uk\/my-space\/wp-json\/wp\/v2\/pages\/51","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/luca05.co.uk\/my-space\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/luca05.co.uk\/my-space\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/luca05.co.uk\/my-space\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/luca05.co.uk\/my-space\/wp-json\/wp\/v2\/comments?post=51"}],"version-history":[{"count":5,"href":"https:\/\/luca05.co.uk\/my-space\/wp-json\/wp\/v2\/pages\/51\/revisions"}],"predecessor-version":[{"id":60,"href":"https:\/\/luca05.co.uk\/my-space\/wp-json\/wp\/v2\/pages\/51\/revisions\/60"}],"wp:attachment":[{"href":"https:\/\/luca05.co.uk\/my-space\/wp-json\/wp\/v2\/media?parent=51"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}