Like many a designer looking for the frequent digital distraction, I’ve been creating some icons for the Carsonified sites. Earlier in the week, almost right after the iPhone / iPod Touch software update was announced, Dan was on the case and his walkthrough was a more extensive guide than the one on the Apple Developer Connection. Shortly after, Nathan experimented with larger image dimensions than the 57×57 recommended by Apple, and – after a few experiements from and on behalf of readers – found that 60×60 was the ideal size. Huzzah! Cue a lot of happy web designers, all making shiny new icons for their sites.

However, this was only the first stage. Drew came up with a bookmarlet to address the fact that we wouldn’t normally be able to edit icons for sites we don’t manage, only to have it improved upon by Rob to override websites’ existing icons (and then re-tweaked by Drew). Then, just when we thought we’d achieved the highest possible state of ecstatic icon-induced nirvana, Cameron modified the bookmarklet even further and made the whole process a doddle for the average user. (His article is also a rather nice summary of the work done by others.) Finally, we’re now seeing all kinds of sites pop up (such as Andy’s iclypso.com) that offer a number of icons ready for the end-user to install.

Phew! Now that I’ve worn myself out with a blow-by-blow account of that week – which will no doubt be out of date by tomorrow – I thought I’d show you the Carsonified icons (styled here so as to mimic their final rendering on the iPhone / iPod Touch) that I’m in the process of rolling out. They should be on all of the relevant sites by the end of the week.

It’s been a while, hasn’t it? Sorry guys – we’ve been so busy! The rebranding is now heading towards its very exciting conclusion and we’re going to show you where we’re at…

Part 11a:

Part 11b:

We’ll be back in a couple of days’ time with more (perhaps the final) updates, so stay tuned!

I’m going to be speaking at the ‘iDesign: design for life’ event next Tuesday (18th), and the organisers have given me two free tickets to offer as a competition prize. The event is part of the London Design Festival and focuses specifically on the digital world; details are here, here and here.

To enter the competition, simply leave a comment on this post on my site. That’s it! On Friday I’ll randomly pick two comments’ permalink IDs and and announce the winners on that post.

By the way, the prize includes the free ticket only (normal price £55) and no travel expenses or anything like that. For that reason, it probably only make sense for UK-based readers to apply (unless you’re feeling rich), but if you’d like to enter on behalf of a friend (for instance, you might live in the US but your friend is in the UK and able to attend), that’s absolutely fine – just leave their name in the comment.

Everyone liked the direction I started to explore with the ideas you can see at the end of the last post; the bolder, more immediate direction was starting to remain legible and recognisable at smaller sizes, and it was less ‘fussy’ than the more insignia-like ideas. However, a couple of the guys thought that the insignia idea hadn’t really been explored fully yet, so I returned to using a more prominent flourish and attempted to wrap the whole thing in a more visible ‘shape’.

I wanted to keep the decoration to a minimum because I felt that too much of it would simply push the logo towards something too antiquated; it was all about getting the balance right and evoking a sense of classic cool blended with forward-thinking modernity.

In an attempt to reference the ‘home-made’ approach, I carried forward the brush idea from the previous designs and I think this mix of the three elements – the modern type, the classic flourish, and the hand-made paint – has really started to form the strongest ideas so far.

Continue reading to check out the images. As always, you can see the full-size versions on our Flickr account.

Stage 1

Stage 2

There’s still work to do, of course. Let us know your thoughts!

Sorry for the shortage in blog posts recently, everyone; let me get you up to speed with the development of our new identity.

The insigia examples went down a treat and I think we all learnt a lot about the elements we wanted to include and those we wanted to avoid. In essence, we wanted to avoid the old fashioned, coat-of-arms kind of look. At the same time, we wanted the logo to appear modern without looking like we’re trying to be futuristic.

With the team hungry to see something bold, I returned to Illustrator and picked out a few font options I thought it might be worth pursuing. After narrowing down the fonts, I did a quick bit of kerning on each one and printed out a few copies. I then headed down to the river for a bit of quiet time away from the computer and began to sketch over the print-outs…

Stage 1

First sketch of the day. Try and ignore the larger sweeping lines – I was trying to find a flow.

It’s all gone a bie 1920s. I like the way the N acts as a divider, but is it necessary? Trying to be decorative in an exuberant way. Don’t think it works. Hmmmm.

This Mucha-inspired flourish adds some classic cool without being too over the top. Its femininity is a nice contrast to the masculinity of the text. I like this one a lot, although it needs tidying up and I’d lose the swash from the top of the N. The main one – underneath the N – was designed to separate the ‘carson’ and ‘ified’ but actually I think it looks unbalanced and would benefit from being in the exact middle of the logo. Anyway, Mucha’s style is widely considered to be a ‘classic’ of art and design, so alluding to that with subtlety would certainly not be a bad thing.

I tried the flourish on the ‘Victor’ font, mirroring it for the top. I don’t think it works, though: it’s gone a bit tattoo-y.

