A few notes on how I used this:

• I rarely just sent this to the client as homework. I really disliked any feeling that I was having the client do work that I should be doing. I usually just sent it to them so they could look over it and we would walk through it in the first meeting.
• One might notice there is a complete lack of anything about color, symbol or no symbol, or any other identity related questions typical in what other people may ask. Those kinds of issues are really answers that should be derived from these questions. That’s the importance of having a process – it shows that they are important branding decisions that are strategically informed. If I just asked “So what color do y’all want in your logo?” It would only tell them our approach is random and based on personal preference. If there is any input they want us to consider as we go, I usually ask about it in the meeting. But we’ll always go back to the this to derive what our recommendation for the identity is.

It’s really a fantastic series and I’m honored to be able to contribute. I know in my early years I was hungry to learn anything I could about how other designers worked and this series was created to show exactly that. In addition be sure to check out the excellent designs of Jesse Bennett-Chamberlain and Chris Merritt in their articles too.

Let’s take a look a these two competitors: Network Solutions and GoDaddy. I did some digging for Network Solution’s CEO. His name is Champ Mitchell. The only info about him was a ‘personal’ letter on phishing in the about section of their site. Thanks for the phishing info Champ.

Mr. Parsons has a full blog (that is touted twice on the home page) and has a “chairman’s page” on the site itself. If I have something to say, Parsons offers a link to email him at his email address. Mr. Mitchell tells me to email or call the main customer support number. Google Bob Parsons and you get a plethora of interviews. Google Champ Mitchell and you get third party press releases. So who do you think I’m going to connect more with? The poindexter, gray suited Champ? Or the confident gaze of Bob?

A Brand as a Relationship

A company brand is the intangible part of its relationship with customers. As human beings, we relate more closely with other human beings than we do things. When a brand like GoDaddy has a visible personality behind it, we connect with them. If in some small way I connect with Bob Parsons, then I just made a stronger connection with the GoDaddy brand. That is a powerful thing that money can’t buy. Think of other personalities such as Warren Buffet, Steve Jobs, or Bill Gates. Whether you love them or hate them, these personalities have become icons for the brands they stand behind, and have a dramatic effect on your feelings with the brands they represent.

In some cases, the only humanity to a brand is its leader’s personality. Take Josh Jones as an example. Josh is the owner of DreamHost, a much smaller hosting company than the monolithic GoDaddy. Josh sends all his DreamHost customers a monthly newsletter. Josh’s writing and quirky comments gives me anything from a staunchly raised eyebrow to an outright laugh. July’s newsletter ended with “Oh crap. Well, now that the aura of desolation and despair has been shattered, I totally understand if you want to unsubscribe.” and it’s signed ‘boringly, Josh’. August’s newsletter was sent to tell everyone he had nothing to say. I find myself reading these newsletters just because of Josh and his odd humor and personality. I would have little to no idea about DreamHost as a company if it weren’t for Josh. He is the only human face to my hosting experience, and in an industry that thrives on automation, that makes a difference.

I am a complete hypocrite

In researching this post I couldn’t help but feel a little guilty. When observing the effect these brand personalities had on my customer experience, I was well aware how powerful they were. Yet despite this awareness, the company side of our site is completely devoid of personality. It gives little insight into the people behind the work. No ‘about’ section, no bios, no personality at all. Just a nameless, faceless company and a body of work. When Ian and I were discussing the upcoming Apples To Oranges redesign, we knew that this was a weakness, and one that we wanted to correct. By adding information about ourselves, it gives customers a personal side to the company, and a boost of confidence prior to inquiring about work. So for now I’ll have to ask for your forgiveness for being nothing more than black 12pt Arial set on white.

For mentions from around the web

• Technorati has proven to be a great source for following blog conversations. Their UI has drastically improved over the last year and since we’ve started using it regularly I found it to be a fairly good experience. They have all the goodies, such as creating a watchlist, subscribing to searches via RSS, and a Firefox extension. I also found them to be one of the more accurate blog search tools out there, returning a good number of hits for my test domains.

• Talk Digger is a good service that aggregates searches across a number of sites. It pulls together Digg, Technorati, Google and a host of others. It also allows you to click on each service to see just the results from that service. Talk Digger is another great source for subscribing to via RSS.

• Wink is a social search engine with a twist. It allows the community to rate on the results. Wink did a good job, coming up with a detailed list of results. As a bonus you can see of any of your posts were rated by wink members.

