Sombrero is a partnered Twitch streamer that also happen to work at Razer. We have been talking back and forth in the past but it wasn’t until now that it was the perfect time. He had seen what I’ve done with OizoGG and Nathanias and wanted the Sombrero Twitch branding to landed around those two.
We went over a few things to get the right brief on the project. We talked about the goals and the outcome for his target audience. We also talked about color schemes and things that he in general liked. We landed on darker colors with a hint of red. Then combining that with something that felt a bit more high tech. High tech was one of those keywords that he mentioned that I simply then ask what he meant about that keyword.
Here you can see how that conversation then took form into a moodboard for the Sombrero Twitch branding. As you can see it has a lot of those high tech elements and large photography to break it up. I knew that I wanted to limit the amount of things on the screen to a few essentials but it’s always best to show a bit too much and then pull back than the other way around.
The only thing he didn’t really like was the top right one. It didn’t feel as if it really belonged. I sort of knew that before hand but I like to add things that either are a bit outside of what they probably wanted or something that opposite of what they wanted. The reason being to just test out if that really was the case.
Sometimes the reason why people want is not because they haven’t experienced enough outside of what they’ve been looking at. So it always a good idea to challenge that belief and see in what way they respond to it.
In this particular case, for the Sombrero Twitch branding, I also added in the top left one to test. That actually didn’t get noticed and therefore I knew just a little bit more about the direction that I wanted to take the project in.
Logo & Sketch
For the logo me and Sombrero talked about what the already had and where he wanted to land with his future Sombrero Twitch branding. What had been using was a bear with a sombrero, holding a AR and a can (of some sort). As you probably can tell that wouldn’t really be inline with the type of brand that he wanted moving forward.
Here you can see the final sketch. I went through a few different ones on my own and showed one before this one to Sombrero. We talked about the previous one and specially about the sombrero and the rounded corners.
On this one you can’t really see any rounded corners since I’ve made the adjustment to have them all angled instead. The only thing that did remain was the bend on the sombrero—however as you’ll see further down that changed.
While working with the logo in Adobe Illustrator I noticed a few things. The first one being that the sombrero worked best just floating above and removing the bend. It added a quirkiness to it but at the same time kept the overall aesthetic of it and the Sombrero Twitch branding.
One thing that you can see in these logo previews is that I actually resized the head of the bear. You will be able to see it in the previews in the next section. The reason why I did that was because when I put it in with the context of the the design it looked longer than intended. It sort of lost it’s bear appearance. If you think that resize much have been a big hassle—it really wasn’t since I literally just selected it and resized it down just a bit.
I mention this since I think it’s important to understand that even small adjustments like that can have a larger impact. These are also the small adjustments that I want you to expect from me and that I always thing about the overall Twitch brand for you and that the decisions I made is with that in mind. It is the reason for doing it with the Sombrero Twitch branding.
Here you can see the first preview for the Sombrero Twitch branding. These are to give Sombrero a look into the style direction of the Sombrero Twitch branding. Without this he would be in the dark until the final version were done. That’s not what we want. What we want is for him to both be able to give feedback and also give him and update on the progress.In this case? He loved it. It was spot on to what he wanted.
One thing you can see in the starting card is some random weather information. This might look a bit random here but at this point I had already started to think about the different animations that I wanted. On top of that these numbers wouldn’t be random. Instead the idea was to pull data from a weather API. This allowed the data to be dynamic and update on a loop. I’ll get more into it further down.
Since Sombrero liked it as much as he did I were able to quickly start on the next phase. I did a few minor changes to the starting card but overall it’s pretty the same. Then the rest does follow along with that same design language for the Sombrero Twitch branding.
As you can see I used a few different version of the logo. Specially a version where only the inner lines are showing. It works both as a larger item but also a smaller icon—that’s why you can see it used in the little avatars on things like Twitter and Twitch. It made sense to have it in that version since the larger version would have less thick lines.
This is of course on of the benefits of having a more streamlined and modern style to the logo. It allows for a much more flexible application than a clunky cartoon character.
These overlays also add animations. I didn’t want to over do it since I knew that I was going to have one pretty large animation looping through the entire thing. I knew that I wanted the background map to move behind the logo. I simply used HTML and CSS to get that movement without having to render out a bunch of video files.
As you can see the weather data is following along with that. They are actually not connected with the same animation. Since the weather would need to take in data it couldn’t use the same animation. So I had to match up their animation duration and speed, those ended being fairly different since they travel different distances.
I also created a fun little music or loading animation. It ended up looking a bit more organic once I actually made it in CSS. The reason for that is since I aligend them to the middle instead of the bottom. Other than that I also used a few flicker in effects along with a few slide ins. These more mostly triggered once you enter the scene.
As mentioned I wanted to bring in some dynamic data to the overlays. Of course I have the Twitch API being called every 10th second. That’s how the box art is showing up on the left hand side. However I wanted to bring in some more specific data and in this case I wanted some weather data.
There’s a API called OpenWeather where you can pull data from a specific city. You can get things like temperature, pressure and so on. Usually you want to present this in something like a weather app. In this case I really just wanted the raw data. Since that would add the high-tech aspects of the Sombrero Twitch branding.
What I did was to write a script that would check for updates every 20th second—I’ll get to why in a bit—that then pushed that into a text div. I used jQuery to write a call to the API using an API key. At the rate that we would use it it should go under the limit of their allowed calls for a free account.
Still I did want to add a bit more animation to it. At this point I actually had it a much shorter call time however once I started add in the animation a few things changed. Again I used jQuery to make it count up from zero to the number that got pulled from the API for each instance. I then offset each of those so they didn’t end at the same time. On top of that I made it so that the final one would have duration of 10 seconds. That meant that once that’s done I would do a API call pretty much directly once it’s finished. So made the API call repeat at slower rate and that’s why it ended up at 20 seconds. That way once it’s done with it’s animation it takes 10 seconds before the next call and animation cycles through.
Animated Twitch Alerts
I hope you liked this first article after the holidays! I hope that you got something out of it and that it helps you make the right decisions for your Twitch branding.
If you’re looking for you own Twitch branding. You should check out my Twitch branding services and get in touch as soon as possible.