Library Garden

How to solidify your visual brand and identity

October 2, 2009 at 10:00 am lemsy 12 comments

Hello, friends.

My name is John LeMasney, and I love libraries. I’m the newest blogger on Library Garden, and I’m thrilled and honored to be here.

I’m a technologist,  father,  open source advocate, artist and designer, and I’ve been known to wax poetic about beer from time to time. I’ve been told by Ed Corrado, one of my favorite librarians, that I should start looking at an MLS. I told him I’d maybe think about it after I finish my Master of Arts in Organizational Leadership later this year.

I was invited to join Library Garden despite the fact that I have no MLS, I think, because I have a regular beat in the New Jersey library consortia, have many good friends who do have their MLS (many of them co-bloggers here) and I also tend to spend a lot of time in libraries.

As the newest blogger for Library Garden, I wanted to give a kind of gift to my fellow bloggers in the form of a new header for the blog. Peter Bromberg’s original header was simple, elegant, and straightforward, but he asked me if I wanted to take a shot at making a new one. I have given workshops on design for Peter, and others here, so I figured that it would be a good way to show some of what I know about design, as well as present a thank you gift to the group.

My process for design usually follows the procedure I’m about to record here, and it is how we came to our new header you see in our blog. You can click on any of the images in this post to see a full sized version of the image. I encourage it for the alternative headers, since it’s difficult to see the detail in the thumbnail.

Using the open source illustration application named Inkscape, I show the name of the organization in a list of fonts for the stakeholders that I think speak to the feel of their brand. I usually present a list of at least 5-10, but it’s not a set number. In this case, I shared the following image, which went a little further than simply listing fonts and had progressed to forming word-form relationships, which is typically a secondary process. Since I had access to the original header, I included it for comparison. No kerning or other fine tuning is done at this stage:

Possibilities

I got the feedback pretty quickly that people preferred the second and fourth design. They liked the boldness of Library in #2 and the finesse and softness of #4. People were positive, respectful, and kind and that always makes for a better design project. They said they liked the font used for garden in the 4th option, and might like to see it paired with other fonts.

I wanted to respect Peter’s previous work, celebrate the brand that is Library Garden, and above all respect the opinions and feelings of the stakeholders. I hope that I did that, and I am very happy with the work that we did to come up with this solution together.

In order to clarify what I was hearing, I sent out a revised picture of three options in which the less popular options were removed and a new option was generated making use of what was learned in the first round. That looked like this:

Possibilities refined

This set brought the garden font into focus as a definite, while showing that the great Gill Sans, one of my favorite fonts and shown in the first two options, as well as in the final result, had the versatility to provide the boldness that people were looking for in the third option.

Once we had our wordmark it was time to begin developing a background for the header on the blog. I decided to emphasize the garden aspect of Library Garden, relying on luscious foliage, summery greens, and deep layering.

I wanted to try to evoke the depth of information and directions and ideas available at your library. I wanted to show people the complexity and richness of their options when they walk in and sit down and talk with a reference librarian, for instance. I also wanted to try to celebrate the work, history, and richness of my fellow bloggers on this site.

So, if you feel that the work I’m about to show you is kind of busy, keep in mind that complexity, richness, layering, and depth were my goals. I didn’t want you to look at the header so much as dive into it.

With that said, let’s look at how the first header option came about. Note that at this point, I didn’t intend any longer to edit the text based information, and so I converted the text to paths in Inkscape. This makes it easier to nudge and relate letterforms and other elements. I tweaked the wordmark we collectively chose by fixing the kerning (space between letterforms) and exported it as a PNG in the exact size of Peter’s original header.

Wordmark Final

I opened up the GNU Image Manipulation Program (GIMP) and imported the wordmark, and then I added 3 transparent layers, named close, middle, and distant, so that I could add my visual elements in a layered way so as to build depth. I also duplicated the wordmark layer so that I could create a blur based glow effect to make the workmark pop up from the busy backgrounds. I saved it as a native GIMP XCF file to preserve the layer work and named it header template.xcf. Then I saved it as header option 1.xcf and began working on the first header possibility. I started with the template each time so I wouldn’t have to start from scratch each time. Templates are great, but I encourage you to roll your own, rather than relying on someone else’s.

Header Option 1

In retrospect,  Option 1 is seen as the most tame, minimalist, straightforward, and quiet. None of these are bad things. It was early, easy play with greens and foliage brushes, and was intended really just to get my ideas out of my head and onto the screen. I worked back and forth between the layers, adding blocks of color in the deep layer, and thinner, more crisp elements in the foreground. Most of my objects and shapes are available to me as brushes I used from online brush sites such as those I bookmarked here. I thought of the process as though I was building a garden landscape scene, starting first with broad deep dark strokes, then building on top of that with thinner, more careful, contrasting details. My palette for this option was deep grass green, grayish midnight fields, moonlit patches, and a bright orange for contrast. People thought it was okay, but they liked the second option much more. So much more in fact, it almost got the nod.

Header Option 2

This one brought in much more of a Chinese influence — It was very much like option 1 in that it was mostly greens and greys, but it allows the eye to focus on the bright beautiful sunny flower peeking out, and is balanced nicely with the red signature stamp, both of which are parts of free brush sets, as well as most of the tree and foliage shapes you see. I would say that this option was a favorite for many.  As I finished each option, I’d send out an email to the group asking for guidance and feedback, and they didn’t disappoint.

Header Option 3

Options 3 and 4 were simultaneously my favorites and the group’s least favorites. They consistently ended up at the end of the list of one’s preferences. They are both quite busy, very technology imagery driven, go deeper into what I think is an modernist color theorist’s palette that’s I’d call sporty, and are energetic to the point of dizziness.

Header Option 4

I love them both, but they were obviously (now)  not the best choice for representing this group. I think I like their painterly style, deep layering, and rich color, but they’re not especially garden-y.

Perhaps the most important thing in design is knowing how to listen to your stakeholders, and being receptive to the survey even when it forks with your own feelings. I’m glad I made these options in order to provide contrast, offer other options, expand expectations, and most of all, in order to go a little too far. It’s hard to know when something’s right unless you’ve seen it go wrong, or at least wrong in the eyes of your stakeholders.

After hearing feedback at each new option, I learned that these people wanted clarity, simplicity, legibility, some energy, some calm, garden-ness, lush vegetation, and that no matter what, these were all okay — they’d all do the job. That’s reassuring when your client says no matter what, they’ll be happy. With that, I tried to pull all of this together in a final option, which ended up being the one that took the prize.

Header Option 5 with Chinese character

The only concern was that no one, including me, knew what the block and character in the lower left translated to. As a result, I decided to remove and replace them instead of potentially upsetting someone with the interpretation of the character. I replaced it with a postmark from a set of very cool stamp related brushes, and soon after, the header was in place.

Header Option 5 with Postmark.

I want to take this opportunity to say thank you to my fellow bloggers for their patience in the process, for the opportunity to collaborate and create together, and for the opportunity to have another great place such as Library Garden to share ideas. I feel very welcome here, and I’m looking forward to my our next post.

Submitted by: John LeMasney.

Entry filed under: Collaboration, Design, Fun, Library Garden, Marketing. Tags: Gill Sans, GIMP, Graphics, Inkscape, Library Garden, New Jersey, Open source, Peter Bromberg.