• Google is great for finding all the general backlinks to your site. To use it, just type in ‘link:mysite.com’ and it will report all the backlinks it has in the index. However because of our domain name switch, we aren’t in their index at the moment. It still works for our original domain, but is a good resource none-the-less.

• Yahoo is just as useful for tracking links to your site as Google. However it as one up on the big ‘G’ by allowing to subscribe to a search as an RSS feed. It’s not readily apparent, but type in your site, and when you see the results the RSS icon will light up in your favorite…non IE…browser.

• socialmeter is an interesting tool that checks your links in a number of locations and gives you an overall score. Google, digg, Technorati and the like are all present and accounted for. The ability to grab an RSS feed is handy as it allows you to follow whether your score is rising or falling. I’m a little skeptical on how accurate the scores are though. My Technorati score was much higher on socialmeter than on Technorati itself.

• BlogPulse is a decent blog search engine. It has a nice trending feature which will give you a graph of the search results for your site domain. The downside is BlogPulse returns much fewer results than Technorati does, so the accuracy of even the graph may not be very useful. For very heavily trafficked sites this is ok, since a trend is a trend. However for smaller sites the accuracy makes a bigger impact.

• IceRocket is another blog search tool. I did not like this one, and found to have the lowest accuracy compared to Technorati and BlogPulse. It did have a trend feature, but again, it’s lack of hits for the same searches made me not trust it. If your looking for tools like this, you’ll definitely run across it, but don’t bother.

• Sphere was the worst of all of them. Just completely skip it. It was pathetic in the number of results it came up with for my test sites.

For General Traffic and referrers

• Alexaholic.com is based off the popular Alexa.com. It extends Alexa by allowing you to put in multiple sites and compare them side-by-side. Overall it’s by far the coolest way to see your traffic and compare it to others. Thumbs up for the small thumbnails they have at the bottom as well

• Google Analytics has been a staple for our metrics. I’ve had trouble with it, but it does work, and is a good backup source for information on your referrers and search terms. It’s a little difficult to get to the referrers themselves, which is the meat of what you want in tracking buzz, but it is there alongside a lot of other good information.

• Measure Map is pretty much the easiest way for me to see our referrers. I’ve been a beta tester from the day they started, and so far this has been my staple for stats. a huge thumbs up for the ability to select a single post and view all the links it brought in. This is very useful for measure your effectiveness on a post by post basis.

Tracking Comments

If you happen to find a blog post through the above tools, these comment trackers let you follow the aftermath and keep tabs on the conversation. I haven’t experimented too much with any of them yet, but thay are certainly worth mentioning when it comes to tracking buzz.

• Commentful
• coComment
• co.mments

References

• 10 things you should be monitoring

I’ll admit there are certainly quite a few of these alternate search engines, and I tend to wonder the viability of having so many services all tackling the same problem. In the end, I’ll probably stick with one or two and that’s all I’ll ever need along with the big ‘G’. How about you? Any of these services your favorite? Is there one you use on a regular basis that’s missing from the list?

UPDATE: Added ’socialmeter’ to the list.

First, developing grids is all about numbers, proportions, and other equally unsavory things. Most of us creative types are about freedom and expression. The idea of whipping out a calculator during design is not the sexiest of ideas, and thus some us tend to drop the subject. Second, we tend to think of design as an esoteric process, a series of magical ‘aha’ moments. Grids take work and planning and we often think it would put a halt to our creative process.

The grid is the artist’s true brush

However the great irony is that using a grid actually liberates creativity, not stifles it. Have you ever started to design and just end up staring at a blank canvas? That’s because your staring at infinite possibilities. A canvas with unlimited layouts and unlimited directions to pursue. You have little or nothing to go on. I found that staring at the blank canvas usually lead to little or no design exploration. Typically I would go with the first blast of inspiration I got and left it at that because it’s too difficult to come up with an entirely different layout. It was the blank canvas that became stifling.

With a good grid in place, you already have something on the screen giving you direction for your layout. This lets you jump right in and start exploring a variety of options. I’ve always found that the key to honing in on a great layout is by constantly exploring through compare and contrast. Using a grid makes it easy to try new ideas, and it often opens up unusual layouts you otherwise might not think of on your own. Through this process of constant exploration and refinement, you begin to sharpen and focus your design into a final masterpiece. This is how they open the door for creativity, rather than closing it. Think of a grid as your own home-brewed, instant inspiration.

Drop your pants and show us your grid

So let’s have at it! Do you use grids? How do you come up with them? Post a screenshot of a grid you have used and let us know how you developed it. Haven’t used them very much? Let us know your thoughts. There as real lack of good information and examples in this area and I’d like to see more people stepping forward with their experiences.

