Why we designed new neighborhood badges
As you should have seen, to coincide with Tagwp’s ninth birthday, we lately launched the model new neighborhood.tagwp.com and boards. However did you additionally discover the shiny new neighborhood badges? After all you probably did!
Redesigning badges for our inventive neighborhood happened for a few causes:
- The design group is actively making an attempt to enhance usability, look and consistency throughout all issues Tagwp;
- The previous badges not slot in visually with the place we wish to take Tagwp;
- The previous badges wanted to be optimised for smaller measurement.
With these issues in thoughts, we approached this problem by specializing in these key objectives:
- Tackle the issues of the design group and broader neighborhood regarding the basic type epitomising Tagwp;
- Guarantee that the badges are easy sufficient to be clear and efficient at small sizes;
- Align the type with our model and product.
The Design Course of
Initially of the undertaking, I labored carefully with Tagwp UI Designer Tom Bryan. The very first thing that we did was analysis. Numerous analysis!
We discovered many nice examples of different badges and many nice icon and illustration kinds. Right here’s a couple of:
We collated our findings and had some nice brainstorming periods with Scott Wills from the neighborhood group and our Head of Design and UX, Chris Thelwell. From these periods we got here away with a transparent path to information us by our preliminary concepts.
Tom and I began sketching concepts, both with a pencil and paper or Adobe Illustrator. We experimented with varied kinds and introduced them to the group till all of us agreed on a method that we felt would tackle our objectives.
This was undoubtedly probably the most difficult stage, but additionally probably the most rewarding. Creating a visible language that will work nicely alongside our branding and likewise turn into considerably repeatable as increasingly badges have been created was tough.
From there, I began refining our resolution and growing what I prefer to name the ‘Design System’. I knew from the very starting that I needed to method this undertaking in a approach that will permit any designer in our group to independently design a badge, and be assured its type would stay in keeping with the others. To do that, I wanted a few issues in place:
- Begin with a transparent, pixel excellent grid system
- Develop a rule based mostly styleguide
- Construct a boilerplate of re-useable components
As soon as I had the design system in place I rolled up my sleeves in Adobe Illustrator. I arrange two separate templates; one for the big badge, and one for the small. This compelled me to at all times work on the small model first, making certain that I might articulate the core message of every badge. One of many predominant points with the earlier badges was that they appeared nice at full measurement, however when scaled down within the browser they might turn into cluttered and laborious to decipher.
To get rid of this, I took a small model first method, much like how I might take a cellular first method to designing a web site.
As soon as I used to be pleased with the small model, I added a little bit extra element to the bigger model.
After going reside with the primary assortment of badges, I assembled the boilerplate file that features a vary of go-to spare components like shapes, objects, characters and strokes. I’ll hold including to this as extra badges and parts are created.
At this level, it turned vital to settle into an excellent rhythm of making the remaining badges in a single massive batch. We printed out every of the present badges and positioned them on the wall, permitting us to quickly sketch concepts on sticky notes and add them to the corresponding badge. This had a secondary profit, because it generated curiosity from passers-by, permitting them to supply concepts as nicely.
With a good suggestion sketched out and up on the wall, I might transfer again into Adobe Illustrator to refine it. My focus right here was all about attending to the core of the illustration and eradicating all superfluous element, whereas sustaining the readability of the that means. Simpler stated than carried out generally!
Throughout this course of I might endlessly zoom out and in and activate pixel mode to ensure that it will look proper within the browser. It’s pointless designing one thing that appears nice when you’re engaged on it however not so good within the ultimate context.
Round that point I additionally developed the ultimate coloration palette. I knew that it will be based mostly on our Tagwp company colours, nevertheless I wanted to tweak them barely to make the colours harmonise. I couldn’t simply slap the colours collectively, as that will create some fairly jarring combos, so I created a softer, extra muted model of the palette that allowed the badges to take a seat alongside each other.
Outcomes & Subsequent Steps
Now that we’ve had a while to see the badges in context and collect suggestions I believe we are able to say they’ve been a hit. We launched roughly 50 badges that embody our model, are clear and trendy, and have generated a lot curiosity from Tagwp employees and the neighborhood.
After all, we’re at all times bettering our design course of, and I’ll be revisiting a couple of of the badges that we have now recognized by overview and suggestions.
Our neighborhood of inventive authors make Tagwp what it's, so we would like these badges to be a becoming reward on your achievements!
This text was initially printed on Inside Tagwp.
