Outline of a lowercase letter n in black layered on top of a rotated outline in yellow. Nadia jervier written underneath in a wave like path.

Recursive records

Development // Design

Nov '24 ‐ Jan '25

recursive records website landing page

Overview

A website designed for a small business ‐ Recursive Records

Designed to meet the needs of a small business, building an online presence ‐ focusing on a clean, user friendly structure alongside implementing key front-end development principles ‐ resulting in a website that is visually appealing and aligning with their brand identity, is easy to navigate and accessible.

Tech stack: html cssJavaScript

Recursive Records is a small independent music store looking to establish an online presence (without an e-commerce store). They wanted a website that reflects their brand identity and makes it easy for customers to learn more about the store.

This project was completed as part of my coursework with a requirement to be hand coded without using frameworks or libraries.

The project was focused on:

  • ‣ Responsive design
  • ‣ Accessibility
  • ‣ Semantic code

Split into phases to ensure that the needs of the client were met and for the most productive and successful outcome.

Drafting all the ‘must have’ content in order for the website to be successful for recursive records

Implementing a strong visual brand identity to the website

Using the content and design to write semantic and accessible clean code

View GitHub Repository

Responsive design

                            
@media (min-width: 960px) {
    #by-format {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1em;
		grid-template-areas:
		'subtitle subtitle';
	}
}
@media (min-width: 1200px) {

	#by-format {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-areas:
		'subtitle subtitle subtitle';
	}
}
Media queries for adaptable layouts
                            
#by-format img {
	width: 100%;
	max-width: 400px;
	height: auto;
	margin: 2em auto 1em;
}
Flexible images ‐ using percentages so they adapt to their container

Accessibility compliance

With a strong visual brand, it was important to consider how the use of colour will be accessible whilst maintaining good design.

contrast between primary website colours
Main colours used across the website have high contrast
contrast between secondary website colours
Secondary colours used across the website have good contrast
contrast between secondary website colours
Feature colours used across the website have good contrast

Extra markup

Using simple additional markup aria-label to further enhance the accessibility of the website 
                            
<address>
    <ul aria-label="opening-times">
        <li>Sun ‐ Mon: Closed</li>
        <li>Tue ‐ Sat: 10am ‐ 6pm</li>
    </ul>
    <ul aria-label="events">
        <li><span>Record of the week</span></li>                          
        <li>Fri: 6pm ‐ 7pm</li>
    </ul>
</address>

Balancing aesthetic and functionality

Some key decisions were made in order to copromise with both design and functionality to ensure that the needs of the business are met as well as the needs of the users on the website.

content toggle idea sketch for staff picks section
Sketch of idea that is design based but begins to consider functionality
staff picks section in recursive records website
Compromised result of design and functionality

Through building Recursive Records website, I was able to explore how design and development work together to a common outcome ‐ in this case, building an effective online presence. I was able to create a website that is fully responsive and visually engaging, al. coded by hand while considering accessibility, users and branding.

↑ Back to top