The making of Creative Briefing

Written by Verne on February 19th, 2008

Over the Christmas holidays is when it first struck me that maybe it was about time that Creative Briefing got a little bit of a face lift. It took me awhile to really set this thought into motion but when I finally did, the ideas started flowing. I made sketches and mock-ups, and finally after one long and cold December night’s work at the Photoshop factory, I had a new masterpiece. One week later, I hated it. So I scrapped it and started all over again.

Fast forward a month and we’re at last week when I finally launched the new face of this site, which fortunately has been met with a lot of positive feedback thus far. But let’s rewind the tape a bit, and let me fill you in on some of the process that’s led me here.

Creative Briefing could have been turquoise

I was sort of passively contemplating what I wanted to see in a new layout throughout December and had began sketching out some potential approaches. Here’s a page out of my notebook showing some of my thought process:

Creative Briefing Sketches Round 1

Note that I use a notebook and a smaller notepad to doodle on. There’s no real logic behind which one I use for sketching aside from the fact that the smaller pad has lighter lines and thus makes it easier to draw in details. I’ll usually sketch out a cleaner ‘good’ copy of a layout before opening up Photoshop, as it helps me visually organize what I need to produce.

So from these sketches, I got to work. Here’s what I thought at the time was the final new-layout-to-be.

Creative Briefing Draft #1

As you can see, it’s quite different from the site you’re looking at right now. I don’t think it’s atrocious, but it’s also not that great. I was ambitious to work with colors that I don’t normally get to play with and I had tried combinations of browns, greens, and oranges, and finally settled on a shade of turqoise. I hate turqoise by the way.

So this was a case of creativity getting to my head and making me ignore the fundamental things that have brought me success in the past. Fortunately I was too busy at the time to move any further beyond Photoshop, so I didn’t end up wasting anymore time on this failed first approach. One week later, I realized that the look of the site just didn’t fit into the brand that I had created over the last 6 months. It didn’t fit into my brand. And this being my site, that aspect was important to me.

There were however a number of elements that I did like in this first draft. The serif/sans-serif font mix was intriguing and the sketches at the top added a hint of personality to the site. Clearly, both of these elements made it into the next round.

Back to the drawing board

It wasn’t until the end of January when I regained some time and motivation to revisit the project. And by then I had decided that simple needed to be a prevalant characteristic in my new approach. Moreover, the old site was getting very cluttered with lists upon lists just spewing over the edges of the double sidebars. That made me realize that a core priority in the redesign would also be to refocus readers’ attention on the actual content of my blog posts.

Here’s the intial sketch that got the ball rolling:

Creative Briefing Sketches Round 2

And once again, I got to work in Photoshop. After another night’s work, here’s what came out:

Creative Briefing Draft #2

As you can see, the sketches and the serif font made its way into the new design and really gave the extra ‘umph’ it needed.

Fonts

The main font that I used on the new design is called Georgia. It is a cleaner and more elegant web-friendly serif font for those who like the classic look of New Times Roman without the haunting memories of it being a default font for Microsoft Word. Georgia is used for the site’s main heading, the article titles, and content.

Georgia

The secondary font being used is Arial, a sans-serif font that, along with Verdana and Tahoma, is probably one the most commonly used web fonts on the internet. I used Arial mostly for the sidebar content and headings, using combinations of bold upper and lowercasing to give some contrast to the thinner and softer Georgia.

Arial

The Sketches

The sketches idea was inspired by the actual small notepad I have on my desk that is always within arms reach. As noted above, I use it frequently to jot down ideas or quick lists and of course doodle. I had designed the graphical sketchpad for the first design and liked it so much that I just had to put it into the new one. Here’s how it got put together:

The Creative Briefing Sketchpad

Left to right: the actual notepad; a scanned and photoshopped version of the notepad; the final work that sits at the top left of the site.

It took a little bit of Photoshop work to put it together and I’m thinking of writing up a separate tutorial on how I did it. But generally speaking, I scanned a sheet of the notepad in, cleaned it up, shortened it, and laid some scanned sketches on top of it. And voila!

And to add a little more fun to the site, I’m going to be updating the sketches on the top left of this site every few weeks with some more current doodles. It’ll be like the Twitter of sketches. Look out for it!

