Blue Notes project
STEVE HONEYMAN GOES ON THE RECORD ABOUT HIS SIDE PROJECT RECREATING CLASSIC ALBUM COVERS IN CSS.
TELL US WHAT YOUR SIDE PROJECT DOES
Blue Notes recreates classic Blue Note album sleeves from the 1950s and 1960s using HTML and CSS. All the layouts and typography are responsive.
WHY DID YOU CREATE IT?
My first real exposure to graphic design came through the jazz, funk and hip-hop scene of the early 1990s. Late last year I wanted a side project that would showcase my love for graphics, typography, layout and web development. Recreating these sleeves seemed like a great way to do this.
WHAT WERE YOU HOPING TO ACHIEVE?
While this project was part homage and part test of my chops, it was also inspired by a desire to create and experiment with radically different layouts. My focus was on recreating the sleeves as exactly as possible and making them responsive – or, better put, fluid. As a devotee of web standards I wanted to incorporate lean, accessible, semantic code wherever I could. Technically I wanted to learn more about fluid typography and incorporate clipping paths, blend modes, filters and other exciting CSS properties. But I also wanted to make designs I loved and had a real emotional connection with come to life in browser.
WHAT TECHNOLOGIES WERE USED IN BUILDING IT?
Layouts were initially created with floats, padding, margins and percentages. Then I switched to CSS Grid and got fantastic results – especially with regard to accessibility and separating source order from visual appearance. I used a mixture of ems, viewport width, calc(), CSS locks and media queries to make type fluid and used font-face, letterspacing and rotate to incorporate and set type. The humble span element was invaluable in helping me target and style letters.
HOW HAS IT BEEN RECEIVED?
Really well! I was incredibly honoured to speak about the project at Ampersand Conference this year and spoke at WordUp Brighton and WordCamp London too. I’ve been bowled over by the feedback I received.
WHAT DO YOU THINK YOU’LL DO NEXTWITH IT?
I’m working on some new sleeves, all of which are more ambitious. I’m also excited about variable fonts and can’t wait to incorporate these – the potential to target the x-height, serifs, ascenders and descenders of individual letters blows me away!