Having just wrapped up the logo design, I thought it would be fun to share with you an overview of the process.

Brief

The client had previously received a logo from one of those cheap logo design sites that churn out subpar concepts for around $50. You get what you pay for, and he was given a ridiculous visual representation of his company that had no flexibility at smaller sizes or one-color applications.

After showing us this wonderful example of mediocrity (this is me being nice), Bounty Bev came to the table with a request for a super quick turnaround: they needed a great logo design in about a week, and they had no initial direction with any of their branding. With such a tall order, where does one start? Over beers at a local pub, of course.

The client’s ultimate request was that the logo and branding be fresh, bold, and flexible. I left the meeting with some general notes and a few napkins worth of quick sketches which, if they didn’t get lost somewhere along the way, I would gladly share with you.

Sketch

Even if I sketch with a client, I like to take a few days to sketch on my own time and let ideas grow slowly. A great logo should be an identifiable mark that people can associate with a company and shouldn’t be taken lightly.

I was drawn (har har) to a circular shape from the beginning, abstractly representing a barrel or bottle cap. We had also thrown around the idea of creating a physical stamp from the logo, and these shapes would work great.

The client had expressed interest in using a line drawing of a ship in their logo, but after working with this concept, I felt using a real object in the logo could restrict the brand and that it would be better to work towards something more iconic and flexible.

Concepts

With an intended direction, it was time to open Illustrator and create some concepts. During this step, I’m usually fleshing out sketched ideas, but I leave myself open to completely new possibilities.

The client had made it clear that their primary focus was American craft beer and that somehow needed to be communicated in their branding. Their current tagline was “we deliver the reward,” which is the kind of cheesy marketing speak you could expect in a television infomercial. This led to our new suggested tagline “American Craft, American Passion.” Short, sweet, strong. While trying to bring out American qualities in the logo, I was inspired by the sort of retro shapes and type treatments when it became clear that there’s no modern visual style considered strictly “American,” sans red, white, and blue stars and stripes.

A selection of these concepts were collected in a PDF and shared with the client, along with some visual explorations of the new tagline. Our recommendation was on the circular emblem because of it’s flexibility with color and presentation.

Final

The client loved the suggested concept and gave us the go-ahead to fully explore it and come up with the final version. Because the Bounty Bev box truck is blue, we created a white version of the logo that can work on dark surfaces.

The client has expressed their excitement about their new branding direction, with kind words such as “I love the simplicity and versatility… I love it!”

Which elements are necessary and which are fluff is itself a gray area as design is often concerned with creating an experience. Only a seasoned designer with a good grasp on a project can say whether a light sheen or gradient helps cater to the experience or is needless noise.

Why

People have strong emotional reactions to minimalism. I’ve found most people are polarized to either love it or hate it, but few discuss the deeper philosophical implications. A breakthrough I had years ago made me realize that loving or hating it is a moot point. The real question, the question that matters most, is “does it serve its purpose?”

To answer this question, one must first state the purpose to which the design is meant to serve. This varies within industries, as industrial design often has a specific purpose that differs from web design. But the concept that is shared despite the medium is interactivity, be it physical or emotional.

Famous industrial designer Dieter Rams spoke to this perfectly in his ten principles to good design when he said “good design makes a product useful.” Nearly 30 years later, has this become any less truthful?

It’s not just designers that need to appreciate the concept of enhancing usefulness and experience. This philosophy is only truly successful if everyone responsible for a product or service believes in it.

The next time you encounter something you would classify as minimally designed, I challenge you to place your initial emotional reaction aside and ask “does the design make this more useful?” The answer will often surprise you.

This isn’t to say that minimalism serves purely a functional purpose. By stripping down an idea to its bare essentials, you’re reaching the core from where your visual ideas can flow.

Noise

I’m tired of the noise of modern advertising. Everyone I know is tired of it. Yet the stream continues to grow, evolve, and find ways to dig deeper in our lives because, ultimately, it works. The more you spread (read: force) a message to the masses, the more it will stick. WhatI hope is starting to happen is a great example of diminishing returns, where people become disenchanted with the sheer amount of communication channels and become harder to reach.

This is where minimalism shines, as one of the core tenets laid out by Rams is pure honesty. We’ll never be completely free of the cheaper tactics designers use to sell products and services, but a clear and powerful aesthetic and message is undeniable. Why else is Apple predicted to surpass Microsoft’s net worth and yet they’re only half the company’s size?

Because elements in minimalism are more sparse, they become more important. The smallest decisions on typography and layout can make or break the piece. But when done correctly, the sheer simplicity and honesty of the message sticks out. If I see a cluttered ad with tons of color and type treatments, I don’t even care to see what it’s about. If I see an ad with a beautiful, carefully selected photograph and a single line of text set in an interesting font, I’m inclined to pay attention.

In other words: instead of being louder, be simple and useful. This will be noticed.

Sampling

Again, it’s hard to set a hard criteria for what is and isn’t minimalism. However, here are just a few quick selections from my bookmarks and why I think they are a good representation of the minimalist style.

Wilson Miner

Featuring a nice grid and beautiful use of Helvetica, Wilson Miner’s site shows that straightforward content can be fun. Interestingly, the base font size is set at 16px which, while much larger than normal, is quite comfortable to read.

A Magazine

A Magazine’s new site is simple, offering limited navigation options (found at the bottom of the site), which leaves the top free to showcase the product they’re proud and passionate of. The straight-on photography is nice, and the Flash that powers the sliding book showcase is unobtrusive.

