Tag: Branding

NCCC part 5: All the good stuff

Since finalizing the NCCC logo, I’ve been shooting things over to Rusty as he needs them… digital files for t-shirts, hats, the outdoor sign, fliers, and more. It’s been more than gratifying to see him post the physical results via his Instagram and Facebook pages. Given the logo’s humble beginnings and the challenges I had with the figure of the climber, I’m really pleased with how the final logo and related “good stuff” turned out.

Just to give you a sense of the gym itself: The climbing walls are painted red, white, and blue, and colorful grips give the entire place a fun, vibrant feeling.

nccc16

Staff t-shirts and customer hats and t-shirts; flier, business card, and rack cards below:

nccc17

The outdoor sign got a font change so that the words were larger and made better use of the sign area.

nccc18

Finally, I put together a simple one-page responsive web page to use until Rusty was ready to figure out what to do for a web site.

web site

If you’re in New Hampshire, be sure to stop by and check them out. Congratulations to Rusty and the rest of the crew at North Country Climbing center!

Advertisements

NCCC part 4: Finalizing the logo

nccc10

Rusty put the two versions of the logo that I had provided to a vote, getting feedback from everyone that he could. It was a really tough decision, because the girl looked more dynamic and interesting (especially to climbers), but some people (generally non-climbers) also said they thought she looked unstable and unsafe. Rusty wondered if I could edit the girl to have her foot up on the cliff, and I ended up trying and deleting some pretty awful attempts. Rather than admit to my mediocre figure drawing skills, I finally said that putting her foot up on the cliff would result in her back being straight or rounded, which would lose some of the curves that made the image look more dynamic to begin with. We had several skype conversations going back and forth on this, scouring the internet for examples of photos that looked dynamic-yet-stable, and then in the middle of that, Rusty sent me photos of the completed walls:

nccc12

I tried something completely different, but Rusty didn’t love it (even when I suggested that we use rainbow colors to make it more exciting – maybe I should have suggested adding kittens!).

nccc11

With the grand opening weeks away and signage yet to be ordered, Rusty pulled the trigger and picked the girl. I offered some color suggestions based on the red and blue color scheme they were using for their walls:

nccc13

Rusty decided to use different colors depending on the application. He also asked me for a centered version, as well as a graphic with the tagline over the logo:

nccc14

nccc15

Then it was time to pull together the files for the t-shirts, sign, fliers, and all that good stuff.

NCCC, part 2: sketching and more sketching

NCCC original logo

Armed with a detailed design brief and the logo created by the previous designer, I spent some time on quick sketches, trying some options with a climber and other more abstract shapes reminiscent of the climbing wall “prow,” pictured below:

Wall shape

I sent Rusty the first batch of sketches: (the first batch did not include the pencil sketches at the bottom of the page – those were some second-round attempts)

NCCC sketches 1

Instead of scanning, cropping, and emailing, I simply snapped a picture on my phone and texted it to Rusty. He responded: “I had been imagining something sort of like the upper left. I like how clean the [the NCCC with the abstract shape] is, but without a climber it’s not clear it’s a climbing gym.” He mentioned that he liked how you could see both sides of the climbing wall in that sketch.

I tried more sketches after looking at various images of people climbing. I decided that I liked having the orientation flipped from the original logo – having the cliff on the right and the person on the left seemed to flow better for me, particularly if there was going to be text on the right side of the logo.

NCCC sketches 2

Rusty said that he liked “both hands on, both feet off.” Time to search for more stock photos and refine my figure. I knew that having a realistic figure was going to make or break this logo. Figure drawing is not really my forte, so I knew I’d have to look up some similar poses of real people to draw from.

Ideas

nccc5

At this point, I felt comfortable enough to start some digital versions. I spent some time tracing and refining in Illustrator, then blocked out mountain and tree shapes. I also explored some different fonts.

nccc6 NCCC 7

Top: Trend Slab. Middle: Modified Century Gothic for “NCCC” and Futura Light. Bottom: Geometric Slab Serif.

