Case Studies

Case Study: FirstThirtyMinutes Animated Twitch Alerts

By 27 July, 2017 No Comments

I’m continuing the talk about animated Twitch alert and in this article I’m going to show you the creation of some alerts for First Thirty Minutes. What can be done when you already have a brand and how you can extend that even further with great alerts.

The concept of FirstThirtyMinutes animated Twitch alerts was to keep it related to his current brand. At the same time he did also want something that wasn’t the same style. Instead he wanted the modern and cleaner style that I’ve been using for the past years.

FirstThirtyMinutes has a police theme (via playing GTA 5 LSPDFR ) that runs through his branding so it was important to take that aspect and extend it into the alerts. I did collect a few different images that I used as inspiration, but for some reason I didn’t save those so I can’t show a moodboard.

The Process

For the FirstThirtyMinutes animated Twitch alerts and really any animated Twitch alert I have a specific process that I go over.

First stage is to understand the context of each alert. Meaning that a subscriber, follower, tip and bit all have different things that could happen. Be it that there’s different color, images, videos or different animates each has to fit the context of both the action and type of alert.

I don’t start by thinking about the animation. For the FirstThirtyMinutes animated Twitch alert I started by constructing the look for it. As I progressed forward I started to see animations as I was designing. It’s similar to as when you’re filming something you start to seeing how to edit at the same time.

When I was done with the basic design for all of the alerts I started to write down the ideas about the animation. Even if all of these might not happen or different ones it’s always a good idea to show the client the thought process. This way they’re able to better visualize how it’s supposed to happen.

Preview 1

FirstThirtyMinutes animated Twitch alert

FirstThirtyMinutes animated Twitch alert

I put both the alerts and the description of the animation in the same document to show a good overview. For the FirstThirtyMinutes animated Twitch alerts I also added in a blurred background from GTA. The reason is because that’s the game that he plays and the alerts have a slight transparency so it makes sense to have an image behind that can show through.

Here you can see that I’m using icons and numbers to display tier, months, and even badges depending on the amount of time subscribed for the FirstThirtyMinutes animated Twitch alerts. This way the alert is almost customized for each viewer depending on a lot of things.

You can also see that there’s a few different versions for the FirstThirtyMinutes animated Twitch alerts. Slightly different colors and different fonts for the first 3 ones. This change actually didn’t happen during the creation stage but rather after showing it.

The reason why I wanted to show it is because how easy it was to change in the actual alert as well. This is the benefit over a video alert. You could easily change colors, fonts or even animations by simply adding, replacing or adding code. No need to render a new video file and no need to go back to the the creator of it to get an update. It’s so simple that the client can do it on their own.

Completed version

Click on the image above to see a handful of the alerts that were created.

These are all GIF’s so there’s a bit of compression going on. That’s of course only visible in the previews and in the final version you both have the higher framerate and no artifacts (since the alerts aren’t GIF’s).

You’ll also see one that has a green background. The reason is since FirstThirtyMinutes wanted to use Streamlabs for the donation alerts, and as you might know Streamlabs now also  has HTML/CSS support. So I ended up setting up that specific alert in Streamlabs. You can read more about the reason why I had split the alerts here.

If you liked what was created here you should check out my Twitch branding services. Animated Twitch alerts are now available for both Muxy and Streamlabs.



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.