berchman.com » Design

New Web Site Published

Bert Mahoney — Thu, 21 Jan 2010 06:00:33 +0000

Today was a big day of sorts. I completed design and development work on new website. It is a custom designed website in form and function. It’s a significantly modified version of Thesis [ #thesiswp ] running on the latest install of WordPress (presently 2.9.1).

The site is http://www.ckwrites.com

I learned a great deal more about Thesis and what’s possible. New tools and techniques that I plan to share with the #thesiswp community in the coming months. I already have at least 4 new tutorials coming; from the simple to the complex.

I’m very happy with the results of my work with Christopher Korody, a.k.a. ‘ck’ of http://www.ckwrites.com. I’m sure he would agree that it was a tough slog but well worth the results. In fact you could just ask him.

Information Graphic Brilliance

Bert Mahoney — Thu, 10 Dec 2009 19:22:11 +0000

I was sent this information graphic today and was struck by how effective it is. There is something that resonates with me.

It puts your brand at the center of the page and graphically shows you how everything encircles and supports said brand. The guys at the site provided this fantastic embeddable graphic below for you interactive pleasure and I just had to share.

A Website Realignment: Day 45: Branding Berchman

Bert Mahoney — Sat, 26 Sep 2009 13:00:31 +0000

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:

Creativity
Intelligence
Kindness

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

Brick Red (Warm, Energy, Strong)
Warm Yellow ( Imagination, Intelligence, Enlightenment)
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

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.

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:

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.

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:

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).

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:

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:

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.

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.

A Website Realignment: Day 9: Branding Berchman

Bert Mahoney — Tue, 25 Aug 2009 14:00:53 +0000

I’m picking up where I left off on the previous post. So far I’ve gathered adjectives 17 friends, family, and clients perceive as my personal brand. I’ve also identified adjectives I would use for my personal brand. But what else is there that might have an influence on my personal brand?

My opinions, likes, and dislikes
What tools am I working with?
Who do I do business with?
Who is my target market?
What are my roots, my upbringing, where I was raised, etc.
What is my story?

My opinions, likes and dislikes

There’s no doubt that your personal opinions, the things you like, and the things you dislike have an impact on who you are and how you project yourself into the world. This in turn impacts your personal brand. When I speak of opinions. I’m not referring to things like personal political opinions, rather I’m referring to my personal professional opinion’s. For example, in my opinion WordPress and Thesis are the best CMS combination for any self publisher to use on the Internet.

Things you like and dislike also have an impact. For example, some things I like:

The Internet (duh)
Design of all kinds (graphic, information, packaging, product, typography, etc.)
20th-century abstract expressionist artwork (Jackson Pollock, Piet Mondrian, Jasper Johns, Franz Kline, etc.)
Music of all kinds
Real football (the EPL not the NFL)

And some things I don’t like:

Bad design
Inefficiencies
Luddites
Messes and clutter
Manchester United

What this all boils down to is an exercise in distillation. You need to continuously ask questions of yourself. Simultaneously, you need to be answering questions. You should not be looking to others to tell you what your personal brand should be. You have to decide what information is relevant and helps reinforce those qualities that are important to you.

Remember though that everyone has an opinion. People may already have a perception of what they think you are like, and that influences their thinking. Don’t be entirely dismissive of their opinions, rather embrace the information. You may find it useful somewhere down the road.

What tools am I working with?

This may seem like a mundane question, but again, it’s a process of collecting information. I use an Apple G5 dual processor computer as my main machine. I do 99% of my work on this machine. I use WordPress, Thesis, the Adobe creative suite, BBEdit, CSSedit, and a variety of other smaller software tools to help me get the job done. I also have a PC laptop that I use primarily as a preview machine to see what websites look like to the majority of people on the Internet.

Who do I do business with?

I do business with large companies and solo entrepreneurs that are serious about using the Internet. They want to establish or increase their significance in people’s lives through the power of web-based communications. This does not mean that they are stiff and stuffy. Rather, I like to work with people who have goals, perhaps don’t know exactly how to achieve them with Internet tools, and like to have fun during the process.

