Sometimes one has the need to create a custom, or “funky” header navigation and today is the day for me. So I thought I would document the process of what I do to help you with a custom navigation challenge.

We want to create a vertical navigation as is seen below in the previous version of the website (click the image to see full size).

There is a bit of vertical navigation that is distinct from the main horizontal navigation that is governed by the Thesis navigation controls. To do this we need to do some custom programming.

So how do we add this navigation?

This has to be “hard-coded” navigation. This means we will be using custom_functions.php and custom.css to get both the function and form of what we are after.

First thing is to get the navigation we want to add in the form of an unordered list like this:

<ul>
   <li><a title="Link to the foleypod homepage" href="http://www.foleypod.com/" target="_blank">home</a></li>
   <li><a title="A link to our portfolio" href="http://foleypod.com/portfolio" target="_blank">our work</a></li>
   <li><a title="Easy way to pay foleypod" href="http://foleypod.com/payment" target="_blank">pay bill online</a></li>
   <li><a title="See who we've made very happy" href="http://foleypod.com/testimonials" target="_blank">what clients say</a></li>
</ul>

Now that we have the list defined we need to create the function to get this list to show in the right place of the header.

Thesis function time

Before we add anything here is what the space looks like where we are going to put this navigation. The header already has a background image applied and our navigation is going just to the right of the white line.

Now we are going to create a function that will tell WordPress/Thesis to insert the navigation that we have defined above. Here is the function without the ‘guts’ of the navigation:

function custom_banner_nav() { ?>
<div id="custom_head_nav">
..........
</div>

<? }
add_action('thesis_hook_before_title', 'custom_banner_nav');

You can see that we have defined the function with the name ‘custom_banner_nav.” We have also defined a div space “custom_head_nav” so we can dial in on the guts of this function, the unordered list from before.

Now the entire function looks like this:

function custom_banner_nav() { ?>
<div id="custom_head_nav">

<ul>
	<li><a href="http://www.foleypod.com/" title="Link to the foleypod homepage" target="_blank">home</a></li>
	<li><a href="http://foleypod.com/portfolio" title="A link to our portfolio" target="_blank">our work</a></li>
	<li><a href="http://foleypod.com/payment" title="Easy way to pay foleypod" target="_blank">pay bill online</a></li>
	<li><a href="http://foleypod.com/testimonials" title="See who we've made very happy" target="_blank">what clients say</a></li>
</ul>

</div>

<? }
add_action('thesis_hook_before_title', 'custom_banner_nav');

We have the functionality now working. We upload our custom_functions.php file via FTP and we see this now:

Notice the list, ugly but functional. Now to get it in position and style it as we want it.

It’s custom.css time

First thing for me is to get rid of the bullets:

.custom div#custom_head_nav ul {
list-style-type: none;
}


Now that the bullets are gone lets get the upper left corner of this where we want it. For that we need to add margin to the left, and padding to the top (dont add margin to the top or you get an unwanted space with the graphics:

margin-left: 535px;
padding-top: 15px;


Then I add the text size. The resulting css tag looks like this:

.custom div#custom_head_nav ul {
list-style-type: none;
margin-left: 535px;
padding-top: 15px;
font-size: 12px;
}


Now I need vertical space between each line to get this dialed in. To do this I use this code:

.custom div#custom_head_nav ul li {
margin-bottom: 6px;
}


This adds margin to the bottom of each item in the list. The navigation now looks like this:

The last option

The last option I added was to put an underline to show when you hover your mouse. To do that I added the following CSS tags:

.custom div#custom_head_nav ul li a:hover {
text-decoration: underline;
}


That’s it. Simply FTP up your files and you are d.o.n.e.

Hope this helps. Let me know if you have any questions.

I hear this question quite often from clients and thought I would answer it as best I could. If you are in the market to hire someone to build your website, or if you are a designer/developer perhaps this explanation will help.

I’ve decided to use the power of video to convey my answer. I find this format to be more efficient in terms of getting my point across. I have more improvements to come for my future use of video. So, if you can be patient, the quality of videos will improve in the future with the coming rollout of the ‘realigned‘ berchman.com.

Click here to view the embedded video.

