Case Studies

Case Study: wtfMosesTwitch Branding

By 13 November, 2017 No Comments
wtfMoses Twitch branding

The wtfMoses Twitch branding is aimed to be a FPS type of brand. In this case study I’ll be going over what went into creating that. The problems that we ran into and how we solved those problems. Everything from style to function plays an important role in branding and for the wtfMoses Twitch branding nothing is more apparent.


wtfMoses Twitch branding moodboard


As you can see in the moodboard the aim is both strucutred yet having an organic feel to it. It’s all scaled back to keep a modern and minimal look. The focus here is on action, precision and FPS.

Another thing that stands out here are the dark color matched with the bright sky blue and white. The blue is something that wtfMoses already had in his branding. I knew that keeping that color would mean balancing it with either similar colors or black/white. As I moved forward with the project, and as you’ll see, this will become more and more clear.

This is the second moodboard that was created for the wtfMoses Twitch branding. It might not sound as an important note but without that more time would have to had been spent on the next step. Making sure that we are on the same page early on will make the project better and faster.


wtfMoses Twitch branding logo sketch

Logo Sketch

The first couple of sketch, much like the moodboard, allowed to fine tune the direction. The first sketches were more of a wordmark logo.

As it kept evolving we looked back to what he already had in his branding. The logo that he used to have had horns on it. I too that concept to create something that brought it back to more of a logo. Utilizing the shape of the O in Moses and the horns I crafted two version that later got mashed into one.

What I mean by mashing them into one is that when I brought it over into Illustrator things evolved forward. Simply put I noticed that I needed to make minor changes to make it work properly. The first thing was to close the gaps and make it a solid two color block.

Here you can see those changes in effect. For when one color is needed I did create a version that has some separation between the circle and horns. But in most cases this logo will be shown in two color for the wtfMoses Twitch branding.

Those two colors are is never set in stone. Blue is of course the preferred color but even in this brand you can see me using different setups or switching the white for black. A logo should always be flexible and that flexibility should always be shown to give an idea of the power that a logo can have for the client.


You can see how that wtfMoses Twitch branding mooboard took shape in these previews. I often get questions about how I’m able to translate something that could be busy down to the essentials. So let’s break that down.

What you see in these previews are not the first thing that comes to my mind. They tend to be forth or fifth iteration of the final wtfMoses Twitch branding. I went through using different type of shapes, placement and color combinations. The client never get any access to those since it’s never important for them to see those early building blocks. It’s important that you take control over the project and allow them to trust your design instincts.

In the wtfMoses Twitch branding you have minimal approach that allows for information. Later you’ll also see that it allows for transformation and putting that in a juxtaposition.

Preview 2

One the preview was approved I move over into a second pass and to translate everything over to the other pieces.

What you see here is the second version. It could be the final version of the wtfMoses Twitch branding but you can read about why it isn’t in the next section.

However it’s almost identical to the final version so it’s a good idea to go over the changes that was made from the first preview.

The main changes from the first preview is the addition of animations. For instance on all of the cards that has the weird cut up circle. That circle, or rather each of those three parts, rotate around the text at different speeds. This creates an interesting look and effect. On some of these you can also see some sort of gauge. The little arrow actually climbs up and down that.

The final larger implementation is the added “menu”. It shows the viewer exactly what screen wtfMoses is currently on. Since we have such an organic background it gave it an interesting look. A look that ended up looking even better once we got the the final version for the wtfMoses Twitch branding.

Final version

wtfMoses Twitch branding Starting


One thing that didn’t click was the background. It worked great on the panels but it lacked just that little extra in the cards. Another thing that I really wanted to add was some sort of animation. So changing out the background gave me that opportunity for the wtfMoses Twitch branding.

wtfMoses at first wanted to have something similar to what PlayerUknown’s Battlegrounds has on the houses with the graffiti. What I opted for was to use a CC0 (that means free for personal and commercial use and no attribution required) photo as the base instead of an in game screenshot.

Luckily I spent a lot of time as a kid working with exactly that type of design work. So I was able to quickly create something that gave a lot of depth and a dynamic feel. This was then applied to every other place where the old background existed (with execption for the panels).

Finally I did ad some slight animation with flashing lights (using CSS) to the background—trust me that the animation is more random and not as erratic in the real version. There was no need to add in something complicated like a video background. This way wtfMoses were able to make changes himself. Something he actually did and I guided him through it. It almost took no time at all for him and all the animations translated over.


Animated Twitch Alerts

wtf-alert-host wtf-alert-resubscriber

Here you have the animated Twitch alerts for the wtfMoses Twitch branding. The larger one did go through some changes due to how Streamlabs handles alerts. However at the end of the day it looked good and both of the alerts only uses 1 image each. That always allows for the best possible setup for animations.

I hope you liked this article on the wtfMoses Twitch branding. That you learned something and hopefully found something that you could use for your own Twitch branding.

If you’re looking for your own Twitch branding don’t forget to check out my Twitch branding services—and then get in touch as soon as possible.



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.