Helveticons

I dig the way they put the icons they’re selling and the inspiration for them front and center. The typography is clean and they put their icons to good use as nice complementary imagery. Minimalism is more a concept of pure and direct communication, without extraneous imagery… the Helveticons site shows bold color and illustration can be used to great effect.

What’s Next

As people become more immune to communication clutter, designers can continue to promote clear and simple messages using all the traditional tools at their disposal: typography, color, layout, imagery, et cetera. I think this new decade will hold great things as we take a step back and pay more attention to the principles of design that have paved the way.

I’d love to hear from you. What is your gut reaction to the minimalist style? In what ways do you think it helps or hinders a product, service, or idea?

If you’re not familiar with CSS frameworks, you should be. They create a baseline from which designers and themers can create websites, standardizing basic layout options with a common toolset and language. I was passionately opposed to them for the longest time because I feared we would lose the art and beauty of designing and XHTML/CSS coding. My opinion changed once I discovered the 960 Grid System.

As soon as you hit the 960.gs homepage, you see actual screenshots of websites using the framework with an option to overlay the 12 or 16 column grid template. The first link you see on the site is an option to download templates for Photoshop, Illustrator, and OmniGraffle — oh, and the framework itself is included as well. Finally, a framework for designers! I’m getting verklempt just thinking about it.

I’m no developer, but I felt right at home with 960 from the beginning. Instead of wasting time setting up guides in Photoshop and worrying about proportional structure, I can focus on bigger, more important issues such as what I want a user to focus on, how to get them to a conversion page, or what color scheme might make the most sense. For those just getting started or interested in learning it, I give you six of my favorite tips and tricks for designing with the 960 grid system.

1. Use your background space effectively

As the background of a website can exist outside of the 960 pixel container, it’s a wonderful place to experiment with unique visual elements and horizons, as seen on Bryan Veloso’s avalonstar. Designers now have some rote options for working with backgrounds, such as repeating horizontally a la Drupalcon 2009, highlighting your content by making an elegant centered background like on the Bellingham Real Estate site, or using a full photographic background like on Housing Works.

• avalonstar’s grungy background texture
• The DrupalCon cityscape background
• Large photography on Housing Works

The background is truly a freeform canvas. You don’t have to worry about browser widths or how it might work with dynamic content, so go to town.

2. Pull or push outside the grid

It’s hard to deny the cold and inescapable reality of the pink columns if you sit and stare at them long enough. But fear not! With the power of CSS positioning, it’s no problem to break out of those constraints.

In this example, I’ve moved the logo about 25 pixels outside the left edge of the grid container to help the design feel a little more free and flowing. It’s often helpful to limit the width of an element you are pushing or pulling to a specific number of columns. I measured the logo out to be about 9 columns in width (out of 16 available columns), which means a front-end designer can apply a grid_9 class to the logo and then position it outside of the grid using CSS. Easy for them, easy for me.

Being able to push and pull things can lead to some extraordinary things and helps you remember that you’re not as boxed in as you might think.

3. Mix 12 and 16 column grids in the same design

While the default 12 column grid template is fine for most projects, some designs might require the additional flexibility and finer control of 16 columns. Newspaper and magazine styles can benefit the most from the extra grid control, especially when you might need to nest multiple small columns. But there’s no rule that you can’t use BOTH the 12 and 16 column grid in the same design.

In this example I have a simple layout that utilizes both grid templates. The top section is more open and simple and worked well with just 12 columns. The bottom section gets a bit trickier. I really wanted 4 columns and some specific layout tricks that would have been more difficult using the default grid template. As you can see, it’s as simple as placing the 16 column grid in the design and having at it.

4. Rotate the template for a poor man’s baseline grid

Since the 960 grid has 20 pixels of margin between each column, you can rotate the grid template 90 degrees and get a nice vertical grid to work with. While the common baseline grid is based on 18 pixels, I find working with a 20 pixel vertical margin helps keep the overall structure standardized and clean.

I’ve modified the 12 and 16 column template that comes with 960 to include this baseline grid to have it readily available.

5. Perfect your proportions

One of the biggest benefits of using 960 when designing is there’s no guesswork over the general size of content areas. The most commonly used format for the web is 2/3 of the overall page width for the main content and 1/3 for sidebar content. In 960, that’s as simple as fitting your main content inside 8 columns and your sidebar content inside the remaining 4 columns. Easy!

Obtaining complex layouts without grids can be painful because alignments need to be acutely defined. Imagine having to deal with a complex 6 column layout and working through issues of a section being 230 pixels versus 235 pixels wide, and how that 5 pixel difference might affect everything else on the page. 960 takes away a lot of the guesswork and tedium and allows you to focus on information flow and overall look and feel.

6. Ditch the grid

That’s right, one of my favorite things to do when designing with 960 is to turn the damn thing off.  The template is great for setting up the general size of your content areas and for lining things up, but you shouldn’t get into a habit of leaving it on while you design. Those columns can literally start boxing you in, so ditch them and feel free to get curvy.

In Conclusion

If you’ve never designed with a pre-built grid and framework, now’s the time to give it a try. I’ve found the 960 Grid System to be a valid answer to shrinking budgets and timelines. Even though I was previously a spokesperson against frameworks, I now find them to be useful in many situations.

I’d love to hear what other people think, so leave your comments below. Is designing with a grid helpful or a hinderance?