Case Studies

Case Study: Techniq Twitch Branding

By 31 July, 2017 No Comments

Techniq is a Twitch streamer that wanted something that was sharp and precise.  All of those were all aspects that I wanted to push into his branding. There were a lot of important aspects that we needed to go over but one of them was the importance of relating it all back to his personality. A lot of it came down to asking the right questions about him and the name he had chosen for his channel.


Techniq Twitch branding moodboard


In the moodboard you and see two very specific things. First you have the sharp angles and precise, and then you have the blue color tone. The color was discussed with Techniq beforehand in our initial “interview” stage for the Techniq Twitch branding. He wanted something that went in the direction of blue and grey.

Now those colors have tendency to end up looking a bit plain and boring when done in certain shades. Those are the shades that I wanted to avoid to emphasis the entertainment aspects of things. You would be surprised how tones of blue or tones of grey and change the entire feel and impression. Not only that but then you also have how those specific colors play with each other.

These moodboards are all about conveying a feel and getting started on a conversation about the visuals. It’s also a much easier way to talk about the visuals when you actually have something to look at.

Logo and sketch

Techniq Twitch branding logo


The next step was to create the logo. But first of course we need to sketch it out. Again we’re taking the abstract approach to the logo and making it something that can standout. An abstract logo really means nothing and is only as strong as the meaning you fill it with. That’s at least the fundamental principle behind it.

However that dosen’t mean it has to mean nothing. Remember that I mentioned something precise and sharp? That’s actually what Techniq explained the meaning behind the name that he had picked. He also mentioned drag racing cars and speed. When you look at the sketches hopefully you’ll be able to see that it all was taken in that direction. That’s after all the point

Techniq Twitch branding logo


In the final version you can see how the sketch is all about fine-tuning it in Adobe Illustrator. You can see that there’s even a few differences between the sketch and the final version. These changes are normal and can vary from big changes to small changes. I give it that space since it allows me to be more free with the workflow in Adobe Illustrator.


As you might already know the first step after the logo gets approved is to make a few things that can represent the direction of the Techniq Twitch branding.

Since animated Twitch alerts have become such a large part of the projects that I make so they end up in the first preview. Along side those you also have the panels and a starting screen. Together these make up a wider selection of things that I want to put into the rest of the Techniq Twitch branding.

This holds the same importance (but on a different level) as the moodboard does. Since it allows Techniq to see where it’s headed and what the final product might even look like. I’ll explain a lot of the choices further down but I want to highlight that I introduced some additional, subtle, animations in the Techniq Twitch branding to make it stand out even more.

Animated Twitch Alerts

I do want to highlight the animated Twitch alerts that were made for the Techniq Twitch branding. As you can see I’m still following the same colors and the same principle behind the sharpness and preciseness of it.

Even if it had the Techniq Twitch branding aspects to it I still wanted to lift it out from the screen. I did this by adding CSS animations that pushed the text forward in 3D space. While it’s not real 3D it was still possible to simulate it using CSS animation.


Final version

From time to time I do second, and sometimes even a third pass of the previews, however in this case Techniq liked what he saw in preview 2. That simply means that preview 2 now becomes the final version instead.

As you can see aspects from preview 1 appears all over the final version. That’s why the preview stages are of such importance when it come to creating Twitch branding that can last.

In some places you can see that there’s both game name and box art. All of that is pulled in through the Twitch API and is connected to the streamer. That way there’s never a need for the streamer to manually update the images since they will auto-update.

You can also see that there’s some of them that has a larger box art that’s black and white with a bit of blur to it. Read on to find out how that was made and how it was animated.

Additional animations

The easiest thing when you think box art is to… well… just display it. In this case I wanted to take it beyond that and use both CSS filters and animations to get some unique for the Techniq Twitch branding.

I used the same way of pulling in the box art as I used for it regularly. Since these screens are already made with HTML/CSS instead of plain image files. It was simple to resize it and position it correctly with CSS. I then used something called CSS filters to change the appearance of the image. For this particular one I used grey scale and, blur. To get it sort of faded with the background I simply added a opacity statement.

For the animation I wanted something subtle that didn’t distract. I used a CSS animation that I looped to have it back and forth in a smooth curve. Check out the animation below.

Techniq Twitch Branding

Animated Twitch Break Screen

I hope you liked this article and that you liked the Techniq Twitch branding. I’ve been pretty busy lately with a lot of Twitch related work but things are finally clearing up this month to stream.

Are you interested in your own Twitch branding? 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.