A Website Realignment: Day 45: Branding Berchman

Note: Recently someone asked to see all the posts from this series. They were reading the “Day X” as a series that was a post every day. Under that logic you would see there are many posts “missing” in this series. However, that is not the case. I am working on this project most days, between client work, and posting when I can. I have not posted in a while because work has picked up a bit. However, I have no plans of abandoning this effort. Stay tuned!

Making the Brand Visual

Now its time for the visual branding. This subjective exercise adds an element of challenge because whenever designers design for themselves it has the possibility of spiraling into a never ending reevaluation.

However, I have been thinking about the visual approach since I started this project. Paying attention to influences, likes, dislikes, colors, and typography for weeks now has allowed me to mentally prepare an ‘idea board’ in my mind.

The Icon

Encapsulating the essence of a company, entitiy, or person and its brand in a simple graphic mark is always a challenge. As I mentioned this is more so when it is for yourself.

I’ve done the previous research in define elements of my personal brand and now its time to take the next step and develop a visual mark, or more simply, my logo.

Where to start?

I typically start with the color palette. What mood do you want to convey? What attributes stand out from the brand? For every mood and attribute there is a color that will help convey what you want. There is a wealth of research and information on the science of color theory and the impact specific colors have on people within our culture. What is more interesting is that some colors have a very different interpretation and/or meaning in other cultures. So if you are developing an “mark/logo” for consumption overseas (I’m in the U.S.) it’s advisable to do some research so you are not using a color you and the client think is great only to find out that it’s bad juju in the country/market it will be seen in.

OK, so my color palette. From the survey and my own personal research the top three attributes for the berchman.com brand are:

  1. Creativity
  2. Intelligence
  3. Kindness

If I select colors to reflect these three adjectives I come up with the following colors:

  1. Brick Red (Warm, Energy, Strong)
  2. Warm Yellow ( Imagination, Intelligence, Enlightenment)
  3. Blue (Reliable, Trustworthy, Dependable, Committed)

So this is a base color palette for me to work from. It provides good contrast and it harkens to my love of Piet Mondrian paintings. However, I have a personal preference for subtle variations on these colors. You do not have to take ‘blue” at its default face value. You can adjust both brightness (light/dark) and saturation (full intensity/grayness) of each specific hue.

My Pallette

color_palette

The Graphic Mark

Developing the graphic form, or mark, of the brand is an excercise in identity crisis. At first you have nothing. Sometimes you do have an exisiting mark and are redesigning, but if you are in the process of redesigning you really are still visually starting with nothing. You should not just be rehashing the exisitng identity if you are truly serious about the mark.

Influences

I have many influences when it comes to my own approach to design. I am a great admirer of the bauhaus, the swiss style, russian constructivism, abstract expressionism, and mid-century modernism. All of these share overlapping qualities, such as consideration of form, space, line, color, scale, and for me the use of the grid. Now I know some may think that using a grid instantly means everything has to be square—not so. Rather the use of the grid structure gives any design a scaffolding upon which to lay to lay a framework of line, form and color.

What I find is that, knowing your content parameters, the process of designing a grid structure that considers the importance of each content element and provides a consistent visual experience is key. Allowing the content to facilitate understanding through the use of a well designed grid is essential. But, I digress (more on this when we layout the website later)

Needless to say I will be laying out my identity on a grid and the my resulting mark will have the visual influence of a grid as well.

The Shape

I am basing the shape of my mark on the square. The simplest of forms it is literally the building block of the internet. The square for me is synonymous with the pixel on the screen. One bit, on or off, posititve or negative. I went through some variations and my result is #4 below.

Picture 9

On top of the shape I will be using typography, more in the next paragraph, and I will be using the typography in the negative. This means that the typogrpahy will ‘knockout’ or ‘punch-through’ the larger shape. You can see that progression here:

Picture 10

Also, not that I am making the typography bleed. This terms means that the shape, line, or color is going off the edge of the contaiing shape. It is a term common to the printing industry when ink goes off the edge of the page.

Picture 11

The Typography

For me selecting typography can turn into a trip down the rabbit hole (alice wonderland) so I always need parameters before I being my search. I need to know what style, era, or adjective we are trying to convey.

For this mark I had to select 2 typefaces. One for the mark and one for the name.

For the mark

I wanted a typeface that was strong, stable, defined, and clear. These were my final candidates:

Picture 13

My final selection was Lubalin Graph. It is clear, well defined and because of its serif nature presents stability. I chose the lower case “b” because lower case implies simplicity and that is something I strive for in all I do (a hat tip to being introduced to the KISS theory in college programming classes).

Here is my final variation of Lubalin Graph and my shape to make my final mark (showing scaling).

Picture 14

NOTE: Of paramount importance to me (and to anyone for that matter) is that your mark scale well. Meaning whether a bilboard size mark, or a mark the size of a postage stamp you maintain ledgibility and impact!

For the name

My final selection for the typography that displays the brand name is Avenir. It has long been a favorite of mine, and although I spent hours looking at alternates, I came back to Avenir. It has a cleaness and intelligence that essential to the brand. “Crisp” is what I would use to describle its legibility and ability to communicate. Here is my typeset for the name:

Picture 16

and to inject some variation of emphasis I made “com” lighter than “berchman” and made the dot its own color as well. Here is the graphic for the variation:

Picture 17

The Final Rendering

Now that the mark and the typography are set its now time to marry the two. I have given consideration to the spacing of the elements in relation to one another as well as the scale of each to one another. Here I present the vertical and horizonal elements in 2 different sizes so you can note scale changes.

Picture 18

Picture 19

Conclusion

My hope is that this post shows you the thinking and process I went through to develop my final mark. I will admit that not all things are for all tastes but the process I’ve shared is important. The process is not just slapping some clip art with whatever type I have. It is a researched and refined process. There is thought and intention behind all the elements you use. You should be able to explain your decision for all the pieces of your visual identity for they are the graphic representation of your brand.

As always let me know if you have any questions and stay tuned for the next installment—Purpose of the Website and Website Content Review.

Reblog this post [with Zemanta]

Do you need help with your website?

If you are a web designer or web developer needing help, or a 'do-it-yourselfer' looking for a professional Internet presence I can help. If you need help with a specific WordPress issue or a complete website, I offer consultation, complete web design, and web development services. Get in touch and we can talk about your needs and start the process.

, , , ,

Do you need a WordPress consultant? Someone with experience?

I specialize in making WordPress work for people.

If you need help with a specific WordPress issue, I offer consultation, complete web design, and web development services.

Get in touch and we can talk about your needs and start the process.