But would Rusty like any of these directions? More in the next post…

NCCC, part 1: awesome design brief

My former coworker Rusty Talbot left the web industry recently to pursue a dream – opening a climbing gym in the beautiful hills of New Hampshire. He came to me after his artist was unable to complete the branding project to see if I could take it over. Rusty sent me one of the best, detailed briefs I’ve ever received from a client:

The logo files from the former designer: (The one on the left was the latest iteration)
NCCC original logo

  • What I want to evoke:
    • This is an indoor climbing gym but I wanted to connect with some visual imagery that reflects the location – northern New Hampshire. This is why we included the distant mountains and trees and so forth in the lower right corner
    • I want to make clear that this is about rock climbing – so that’s why we have the silhouette of the climber on a steep rock face
    • If possible, it would be cool to evoke an image related to the gym itself. I don’t think that the logo we were working with actually did this, but I’m attaching a photo showing a small part of the gym as it is being built. I think it is a cool looking feature like the prow of a ship. If you can think of a cool way to incorporate something that evokes this look into the logo, that could be really excellent
      Wall shape
  • What I think of the current elements in the logo:
    • I really like what’s in the lower right corner:
      • The snowy mountains and the trees.
      • If you look closely you’ll even see a version of the NH state symbol – the “old man of the mountain” that was part of a local cliff until it collapsed in 2003 (it’s still the state symbol even though it doesn’t exist in nature anymore, however!).
      • The other side of the mountain that has the old man on it has a ski area, so we represented that with the little ski slope curving down the mountain on the right.
    • I think that the climber and the overhanging wall is ok – and it is nicely evocative of rock climbing in a gym
      • Please note that I’m not that attached to the climber or his/her body position. It’s not as crisp as I think I’d like it to ideally look.
      • Also, I’m not super attached to the way the cliff face looks. It sort of looks like a blob. As noted above, I’d be more psyched to evoke an element of my gym like the prow in the attached picture
    • We toyed with different shapes and sort of honed in on a circular design.
      • If it wasn’t an attached circle, it looked like a monster eating a climber
      • If it was an oval it looked a lot like an eye (especially if the cliff face was a bit steeper and more like a horizontal roof)
      • The shape of the cliff in the larger file was sort of blah so we were moving toward a cleaner circle-style. She hadn’t gotten around to cleaning up the cliff to make it flow smoothly into the circle, however.
    • We toyed with including the wording or lettering in the logo and it didn’t feel like it worked
      • We tried both w letters in the cliff like in the larger file as well as with the words going around it in a circle (“North Country” on top, “Climbing Center” on the bottom)
      • I think that I’ll just want to have the words “North Country Climbing Center” next to the logo or below it or not all depending on the context.
    • Colors
      • I’d like to include color in my brand – but I don’t know how to incorporate colors in the logo (if at all)
      • The walls are going to be a mix of deep blue, brick red, and off white (it’ll actually be light granite). We need to be careful to keep this from looking like an American flag, however!
  • Uses – what I plan to use the logo for:
    •  Signage
      • An interior sign above the main entrance / desk
      • Maybe painted on one of the walls if it makes sense…
      • One big sign out in front of the building (this is the only expensive, hard to change thing that I’ll use the logo for)
    • Website
    • Facebook page
    • Business cards
    • “coming soon” promotional posters
    • Brochures
    • Tee shirts
    • Hats

Note that I’m using the catch-phrase of “live free and climb” (a play on the NH motto of “live free or die”).

Thank you so much for being willing to assist with this. While I do like the direction [former designer] was going in, I’m totally open to your awesome creative ideas.

Rusty was detailed and organized in sharing his thoughts about the existing logo design and what he wanted.

  • Bulleted lists are always helpful to break things down!
  • Rusty gave me some bigger picture branding requirements, explaining his desire to integrate “New Hampshire” and “rock climbing” into the logo.
  • He was extremely detailed with what he liked and didn’t like about the logo, and explained their design process so that I wouldn’t have to reinvent the wheel by trying things that didn’t work the first time around
  • He included all the potential uses that he would need for the logo, which helped to give me an idea of the level of detail (or simplification) that might be needed
  • And of course, he implied that my ideas would be “awesome” and “creative.” Flattery never hurts!