Experimenting with an offset decoration in order to emphasise ‘carson’ over ‘ified’. The imbalance doesn’t work, though.

Once Illustrator-ified, I’m going to try masking from the curves to make the typemore interesting. It’ll look better than this!

Light bulb? Ideas? Nah.

Too cartoony, but I think we could use the completely hand-drawn approach in some circumstances. In fact, I’ve been thinking that we could always let the public ‘remix’ the logo when it’s completed so that we could have different versions of it on different pages of the site, similar to what MTV did. Could be cool.

I’m going to re-use this hatched background against other instances of the logo.

Stage 2

I photographed the sketches and started modifying them back on the Mac. The hand-drawn stuff was showing some promise but I wanted to balance that out with something bolder, so I started experimenting with a ‘painted’ background to the text, letting the type stand out more on its own. This, I think, is where the ideas started to get a lot stronger…

The Mucha-esque logo, now Illustrator-ified.

… and experimenting with a slanted ‘ified’.

Trying it without the flourishes and adding some watercolour-esque textures and colour.

Experimenting with a ‘brush’ effect. Although it’s obvious that it’s a digital (rather than a real) brush, I think the balance between the two worlds is a good one.

More clarity with space on either side.

The heavy, stroked text might be a bit surfer-y, so here’s Existence again, this time with some subtle ‘classic’ decoration to contrast the modernity of the font. So here we have modern (font), classic (flourish), and informal / hand-made (brush).

Changing the flourish to black adds another ‘colour’ and makes it less in-your-face.

Might as well try the decoration without any background. I like it (although ignore the messy execution for now – if people think this avenue is worth exploring, I’ll tidy up the flourish so that it flows with (and from?) the letters.

As we’re also after a simplified version (most likely for small print), something like this (although with a C reflecting the final font we choose) could work quite well.

An approximation of how this logo idea might look before colour is applied.

… and a pure black & white only (apart from the decoration) approximation.

What do you guys think of these one?

While we prepare the next post, we thought you might enjoy a light interlude of some more recent sketches. Click the images for their full-size versions.

General rough ideas.

Among other things, a study of the primary shapes that make up the coat of arms on our passports.

Drawn on the plane on the way home from Barcelona, a study of our hotel’s coat of arms, a strangely Roger Dean-esque idea of my own, and a prawn with ‘rark’, a fictional affliction that seems to befall many of the characters in my sketchbook. But that’s another story!

General rough ideas.

Some more studies (on the right) of other logos’ flourishes

I went to Spain on the lookout for insignia, and would you believe it: the hotel we stayed at had one! Stupidly, I managed to completely miss it until we were leaving and only managed to grab this card second before we headed out the door…

The other day, I mentioned we’re going to go down a different route with the new logo. That’s not to say we don’t like the one that was developing so far; we just feel it would be sensible to explore as many avenues as possible before going with one idea. Basically, we’re going to return to the insignia idea, which I toyed with briefly before dismissing it as “too authoritative” (see the video in this post). I think I dismissed it too easily, and Ryan had some great reasons for pursuing the idea:

1. An insignia represents quality and the hand-drawn style will reitterate this sense of ‘craftmanship’.
2. Adaptability: We can choose interesting elements to include in the insignia that demonstrate a lot of our core values. We could even change these elements every year or so, just to freshen up the logo. We really like the idea of an ‘evolving’ logo to tie in with the nature of the medium in which we work: the web.
3. An insignia is classic and shows that we’re not going away. We take pride in our work and stand by it.
4. Fun: The various elements in the insignia could be witty or very slightly humorous. This should dispell any ‘seriousness’ usually associated with an insignia.
5. We’re also going to experiment with the idea of a ‘full’ insigina for things like print pieces and a cutdown version that works well in a small size.

So with that in mind, I began a new line of research. Ryan and Gill, on holiday in Greece, had already been inspired by insignias they had seen on a restaurant wall. I found a few in Barceona too, but my main source of inspiration came from one of my all-time favourite books: Tres Logos (published by Die Gestalten Verlag), which I’ve enthused about before. In order to get everyone in the team talking about what they liked and disliked about insignias, I photographed about 90 logos of that ilk in the book and then made a basic web page with all of the photos and spaces for the team’s comments under each image.

What do you think?

… and now for something completely different

After a run of daily blog entries, I apologise for the opposite end of the spectrum you guys encountered the following (last) week; I was on a short holiday in Barcelona. However, a week offline allowed for some much needed breathing space, and with Ryan and Gill on holiday as well, the natural pause allowed everyone to reflect on the logo ideas so far. People got their thoughts down in writing. New ideas were discussed. Older ideas were revisited. The sketch pad filled up a little more. I exhausted another biro. And home-grown graphics from our respective holiday destinations provided some unexpected inspiration.

On Monday we’ll all be back in the office and there’s much to discuss. I’ll aim to post again on Tuesday when these new ideas have become more refined.

As a sidenote (read: shameless plug), I’m going to be speaking at the London Design Festival later this month, so if you fancy coming along, that’d be great! :) Details are here.

