Case Studies

Nathanias Twitch Branding

featured-nathanias-twitch-branding

Nathanias is a partnered streamer and a StarCraft II caster. I actually started watching Nathanias way back when he started out doing StarCraft II commentary and smaller tournaments. The Nathanias Twitch branding is however not a StarCrat II influenced but rather his own personal brand. It was also an updated to his current brand and logo/avatar.

Moodboard

Nathanias Twitch Branding Moodboard

Moodboard

The one things we both knew from the start where that Nathanias liked light blue and card design. Of course we also talked a bunch before getting started on the project. As always it’s important to get going with an open conversation to really get to the root of the project.

This will be a bit weird since what you can see here is actually the second moodboard. The first one had a few good items and the logo/avatar style was something that Nathanias also really liked. So instead of going in and doing a second moodboard right way I actually started to sketch the avatar and then went back and put together the second moodboard.

You might notice that there’s not that much light blue. However we both already knew that light blue was going to be the color to go with. I’ll explain how I approached the color scheme without overpower with light blue.

Avatar/Sketch

Nathanias already had an avatar/logo that he liked. At first we talked about if or if not we should change it. After a few messages back and forth he sent over the avatar file he had so I could inspect it further.

Nathanias Twitch Branding Sketch

Sketch

What I can say is that it wasn’t a bad concept but it was a bit sloppily made. The paths felt a bit unsure about themselves and vectorized with a lot of lost information. That might lends itself to look good at a distance and at smaller sizes. However once you start to scale it up even the slightest all of those minor things will start to get more noticeable.

Here you can see how I approched it from a sketch perspective. Adding in some color since I already knew the colors that I wanted so I incorporated them into the sketch. You can also see that I opted to not include the eye. It was important to me that the outline was recognizable and I noticed that the eye threw that off.

Nathanias Twitch Branding Avatar

Avatar

Another thing that isn’t often talked about is how recognizable something is at a 30×30 pixel size. Why is that important? That’s the size of the avatars in the left side menu on Twitch. You want your audience/followers to quickly see that you’re online among 5-10 other streamer? Then you need to have your avatar pop out from the rest. You do that with clarity and color communication.

The final version of the logo/avatar for the Nathanias Twitch branding has that clarity and color communication. We did however change the thing at the neck to be a straight line.

You will later also see that we went for the non-beard version. This is since Nathanias opted to shave his beard and keep it shaved. That dosen’t mean that the beard version is scrapped and gone forever. It’s there as a “what if” or for any other usage.

Preview

Here’s a quick overview over what I put together for the Nathanias Twitch branding. As you can see I’ve kept it pretty simple and clear. With that pretty much extending what was used in the avatar itself.

So why aren’t there light blue everywhere? The thing about color is that you want it to stand out. So if I were to put light blue everywhere to really hammer in that light blue is the THE COLOR it would only work in the opposite direction. It would only make it feel busy and unclear.

When you want a color to stand out you aim for it to be used sparsely. That way it will come of the page louder and that will allow it to stand out more. That’s why most of the colors are more less saturated and balanced between white, grays and dark blue. Letting the light blue of the hair stand out even more.

Final Version

Here you have the entire setup. There’s not too much to add to how things were put together. Kept using contrast to make things standout where it was needed and the opposite where it wasn’t needed. Getting a good balance of readability, clarity and communication in the Nathanias Twitch branding.

One additional thing that I can talk about for the Nathanias Twitch branding is that I added an animation to the background. It’s of course a HTML/CSSĀ animation. Since the cards are all made with HTML/CSS it was simply to create a gradient background with CSS. Then stretch that and loop it so that it seems as if the gradient is slowly moving in the background.

Animated Alert

Nathanias Twitch Branding Twitch alert

Twitch alert

Here you have the animated alert. Once it was approved I pushed it into Streamlabs. They’ve since my article improved a few things. For instance you can now share alert setup between users and you can add HTML/CSS to alert variations. The alerts for theĀ Nathanias Twitch branding did use some JavaScript as well to get some of the classes to be replaced at certain times.

While it’s still a bit behind on documentation and features that should be there it is a great start and good to see that they’re still investing time into improving the alert feature.


If you liked this Twitch branding you should check out my Twitch branding services right away and get in touch.

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