This is one of the first collaboration in the LiveSpace Network. Basically we’re all different type of designers that specialize in different things that have come together to create even better work. ELC Gaming is based out of Germany and are both tournament organizers and content creators.
With ELC we needed to create advanced animated alerts combined with a few set branding guidelines from their website. I needed to use their website as a reference, as they didn’t really have any set branding guidelines. There’s nothing wrong with this and it’s more than possible to speed things along. They needed both a few different scenes, panels, social media banners and in-game overlays. They also needed advanced animated alerts that could stand out more than only an image.
These animated alerts is something that’s becoming more and more common with larger streamers. However it’s also making it’s way down to smaller streamers. This due to the fact that it’s something that isn’t too expensive when we’re talking regular custom animated alerts. However when we get into the more advanced stuff the investment tends to go up pretty fast.
Here you can see the moodboard that I used to create all of the extended Twitch branding. Of course I also used the ELC Gaming website to grab some style, colors and some fonts. We (me and ELC Gaming) decided that doing that would create a great bridge between the Twitch branding and their website.
As you can see in the moodboard a lot of things are clean and clear. I find these two things extremely important when it comes to more UI/UX solutions. At the end of the day the visual branding in a Twitch channel is all about those two things.
Your viewer is going to experience both the UI and the UX. You want to make that experience, not only looking good, but also follow your direction and clearly state where to look and how things appear on screen.
As always I tend to do around 3-4 different preview images that the client can look at to see where I’m headed. Then we can talk in more detail on if it’s right or if there needs to be adjustments. The direction comes directly from the moodboard and that allows the client to part of each step. At the same time it allows me to work with full creative power.
Above you can see the different things and a template for the advanced animated Twitch alerts. The panels are clear and shows the most important things that the audience would care about. As you can see the alerts follow the same design language but also has a very clear and easy way for the audience to identify what’s going on.
Depending on if it’s subscriber, resubscriber or a new donation it will show different colors of the logo. It will also clearly show the amount of months and amount being tipped.
The same things can be said about the schedule. It focuses on the important parts to give the viewer a clear and direct message of what’s going on.
Here you can see the updated versions of almost everything that’s included in this package. You can tell that there’s a certain language being spoken and that they all speak a similar language. You can see that I’ve opted to reuse a lot of elements to create that feeling. At the same time there’s a bunch of similar things that work in different ways.
This is the proper way to create a unified design language that can be used in more than one way. It could even be picked up by any other designer and use it to extend it even further.
Finally you can see the alert in motion. As you can see the framerate is a bit low in this GIF but I can assure you that the final version can be set to 50FPS (the maximum for the browser. Even with the slightly lower framerate in this it looks great and you can really see the both the visual and the functionality works together.
This week have been a strange but at the same time wonderful week. I wouldn’t have had it any other way. What’s next? We’ll see but there will hopefully be some great surprises around the corner.
If you’re interested in your own Twitch branding or your own Advanced Animated Twitch Alerts you should head over to my Twitch branding services. This was a collaborative work in the LiveSpace Network so do keep that in mind.