So to start, here’s a sneak peek at a grid we are using for our upcoming site redesign. When we launch our new design, we’ll post a follow up article outlining how we developed it, and how we followed it throughout the rest of the site.

Other Resources

• Five Simple Steps to designing grid systems
• Why use a grid
• The funniest grid you ever saw
• The Grid: The structure of design

Books

• Grid Systems in Graphic Design
• Making and Breaking the Grid: A Graphic Design Layout Workshop
• The Designer And The Grid

Seeing this brought to mind the Adobe.com site redesign after the Macromedia acquisition. The site was redesigned earlier in 2006, and I remember what I thought when I first saw it…corporate compromise. It was essentially the Macromedia layout. However the headers were ruined by replacing the pleasing ‘gel-like’ style with an ugly, bland version derived from the gray of the previous Adobe.com site. The bastardization completely clashes with Adobe’s logo, and in my view, their brand as a whole.

What’s in a Brand

When we think about brand, we see it as the intangible glue between the product and the customer. A brand is not about the visuals, as the word is often demoted to, but rather it’s about how a customer sees the company or product, and their relationship with it. The brand visuals should communicate this relationship, and backup what the company promises about the brand. In this case, Adobe’s brand was about producing the worlds most powerful and ubiquitous design software. It is the stuff for pros. Photoshop is the king in the world of design and as customers we view it as very high-end software. This is how we relate to their brand, and Adobe’s logo embodies this well. A powerful, strong black, exciting red, and refined angular lines all silently communicate these qualities and backup their brand promise.

Earlier Adobe.com designs did a decent job at conveying this. Adobe.coms’ 2001 redesign was done by Hilman Curtis, and is our favorite for communicating their brand. It was clean and sported a strong black header. The overall feel matched the Adobe brand well by communicating sophistication, elegance, and quality. It was very appropriate for the creator of the worlds most powerful design software. The design that followed corca 2003 wasn’t as good, however it was still accurate in conveying Adobe’s brand compared to the latest version.

Macromedia, in from stage left

Now compare that with what happened since Macromedia came in. The site has neither the high-end sophistication of Adobe, nor the more technical, edgy look of Macromedia. The powers that be, clearly took half the visuals from one brand, half from the other, and force fit them together. It reminds me of the same thing that happened with the Sprint and Nextel merger. Rather than taking the opportunity to reevaluate the brand and design for a new exciting direction in the company, it looks like a business driven compromise.

You can see the lack of care in other areas as well. For instance, the shockingly awful design of the Adobe Labs sub-brand. The Labs are a great idea but the imagery about it on the Adobe site, and the ‘logo’, are terrible. Is this really the same company that creates world class design software? Am I supposed to care about their products when they don’t show concern for our craft in their own work?

Maybe they aren’t out of the game yet. Perhaps as we speak they are consulting with a firm to rebrand themselves and deliver on their promise. Time will have to tell.

Update

As Kyle noticed, their packaging is just as bad. Looking at it you get the feeling something is hiding from you. I want to rip off the blue and reveal the nice leaves behind it. Very annoying.

Resources

• Hilman Curtis Adobe.com design in 2001.
• Other comments on the Adobe.com redesign here and here.
• Insider comments on the Macromedia.com redesign in late December. This was the obvious inspiration for the Adobe.com redesign in April.
• Adobe Labs

Rate your stuff

The idea is simple, let people add ratings and comments to anything they want, wherever they want. MochiMention uses flash to allow you to add a small ratings widget on any kind of web page. You can place it under photos of your latest vacation, home movies of your new puppy, or even on the footer of a new website you want feedback on. It doesn’t require any database or coding, and is simple to setup and get started.

AutoMentions

The best feature is the ability to automagically track database driven items, such as blog posts or items on an e-commerce site. For instance with blog posts, if you add the MochiMention code to your post template, MochiMention will automatically create a new mention each time it sees a new post. You only have to add a unique id using your blog tags and MochiMention does the rest. This takes the hassle out of having to create a new mention each time you add a new post.

Give it a go

Give it a try and let us know what you think. There’s a plenty more features up on the whiteboard here in the office, and a number directions the product can go. As always with the folks at Mochi Media, your feedback is very welcome. Oh, and we’re voting for the bunny.

Update

Hint: To add a MochiMention to your wordpress posts, use your Wordpress tags like this:

…&slug=<?php echo(urlencode($post->post_name)); ?>&title=<?php echo(urlencode($post->post_title)); ?>

