Project Truffle

We are a collective group of lovely peeps that want to make a difference. We're currently working on a development project to launch a site that we hope will make finances more understandable for the masses and ultimately save people money. We're sick of big corporate financial comparison sites that only show half the picture, we're web folks that want to create a community where people's best interests really are what matters.

This blog is where we'll be sharing our learnings along the way of the launch process and as we introduce new features post-launch. This really is the space that you should watch!

Branding The Pig

Hello! Elliot here. Over the past two weeks, I’ve been coming up with the brand identity for Project Truffle. After conducting research, brainstorming with the Decode team, creating moodboards, trialing typefaces, sketching constantly, and gradually refining the ideas at each stage, we’re now on the cusp of finalising the brand and releasing it out into the wild. Our little baby is almost ready to go truffle-hunting!

On Tuesday next week, we’ll be revealing all by launching a holding page for the site (which I’m designing tomorrow), but in the meantime we thought it’d be fun to take you through the branding process from the last two weeks, so sit back, get a cup of tea (or five), and prepare for our most revealing post yet…

Day 1: Idea-gathering

Before jumping into anything, I spent the first day making notes, looking around the web, and gathering images that I thought might have some relevance to the type of brand we were trying to establish. I’d already had a meeting with Dan and Mel a few weeks previously so I had an approximate idea of what we wanted to accomplish, but this stage, it was about keeping things very loose and — importantly — preparing for the next day’s brainstorming session with the team. I put together a brief Keynote presentation (mainly for my own benefit rather than anyone else’s, as I have a tendancy to waffle) so that we’d have something to follow along with and keep our ideas on track.

01

Day 2: All-day Brainstorming Session

I travelled down to Decode.UK’s office in Sevenoaks, Kent and we embarked on an all-day brainstorm. It wasn’t as intense as it sounds! I’d suggested we do this because I felt it was important to ensure we all had the same understanding about the project and, for me as an outsider, I wanted to check that I could deliver exactly what the team wanted. We discussed pretty much everything during that day: from things very specific to the brand (which involved me asking the guys a series of questions I’d put together for the presentation) to more technical aspects, such as what I’d be required to deliver and when. It was a really fun day, we had a good laugh, and we were extremely productive. As I would be working remotely for the majority of the time after this, it was great to get some ‘face time’ right away, and I think the best projects start off this way, if it’s possible.

02

Day 3: Notes Write-up / Moodboard

Back home, I wrote up the notes I’d made from the previous day’s meeting and presented them as an image in the browser, using some subtle layout and colour choices to make the notes more readable than just one long text document (of course I do these things; I’m a designer). So that the team could easily look over everything I did in the following days, I set up a simple client area that would list each stage in the process, with links through to the relevant assets.

Using the notes I’d made and some documents Dan had sent me (Decode had already performed some research of their own and had identified many key brand values before I arrived on the scene) I then summarised the values and visual style we’d discussed in a couple of brief sentences, and put that text into a PSD file. With that there to refer back to constantly, I then filled up the rest of the file with images I’d collected online. The images were gathered and collated with LittleSnapper (using ones I’d collected over the previous few days and ones that were already in my library) and most of them came from sites I’m subscribed to, or inspiration services like the Img Spark. However, even though I’d got the images from the web, very few of them were of actual web sites. I found that most of the brand values and aesthetic style we’d established were found most commonly on food packaging, so that made up a large portion of the imagery I collected. From the very beginning, we all agreed that we should be looking outside of the web for inspiration, espcially as — at this stage, at least — we were concerning ourselves with the brand as a whole rather than anything specifically related to the final website.

03

Day 4: Pigboard / Colour Palettes

As the brand had to include a pig (you’ll find out why on Tuesday), it made sense to look into existing images of pigs; specifically illustrated ones rather than photos. Of course, the choice is somewhat overwhelming, but it made it easy to fill up a ‘pigboard’ (think moodboard but with… well, you get it) with illustrations simply by visiting a few stock imagery sites and conducting a simple Google Image Search. I tried to capture as many styles as possible and identify what we didn’t want to do as well as what we wanted to emulate in some way. It’s vital that the pig in Project Truffle doesn’t look like all of the other ones out there.

