New Username Symbols: The Journey

Oct 7, 201312 min read

Deviation Actions

Published: Oct 7, 2013

46.3K Views

A New Road to Travel

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.

Think about when you first found and joined deviantART. Did any of the symbols make sense? Did you stop and think "what is this ~ before my name and why is it there?" Maybe, but possibly you're probably like me and just kinda accepted it because that's the reality presented to you. After a while, though, you'd have seen the * and maybe even a ` or ^ and found out that they were a different type of member, but you probably still didn't know what that meant or even where to find out. I remember clearly that I absolutely had to have a * the moment a friend of mine got theirs. Was it because of the * or because of what it meant? Absolutely the later. It set you aside; it made you special. Well, that's how I felt at the time, anyway. Hopefully you can relate.

The other thing I felt was sadness. Having the old symbols was like part of your deviantART psyche. It's part of the landscape. Realising in that moment that we were going to lose those symbols (speaking selfishly as someone who never thought they'd ever get a $ in front of their name) and therefore some of our old identity was quite a moment. Let me assure you that everyone on staff feels the same. We are all aware that this is a very important thing for not only deviantART as a site, but more importantly for its community.

The Brief

The initial brief for this project was that we would be replacing characters with icons that would be clearer in their meaning. At the outset we had the symbol be accompanied by a label. In fact, that was one of the primary reasons the new symbols would be moved from the left to the right of the user name.

Further more, I added to this by imposing technical requirements: symbols should scale in the same way as the original characters, feel like an extension of the username, work in multiple environments and not clash with the deviant avatars.

Initial Development

To match all the requirements and because the symbol was going to be accompanied by text, the whole item had to be packaged in a block or a "label". Which gave us this test:

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. I was also realising that whilst the boxing might solve problems with spacing and icon size further down the road it wasn't going to scale.

To add to this, initially I was using the traditional PNG icon approach and to cater for the myriad of sizes and colors necessary to support our entire network, the creation and maintenance of a PNG spritesheet would be pure insanity.

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.

And finally...

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!

Ian.

-----

p.s for those that are interested, I've submitted a vector pack of all the new symbols for use around the site:

Mature Content

Official deviantART User Symbols Pack by zilla774

Comments626

Join the community to add your comment. Already a deviant? Log In

helldog2004

Nov 9, 2013

I know for some people the user symbols are a collectors item, referring to forums where you can get a new icon by posting more threads / replies and such (This keeps the members active).

So maybe these are some great ideas to implement in the website:

1. Create medals or badges for adding art (maybe even different medals or badges for different kind of art), you can give bronze, silver, gold or platinum.

2. Create medals for having x times your art added to some else's favourites.

3. Create medals for being active x years.

And many more can be created for a community such as this one.

Positive side of having medals and/or badges is that members suffering of collect-illness (and this illness is contagious) will come back for more by adding more art and having a more active community.

Bad side for this idea is that there has to be made a new page for every member where they can show-off their medals and badges, just like the Llama badge we can receive.

Now, some of these can also be used as user symbols, like the medals and/or badges for being an active member over a X time of years.

And to make it even look cooler, the user symbols should be displayed before the nickname instead of behind it.

*Helldog2004 looks a lot cooler then Helldog2004* (Now the star falls into nothing in my opinion).

But the design looks really clean, and we should keep it that way, nice and simple.