Next: I start sketching.

Nothing But SharePoint Logo Design

Nothing But SharePoint is a joint venture between Jeremy Thake’s SharePoint Dev Wiki, Mark Miller’s End User SharePoint, and Joel Oleson’s SharePoint Land, combining the resources from these three popular SharePoint resource sites into one location. Originally, Marcy Keller was handling their design and SharePoint branding needs, but when she had to step out for personal reasons, they approached Heather Waterman of Synteractive, who I like to refer to as “SharePoint Queen,” for some help with getting the sites finished. Heather decided it would be a good training opportunity for me to get familiar with SharePoint branding, so we took on the task of creating additional design comps and building out the SharePoint sites. (You can read more about the full development process at Jeremy’s intro article – talk about a team effort!)

And along the way, I got to design the logo for Nothing But SharePoint, which is what this post is really about.

I was given full creative license. So I pulled out my sketchbook and started sketching.

This was one of the rare occasions where I barely did anything before an idea that was intriguing popped out to me. I could have spent more time sketching, but I had limited time for producing this logo so I decided to run with it. I liked the repeated shapes between the curvy “N” and “S” and “b” and “p,” so I moved into Illustrator to try to create those shapes. I drew paths with the pen tool and circle/rounded rectangle tool, then stroked them with a thick stroke, playing with the size and widths of the letter shapes:

I wasn’t really loving the curvy “N” shape, though. I gave up my attachment to having mirrored shapes and went with a curvy lowercase “n” shape instead. Much better! I liked the stacked arrangement of the letters – it would be nicer as a compact icon for the site, and I liked the reflection between the “b” and “p.”

