Case Studies

Case study: JoshOG branding and Twitch overlay

By 7 January, 2016 4 Comments
JoshOG branding and Twitch overlay

JoshOG is a CS:GO Twitch streamer and probably one of the most popular at that. This time it was actually someone that works with JoshOG that reached out to me through #Creatives on the r/Twitch Discord channel. From there we started to talking about a few different projects and it eventually lead to working on the JoshOG branding and Twitch overlay.

The brief

Since this didn’t come through the contact form we had to do a few things differently. We talked back and forth for a bit about the entire project and what it entailed. There was already a few things in place, like a color scheme (that was changed somewhat by me) and logo that I had to incorporate into the final design. I still had creative freedom so it wasn’t like I was locked down to one thing or even specific colors.

At first we also there was no need for any illustration but as we kept talking they mentioned that they were open to it. As you’ll see later I took that challenge to heart and created something that’s very flexible and can be used in many different situations. But it’s not something that’s in the initial moodboard and during my very first design it wasn’t there and it looked bad. That’s why we later when back and had me create a avatar/emoticon that could be used.


JoshOG branding and Twitch overlay


The main point with this moodboard was to give the entire JoshOG branding and Twitch overlay setup a whole new look. The old “MLG” style have been old ever since MLG was using it so it’s not at all a surprise that JoshOG wanted to take it in a more minimal/flat direction. After all that’s what I’m probably most known for doing so the fit was perfect.

The one thing design wise we said no to from the start was the card design style that was introduced with Windows. So when you take look at the moodboard it’s a few different styles that caught my eye. Now looking at the very final version it took a lot twists and turns to get there, but even if the moodboard might not have that much in common with the final version at first glance you can be sure that a lot of it is incorporated.

To point out a few things that really followed a long is the red and black, the black and purple and the circular icons. For a untrained eye you might would have move away from the screen and squint but I promise you that those are the ones that I took the most inspiration from.

Preview 1

When I present the first preview it’s never to show the entire thing but rather to show what direction I’ve taken it in. This prevents going way off and be able adjust certain tings before the final, it also minimizes the need to redo things that might not what the client had in mind.

For this preview I also tried something new by adding in mock-ups instead of a plain flat preview. This puts it in better context and better shows the different ways that the screens and overlays are used. This gives it a bit more life and also look a lot better then presenting a flat preview, this is something I should have been doing already and I’m happy that I’ve at least started to go down that path now.

After talking with JoshOG’s people I started to work on the second pass. Mostly it was about the colors and avatar that we talked about that needed a change. I then started to work on those issues before I moved onto the rest of the branding and did some minor changes on my own that would work a lot better then the first pass.

To me all of these stages are very important. They allow there to be a cooperation and not a one man show. It’s not about me and my style, even if I do have a style and strengths, it’s all about getting the clients vision to come forward through my point of view and not only my point of view. There’s way too many “designers” that do their style and only their style without channeling the client. There’s also those that do exactly what the clients say and pretty much go word by word. Both ways are not what I would say is the right way to design properly when it comes to Twitch branding.


I wanted to take a deeper look at the iconography that I created specifically for this. When I work with iconography I tend to make them fit the overall theme and not just pick stock icons or grab some from some random site online. These are sometimes hand sketched beforehand and in some cases done digitally in Illustrator from start to finish. I think bringing even branding to the icons can really solidify the production value and the branding. Too me it looks super cheap whenever a “designer” only have done a quick google search or added in the standard icons set.

JoshOG branding and Twitch overlay

Icons in Illustrator

As you can see on the right of the image you have the outlines from the icons. There’s small details even as far down as that little button on the stop watch that was hand made by modifying a square with the direct selection tool. Each notch on the filmstrip is also created by modifying a square, and that’s really what illustrator comes down to sometimes. You have your main shapes and then you modify them to what you want.

For the knife and key it’s a bit different. With the key I pretty much created it from scratch by using the pen tool and creating shape that I then reshaped the edges around and then took the JoshOG logo and cookie cut out the logo in the key. For the knife, a much harder shape to create so what I did was take the image into Photoshop and used levels to create a version that only contained the black and white. Then I took that into Illustrator to use image trace to get a quick outline, that never tends to be perfect, so I then used the smooth tool to get a few of of the edges to get a better shape and then I used the direct selection tool to get some sharp corners.

The duck

Not going to go too deep into the entire process of the avatar. I used reference images and inspiration images, pretty much a moodboard and a image of a duck. Created a circular duck at first, the feedback was that it looked a bit too much as a hockey mask. I then went back in and added a bit of hair, made the bill a bit more oval and changed the eyes so they’re more expressive. Later on I changed those eyes again to show that there’s a lot of flexibility in the expressions by simply changing the ducks brows.

Preview 2

You could already see things from the second preview under the duck section here but wanted highlight few more changed and additions anyway. As you can see the colors got a bit darker and the brighter green is now used more as a highlight color then a main color. The panels have change a lot, I removed the bright green completely and instead used black and then the green very mush as a highlight color to bring out details.

Other then that it’s pretty similar to the first preview but it in these small changes that brings it all together in the end. You’re going to see a few of the completed version as well and that has a few minor changes as well. For instance in this version you still have the duck with the rounded bill and not the one we ended up using in the end. Again these might sound like small things but it’s the attention to detail that really are going to get everything looking the right way.

If you’re creating your own material or if you’re creating for someone else you need to have a conversation about the design. If there’s no discussion the end result is going to be one-sided an that’s not what you as a client or you as a creator would ever want. You want to take the best from one side and bring that together with the best from the other side. Solve the problems and don’t create problems where there are none. You as a designer have to be professional and your opinion should be valued as such. I don’t let me clients run me over and I don’t run over my clients, we work together to get to the optimal solutions and design choices.

Final version

There’s only minor changes in the final version but since I’m going to put these up in my portfolio anyway I’m going to give you all of them right here so you can see the changes. Not going to go into all of the small changes but they’re there.

What can, and want to say, is that this project was something that went pretty fast due to the fact that we had a good dialogue, communication and the style was right in my pocket from the start.

I hope you enjoyed this article even if it ended up being pretty long. If you’re a fan of JoshOG and you’re here for the first time then this is a blog about Twitch directed at those that stream, want to stream or want to expand their streaming. This case study is part of my services and to give insight into what goes on behind each decision along the way.

There’s two new articles every week, unless something important comes up, and you check out my portfolio if you’re into that kind of stuff. You can also follow me on Twitter (@visiblespeech) to get even more insight into Twitch.

Coming later this month is a bi-weekly show that I’ll host with two other people. It’s going to be an in-depth discussion show about topics around Twitch, it’s not a gaming talk show but rather a very analytical, critical and informative look at what goes on for a streamer. It’s not from the perspective of streamers but by people that work with streamers so it’s going to have a very interesting angle. More on that later this month!




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.