Adam Koebel reach out to me through Steven Lumpkin, probably not a big surprise by anyone. I’ve followed Adam streaming career due to him being a part of the RollPlay crew. Adam was/is a great client, he knew enough to convey what he wanted and open to ideas and suggestions. He also allowed me to be creative with the brief that he had given me.
Even if he could just have sent me a message on Skype, Adam chose to actually send me a message through my contact form. With that I also got some great insight into what he wanted, since he gave a great overall picture of what he was looking for. That always allows for the best possible project, in some cases that’s not possible but then me and the streamer through e-mail, Skype or Discord to get to the right place.
We landed on that Adam something modular, flat, no flashy color and keep a hint of personality. Adam had a few illustrations that he wanted to keep incorporating those as part of the brand going forward, I’ll discuss how to work with that a bit later.
Flat design is something that we’re seeing more off, and it’s making it’s way into Twitch overlays and to me that makes sense. If you look at my portfolio you’ll see that it’s something that I enjoy working with as well. Looking at the moodboard you can see that there’s a lot of that in there. I wanted to really nail down the look before trying to figure out what would fit with what Adam wanted and was going to use it for.
Here you can also see the exact colors that I wanted to use. Grey scale with pink as a highlight. An important point that I want to make about that is that even if it’s grey scale you don’t want to use too many grey colors at once. After all it’s still a large spectrum of colors and they can work of each other. What you can see here is that I landed on a few very specific ones and the pink complements it very well.
Showed it to Adam, he said it looked great and from there I started to work on it.
Working with the illustrations actually became an obstetrical, first of all they’re not transparent. Not that big of an issue since they have a white background. However the main problem ended up being the colors. I tried making them grey scale, but that just looked super boring and bland. What I ended up with, as you can see, is using transparency and a blending mode to maintain the colors but still making them fit better with the rest of the branding.
As you can see the colors from the moodboard are all there. There’s no more and there’s no less (well there are the colors from the grey scale image and the illustration but they kind of have to be there). I like to limit myself to those colors and not go outside of that. I believe that when you do limit yourself you can come up with some great innovation rather then throwing every technique you know into one project.
Another thing you can see here is the alert. The alert itself has one small animation and that’s a little wink. Again, throwing in that little bit of personality can be very important when working with something that in general don’t scream out personality. Keep in mind that when you make this type of design you have to be aware of a lot of different things that might skew someones experience.
All of the image are made with smart objects, and since Adam have experience in changing both text and images, having him just being able to click on a smart object and then drag and drop the new image works the best. There’s no need to edit the image since I’ve set it up so it automatically grey with a Black & White adjustment layer. I’ve also added a gradient as a mask, so some of the dark grey background will always leak through form the left.
There wasn’t too much changes done for the final version. What was added was more alerts, a lot of panels, 2 camera frames, offline screen and a sub/donation overlay. So let me go through most of the choices for these and explain why they look the way they do.
I personally hate big camera frames. They take up way too much space and only get’s in the way. I know that people like them to have a lot of flair but to me flair don’t have to be bombastic to stand out. Here I used some very simple lines to structure it all up and allowing it to be as un-intrusive as possible. Adam needed both a 16:9 and a 1:1, since he sometimes uses that for certain games.
The panels have the same look as the text box on the main screen. Reasoning being that you want that red line to go throughout the entire project. We’ve already seen the shape and now it’s repeated here but with a different purpose. There’s also 5 unique icons that I’ve created, something I’ve been doing more and more recently. I don’t want to have to rely on online resources to all have the set I need and there’s been way to many times where I’ve seen others use icons from different sets and it just ends up looking weird. I’ll probably release a icon package in the near future with all of the icons I’ve made.
The subscriber and donation overlay are as unintrusive as well. They’re transparent and that’s why they look a bit different in color from the rest. This way the text will show up nicely, it will still have the same style and it won’t block too much information on the screen.
Another week comes to an end! For next week I have even more case studies coming! Sorry for those that are waiting for other content. What else… going to see Star Wars on the 16th, so that’s going to be awesome. There will also be articles going up over the holidays, not sure about what just yet but there will be something. To keep yourself updated follow me at @visiblespeech on Twitter!