Tag: design

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.

Color scheme tools and creating a SharePoint color theme

One of the first things I do when embarking on a new SharePoint branding project is to determine the color scheme. Sometimes, the colors are part of the design requirements, but often, I have some leeway in creating suggested color palettes to present to the client. Even if the client has provided a logo with one or two colors, I will still have to determine other colors that will be used in the design or site. For example, you may have one or more background colors to anchor the site, the primary text color, and one or more accent colors. I usually like to create my own color schemes, but if you aren’t sure where to start, or if you don’t think you have an “eye” for color, here are some tips to get you going.

Starting from scratch? Start with a photo.

If you have absolutely no requirements for colors but have to start from scratch, I often find it helpful to start with a nice photo. Some may find it hard to come up with an attractive color scheme on your own, but most people have an innate sense of “that looks nice” when they look at photos, even if they can’t exactly explain why. I tend to be inspired by nature photos, but you may also find interior decorating photos, wedding photos, or party photos inspiring as well. Find a photo that evokes the kind of feeling or mood that you’re going for with your web site — for example, soothing or exciting, subtle or vibrant, corporate or earthy…

IMG_3950 IMG_8889 IMG_2724 IMG_7711 DSC03772.JPG DSC03332.JPG

Use an online color scheme tool

When you have your logo or photo or even just one initial color, use an online color scheme tool to generate a palette of colors for your site. There are several tools that allow you to upload an image or enter an image URL to generate a color scheme based on the colors in the image; or, you can pick an initial color and then allow the tool to pick colors that go with it. I’ve pulled screenshots from two of the available tools so that you can see how they compare:

colorschemedesigner.com


In Color Scheme Designer, I entered in the RGB code for a mauve color (the input box is subtle – click on the RGB code to the bottom right of the color wheel and type in your desired color). I then selected “complement” from the color wheel choices above, and a set of colors was generated for me. What’s nice about this app is that you can view light page and dark page examples that use those colors – although you may not choose to use the colors quite like the way they display them, you may find it helpful to see how the colors look in the context of a web page. Below is the “light page” sample:

colorexplorer.com

ColorExplorer allows you to upload an image and then pulls out your desired number of colors from the image.

(Note: Another powerful color scheme generator is Adobe’s Kuler tool. Unfortunately as of this writing, it looks like they’re revamping it, and it should be back up mid-October 2012.)

Or, browse sites.

Of course, you can also browse web sites and find one where you like the color scheme and steal be inspired by it. Some nice web site galleries that I often visit include:

Making a quick SharePoint 2010 color change

Once I have a color scheme, I can then present the scheme to the client to see if they approve. But if you want to make a quick implementation in SharePoint with your color scheme to see how it looks, modify the Theme colors. Make note of the six-digit hexadecimal/RGB color codes from your color scheme before you begin.

Go to Site Settings and click the Site Theme link under Appearance.

Click on the “Select a color…” links to enter in your color codes.

Click “Apply” and your theme colors will be updated! Take a look and adjust the colors as you want.

Other resources