Case Studies

Case study: NoLay Twitch Branding

featured-nolay-twitch-branding

NoLay is both a creative streamer and a variety gamer. NoLay contacted me through the contact form on my Twitch services page. From there we started a conversation over e-mail before we moved it over to Discord as we agreed on the investment and the scope of the project. Over there we could communicate faster and get a better grasp over the project.

You might question why another creative would want help with something that’s creative? Here’s the thing there’s many different type of creatives. One might be good at doing oil paintings while another might be good a digital illustrations, yet none of those translate 1 to 1 over to graphic design. The same way that my graphic design skills don’t translate over to oil paintings. Even if you’re a graphic designer there’s different styles to consider and I have very sleek and modern style that looks effortless but there’s a lot more behind it than one might think. On top of that you have Twitch branding with experience in that field.

Concept

Since NoLay does a lot of digital illustrations it was necessary to keep that in mind through the while Twitch branding for him. Another aspect was the colors that he also knew that he wanted and that’s actually a great start at times. Since it cuts down the combinations and all you need to do after that is figuring out a style that works with that color. I finally landed on having a 3 color setup with all matching colors. The style in general was supposed to minimal and flat (my strengths) that meant understanding the flow and understanding how to use the space in a way that would be pleasing to both the client and the audience.
Another thing that we discussed was a way for NoLay to have his BTTV emotes appear on-screen during his stream. The solution for this was a custom coded BTTV Emote App that reads the chat and looks for certain emote keywords and displays them on-screen. More about that further down.

Moodboard

NoLay Twitch branding Moodboard

Moodboard

As you can see the moodboard contains both things for the avatar as well as the general design aesthetics. Since me and NoLay understood each other pretty fast and really understood what he was looking for I were able to put together a moodboard that could really reflect the choices you’re going to see further down.

On top of this NoLay actually sent me a few images he had in mind as well, both in terms of the avatar and the style. That of course helped as well since it’s always easier to discuss something that will end up being visual when you have something visual in front of you.

Sketch

NoLay Twitch branding sketch

Sketching stages

As always with avatar/illustrations I start with doing a rough sketch that I presented to NoLay. You can see it in two different stages here.

The reason why there’s two different stages is due to that the first version ended up not being minimal enough. While I don’t think the initial sketch was bad it didn’t fit the overall theme and I’m glad we revisited it to get it right for the entire concept.

As you can see I used circles and a grid to measure out the right proportions for the avatar. While this isn’t a must for an avatar, in this case it worked out great and allowed me to keep it very simple and clear.

Logo

NoLay Twitch branding Logo

Logo

Using circles and a grid allowed me to rather easily translate it over into vectors in Illustrator. Since I knew this was going to be used for a livestream I set my art board to RGB instead of CMYK. This allows me to use a wider spectrum of colors.

Speaking of colors this is the first time I started to spend time with finding the right color matching. While it started with the cyan, magenta and yellow/green-ish I added in a lighter magenta that leaned towards pink. Why that fits in so nicely, and this is a little trick, was to only lower the saturation and don’t touch the hue. I did touch the brightness level when I wanted to create the shadows but other than that all the colors work together due to not touching the hue.

Preview 1

After the avatar was done I presented it to NoLay and we talked about it a bit. As you can see in the preview the nose is not as pink as you’re going to see in the other previews and final version. That’s due to what I mentioned earlier with changing only the saturation a hint to get a lighter color but without messing up the color matching.

Here you can also we me experimenting with different panels sizes. I’ve come to the conclusion that the best way to have panels are to have them in different sizes ranging from small, medium to large. The large ones fill the whole 320x320px space and can both act Call to Action buttons but also a way to display information in text form. The small ones act as links but can also be used as headers where you can have longer paragraphs underneath them as well. The medium ones stands to be a combination where you can have a Call to Action or a prompt to read the text below.

You can also start seeing me testing out both a more open style and a modular version. Since my moodboard contained both I wanted to test the water and see what NoLay thought. Perhaps it would land in the middle or even if it landed on either side I would still be able to use assets from both styles moving forward with the Twitch branding.

Preview 2

This feels almost like “How to draw an owl” and I know that there’s a huge gap between preview 1 and preview 2. The reason for the gap is that me and NoLay talked for a while about the style and the concept.

These type of conversations are what allows me to not have a bunch of revisions but instead have an open discussion with the you, the client, so that adjustments can be made instead of making choices. There’s no bad questions and there’s on wrong answers in these conversations since that would hinder both the development and the creative side of things. I don’t shy away from stating my professional opinion and after all that’s the reason why you would come to me in the first place. At the same time I listen, take notes and ask questions since I know that without that the brand will not be you.

As you can see there’s illustrations a little bit everywhere. These are not stolen art but rather art that NoLay have made. I think that the cheapest thing you can do as a designer is randomly steal game art and use it in your Twitch branding.

Emotes

NoLay Twitch branding emotes

Emotes

I’ve done emotes in the past but it’s not really one of my strengths but maybe after this time I would say it might become. The best trick that I’ve started to look at is using a different setting when resizing and painting over it a bit to get some details visible after the resize.

As for the emotes themselves I used the original avatar as a template and created different assets that would go with that. They’re all based on emotions and NoLay had actually sent me a bunch of reference images from different anime shows. Using the same template as the avatar allowed them to be an extension of the Twitch branding that I had made for NoLay. I wouldn’t say that you need to have your emotes look like the rest of your brand as long as they follow in line with your Twitch branding that’s enough.

EmoteApp

Finally I had one of the developer that I work with create a EmoteApp that allows there to be emotes on-screen depending on what keywords NoLay, moderators or audience writes in chat.

The emotes are either pushed from the BTTV API or from local folder on NoLay’s computer. With the BTTV API it of course allows them to be displayed in chat as well as on-screen but the flexibility to add any emote from a local folder can really allow you to impress, not only, your audience but also other streamers.
Basically what it can do is look for a keyword like “branding” and if it sees that in chat it would push out the emote that are named branding.png. It would animate it and have it grow while it floats up and finally it shrinks down slightly before it goes away. It goes in a random path and not a straight line to give a more dynamic feel and it can also push out several different ones or more of the same at once. They’re all put into a que so they’re not pushed out all at the same time.

Final adjustments

Here you can see the final updated adjustments with a few added things. This combined with Preview 2 all became the final branding for NoLay.

This project was a lot of fun to work on and of course it’s always fun to develop new dynamic features for streamers. What this proves to me is that the Twitch community is growing since NoLay, at the moment of writing this, isn’t a partnered streamer. Yet he invested into both a proper brand and a dynamic overlay.

Hopefully that means that people will eventually not only put a mic, greenscreen or webcamera on their wishlist but also Twitch branding.


After the launch with the itmeJP community I must say that it’s been a huge success and everyone involved couldn’t be happier. Reddit is a one-topic/interest type of place that it’s impossible to have anything besides that. With the community we’ve now seen itmeJP’s audience connect on a new level and share everything from the itmeJP show RollPlay, gaming and all the way to food.

Did you like the Twitch branding in this article? You can read more about my Twitch services here or read a bit more in the box below.

 

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

Leave a Comment

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