Friends!
Okay so I had a really good idea for the homepage last night. Well. Maybe. Let’s see. It all began when I mentioned in the CSS-Tricks newsletter the other day that designing a homepage of a website is the single most impossible thing in the universe:
Designing the homepage of a website is harder than learning a new framework, more difficult than building an enormous website, and more challenging than memorizing all the values and properties of CSS. In short, the absolute worst thing about the entire field of web development is designing the homepage. It’s just the worst.
I mention this because I’m redesigning the homepage for my website right now and I had a big question I want to answer: how do I make the essays stand out a bit more? I put a lot of time into those and if you aren’t familiar with my work then that might be the best “hello!” I can pull off.
They should definitely go on the homepage in some form or another, but I’m not sure how. Just as links? Big blocks of text? A scrolly carousely thingy? (Absolutely not). A quick scan through other websites where folks have essays or bigger chunks of work on their websites and I sort of feel like there’s nothing here I can emulate.
Well, that’s when I got to thinking: I love how the very best books have an aesthetic that carries through into the type styles, the illustrations, and—most important of all—the cover. In fact, book covers are magic things. They can communicate so much about the story and the text without hardly any words at all. Within five seconds you can tell that a book is a murder mystery or a historical text, one that’s dancing and hopping from side to side, or a book that prowls slowly over a vast and serious distance.
So a book cover is a story (ugh). I mean...a book cover is a tool used to communicate a vast array of human experiences (double ugh). Okay, let me try that one last time: a book cover is a brief and fleeting hello. They’re designed to stop you in your tracks, to point out in the crowd and say yes, this is the mathematical center of everything I love dear in this world. With color, type, and image they can make you curious, they can catch your eye, they can push you away.
I remember a rather famous book designer gave a lecture at Reading University once and told us about the time he was asked to design a series with hideous book covers. At first he was shocked, but then realized that college students were more likely to buy these books that look hideous (because they look cheap) over his fantastically designed works of art (those that look expensive and out of reach for many). The price tag didn’t change, but the covers did, and then those ugly books sold exceptionally well because of it.
So: covers are important.
Perhaps these essays of mine could be styled like mini books then, each with their own little cover? I love that style when a book designer gets to tackle a whole series of books, like this redesign of the Southern Reach trilogy by Matthew Revert:
This visual system can shape the tale in your head as you read. Compare those books above to this redesign by Pablo Delcán:
Why don’t we see websites like this though? I feel like there’s so much we can learn from book covers when it comes to chunking works up on the web. And so, back to my original thought: what if I made these essays look a bit more formal and more like books? What can we copy here?
I made a quick sketch in the browser:
...and, I like it! Perhaps folks will get confused and think that these are real books that I’m selling but I like the way that this denotes these things have way more attention and focus spent on them than other things.
But how do I make this effect work on smaller screens though? I like the grid of all three of them, but at smaller widths things break a bit. What if you can only see the spine of these books on mobile, and then on larger screens they animate out so you can see the covers?
Overly caffeinated and powered by righteous web design fury, I started playing around in the browser with this idea by looking into changing perspective with CSS.
Here’s what I had after a few minutes last night:
See what I mean here? Just seeing the spines on mobile and then at larger sizes seeing the whole cover of the series. And I’ve never experimented with this CSS property before—I guess I’ve always treated websites as a 2D surface—but we can mess around with things a bit more than that, especially on personal websites. But I think it’s interesting! And oddly skeuomorphic! And makes my thoughts seem more planned and organized than the scattered array of utter nonsense they are!
Anyway, I dearly hope you are not designing a homepage right now.
Until next time,
✌️ Robin