Hashtag Mike, previously known as DirtyMike, is a FIFA gamer and recently got signed to the Hashtag team. When that happened he also wanted have somethings created for his Twitch channel. Hashtag provided Hashtag Mike with banners for Twitter and YouTube and a logo but that was it. The rest was on him to to get. That’s where I came in to take the HashtagMike Twitch branding to the next level.
Brief HashtagMike Twitch Branding
There were a few important things for the Hashtag Mike branding. The first was that it still needed to have a resemblance to the regular Hashtag branding. That way it could work with the logo, YouTube banner and Twitter banner.
The other important thing to make it more geared towards Hashtag Mike. Taking some core concepts that I’ve been talking about here before and let those shine trough. After all the most important aspect of any Twitch stream is the streamer. So it was an important step to get right for the HashtagMike Twitch branding
Another thing that we wanted to push was some sort of way to integrate Tweets into the stream itself. All of this of course had to be integrated with the HashtagMike brand. I wanted to go an even more custom route but we ended up using TweetAlerts in combination with some custom code to make it behave properly.
Often in moodboards it’s about everything. From color, style, fonts and the overall mood. However in this case one thing that differentiate is that this time the direction was pretty much decided from the regular Hashtag brand.
What I did use the moodboard for was to show style and UI/UX direction. While a lot it might not have ended up in the final version. The point of the moodboard is to convey ideas and for the streamer to be able to convey their ideas to me.
The moodboard helps in that it allows us both to explain things more visual than text can. It works very well when the other person aren’t knowledgeable in the design, and honestly they should have to understand design before working with a designer. That’s the designers job.
Since in this case there were no logo that had to be made. I jumped directly to making the first preview for the HashtagMike Twitch branding.
I know that I haven’t included any images from the regular Hashtag branding. However one thing that was there from the start was the color scheme of blue and yellow.
You can also see that I’ve used a very clear visual message combined with big photos. The decision to use photos instead of a stylized avatar. I’ve talked about using photos in the past and I still stand by that it’s a valid alternative. In this case I had to do all of the cutting myself. Even if they did use a greenscreen it wasn’t the best lit greenscreen and I had to go in my hand to get the perfect cutout.
I did some adjustments to the color of the shirt and the lighting. It was done since the shirt was actually purple and spill from the greenscreen was reflect on the photo on Hashtag Mike.
All of this together created the basis for the HashtagMike Twitch branding. Keeping it inline with the regular hashtag brand, having a a fun personal approach and an esport/professional aspect to it as well.
Animated Twitch Alert
In the preview you can also see that I’ve written some things on the alert preview. I’ve recently started doing this to convey the animation that I have in mind for the final version. It allows for the streamer to better visualize that it might look like then just showing them something static. It also allows them to start thinking in animations and come with suggestions or ideas themselves.
The animations are all CSS based. At least the ones that slides, bounces and spins in. The one thing that isn’t is movement with HashtagMike. This isn’t a gif but rather an actual video file. Do keep in mind that the discoloration on the skin tone isn’t in the actual alert but due to it being converted to a gif for this case study. The actual alert, and text, are all CSS based so that it can change and the text can be updated depending on what type of alert and who is subscribing.
HashtagMike had sent me a video that had a greenscreen behind. I keyed out the background and exported it using my own preset to get a transparent background in a webm video. While my tutorial is for “xsplit stingers” it works for this purpose as well.
Above you can see a few of the things that are in the completed version. As you probably already can see I’ve also added a few things below that are animated. I’ll talk more about those under those images.
In the IRL card you can see a custom chat. It’s using the chat box from Tweet alerts combined with custom CSS code to get it to behave the way that I want it to.
You also have the in-game overlay. In this case both the sponsored by and the social media ones are animated. They’re on a timer so they switches between the different things between either different social media links or different sponsors.
Above you can see the animations that was used to create the starting card for the HashtagMike Twitch branding. Take note that the skin tone is a bit off and that’s due to the limited color spectrum that gif animations can provide. Also that the background animation are sped up to better showcase what it would look like, the speed can actually be changed in the code pretty easily.
Something I also added was a custom coded CSS TweetAlert. This is using TweetAlert as the backend but on the front end it’s custom coded CSS that put into OBS. Doing it this way allows for some really nice added features. It instantly gives it a dashboard and bunch of built-in options.
I hope you enjoyed this case study and that it helped you in understanding the different types of benefits for doing it this way.
If you’re interested in getting your own professional Twitch branding? Then you should check out my Twitch branding services right away.