Pagelime Logo Redesign

08Oct09

Last night the new logo went live, so I can finally write about my redesign for the Pagelime logo. Pagelime

is a CMS that allows you to update the content, images, and documents on your web site without installing any software. All you have to do is add the ‘cms-editable’ CSS class to any part of your site, and we host the application that edits your site.

(http://pagelime.com).

Here is the before and after:

(Click for a large .png)

Points of Improvement

When thinking about the redesign, one of the main things I considered was effective use of visual space. Since it will be used mainly on the web, I wanted it to make the best of where it was placed, be visible, draw attention and be recognizable/brandable. The previous logo used some random Japanese san-serif that came in only a view weights, it wasn’t very good reversed on black because it was so thin and could get lost on a page if the logo (we’ll call them wi-fi swooshes, swooshes for short) swooshes weren’t present with it. Spatially, the logo as it was, wasn’t really effective except in a banner or reconfigured with the swooshes underneath the type for a horizontal orientation.

The Brief…sort of.

Since I didn’t really have much of a design brief to go off of (I was given fairly free range) when I set out to do the redesign, I formed a mini, sort of checklist/brief to organize what I wanted to accomplish. It was something like:
1. Use a typeface that has a large family with good variable weights, this is so Pagelime could further be able to brand its documentation and print materials by giving them a face that could be used in multiple situations
2. visual scalability, since this was mostly to be used on the web it definitely needed to work at small sizes (aka resized on iphone screens), this actually presented the biggest challenge as scaling the kerning became an issue, at small sizes a normal, kern looked correct but at larger sizes, it appeared to be a little off between the l and i due to the small descender/terminal on the lowercase L creating extra negative space in the counter between the two characters. In the end, I went with a slightly negative kerning that was just enough to create space between the two characters at small sizes. Ideally, there might be two versions, one for use at sizes greater than X pixels and one for use less than X pixels, but to simplify its use and creation, I just kerned to basically “the line of best fit.”
3. have a brandable graphic element aka mark, although a strong typeface is key and can stand alone as a brand, having a graphic element was going to help add color and bring in another usable element, besides it needed a lime somehow.
4. strong visual presence, basically, that means I decided early on I was going to use a heavier weight for the type, I wanted to not only give the logo more weight and presence, but distance myself from the previous logo.
5. make a logo that is easily reversible, meaning, a logo that could be put on black, Pagelime has a few screens that use a black background and most of their dashboard used black in the modal boxes.

That’s kind of it, and this is what came of it.

Typography



image source: Wikipedia

For the type, I was definitely feeling a sans-serif, although I tried some serifs and even a few display fonts (I had some fun with FFCutout, but in the end it was too fun). To start, I’m a big fan of realist/neo-grotesque geometric/gotham-ish fonts, Gotham HTF and Interstate being two of my favorites, however I felt they weren’t playful enough to be used in this application, Gotham was a little too geometric and Interstate didn’t really work either. However, I remembered another font that I’ve started using a lot recently, FF DIN, the remake/expansion by Dutch designer Albert-Jan Pool of DIN 1451 which was largely used (early on) as a metal type on signs and trains in German/Europe and also mandated to be used in places of technology, business and traffic, sort of like a German version of Interstate. Although it shares a lot of the same realist qualities of Interstate and some lines of Gotham, it has more curves to it that make it a bit more playful and accessible. The curves also help it work with the organic shape of the lime. One place you might recognize the face from is the JetBlue wordmark.

Comparison

Here is an overlay of the two logos to show use of space and weight changes. Although the vertical height is a bit larger, the horizontal density is much greater, with the heavy type weight it give a really solid look to the logo.



Meet the Family

I then adapted the logo as a full set, including single color and greyscale versions for print use. Here is the full set/mood board.



Make sure to click through, for some reason the way this image is being resized makes all the colors look off.

And that’s really it, I’d love to know what you think of the redesign or if you have any questions or other comments.

Let me know in the comments or reply to me on twitter here.

Filed under: Announcements, design   |  1 Comment
Tags: adobe illustrator, brand, cms, computers, dc, design, LinkedIn, logo, mark, pagelime, redesign, technology, vector, website