Working with the alleged cephalopod from Transylvania, dabbling with shades of blue and gray, has meant that I have not contemplated what must be done with things that are an incredible shade of yellow in a while.

This place, despite how much you humans seem to like it, is starting to show its age, and is bordering on being unworthy of what someone with my skills should be associated with.

The Roach is not known to procrastinate, clearly, so let's get on with overhauling the aesthetic of this site. Systematically. By defining a design language.

"How?", you ask? It takes 7 steps - a cakewalk for me and my 6-legged brethren, but even you will eventually get there with that strange two-legged setup you've got going…

Step 1: Know Yourself

What makes you unique, or different, or you, really? What drives you? And what are the principles you live by? Before you get into which shade of blue your logo should be, and then give up and just call yourself Alphabet, you need to be able to answer this.

Most businesses spend time and money to write down business principles that they always follow. Fact. These can usually be re-framed as human qualities, like honesty… that can make them seem less fluffy, more relatable, and help guide the decision making in subsequent steps.

Example: The Roach is a fun character, despite his lack of faith in the universe, sort of like the insect world's answer to Jeremy Clarkson. He believes humans are supremely intelligent, and in the power of sarcasm. He's playful, but always practical at the end of the day, believing in simplicity and humility, despite what may sometimes come off as an air of superiority. He is also incredible.

Step 2: Define Your Brand

Now that you know what kind of creature you are, you can define how you want to be perceived by others. Ideally, you want to stay true to yourself, rather than pretend to be a fictional character… ahem, so that your true qualities manifest themselves in your brand. But sometimes you want to change how people view you (because you aren't incredible enough in reality), and brand can help you do that.

Example: The Roach wants to be liked by humans, despite his disdain for them in large groups. So he wants to appear to be simple, friendly, approachable, even cuddly ^{(conditions apply)}. But he doesn't want to appear as this unidimensional happy fellow to the world - his fans need to be subtly reminded of the dark and mysterious depths of his mind behind that pretty smiling face. He's quite honest about who he really is, in that sense.

The cuddle filter.

Step 3: Give Your Brand Form

Congratulations! You now know who you are and what you want the world to think you are. But if they had to draw a picture of you, what's that going to look like? What associations would they make based on what they've heard about you? You can help them out here by crystallizing those vague qualities that make a brand into something that's recognizable as a visual identity.

Example: The signature color for the Roach is a golden yellow - a happy color, associated with sunny days and fresh flowers. This is overlaid on a dark gray background to communicate the brooding and mysterious depth that is behind the facade. The message being conveyed is framed in a humorous way, but is intended to be impactful, hence the emotion, bold strokes and stark contrast in the language, type, and colors used. The thick, smooth strokes also find their way into the illustrations, where they lend a more natural, soft appearance, to make something as universally despised as a roach seem like someone you could hang out with.

Step 4: Spec Everything Out

So now that you have a vague idea of the look you are going for, it's time to make it a little less vague, so people that exist outside of your head can also use the same system you've been dreaming up while closeted away in your "mood room"; but mainly to prove to others you actually were working, as opposed to what they think designers do.

This entails defining everything, along with your reasoning for it.

What font faces do you want to use? What sizes, weights and colors should they be in for different elements and purposes? What colors are kosher and what will they be used to signify? What are recommended page layout and navigation options? How far apart or densely packed should things be? What should a bunch of common controls like buttons and form fields and dialog boxes look like? How will you communicate interactivity and errors to your users?

Even…

…and I ain't joking.

The better specced out a language gets, the easier it is to spot inconsistencies and make corrections, and the easier it will be to follow for others. This is also the right stage to be looking at the shortcomings of your current design system and making corrections.

Example: Don't worry, I am going to spare you the details of the design language for The Incredible Roach here (since I need to actually spec it out), but hopefully you will see it in all its glory in the coming months, applied to your favorite website. But just thinking things through till here has made me realize how I don't seem to have a very well thought out system of typographic scale and spacing that ends up makes my ramblings a little hard to scan through or read.

Step 5: Define Acceptable Variations

So you've declared what's in and what's out of your new book. But if you are super rigid about it, people will tend to just ignore you and set up their own rules for their own little island (of applications).

*Cough*

You've got to allow for, and document, some leeway in your language - for special cases where you may need different spacing, fonts, colors, language, or imagery. Like, maybe there's some legalese fine print about donating your organs your app needs to carry where you can't be your usual jolly self… or maybe a visualization that your app needs to show where your favorite shade of yellow isn't going to communicate the right thing…

In the immortal words of Jeremy Clarkson, "Could be worse…"

Step 6: Test the Language

There's little point inventing a language you never communicate in. Even a design language. You don't want to save your new gurgling sounds for when you'll be asking someone out for that crucial first date… you want to practice them in front of the mirror first - to see if they're working… This is apparently a thing humans do.

Similarly, it would be wise to try out your new design language on a few bits of content you produce (or existing applications if you are doing this at work) and see if it caters to different cases and still looks like something that belongs to your brand.

Step 7: Live by the Language

Once you are happy with your new language, try to stay true to it. It should guide you in everything you design and will make everything seem part of a well thought out and cohesive system.

There will be times when you will be tempted to bend the rules, to be different, but it's best to understand why you need to say "dat" instead of "that" before you indulge in such heresy. There's no point me banning all contact with you for the next seven generations - although I would be tempted to - if your brain can't handle more than 140 characters anymore. I need to modify the language to adapt to our dark times instead.

The same should be true for your design language - it's your guiding light, but can't be set in stone, and must continuously evolve to accommodate for new uses and contexts as they appear, backed by sufficient reason so as to stay relevant to you, your brand, and the environment.

Remember, it's a language, not a religion, and will help you bring some method to the madness when (re)designing your world. Now if you will excuse me, I have a website to overhaul.