Case StudiesTwitch

Case Study: GunninGamerz Twitch Branding

By 17 April, 2017 No Comments

GunningGamerz is a simulator gamer and Twitch partnered streamer. What was created a was something that could represent his previous brand assets but bring it into a more modern feel and look. At the same time it was important not to go too deep into the minimalistic so it was all about finding a good balance in the GunninGamerz Twitch branding.


From the start of the project it was necessary to anchor the brand in the type of stream that GunninGamerz run. At the same time it should reflect GunningGamerz as people as well. It’s at that moment that you get the most future proof and stable Twitch branding.

Another thing that we agreed on was to keep their current logo and instead use illustrations to get certain thing tied together. It might sound like a minor thing but as you’ll be able to see it really did tie the GunninGamerz Twitch branding together.


GunninGamerz Twitch branding Moodboard


As you can see there’s a lot of earth tones involved in the GunninGamerz Twitch branding moodboard. This as of course to represent a more down to earth and reflect the type of games that GunningGamerz play. To give that more context GunningGamerz plays games like Farming Simulator, Hunting simulators, airplane simulators and so on.

At the same time I wanted to introduce some color that could mesh well with the earth tones. Creating focal point to not get lost in the overall style. Exactly what style I wasn’t sure about until after I got feedback from GunningGamerz to create the GunninGamerz Twitch branding.

The moodboard you can see here is actually the second version that I sent. The first version had a few other things that didn’t mesh too well with what GunningGamerz liked. Going through the things that don’t resonate is equally as important as going over the things that do resonate.


GunninGamerz Twitch branding Illustrations

Illustrations paths

We did talk about an avatar but landed on using illustrations instead. Instead as time moves forward a better way would be to introduce photography into the brand. This is to give an even more down to earth and personal experience for their community. After all they spend a lot of time watching GunningGamerz face already (and the same goes for any streamer).

The illustrations needed to have impact and even be able to stand on their own. At first they were supposed to represent the games that GunninGamerz plays but as you can see further down they came to illustrate something different. All to highlight the GunninGamerz Twitch branding.

Here you can see the outline version to give you an idea over how they were created. These images are taken directly from Adobe Illustrator. The reason I created them in Illustrator is so that these can be vector art and therefore be any size that’s needed, from stamp size to billboard.

To see them in their final from look below in the Preview 1 section.

Preview 1

Here you can see the first preview for the GunningGamerz Twitch branding. As you can see there’s still a lot of earthiness to it. While there might not be any of the earth tones there’s the background image and the highlight color that I was talking about.

This is also knowns as a first pass where it’s suppose to give an idea over the direction that I’ve decided to take the project. In this case it was approved right away and the next phase started right away.

Preview 2


With Preview 2 I actually did create all of the changes. However we did some additional changes after that for the final version. That’s why I’m only showing a few from that since I rather focus on the final version.

As you can see in Preview 2 it still follows that same design language as Preview 1. Now it stretches across all of the pieces to create a cohesive GunningGamerz Twitch branding.

You can also see that the tagline have been adjusted to better go with the true direction of GunninGamerz brand. I also decided to to not go with the odd shaped panels. Even if they had a unique look that dosen’t mean that they’re going to be functional at the end of the day. It’s more important to actually fill a function than it is to look “cool”, so why not both fill a function and look cool as well.

Final version

As you can see there’s been some updates to the illustrations. I chose not to give you everything once more since it’s pretty much the same across the board from Preview 2. The main change here of course is the illustrations at the top to reflect GunningGamerz more.

The small plane since he tends to fly smaller planes instead of jets when he does flight simulations. The large dirt tire track since that covers everything from hunting to farming.

Keep reading below to find out more about the final project since it is more than these cards. There’s also the dynamic overlay aspects and the animated Twitch alerts.

Dynamic overlay

There’s the, now classic, way to show both box art and the game title. There’s a also a countdown and a loading bar that both signal that the stream is starting soon.

The loading bar really fitted the brand as it’s all about loading into a simulation. I’m a firm believer in that when you add something into your overlays that’s dynamic. It better fit in with your brand as well.

All of these dynamic things are using different CSS, HTML and JavaScript coding to get it working properly. This is important since you don’t want the streamer to constantly have to spend time to change box art of change what gamer they’re playing. I want to make it as simple as possible and allow the streamer to focus on streaming.

That’s why I’m part of team that’s developing a streaming and layout CMS.

Animated Twitch Alerts

Here you can see the custom animated Twitch alerts that I created for the GunninGamerz Twitch branding. These are not video or gifs. These Animated Twitch alerts are all CSS and HTML using Muxy as the backend to put them together.

Using something like video or gifs aren’t really that flexible and won’t look as good as a CSS animation. The reason is because these CSS animations are different PNG images that are full resolution with transparency in them so there’s no need to get jagged edges or have to greenscreen anything out.

These animated Twitch alerts are also easy to change. Both the animation, the text or even the background that’s used.

I hope you liked this article. Tomorrow I’m meeting up with the number one person in my life. Going to be pretty awesome as I’ve not seen this person for 25 days now. A lot hearts have been sent back and forth. And I gotta get some flowers before I get to the airport. I hope you’re having an equally, if not more, awesome start to your week as well!

If you’re looking for your own Twitch branding then you need to check out my Twitch branding services. As always it includes the dynamic aspects above and the custom animated alerts.



Do you need a Twitch website done the right way? Or do you need a Twitch branding strategy? If you're ready then take a look at the Twitch services and see if they fit into your future.