Deviant Login Shop  Join deviantART for FREE Take the Tour
×

:iconzilla774: More from zilla774


More from deviantART



Details

Submitted on
October 7, 2013
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
28,862 (6 today)
Favourites
284 (who?)
Comments
627
×

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:

Pm-symbols-test by zilla774

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:

Pm-symbols-test2 by zilla774

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.

Premium-comparison by zilla774
(old * shown in Trebuchet, next to new star)

Then came the volunteer icon. Here was my first pass:

     Volunteer-comparison by zilla774
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:

Seniors-comparison by zilla774

Next, the new icon - 'til hell freezes over. And that could only ever be a flame.  

Flame-large by zilla774
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:

dA-logo by zilla774

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.

All-compare by zilla774

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.
Flame-final by zilla774
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. 

Heart by zilla774
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.

dA-logo-comparison by zilla774
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.

Final-set by zilla774

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.

Comment-demo by zilla774 Link-demo by zilla774 
(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.

Guide-demo by zilla774

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: 

Official deviantART User Symbols Pack by zilla774


The process of designing the new user symbols, from conception to launch.
Add a Comment:
 
:iconhelldog2004:
helldog2004 Nov 9, 2013  Hobbyist Digital Artist

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.

Reply
:iconsailorcancer01:
the :new: user symbols are totally awesome. I hope that I can get a :new: user symbol my user page used to look like this ~sailorcancer01 now it looks like this sailorcancer01.
Reply
:iconsynthes:
synthes Oct 24, 2013  Professional Interface Designer
I'm a little bit late but I was confused about the new symbols in the first moment. I came back to dA after several weeks and looked for my username at the topbar and was wondered what symbol is that behind my username. After reading some journals about these new symbols I know which is for what. But...I think they should be in front of our usernames, not only because we know that from the past, but behind the username they look wrong for me.
Reply
:iconbluewyrm:
I think my problems with the new symbols are more about the placement than the symbols themselves - when they're before the username, they function pretty much like Dr., Mrs., Ms., or Mr. do in the real world - they provide a little mostly inconsequential info about the user and they sit in the same place - but when they're after the name it's just... confusing. It means the same thing as it did before, but it's not in the conventional place such a thing would appear.
Reply
:iconrydi1689:
rydi1689 Oct 16, 2013  Hobbyist Digital Artist
I thought the heart had been selected to reflect the symbol of Community Relations :iconcommunityrelations: See the heart? Now all the volunteers are a part of CR so I assumed that was the source of our heart symbol.

But your description also works just about fine :iconokie2plz:
Reply
:iconlorriewhittington:
LorrieWhittington Oct 15, 2013  Professional Traditional Artist
That was interesting. I rather like my medal.

Hello Ian btw, hope you and yours are all good.

Lorrie xx
Reply
:iconabipal:
AbiPal Oct 14, 2013  Hobbyist General Artist
I ... hadn't even noticed the pretty little star next to my name. /shame
Reply
:iconsaphireta:
saphireta Oct 14, 2013   Traditional Artist
I agree with everything you wrote here and I like to see the process. Good job and thank you for posting this. But.. well yeah, I already got used to my tilde..and to know the meaning of others :)

In my opinion the symbols could be a little bit smaller (same as the letters are) and I'd put a bigger gap between the username and the symbol, especially in the case of star. Also make the upper part of the senior symbol more simple. And as someone else noticed before, having the symbol on the right side makes mess when using the username in sentences.
Reply
:iconsparrowwrightheart:
SparrowWrightheart Oct 13, 2013  Hobbyist Digital Artist
Wow, a lot went into this update. :o Thanks for all the hard work. :D It's nice to know the staff does work to improve things. Thanks again.
Reply
:iconsapphira-adi:
Sapphira-Adi Oct 12, 2013  Hobbyist General Artist
I don't have much of an issue with the new symbols. I've seen many others suggest having them at the beginning of the username and I completely agree with that, it would look better especially when you use the deviant in a sentence. I also like the text that comes up when you hover over the symbol, I finally know what each one means. I also don't have a problem of not having a symbol :meow:
I don't like the outgoing link symbol, it looks too big and boxy and distracting. The idea of having an outgoing link symbol is great, but maybe make it look more like it belongs because it looks really out of place. I'm sorry but I don't have any good ideas to give of what could look better ^^;
Reply
Add a Comment: