Case Studies

Case study: N3RDFUSION icons for FallingWater broadcast

featured-n3rdfusion

This is a project that I wasn’t involved in until the final hours so this will be not only a case study but also how to deal with time constraints and understanding a project quickly. Matt (Sevadus) reached out to my for this project about 24 hours before the deadline, it’s not unreasonable amount of time but it does come with a lot of caveats and the first one if of course pressure and financing.

Understanding the project

When you get a project that’s supposed to be done in 24 hours it comes with the territory that you need to quickly understand the project and the goal of the project. In this case it’s a TV broadcast in where the viewers get to vote on where the cast is “transported” (that’s at least as I understood it). Within that the voting will be showing with icons and these are the icons that I had to create.

Matt gave me a bunch of motion graphics that they already had created for the broadcast and icons from a previous broadcast that they had done. Having this allowed me to get a quick understanding of the project and the scope. I even got the EPS file that was used for the previous project. This was important since these had to be EPS/vector files as well. Why EPS files? I actually don’t know, but what I do know is that TV broadcasting has some weird demands sometimes and this might also be the reason why this was a 24 hour job, I actually don’t know the reason why I landed on me but these things happens sometimes and are sometimes outside of the clients hands as well.

Design choices

N3RDFUSION outline

Illustrator outlines

Looking at the previous work and the current work that had been done they’re pretty different in style so it was important to get a understanding of the direction. The style of the overlays was a bit more cartoony and the icons from the previous show was more of icon design. At first I was going to re-create the exact same style as the overlays but that would have taken a lot longer than 24 hours and since this was a hourly thing as well I landed on a combination of the two with a flat design. Flat design also works great with larger icons since you can pack a lot meaning (same way with signs) and still have enough detail to make it more interesting for a broadcast.

Creative process

N3rdFusion TV broadcast icons

Complete icons

At first I was going to hand draw each of them to sort of do a rough mockup but realized quickly that it would only have added to the overall time-frame. Instead I decided to start directly in illustrator and go from there. One thing that I do love about Illustrator (and Photoshop as well now) is artboards. They allow me to work on “pages” on the same canvas without having to create a new document for each instance. This allowed me to have a better overview of all of the projects while I worked down the line. It also allowed me to easily copy over assets from each new layer (icon) I worked on.

N3RDFUSION Underwater and skyscraper

Underwater and skyscraper

I’m going to highlight a few of the icons and talk about them specifically here but the same principle goes into each of them. Let’s start with one of the first ones (you can see the order that I worked in above) as it actually started to set the tone for the whole thing. While I did start with the Eyes and Raindrops I actually went back about halfway through to redo those two.

As you can see the underwater has some very simple shapes. That’s the whole principle behind flat design and icon design in general, to be able to convey the message as clearly as possible without having to use too much details. Even the waves have the same shape as the underwater plant and this is because it’s the same asset just rotated and given a different color. This is the benefit of using this design style since even these small changes can have a completely different meaning by changing orientation and color.

The same can be said about the Skyscraper since in it you can see two clouds, they’re the same asset but one is reversed and made slightly smaller. These clouds are from the Storm icon with a different color. Yet again the benefit of using a similar style in all of the icons. With the building I also wanted to introduce a somewhat 3D feel, even if it’s still kept in the flat design realm, I did this since it felt as if it would benefit to quicker see that it’s actually a building rather than something else, even if the clouds could be enough.

N3RDFUSION sheep and city

Sheep and city

Next up we have the sheep. I say sheep since once again this is just one sheep duplicated of course. As complex as the outline might look it’s actually just a few shapes that makes up the final image. The main body is one circle and the fluffy look is created by adding more and more circles around it. Face is just a rounded rectangle, same with the ears and the legs are even more rounded rectangles duplicated eight times and the four last duplicates made black and used as hoofs.

Lastly we have the city. You can see that I pretty much took the skyscraper and resized it down, duplicated and slightly changed the colors. Added in roads and simply created a few tree shaped assets that I, yet again, duplicated and placed around the icon.

By doing it in the linear process you build up a style and assets that you can re-use over and over again. You can even see this in my text above as it starts to thin out the further down as I explain each icon. That also means that at times I need to go back and edit the first few ones, as happened in this project, to better fit with the rest of the design.

Invoice/financing

I’ve now started to charge as close as possible to standard rates in the design industry, and I’m very happy about that, but for this project I had to rise it even a little bit closer due to the fact that when last minute things come in you need to push other projects to the side. For me that doesn’t impact the timeline for those projects since I’m confident that I can make up for that time but that means that I need to take a few hours away from me free time. To me free time is more valuable and that’s why companies pay more for overtime than regular time, and the same principle apply here.

Normally that’s not something that I do since most projects that I work on aren’t too time sensitive nor are they hourly based but instead a flat fee decided from the start (with coverage for overtime and revisions included, but these are also safeguarded by my process). The reason why I wanted to bring this is up since there’s decisions to be made along every project and understanding these comes with time or coaching. Luckily I’ve been doing this for a long time so I’m confident in my process and structure but not without allowing to to change with times and with my own development.


There’s so much going on right now and I’m trying to do way too much at once. Still I do love it and I’m not going to stop! I need to expand my design team a lot so if you’re interested reach out to me on Twitter or anywhere else

 

About the author

Daniel

Daniel

Do you need Twitch branding done the right way? I've work with both partnered and non-partnered Twitch streamers and done so for over 4 years. For me this is full time and I'm dedicated to my clients and my craft. I do both branding, visual branding and brainstorming based on understanding you, your community and your channel. If that sounds interesting to you then you should check out my Twitch services/portfolio/client list and contact me right away. twitch.livespace.se

Leave a Comment

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close