Case Studies

Case Study: CinnamonToastKen Twitch Branding 2

By 22 May, 2017 No Comments

We’re back here again with CinnamonToastKen and it’s for a good reason. It was time. There was a need for an adjustment of this Twitch branding as it no longer aligned with what he initially thought it would be. Instead it was needed to steer it towards an older audience. Read all about the CinnamonToastKen Twitch branding here.


Sometimes streamers think they have a specific target audience. As they move to a new platform they might discover that their core and their new target audience might differ. Or they might simply realize that their target audience turned out to be different from what they thought. The first is what happened with CinnamonToastKen. He discovered that his younger audience didn’t follow him to Twitch and therefore needed new Twitch branding that would better reflect his new audience.

Logo System Moodboard

CinnamonToastKen Twitch branding Moodboard

Limited moodboard

The main focus here was the logo and creating something beyond just a logo. Does that sound a bit strange? I’ve written a little bit about the logo system in the past and I’ll explain a bit more in the next section.

What you can see here is a limited moodboard. What does that mean? That means that it’s highly focused on one thing. In this case it’s focused on the logo and the text that would go with the logo.

When it comes to the CinnamonToastKen Twitch branding we had talked about getting everything to  have a more of a direct look and not as “cartoony”. For Ken this was the most important thing to hit.

In the moodboard you can see some very clear line art that could create that feel yet maintain a playfulness. Having these two things at once can be a challenge for a lot of designers since it does mix two different styles into one. For the CinnamonToastKen Twitch branding it demanded to walk that line without over stepping to either side.


CinnamonToastKen Logo Creation

CinnamonToastKen Twitch branding logo sketch


What it comes down to is the flexibility of a system logo compared to a regular logo. A logo in itself is probably one of the most boring things you’re going run into. Instead take something like the MTV logo and you have something that is on brand yet has the ability to change depending on context, show and audience. In a digital age this is something that we can use to your advantage.

In the case of the CinnamonToastKen logo system, as mentioned, it was needed to walk the fine line between serious and playful. At the same time it was also needed take the logo system into account.

CinnamonToastKen Twitch branding logo

Final logo

As you can see in the sketch I used the blank space of the toast to convey more than just one expression. This is an important aspect as you can see depending on situation and context this change change.

This type of logo no longer has to be static in the same sense that most logos are. Instead it actually has a life. That in turn can play into CinnamonToastKen Twitch branding and let it be as free and playful as needed. At the same time it can maintain the more modern and professional angle.


Here you can see the first mockups that I sent over the Ken for approval. As you can see they demand attention right away. When you create these sort of things one of the things you do want to take into account are what type of attention you want to bring to it. Using a combination of clear colors can really guide the eyes to the spot where you want the viewer to pay attention.

You can also see that I’ve used the different logos to the context of the cards. This is the proper way to use a logo system and to let it have it’s own life.

Dynamic Overlays and CSS Animations

Besides the logo system for the CinnamonToastKen Twitch branding I also creatd some dynamic overlays that also included some CSS animations.

The dynamic aspects are the box art and the game title that’s being pulled in from the Twitch API. This is something that CinnamonToastKen had on what I previously had made for him as well. He really enjoyed that so he wanted it on this one as well.

One thing that’s sort of new on this one is the CSS animations that are both on entrance (when you start the scene) and on a loop. I’m going to attach a few gifs so you can see what it looks like in action. As you can see you have some animations that are constant and some that are only at the start. These animations have different animation speeds and delays to make them act independently of each other.

These animations will always trigger when you go to each scene. This will give it a wow-effect, that also will give your viewer an idea that something is happening. One of the best part to this is that it’s easy to update everything on it and that lets you create things faster. For instance while I was putting together the final delivery files Ken wanted to change one small thing. If this was a video animation I would have to render out a new video and upload that video. In this case all I needed to do was to update a few lines of code and send a 3kb file.

I hope you enjoyed this case study of the CinnamonToastKen Twitch branding. I also hope that you got something out of it that you may be able to pull into your stream as well.

Are you looking to get your own professional Twitch branding? Are you looking to get animated and dynamic aspects to your Twitch channel? Then you need to check out my professional Twitch branding services.



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.