Case Studies

Case Study: MajorPIYA Twitch Branding

By 10 August, 2017 No Comments

The MajorPIYA Twitch branding was all planned around roman aesthetics. It actually went through a lot of changes before we arrived at this stage. However that was good thing and instead of rushing into the first thing that sounds cool or dope. Instead we worked through it until we arrived at the right stage for the MajorPIYA Twitch branding.

Moodboard for MajorPIYA Twitch Branding

MajorPIYA Twitch branding moodboard


It’s not the most crazy moodboard that I’ve created, but it’s not about getting as much as possible but the right things for the Twitch brand. As you can see it has a lot of bold colors and expressive design. All of these are things that I knew that I wanted to incorporate into the MajorPIYA Twitch branding. One thing that you can see here, since I didn’t include it, is that I wanted to build up a scene with animations and together tell a story.

Logo & Sketch

MajorPIYA Twitch branding sketch


After me and MajorPIYA had talked about the moodboard and agreed on the direction for the MajorPIYA Twitch branding I moved onto the logo.

This logo would function both as an avatar, a logo and also as assets in the branding itself. While this isn’t always the case it’s for sure something that is possible to do depending on the project.

As you can see with the sketch it’s a very rough version where I wanted to display both what it might look with an eye and nose or without them. I really only do one version for clients but that dosen’t mean that if during the process I end up with to possible directions.

MajorPIYA Twitch branding logo


When we look at the finished version you can see that a few things have changed. So while the sketch is an important stage to show a direction it’s far from the final version.

Even the final version went through a few changes. As you can see in the sketch it had a laurel wreath. When I showed the sketch to MajorPIYA he felt that it was a bit too much to have it there. However during the creation I quickly noticed that when you had nothing there it looked empty and less expressive.

I showed MajorPIYA a version with and another without the laurel wreath and he agreed that it felt as if something was missing without it. So we started to discuss what we could fill the space with. I said that something gaming related would pull it together and put it in context and then suggested that it could be headphones.

That’s how you end up with the final version that you can see here. With both the more modern iconic approach and the gaming aspect combined with the shield that also was an important thing for the MajorPIYA Twitch branding story and message.


When the logo was approved by MajorPIYA I moved onto creating a few things that could represent the entire MajorPIYA Twitch branding moving forward.

I created a preview for the alerts, starting screen and the panels. That gives a good spread over all the different assets that can exist and how they can be used in different ways.


As you can see I created a few additional assets with the pillars and you’re going to see more of those moving forward. You an also see that I not only show an image of the alerts but also have a description over the animations that I have in mind. While all of this can change I do think it’s important to at least give more than just a static image.

Final Version of MajorPIYA Twitch Branding

Here you can see the final version of everything. As you can see there were a few changes even to the initial starting screen. I felt that there was something missing that could be a bit more flexible so I introduced a more text based addition asset that I could create with HTML/CSS.

The reason why I create most of these in HTML/CSS and not just plain images or videos is because there’s no flexibility in it. So for instance here you can see the box art both clearly and blurred in the background. That’s not something that MajorPIYA has to update since it pulls it from the Twitch API. He can also change any of the text that I added there since it’s text based and not image based. Oh and the blur and gray scale on the box art in the background? All done with CSS filters. On top of that I was also able to add animations to it and to have animations without clunky video files is something that will always be a benefit.

Animated Twitch Alerts

The same way that I used HTML/CSS for some of the dynamic overlay cards and animation I did the same for the alerts. I used different looks and even different animations for each of the animated Twitch alerts. There’s not too much to say and I could really just echo the same as for the overlays. HTML/CSS will always be a better option than videos or images when you want to bring something exciting to the stream.

Animated Overlays

major-movementFinally I wanted to show what the animations on the cards looks like. Again I really want to stretch that using the CSS animations really does allow for some really amazing things.

If you’re looking for your own Twitch branding you should check out my Twitch branding services right away. I hope you get in touch!



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.