When I was first approached with the project to redesign and replace our user symbols I was naturally quite shocked. For those of us who've been part of deviantART for a long while, changing the username symbols seemed like changing the colour of the sky, or asking everyone to suddenly start walking backwards, right? It seemed like such a fundamental part of what deviantART is that it was hard to take on board. But then really, when you think about it, the old symbols were meaningless at face value. And that, my dear friends, is exactly why we set about looking at rethinking them.
Clearly, whilst this worked for larger comment titles, it wasn't going to work for smaller areas. The choice at that point was to remove user name "labels" in smaller areas, or remove the text and place that in a tooltip (something we had in the works for a long while before the start of this project, but never seemed to make the live site). We chose the later, which moved us to this:
Initially this was fine, but the more I tested it, the more the box felt clunky and unnecessary.
There needed to be a more flexible approach.
From an Image to a Font
This flexible approach was kinda obvious. What icon could behave in the same way a font character behaved? Another font.
I'd recently rebuilt the UI for deviantART muro
using a webfont - dramatically improving page load times, plus the look on retina screens and mobile devices was amazing
. But using this technique across the whole of dA? deviantART muro
is limited to HTML5 capable browsers, which basically means a small set of very modern browsers all easily capable of handling custom fonts nicely.
Pushing this technique to the entire deviantART network was going to introduce problems not encountered before - namely older, less forgiving browsers.
So I set about testing various webfont approaches until I was sure that this was scalable across the whole of our network. This was definitely the defining part of this project; once I knew I could support this, building out the vectors and then webfont was the easy part.
Creating the New Icons
Now I had the rough concept and the technology locked down, the next stage of the project was to design the actual icons themselves. We had to translate from, lets face it, pretty randomly chosen characters to more meaningful icons. I also set myself an additional goal - if possible, create icons which tied back to the previous symbols in a way that made them identifiable to our current members.
The premium member icon was first. The obvious solution is a star. It's also something we use a lot around the site and so ties nicely to the dA theme.
(old * shown in Trebuchet, next to new star)
Then came the volunteer icon. Here was my first pass:
The ^ is referred to internally as the volunteers "hat", hence why I went for a crown, I also tried a top hat...
The shape of the seniors' "tick" or ` was already hinting at a medal shape, and it's an award that is given in recognition, so that also made sense. I felt strongly that it was important to try to reflect the transition from a Premium Member to a Senior Member in some way, and the obvious solution was including the Premium star in the design. I tried a few variations before getting it right:
Next, the new icon - 'til hell freezes over. And that could only ever be a flame.
The final issue was how to approach the staff icon. I didn't want to carry forward the dollar aspect of the symbol. This is something I think we generally disliked the connotations of, even though it was originally chosen because we were paid staff rather than volunteer staff.
After a few failed attempts at things like peace icons, or a thumbs-up, I tested a lightning bolt which was closer in dimensions to the $, but it still didn't feel good.
I went back a step and just tried the dA icon:
Now I had a set that worked together. But there where some problems. At a small size, some of these icons sucked. The flame and crown were just a mess small, and worse: the deviantART logo was either too wide, or too tiny when compared to the other icons. The vibe just wasn't quite right.
Back to the drawing board
With the help of an icon $starvingartist
had already produced, I refined the flame icon, which helped it look a whole lot nicer smaller.
Then I ditched the crown and tried a heart. This felt, to me, much more in keeping with the vibe the volunteers have: those guys give their time freely for the love of the community.
Finally, the dA logo. As you can see in the comparisons below the logo is actually pretty complex with multiple strokes when you break it down. These strokes are the main issue when you shrink them right down in size. They just go to mush. My first take attempted to balance the stokes to achieve the same feel, but still wasn't working, the second wasn't much of an improvement, so the final idea just took the internal structure and removed the stroke entirely. The end result was much stronger. Plus, being boxed it fixed the spacing issue.
Beta tester versions were simply a matter of taking the original symbol and making it an outline. This was the simplest solution I could find without reinventing each symbol, adding to the icon in some way, or relying heavily on color. The Groups icon we already had, so that was that.
I still had the problem remaining of boxing verses unboxing. The icons were so strong on their own that I opted to just remove the box and go for it.
Anatomy for Beginners
Now I had a workable solution. The final set balanced nicely, looked roughly how we had stuff before and would scale.
I was adamant that the only way this was going to actually fly was if the symbol behaved in a way that made it feel attached to the username. Using font characters such as $ and * was easy, but this approach was much harder to get accurate. In practice, I found that if the symbol alignment was off by even 1 pixel, it looked really really odd.
Therefore, the next part of the design process was to build out HTML demonstrators which not only proved the theory actually worked in practice, but also locked down the style guidelines.
(examples taken from a prototype demonstrator - many more areas were tested)
Once this was browser tested and signed off we started building the live version (big shout to $fartprincess
who did the implementation). As I had expected at the start of this project, we encountered a lot of issues with the sheer volume of placements you can find usernames. It was getting kinda crazy, so to help out $fartprincess
and myself I built out another demo which included an "Anatomy of a Username" guide. This allowed us to understand exactly how the user symbol should be presented in any given size, name, or type scenario. This improved the process dramatically.
The solutions seem kinda obvious when I read this back, but this process took many weeks of discussion and a not insignificant amount of soul searching over if we should do this in the first place before I even started doing any design work.
No doubt we'll continue to refine the designs, and thank you to everyone who has contributed to the end result. I'm really proud of these symbols, and as $Heidi said in the launch article (fav.me/d6otoe8), I hope these new symbols will have just as much meaning and visual attachment as ever.
Hope y'all found this interesting!
p.s for those that are interested, I've submitted a vector pack of all the new symbols for use around the site: