CaptainRoBear is a beer enthusiast, and if I recall correctly even a bar/brewery owner. He’s also someone that is gearing up to take his content to Twitch. Therefore he needed some CaptainRoBear Twitch branding to with his new venture.
Brief for CaptainRoBear Twitch branding
There were a few things that was needed to get the CaptainRoBear Twitch branding rolling. First of all it was important to pull in the aspects of beer and the captain aspect. These are already two established things that he has in is personal brand outside of Twitch. Of course that still needed a few tweaks to get it all in order for a Twitch brand.
CaptainRoBear also wanted to have something that more than static images. Of course you’re going to get to read about the CSS animations that was used both for the alerts and for the overlays. He also wanted to have more of classical feel to the CaptainRoBear Twitch branding. Instead of something that was only modern he wanted to have the feel of age and sophistication.
In the CaptainRoBear Twitch branding moodboard you can see that I took a lot of those aspects when collecting inspiration.
I knew that I wanted something that had a warm feeling to it and something you might find in a bar or restaurant. What I was aiming for was the inviting and open feeling that you sometimes get once you step inside those doors.
You might also notice that the colors aren’t over the top. Yet they’re still eye-catching. Of course you’re going to see me use that to the CaptainRoBear Twitch branding advantage in the following paragraphs.
Avatar and Sketch
After the moodboard was discussed I moved directly into the avatar phase. CaptainRoBear sent me a few different reference images and images of avatars that he liked. It didn’t mean that they were going to look exactly as those but rather have the same feel.
To the right here you can see what the sketch eventually ended up looking like. It went through a few different stages before this and i think this was the 4th version, not that there were major changes but rather small adjustments.
In the final version you can see that I used a clean look. It was something that both me and CaptainRoBear both had talked about at the starting phase of it’s creation.
As I sketching and creating the vector version my brain was already in an animation stage. I knew that I wanted to do some really cool things for CaptainRoBear Twitch branding.
Above you can see the first previews that I sent to CaptainRoBear. As you can see I’m using the graphical elements almost as stickers or coasters. Combining that with the wooden backdrop allows for an added level of warmth and sophistication that I talked about earlier. I’m using green and a pale yellow to contrast each other and to stand out from the red/brown background.
The hops icon on the captains hat is being reused on the coasters. This is is to create brand assets that can be used in more than one way.
On the alert you can see that I’ve put down some ideas behind the animation. This is to help the client better understand how it all might look once it’s moving. Another thing to notice is how large the alert is. This isn’t a mistake but rather since the rest of the in-game overlay will be almost non-existent. It’s far from a must but it does lend itself for a larger more impact full Twitch alert.
Above you can see that I applied the style to every screen that you tend to use for your Twitch branding. Since Twitch allows for the larger format Twitch panels that’s something that I’m experimenting with as well, and not only the square version. However it’s not something that I would advice using for every single panel (if you have more than 3).
I took the menu concept and used it to add additional text into the break and ending card. This of course something that I took from the moodboard.
This stage tends to go a lot faster since almost all the elements are already in place from the avatar and the first preview. It’s more a matter of putting things together and see what works and what dosen’t.
Finally there was a few minor adjustments that were needed. For instance on the starting screen you now only have one wheel instead of two and one of the hops on the coasters are now a bear head.
While these might feel as minor adjustments they do add up. After all this CaptainRoBear Twitch branding is supposed to last for as long as possible. The attention to details really allows for as much longevity as possible.
CSS animations and alerts
I’m not a fan of video animations since they can’t be changed and they lock you down way too hard. While CSS animations are just lines of code that easily can be changed or updated whenever you feel like it.
For the starting, ending, break and IRL cards the wheel is actually animated. It slowly spins around. Of course this is controlled by using CSS keyframes to creat the movement. Even if the head looks as if they need to be a different one each time it’s slightly rotated. Instead of having to have several different images I used transform: rotate(13deg); or transform: rotate(-11deg); to slightly move it to either side.
Below you can see how the follower alerts animates on and off the screen. This particular alert utilizes a bunch of different animations and animation delays. For a lot of things it uses slide in from left and right. It also uses a rotation with ease in ease out animations, this gives it the slow down and speed up effect. The final fade away is a spin away that adds an additional wow-effect.
Daniel, you’ve been a pleasure to work with. Thanks for being nothing short of an absolutely thorough professional! I’m so excited that you’ve brought my brand to life in this new medium! I feel you went above and beyond, and for that I thank you.
I hope you enjoyed this case study and that you learned something from it. I thoroughly enjoyed working with CaptainRoBear as he takes his first steps into the Twitch world.
If you’re looking for your own Twitch branding you should check out my professional Twitch services right away.