Case Studies

Alucard Twitch branding

By 17 June, 2015 No Comments

Alucard contacted me recently about updating his branding and help him get on the right path towards his goals. Alucard plays, casts and hosts shows around the game HEX: Shards of Fate. After he contacted me I sat down and did a little research both Alucard’s channel and the game HEX as well. I could directly see why Alucard had gotten partnership with Twitch, I believe that anyone in the same situation can get partnership fast and viewership at that point isn’t a big issue.

With that in mind I knew that Alucard had a strong entry brand but needed a better tie with his personal brand and visual identity. We exchanged a few e-mails to get the ball rolling and get on the same page before we started to talk a bit more on Skype to nail down all of the details.

Alucard Moodboard

alucard moodboardAs always I start with moodboarding out every style idea that I take away from both the e-mail conversation and the Skype conversation. It’s not only a way to show what style I want to take it but also give the right feel and also so Alucard can get a glimpse into my head without it having to be written in words. The saying a picture says more than a thousand words is the very first thing that comes to mind. Even if you’re not professional I would advice you to do a moodboard for your own stream and don’t use words instead use only images, then show a friend and talk about it.

If you take a look at the moodboard for this project you can see that it has a dark, yet colorful, professional and fun feel to it. At least that’s what I hope you felt when you looked at it, since that was the goal with this project.


After me and Alucard discussed the moodboard together he gave me the exact impression that I hoped so from there on I started the layout right away.

preview-2The very first issue I ran into was something as simple as the overlay messing with the UX/UI of the HEX game that Alucard plays. Having things floating within margins, no matter what margins I would use, would cover up important information. I didn’t matter where I tried to sketch out the different assets it always covered something. The only solution was to make the gaming smaller, it would still be possible for Alucard to go fullscreen if needed but having both options would be the ideal situation.

As you can see in one of the early drafts here it has a boarder around the right and top edges. This game me the opportunity to play a bit more with the branding than if it was for any other game. This if the benefit when a streamer does only one game, you can focus on getting the best result for that one. However still keeping in mind that other games can be played it’s more than possible. This isn’t the solution for every game or stream and this decision has to be made from channel to channel.

These are the following things that I included in the package for Alucard:

  • Avatar
  • Logo
  • Banner (YouTube and Twitch)
  • Panels
  • Offline card
  • Break card x2
  • Intro card
  • Show Overlays

I want to make it clear that this isn’t the first preview I sent to Alucard but rather the 4, if I recall correctly, instead what I usally do is focus on 1 overlay at first. Meanwhile I also work on one other thing, the reason being so I can go between the two in case I get stuck or get a bit bored with working on the same thing over and over.

In this preview you can see almost all of the things that I wanted to include. As you can see there’s more than one break screen, the reason being so Alucard can choose between having one with a camera and one without a camera.

If you look at the moodboard and then at this preview you can see that it differs a bit. The reason being that both the colors and the style didn’t really work with the game so there had to be a few minor changes. It’s important to be able to adapt quickly and not to get stuck in that very first idea, same goes if you start a Twitch channel, you should always be open to change both to you and your channel.

The colors

Alucard sidebar tabs

Click to animate

Let’s talk a little bit about the colors. It’s a very important aspect that often is overlooked. You want the colors to stand out and certain colors complement each other in different ways. In this case I wanted to make the red really pop out, the best way to do this is to put it on a dark blue background. The reason being that they’re complement each other very well but also red have a tendency to look bad when used too much. So while it is the main color it’s not the overall most used color. It’s a small yet important thing to think about.


Another thing that we needed up with was a tabbed overlay. By having a lot of space and having the chat there can be a bit distracting, there for a great option was to add more tabs. This gave space to have information on whatever is going on or if a tournament is upcoming and a tab that displays recent donations, subscriber, top donation as well if you want to highlight it even further. The last one can of course be easily modified to have different information, as can the others.

Logo/Alucard Avatar Sketch to final

Alucard sketch to final versionOne of the most eye grabbing things about the moodboard is probably the hippie guy in the middle. He demands attention. Now I didn’t really want to have Alucards avatar demand that much attention, but still wanted to have something that’s very iconic and recognizable. By taking key features in Alucard’s appearance I was able to create a avatar that is both fun and professional. The text is modified version of the typeface Tracks, in the preview above you can see that it’s a standalone text logo, me and Alucard ended up (after a bit of user feedback) that it would be better if the avatar was incorporated into the logo as well, if you scroll down you will able to see the very final version.

As you can see in the sketch to the final version. I started out with a few more features, however by removing features it ended up being a even more iconic and professional looking avatar. I’ve taken my sketching away from paper and I’m now using only my Wacom tablet to draw things out, and that reminds me that I need to get new nibs for my pen.

alucard-animationNot only is the Avatar and logo in vector format, allowing it to be used for merchandising and unlimited re-sizing. I also animated it so Alucard is able to have it in his videos or as a animated gif avatar. This is why you always should have a vector version of your avatar or logo, it will leave you with the most possibilities down the line.

Additional animations

The avatar isn’t the only thing that is animated in the overlay. Actually before I even made the avatar animated in After Effects I created a animated bug. A bug is the Twitter, Facebook, YouTube etc. thing that people have on their overlays. The problem is that sometimes these take up a lot of space especially if the channel as different names on different social media and websites.

Alucard Social BugWith that in mind, and since Alucard has a different name on YouTube, I decided to create a animated version instead of having a bunch of text links.

Final Alucard Overlays

After the very first pass was done on everything. The first animation was done etc. and payment made, again I don’t drop my clients only because they’ve paid. Therefor me and Alucard decided to both let him and his community feel it out and get some real user feedback. When it all was said and done I did a few minor changes and that’s actually why we ended up with a animated avatar as well. In one of the overlays it would have been two static avatars so by adding the animated one as well it gave it a more dynamic feel.
preview3Now for the overlays themselves there wasn’t much changed but only adding a few more things like changing one color, updating the logo by combining it with the avatar and adding top/latest donation. As you also can see the version looks kind of empty the reason for that is that all of the additional assets (social bug, all of the text etc) is removed before deliver so the client don’t have to go through and figure out what needs to be removed. Still you can see both the new color, updated logo and the new donation bug.

You can check out Alucard on Twitch.

Ps. A small update on me networking with media people. Had a great time got to drink a few free beers (that’s how things work in my city). It’s always fun to see media people who have no idea what Twitch is or heard about it only in passing, specially seeing their reaction when I start to talk about it in marketing terms. Throwing out things like ROI, SEO, brand awareness, livestreaming social media, millennials, viewer numbers etc. their entire face changes and their eyes almost pop out of their head. In August I’m going to go to more of these things and spread the word of Twitch.



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.