{"id":1136,"date":"2025-02-01T09:49:02","date_gmt":"2025-02-01T09:49:02","guid":{"rendered":"https:\/\/fifidesign.uk\/blog\/?page_id=1136"},"modified":"2025-02-01T09:49:02","modified_gmt":"2025-02-01T09:49:02","slug":"reflecting-on-my-design-process-recursive-records-website","status":"publish","type":"page","link":"https:\/\/fifidesign.uk\/blog\/reflecting-on-my-design-process-recursive-records-website\/","title":{"rendered":"Reflecting on My Design Process: Recursive Records Website"},"content":{"rendered":"\n
\n
\n
\n

By Fasika Kelile<\/p>\n<\/div>\n\n\n\n

\n

For my small business website project, I chose Recursive Records, a vinyl and CD store catering to both new and second-hand music enthusiasts.<\/p>\n<\/div>\n<\/div>\n\n\n\n

<\/div>\n\n\n\n
\"\"
https:\/\/fifidesign.uk\/design-for-web-content\/small-business-website\/index.html<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\n
\n

Planning & Research<\/strong><\/p>\n\n\n\n

The goal of the website was to serve as a marketing tool<\/strong> rather than an e-commerce platform, encouraging visitors to physically visit the store<\/strong>. This meant my design approach needed to prioritize engagement, nostalgia, and an inviting atmosphere<\/strong> that reflected the warmth and richness of analog sound.<\/p>\n\n\n\n

\n
\n


Before jumping into development, I conducted research on existing record store websites<\/strong>, exploring how they present their collections, events, and branding. Competitors such as Sister Ray, Hymies Records, and Vinyl Vault<\/strong> provided insights into how music retailers engage customers online. I also explored the history of vinyl records<\/strong>, focusing on their peak in the 1970s and resurgence in the 2000s<\/strong>, to craft a brand identity that resonates with both older collectors and younger audiences embracing vintage aesthetics.<\/p>\n<\/div>\n\n\n\n

\n


Wireframing was a crucial step in structuring the content<\/strong>. Using a mobile-first approach<\/strong>, I planned the site architecture<\/strong> to ensure seamless navigation. Key sections included:<\/p>\n\n\n\n

    \n
  • Find Us Page<\/strong> \u2013 Store location, hours, and a contact form for customer inquiries.<\/li>\n<\/ul>\n\n\n\n
      \n
    • Home Page<\/strong> \u2013 A welcoming introduction with featured products and upcoming events.<\/li>\n<\/ul>\n\n\n\n
        \n
      • Catalog Page<\/strong> \u2013 A categorized display of available vinyl and CDs.<\/li>\n<\/ul>\n\n\n\n
          \n
        • Events Page<\/strong> \u2013 A highlight of in-store experiences like listening parties.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
          \n
          \n

          Branding & Aesthetic Choices<\/strong>
          Skecth Planning<\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n

          <\/div>\n\n\n\n
          \n
          \n
          \n
          \n
          \"\"<\/figure>\n\n\n\n
          \"\"<\/figure>\n\n\n\n
          \"\"<\/figure>\n\n\n\n
          \"\"<\/figure>\n\n\n\n
          \"\"<\/figure>\n\n\n\n
          \"\"<\/figure>\n\n\n\n
          \"\"<\/figure>\n\n\n\n
          \"\"<\/figure>\n\n\n\n
          \"\"<\/figure>\n<\/figure>\n<\/div>\n<\/div>\n\n\n\n
          \n
          \n

          Since Recursive Records thrives on nostalgia<\/strong>, I focused on retro design elements<\/strong> that bring a sense of warmth and authenticity<\/strong>.
          <\/p>\n\n\n\n

            \n
          • Typography<\/strong>: I selected vintage-inspired fonts that align with classic album cover styles<\/strong> from the \u201870s and \u201880s.<\/li>\n\n\n\n
          • Color Palette<\/strong>: Earthy, warm tones such as mustard yellow, muted Blues, and rich browns were chosen to reflect the vintage music era<\/strong>.<\/li>\n\n\n\n
          • Backgrounds<\/strong>: I incorporated grainy textures<\/strong> to give the site a more analog, tactile feel.<\/li>\n<\/ul>\n\n\n\n

            To further reinforce the immersive experience<\/strong>, I designed custom album covers, a retro-styled logo, and hand-drawn illustrations<\/strong> to make Recursive Records feel like stepping into a time machine for music lovers<\/strong>.<\/p>\n\n\n\n

            <\/div>\n\n\n\n
            \n
            \n
            \n
            \"\"<\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
            \n
            \n
            <\/div>\n<\/div>\n<\/div>\n\n\n\n
            <\/span>
            <\/div>
            \n
            <\/div>\n<\/div><\/div>\n\n\n\n
            \n
            \n
            \n

            Development & Technical Execution<\/strong><\/strong><\/p>\n\n\n\n

            I built the website from scratch <\/strong>using HTML and CSS<\/strong>, ensuring clean, semantic markup for accessibility and SEO. Some key techniques I used:<\/p>\n\n\n\n

            Google Fonts & Web Safe Fonts<\/strong> to maintain consistency across devices.<\/p>\n\n\n\n

              \n
            • Flexbox & CSS Grid<\/strong> for layout structure, ensuring a responsive design across different screen sizes.<\/li>\n<\/ul>\n\n\n\n
                \n
              • Advanced CSS selectors<\/strong> to minimize excessive classes and IDs, keeping the code lean and maintainable<\/strong>.<\/li>\n<\/ul>\n\n\n\n
                  \n
                • Optimized images<\/strong> to maintain quality while ensuring fast page load times.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n
                  \n
                  \n
                  \n

                  Challenges & Learning Points<\/strong><\/p>\n<\/div>\n\n\n\n

                  \n

                  One of the main challenges was balancing aesthetics with functionality<\/strong>. <\/p>\n\n\n\n

                  \n
                  \n

                  Initially, I leaned heavily into a highly decorative retro style<\/strong>, but later refined the design to prioritize usability<\/strong>. I also learned the importance of responsive typography<\/strong>\u2014some of my initial font choices were visually appealing but difficult to read at smaller sizes.<\/p>\n<\/div>\n\n\n\n

                  \n

                  Another challenge was integrating interactivity<\/strong> without JavaScript. To keep the experience dynamic, I implemented CSS-based hover effects, animated transitions, and image overlays<\/strong> to guide users’ attention without compromising the site\u2019s simplicity.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

                  \n
                  \n
                  \n

                  Final Thoughts<\/strong><\/p>\n\n\n\n

                  \n
                  \n

                  Overall, this project was a valuable learning experience<\/strong> in designing for both brand identity and user engagement<\/strong>. If I were to improve the project<\/strong>, I would explore CSS animations<\/strong> for a more dynamic feel and consider incorporating a blog or user-generated content<\/strong> section to increase community interaction.The final website successfully achieves the goal of bringing people back to the high street<\/strong>, making Recursive Records a destination rather than just an online store<\/strong>.
                  <\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

                  \n
                  <\/div>\n<\/div>\n\n\n\n
                  \n
                  \"\"<\/figure>\n\n\n\n
                  \"\"<\/figure>\n\n\n\n
                  \"\"<\/figure>\n\n\n\n
                  \"\"<\/figure>\n\n\n\n
                  \"\"<\/figure>\n\n\n\n
                  \"\"<\/figure>\n\n\n\n
                  \"\"<\/figure>\n\n\n\n
                  \"\"<\/figure>\n\n\n\n
                  \"\"<\/figure>\n\n\n\n
                  \"\"<\/figure>\n\n\n\n
                  \"\"<\/figure>\n\n\n\n
                  \"\"
                  Screenshot<\/figcaption><\/figure>\n<\/figure>\n<\/div>\n<\/div>\n\n\n\n

                  <\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

                  By Fasika Kelile For my small business website project, I chose Recursive Records, a vinyl and CD store catering to both new and second-hand music enthusiasts. Planning & Research The goal of the website was to serve as a marketing tool rather than an e-commerce platform, encouraging visitors to physically visit the store. This meant […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","_themeisle_gutenberg_block_has_review":false,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-1136","page","type-page","status-publish","hentry"],"coauthors":[],"author_meta":{"author_link":"https:\/\/fifidesign.uk\/blog\/author\/fasika-kelile\/","display_name":"fasika.kelile"},"relative_dates":{"created":"Posted 1 year ago","modified":"Updated 1 year ago"},"absolute_dates":{"created":"Posted on February 1, 2025","modified":"Updated on February 1, 2025"},"absolute_dates_time":{"created":"Posted on February 1, 2025 9:49 am","modified":"Updated on February 1, 2025 9:49 am"},"featured_img_caption":"","featured_img":false,"series_order":"","rttpg_featured_image_url":null,"rttpg_author":{"display_name":"fasika.kelile","author_link":"https:\/\/fifidesign.uk\/blog\/author\/fasika-kelile\/"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"By Fasika Kelile For my small business website project, I chose Recursive Records, a vinyl and CD store catering to both new and second-hand music enthusiasts. Planning & Research The goal of the website was to serve as a marketing tool rather than an e-commerce platform, encouraging visitors to physically visit the store. This meant…","_links":{"self":[{"href":"https:\/\/fifidesign.uk\/blog\/wp-json\/wp\/v2\/pages\/1136","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fifidesign.uk\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fifidesign.uk\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fifidesign.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fifidesign.uk\/blog\/wp-json\/wp\/v2\/comments?post=1136"}],"version-history":[{"count":2,"href":"https:\/\/fifidesign.uk\/blog\/wp-json\/wp\/v2\/pages\/1136\/revisions"}],"predecessor-version":[{"id":1182,"href":"https:\/\/fifidesign.uk\/blog\/wp-json\/wp\/v2\/pages\/1136\/revisions\/1182"}],"wp:attachment":[{"href":"https:\/\/fifidesign.uk\/blog\/wp-json\/wp\/v2\/media?parent=1136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}