Strippin is a YouTuber that’s, actually today, going full-time streaming. Hopefully I didn’t spoil that but that’s what I was told. Worked with Strippin during the end of last month to get everything set for him going full-time streaming. We talked over Skype and started to get everything going, and even if you might think that Strippin is already pull big numbers he had never before worked with a professional.
Strippin wanted something minimal, clean and nothing over the top. You can already see that I had a few things in mind that I wanted to test out after hearing what Strippin wanted. Oh and he also likes the color red, so I knew that it was something that I wanted to use.
The main takeaways from this moodboard was the schedule ideas from the workout app, I really enjoyed the circular days. The color scheme and look of the Shrimp/Rice image, and you will be able to see that a lot of that background texture will make an appearance in the final product. The last big takeaway was the combination of the Serif and San-Serif typeface, keeping a sleek look but also introducing a different direction.
This is what Strippin wanted but I also wanted to add a bit of fun somewhere, that’s why you see the icons at the bottom, now that style didn’t make a great impact but you will see that it’s incorporated in a different way. The rest is all there somewhere in small doses and also a few things that I had in the back of my head already.
I tend to do the offline screen first as it has the most details and tend to set the stage for the rest of the project. I did the same this time and after that initial start it went fast getting the rest done. That’s why this preview pretty much contains everything that ended up in the final version.
Using these color blocks and various type of grids, gave it all a very fluent way of design but yet keeping it structured. Here you can also see the usage of the circular schedule. Keeping the schedule very simple and clean and most of all easy to understand. I also repeated the little speech bubble thing from the logo in different places on the color grid, again to make all feel fluent and cohesive.
On the note of the panels as you can see there are two different version. A big one and a small one. The reason for this so the big ones can use images, but without loosing the main branding touch. The ability to add a full size image (within the 320×320 limitation) is also a great benefit, since we react to visual more than text. In this case it’s used for Strippin’s sponsors HyperX and DogHouse Systems.
What you won’t see here is notifications and all of the panels. The reason for that is that Strippin didn’t inform me that it would be nice to have. I did realize this when making it so I gave him a note about it and I started to work on those as well. The only time that Strippin wanted a change was for the very final version of the notifications, and it was a simple moving of the logo to anther side and adding a subscriber icon.
Colors and Typefaces
The main color is of course red. using both black and white as contrasting colors. It might not be visible in the lower quality images here but the background isn’t actually solid black. That way the black panels on the overlay grid isn’t “invisible” but rather adds to the contrast. I knew red was going to be the main color, but as with red I want to be careful not to overdo it, since red has a tendency to be a bit strong. Both as a color and as a emotion for a lot of people, but using this was is great middle ground.
As I mentioned at the start I wanted to mix a San-Serif with a Serif, simply put a Serif is the typeface has little “feet” while a San-Serif don’t (like the typeface on this page), again giving it the fluent feel but also the structured once again. The typefaces I used was Bebas Neue and Adobe Garamond Pro, by utilizing different font weights you’re able to get your message across in different ways. Remember that using more than 2-3 typefaces should always be avoided.
Strippin didn’t want a avatar or character design. Instead he wanted a simple shape logo that could be used in many different ways. Driving more focus to his personal brand (not his words, but this is what it does) and his own imagery.
Sadly I lost my sketch for this, I think Photoshop crashed but didn’t give me a recovery file, those things happen but since I still had the idea fresh in my head I went into Illustrator anyway to give the design life. As you can see it’s simply designed logo with thick curved lines. Adding the speech bubble thing on one of the corners became the red thread that went through the entire project. It also signifies talking and that’s a big part of what a streamer does so it’s not out of the blue.
There’s nothing flashy about the logo, and it’s not supposed to be however, as you can see later, it’s still possible to make into something you have the full control with vectors instead of raster.
As I said the logo isn’t flash unless you make it flash. When we use Illustrator we get vectors and those vectors and be converted into shapes, and After Effects (used for animations) works with shapes. We’re then able to animate each segement of the logo, speed, shape etc.
I used this to give a bit more life to the notifications, since if not they would be pretty plain. Not that I don’t want them to be plain but adding a few moving graphical elements will push it a bit further and give it more production value. As you can see the animation grows in from the sides and then starts rotation slowly before spinning fast and then stops. Giving it a “smooth impact” dramatic and eye catching.
As you can see not much changed from the first version to the final version. That happens sometimes. When everything thing goes as planned that’s why I don’t do three different suggestions, I rather spend time to get it right the first time. I do that by having my interviews and questions with my client so I understand their brand and where they want to go. Then I from that give it my spin and my ideas to get it there, with their perspective in mind.
I also love how the break illustration worked out. It was too much of an empty space and having it there made it so much more interesting, adding a animation you say? Already on that. Another thing that we actually added was a animated background. It will have light streaks going across the background to give it a bit more life.
On top of that I also recorded a video explaining how install and position all of the notifications.
And finally for those that have paid attention will also notice that there isn’t a big block element for the offline screen, and that the speech bubble thing is only on the social media stuff. Intentional, since Strippin is currently offline during that card he’s not talking, however if you want to hear him talk more you can go to his social media sites.
Didn’t expect this to be as long as it became, but I’m more than alright with that. Been a long weekend as well, worked all Sunday on re-design the entire site so it’s easier to access all of the information. Added a tab up top so you can go to a specific category that you want to dig deeper into.
I’m working hard this month on a lot of really cool things. Had a bit of a slow start of the month but it’s looking like it’s turning around faster than expected. Going to be an awesome month with a lot of new people and a lot of new connections. And I’m going to share it all with you, my readers, so far this year I’ve had over 58000 views on this and my service site. Thank you all!
Follow me on Twitter @visiblespeech to get small golden nuggets, updates and other streaming tips.