The logomark was inspired by classic fountain pens and martini glasses
TLDR
The Drinks Diary is a labor of love, born out of our own struggles with finding clear, visually engaging recipes online.
So far, The Drinks Diary features :
1. Visual recipes, that make even complex cocktails approachable
2. Universal units, ingredients are shown in parts/ratio (we will be working on switching preferred units in the future)
3. Search and filter, options to help you find recipes fast
(More to come…)
What we are currently working on :
1. Standardising the recipes, ingredients, methods, etc into our schema
2. Improving the UX overall
3. Visualisation and animation systems
About the project
As someone who enjoys mixing up cocktails on weekends or holidays, I've often found myself struggling with online recipes. From tiny fonts that make me squint to measurement units I'm not used to, across different sites, the experience can quickly get frustrating. And don't get me started on the long fillers for SEO with all those ads before the actual recipe.
I understand those websites might serve a purpose for their regular users. The issue, from my perspective as a design-minded hobbyist, was the lack of a more engaging, visual-first approach. Mixology is an art, yet I felt most recipe websites fell short in capturing that sense of craft and creativity.
Initial visual design idea for The Drinks Diary began with this visual experiment in After Effects
Simpler version of the previous animation for beginning dev experiments (view Figma prototype)
Inspiration
Picture this: 2021, a guy with a history of club-hopping packs up for a month of hikes for a much needed solo mental break, gets stuck in an apartment alone during lockdown, just a minute walk away from a mart loaded with all spirits, garnishes, along side a butchers with all the choice of proteins and what-not. Not like the universe was telling me to embark on a mixology adventure, right?!
So, I did what any sane guy like me would 👀, I stocked up on "spirit-ual" supplies and dove headfirst into the world of cocktails. As I played around with flavours, I couldn't help but notice the glaring lack of ease in finding recipes out there.
Also it was the perfect stormy weather the whole month with full blown summery days every now and then
Fast forward a couple of years, and I'm catching up with my friend Sampada, a fantastic front-end developer who's always up for a good challenge. We were both eager to collaborate, and as I share my backlog of ideas, she showed interest in this idea from my old lockdown experiments. With the perfect blend of creativity and technical skills between us, we decide to bring this idea to life.
Planning
This was our timeline for an internal beta launch
We both know from experience that a project would grow up in scope as long as we let it - so this was an attempt to focus on a limited scope while still keeping the main value proposition intact. If you paid attention to the timeline, you might be wondering about the beta launch as it has been quite a while past that date. Here's a secret link to the beta preview 🍻. We would love your feedbacks!
Design
Initial ideation sketches
With the idea firmly in place after a few online meetings, it was time to get the creative juices flowing. I started by sketching out rough concepts, visualising how I could transform the traditional recipe format into something more engaging and intuitive.
What you see above were some sketches of initial ideation mostly for the first beta version. As the sketches evolved, I found myself drawn to a clean, minimalist aesthetic that would allow each cocktail to be the star of the show.
Animations
I knew that animation could be a game-changer in terms of making the recipes feel livelier. So, I started exploring ways to incorporate subtle motion design, from the satisfying pour of a drink to the gentle sway of garnishes.
However, I had to dial that back a few notches to allow for smoother collaboration between Sampada and me as we are only spending our weekend time on this. I divided the animation difficulties from level 1 to 3, we are at level 1 during our beta release.
One of the visual experiments (view Figma prototype)
We are still iterating and trying out new things. I currently imagine the final version would have a more defined illustration style with some personality (or different styles to choose from, who knows) and also more refined animations. Gotta take it one step at a time though…
As we dove more into the design process, one thing became clear - we needed to create a system that was as efficient as it was elegant. By thinking in terms of reusable components and a standardised information architecture that we were comfortable with, we aim ensure that our codebase stays lean and maintainable, even as the project grows.
Development
An early concern for us was the animation library we would use, as that would also determine the flexibility/scalability choices we had in regards to the visuals - which would play a significant role in this project. We had a few choices, GSAP, Framer Motion and Anime JS. We decided to go with Framer Motion as it was the easiest to implement in our existing stack without many performance tradeoffs.
For the first beta release, we are not much concerned about the technologies we use. We plan on deploying it on our own servers after we have set the foundations. We also expect a stack audit and following changes if we see viability in developing native apps for the project - that remains to be seen as we slowly create a buzz about it.
You can learn more about the development story in Sampada's website (when she decides to make a post)