Case Studies

Case Study: Aaerios Twitch Branding

Aaerios Twitch branding

The Aaerios Twitch branding had one main aim and that was to be colorful and playful with a knight theme to it. This might not always be the two things that immediately associate with each other. Since those are the things there were a lot of things to take into consideration with the Aaerios Twitch branding.

Moodboard

Aaerios Twitch branding moodboard

Moodboard

In the Aaerios Twitch branding moodboard you have both the the more playfulness and the colors that match that. Of course that was never the problem it was more so finding the balance between that and the knight theme. What I did was to balance it with the more playful illustrations that could better bring that together.

Aaerios also wanted to keep it rather flat so again that posed another problem. In that flat is in most cases not seen as the most playful thing. However I did know that using that flat and modern aesthetic I could add in the colors.

What I started to look at was how to combine all of the different pieces into something that could flow in a more playful way. When working with a modern/flat style it’s not inherently strict or boring. What it comes down to is how you use those shapes and how they come together.

Avatar/Sketch

Aaerios Twitch branding sketch

Sketch

With the avatar I took steps to make sure that there was a solid understanding of the basic concept. That means understanding the shape of the face and proportions of the words in relation to that.

Another important aspect was of course having it look the part. That meant having it both have that structural aspect of something more modern yet having a playfulness to it.

Aaerios Twitch branding avatar

Avatar

Getting these two to combine correctly is what’s going to “sell” the overall look and feel of it. If any of the aspect in the entire Aaerios Twitch branding would end up being off balance it would make the entire project fall on that aspect.

What I ended up with, after confirming with Aaerios, was a knight with the visor down. Without the face this of course means that there’s a lot less expressions from the face. That meant that a lot more of that playfulness had to be put on the colors and the layout for the rest of the branding.

Preview

In these Aaerios Twitch branding previews you can see that I’ve picked out more than the standard/recommended 1-2 colors. Remember that when I say that it’s a good rule of thumb but also remember that I say that once you know the rules you can break them.

The reason why it works here is because they all play nicely with each other. While there might feel as if there’s a lot of colors I’ve done my best to balance them so that they never feel overpowering.

I did recently write about how to make colors pop when there’s single colors. However this time I had more than one that I needed to have pop out from the page. The best way, in my opinion, is to never overflow the page with one of those colors and then take one neutral color (in this case the dark grey) to offset the colors.

Final version

After the initial three pieces done I took those concepts to the next level. Anything that I learn in the first stage I take to this step. That’s the reason why I do the first couple of things for the first preview. It allows the project to flow better between the different stages. It also makes the second stage go a lot faster than the first stage (at times).

Another important thing is to understand what you’ve created in the avatar stage. Since it’s not one solid piece I can actually take it apart and use the difference pieces. As you can see I was able to take the sword and create a pattern out of it. In the actual version those backgrounds are actually animated and are constantly moving up and down.

While we’re on the topic of animations I also animated the colors on the side. Instead of being once solid color it actually goes between the three main branding colors in the Aaerios Twitch branding.

You also have the box art and game title right there in the overlay. You might think that it’s going to be pain to have to edit that image and change that text every stream. Don’t worry! They actually pull that information from the Twitch API and get it from your channel when you start up that overlay.

Animated Twitch Alerts

Aaerios Twitch branding animated twitch alert

Subscriber Alert

Finally I want to show the animated alerts that were created for the Aaerios Twitch branding.

I wanted the castle to be reminiscent of the Super Mario animation at the end of a stage. I have it all build up using CSS and then, again, using CSS to have the explosion happen. Finally I have it slide out in two stages. Why two stages? It looks a lot more fluid than have it all just slid out in one block.

I used the same principle for the follow and donation animations. Since I didn’t want to use another castle I instead used the sword (broken down into two pieces) to give it the effect that it’s coming out of it’s sheath and then back down again. I did use the same type of tiered animation to have it not side out as one big block.

aa-alert-tip


I hope you liked this Twitch branding article. If you did then you might want to check out my Twitch branding services. Click on that link, check it out and fill out the contact form and you’re one step closer to your own Twitch branding getting done.

About the author

Daniel

Daniel

Do you need Twitch branding done the right way? I've work with both partnered and non-partnered Twitch streamers and done so for over 4 years. For me this is full time and I'm dedicated to my clients and my craft. I do both branding, visual branding and brainstorming based on understanding you, your community and your channel. If that sounds interesting to you then you should check out my Twitch services/portfolio/client list and contact me right away. twitch.livespace.se

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close