Designing the RockMelt Logo
2011 March 2
Way back in 2009 we at DesignMap were working on a stealth project for a new web browser called RockMelt, now in public beta. Part of that project was the design of their logo, which went on and off over the span of two months. With other projects going on simultaneously and the amount of work that we put in for this project overall, the two months allotted for logo design ended up feeling like 2 weeks. We thought this would be a fairly simple project, but we hit plenty of brick walls, made some piles of crap, suffered moments of total despair, and eventually arrived at an “aha!” moment where everything came together. Come to think of it, I think I just described every design project I’ve ever worked on.
One note of caution: If you’re looking for a post about “how to execute the perfect logo design project,” this isn’t it. And, while I love when a project goes smoothly, I think we as designers grow the most when being presented with and overcoming challenges. And so, this post is about the challenging process of designing the RockMelt logo and the things we would do differently if we had it to do over again.
What’s that, a Rock-Melt you say?
It all began with a name that brought to mind a geological phenomenon and a fuzzy idea of a socially connected browser. I love the fuzzy zone — nothing but options — but I dread it for the same reason. Our attempt to clarify the “fuzz” began with an effort to find the relationship between the name and the product. We visualized its parts, the name’s combination of two elemental opposites, rock and melt (solid and liquid), and the product, a socially networked web browser.
This first step considered conceptual directions we might take. Do we go for a unique type treatment? Do we emphasize the letters R and M? Do we make an icon of a physical thing like a mountain, volcano, melting rock, cave structures or a molten sphere? Interestingly, nobody gravitated too heavily to the molten sphere that would eventually transform into the final logo. The three directions that were chosen are marked with green asterisks below: a mountain graphic that integrated the name (far left), the name sculpted from stone (top right) and an emphasis on the letters R and M.
Next we explored the three chosen directions further. This was a very short round of explorations that happened in about a day. Almost immediately, the decision to dig deeper into one particular variation (with green asterisk below) was made. At the time we at DesignMap and RockMelt felt like this variation had a lot of possibilities (and it did as you’ll see further in the post). Looking at it now, though, a literal mountain graphic feels like the user might receive a Clif bar and a ski pass with every download.
A mountain of exploration
In the beginning there was a vast valley of possibilities, but we had arrived at our mountain. Well, lots of mountains as you’ll see below. We explored color, shapes, introduced a flame image (feel free to chuckle), added detail, stripped detail and on and on. This became cycle of illustrating variations only to find that they became almost completely unrecognizable — sometimes even resembling a pile of crap — at desktop icon size. Not exactly what we were going for.
In our first set we worked in black and white so we could focus on the interacting shapes of the graphic. Was the mountain organic and realistic or geometric and abstract? How could we arrange the type in relation to the mountain? It was also at this point that we recognized the need to introduce the “melt” characteristic to the logo, so we tried various placements of drips. We introduced a flame to represent a source that causes the melt. This flame within the mountain was a direction that we pushed further on with, and at that point we believed it would in fact be the ultimate direction of the logo.
When we introduced color, we started to consider the logo as a desktop icon. This was the most challenging point in the project. We were straddling a line. On one side was the conceptual area where we were still making variations of a mountain and flame, and on the other side we were roughly visualizing how the logo would interact with its environment — a person’s desktop and toolbar.
Since we were cranking out a lot of variations in a short amount of time we worked primarily in vectors with plans to move to pixels the favorite variations became clear. Since the PC version of the browser was going to be in blue tones we went away from grey and blues as the base shape (the mountain) in favor of warm oranges and reds. Also, the warm colors felt like a nice expression of the “melt” characteristic.
As part of the quick variations, we created small and large versions side by side on a Windows-like blue background.
We then placed our favored logo variations on a desktop and a Windows XP toolbar. We wanted to assess what a triangular, mountain shape looked like in these environments, especially side-by-side with other popular browser icons. This is where things got a little tricky. We felt that the flame and mountain became hard to recognize as such and, in my opinion, sort of resembled a Star Trek logo. I did like that our shape didn’t follow the trend of round logos for web browsers, but unfortunately it wasn’t working.
However, we weren’t ready to give up on the mountain yet. In an effort to strengthen the mountain’s recognizability, we did some variations without the flame and made the mountain more organic and realistic. We settled on a common desktop icon size of 32 x 32 pixels and created a few Photoshop variations. This was the last of the mountain variations resulting in the infamous “piles of crap.”
Back to the drawing board
Circling back to the initial sketches we took a small step away from the mountain and decided to see what we could come up with for a mountain with molten lava spewing from it, a.k.a. a volcano. We had three volcanic directions — a dimensional volcano in a sphere, a dimensional volcano on a plane and a flattened volcano on a circular disc. We thought the problem with legibility was that the organic shape was too unusual to recognize by itself on an unpredictable desktop background, and we hoped that by placing it on a recognizable geometric shape, we would grant the mountain legibility.
At this point, instead of making many variations in Adobe Illustrator, we chose the volcano in a sphere. This time we rendered it almost immediately in Photoshop for two reasons: First, time was running out and the pressure to deliver was mounting. Second, this allowed us to quickly assess the problems with legibility that we were facing before.
We tested a transparent sphere and a sphere with a solid background on a range of colored desktop backgrounds. However, it was still hard to read specifically as a volcano in a sphere and we had hit another brick wall.
The big “Aha!”
At this point we were at our wits’ end. In addition to the scaling and recognizability issues there was another thing that was bugging us — our mountain and volcano directions were considering characteristics of the name, rock and melt, but the product as a social web browser was completely disregarded. The final solution wasn’t completely apparent even though the answer was staring us in the face back on the initial set of concept sketches. I don’t remember if we specifically revisited the initial concept sketches or if all of the work we had done up until that point somehow started to come together, but I do remember having a “eureka” moment as I imagined the logo one morning as I got ready for work. When I arrived at the office, I sat and roughly sketched up a new take on the “molten sphere” — this time combined with an iconic networked globe image — and shared it with the team. It was very well received and the marriage between rock, melt and a social web browser finally resonated! It scaled down perfectly, the colors worked beautifully and the RockMelt logo was born.
This is the condensed timeline of the RockMelt logo’s lineage. In top to bottom, left to right order are the first two concept sketches, the first Photoshop rendering and the final rendering done by Nate (Principal, DesignMap), which gave it an excellent realism and edge.
In hindsight, things I would do differently:
Time permitting, I would push the three directions (figure 1.2) further and do a lot more variations. In the additional variations I would look for more ways to convey the idea of a social web browser.
Additionally, I think the variations (figure 1.2) were still heavily weighted as conceptual ideas. In other words, the drawings were thinking of the concept or essence of the eventual logo without taking into account the eventual size and environment of the logo. That’s not to say that exploring concept at that point was a bad thing, but I think the project would have been more efficiently served if I had layered concept with considering the logo as a desktop icon.
During the mountain phase, we may have began too large (figure 1.4). If we had started small, 16×16 pixels or so, we would have been better able to work out what details form the illusion of a mountain at that size.
The volcano in a sphere (figure 1.9) and the flame in the mountain (figure 1.6) are both unique enough that they would likely require seeing them at a larger scale as a frame of reference to recognize them at a smaller scale. While it’s a good possibility that a user would see the larger version when downloading the browser we didn’t want to completely rely on that. (One could argue that the Firefox logo has a similar issue, but thats a subject for another blog post.)
In conclusion, if you plan on designing a logo that will be a desktop icon always think twice before settling on a mountain image. Also, no matter how simple a design project seems they always become a living, breathing thing that we as designers need to respond and adapt to. And, no matter how many times we as designers tackle projects of similarity they always tend to have unique qualities that challenge us in different ways.
One note of caution: If you’re looking for a post about “how to execute the perfect logo design project,” this isn’t it. And, while I love when a project goes smoothly, I think we as designers grow the most when being presented with and overcoming challenges. And so, this post is about the challenging process of designing the RockMelt logo and the things we would do differently if we had it to do over again.
What’s that, a Rock-Melt you say?
It all began with a name that brought to mind a geological phenomenon and a fuzzy idea of a socially connected browser. I love the fuzzy zone — nothing but options — but I dread it for the same reason. Our attempt to clarify the “fuzz” began with an effort to find the relationship between the name and the product. We visualized its parts, the name’s combination of two elemental opposites, rock and melt (solid and liquid), and the product, a socially networked web browser.
This first step considered conceptual directions we might take. Do we go for a unique type treatment? Do we emphasize the letters R and M? Do we make an icon of a physical thing like a mountain, volcano, melting rock, cave structures or a molten sphere? Interestingly, nobody gravitated too heavily to the molten sphere that would eventually transform into the final logo. The three directions that were chosen are marked with green asterisks below: a mountain graphic that integrated the name (far left), the name sculpted from stone (top right) and an emphasis on the letters R and M.
figure 1.1
figure 1.2
In the beginning there was a vast valley of possibilities, but we had arrived at our mountain. Well, lots of mountains as you’ll see below. We explored color, shapes, introduced a flame image (feel free to chuckle), added detail, stripped detail and on and on. This became cycle of illustrating variations only to find that they became almost completely unrecognizable — sometimes even resembling a pile of crap — at desktop icon size. Not exactly what we were going for.
In our first set we worked in black and white so we could focus on the interacting shapes of the graphic. Was the mountain organic and realistic or geometric and abstract? How could we arrange the type in relation to the mountain? It was also at this point that we recognized the need to introduce the “melt” characteristic to the logo, so we tried various placements of drips. We introduced a flame to represent a source that causes the melt. This flame within the mountain was a direction that we pushed further on with, and at that point we believed it would in fact be the ultimate direction of the logo.
figure 1.3
Since we were cranking out a lot of variations in a short amount of time we worked primarily in vectors with plans to move to pixels the favorite variations became clear. Since the PC version of the browser was going to be in blue tones we went away from grey and blues as the base shape (the mountain) in favor of warm oranges and reds. Also, the warm colors felt like a nice expression of the “melt” characteristic.
figure 1.4
figure 1.5
figure 1.6
figure 1.7
Circling back to the initial sketches we took a small step away from the mountain and decided to see what we could come up with for a mountain with molten lava spewing from it, a.k.a. a volcano. We had three volcanic directions — a dimensional volcano in a sphere, a dimensional volcano on a plane and a flattened volcano on a circular disc. We thought the problem with legibility was that the organic shape was too unusual to recognize by itself on an unpredictable desktop background, and we hoped that by placing it on a recognizable geometric shape, we would grant the mountain legibility.
figure 1.8
figure 1.9
figure 2.1
At this point we were at our wits’ end. In addition to the scaling and recognizability issues there was another thing that was bugging us — our mountain and volcano directions were considering characteristics of the name, rock and melt, but the product as a social web browser was completely disregarded. The final solution wasn’t completely apparent even though the answer was staring us in the face back on the initial set of concept sketches. I don’t remember if we specifically revisited the initial concept sketches or if all of the work we had done up until that point somehow started to come together, but I do remember having a “eureka” moment as I imagined the logo one morning as I got ready for work. When I arrived at the office, I sat and roughly sketched up a new take on the “molten sphere” — this time combined with an iconic networked globe image — and shared it with the team. It was very well received and the marriage between rock, melt and a social web browser finally resonated! It scaled down perfectly, the colors worked beautifully and the RockMelt logo was born.
This is the condensed timeline of the RockMelt logo’s lineage. In top to bottom, left to right order are the first two concept sketches, the first Photoshop rendering and the final rendering done by Nate (Principal, DesignMap), which gave it an excellent realism and edge.
figure 2.2
Time permitting, I would push the three directions (figure 1.2) further and do a lot more variations. In the additional variations I would look for more ways to convey the idea of a social web browser.
Additionally, I think the variations (figure 1.2) were still heavily weighted as conceptual ideas. In other words, the drawings were thinking of the concept or essence of the eventual logo without taking into account the eventual size and environment of the logo. That’s not to say that exploring concept at that point was a bad thing, but I think the project would have been more efficiently served if I had layered concept with considering the logo as a desktop icon.
During the mountain phase, we may have began too large (figure 1.4). If we had started small, 16×16 pixels or so, we would have been better able to work out what details form the illusion of a mountain at that size.
The volcano in a sphere (figure 1.9) and the flame in the mountain (figure 1.6) are both unique enough that they would likely require seeing them at a larger scale as a frame of reference to recognize them at a smaller scale. While it’s a good possibility that a user would see the larger version when downloading the browser we didn’t want to completely rely on that. (One could argue that the Firefox logo has a similar issue, but thats a subject for another blog post.)
In conclusion, if you plan on designing a logo that will be a desktop icon always think twice before settling on a mountain image. Also, no matter how simple a design project seems they always become a living, breathing thing that we as designers need to respond and adapt to. And, no matter how many times we as designers tackle projects of similarity they always tend to have unique qualities that challenge us in different ways.
