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:
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.
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:
And once again, I got to work in Photoshop. After another night’s work, here’s what came out:
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.
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.
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.
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:
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!
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: . And here’s what it looks like now: . 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:
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.
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.
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.
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”.
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.