Who is my target market?

Businesses and people who need expert consultation in developing their websites. They want to use smart, proven technology that works (like WordPress). Many times they know what they want and realize that its quicker to hire a professional to get the job done that much quicker. They may or may not know about the power of Thesis as a framework, but we can work on that.

What is my story?

Everyone has a story and it impacts your person brand. My story is simple. I grew up in a very small village in New York called Waterford. I lived there the first 23 years of my life. Coming from a small town I learned to appreciate people, history and heritage, and fundamentals. I left home to go to college and came back to Waterford after graduating with 2 degrees; B.A. in Fine Arts and B.S in Information Science. I then chased my wife out to California 16 years ago and we started a family about 9 years ago. I worked for a variety of advertising and design firms before striking out on my own about 4 years ago. Now here I am today. That is essentially it in a nutshell.

So where from here?

Now that I have collected data, the next step is to articulate my brand in terms of a positioning statement and begin exploring visual ideas. That is for the next post in this series.

Working on Spec (aka Working for FREE!)

Bert Mahoney — Thu, 13 Aug 2009 19:41:44 +0000

I had a client of mine—one of my first when I struck out on my own—email me about a conversation we had a while back. The conversation was about some new ideas regarding a website. It was a great talk and the brainstorming was fun. We left the conversation open-ended and, from my perspective, we would pick it up again. That day just came.

Updated 8/14/2009

Well I emailed him the other day and we picked the conversation back up. The email exchange quickly came to the talk of speculative work. In fact I emailed him back just this morning after revisiting the No Spec! website which clearly reminded me the many reasons why performing speculative work is harmful not only to you as a professional, but to all those that are within your industry by cheapening the value you provide to people with your two most important assets: your ideas and your time.

Another way to look at it

I found an article that gave a great comparison with other industries to help illustrate what I am speaking about. Here is an excerpt:

It’s common for business owners to make unrealistic requests of design firms. Probably the most common is when they contact several design firms and ask them all to design something for them, whether it’s a logo, brochure or some other piece, with the intent that they will choose one of the designs if they like it. While it may seem like there is nothing wrong with this request, in reality, there is. Think about how this request would be taken in any other industry.

Potential home buyer: I want you to build me a house and I’m going to have three other builders do the same thing. After these homes are completed, if I like one I’ll purchase it.
Home builder: Uhhh…No.

Potential car buyer: I’m thinking about buying a car from either you or another car dealer with in a seventy mile radius. I’d like you to drop off one of each model of car that you have (the other car dealers will be doing the same) and after I’ve had a chance to drive all of them for a while I’ll decide if I want to buy one.
Car dealer: Uhhh…No.

Restaurant visitor: I don’t know what I want to eat, but I’ll know what I like when I taste it. I want you to make everything from your menu deliver it to my house. Keep in mind that the Chinese, Italian and Mexican restaurants will be delivering their food as well. After tasting everything, if I’m still hungry, I will choose a meal from one restaurant.
Restaurant owner: Uhhh…No.

The bottom line is that design is a business. You wouldn’t run your business by handing out your product or service for free in hopes that someone might feel like paying for it and you shouldn’t expect a design firm or designer to do so.

I think this fairly illustrates my point and like I said I want to work with people but they have to be willing work with me and value what I bring to the table just as I value what they bring to me.

How I work

I always define potential projects and their goals then develop estimates to produce that specific work. If the estimates are out of clients budget ranges I typically work with them to bring the estimate in line with their budget while simultaneously reducing the tasks and features to the most important and essential elements. This has worked well for me AND for my clients.

Update: 8/14/2009

Well another email came back from my client after I posted this which helped draw a distinction. I had to think about it but I DO provide a type of speculative work. The difference is in how I define it. I see it as Pro-Bono work. I recently completed work on websites for the local Humane Society and the local homeless shelter where I donated dozens of hours helping get their websites up and running. Now I don’t see this as purely speculative work, I see it as providing assistance to non-profits that can, and need, the help.