Now to find fonts. I tried several approaches with mixing different types of fonts, but I kept coming back to Quicksand (used in all the “NOTHING BUT” text and also in #3, #5 and #6) because of its inherent curvy shapes. To match it, I changed the stroke on the logo paths to have a rounded cap instead of a straight cap.

The others agreed that they liked the Quicksand font, too, so my next step was to tweak the letter shapes slightly to match the logo. I replaced the “s,” “p,” and “n” with my logo shapes (I had to play with the stroke weight to match the font weight), then made a custom “a” shape by flipping and modifying the “p.”

Mark thought the new “a” looked kind of weird, though, so I tried another version that everyone liked better. For the final logo, I also widened the “h” just slightly so that the “s” didn’t look so wide. (In the overlapping version in the screenshot below, #9 is cyan and #10 is magenta.)

The next step was to pick colors. I presented a few options:

The general consensus was c6, and with that, our logo design was complete!

This was a fun logo to work on – not just because it seemed to come together with hardly any work, but because I enjoy the detail work of tweaking letter shapes. There were several people providing input which usually can lead to a “design by committee” situation, but in this case everyone came together to agree on the final version. I’m pleased with the final result and glad I was able to contribute!

Inspiration, version .01, and brainstorming

One of the lovely features of being seven months pregnant, for me, anyway, is that I seem to be unable to sleep more than five hours a night before I wake up and can’t get back to sleep – usually because of an active, kicking baby. Usually I go to bed around 9 (hubby has to get up at 4 to go to work) and wake up anywhere between 2 and 3 am. Saturday night was unusual in that (perhaps thanks to my hour-and-a-half nap) I couldn’t fall asleep; I finally got up and browsed inspirational sites and mocked up a Photoshop-based wireframe.

Some of the sites I looked at:

  • Veerle’s blog
    One of my favorite sites to look at. She has wonderful details.
  • Hicksdesign
    Jon Hicks recently redid his site to be completely flexible and fluid (try resizing your browser window – even the images resize!) as a prime example of responsive web design. Frankly, it’s rather intimidating to think about the code behind it, but very inspirational. While I’d love to attempt something like this and learn a lot in the process, I also know it probably won’t apply well to my WordPress.com blog.
  • SimpleBits
    Another example of responsive web design – resize your browser window.
  • Jaredigital
    I like the clean, light, look and the self-deprecating tone of voice.

And here’s the wireframe I put together:

Some thoughts and notes:

  • If I want this to be a responsive web design example, I’ll most likely want to redesign so that the footer stuff shows up in a sidebar.
  • Maybe I need to be okay with my blog looking different than my corriehaffly.com site.
  • I’m trying out the Aurulent Sans font in this design, as I want to implement some CSS webfonts.
  • I’m waffling between straightforward “Blog” and “Twitter” subheadings vs. the cutesy “Lengthy Musings and Ramblings” and “Brief Random Thoughts.”
  • Brainstorming things to put in the talk bubble for the different pages. I’m still rather fond of my original tagline, “I whip web sites into submission, but I’m nice to everyone else,” but maybe it’s time for a change.
    • I love to design and code. It’s the meetings that kill me. (For the “work” page)
    • Sometimes I talk about myself in the third person, but otherwise I’m quite normal. (For the “about” page)

Pondering a redesign

I’m feeling the itch to redesign my site, corriehaffly.com.

A big part of it is that since I’m no longer solely a freelance designer, I want to de-emphasize my web design services and focus on blog and Twitter posts. I’ve been fairly active on Twitter but not so much on this blog, so why not jump-start this blog by writing about the redesign process?

I took a few minutes during Steven’s snack time to brainstorm some initial ideas:

Content to include:

  • Blog, Twitter feeds
  • About info – currently working at Synteractive, personal info
  • Photoshop book
  • Contact info
  • Work/portfolio
  • Limited freelance availability – rates, info, what I like to do

Other thoughts:

  • How to post past and current work so that it’s quick to update frequently? Link off to another site (maybe blog category or Flickr set)?
  • Can put freelance rates and info as a sidebar on the “work” page
  • Use as a test site to try out latest HTML5 and CSS3 techniques

I also sketched out a quick potential home page layout using Balsamiq:

I’m not really sure about the top header and footer layout yet, but I’m pretty set on wanting the blog, Twitter, and Flickr stuff to be front-and-center on the home page. Will be thinking about this more and looking around at inspirational sites in the meantime!

Will design logo for iPhone

Or, My Fastest Logo Design Job Ever.

My coworker-friend-whom-I’ve-never-met-in-person, AKA SharePoint Queen herself, Heather Waterman, happened to ask me the other day if I wanted her old iPhone since she upgraded to a 3G. After finding out that it would impact us by $30/month for the data plan, I decided to go for it and asked how much she wanted for it. She said, “If you want to do a text logo for ‘Waterman Design Group’ we can trade for the iPhone… something simple.”

I had some time this afternoon while I was waiting for Steven to take a nap and pulled out my sketchbook to play with letter shapes. After several false starts, I started going with a W-crown, thinking of Heather as “SharePoint Queen,” but somehow that just didn’t fit the “Design Group” idea. I happened to notice an earlier idea (upper right) where the D and G shapes reflected each other and came up with the two on the bottom right, which were pretty close to how the final logo turned out.

sketches

Of course I had to mock it up in Illustrator to make sure it would work. I did 1-3 first and sent a quick screenshot to Heather, who happened to be on IM. She liked the D/G of 3 and the W/M of 1. I put those together to make 5, then tried #4 for more of an overlapped “N” shape. We both liked #5 better — I liked that the overlapped “M” could also be viewed as a backwards “N,” so you can either emphasize WaterMan or WatermaN — or kind of have WaterMaN all smushed up in there. Heather has a nice last name for a wordmark!

logo-idea1

Next I tried some color variations…

logo-idea2

But ultimately Heather decided she liked the original black/grey version, so then I played with the final logo with her company name.

logo-idea4

Total time: 1 hour, 10 minutes! That’s what you get when you have a dash of inspiration with fast Illustrator skillz and immediate feedback.

As it turned out, my logo rates compared to the amount she was thinking of selling it for turned out to be just about the same, so we were both very happy with the trade. Now I’m looking forward to joining the iPhone crowd!

Gear Desk Logo Design

A project I’ve wrapped up recently also has the distinction of being the first job I’ve gotten from a blog reader, P.K. I was asked to design a logo for Gear Desk, a (beta) directory for high-end build-it-yourself audio gear (updated 8/24 – sorry, P.K.!).

P.K. had some specific ideas initially and asked for some sketches involving either a dial/knob or a power button. My first round of sketches stayed within the boundaries he had defined. In our first conversation, he had also mentioned that a bonus would be to have a business card that looked like audio equipment with the logo, so I sketched a few possibilities for how the logo shape might integrate on a business card.

Gear Desk logo design, round 1

After round 1, the power button idea was thrown out altogether and I was asked to play more with the dial/knob shape.

Gear Desk logo design, round 2

P.K. tended to like minimalistic, clean shapes. While he liked 6a and 6b, he was afraid that it was too abstract and didn’t really say “gear.” This was true of most of the knob shapes – taken without any context, it could be difficult to figure out what the shape was. P.K. gave me carte blanche to find a new direction for the logo, agreeing to an extra round of sketches.

I went back to the original photos of high-end gear and audio equipment that P.K. had originally provided, doing some sketches of the ones that looked nice and trying to distill elements that would really speak “gear.” Some of the notes I made below: “Rounded corners look more high-class (like ipod)” “Feet really help make it look like ‘gear'” “Dials by themselves do not communicate ‘gear'” I sketched out a few more ideas, basing them on actual pieces of equipment but simplifying the shapes.

Gear Desk logo design, round 3

After looking at this round of sketches, P.K. felt comfortable letting me run with three options and creating digital versions.

Gear Desk logo design, round 4

P.K. really liked the simplicity of #1, but thought a “dimple” would make the knob look more like a knob, and less like a projector lens. I did one more round of digital sketches, along with some color samples so that he could see what it looked like with color.

Gear Desk logo design, round 5

Gear Desk Logo

After a few more screenshots with different fonts and colors, we finally ended up with a logo that we were both happy with. The final logo used a “tick” instead of a dimple, which we thought helped to make it look more like a knob (and less like a projector lens highlight), incorporated the rounded corners and feet to make the box look more like equipment, and used a clean serif font for a more “expensive” feel.

P.K. was great to work with. It was a new experience for me as he was the first of my clients to use IM and was able to give me instant feedback. I appreciated that he was very open throughout the whole process, willing to scrap our original ideas and go in a totally different direction — which thankfully worked out!

Now I just need to take the time to update my portfolio…

Blog under construction

Last night I did a quick-and-dirty switch to the WordPress Sandbox theme and copied, tweaked, and hacked at my CSS to get it into a rough working condition. I think it took about an hour and a half, in between watching kittens play and selling off a chair to a Craigslist person, so I’m talking very quick and dirty! It mostly works in Firefox right now, although I noticed some text spacing issues with IE6 (apart from the non-png transparency issues), but please leave a comment if you notice anything else funky. One thing new is that I have TWO sidebars to play with (right now one is mostly hidden) so I get to figure out what I want to do about that! And I might change the color, because although I like the blue on its own, it clashes a bit with the teal WordPress Admin bar when I’m logged in (which is all the time).

I do like the background effect that I ended up with, however — less “messy” than my corriehaffly.com site, so I’m thinking about switching the corriehaffly.com site now!

Anyway – don’t be surprised if you see things moving about frequently. Or just stick to your RSS reader and wait until I ask for official bug testing. 🙂

Update: I changed to teal from blue and played with sidebar stuff and gave myself a new headline (“This is my blog. I can be wordy. But I take cute photos of kittens, so it’s all good.”). Now I need to get to work, so I’ll leave this as-is for now!