04

05

Day 5: Initial Pig Sketches

With a fairly good idea of the style the pig should follow, I start sketching, keeping it very rough at first but then refining the best drawings ready to scan. Once scanned, I made a few subtle adjustments to the linework and added some basic colour, just to give the characters a more tangible form (and so that they looked more presentable for the Decode guys!).

06

Day 6: More Sketches / Testing Typefaces

I’d drawn pigs in a variety of styles: some that looked like cute, traditional piggy banks and others that were a bit more modern and a bit… well… weird. Eventually we narrowed it down to two specific styles: contemporary / edgey vs. traditional / cute. The team chose the more contemporary style and now I had a rough character to flesh out.

08

Also on day 6, I selected a number of potential typefaces to use in the logo and for the brand as a whole. When designing type-heavy logos, I usually customise the type manually, but I almost always start off with an actual typeface to use as a base. I picked several from my own font library and several potential typefaces that would need to be purchased, using the ‘test drive’ interfaces on foundries’ websites to generate sample text. As with every other stage in the process, I combined them all into a PSD file and exported that as a page that could be easily viewed in the browser.

Day 7: Refining

The guys at Decode gave me their feedback on the typefaces, selecting the ones they thought would work best. I then chose my personal favourites from those until we’d narrowed our collective choices down to just three: FS Lola from FontSmith, Archer from H&FJ, and Bree from TypeTogether. All absolutely gorgeous typefaces. Such a difficult choice!

10

As we’d also settled on a style for the pig, the next step — to ensure that he was versatile enough — was to test him out in a variety of different poses. This helped identify a number of key points (like the fact that he needed arms, which we’d initially tried leaving off, cruel gods that we are) and also enabled me to refine the way in which I drew him.

09

Day 8 (today): Bringing It All Together

Based on more feedback about the last set of drawings — essentially what pose would be most suitable for the logo — I drew a new version that was not only neater, but combined two poses from the previous sketches. Once Dan and co. approved the black and white scan, I set about tidying up the linework and adding colour. Although neater than previous sketches, the final pig is still intentionally ‘messy’, because that hand-drawn, ‘authentic’ feel was something we decided should definitely make it to the finished article, as it gives him a bit more personality. The linework is the main thing behind that, but I used rough brushes for the shadow layer, which help define the pig’s form at the same time as reinforcing the sketchiness.

11

Now I’m in the process of pairing the type and the logo and checking that they work together; basically getting ready to ice the cake.

Day 9 (tomorrow): The Holding Page

Tomorrow will complete the branding process, as I perform the final tweaks to the logo and design a holding page around it. I think it’s important to not be tied to this version of the logo too much, though. Although we all collectively feel that it achieves what we set out to do, we have the luxury of the Christmas break to sit on it for a bit. As we won’t be producing any printed material for a while yet and only have to worry about the web, we’ll be able to make tweaks in January if we feel that the brand needs it.

12

See you on Tuesday!

Posted by elliotjaystocks on Thursday, December 3rd, 2009 at 5:37 pm and is filed under Brand Me!. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

Comments

  1. Great post Elliot! Looking forward to seeing how the brand designs turns out :)

  2. Great blog post, pigs have always been my favourite animals, fab illustration work Elliot!

  3. Very nice work Elliot. It is refreshing to hear about clients who respect and encourage creatives to be creative.

    Project Truffle probably doesn’t have anything to do with the fungi per se, but pigs are the best truffle hunters … So, my guess is that the pig represents “finding” the best gourmet foods?

  4. Or, perhaps I should have read the blurb in the left column. Are they taking on Mint?

Categories

Latest Comment

“We had a very similiar situation whilst designing the EmptyLemon idea. The most horrifying part of the whole process is waiting to find out if your research is accurate and people actually share your visions. Look forward to finding out what you are up to...” said Will

Tweets

Join the conversation by including #projectTruffle in your tweets!

Blog Lettuce Tomato is proudly powered by WordPress. Design by 1721. Started life Starkers.