tracking pixel
FeliciaDay3D Design Exploration

FeliciaDay3D Design Exploration

As I mentioned in my initial post, my primary job is to be a graphic designer. Every project provides its unique challenges and fun, but occasionally a project will come across my desk that really amps me up.

My friend Kyle approached me earlier this month saying that a client of Moonlight Minis was in need of a graphic designer, and wanted to know if I wanted in. With little to go on, I said sure. Any project involving the Moonlight Minis crew is bound to be radical.

I was put in contact with the awesome ThangsDan, and was introduced to none other than the fantastic Felicia Day!

The task was to build out and brand her Thangs3D page, which included a banner, thumbnails, and potentially an icon. There were a couple directions that were pitched:

  • I had already developed a comic style, action line based theme for my own personal branding, which was potentially catchy.
  • Colors featured on Felicia's website. These were developed by Joe!
  • A potential option with a dungeon background that was liked in a preliminary round of design.
  • Possible sparkles?? (More than one of us on the team liked sparkles.)

So, with that in mind, I got cracking. My approach to design tends to be "throw spaghetti at the wall and see what sticks". There's a lot of tweaking and toying, but it's also a process of play: seeing what elements work together, what don't, and making the call on what to push forward on.

First Drafts.pngThis ended up being the full set of exploration, some with only very minor differences, but I ended up boiling them down to the top 5 I pitched to the group:

1_CaraPicks.pngThese thumbnails depict works in progress and are not reflective of the final prints and renders.

I tried to pick one that catered to the main brand look and feel of Felicia's website and digital collateral, one that played homage to the comic feel and action lines, and combinations of the two. The fourth featured some very subtle sparkles, and the fifth, a subtle dungeon. The one that ended up sticking out to the team was the second!

Now that we had a direction, it was time to move on to the headers.

I initially had a very similar document for headers as I did the thumbnails- lots of different spit takes, but a lot of them felt off. I finally landed on one I really liked, and pitched variations on that one. The action lines were removed as it was difficult to balance them stretching across the width of the banner- it ended up looking a little funky. To promote the fun feel, Felicia's brand colors were split into diagonal chunks with the halftone pattern from the thumbs radiating across it as a transparent gradient. I toyed with everything from products to Felicia's face, and eventually the motto "Stay Weird, Make Stuff" became the answer.

As a note: I lived in the "tabletop game packaging" side of the design industry for a number of years. I wasn't used to the way banners and images can shift dynamically across different devices- so it took me a hot minute to try to mock up potential ratios to make sure the design would look good on a majority of them.

Header.pngLastly, we wanted to highlight a product: I really liked the geometric lines of the necklace, so we added it as a subtle drop shadow behind the text.

Banner_1440x446.pngIn the process of making the banner, you may have noticed that I'd put a placeholder icon in there. This ended up evolving into the actual icon, with a lovely portrait from Felicia's site! I love how the blue of her shirt contrasts with the warm orange and cream.

Icons.png

The halftone is still present on here, but I swapped the direction of the shape movement, and made it round like the organic forms on her website for visual interest.

All together, it looks a little something like this! Different lines around the top direct the eye around the site, and the colorful thumbnails should stand out on the Thangs front page : )

LinkedIn3.pngI'm pretty pleased with the result- I hope Felicia is too!

Additional thanks to Dan, Christine, Kyle, Tom, and Daniel for additional advice and feedback!

Thanks for reading, I'm excited for today's launch! Congratulations Felicia!


----------------------------------------------------------------------

Edit: Well, I wrote this post shortly before launch. And like any project, there are unexpected things that crop up. Today's thing was that we didn't anticipate all use-cases.

See below: it looks pretty blank.

Emergency.pngSO! We scrambled, I opened Adobe Illustrator, and sent a bunch of mockups and treatments. Within minutes, we had a new treatment.


New Banner.pngAnd now I can breathe easy. For now.

Enjoy!


Comments