What do you think about spec work?

Three Thesis Sites in One Week

Bert Mahoney — Fri, 07 Aug 2009 21:35:54 +0000

It has been a busy publishing week for me. I have had 3 websites go “live” this week that are based on WordPress and Thesis. Two of these website involved comprehensive design and the other involved functionality customizations. The point of this post is to share some recent work to show that all Thesis sites do not look totally the same. The best part is that I learned many new things about WordPress and Thesis in the process—some of which I will share soon.

Coming up next after this post will be a serious undertaking that I will chronicle on this website—the redesign of berchman.com on WordPress and Thesis. I will post the whole process from start to finish as a complete “under-the-hood” look at how it all gets done. So stay tuned. The posts on the redesign of berchman.com will start next week.

The first of these websites is
WhiteHotCenter (WHC)

WHC is the brainchild of my friend Thomson Dawson of PULL. Thomson was talking with me about his ideas for WHC and I recommended using WordPress and Thesis as the foundation for his website. I think the website turned out very well and is off to a great start. Be sure to visit and check out his site. Thomson has a great creative mind and great insight to share for those in the creative field.

The second of these websites is
Hall or No Hall

Hall or No Hall was started by my friends Jonathan Brown and Matt Thompson. I’ve worked on many projects with Jon and Matt. The premise of the website is simple–select an major U.S. athlete and debate whether or not they should be in the respective sports Hall of Fame. This website is a great place to debate the merits of an athletes candidacy and suggest others to jaw over. Be sure to visit.

The third website is
ConnectFirstThenSell (CFTS)

CFTS is a website by Stan Brown that offers networking tips and techniques to help you improve your ability to make connections and then convert those connections into sales leads. Depending on your lead generation needs you may find what Stan and CFTS has to offer of great value. Stan contacted me recently and we completed this project quickly.

Something Extra:
How to install and use WordPress locally using WAMP

Shane, a fellow Thesis user, sent me an email with a video tutorial that some may find useful. It shows you how to install WordPress locally on your Windows based computer. I have included it here for your viewing. Be sure to give Shane a shout if you like it in the comment area under the video.

Click here to view the embedded video.

Be sure to Let me know if you have any questions and stay tuned for my chronicle of a redesign starting next week.

Thesis Tutorial: Dynamic Image Header with Transparent Logo

Bert Mahoney — Tue, 28 Apr 2009 18:30:42 +0000

One of the tools that I use is Chris Pearson’s fantastic Thesis WordPress theme framework.

In an effort to contribute back to both the Thesis and WordPress communities I have documented how to embed the Next-Gen Gallery plugin to your header, or banner image and place your logo above it. This functionality allows you the ability to have your banner image change how you like it beneath your logo at the top of your website.

Why Would You Want To Do This?

If you would like a variety of images in your header beneath the logo/type and manage them in a central location. Once the initial programming and configuration are setup it’s all image management after that.

You may have clients that would like the option of changing their header image on their own and this gives them that option.

Things you will need to perform this tutorial:

WordPress
Thesis (optional. You can do this without Thesis but we are using it here)
Next-Gen Gallery plugin for WordPress
Photoshop (or other image editing software)

First Things First

You will need to have WordPress, Thesis, and Next-Gen Gallery (NGG) installed before proceeding.

Dimensions

Once everything is installed we are ready to go. First you will want to determine the size of your image, or header. What is that dimension in pixels? You will need this for both creating the image and for settings inside of Next-Gen.

Once you have the width and height of your header determined it is time to create/optimize your images that you intend on using. For our purposes of this tutorial the size of our image/header is 857 pixels wide, and 150 pixels high.

Preparing The Images

We used Photoshop to create a layered file containing all of our images so that we can position and scale them within the size constraints and save out the multiple versions of the file. You may want to import your logo, or typeset your text now, to position it on top of all the images so that you can determine the static position that the logo/type will present itself.

