Blue Notes

A labour of love and typography

In late 2017 I set myself the challenge of recreating some of the legendary Blue Note designer Reid Miles artwork in the browser, partly to test my layout chops, partly to learn and explore new technologies and techniques and very much to challenge what we think is possible with layout and typography on the web.

All the sleeves featured in the screengrabs below were created using HTML and CSS, most of the layouts are responsive, all the type is fluid. There's no JavaScript and I predominatly used vanilla CSS.

A post with code snippets detailing the creation of the sleeves, some of the development challenges I faced and how I incorporated responsive typography in the early days can be found here

As a bit of an update a blog post detailing how I recreated a few of the more complex sleeves using CSS Grid and how I started to add texture using CSS filters and blend modes amongst other things can be found here

For those who might want to play with and explore the code used, here's a link to the original sleeves and a CSS grid version of Cornbread on CodePen

large custom lettering spelling the word up on a faded black sleeve an image of the three sounds surrounded by three coloured rectangular and square bars coloured lettering tightly laid out in a block on a black background classic reid miles typography featuring hundreds of exclamtion points laid out in a square seven black rectangles that resemble a keyboard laid out at uneven angles across a faded cream sleeve image of kenny dorham playing the sax with large maroon and green circles placed vertically on either side of the titling album sleeve with nine vertical black bars across a white background the words cornbread repeated to create a square on a faded red background with an image of lee morgan inside this faded blue duotone image of grant green playing the guitar large lettering of the title lee-way, juxtaposed alongside a diagonally clipped image of lee morgan playing a trumpet headshot of John Coltrane and his sax with titling arranged round his head coloured titling laid out in a rectangualr block on the left of black sleeve headshot of lee morgan with the type laid out to the left of his face a classic jazz image of lee morgan playing the trumpet with type underneath image of donald byrd playing the trumpet with knocked out letters on a bright blue background image of art blakey with the title arranged in the shape of a number one running down the right hand side of the sleeve donald byrd leaning on an e-type jaguar with text arranger around image of kenny doreham looking at and holding the words una mas at arms length image of eric dolphy through a brass cirle smokimg a cigarette