Case Studies

Case study: Frameloss Twitch Branding

Frameloss Twitch Branding

Frameloss reached out to me through Adam Koebel to do the Frameloss Twitch branding. Or rather he got the recommendation to go to them from Adam Koebel. We started our conversation through email and eventually worked our way over to Discord for faster communication. We ended up doing a partial payment plan so that way Frameloss could space out the payment instead of doing it in two parts only.

Brief

The aim was to create something around the Frameloss Society. At first we started with coming up with a proper concept. I suggested that there’s two ways to go with it. Either the more Assassins Creed/Illuminati thing where you have more of a classical or old type of secret society. The other path is the more modern and futuristic path more inline with current design and along the lines of Watch Dogs.

Of course we ended with the latter. It give a lot more options, both now and in the future. You’re going to see a lot of really interesting solutions and ideas come out in this project due to that.

Moodboard

Frameloss Twitch branding Moodboard

Moodboard

This one of those cases where the first moodboard hit the mark. If you look at the moodboard and compare it through this case study or look at it compared with the final version you’re going to see that the Frameloss Twitch branding is all of it.

Even if the moodboard might be more minal in some cases it’s more so about the concept and strength of the Frameloss Twitch branding.

This is exactly what you want from a moodboard. It’s not an exact science or a 1:1 translation to the other. It’s used as a way to guide both you and the client in the right direction.

Logo

Frameloss Twitch branding Sketch

Sketch

I started with drawing a sketch. It’s a rather simple sketch to get the idea out quick. Instead of trying to create a sketch that is perfect and instead rather define the look in Adobe Illustrator.

As you can see there’s both a mark and a wordmark. This is so they can be used in different ways and gives it a lot more potential in this case. Every avatar or wordmark has a different solution to the problem and in this case this was the best solution possible.

Frameloss Twitch branding Wordmark

Wordmark

When that was done I started to work on them both in Adobe Illustrator to create a proper mark. The wordmark is all custom made and not a font. You can see there’s a few changes between the sketch and the final version. Mainly how the spacing and the amount of lines. Of course there’s also the changes in the thickness of the lines. Most importantly I wanted to show that even if the sketch is fair representation it’s not the final thing.

In the sketch you can also se a regular mark. That was also replicated in Adobe Illustrator but later modified for stylistic reason using a ASCII generator and combining that with a font that could output certain blocks. While that might sound straightforward it involved several different renders and font attempts before it became a final version. You can see the usage of this in the preview below.

Preview of Frameloss Twitch Branding

After the different marks were approved I moved on to creating a few things that could represent the full scope of the project.

You can see the starting card contains a lot of glitch effect, you can see down below how that was able to be put into the dynamic overlay without having to add several images in the OBS scene.

You can see how the effect was applied throughout the entire project. From the starting card, alerts and the panels. This is to give it all a familiar feeling and a direction that gave the Frameloss Twitch branding message.

There’s a bunch of interesting little details in every aspect here. You can see that every window has a tab at the bottom. The paint program even has the tools and not only a image preview window. Everything has a purpose and speaks towards the Frameloss Twitch branding.

Dynamic Elements

Cards/Scenes

Each card/scene has a glitch overlay. Now normally you would have to add that in with another image on top of your other images. However a better approach for this is to simply create the scene in HTML. Now I already do that since I incorporate the dynamic aspects into the cards/scenes so adding another thing on top of that isn’t an issue. The benefit is that the client only needs to add the HTML file and not several different image files to get same effect.

Countdown

By using the windows on the starting screen I took the opportunity to use one of them to create a “countdown.exe”. In that I could then add in a countdown, while it’s not a big countdown, it keeps up with the Frameloss Twitch branding. In many cases this is more important than arbitrarily adding in a countdown for the sake of having one.

Clock

In the bottom right you can even see a functional clock. It grabs the time from the Frameloss timezone and displays the current time and updates as time goes by. This isn’t something that really would have been needed but speaks volume and value when it comes to the Frameloss Twitch branding.

Game title & box art

These have now become a standard for any requested that I get. They look good and gives something new (if you’re playing a new game that is) every time you fire up your stream. There’s no need to update these on your own since they pull the information directly from the Twitch API.

Animated Alerts

This is something that’s rather new but since a few months back I now offer custom animated alerts (if you’re using Muxy). Frameloss does use Muxy so I was able to create some very interesting alerts that works great with the Frameloss Twitch branding.

Below you can see both of the of the animated alerts. These are NOT GIF’S since that would end up looking really bad. All of the effects here are either static or using CSS effects. That’s how even the names can have the glitch effect and will have an updated look with every new name. The host alert (or in this case raid alert) uses the same type of effect but on a image and it uses a loading bar to showcase the raid being active. Both of these of course speaks to the Frameloss Twitch branding.

host-frameloss follow-frameloss

Final version of the Frameloss Twitch Branding

Since I’ve already included the final version of the animated alerts I’m not going to include them in the final preview. What you can see is that now you have a full picture of the Frameloss Twitch branding. Most importantly it speaks the same visual branding language. This can be used in many different ways and something that Frameloss can stand on for the future as well.

You can see that there’s a balance between the rather minimal but at the same time using a even more modern approach to the glitch and digital design landscape that we’re seeing appearing all over the place. I’ve made this a cornerstone in my own progress to constantly keep an eye on new design trends. I do push them into the Twitch space as much as possible due to the fact that I know that doing so will ultimately aid the streamer with their Twitch branding.


That’s it for articles this week and I hope you enjoyed this one. I really enjoyed working on it to show a new side of what’s possible with CSS, dynamic overlays and animated alerts.

If you’re liked the Twitch branding above you should check out my professional Twitch branding services to get you own started as soon as possible. Have a great day and a great weekend and I’ll see you soon.

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