Case Studies

Case Study: Dropped Frames Twitch Branding

By 11 May, 2017 No Comments

For those that don’t know Dropped Frames is a talk show about streaming with itmeJP, CohhCarnage, Ezekiel_III and often an additional guest. The Dropped Frames Twitch branding have gone through a lot of change in the past weeks. However this re-re-brand actually goes a lot further back than that. If you want to know more then you should keep reading.

Brief for Dropped Frames Twitch Branding

As I mentioned this re-re-brand is not a rushed work. Even if it might seem like it from that just two weeks ago (from the posting of this article) there was a different brand. This version actually started back in 2016. There’s even tweets and videos floating around of what I presented back then. We never ended up using what I created back then, but I never deleted the original files for the Dropped Frames Twitch branding.

One of the things that I asked JP is what he thought about when I said dropped frames. The words was frustration and glitches. That is what later steered the entire brand into the direction that we ended up in.


Dropped Frames Twitch branding

Early version

Since there’s no moodboard done here. I tend to skip it when it comes to a brand that I’m familiar with and specially when I worked on the orginal concept of the orginal Dropped Frames Twitch branding.

When I started to work on the logo I knew that I wanted to take the dropped frames and glitch art and make it part of it. I still wanted to have something simple and effective so it shouldn’t be too over the top.

Dropped Frames Twitch branding logo

Final version

If you’ve paid attention to trends in design we’re currently in a glitch art, modern and vaporwave aesthetics. I wanted to use these in the Dropped Frames branding but first we needed to have a logo to go with it.

As you can see in the early version I’ve used a mix between all of those to get to an interesting state. This is actually the stage that we stopped at a year ago. When we returned to this branding this year I decided to revert and simplify even further.

On top of this one of my goals are to make the O associated with Dropped Frames. You’re going to see more of it used as a focal point in ads, overlays and other things. It might not sound like something that’s important but if we can associate the blue O with Dropped Frames all of a sudden we have even more of a playing field to do things with.

Video Animations

In the past we’ve had a animated title card right after the countdown have hit 0. We while there are something in the works we still wanted to have something there that could be used until that’s done. You can see what I created below.

I used After Effects to create this and a bunch of different layer masks to get everything moving individually. While I like video animations I still think that CSS animations trumps video over and over again. If you keep reading you’re going to see a bit about that as well.

CSS Overlay Animations

As you might now I’m a huge fan of CSS animations instead of video animations. For Dropped Frames I knew that we wanted to have animations on-screen. At the same time I didn’t want to have to create something that’s clunky and hard to change.

For instance we had to do final adjustments 30 minutes before going live the first time we used the new branding. This wouldn’t have been possible to adjust slightly if it was a video. That would have meant rendering av video after making adjustments and doing it once again even if there’s a slight change. We’re also having a E3 show next week and for that we once again need to do adjustments. None of these adjustments would be as easy as changing a few lines of code and then having a 4kb file.

The animations that I created for Dropped Frames was the animated sliders and numbers. The numbers are controlled by math and are actually not random, read into that what you want to. Most of the sliders aren’t images or gifs but rather being white CSS blocks. Each block or image then gets an animation class attached to it.

These animations, once you unlock a few things in xsplit, spits out a clean 30FPS with almost no impact on your CPU. You can see these animations above. Another animation that you might have noticed was the glitching O in the full-screen (and on the starting screen) video scenes. It uses the same principle as the other animations.

Final Version of Dropped Frames Twitch Branding

Here you can see that we opted to use a more free overlay. Meaning that there’s no boxes constricting the people that are on the screen. You can see that the whole glitch, vaporwave and modern style still is used here the same way it was in the logo.

You can also see that there’s a box in (where Ezekiel_III is in) this is due to that at times someone might not have a green screen to key out. In those moments we do need to have different box setups so it’s not just a floating box without any context.

Are you looking for your own Twitch branding? It dosen’t matter if it’s your own stream or for a show. You should check out my Twitch branding services



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.