untitled (recs). Independent record label.

untitled (recs). Independent record label.

untitled (recs). Independent record label.

2024.

1.

1.

Context

Context

untitled (recs) is a record label based in London, UK, representing a diverse roster of international artists. As their catalogue continues to expand, they sought a website that reflects their ethos, style, and professionalism. The goal was to prioritise their artists and collaborators, showcasing their content while maintaining the label's visual identity.

My challenge involved leveraging the untitled (recs) style guide to determine which brand elements would effectively translate into the user interface. While their colour palette and typography excelled in marketing and print, they required adaptation for a flexible and user-friendly UI. I focused on establishing a clear typographic hierarchy, reducing colour usage, and rethinking iconography and image placement, all while prioritising accessibility and minimising bounce rates.

The design emphasises the artists - incorporating images, custom icons, and buttons that visually connect to them. The label’s iconic blue is used sparingly to create touchpoints that guide users seamlessly through the site.

untitled (recs) is a record label based in London, UK, representing a diverse roster of international artists. As their catalogue continues to expand, they sought a website that reflects their ethos, style, and professionalism. The goal was to prioritise their artists and collaborators, showcasing their content while maintaining the label's visual identity.

My challenge involved leveraging the untitled (recs) style guide to determine which brand elements would effectively translate into the user interface. While their colour palette and typography excelled in marketing and print, they required adaptation for a flexible and user-friendly UI. I focused on establishing a clear typographic hierarchy, reducing colour usage, and rethinking iconography and image placement, all while prioritising accessibility and minimising bounce rates.

The design emphasises the artists - incorporating images, custom icons, and buttons that visually connect to them. The label’s iconic blue is used sparingly to create touchpoints that guide users seamlessly through the site.

2.

My Role

My Role

lead product designer

Deliverables: Product development, UX Design, UI Design, Design System, User Flow, Asset Management, Web Development and custom CMS development.

3.

Design

Goals 

Design Goals 

Design Goals 

A.

Reflect Brand Identity: Create a website that embodies the label's ethos, style, and professionalism while prioritising artists and collaborators.

Reflect Brand Identity: Create a website that embodies the label's ethos, style, and professionalism while prioritising artists and collaborators.

B.

User-Friendly Interface: Adapt the style guide for a clear and intuitive user interface, enhancing navigability and readability.

User-Friendly Interface: Adapt the style guide for a clear and intuitive user interface, enhancing navigability and readability.

C.

Strategic Visual Design: Utilise a simplified colour palette and comprehensive icons to create a cohesive look, emphasising artists’ content.

Strategic Visual Design: Utilise a simplified colour palette and comprehensive icons to create a cohesive look, emphasising artists’ content.

D.

Accessibility Focus: Implement design practices that ensure the website is accessible to all users, minimising barriers.

Accessibility Focus: Implement design practices that ensure the website is accessible to all users, minimising barriers.

E.

Engaging User Experience: Develop features that encourage exploration and reduce bounce rates, keeping users engaged with the content.

Engaging User Experience: Develop features that encourage exploration and reduce bounce rates, keeping users engaged with the content.

F.

Intentional Use of Color: Apply the label’s iconic blue sparingly to create visual touchpoints that guide users throughout the site.

Intentional Use of Color: Apply the label’s iconic blue sparingly to create visual touchpoints that guide users throughout the site.

G.

Designed and developed using Framer. featuring a bespoke CMS system allowing full client-side updating.

Designed and developed using Framer. featuring a bespoke CMS system allowing full client-side updating.

interactive components that reflect untitled (recs) brand identity.

interactive components that reflect untitled (recs) brand identity.

1.

A splash page featuring a logo roulette that presents the distinctive and free-spirited branding of untitled (recs).

A splash page featuring a logo roulette that presents the distinctive and free-spirited branding of untitled (recs).

2.

A footer with a newsletter subscription that can be linked to email, webhooks, and Google Sheets.

A footer with a newsletter subscription that can be linked to email, webhooks, and Google Sheets.

check it out.

check it out.

newsletter sign up

newsletter sign up

newsletter sign up

1.

Interactive components—buttons that utilise the untitled (recs) parentheses to emphasise on-click interactions.

Interactive components—buttons that utilise the untitled (recs) parentheses to emphasise on-click interactions.

2.

Continuing the logo roulette in the header to display logos and text, while creating a call-to-action (CTA) with button functionality.

Continuing the logo roulette in the header to display logos and text, while creating a call-to-action (CTA) with button functionality.

A responsive header, with on hover parentheses.

A responsive header category, with on hover parentheses.

…and mobile with a hamburger menu.

…and mobile with a hamburger menu.

All these components work. Hover and click to try it out.

All these components work. Hover and click to try it out.

A footer, with links to all socials and a news letter webform.

A footer, with links to all socials and a news letter webform.

newsletter sign up

newsletter sign up

newsletter sign up

Interactive components.

Interactive components.

Hero section slideshow with news cards designed to stack and scale at various breakpoints for optimal display on all devices.

Hero section slideshow with news cards designed to stack and scale at various breakpoints for optimal display on all devices.

Jerskin Fendrix wins Ivor Novello award for Best Original Score

Jerskin Fendrix wins Ivor Novello award for Best Original Score

28.05.2024

Jerskin Fendrix’s debut film score for the critically acclaimed Poor Things takes home Best Original Film Score, praised as an outstanding example of creative collaboration between composer and director.

Jerskin Fendrix’s debut film score for the critically acclaimed Poor Things takes home Best Original Film Score, praised as an outstanding example of creative collaboration between composer and director.

News cards that archive past events and announcements, designed to stack and scale at various breakpoints for optimal display on all devices.

News cards that archive past events and announcements, designed to stack and scale at various breakpoints for optimal display on all devices.

TAAHLIAH announces debut album 'Gramarye', along with a debut live show at the ICA

25.04.2024
in 2022, TAAHLIAH released a trilogy of singles further establishing her artistic freedom.

TAAHLIAH announces debut album 'Gramarye', along with a debut live show at the ICA

25.04.2024
in 2022, TAAHLIAH released a trilogy of singles further establishing her artistic freedom.

The news section is designed to be fully responsive across three breakpoints, ensuring an optimized experience on desktop, tablet, and mobile devices.

The news section is designed to be fully responsive across three breakpoints, ensuring an optimized experience on desktop, tablet, and mobile devices.

Artists pages scalable for desktop, tablet and mobile.

Artists pages scalable for desktop, tablet and mobile.

Artist pages are designed with ample white space to guide the eye through each section, creating clear separation and making each section distinct. Scalable for desktop, tablet and mobile.

Artist pages are designed with ample white space to guide the eye through each section, creating clear separation and making each section distinct. Scalable for desktop, tablet and mobile.

…and mobile.

Discography page with filter options.

Discography page with filter options.

The discography page features filter options for a streamlined, user-friendly experience. It includes horizontal scrolling on desktop and vertical scrolling on tablet and mobile breakpoints for easy navigation across all devices.

The discography page features filter options for a streamlined, user-friendly experience. It includes horizontal scrolling on desktop and vertical scrolling on tablet and mobile breakpoints for easy navigation across all devices.

Designed and developed with Framer, the site includes a Content Management System (CMS) with web forms, allowing for fast and easy updates.

Check the site out here…

Designed and developed with Framer, the site includes a Content Management System (CMS) with web forms, allowing for fast and easy updates.

Check the site out here…

Designed and developed with Framer, the site includes a Content Management System (CMS) with web forms, allowing for fast and easy updates.

Check the site out here…

untitledrecs.com

untitledrecs.com

untitledrecs.com