The Favicon*

It’s all in the details! For the truly observant, you may have noticed that the site’s favicon also changed with the new design. Here’s what it used to look like: Creative Briefing favicon v1. And here’s what it looks like now: Creative Briefing favicon v2. The new favicon was yet another element that was designed based on the notepad concept. Here’s a closer look at how the 16×16 icon was produced:

Photoshopping the Creative Briefing favicon

The bright green pixels correspond to the spots that will be transparent on the favicon. I used an application called IrfanView to help me create the actual .ico file from a .gif I created.

* For those who are unaware of what a favicon is, it is the small icon that appears on the left of the URL in your address bar. It also appears next to the website title in your browser’s bookmarks.

What else is new

Aside from the aesthetic updates, there’s also a few new sections of content that are new to this site. You can find links to all of them along the top of the site.

Featured Posts

Here’s a collection of my best posts. It’s not a popularity contest where posts are automatically added to this section if they break X number of comments. Instead, these posts are the ones that cover topics that I think would be most interesting to the readers here and that also best capture the spirit of this site. In other words, if you’re new here, you should check this page out first to see what I’m all about.

Check out my featured posts now

Archive

I’ve always found it sort of annoying to have to browse through pages and pages of full articles in order to get a glimpse of some of the older posts. So I’ve created an Archive page that hopefully makes it easier for people to get a one-page snapshot of what I’ve been writing about lately.

Check out the archive now

Contact

Look at that, you’re allowed to speak to me off this site now. Actually, I noticed that I was doing a poor job of letting people get in touch with me and ask me questions with the old design, so I put in this friendly form to hopefully change that. A few hours into launching the site, I already started hearing from some of you, which was really nice. I encourage everyone to use the form to contact me, even if it’s just to say “hi”.

Get in touch with me now

Did I miss anything?

I’ve tried my best to cover every aspect of the redesign in one massive (and hopefully interesting) post. But if I’ve missed anything, whether it be a new feature I’ve neglected to mention or something that I didn’t explain clearly (I can do that sometimes), please let me know via a comment or the Contact page.

I hope you’re all enjoying the new site and that this post has enlightened you on the process it took to get it to the the state you see before you now.

9 Responses

  • Sean

    I’m a new visitor to the site, but I really enjoyed your article. I hope you keep up the good work and keep posting quality articles like this!

  • Verne

    Thanks Sean, glad to have you on board! Looking forward to seeing your around here!

  • Jacob Cass

    Just found your site, I will give you a bit of promo in the weeks to come to help you get some visitors. You may also be interested in the graphic design group writing project, the link is in my name…
    Good luck and all the best, if you ever need anything just give us a yell.
    Jacob

  • Verne

    Thanks for the kind gesture, Jacob, I really appreciate any extra help. I checked out the Graphic Design Group Writing Project and I have to say that I am tempted to get in on it. Awesome prizes too – I’m pre-drooling over the guitar! I hope the project is a big hit.

  • LaurenMarie - Creative Curio

    Hi Verne! I’ve seen you around, particularly on Tara’s Graphic Design Blog, but it’s been a while. I really love your redesign. Everything is so clean and extremely easy to read and navigate. You did a great job with this! I liked the turquoise one you showed, too, even if you didn’t :P

  • Verne

    Now that I see your avatar, I know I’ve definitely see you around as well Lauren (I guess the internet isn’t as big of a place afterall!). I admit, I have fallen behind in my blog reading/commenting so it’s been a while since I’ve been able to get in on Tara’s discussions.

    I’m glad you like the new design – even the one that didn’t make it – and I hope to see you around more often!

  • Ross Hill

    That’s really interesting, I’ve just done the same with the new Hatchthat.com design – scrapped 90% of the first design because it just wasn’t standout enough. Medium/large Georgia is really getting popular lately.

  • Mokokoma Mokhonoana

    I’m a fan on clean + simple design… Well done!

  • Akhil

    It has been a long time since I’ve read up on your blog but I’m also a fan of the new design, though personally the font size is a bit to big for me. lol Great job overall though!

Leave a Reply