Case Studies

Case Study: Gumdrops Twitch Branding

Gumdrops Twitch branding

Gumdrops does stream World of Warcraft… however maybe not in the way that you might think. He’s part of the TadeSkillMasters (TSM) and that means, as I understand it, trades in/with WoW items/gold. With that in mind and a few other things I created the Gumdrops Twitch branding.

Moodboard

Gumdrops Twitch branding moodboard

Moodboard

In the moodboard you can see a heavy influence from modern magazines and newspaper. This due to the fact that with the Gumdrops Twitch branding is strongly connected to Q&A and WoW item trading.

I also knew that for the Gumdrops Twitch branding I needed to use one specific purple color. Since I knew that one color purple matches up very well with is yellow/gold. That in turn would register as more royal or high class and that would fit with the Gumdrops Twitch branding.

At the bottom you can see a few icons that I used as inspiration for the logo that you can read more about in the next section.

Lastly Gumdrops mention that one thing that he liked was the VOX website and intro videos. That’s not on the moodboard since it was discussed between us after I had showed the moodboard. I still wanted to mention that it was part of the inspiration that I used.

Logo/Sketch

Gumdrops Twitch branding sketch

Sketch

Even before I started with the sketch I sort of knew the type of typeface that I wanted to use. Also since Gumdrops had asked if I thought that a serif font would be a good fit. I agreed that it would work very well. Specially with the tone it would set and that it would make everything stand out compared to mostly san-serif and display fonts from other streamers.

As you can see I also have a yellow color already in the sketch. I also already have the typeface that I wanted to use in there. All this combined is there to give Gumdrops a better insight into what I have in mind for the Gumdrops Twitch branding.

Gumdrops Twitch branding logo

Logo

Here you can see the final version of the logo. As you can see I have used the purple color to match with the pale yellow.

I’ve also included a black and white version to show the flexibility of the logo. You’ll get to see how that flexibility will be used in the preview and final version.

Below you can even see how it would work in the context of merchandise.

Preview

Once the logo was done and approved by Gumdrops I moved to create a few previews to give further insight into the Gumdrops Twitch branding.

As you can see in the previews I’ve taken both the yellow and purple, and used it sparsely. Both yellow and this specific purple has a very strong impression and could easily overwhelm. Instead I opted to use it carefully and with purpose.

One thing that did change after showing it to Gumdrops was that he wanted to have chat on the starting screen. Originally the background to the starting screen (and the idea was to have it for the rest as well) was a white color. Gumdrops felt that the gray might work better so I changed it to a light gray color.

Final Version

As you can see I stayed close the to preview for the rest of the Gumdrops Twitch branding. I really wanted it all to flow together. For me that’s an important aspect when you’re working with something that’s rather minimal.

Additionally you can see that I’ve used the logo in different ways. From small, to large and all the way to the black and white version. You can see how that really played out in the animated Twitch alerts.

Finally, one thing you can’t see is that I the circles are all animated. They actually have a twofold animation that sort of grows, collapses and then fade in and fade out. Another thing you can’t see is that both the clock and the date is automatically updated using JavaScript. There’s no need for Gumdrops to go in and update that for every stream and all he needs to worry about is the stream itself.

Animated Twitch Alerts

Here you have the animated HTML/CSS alerts. You have a few different animations going on at once here. I’m also using some CSS tricks to everything looking correctly on the page.

As you also can see all of the logo versions are used here. Event the colors have been used to give a different impressions depending on the type of alert.

Gumdrops Twitch branding animated twitch alert

Follower alert

Gumdrops Twitch branding animated twitch alert

Subscriber alert

Gumdrops Twitch branding animated twitch alert

Tip alert


Thank you for reading this article. This was a super fun project to work on. I love working on anything that’s minimal and modern.

If you’re looking for your own Twitch branding then you should check out my Twitch branding services and get in touch.

About the author

Daniel

Daniel

Do you need Twitch branding done the right way? I've work with both partnered and non-partnered Twitch streamers and done so for over 4 years. For me this is full time and I'm dedicated to my clients and my craft. I do both branding, visual branding and brainstorming based on understanding you, your community and your channel. If that sounds interesting to you then you should check out my Twitch services/portfolio/client list and contact me right away. twitch.livespace.se

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close