Case Studies

Case study: Dapper Nerd

By 10 September, 2015 No Comments

Dapper Nerd is one of those streamer that just knows what they want. There’s no holding them back and they’re ready to take on whatever challenge that might come their way. He have previously worked for IPL and have streamed in the past, but that was a time before OBS. It’s a new time and a new way of streaming today, thing change, and they change fast. That’s where I come in.


We exchanged a few e-mails and got down to understanding what my services was all about and I started to get a good feeling of him. After that we went over to Skype and talked more about the style, direction, feel and the final goals. It became clear that this would be a project that had a certain class to it, premium and something that’s close to a official brand. There’s nothing wrong with this, as long as you understand what to do with that brand and how to make that content.

Dapper Nerd Moodboard

Dapper Nerd MoodboardAs you can see this Dapper Nerd moodboard contains a lot of different elements. All of these elements came from the Skype conversation, I went over a lot of resources to find imagery that reflected the things we had talked about. The main aspects, that later also made it’s way into the overlay, are the red, beige and blue on the left side, there you can also see a bit of texture, that also will have an influence. On the right side you have a little bit of gold, that gold will play a big role as well, it adds a touch of luxury almost, but it’s never taken overboard, but instead used to enforce the feel that we were going for.

Besides those elements there’s going to be a few things inspired from all these different images. I advice you to keep this Dapper Nerd moodboard in mind as you go through the rest of the article. It will give you direct access to understanding a lot of the decisions that goes into making all of these things. If you’re thinking about creating your own stuff I really want to push the idea of having a moodboard even if you’re only working for yourself. Limit yourself to break into a innovative state of mind.

Preview time!

Dapper Nerd Preview 1

First Preview

After working for a bit, doing some initial sketching for the logo and monogram, it was time to give Dapper Nerd a look at how far I had come. I tend to do these previews as few times as possible, and only do them when I feel there’s enough to get a good picture of the entire project. At times I stop at the avatar, since that sometimes is a vital part of it. In this case it was more vital to get the entire brand to look good. You have to weight these to against each other for each client, it’s not a one size fit all (very few things on Twitch are).

This will be a very interesting preview, since a lot of it will change for the final version. Let’s talk about the things that really will change. The one thing that Dapper Nerd didn’t like was the monogram, so that was the first thing that got a big re-vamp for second preview. The other thing was the beard, it was going to be shaved off so it made no sense to keep it.

Besides that I changed a few things that limited the usage of typefaces and made it a more cohesive piece. You can also see that there’s a few Instagram photos down at the bottom of one of the screens. That will actually become both moving and updated through the Instagram API. It can pull both individual users feeds and hashtags.

Since Dapper Nerd had figured out all of this names for his social media, and they’re all the same. I were able to give it a unique look with having to throw a bunch of different names on the same card.

Dapper Nerd Preview 2

Second Preview

In this case I also ended up doing a second preview. It was needed since the logo and monogram had to be changed anyway. I did a few other minor adjustments that really pushed it all forward, but I’ll explain that a little bit later in this article.

I’m not saying that a second preview isn’t sent, but I tend to forget to include them in my articles since there’s not that much difference between them and the final versions. But I want you to understand something and that’s that I never do 2 or 3 versions of a logo that I present. I neither do 2 of 3 suggestions of overlays. I with the same direction that I wan to com out of it. I’m able to do this due to the amount of time I talk with my client and get to know them, before I start to process. I would be wasting both my clients time and my own if I didn’t do all the research in figuring out the optimal outcome from the start. In fact I’m saying you both time and money by taking the time to think before I start.

Instagram Slider

The Instagram slider is using a few things to make it work. First om I grabbed jQuery, then a script called SimplyScroll (simply put it makes images scroll horizontally or vertically, check it out it has some nice features) and then finally I grabbed Intafeed. Instafeed is what makes this entire thing work, it’s the script that pulls in the Instagram API and displays everything. Combining that with scroller we get all the most recent images from the Instagram account to display.

I then used CSS to style it so it looked like we wanted it to look, adding border, spacing and a few other API related things to get everything working.


Now you can see all the changed that were made. The DN was changed and the beard removed. You can also notice that I did a few changes to the typefaces, bringing it down to only two typefaces and instead utilizing different font weights to get variation.

Made the Instagram images a bit bigger to really fill out the space at the bottom. There’s also a countdown, this countdown is also a custom made thing, it’s based around seconds and can easily be changed.

Dapper Nerd final version

Final Version

Of course I also recorded tutorial videos on how exactly to make all of these changes and how to  make changes in the Photoshop files as well. I would never a client try to figure things out on their own. I’m might be your Yoda, but you (and your channel) are the hero of the story.

Notice the iconography as well, they’re all created by me in Illustrator. I wanted them to have a sleek and line look. Almost everything, that isn’t text or logo, have a distinct texture. If you want something not to feel too digital you should always add a bit of noise, in this case I didn’t need noise since the texture itself will act as such. I didn’t add any texture to the icons and other more clean elements. The reason? I’m trying to half break that feeling, we know that it’s not real so there’s no need to try to fake it, it’s better to stay somewhere in the middle in some cases.

What you didn’t see in the previews that you see here as well is YouTube, Twitter and Twitch banners, you can also see cameras, a few more panels, break screen and a slick avatar. All and all I’m very pleased in how all of this came together. Looking at the final picture like this always strikes at my core.

I just realized that I can get 12mbit upload, more than enough to stream, so I’m probably going to start streaming on Twitch under Creative and also do a weekly show. I’ve had a show idea in my mind for some time, but didn’t know I could get better internet for about $4 more than my current bill, but that will roll out at a later date. First I want to get started with streaming and see what that feels like. I’ll send out a notice before hand when that comes closer, but probably won’t be until after TwitchCon. Are you going? I’m going! Let me know here, or on Twitter @visiblespeech if you’re going and let’s meet up. I’m bringing a branding checklist that you can take without and check off one by one as you go over your own branding.

More podcast coming as well. Have a date with Destiny on Tuesday and that same day I’m pushing out my conversation with Kapsuli. Do you want to be on the podcast? Drop me a e-mail at



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.