Uncle Bonk contacted me through my contact form to start working on the Uncle Bonk Twitch Branding. He wanted the focus of the brand to be on him and the type of comedy and entertainment that he provides for his viewers. It’s a simple approach but with a lot of complexity. Done right this type of Twitch branding can be very powerful but with the wrong approach you might end up walking in the wrong direction.
The first step to the Uncle Bonk Twitch Branding was to ask questions. These questions is all about getting to understand the client and who they are. The questions that I ask have no right or wrong. They are however (together with the answers from the contact form) the basis for the moodboard, and of course the whole Uncle Bonk Twitch Branding as well.
As you can see this reflects the dry humor feel that I wanted to bring to the front. I felt that both expressions, colors, and forward movement all could convey the deadpan humor in the Uncle Bonk Twitch Branding.
At the same time it was also important to stay on the modern and clean side of things. Hopefully you can see that in the moodboard as well.
Keep in mind that even if there’s things on the moodboard dosen’t mean that everything will show up in the final Uncle Bonk Twitch Branding.
After the moodboard was approved by Uncle Bonk I moved onto sketching the avatar. With these sketches I tend to do them rather rapidly as there’s no need to worry too much as long as you can convey the overall concept.
When the sketch have been approved by the client the next step was to bring it over into Adobe Illustrator. This the reason why there never was any need to spend too much time on the sketch. It’s, after all, not going to remain inside of Adobe Photoshop during the creation of the avatar.
The reason why I’m using Adobe Illustrator instead of Photoshop is due to it being vector based and Photoshop being raster based. Keeping it vector based means that it can be resized to any size and it also gives it a certain look and style that I like to work with.
As you can see I’m using the deadpan look combined with a colorful pallet. Creating juxtaposition in the look of the avatar.
I am using a more modern and clean approach to the whole avatar. Since I know that it’s more timeless and that it will properly work with the rest of the Uncle Bonk Twitch Branding that I have in mind.
When the avatar is done and approved I start working on the rest of the branding assets. I tend to do three different objects to get things going and to give a good overview for the client. For the Uncle Bonk Twitch Branding I created the starting, panels and the alerts. I felt that these three would best convey the style and look of the Uncle Bonk Twitch Branding.
As you can see the starting screen as some bold lines and large color areas. These are more inline with the grid systems that we’re seeing more of more of. I am going to keep working with grid systems in mind since it truly is the best way to do these type of screens. After all this type of design is more so magazine related than it’s website related (even if websites are getting the gird system as of late).
In the Twitch panels, for the Uncle Bonk Twitch Branding, you can see that I’ve decide to use the same colors from the avatar. I’ve also used different sizes to show importance in order of size. This is a effective way to direct the eyes of the viewer where you want them to focus.
There’s many different ways to direct attention and focus with design. It’s also a great way to make the design flow better and feel better for the viewer. While it might not seem as if it would matter that much. All of these little small things do add up over time. They can also have a direct impact in that if someone gets lost for even a second that might mean that they won’t comeback. Even if that might not apply to you it’s been prove over and over that it’s not something that’s uncommon.
The final version is more of what you saw in the preview. taking it to the next level. Using even larger color areas where that works better. You can see this change mostly in the social media banners. Where I used it to really highlight the name and avatar instead of taking away from it with useless random imagery or textures.
Another change is in the Twitch banner. While it might not always be seen I still didn’t want it to feel as if it was more of the same on the same page. After all you’ll get the same image right below it otherwise. Instead I opted to change the colors of the shirt and the background. This makes both the banner and the offline image stand out for the Uncle Bonk Twitch Branding.
Animated Twitch Alerts
This is the custom animated Twitch alert that was created for the Uncle Bonk Twitch Branding. I’m going large and animated with this one to have the humor combined with the deadpan look on the avatar.
This isn’t a video or gif alert, this is a created using HTML and CSS. This is important since this way I can actually change the width of the nameplate. I can also change the text on the “BONK!”. In this case there’s actually only three PNG images. The rest is created with CSS/HTML and animation is all CSS.
I actually did the change to the “BONK!” text in the subscribe and tip alert. Instead of having “BONK!” the subscriber one is instead replaced with “SUBBER!” and the tip one actually has the amount tipped on the yellow signs.
Another benefit here is that colors can easily be changed if needed. No need to open up After Effects or Photoshop to make any changes. Instead all that’s really needed it to change a few lines of code.
I hope you liked this case study and that you found something helpful for your own Twitch branding in it. I really enjoy these and there are for sure more coming very soon. Some might be for only animated alerts but then you’re going to get more insight on those. If you want even more insight into how they are create I do showcase it on my Twitch stream from time to time.
If you’re looking for get your own Twitch branding then you should check out my Twitch Branding Services and get in touch as soon as possible.