DIYThemes has unleashed the final version of Thesis 1.6. While the beta has been out for weeks I never downloaded it from a combination of busyness and being prudent. How many times have you been burned for being an early adopter? For me too many, so in the words of Yoda, “Patient you must be.”

Patience

I was patient and it paid off. I downloaded and installed Thesis 1.6 following Chris Pearson’s instructions to a “T” without any installation issues at all. Very straight forward and simple. However, I was surprised at a change in navigation structure. In the past Thesis has managed it primary navigation using an unordered list < ul > as it should be along with the ID of #tabs.

That has changed in Thesis 1.6. Primary navigation is managed the same way in an unordered list, but now has a class named .menu

On the surface this may not seem like a big deal, and its really not for the individual WordPress/Thesis blog owner. However, for someone like me who manages more than a few Thesis based websites this upgrade will cost time and treasure. In particular any navigation system that has been highly customized will need some care and attention.

The one small feature adjustment I really like is putting the Thesis options into their own sub-menu on the left hand side. A very nice touch.

On the whole I am very happy with the upgrade and improvements in this version of Thesis and am already rolling it out to sites I work with. In fact I need to upgrade this website but I think I will wait for the redesign before I do that. Perhaps there may be a tutorial in the future with whatever new, goodness I may find.

This post is the first in what may be many video posts (ie., vlog posts). I am exploring new content formats so this may appear to be a bit ‘raw’ and unrehearsed, but it is real. I’m not reading a script (although you do see me look off and pause—I’m looking at a whiteboard with notes).

So, how does this fit into the “Website Realignment” you may ask? Well at this stage I am assessing content and its function and role in the website:

• What types of content do I use?
• What content formats don’t I use?
• Are certain types of content suited to a specific format? (Tutorials are always text?)
• Should I have more than one type of content?
• Am I making this not simple?

So here it is. The first video post. I plan on these becoming higher quality the more I do them. Would definitely welcome your comments on using this format in the comment form below.

Click here to view the embedded video.

via imgur.com

While I’ve always known these two typefaces to be ’somewhat’ close in appearance this graphic makes it easy to see the difference. Remember… Arial for screen, Helvetica for print.

Posted via web from berchman’s posterous

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

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.

There is a trend I have been noticing in doing business on the Internet lately and like any place of commerce you eventually see this. What I am referring to is the commodification of services. In other words, if you are looking for a programmer or designer to help you with an Internet based communication project; be it a website, email newsletter, SEO, etc., you know that one can find a variety of people that vary in skill set and professionalism with what services they provide. More people providing the same skill sets compete with others on price, thus making it a commodity.

Typically you want to work with a specialist, someone who does specifically what you need rather than a generalist, who dabbles in a little of everything. Specialists are who they are because they do a few things extremely well rather than many things mediocre. They are the experts with the right skills. Problem is what specialist to choose? How do you know quality and value? There are specialists who will provide you with a very cheap price for a project, and there are those that are more expensive that provide a great deal of value. This is the key to choosing wisely.

Who to choose?

The inexpensive specialist vs. the more expensive specialist. For some people the decision comes down to price. They want something as cheap as they can get it. The problem in this approach is in the quality of work you get usually correlates to what you pay for it. Both in quality of work, but in terms of service and timliness. This is related to two things:

1. Professionalism
2. Experience

I have a fair amount of experience so I know many tips/tricks of the trade that I throw into every project gratis. When someone hires me they are getting a very expereinced designer/developer that knows what they are doing, is courteous and fast in reply to questions, and delivers the final product commented and clean for future reference and use.

I cannot compete with someone who is coming in 25% of one of my estimates for the same project. If he is charging you $5-$10 an hour to get the job done I cannot compete with that, nor do I want to. That is not the business I am in. I don’t compete on price, I compete on value.

Value, where it’s at.

If you perceive greater value in a product or serivce and it matters to you, you are willing to pay more, its that simple.

Think of buying a car. You want luxury or economy. You want a Yugo or a Mercedes. It just depends on what matters to you and where your priorities are.

If having a well designed, smoothly functioning website is key to your success then spending more on the value of achieving success with your website is worth the investment.

As the saying goes you get what you pay for.

What has been your experience  with working with specialists who are inexpensive? Good? Bad? Tell me your experience below.

Also, stay tuned. More “Re-Alignment” posts coming (one tomorrow).