The second is the domain is slightly different. We obliterated the old ‘dashes’. Our official domain is now ‘applestooranges.com’ and not ‘apples-to-oranges.com’. We decided to buy the domain from a legal squatter, and paid a pretty penny to do so. But as anyone in the office can attest to, It felt pretty dumb having to explain there were dashes in-between the words. “That’s dash ‘to’ dash oranges. No a real dash. The word ‘to’, not the number. Tee ooh. Yes, then a dash.” (snicker). Well worth the money and it saves our clients some confusion.

So we now have the ability to create posts correctly, a few new hires on board, a few freebies waiting in the wings, and a load of new portfolio items to share. Things should be moving quickly. And if you haven’t done so already, Matt and Wordpress are hosting a wordpress user conference. So check it out.

Note: Wordpress also fixed our broken RSS feed. So to those who informed us it was broken, I thank you.

You can have your brand cake and eat it too

Yahoo’s new design is a great example of what we have believed for a long time… great visual design and branding aren’t at odds with content, rather it enhances it. Something can work great, be easy to read, and still contain elements that make a strong brand statement. In Yahoo’s past they have typically relied on text only presentations; ugly yet functional. Then, as we noted in the earlier post, they began improving their designs, namely by introducing segmented colors to separate the various areas. Now they’ve shown us they weren’t done yet. This new design uses soft gradients, stronger box elements, and plenty of graphic details all while still maintaining a good visual hierarchy. It’s a leap of faith that proves it can be done.

Space Savers

Yahoo also made a big moves in utilizing DOM and Javascript to keep the page compact yet full of content. They brought the tab motif to the homepage, something most other portals haven’t utilized, and surfaced the most common personalized features through a drop down panel system. I especially enjoyed the new panels. How many of us have gone to Yahoo only to search for that single ‘movie’ link or ‘weather’ which was buried amongst all the other noise? This solution keeps the page clean and clear, yet allows quick access to these often used features. I’m sure some heavy metrics analyzing and user research spawned this idea.

Teach A Man To Fish

One of the best surprises is the training mechanism they used to explain the tabs. Try it for yourself. Refresh the page and watch as the top-level tabs highlight in a timed animation. It’s subtle, yet effective, in communicating that the boxes do something. While tabs may be easily recognized by experienced Internet users, they are still an uncommon motif and can be a point of confusion. For a site with the high traffic level and wide variety of users that Yahoo has, it’s a brilliant, non-intrusive mechanism to aid in teaching functionality. The use of time and animation was well played here.

Wider Than Your Mama’s Blog

Yet another bold move is their use of a wider layout. I’m sure their visitor stats justified the decision, but there’s no surer sign to the rest of us when one of the Internet giants gives it the go. To smooth the road they offer a simple workaround via an options drop-down that allows individuals to opt for an 800 pixel compliant design. This seemed like a good compromise on how to handle the issue for backwards compatibility.

Will We Have A Winner?

So my take is Yahoo is hot, Google is not. In the coming year I think Yahoo will gain a lot of ground against the big ‘G’ with it’s innovation in design and user experience. Other than Google maps, Gmail, and a small boost from the recent Google Finance, Googles recent offerings have fallen short. Yahoo seems to have the ability and passion to create great apps, and is able to tie them together much more seamlessly than it’s competitors. Combine that with the way the brilliant design pattern library is shaping up, and it’s clear they have the design team to beat.

So on that note, does anyone have a way to get me into the new Yahoo Mail Beta?

Update

I just found this screenshot of the new Yahoo Finance. Even more good stuff, and notice it’s a yummy flash app!

Color me pink

One of the first things that struck me was the color. Ok more to the point that they actually used it, and in abundance. Most of all the Yahoo properties use a primarily white background with sparse splashes of CSS coloring, and it’s most often blue. Yahoo Health uses a gray background, and the homepage is primarily shades of light tan and a soft pale turquoise-blue. Overall it’s a very calming, personal, and inviting pallet. It almost looks like was designed.

Javascript is for tough guys

In addition they also utilized some tastefully done Javascript effects. The main content area is broken into a few hide and show tabs, butsurprisingly the tabs have a fade effect when the content changes. It also rotates between the tabs after a certain interval to expose more content. Certainly not the candy I would expect from Yahoo. They also tried an interesting side scroll area, complete with branded scroll handle. This was a little odd and was clunky in operation, but I certainly give them hats off for trying.

All in all I would say it’s a fairly well designed portal site. Especially from one of the big boys. Now if we could only get the rest to follow suit…