Once we have all the layers in the proper positioned its time to save out all your files. In our example we created 5 different images to use. We used smart naming conventions to make sure we can tell these images from others just by their names. We titled our images:

header-01.jpg
header-02.jpg
header-03.jpg
header-04.jpg
header-05.jpg

Now that the images are prepared its time to prepare the logo/type.

Preparing The Logo/Type For “floating” On Top

We should have our logo/typesetting in place from our previous step of getting our images sized and positioned. We need to do the following steps:

Make sure logo/type is in correct position
Ensure that we have a drop shadow created
Turn off all image layers
Check transparency
Trim the logo/type down to size
Save out proper format of file

Make sure logo/type is in correct position

You want to make sure with each and every image layer you have saved out that your logo/type is in the position you want it to appear on all images.

Ensure that we have a drop shadow created

Select your logo/type layer then select the layer/layer style/drop shadow inside the menu options of Photoshop.

Adjust the settings to your liking and you should see a drop shadow from your logo/type on top of the image.

Once you are happy with the shadow its time to save out the logo/type image.

Turn off all image layers

You should turn off all image layers so that you only see your logo/type and shadow.

Check Transparency

Once all images are turned off and the only layer turned on is your logo/type you should see transparency behind the image. In Photoshop—you should see the checkerboard pattern—it should look like this:

Trim the logo/type down to size

With only the logo/type layer displayed you will want to trim out all the uneccessary image data. In Photoshop you want to select Image/Trim

You should now have a much tighter logo/type that still has the shadow present.

Save out proper format of file

You want to select File/Save For Web and Devices

Once presented with the save dialog window you will want to set the following parameters for your file.

Image type: PNG
Colors: perceptual
Number of colors: (depends on what looks good and how large the image file is. Play with this setting)
Dither: diffusion
Dither %: 88%
Transparency: check box ‘yes’
Matte: None
Transparency Dither: Diffusion Transparency Dither
Amount: 88% (Play with setting to get desired result)
All other settings default

Here is what my settings looked like:

Once your settings are how you like them, save the file with a distinguishing name.

Save it to the custom image folder inside of Thesis: ~/wp-content/themes/thesis/custom/images/

You can now FTP that image to your webserver.

Now that the background images are created and uploaded into NGG, and your logo/type image is uploaded via FTP its time to get busy with the custom.css, custom-fuctions.php, and NGG settings.

Getting Next-Gen Gallery Settings Dialed In

The method presented below is our “hack” to making this combination of plugins and technology work. If you have an easier/simpler way to do this, please share! We are always open to more efficient approaches—who isnt? That being said, here is what we did.

Create A Header Gallery and Upload Images

You want to be logged into the admin area of your website, http://www.[yourwebsite].com/wp-admin/

Once logged in you want to proceed to the gallery management tools near the bottom of the left hand side of the page:

You want to select Add Gallery / Images from the menu choices. On the next screen you want to give your new gallery a name, in my case it was appropriately “header.”

The next step is to upload the images you previously saved. These are the background images, not the logo/type you saved. If you look at the set of tabs at the top of the screen you will see an Upload Images option. That is what you want to select. You need to click on Choose File and proceed to navigate to all your images and upload each one. Once you have all of the images listed, you should then select the proper gallery from the pulldown menu where it says Choose Gallery in the pulldown menu.

Once all your images are listed, your gallery is selected it is time to click Upload Images. This may take a few seconds depending on how large your images are so be patient.

Once the upload is complete you will see a confirmation at the top of the screen.

Manage The Gallery

Now click on Manage Gallery under the Gallery admin menu on the left side of the page. You should see your gallery listed under the Gallery Overview page. Click on the title to proceed to edit the gallery content. At this point you want to make sure that all the images you uploaded are present. If not, go ahead and add what you need.

Tweak the Settings

Now you want to confirm that the slideshow and the technology needed to run it are in place. You do this under the Gallery/Options menu item.