In his comment on part 4, Andy Croll raised a really interesting point:

It did remind me of the US university sports team logo thing you often see on GAP or A&F sweatshirts, [and] that kinda nods to a community / all-in-it-togetherness that you get as a sports team

That’s what it had been reminding me of! And I certainly don’t have a problem with that – I think the “all-in-it-togetherness” of that logo style may well have been subconsciously influencing me anyway. The point is: despite bearing some similarities to the Coca Cola, Carlsberg, and possibly other identities that begin with ‘c’, I’m going to run with it for a bit. I don’t think the logo’s criticisms are strong enough to warrant an outright rejection just yet… but speak up if you think I’m wrong!

The next step I took was probably the most enjoyable: I started tracing over a print-out, modifying the type by hand. And it was at that moment that I realised the beauty of a hand-drawn, sketchy, work-in-progress type of aesthetic was exactly what I was after! The images are below; scroll down to the video if you want a detailed explanation.

Basic modification

On the train home, I started drawing over a print-out with some ideas on how to alter the characters.

Hand-traced over the print-out

This one’s with the suggested modifications from the sketch above, but actually I don’t think they worked.

Hand-traced over again but better this time

More subtle refinements. Note that I’ve changed the swash from the ‘n’ to the ‘f’, despite what I said before about not wanting to do that. Check out the video (at the bottom of this post) for a detailed explanation. Also, there’s a larger version here.

Vectoried version

This adds a bit of neatness while retaining the hand-drawn quality of the previous image (this is still rough, by the way – it was a quick experiement with Illustrator’s ‘Live Trace’ tool). There’s a larger version here.

I’ve split the videos for part 4 into two: 4a explores what it means to be ‘Carsonified’ and summarises the thoughts from yesterday’s meeting, and 4b is a screencast about one particular logo idea that’s starting to stick…

I hope you’re still enjoying these, guys. Your comments so far have been extremely helpful – thanks so much – so please feel free to keep expressing your opinions!

Part 04a:

Part 04b:

After recording yesterday’s screencast, I knuckled down to some more logo ideas, refining some of the font manipulation I’d started on Photoshop and Illustrator. I’d begun doing this after hand-sketching yielded poor results, but after a while the kerning and of letters and tweaking of ascender heights seemed a little empty: it was just too precise for this early on in the process. So I went back to my notebook to get a bit more freedom and perspective…

Drawing in my trusty book offered a nice change from the computer, but having the computer there was still too distracting, so I took a stroll to our local park and sat by the river. No digital distractions – just a pen, paper… and some beautiful scenery!

The new environment helped immediately, as did the inspiration from a great book I took along with me (ok, one distraction!): the excellent Tres Logos, published by Die Gestalten Verlag. So today I’m posting some of the drawings, and although they’re rough – very rough – I’d love to get your thoughts on which ideas could warrant some further investigation. In the screencast below, I’ll take you through some of my own thoughts…

As the sketches lose some of their clarity in the video compression, I’ve posted some of the scans to our Flickr account. Click on the preview images below to view the full-size versions.

Ok, this is a proper screencast this time! :) In episode two, I discuss logo inspiration and talk through a few examples from LogoPond. This is for the benefit of regular viewers and the Carsonified team – I never knew screencasting could be so useful!

Well, you’ve all read about our decision to rebrand Carson Systems as Carsonified; now the process begins! Harking back to our ‘barenakedapp’ days, we’ll be documenting as much of the creative process as possible and showing you the project as it develops along the way. I’ve recorded the first of several screencasts (well, videos) relating to the project, so hit the play button and leave us your comments!

(Apologies for the low sound levels, by the way…)

It’s a rare occurrence when so much excitement can be produced by the humble bookmarklet, but in the last two days not one but two of these little gems have caught my eye and stolen my heart.

XRAY

Web designers and developers the world over have long been fans of browser plugins that reveal information about the page and – more specifically – its document structure; I don’t think I need to mention Chris Pedrick’s ‘Web Developer’ extension for the main Gecko-based browsers.

But for pure simplicity’s sake and the advantage of some rather lovely UI design, XRAY gives you the power to view any page’s box model simply by clicking a bookmarklet and it has the advantage of working in Safari, for those of you who’ve felt left out of the Web Developer extension party. (Incidentally, Jon Hicks provided an excellent round-up of development plugins for Safari a while back.)

[ westciv.com/xray ]

Microformats

Mr. Hicks also vented his frustration at not having a Microformats plugin for the Apple browser, and once again it was the bookmarklet that came to the rescue, this time in the form of the aptly-named ‘Microformats’ by Remy Sharp. Again: elegance, simplicity and functionality all rolled into one tiny but tasty package.

As with XRAY, the Microformats bookmarklet allows you to view and download any microformatted information embedded in the page. Great from a user’s point of view, but also great for testing your microformatted markup!

[ leftlogic.com/lounge/articles/microformats_bookmarklet ]