Shelf & Screen
Visit live siteThe Goal
Create a website to showcase my writing. I'd been using a Notion file that was not easy to share and didn't allow for cross-referencing.
I needed a new website that would inspire readers to pick up a book or choose a film with intention. The site should encourage people to read more than one review and allow them to sign-up for my newsletter.
About the Project
Shelf & Screen, a passion project of mine, is the repository of the hundreds of reviews I've written of books, films and TV shows.
I delivered a beautiful website that includes complex filtering, a lovely signature font with ligatures, colorful posters and book covers, a body copy font that is easy to read, and a Mailchimp integration for newsletter sign-ups.
Design Concepts
The site should have a literary feeling and be beautiful. It needed to have a defining font that is also easy to read.
The site should have excellent filters so people can easily find what they're looking for.
Animation and Development
I purposely used very little animation on the site as I didn’t want movement on a site dedicated to reading. I did, however, use Lenis Smooth Scroll code so scrolling through the site feels like a premium experience.
To enable the complex filtering, I used dozens of Finsweet Attributes.
Meet the new brand
The site itself was done in neutral colors, off-white and charcoal, to allow for the many pops of color that come from the unique backdrops created for each item being reviewed.
I also used custom code to force the typeface to show its alternate styles.
Mobile Screens
Desktop Screens