Of primary concern is the tab titled Slideshow. You need to look at the first option under this tab: Path to the Imagerotator. If the path is not already filled in, click the “search now” button just to the right. This should take care of things. If not, you may need to get JW Image Rotator from Jeroen Wijering. Follow the instructions and return here and click the “search now” button again.

Testing The Show

Now that you have uploaded the images and checked the slideshow technology is in place you should test out your slideshow to see if everything is working. This tests the slideshow, and if its working well, gives us some key code that we will need for custom_functions.php

The way we tested the slideshow was to create a test page, insert the slideshow, then preview the page.

I created a page by clicking on Pages/AddNew

I then give the page the title of Gallery Test in the title bar, then I click and icon in the top row, right. You can see it here in the screen capture.

Once I click that button I get a dialog box that lets me select from the pull-down menu the slideshow I want to insert, and lets me determine how I want to display the images—in this case a slideshow.

Once you have clicked insert you should see something like this showing up in your content area:

[nggallery id=5 ]

This is the code the NGG plugin uses to insert the slideshow. Now the code is in place I click publish, then I click preview to see the page and if the slideshow is working as I want it to. If its not you need to go back and double check your settings and that you have to get JW Image Rotator from Jeroen Wijering.

Assuming the slideshow test is working as you intended in your web browser, the next step is to look under the hood at the code being generated to display the slideshow. You will need to find this code, copy it, and then paste it into custom_functions.php to help build your new header. Fortunately I will show you my code here and you can copy/paste to make things work.

When you are looking at the webpage with the slideshow working as it should, you should “view the source code” to see the syntax that is making everything tick. One thing you may have noticed is that your slideshow is a different size than the header you want. Don’t worry, we will change the size in the code.

What Is The Code?

The code you are looking for in the preview page source is this:


The Flash Player and a browser with Javascript support are needed..

Get your width and height

There are a few numbers you will want to change based on your design and your domain name. The first line of the code above is this:

You want to replace the width and height with the values of your banner graphics. You should know this from creating the graphics previously. There are 2 other places in the code above where you need to replace the width and height. One place is inside the flashvars declaration:

flashvars : {
	file : "http://www.YOUR_DOMAIN.com/wp-content/plugins/nextgen-gallery/xml/imagerotator.php?gid=1",
	linkfromdisplay : "true",
	shownavigation : "false",
	showicons : "false",
	rotatetime : "6",
	transition : "fade",
	backcolor : "0x000000",
	frontcolor : "0xFFFFFF",
	lightcolor : "0xCC0000",
	width : "857",
	height : "200"},

The last place is in starting the function here:

swfobject.embedSWF("http://www.YOUR_DOMAIN.com/wp-content/uploads/imagerotator.swf", "so5_1", "857", "200", "7.0.0", false, this.flashvars, this.params , this.attr );

NOTE: Be sure to change the domain to your domain name in the paths above.

So all together the code inside your custom_functions.php will look like this. We are first moving the main navigation below the header (this is optional for you) then inserting the banner:

/* MOVING NAV BELOW HEADER */

remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_after_header', 'thesis_nav_menu');

/* Next-Gen Gallery into Header */

remove_action('thesis_hook_header', 'thesis_default_header');
function ngg_custom_header () { ?>


The Flash Player and a browser with Javascript support are needed..








CSS and Your Logo
Now that you have the rendering of your banner in place, the thing to do now is get your logo to appear on top and in the position you would like. The code we added to our custom.css file is this:
div#logotype {
	background-color: transparent;
	margin: 0;
	padding: 0;
	display: inline;
	z-index: 2;
	position: relative;
	top: -84px;
}
The key here is to position: relative; and to use negative top margin. This is what will get your logotype to appear on-top of the banner. Be sure to add the z-index in for good measure.
Be sure to save your custom_functions.php and custom.css file and upload via FTP and test, test test!
Wrap Up
This has been one looonnnnggg tutorial and if you have read to this point, you are both patient and persistent. You can see the banner that I have based this tutorial off of here at OjaiGetaway.com which is a web site in progress.
Do let me know if you have any questions about this process. I will help as best we can.