Mr. Meola is a YouTuber that have decided to start streaming on Twitch as well. A smart move since it allows for a closer connection with your core audience from YouTube and that in-turn allows you to grow on Twitch as well since you have a viewer base already it’s an easier in for viewers that discover you.
Mr. Meola wanted to create something new and fresh that better could reflect him. We talked a lot back and forth in trying to get on right path from the start. At first we leaned towards more of a mascot then towards a logo but we finally landed on an illustration. Illustrations are by far the best way to put yourself out there as it is easily recognizable and give more of a personaltouch.
We wanted to create something that was striking but without being to over the top but at the same time something that was over the top. Now often this is a request that you shy away from but over my years working with streamers this isn’t actually an uncommon request. That also means that I was able to tune into what he was talking about. The ability to tune is to someone else isn’t magic but simply asking questions, listening and having a open discussion before you start to work on the project.
Before we can get to actually creating the Twitch branding the visual communication has to work. Now it’s hart to convey the visual in words so what I do is to create a moodboard that reflects what I have in mind. Now that dosen’t always means that it’s exactly what the client had in mind but that’s what it’s for. It allows us to discuss the visual concept from visuals instead of words. For clients that makes it a lot easier both to understand but also to communicate. They can easily say “I like this and dislike this” or even down to that they like a specific detail. With that information I can replace, update or change things on the fly before we’ve got deep into the project.
The first step to any successful Twitch branding, according to me, is to start with the avatar/illustration. The reasoning behind this is very simple and it’s that the rest has to work with it no matter what. If something dosen’t work with the avatar or that it looks too out of place your Twitch branding isn’t going to look as impressive or cohesive.
Below you can see that it’s not always that very first sketch or even the second that becomes the end-result. Here you can see the very first sketch that look a bit too aggressive so by pulling it back and making the face rounder with a happier expression you get the second sketch. From that second sketch we go into production i Adobe Illustrator and keep doing minor adjustments to make it all stand out.
In the final piece you can see that I’ve added minor details to really make it all standout. This done by simply adding highlights and shadows to create a more interesting texture or make the face not as flat.
For our first preview of the day we’re going to show what can happen but also how I solve it quickly. I work in a non-destructive format as much as possible whenever it’s possible. That means using Solid Color, Shapes, font typefaces, smart objects and more. All this so change changes can easily be made and colors replace with a simple click.
On top of that I also work by linking folder and layers together. This allows for fast navigation and easily searchable items that can be selected/moved/resized.
As you can see it’s light and airy. You’re going to see how much and how fast things can change below. You can also see that even if things do change they a lot of elements remains but in a new way. When you work this way or when you’re ideas are made from a solid concept even big changes are easily made. This cuts down on time and it cuts down on the overall investment.
The typeface we’re using here is Titillium Web, a Google Web Font. The reason is because TwitchAlerts uses the Google Font library to pull in typefaces. It also contains a lot of different fonts all the way from Thin to Black so it’s flexible typeface. I would recommend anyone that’s creating something for Twitch and that’s using TwitchAlerts should consider using the Google Font library to get a more cohesive look.
Here you can see how we progressed forward to the next step. By simply using what we already have made but changing thins to better line up with Mr. Meola had in mind but without moving away from the core concept. While it’s great to listen to the client the client dosen’t know design so by having the initial open discussion continue throughout allows us both not to worry about giving feedback and coming to the right solutions. I for instance will argue my point of view from a UI/UX perspective but not without taking in what the client says however what comes out at the end of that should combine both of that.
Things like colors, uppercase letters and layout changed but things like typeface, certain aspects of the layout and concepts remained. It’s more is less approach in this case all of these are important to get to the core of what Mr. Meola needed.
Here’s the final version of the entire project. A few more things changed and few things got updated. First of all the alerts stayed almost the same but with a updated version of the donation one. Most of the panels got a bit of revamp to better match and give them a bit more weight. The same goes for the Starting card that lacked a bit of weight and balance.
What’s new are a lot of Twich panels, an in-game overlay (that’s minimalistic), offline card and the break card. The break card is worth a bit of a discussion since there’s to blank spaces here. The blank space on the right is where chat is going to go. Now I know that chat isn’t one of those things that’s really needed anymore but there’s one exception and that’s when you as a streamer can validate it. In this case Mr Meola’s camera (he’s using a greenscreen) will show up below the SHORT BREAK title for a bit of a questions and answers session.
One last thing that haven’t been shown above is the animated alert for subscribers. The rest aren’t animated and that’s due a few different reasons but one of them is that we wanted subscription and donation to stand out. Donations stands out by having a different illustration and the subscription one stands out by being animated.
FRICK YEAH! Two awesome thing at once today. First of all it’s Swedish national day so this posts goes out early and you’ll get a bunch (1… tops 3) of Swedish tweets if you follow me on Twitter.
The second awesome thing is that I’m adding a second developer to the LiveSpace team. It’s only during summer due to school being out but I’m looking forward to giving him a lot of responsibility, payment and experience. He will do NodeJS projects together with me and Vidar as we move forward this summer. This is part of Phase 2 but we’re already moving towards Phase 3, and I’ll explain more about Phase 3 as the time progresses forward.