While working on Lush, the drink mixing app I designed and developed, I spent a lot of time designing the icon.
The initial concept was a splash of liquid being poured into a glass.
I created a few rough sketches on paper and then converted them to vector outlines in Sketch.
I was trying to find a shape that fit perfectly within a circle while still retaining some liveliness with the splash.
Because the app illustrates drink recipes with layers of colors, I tried to mimic that effect in the icon.
None of the options felt like they had potential, so I abandoned that attempt.
I spent more time tweaking the curves along the back of the glass to try to give an illusion of depth.
After adding some radial gradients for shadowing, I was happy with the results.
I decided to move on to the logo type.
The working title for most of the development process was Mixers & Elixirs. For the sake of brevity, we shortened it to Elixirs halfway through development.
I tried my hand at a couple of custom letterings but nothing quite captured the mood.
A few weeks before launch, we accidentally stumbled upon the name Lush.
We thought the double meaning was a perfect fit for the app and abandoned the Elixirs name.
Rather than trying to do custom lettering again, I used Rochester as a starting point for the logo type.
I tweaked some of the outlines and cleaned up the merging of the ‘u’ and ‘s’ letter forms.
With the logo mark and logo type complete, we launched the app.
We got a lot of positive feedback about the icon. However, one thing we heard over and over was that the icon made the app look like it was exclusive to wine.
As wine only plays a minor part of our app (used in drinks like Sangria), we decided to revisit the icon design to more accurately reflect our app.
I started out by trying to convert the circle bottom of the wine splash to something closer to a Old Fashioned tumbler.
The splash didn’t quite look right, so I tried a couple of other variations that simulated a liquid sloshing back and forth on a 45 degree angle.
After some initial exploration, I cleaned up the curves by creating three stacked infinity curves and skewing the right side.
Once I had a shape I felt good about, I tried a handful of variations on colors and shadows.
The app uses 5 colors along a red to blue gradient to style each app section, so I tried to stick with variations of those colors.
None of these options felt quite right, so I decided to try something else.
The artwork in the app uses black glass outlines filled with colored liquids. I decided to try to mirror that effect in the icon design.
I also though putting an ice ball in the glass might make it more recognizable, so I created a few variations on that theme.
I tried a few other variations to see if anything clicked; a hatched glass front, a square ice block, shiny glass reflections, and a swizzle stick.
I realized something with the glasses I had been working with. Each one was very full.
I moved the amount of liquid down to a more reasonable level. Perhaps a level just after taking the first couple sips.
This felt much more balanced, and allowed the ice ball to float with a little more of its surface showing.
I thought the black outlines were adding a little too much visual noise, so I tried a version where the black outlines consumed the entire background.
This version did lead to a nice geometrically repeating design. The sections of liquids are 4 stacked ovals with a 4:1 ratio, resulting in a nice 1:1 ratio image. The bottom section is rounded off slightly more than an oval to represent the bottom of a glass tumbler.
I tried a few variations on the brightness of the liquids, but they all seemed to be drowned in the sea of black.
Switching back to a white background and eliminating the black glasses made the icon stand out much more.
I tried a few different levels of transparency at the top of the glass, even trying a version with the top of the glass removed altogether.
These felt very crisp and clean, but it was starting to look like the logo for a database, not a drink.
I decided to try to add back in some of the elements that identified this as a drink.
I created a handful of variations with and without the glass top, ice, and straw.
We finally settled on this version. The refraction of the straw through the ice and the ice through the glass adds a lot of depth with just a few shapes.
I’m very happy with how it turned out. It’s often hard to continue to push through variation after variation of the same design, but in the end, the work pays off.
The app is available on the App Store and you can read more about it on the Lush website.