Case Studies

Case Study: kpampz Twitch Branding

By 16 January, 2017 No Comments

kpampz is a Twitch staff streamer that works as one of the engineers. Working with Twitch streamers is always an interesting thing. kpampz streamers for the reason that he wants to experience what streamers feel. Since after all streamers are the ones that are using what kpampz creates. That’s the start to the kpampz Twitch branding.

Brief for kpampz Twitch branding

What was asked for was a something that was rather minimal in appearance and clean in execution. kpampz wanted a Twitch brand that had a lot of contrast and utilizing the color purple. These are things that we would later go over and slightly change.

We quickly landed on the same page about a lot of things. And since there wasn’t that much more to talk about we decided to move onto the moodboard. That way we could have another talk after that. It’s always a lot easier to talk about something visual to actually have something visual in front of you.


kpampz Twitch branding moodboard


With the moodboard I went out and started to find inspiration that I felt could represent what we had talked about. I decided to go with a rather bright and color full approach. Yet at the same time showcase what dark colors can do as well.

There will always be time when you know your client better than themselves. That is of course only if you’ve done the interview correctly. It’s a combination of knowledge and experience that allows me to gather information and see what the streamer might not.

You can also see that I present a few different colors rather than only the purple color. This is also a conscious decision. To give the client a bit more knowledge and information as well.

We decided not to use the line illustrations in the upper right and the same with the lower left. To give you an idea of why it’s important to show different things. The reason is that it allows you to exclude certain things as well. At times I add things that I think the client might not like. Most of the time that’s true and it validates that I was on the right track. However if they actually like the addition I know that I was slightly off and need, for instance, adjust the kpampz Twitch branding.

Sketch and avatar

Always start my design process with the avatar or logo. The reason behind this are twofold. On one side it really does set the idea for the entire brand. It also does give your brain time to think about something else rather than the brand. And that way letting the ideas sit and marinate for a bit until they’re ready to come out.

kpampz Twitch branding sketch


I do all my sketching with a drawing tablet in photoshop using a 2B pencil preset brush. I love how it becomes dull over time and feels more like as if I’m actually using a pencil rather than something digital. This works great for the kpampz Twitch branding.

This is actually what I send to the client to get approval to proceed. It’s always easier to make adjustments here. Even if a sketch don’t represent the final style it’s still a good point to show the client. There’s certain key points where I do involve the client but it’s not a constant nor do I provide several different suggestions. It’s a matter of knowing from the moodboard and from the interview.

When the sketch have been approved I move onto Illustrator. That way I can use vectors shapes more freely instead of using a raster program like Photoshop. Vector shapes allows for endless resizing and it’s a lot easier to do modifications and it allows for cleaner look (in my opinion).



Most of the details and shadows are reflected from one side of the face to the other. There’s of course smaller things that are different. These are the things that really allows the illustration to come alive in the kpampz Twitch branding. There’s always certain things and expressions that stands out in someone’s face. These are the things that I focus a little bit extra on to bring forward.

Do that by asking for several different reference images. While most (if not all) avatar I make are from the front. It helps a lot of have the full scope of the face. This once again allows there to be a certain depth that wouldn’t be possible to see if all I knew was the front.

Preview 1

The preview part is probably the clients favorite stage. While the avatar tends to serve as a hype thing the first preview is really where it all comes into place.

I present my previews exactly the way that I do here with no watermarks. In my opinion adding watermarks all of your design takes away from showing what they look like AND it also shows that you don’t trust your clients. If you feel that you have to add watermarks you’re dealing with the wrong type of clients.

The previews that I present are panels, in-game and starting card. This way I can show the entire range of style and functions. It does give the client a bunch better representation of the final product and what they can expect in the next preview.

kpampz Twitch branding starting

Starting card second color theme

As you can see I’m using a bright style with some coloration to the background for the kpampz Twitch branding. kpampz did like the style and direction but felt that we should try a few more color variations. For me this is no problem at all. I work in color blocks so changing the color is a pretty quick change. The benefit is of course that you quickly can send an alternative color scheme within a minute.

Here you can see what we decided to start using until the next preview.

Preview 2

Here’s the second preview that I sent over to show the kpampz Twitch branding. As you can see the new color scheme  have been applied to everything.

I do want to talk about a few things here. First as you can see what used to be called something like big card or similar in the past now have the name of IRL card. This is a shift that happened recently. It’s of course a way for streamers to use a bigger camera for when they use Twitch IRL. It’s a pretty smart move since you can have your branding, show follower (etc.) and social media a lot easier.

The going offline card is nothing new but I did connect it to another service that allows you to showcase your Twitter and Instagram feed. Something that’s not really possible anymore without going through a long request thing. It’s also mostly used for larger apps and not for individual usage. Using this we can circumvent it and use a web app that can showcase it for us. I’ll talk a bit more about it in the dynamic aspects section for kpampz twitch branding.

Speaking about dynamic things. You can see that I have box art and game title in two overlays. I also have a countdown and a circular loading/countdown thing. These would of course be synced together to give both a direct and a visual representation of when the stream starts.

Final version

Now of course there’s a few one that I didn’t include here from preview 2. I wanted to focus on the main new things that got updated. The biggest one of course being the color scheme. Going from the brighter look to a more darker contrasted with the bright neon blue/green. Another big change is that the circular shape got an update across all of the overlays that had it.

kpampz twitch branding effect 2

Effect 2

kpampz wanted something that had geometric shapes and the reason for that was that he wanted it to stand out more. I explained that geoshapes wouldn’t really make it sound out. Since there’s already a lot of hard shapes it would pretty much end up melting in with those. The reason why the circular shape works so well is because it does stand out. Now I did agree that it can stand out more but that using organic shapes and textures would make it stand out properly.

I created it by adding layer masks, textures, a 3D mesh (created in Illustrator) and different brushes. I used to work a lot with photomanipulation and art before I started with Twitch branding so it all came pretty easy. It’s mostly knowing your tools and having a goal in mind. But at the same time not be afraid of things going in a different ways and that’s the beauty of something organic.

Dynamic aspects

There’s a few dynamic things that are coded as CSS/HTML/JavaScript. For instance the two countdowns are all JavaScript that are synced to give you some visualization. These are rather simply put together by using free to use JavaScripts that you can find by using Google.

You also have the box art and title from the Twitch API. These of course update depending on what’s in your Twitch dashboard. While you don’t need to connect it to the Twitch API and do it manually instead. It’s a lot easier to start OBS and it auto updates as soon as you confirm it in the Twitch dashboard. It makes things a lot easier and faster.

Finally you  have It’s a web app where you can embed your social feed (they have a lot) on your website. A dynamic overlay is pretty much a website that runs locally on your computer so taking that and modifying it works great.

You can sign up for free and do certain modifications through their dashboard. It does work perfectly fine on it’s own. But if you want to actually modify the look and feel of it you’re going to need sharpen your CSS skills and get to coding it a little. It didn’t take me too long to figure out how to make it all work together and having two different feeds on one page.

I hope you liked this and that you’re having a great start to your week. I’ve been doing some interior decorating in my office space. Adding some painting that I’ve done, some pants and restoring a old lantern to a ceiling lamp. Looks really cool right now and I feel a lot  more at home here right now.

Did you like the kpampz Twitch branding in this article? It was all created by me and you can find out more about how you can get it for your Twitch channel right here.



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.