In my last article, I took a look at exactly what it is that constitutes a website, and tried to show that it is about more than just HTML and CSS, though those are certainly important. Instead, what I suggested was that the true essence of a website lies in the seamless interaction between all of its various parts, from the back end scripts and databases on the server, through to the client side code and, of course, the content itself. I also pointed, or at the very least hinted at, the importance of structure and organization.

Though increasingly popular, single page websites are still a very small minority out there on the interweb. Most websites have at least a handful of different pages, and many large corporate, information or publication sites literally have thousands and thousands of pages. The same is also true of nearly all the various social media and social voting sites that are so good at distracting us from the things that we should be doing.

With all those pages and all that information sitting out there on different sites, it’s clear that navigation plays a huge role in web design and development. After all, the best information in the world doesn’t do a site any good if nobody can actually get to it. If bots and crawlers can’t find it, you don’t stand much of a chance of making it on the search engines. If your users can’t find it, it will just sit there, collecting cyber dust, like an old manuscript tucked away in your great uncle’s attic.

So, navigation is a critical part of design, both in terms of usability and SEO.

Yet, I have to wonder if many of us are just approaching the entire issue from the wrong perspective. You see, navigation is not about menus. It’s not about bread crumbs. It’s not even about links. All of those things are important, and are tools that we use to assist us, but they do not constitute the full scope of navigation in and of themselves.

The Goal of Navigation

Ultimately, navigation has to be understood as being more than just a simple menu or site map. To illustrate this example, we need only take a look at the history of the word in question. The original concept of navigation is not something that was invented with the birth of the internet. It’s not a process born out of cyberspace, but rather something that was devised right here in the real world, thousands and thousands of years ago to help people get from one physical place to another!

In the real world, navigation is about using a variety of recognizable signs such as landmarks, stars and even a GPS, in order to help us get through the process of travel. We use these various signifiers to establish our bearings, and then to point us in the right direction. Wikipedia puts it this way:

Navigation is the process of reading, and controlling the movement of a craft or vehicle from one place to another.

Obviously, when we’re talking about the web, there is no literal vehicle (though you could apply the term metaphorically to the browser). That being said, navigation on a website should ultimately be about the very much the same thing. Various recognizable signifiers tell the user exactly where he or she is on the site, and help establish smooth and seamless travel from the current location to any other page. This, of course, can often be easier said than done, especially for very large sites, on which it is impossible to link to every existing page. Still, this kind of smooth navigation should remain the goal for any and all websites!

Not Just a Menu

I’ve already touched on this briefly, but it bears mentioning again: a menu is not the same as navigation. In fact, if we really look at the words, a menu has absolutely nothing to do with navigation. Fundamentally, all a menu really consists of is a collection of choices. When I go at sit down at the local restaurant for lunch, the server brings me a menu that lists all of the different dishes that I can choose to order. Other than perhaps getting food from the kitchen into my stomach, it really has nothing to do with moving from one place to another.

On a website (just like in an application), a menu is really very similar to what’s offered to me at the restaurant. It presents me with a series of choices from which I ultimately make a selection. The primary difference is that, instead of deciding what to eat, I am selecting from a collection of active links that will either take me to a different page or execute some sort of functionality on the site.

That does not constitute navigation in its entirety. Users can also navigate a website using basic links, bread crumbs (which differ from menus in their linear structure), archives, site maps and even search functionality.

So, am I suggesting that we stop using menus? Not at all! Menus are a hugely important website convention that users have come to expect on sites. Getting rid of them would be a huge usability faux pas, and would be tantamount to shooting ourselves in the foot. My goal here is simply to stress the importance of not thinking that navigation begins and ends with a site’s main, or even secondary menus. It’s a much broader function.

Simplicity in All Facets

Now that we’ve established that menus are still an important part of navigation (just not the only part), and we’ve determined that the purpose of navigation is to help users move from one part of the site to another with as much ease as possible, it may be tempting to begin constructing massive drop down menus that contain links to every conceivable page.

Stop! Don’t give into that temptation.

We’re talking about making things easier for the user here, not about crushing them beneath the full weight of an overflow of information. Several months ago, I read an article by Francisco Inchauste (more commonly known to the community simply as Finch), entitled “The Myth of Design Limitations”. In that article he wrote that

we have to recognize the disadvantages of freedom. The Paradox of Choice is the abundance of options we have in our grocery stores, shopping malls, and in this case, choices for our designs. There are a lot of great things about having so many choices. There is also of course a downside. A plethora of choices increases paralysis due to the overwhelming amount.

The context for this passage was more talking about limitations in design than about navigation, but I think that this same paradox of choice also applies to the current discussion.

The process of choice is one of eliminating a variety of options, ultimately narrowing things down to a single selection. The more options you introduce, the wider the scope of that process becomes, and the more difficult it is for the user to narrow down his or her choices. This increased difficulty is, in all likelihood, going to lead to increased frustration, and that is the complete opposite of what we’re trying to accomplish through well designed navigation. We want to make user’s experiences easier and more enjoyable, not more difficult.

I like to think of it this way: if I am driving down the highway and come to a split in the road, I don’t need a massive collection of signs telling me the name of every single community that I will pass in each direction. Just show me a couple major cities. That should be enough get the nose of my trusty Mazda pointed in the right direction. If it just so happens that none of those major centres mean anything to me, then that’s what the map is for!

So, try to keep your menus (and other forms of navigation) as simple as possible and try to think of your navigation more in terms of sign posts or landmarks by which users can find their way around your site. Then, if they need a little help, your site map or search function can provide it for them!

More than Just Creativity

Another thing that needs to be addressed when it comes to the concept of navigation in web design is this whole issue of creativity. There are all kinds of “inspirational” roundups and list posts out there that showcase interesting and creative forms of navigation. A problem begins to emerge, however, when “creativity” becomes synonymous with “good” or well “designed”. There are all sorts of unique and interesting things that we can do with menus and other navigational items – especially with the ever increasing power of CSS and JavaScript frameworks like jQuery. Armed with the power of animation and hover states (except on touch devices, of course), we have all the firepower we could ever need to drive those old, boring navigational items right out of town!

Sounds great, doesn’t it? Well maybe it is, at least until you log into your analytic and see the incredibly poor click through from your home page!

Remember what I said about keeping navigation simple? Sometimes this can mean reining in your creative juices. If I don’t want a thousand signs pointing me to every community down the road, I also don’t want wonky signage that is only readable with infrared glasses, or which blends so beautifully into the background that I really have to look for it. I don’t want the text to be set in some fancy typeface, and I most certainly don’t want to have to pick it out from amidst an excessive array of graphics.

The same is true of navigation.

A few months ago, I wrote an article entitled “5 Basic Usability Breakdowns You Want to Avoid”, in which I talked about “make me guess menus”. These are a perfect example how creative navigation fails. Basically, they involve menus where the actual name of the item is not revealed until after you hover over it with your cursor. Issues of touch screen devices aside, this kind of thing actually hinders navigation. Instead of presenting the user with clear options, it actually forces them to play an irritating guessing game until they find the desired menu item, again potentially leading to frustration.

More often than not, this sort of thing just strikes me as an attempt to get creative with navigation. Unfortunately, in cases like this, the creativity tends to backfire by severely hampering the overall usability.

Implications on Design

All of this discussion about navigation – from its goal, to it being more than just a collection of menus, through to simplicity and creativity – are all important and have a particular bearing on the process of design. Instead of just creating a standard (or even a creative) menu at the top of the page and thinking that we’ve taken care of all the required navigation, we need to consider it in the larger context of helping users move through the site.

Turning back to the same Wikipedia article that I cited above:

All navigational techniques involve locating the navigator’s position compared to known locations or patterns.

The big question, then, is not how to style your menu, but rather how can you use a collection of patterns and recognizable signifiers to help users both determine where they are and how to get to where they want to be, all without cluttering the page and offering so many options that they don’t make any choice at all. Your menu is a start, but navigation also means looking at things like your titles, links, header, sidebar, footer, bread-crumbs and so forth. How do they all work together to help inform the user of where they are? How do they help offer a path to somewhere the user may want to go?

These are all important questions, and to be quite honest, I don’t think that I am necessarily doing the best job with navigation even here on Echo Enduring – especially on the portfolio side of things. While I’m definitely not going to completely redesign the site, when I get a bit of extra time, I’m will sit down and see how I can tweak the design to help make it easier for you guys to get around!

What about you? What kind of process do you use when approaching navigation in your designs? Do you look beyond just a simple menu system? What other elements and techniques do you use? I’d love to hear about your thoughts and ideas on navigation!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

Recently, one of my awesome Twitter followers was asking me a few questions about getting started with WordPress. From what I could understand, this individual worked for an agency or firm where he created website designs in Photoshop, and then sent the PSD on to another team member in order to have it coded up. Now, he was working on setting up a personal site and, while he could rock off a custom site design, he openly admitted that he knew nothing about coding and asked me for a little help getting started.

After a bit of discussion, I suggested that the best place to begin would be to start learning the basics of HTML, and then CSS. After all, any great theme (WordPress or otherwise), ultimately begins with good, well-formed HTML and CSS.

Still, this interaction got me thinking (as I am prone to do) about the roles of both HTML and CSS within the larger context of a website. Through my contemplation, I began to consciously formulate the thought that, while these two technologies are clearly an important part of web design, they are only ever single pieces of the puzzle. In other words, there’s a lot more to a website than just its markup and style.

This isn’t some sudden realization that is going to dramatically change the way that I approach web design. I wouldn’t even say that it’s really anything all that new to me. It’s more like putting a structure to something that’s always been in my mind, but which I have simply never articulated. So, in this article, I would like to undertake that articulation, and offer my own understanding of what defines the a website. I think it might be valuable.

A Page vs. A Site

One of the most important distinctions, and probably the best place to start, is by differentiating the concepts of the web page as opposed to an actual website. A web page is what’s loaded in the browser, and is generally a combination of text, images, video and other content. HTML gives the page its structure, while CSS provides (or should provide) the visual appearance.

On the other hand, a website at its most fundamental level can be understood as comprising a network of individual pages, which are all linked in some (usually) logical and predictable manner. Back when I first started this web design thing, most sites were comprised of a number of unique and separate HTML documents, all located in the same folder, or within a hierarchy of folders, and each containing links to many (and sometimes all) of the other pages that made up the site.

Today, of course, things have become a bit more ambiguous, with the introduction of content management systems and dynamic content fed to us through technologies like jQuery or AJAX. When using a system like WordPress or Concrete5, we’re not focusing on creating static pages (though they may be generated behind the scenes for caching purposes). Instead, we build theme and template files, which have designated content areas that are populated with data extracted from a mySQL database.

From a maintenance perspective, this kind of thing is certainly a godsend, since we don’t have to manually go through hundreds, or even thousands of individual pages to make a single change to the design. Fundamentally, though, it doesn’t really change the way a website is structured.

Whether we are looking at a site comprised of static HTML documents or one that is fully CMS-driven, we still have “pages” that exist at unique URLs. The content found at these URLs may vary significantly on some sites, like Facebook – where the home page features different “news” everyday, for every different users – but the basic concept of structure still exists. Our profiles have the same URLs, as do our Fan Pages. The content simply varies based on what our “friends” are doing.

This distinction, though not perfect (as we shall see below), is an excellent starting point, as it emphasizes the importance of the unity of a site.

Unity

But what about single page websites? There are thousands and thousands of such pages out there, featuring all of the important content within a single HTML document, elegantly styled with CSS. Do these sites contradict everything that I have been suggesting so far? Or, am I somehow suggesting that single page websites are not, in fact, websites at all?

I would say no on both counts.

I will admit that this idea did make me stop and ponder these very same questions. After some contemplation, however, I reasoned that there is nothing that necessarily requires a website to have more than a single page. In looking at both the fact that most sites do have multiple pages, and the obvious success of single page sites, I would actually suggest that a website comprises the entire collection of unique URLs that exist for a given location on the internet (which could be an complete domain, a particular subdomain or even an individual folder).

To take this back to the original premise on which we began this discussion, we can think of a website as a singular unit, which ultimately equals more than the sum of its parts. It’s kind of like looking at a MacBook (or any other kind of technology). Taken on their own, its individual parts really aren’t worth all that much. Taken together, however, these parts create the powerful machine, and a popular tool among many of you designers out there.

A website is much the same. CSS without HTML is entirely meaningless, while HTML without CSS is extremely plain and unattractive. JavaScript and its various frameworks can’t accomplish all that much outside of the DOM. When it comes to content management systems like WordPress, the mySQL database is useless without the PHP (or other sever side language) to extract the information, and the PHP itself needs to generate HTML (usually through a template) in order to display that information in the browser. And, of course, this entire network of technologies means absolutely nothing to the user without content.

So, when a website is working properly, all of these different elements come together in (what should be) a beautiful symphony of interaction and interrelationships that from the backbone of the interface that you design to connect your users with your content. At the same time, that content – represented by either a single page or a network of pages – also works together to round it all off and complete the entire, unified package that is the website.

Clearly, then, a site is much more than just its HTML and CSS.

Purpose

There is, however, one more piece to this website puzzle. Even after all the technologies have been accounted for, and we’ve grasped the important role of great content, there still remains one important concept to consider. That concept is purpose.

Every website should have a purpose. It may be to inform potential customers about your business (probably one of the most common types of websites). It may be to function as an informational resource. It may be to connect people with other people. It may be to showcase yourself, or even simply to entertain. Whatever the purpose is, it is ultimately the core of the site, the nucleus around which everything else that we have looked at so far is ultimately wrapped.

However, while HTML and CSS do not a website make, when it comes to this question of purpose it is entirely possible to build a beautiful, functioning website full of content, but which ultimately has no real purpose. Unfortunately, this well crafted but purposeless website is more than likely destined fail and fizzle even faster than a poorly designed site with a clear and identifiable purpose.

Implications on Design

As I mentioned earlier, I don’t think that there is anything all that revolutionary or earth shattering to what I am saying here. Most competent web professionals will probably read all of this and find that they already knew it. But the point isn’t whether you know it; the point is whether or not you think about it.

Sometimes, it seems as though our design processes can fragment what is ultimately intended to be a unified product. The typical process that I seem to see from the design community goes something like this:

1. Simple wire framing on paper (maybe)
2. Design in Photoshop
3. Code up the design in HTML and CSS
4. Develop a theme from the HTML and CSS
5. Install the CMS
6. Import content
7. Find another client and repeat

At each stage, we tend to be focused on one or two parts of the larger project, and I have to wonder how much time we spend thinking about the other parts. For instance, if you’re working in Photoshop, are you already looking down the line, towards coding the HTML and CSS? Are you considering the specific capabilities of your CMS? Have you even decided on a CMS yet (assuming that you don’t always use the same one – which I don’t)? How do the answers to these questions ultimately inform the design decisions that you are making from inside Photoshop?

Asking yourself these questions can certainly make your job easier (or your developer’s job, if you only do the Photoshop layout), but they can also serve an even more important role, by bringing all the pieces of the puzzle together, and forcing you to consider the website more as a single entity rather than a collection of separate pieces.

I think that’s where this discussion becomes truly important. The more you consider the website as a whole at each individual stage, the better equipped you will be to make choices that will ultimately help the site succeed by achieving its ultimate purpose. It’s all about unity.

What do you think? Do you consider the website in its entirety through every stage of your process? Do you have anything that you’d like to add or argue against? Be heard! Leave a comment.

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

We talk a lot about the various intricacies of designing and building websites here on the Echo Enduring Blog, but today I would like to look at a somewhat different topic – the concept of actually getting people to visit your website(s). After all, we put a lot of work into creating beautiful, intelligent and usable designs, but it doesn’t really accomplish all that much if nobody ever visits the site right?

Driving Online Traffic Offline

Of course, we frequently read about the benefits of search engine optimization (SEO) and search engine marketing (SEM), and there’s no doubt that if you can hit it big with the right keywords on Google, you’ll see a ton of traffic coming in. But, unless you are specifically crafting your content to appeal to Google rather than your readers (not something I really recommend), it can also take a good amount of time to really get the search engine juices flowing.

I’ve been blogging her for over a year now, and it’s only recently that I’ve started to see a bit of a rise in search engine traffic. I’m still not anywhere close to where I’d like to be either. Granted, some people have done it quicker than I, but it’s still a difficult and competitive process.

We can also talk about the benefits of social media, which are many. While I haven’t hit it big on Digg yet, I’ve had a lot of success on niche sites like DesignFloat, DesignBump and The Web Blend, as well as more general sites like StumbleUpon and Reddit and Delicious – and to all of you whose votes have helped with that success, I am very grateful!

Again, however, as great as social media it is, it also has its limitations, and is somewhat reliant on a thriving online community. While this certainly exists for design, it is not always present in every niche or area of business, and some website will invariably struggle more than others to catch the social media wave and ride it to success.

Fortunately, while the online world is becoming an increasing part of our everyday lives, we do still live in an offline world, and there are still opportunities to market advertise here too. Today, I would like to discuss some of these opportunities for driving online traffic with offline techniques.

Collateral

Most businesses have a variety of real-world materials that are distributed to clients, prospects, associates and so forth. These would include business cards, letterheads, brochures, pamphlets, catalogs, reports and so on.

Your web address should already be on all of this material, anyhow, but if you really want to push your website, you might consider trying to make that address stand out a bit more. Here are some interesting and creative examples of business cards that do just that:

This card isolates the website address on one side

This one works by placing the website address on one side of the card, along with the logo. Everything else on the other side. This really isolates the website, thus increasing its visibility.

This card highlights the website address through its interactivity

This interactive, sliding business card places the focus on the website address by making it a part of the interaction. As you slide the moving part, it reveals and hides the website, directing attention to it directly.

This card builds the URL into the same area as the logo

These days, a lot of businesses are websites, and the basic URL is built right into the logo. This example isn’t quite the same thing, since six-speed is actually a creative agency, but the positioning of the domain certainly draws attention to itself!

You can use similar and analogous techniques on all kinds of different collateral and company literature, drawing attention to your address, and hopefully driving more traffic to your website.

Postcards

A more direct and immediate technique for driving traffic to a website might be to use some form of a web driver postcard. Postcards have always been a simple and affordable form of direct marketing that allow you to deliver a short, simple message. That makes them a perfect medium for driving web traffic.

Recently, I had the chance to work on a web driver card for Highland Marketing. I did all the design work on this spider-web-shaped card (based on ideas of my colleagues). Be sure to check it out!

Here's the front of the finished web driver card

Postcards can don’t have to be this elaborate though, and their messages can take many forms. If your website is primarily an online store, then you could advertise a sale or promotion to encourage people to do their shopping on your site. Though not necessarily in postcard format, I get this kind of direct mail all the time from Chapters Indigo, usually along with some sort of discount coupon as added incentive.

If you’re working on more of an agency, consultant or manufacturer type site, then a postcard letting people know about a free ebook or white paper available on the site could do the trick. People love getting free stuff – especially if it’s something that can help them become more productive, knowledgeable, efficient or successful in a particular area.

Postcards are also great for launching new products, services or a whole new site, or for letting people know about contests or giveaways running on your site. Whatever technique you decide to use to entice people to visit your site, a postcard is a great way of getting the message across.

Offline Advertising

Businesses like iStockPhoto obviously rely on web traffic for their business, since virtually everything they sell comes right off their website. They do not, however, rely exclusively on web-based forms of marketing. I am a member of NAPP, and as such am also subscribed to their Photoshop User magazine. In every issue I have ever received, iStock has placed a two page ad on the inside front cover. The exact ad varies from book to book, but it’s always there. It’s gotten to the point where I actually look for the ad when I get the magazine, just to see what the design is like.

Interestingly, it was through those ads that I was first introduced to iStock! I received my first Photoshop Usermagazine a couple years before becoming a NAPP member, as part of a promotion that was running when I first got Creative Suite 2. At that time, I was just entering into the design world and it was all very new to me, so when I saw the ad I checked out the website.

Since then, I’ve even purchased some imaged from them.

Offline advertising for websites definitely works. In fact, if I read, see or hear an advertisement for something that I’m interested in, the vast majority of the time I will head out and check out the website. Since getting my iPhone, I might even check it out right away (further suggesting it might be time for sites to start thinking about their mobile presence).

Granted, not everyone is like me (thank goodness), but I do think that my tendencies are reflective of a particular demographic of young (reasonably), tech-savvy professionals. If this is your market then good, well-targeted offline advertising can potentially yield significant increases in overall traffic.

Word of Mouth

Never underestimate the power of word of mouth. After all, it is the original form of social networking. In fact it’s the very reason I’m on Facebook. Before signing up, I had ignored tons of emails requesting me to join. It wasn’t until a friend that I trusted actually told me about it in a face to face conversation that I actually decided to go give it a try (and subsequently became addicted like everyone else).

Most people trust their friends and family, and if they receive a recommendation from one of these people, they are always more likely to take it seriously and maybe even check it out. If you can get your existing customers or users talking about your site to their friends and family, you can see significant returns in terms of traffic.

Of course, that’s the hardest part of all. There’s no way for you to actually control what people are saying to each other. All you can really do is operate under some basic assumptions – that people are going to talk about things that they find to be unique, interesting, meaningful, funny and entertaining. They are much less likely to talk about things that are mundane, boring and generally uninteresting.

So, while it may seem trite and cliched to say, look at providing the type of content that will get people excited and talking to each other. There’s really no guarantee when it comes to this type of marketing, but if you can hit it big in this area, the resulting traffic surge can be huge.

When I think of this kind of marketing, my mind always goes back to the story of Half.com, as told by Mark Huges in his book Buzzmarketing. Basically, the story is that they actually managed to change the name of Halfway, Oregon to Half.com for an entire year. The whole process caused a huge media stir, and Huges writes this of his results:

Before we spent a single dime in traditional marketing, we had captured the attention of the media and the Internet community…

And twenty days after our launch, eBay called.

Within six months, we sold the company to eBay. The price tag was $300 million…

In less than three years, I grew Half.com from zero to eight million registered users.

(Buzzmarketing, 23)

I don’t know about you, but to me that seems like a pretty successful venture. I certainly wouldn’t mind having eight million users here on the Echo Enduring Blog, and though I don’t have any intention of selling it, $300 million would probably start me considering.

Obviously, this kind of thing doesn’t happen all the time, and trying to replicate that level of success would likely be a long, difficult and possibly fruitless exercise (though you never know). Still, it shows the enormous potential that exists in word-of-mouth marketing.

Conclusion

So there you have it. I know it’s a different sort of article from what you’d normally see here, but that’s okay right? It’s good to shake it up every once in a while. I think it’s an important subject though, as we are all looking for different means of increasing traffic to our websites, or perhaps to the websites of our clients.

If nothing else, I hope it at least works as a reminder that marketing is often a multi-faceted exercise, and that all of our online efforts can be complemented by simultaneous offline activities.

What about you? Do you ever use offline forms of marketing and advertising, or is all of your website’s traffic driven by your online activities? Is there another effective way of marketing websites offline that I didn’t touch on here?

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

As designers on the web, we all know that there are literally hundreds of web design galleries that we can go to whenever we want to look at some of the most exquisite work that our peers are cranking out. Those who haven’t read “The Myth of Inspiration?” yet might even consider these sites as a means of providing inspiration.

Not Every Website is Designed – A Case Study

That’s all well and good, but there’s another side to this coin too. Though perhaps somewhat less common than sites and posts showcasing the beauty that exists on the internet, there have also been a number of channels for showcasing some of the worst “designs” that exist on this very same internet.

As I’m sure you can guess, many of the selected sites are just plain horrible. Some might even go so far as to call them nauseating, though I take that particular description as primarily metaphorical. In other words, I have my doubts as to how many people will actually lose their lunches by looking at these pixelated monstrosities. Personally, I prefer to use the example of burning retinas. Physical symptoms aside, however, the fact remains that these sites just aren’t all that pretty.

Nor are they (necessarily) designed.

Those who read this blog regularly will recall that a few weeks ago I endeavoured to answer the question “What Is Design?” by summarizing it in three key elements: intention, purpose and content. I also suggested that, if any of these elements are conspicuously or intentionally missing, then something simply does not qualify as design.

This same train of thought can also apply to some of these worst website “designs” out there. Let’s look at one of the most well known examples of these: the horrendously crowded HavenWorks.com:

A really ugly site

This site has taken it’s fair share of knocks over the years. Almost every list of horrible websites that I’ve ever seen includes this one, and for good reason. It’s cramped. It’s ugly. It makes horrible use of colour. Most of all, it seems to be committed to a single-website crusade against white space of any sort.

From a design perspective it’s just plain ugly.

But then, I’d argue that that’s because it simply is not designed. As evidence, allow me to look at it from the perspective the three design necessities already cited above.

Intention

This one may actually be the most difficult to tackle. After all, how can I say that the elements of this website are not intentional. Obviously, someone made the decision (right or wrong) to put the elements on the page. That is certainly true. I will even concede to the suggestion that the order of the elements was specifically chosen, since there appears to be some semblance of a header, and even a footer with a link to go back to the top of the page.

That’s not the kind of intention I’m talking about though.

What I’m referring to is the intentional use of the principles of design. We already mentioned that there is virtually no white space. The typography, if it can even be called typography, appears to be entirely random (at best). The colour scheme seems to want to establish itself as some sort of patriotic red, white and blue, but is vastly over-saturated and somehow also includes radioactive yellows and greens. Contrast is non-existent, as is any logical sense of hierarchy, and any hint of a grid is only an illusion caused by the rigid structure of the tables upon which the entire site is ultimately built!

Given all of this, I feel confident in concluding that there is absolutely no legitimate design intention behind the layout decisions for this site. That alone would be convince me that it’s not actually designed, but there’s more…

Purpose

We also need to discuss the general lack of purpose. Yes, the overall site itself does seem to have some general purpose – something to do with sharing news about both Republicans and Democrats, apparently in a fair and balanced manner (as if such a thing were really possible). Beyond that, however, the site seems to drown in a sea of its own purposelessness.

If you can find it, somewhere in the messy and cluttered header, there is a link that takes you to a calendar – and that’s all it is: a simple, flat calendar (for 2009, by the way). It doesn’t list the dates of key political events and isn’t a means of chronologically organizing content. It’s just an ugly, static, table-based calendar that leaves me asking only a single question: why? What’s the purpose? If I need to print myself off a calendar for whatever reason, I’m certainly not going to print this one, and other than that, I can’t see what else this could be used for, especially given that it’s out of date by an entire year.

It simply has no purpose.

An ugly and purposeless calendar

Nor do most of the other elements of the site. What’s with the insanely narrow columns or the legions of poorly crafted and often unintelligible icons that seem bent on conquering my screen? Even more perplexing, what is the point of having an exclamation mark before the word search in the area that appears to be intended as some sort of menu?

There just doesn’t seem genuine purpose anywhere on the site! And, (you guessed it) without purpose it simply is not design.

Content

Lastly, we want to talk about content. This site is full of it, and I do mean full. The homepage looks like some sort of political news aggregator simply vomited its entire repository of recent articles all over my screen.

Design, however is not about the quantity of content. Quite frankly, it’s not even about the quality of the content. You can have a beautifully designed site totally full of crap content, and a horribly designed site chalked full of killer content.

No, design is about framing content and making it available to the visitor/reader, and of course, HavenWorks.com doesn’t even come close to achieving this goal. In fact, the content is almost entirely inaccessible, because, unless a visitor has taken the time to become really familiar with the site (and really, why would they?), they would have absolutely no idea where to find anything that they might be looking for.

Moreover, even content that is found is virtually impossible to scan and almost painful to read, thanks to a combination of poor spacing, poor leading, poor line width and so forth. Really, the layout for this site doesn’t seem to give the content any real consideration at all – though, I must admit that I would be hard pressed to figure out what it does give consideration to.

Still, if the layout does not work to somehow frame its content, then again I just can’t consider it design.

Why It Matters

So, if we define design as being the act of making intentional and purposeful design choices in order to properly frame content for a particular audience, then the fact that HavenWorks.com is neither intentional nor purposeful and actually compromises its content does not merely suggest that it is poorly designed. It actually tells me that it is not designed at all!

But why does this matter? Why go to all the trouble to show that this site (and others in a similar vein) are not actually designed?

Simple – we need to be comparing apples to apples here. If these sites are not designed, how can we consider them to be the worst designs? To me, that seems like labeling a child’s sandcastle as the worst form of architecture, or my daughter’s (beautiful) scribbles as the worst form of art. Of course, those examples likely involve a bit more innocence, but hopefully you get the idea.

The point is that sites like this don’t even fall on the measuring stick for design. I could do a better job when I was nothing but a completely naive high school kid, throwing together the kind of crap fan sites that GeoCities was so well known for. And if I could accomplish that then, why do sites like HavenWorks.com appear so often in lists and roundups of bad design?

To be frank, it’s probably because we like to pat ourselves (and each other) on the back, knowing that we designers can all do so much better. But of course we can do better! If we couldn’t, we would have absolutely no right to even call ourselves designers in the first place! So what does comparing ourselves to these un-designed sites really accomplish?

In the end, the answer is nothing, other than proving that we rank higher than the lowest common denominator, which is, in fact, so low that it doesn’t even rank on the scale. Big deal.

Conclusion

Okay, I think I’ve been a bit harsher in this article that I usually like to get. Most of the time, I won’t even cite an example if I am discussing something negative (like these 5 usability blunders). However, by now I figure HavenWorks.com has to know what the design community thinks, so I’m not too concerned.

As for the point I’ve been driving at, well maybe it’s just time for us to look up instead of down. Focusing on who we’re better than never accomplishes anything other than inflating our own egos. While a little ego stroking can be good for the self-confidence one in a while, isn’t it much more productive to look the other way, up towards those who are better than us? It’s from them that we will ultimately learn, through learning grow, and through growing ultimately become better designers!

So let’s all keep looking up instead of staring down our noses, perhaps even helping some of those un-designed sites to get themselves designed.

What do you think? Would you consider sites like HavenWorks.com and its ilk to be un-designed? If so, what does that mean to you? How does it effect your understanding of yourself and your own work? Let’s hear your thoughts!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

It’s the first Friday of the month again, which means it’s also time for another installment for First Friday Giveaways. First, though, it’s also time to announce the winner of last month’s (non-First-Friday) giveaway of 500 free business cards from U-Printing. The winner is:

Karissa Wingate (@karissawingate)

Congratulations Karissa! I hope you can put the cards to really good use.

Okay, so this month we have an incredible prize up for grabs, as the good folks over at TrendyPacks.com have made a single license of their incredible Infinity Design Pack, which literally contains thousands of vectors and other design elements. This will make an incredible addition any designer’s arsenal of resources.

Trendy Packs Giveaway

I’ve had the chance to check out and work with the elements in this pack, and I have to say that they totally rock. The vectors are all of incredibly high quality, and there’s all sorts of different things to choose from. The pack contains all of your staples, such as grunge elements, floral, a few wings and, of course, skulls for rocking off trendy t-shirts. It also contains some awesome character illustrations, some great animals, and a whole miscellany of cool elements.

Here are some of my personal favorites

Awesome Animals

Marvelous Mushrooms

Cartoony Characters

Heroic Heraldry

Most of these vectors are also available as Photoshop brushes too, which makes the entire pack almost twice as valuable.

And, as if all those vectors and brushes weren’t enough, the Infinity Design Pack also comes complete with 13 complete and beautiful website Photoshop templates. These can be incredibly valuable resources for designers, providing layout ideas or a starting point that you can completely customize to your own needs and tastes. I’ve had a look at these templates too, and I have to say, I’m pretty impressed. They are lovely, and more importantly, very well organized!

That’s a ton of great resources, and this amazing pack be yours for free if you’re the winner of this giveaway!

So here’s how to enter:

1. Follow me on Twitter. Trust me, I won’t clog your feed and I always try to tweet interesting articles and resources!
2. Mosey on back here and comment. Include your Twitter handle (eg. @echoenduring), your email address (so I can contact you if you win) and a note about why you want to win this sweet prize!
3. Spread the word! Tell everyone you know! Tweet this post, stumble it, blog it or post it to your favorite social network of choice! I’d really appreciate it! (optional)

A few basic contest rules:

1. Only enter once.
2. Contest closes after midnight (Standard Eastern Time) on June 28.
3. I will be tabulating entries, and selecting and contacting the winner within several days of the contest closing.
4. We will then make arrangements for you to claim your prize!

So there you go. That should be all the details you need. So go on, enter this contest! Oh, and don’t forget to head over to TrendyPacks.com and take a closer look at their full range of awesome design resources!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

There is an interesting term that I have heard (read) repeated in several places across the vastness that is the internet. That term is “pixel-perfect.” I think its origins are found in the minds of the same people who refer to themselves as pixel pushers, or some other clever, alliterative name. In the context of web design, it basically seems to boil down to the notion of having a place very every pixel, and more importantly, every pixel in its place.

Said another way, it’s about forcing a website to render exactly the way we want it to, in every possible instance.

Of course, anyone who has been in the business for more than a week knows that – as things currently stand – this level of perfection is far easier to imagine than to actually execute. In a recent article over on Drawar, Scrivs bemoans the continuing inconsistencies in contemporary browser rendering engines:

I’m tired. I’m tired of looking at one browser and seeing a result only to find that another browser decided to see things differently. I’m tired of reading CSS3 and HTML5 articles that show me hot new things only to tell me that they will work in some browsers and not others. I’m tired because it’s 2010 and we are still dealing with the same issues that we thought we were solving with CSS back in 2002.

I feel his pain. After all, the web the only area of design that I can think of that actually relies on multiple rendering engines to display a design. When working with print, you are designing for something much more static. There may be rendering issues to deal with on the press, but once the piece is actually printed, it isn’t prone to shifting or breaking depending on how somebody views it.

Application design may come a little closer to the problem we have on the web, but even there I don’t think that designers struggle as much with variation since, by and large, they are working within a singular operating (or family of) operating system(s), making it easy enough to produce consistently predictable results.

Web design is an entirely different beast, and, while I do think that we have made some significant strides over the past ten years, every designer and developer who works on this infinitely large, digital canvas that we call the internet has to come to terms with the simple fact that different browsers will render the same pages with slight (and sometimes massive) differences.

The reality is that, if we want to achieve pixel-perfection and have our designs look the same in every browser, we’re going to spend hours and hours making slight (or not-so-slight) design adjustments, writing CSS hacks and even building entirely different style sheets. In the worst of cases, we might even implement third party scripts to fake an unsupported feature, or to help smooth out something buggy. It’s a hodge-podge way to design and code, but though it’s less than ideal it’s something that just has to be done through that pursuit of perfection.

Or does it?

I may rustle a few feathers here, but here’s a simple question: what would happen if we stopped chasing perfection? What would happen if, instead of cursing browser differences, we embraced them?

It might just cause a revolution in the way we approach design.

The Ballpark Analogy

If you’ve been around this blog before and read some of my other posts and articles, you will probably know that I like to approach things through metaphor and analogy. You may also know that I love baseball. So, please forgive me as I indulge myself in a simple baseball analogy.

Why do we strive for pixel-perfection (image from Shutterstock)

As with any organized sport, in Major League Baseball there are a certain set of rules that govern the way the game is played. If you’re familiar with the sport, you probably know at least the basics – nine innings, three strikes, four balls, three bases and a home plate etc. Aside from the significant designated hitter difference between the National and American leagues, the same rules apply in every game, on any given night throughout the season.

However, that doesn’t mean that the players approach every game the same. There are a number of factors to consider, not the least of which is the ballpark in which the game is being played. Not all stadiums are the same, and those differences will impact the way the game is actually played.

For instance, compare Boston’s Fenway Park against Toronto’s Rogers Center (SkyDome). Fenway has a natural grass field; Rogers Centre uses a synthetic turf. Fenway is an outdoor stadium; Rogers Centre has a retractable roof, allowing for indoor baseball in inclement whether. Fenway has an asymmetrical outfield structure, with the iconic Green Monster out in left field; Rogers Centre has a much more symmetrical layout and fences of a normal height.

When you look at all of these factors separately, they may not seem like such a huge deal, but they all effect the way the game is played. The difference in playing surface changes the way the ball hops. The retractable roof changes the movement of their air, effecting the way the ball travels. The Green Monster can make or break home runs, and has a huge impact on the way the left fielder has to position himself. If players can’t adjust, you will find that they play really well in one stadium and very poorly in another. In fact, this is actually statistically true of many professional players, offering concrete evidence that the game is not exactly the same in every park.

We can think of web browsers in much the same way. We’re all playing the same game, but there are certain circumstantial differences from one browser to another. So, instead of trying to force everything to work in an identical manner, perhaps it would be better to embrace diversity and the uniqueness of each rendering engine.

The Key Question

This whole idea of abandoning the quest for pixel-perfection in web design invariably asks the question: why are we so concerned with perfection anyhow? Why have we convinced ourselves that it is absolutely imperative that designs render exactly the same way in every browser?

Measuring successful design differently (image from Shutterstock)

Again, the answer to this question probably has its roots in the world of print where, as we have already discussed, browser variance is simply not an issue. As such, I think that for many designers coming over to the web from print, there is this lingering expectation (conscious or otherwise), that their designs should remain pixel perfect and entirely unaltered.

It may also be partially symptomatic of the amount of web design that takes place in Photoshop. After all, when a designer rocks out an awesome, graphically rich design, it only makes sense for them to want to see it rendered exactly as it was designed.

But isn’t this also missing the point?

What’s that line that keeps floating around the blogsphere these days? Content is king. It’s becoming one of the most prevalent cliches on the internet, but is no less true because of it. A website (like any form of design), in almost any manifestation, is a gateway through which to present content to a particular readership or audience. Often, however, I think that designers – and even clients – can get this important relationship mixed up. Emphasis gets put on the design rather than the content.

Yet, if content is really the main ingredient for any successful website, and that content is the reason that visitors actually visit a site (as I believe it is), then the question the follows might be: is a cross-browser-pixel-perfect design really necessary?

What if we just focused on making sure that the site looks good in all the browsers, rather than obsessing over trying to make it look the same?

A Different Kind of Measurement

As I was working through my own thoughts and preparing this article, I invariably found myself wondering what this shift away from the pursuit of perfection might actually look like in the real world. I felt like I needed to provide some examples. But l won’t, since I subsequently realized that we’ve probably all seen (if not created) sites that make use of browser-based variation through either graceful degradation and progressive enhancement – two concepts that I would like to consider for a moment.

While these concepts are certainly related, they are also divided along philosophical grounds. Graceful degradation involves building an advanced site, and creating “fallback” for older browsers that don’t support certain functionality. Progressive enhancement, on the other hand, involves creating an initial layout that works in all browsers, and then adding enhancements based on the availability of more advanced features.

Measuring successful design differently (image from Shutterstock)

Somehow, progressive enhancement just seems like a more intuitive choice, since it’s more about building a solid foundation, rather than constructing everything first and then implementing fixes to allow for a broad range of support at the end. Either way, however, you’re left with a site the behaves differently in different browsers, and that’s part of what we’re looking at in this article.

And that brings us to the core issue, which is not whether to progressively enhance your sites or allow them to gracefully degrade. The issue is that, as things currently stand, the pursuit of perfection (whether achieved or not), cannot be measured in terms of pixels and sameness. If it is to be measured at all, it should be in the context of usability, layout, typography and/or user experience.

Look at your design in the latest version of Chrome and the oldest version of Internet Explorer that you support. Does the site look the same? Probably not, but better questions would be: is the content accessible? Is the design and layout attractive in its own right? Is the overall message (both literal and implied) fully conveyed?

If you can answer yes to all of these questions, then that’s an excellent indication that you have created a strong, usable design, even if it doesn’t render exactly the same in all browsers.

Conclusion

Now, I want to stress that I am not advocating for an abandonment of a more consistent level of rendering between browsers. I would love to see that happen. Not only would it make our lives easier as designers, it would also provide a more enjoyable and predictable user experience. So if, as the Drawar article suggests, Internet Explorer was to embrace Webkit, I would be the first in line to support it.

Until that day comes though (if it ever does), we need to keep our attention focused on usability and user experience rather than the pursuit of pixel-perfection, which in many cases can be like trying to force a square peg into a round hole.

I also want to emphasize that what I am looking at here is not absolute. I am not taking a stand and saying that this is the way to approach web design. I am simply trying to raise an issue, ask a few questions and hopefully initiate a bit of a dialogue with on the subject.

So what do you think? Do you obsess over creating pixel perfect designs in every single browser, or do you take a somewhat looser approach and allow the different browsers to take their course (within limits)? Why do you chose that position? Come on and share your thoughts. Let’s have a conversation.

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

So, here we are in the fourth part of this series about icons and the web. So far we have talked about why icons are important, where to find them and how to organize them. This is all very good, solid information, but it becomes very meaningless very quickly if you never get to the point of actually implementing those icons into your design!

Icons and the Web - Part 4: Implementation

That’s what this article is going to be all about. We’ll look at some of the things that you are going to want to keep in mind when adding icons to a website. We’ll cover consistency, size, image types, sprites, metaphor and cultural differences, all of which will make for a fairly extensive article. That being said, however, I want to stress that this discussion is meant only as a general set of guidelines, and not as hard fast rules that absolutely need to be followed.

So let’s get started!

Consistency

One of the most important things to remember when implementing icons into your web designs is the concept of consistency. In its most basic form, this means using icons that work together, or that at least don’t fight with each other. There are several different ways to look at consitency.

First, you may want to consider general style. If most of the icons that you are using are of the glossy or shinny variety, chances are that you are not going to want to throw a grunge icon or a sticker icon into the mix. It just wouldn’t fit. Instead, everything should have a nice, unified appearance. The website for the OS X task management app Things does a good job of this.

Simple, consistent icons

All of the icons have a similar feel and general aesthetic appearance. Imagine how the continuity would be effected if all of the icons were from different sets. It would certainly be lessened (or perhaps completely broken) and the overall design would surely suffer because of it.

Another area that can help maintain consistency between icons is a focus on colour. Many icon packs have a tendency to use similar hues and shades throughout their various icons. For example, the Shine pack from IconEden uses a the same basic green, orange and light grey scheme through most of the set.

Colour helps to establish unity in this set

This certainly builds a very strong sense of continuity throughout all the icons, a continuity that would be translated into any website that implemented these.

Perspective, position and rotation can also play a strong role in consistency. Many sets will use a common “camera angle” for all of their icons. Often, focus on perspective becomes a crucial element of the overall design. For example, here are some icons from two different social media sets from IconShock:

Different icons at different angles

Notice that, though each set is awesome and detailed, they are each set at significantly different angles. As such, combining icons from these two sets would likely cause real sense of disunity, making a design feel awkward or unfinished.

Size

Icons come in all different sizes, and when you’re looking to include them in your web designs, there are several size related issues that you should consider.

The first is the purpose for which you will be using the icons. There are many different reasons why you might want to include an icon in a site design, and for each reason, a different icon size might be more appropriate. Here are just a few examples.

Tools or Options – If your site is more of an application based site, then you will likely be using several icons to help represent different types of functionality within your site. In this case, small and simple icons will generally be more useful. Facebook is a perfect example.

Facebook makes excellent use of smaller icons

This is a screenshot from the current Facebook sidebar. Each link leads to a specific application within the site, and is represented by its own unique icon.

Visual Meaning – Many pages elect to use icons to help support an idea or concept. This is particularly popular for sites listing a collection of features for a given service or product. In this situation, a medium sized icon will generally work the best. Here is an example from the website of Episodic, and online video platform.

Medium sized icons used to emphasize meaning

Each icon supports a different feature of the product that they are offering. They are chosen to visually reinforce the message behind each feature, and also work very well to break up what would otherwise be a great deal of text.

Also, notice the size of the icons. They are not nearly as small the ones we saw in the Facebook screenshot, and are large enough to have a nice, somewhat glossy effect on them. However, they are not so large as to be distracting. Of course, the exact size for this kind of icon use is going to vary from page to page. The more features you have, the smaller you will probably want to make the icons, just for the sake of balance. On the other hand, if there are only two or three features, you could also make the icons a bit larger, to really draw attention.

Application Websites – Another use of icons on websites can take an almost logo-like approach, especially for sites whose primary purpose is to promote a particular program or application. The atebits home page is a perfect example of this, featuring the icons for its Scribbles, Tweetie and Tweetie 2 (for iPhone) apps.

Larger icons used to promote their applications

Because the purpose of the icons is actually to represent their own individual applications, it only makes sense to present them in a large beautifully crafted manner. This is especially true since the icons themselves are so exquisitely designed.

The other sizing issue that you need to consider is scalability. Many of the icons that are available out there these days are almost like works of art in their own right. They are large and beautifully rendered with incredibly precise detail. However, beyond a certain point, these specific icons just don’t scale down all that well. That being said, however, some sets do come packaged with smaller versions, specifically designed to fit into a fewer number of pixels.

Image Types

There are essentially three types of images that you can use to integrate icons in your web designs. These are these same three image types that supported by all major browsers – JPG, GIF and PNG. Each type has its own advantages and disadvantages.

JPG – This image format is ideal for detailed icons on a static background. It offers a full range of colours, and can be used for those beautiful and highly detailed icons that can really bring a lot of beauty to a site. The JPG also offers excellent compression, though its important to find a balance. Too much compression and your icons will start to lose their quality and become overly rastered. If there’s not enough compression, though, image files can become unnecessarily bloated.

The downside of JPGs is that they don’t support any level of transparency. As such, they either need to be set against a solid background (which matches the background of the image itself), or placed with a near pixel perfect accuracy.

GIF – Not nearly so common as it used to be, the GIF is a much smaller type of image, limited to an index of only 256 colours. Fortunately, this index can be customized and does not have to be limited to the standard index of the old 256 colour space. This colour limit is both an advantage and a disadvantage.

On the one hand, it can be really great for small and simple icons, like the ones we saw from Facebook. They only have a few basic colours each, so using the GIF format is perfect, and yields really tiny file sizes.

On the other hand, the GIF tends to fail with any real level of detail. Because of the severe colour limit, even mildly complex images quickly become grainy and pixelated, losing much of their detail.

The GIF format does support a very basic level of transparency, but it is very limited. It can basically take a single colour from the index and render it as fully transparent. As such, it is pretty much an all or nothing kind of transparency that only has a few limited uses in modern web design.

PNG – The PNG is probably my favourite image time, due mostly to its versatility. It offers the full colour gamut of the JPG, along with a vastly superior form of transparency, which works independently of the colour information. This means that any coloured pixel can have a transparency level within 256 degrees. This allows for a great deal more flexibility with your images, and allows you to place icons over complex backgrounds, which can be huge advantage in terms of implementation.

PNG images do tend to be larger than either compressed JPEGs or GIFs, so that’s something that needs to be taken into account during your development. It’s also important to remember that Internet Explorer 6 doesn’t support full PNG transparency. Some very clever people have developed methods of getting around this problem, but you still always need to keep it in mind if you plan on developing websites that support IE6.

Each of these three types can be appropriate in different situations, so it’s always a good idea to choose your image format based on circumstance and what will prove to be the overall most efficient option for what you are trying to do.

Icon Sprites

This won’t always apply, but you may occasionally want to make some sort of interactive change to your icons. For instance, I recently created a menu that used icons above the text labels. I wanted all of the icons to have the same monochromatic colouring, except for the icon of the current page, which would appear in full colour. The concept, of course, was to delineate the current page within the menu itself.

To achieve this, I made use of CSS Sprites, placing all of the different icons, in both their monochromatic and full colour states, into a single image. I then used the image as the background of of the HTML list elements that made up the menu, adjusting positioning values as necessary. It’s all basic sprite work, and helps to keep overall overhead down by reducing the number of HTTP requests.

Recently, I also read a really interesting and clever article over at NETTUTS+ outlining the possibility of using @font-face in CSS to implement icons through a custom font. It’s not quite the same thing as using sprites, but it has many of the same advantages. Be sure to check it out.

Metaphor

In the first part of this series, we talked quite a bit about what an icon is, and how it is meant to represent something else. One of the examples we used was the floppy disc as a well recognized symbol the action that would save a file document. This basic premise is really little more than metaphor in action. As such, I would suggest that a strong metaphor is an intrinsically important part of good icon implementation.

Your use of icons needs to make sense, especially in circumstances where they may not be surrounded by words that give them context (though, in this case, it would probably be a good idea to use a tooltip). So, if you want to have a save function, you would do best to use the floppy disc or, if you really want to get away from that, something like an SD card.

What you don’t want to use is something like a life preserver. This may seem to make sense, since it is something that can be used to “save” someone who is drowning, but this isn’t quite the same as saving a file, so the metaphor is not as strong. Also, the life preserver is occasionally used to represent help or support functionality, so using it in a different way may be counter-intuitive for your users, leading to confusion and frustration.

Always give careful consideration to the implied metaphors of your icons.

Cultural Differences

Of course, analyzing metaphor is not always easy or obvious. We all think, visualize and conceptualize in our own unique ways, but the fact remains that a lot of what influences these faculties is actually our immersion in our own cultures. If you’re building a site for a client in a different country, and are looking to implement icons into the design, be sure to keep these cultural differences in mind.

To use a really broad and general example, suppose I was designing a site for a client in South Africa (to pick a seemingly but not entirely random location), and that I wanted to implement the an icon to represent the concept of sport. As a good, true blooded Canadian, my first instinct might be to use a hockey icon, like this stick and puck from Kevin Anderson’s Sports Illustrated icon set:

Ice hockey

For me, and many of my Canadian compatriots, the hockey metaphor would work perfectly. How many people really play hockey in South Africa though? I put this question to South African native Sue Rutherford on Twitter. Her response was that they typically follow soccer and rugby. As such, the hockey metaphor loses some of its meaning and may not be the most appropriate choice, given what the icon is supposed to represent.

A better option would probably be a soccer ball (or football, if you prefer). This might be even more relevant with the FIFA World Cup coming up in South Africa this summer.

A soccer ball

Moreover, soccer is also a far more international sport, meaning that his icon will also likely be more widely understood by visitors from around the world.

So, if you are designing a site that will have a world wide audience, or if you are designing for a client in another continent, or even just another country, keep the idea of cultural difference firmly in your mind. You might also want to consider doing some research and testing, just to make sure that the icons you want to use actually have convey the meaning you intend.

Conclusion

I really believe that icons are a great way to add extra meaning, usability and visual flair to a website. I also believe these icons need to be implemented thoughtfully and with a careful attention to detail. Too often, I’ve seen great websites that are dragged down or disrupted by the poor deployment of icons that seem to have been added almost as an afterthought.

What about you? Do you have any thoughts on this matter, or any other areas that you think need to be addressed when implementing icons into a website? Please feel free to share!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

Here we are with part three in the continuing discussion of using icons on the web. In part 1 we considered why icons are important and how they can add usability and value to your designs. In part 2, we looked at some techniques that you can use to search for icons and begin building your own library.

Icons and the Web – Part 3: Organizing Your Icons

If you keep building your library, though, you may eventually end up with a large amount of icons. When you get to this point, it can always be a good idea to try to find a way to organize your icons for easy access and retrieval. In this post, I want to look at some techniques that you can use to keep your icon library nice and organized – or any other media library for that matter.

Why Organizing is Important

Currently, I have hundreds of icons sitting in my own library. Over time, it is not at all unreasonable to expect that that number will slowly climb into the thousands. When I go looking for an icon or group of icons to use in a web design, the last thing that I want to do is have to manually wade through all of these manually.

Trust me – I’ve done this before. It is not at all efficient and the very thought of it makes me shudder.

Organizing is just a better way to go about it. Just think about a real library. How many books do you think it has? That will vary, of course, but thinking back to the library where I spent so much time as an undergraduate and graduate student, I would hazard a guess and say that they have hundreds of thousands of books.

Now suppose that I want to find one book in that entire collection. I don’t just walk in, look at the first book on the first shelf and then move from volume to volume hoping to find the one I want! I use the index system to look for the specific title, determine it’s call number and where in the library the book is and go find it. In a matter of minutes, I have exactly what I was looking for.

I do the same thing with my own books, too! I have four large bookcases in our basement, and each case generally holds a different type of book. All of my many fantasy novels are in one bookcase. All of by theoretical textbooks are on another. If I need to find something specific, I know just where to look.

Organizing your icons can offer all the same benefits! Instead of spending hours looking through all your icons individually, a good library should make location and retrieval simple and relatively painless.

Categorize

Probably the best way to start to organize your icon library is to establish a method of categorization, which will allow you to break your icons into logical and manageable groups. This, in turn, can make finding your icons just that much easier.

Categorizing your icons is a great way to get organized

There are several different ways that you could choose to categorize:

By Publisher – If you tend to get all of your icons from a few key sources (like those listed in part 2), then you might consider categorizing your icons according to the publisher. This can help keep the creator of the icons at the front of your mind when it comes time to giving any necessary credit.

Also, a single publisher will often release multiple icon packs in the same – or at least very similar – style. Grouping your icons this way can be one useful way to help you find similar icons from different sets!

By File Type – In my icon library I have icons in AI, EPS, PNG, PSD, and ICO formats. There’s not too much difference between the AI and EPS icons, but there’s a world of difference between them and the PSD icons. Then there are the PNG icons, which are flattened and much more difficult to edit. The ICO icons are probably the least flexible, and are rarely used.

Categorizing icons by file type can be most helpful for people who tend to select their icons based on file types. Perhaps you are always looking for varying degrees of editability, or prefer to use vector icons in some situations and PSD or PNG icons in others. If that’s you, then using file type categorization might well be your best bet!

By Set – This is the way I am currently organized, and so far it has worked reasonably well for me. I basically just decompress each icon set to its own unique folder. I like to look at my icons in terms of their larger set, so this seemed a logical choice for me.

As my icon library has continue to grow, however, it is becoming less and less efficient. I will certainly be picking up another means of organizing them as soon as possible. As such, I would really only recommend this method of organizing for small libraries, or as a means of creating sub-categories withing a larger organizational construct.

By License – Filling your icons sets according to license type can be a great approach if your range of projects demands an equally diverse range of usage options. Perhaps you’re doing a bunch of personal projects for yourself (or others), some non-profit work and websites for commercial clients. Each of these types of projects may allow you to use different icons in your library, based on the unique license agreement.

Having your icons organized by license gives you a simple and easy way of filtering out sets which, though they may contain awesome material, may simply be unusable based simply on the license. It can also help fend of the disappointment of finding the perfect icon but not being able to use it because of license limitations.

By Theme/Style – You could also organize your library into thematic groups like social media icons or blogging icons. If you do a lot of work in a particular niche, you may also have some more specific general themes such as medical icons or academic icons. Alternatively, you can also organize based on styles. Grunge, glossy and sticker icons would all be different types of styles, based on the visual appearance of the icons themselves.

In many ways, I think that this may be the most useful way of organizing your icons, since the theme or style of an icon will frequently be one of the deciding which icons to implement in your website designs.

Using a Folder Structured

Both OS X and Windows provide a natural way of organizing your icon files, through the use of various folders and sub-folders. For example, you can create a one folder called “Icons” and then create a series of other sub folders, based on whatever method of categorization you choose.

Using a folder structure is a simple and easy way to organize

This is precisely the method that I am currently using, and so far it has worked pretty well, especially since my Mac is actually able to preview AI files. I can quickly navigate up and down through the folder structure, previewing the various icons as I look for a set to use.

The advantage of this method is that it’s really easy to set up and does not require and additional software. Just create your folders and go.

It does, however, start to become somewhat cumbersome for large libraries with dozens and dozens of subfolders to look through. You are also limited to just a single means of organization – you cannot really organize the icons independently by both theme and license. The best you can do is to create subfolders for each unique theme, and then create further subfolders within those for the different forms of licensing.

It all works, but it might be just a bit cumbersome. That’s where an often overlooked application like Adobe Bridge can become an incredibly valuable tool.

Using Bridge

I know that a lot of people aren’t a huge of using Bridge – it can be a little buggy and a real drain on system resources, especially for an application that is essentially a means of managing documents and creating an effective connection between applications in the Creative Suite. If does, however, have some unique features which can actually make it a really great choice for managing image libraries.

Adobe Bridge has some great organization functionality

First of all, Bridge can actually display and preview nearly all major image formats, including AI and EPS files, which is a huge advantage for Windows users and over many other image browsing packages, many of which typically only work with bitmap-based images such as JPEG or PNG. In my experience, the only common icon format which Bridge cannot handle is the ICO file.

Moreover, Brdige also also provides some other interesting options that can help you improve the organization of your icon library. One great feature is the ability to assign keywords to files. As far as I can tell, you can use this almost like a tagging system. You create a series of words in the Keywords panel and then assign those keywords to different files. You can even create a sub keywords help maintain a logical structure.

Of course, on their own, keywords don’t really do you all that much good, and this leads us to the next part of Bridge that can be useful for us – filters. Filters allow you to limit the files that are displayed based on certain conditions, one of which is for specific keywords (you can also filter by other types of meta data too). So, after assigning some keywords to a bunch of different files, you can use the filter tool to retrieve only those files that have that particular keyword assigned to them.

That makes for a handy little organizational tool.

Lastly, you can also build what are called collections in bridge. A collection is kind of like a folder full of file references, and as such can actually contain files from multiple folders across your computer. This makes building an effective library really easy and flexible.

For instance, I can create a single collection called Icons to house all of my different icon files. I can then apply a variety of different filters to help narrow down my search! These filters could be on keywords or file types or even creation and modification dates. You can then use Bridge to open the icons in Illustrator, Photoshop, InDesign or any of the other applications within the Creative Suite.

I will be adapting this exact kind of icon organization myself before too long. I will also probably also use it for other design elements such as vectors and textures.

Conclusion

I know that this was somewhat of a different sort of post, and I am certainly not trying to tell you exactly how to organize your icons (or any other design elements for that matter). I do hope, however, that this third part of our Icons and the Web series has shown you the importance of organization and provided you with some ideas as to how to get your own library in order.

Now it’s your turn to talk. What kinds of techniques, methods or applications do you guys use to keep your icons and other resources well organized for easy retrieval? Please feel free to share! We’d all love to hear your thoughts and ideas!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

Man, it feels like it’s been a long week, and I don’t feel that I have a ton to show for it. Last week, I mentioned that I had another tutorial in the works, and that one’s finally been published over on MyInkBlog. And when I say finally, I am totally pointing the finger at me. For a variety of reasons, that particular post took me forever to finish. But it’s up now, and if you should go have a read if you haven’t already.

I also finished another vector character pack for the guys over at MediaLoot. This one was another guy, but this time I tried to make him a bit more like an artist, and built in several extra accessories, such as a paintbrush, a portfolio, a chalkboard and a clipboard. I’m pretty happy with the overall finished product.

Other than that, I’ve just been enjoying this fine weather and celebrating with some really good friends who just welcomed the first child. That was pretty awesome!

Anyhow, let’s get on to this week’s Echoes!

Logo – Zeughaus

It’s amazing how many logos I feature here on Echoes where I have absolutely no idea what the name means. We have another one this week.

Zeughaus PPP AG

Still, this is a really nice design. The designer’s comments on this one say that the “client asked for something dynamic and futuristic,” and I think that it really does a pretty good job in this regard. I really like the way the mark itself offers an interesting treatment of what is, essentially, just a basic half-tone pattern. The bright reds, oranges and whites give the mark a real sense of energy, as does the seemingly random arrangement of the colours.

I always like to talk about how a logo will translate into black and white too, and I think this one works. At first glance, I wasn’t so sure, because a lot of the effect seems to come from the colour. However, upon further inspection, it becomes clear that some of that energy also comes from the halftone pattern itself. As such, I do think that the logo will translate well into black and white.

Art – Assassins Creed

One of my favorite video games from the past few years has to be Assassin’s Creed. I really enjoy the dynamic of the first game and have the sequel sitting on my shelf just waiting to be played. This week’s art features a really nice fan image of that game.

Assassin's Creed

It doesn’t look like our Assassin is doing all that well in this particular piece, being underwater with an arrow sticking out of his shoulder, but the image is still really nice. I’m especially fond of the way that the water is rendered in this one. The blues are really vibrant and the bubbles look great.

What I really like, though, is the same thing that first drew me to the game itself – the costume. I love the design of the assassin’s outfit cloak and cowl. The bright red against the white, combined with the concealing hood, really combines to create a character who is unique and memorable, yet blends seamlessly into the game environment. This painting does a great job of capturing that costume!

Tutorial – Create Custom Option Panels with WordPress 2.9

For the second straight week, I am bringing you a WordPress tutorial. Last week, I was working on a WordPress site where I needed to set a custom option for the entire site, so when I came across this one it was really awesome.

Create Custom Option Panels with WordPress 2.9

Basically, this tutorial will show you how to go about creating your own custom options panel for the WordPress administration from within your theme (with no need for a plugin). This was incredibly useful for me, and I’m sure that it could prove equally useful to you too if you do any significant development in WordPress.

For me, I was creating a WordPress blog as an extension of a site that was running off of Concrete5. I wanted to keep the same basic design and didn’t want to upload all the same design based images again (it’s just inefficient). So, I set up a universal property which contained the URL to the Concrete5 theme, including all images and stylesheets, allowing me to very easily adapt the site’s basic theme into the blog. I’m sure you could do all kinds of similar things by creating your own options panel.

Website – Brizk Design

Some of you may have already seen this site, which has been tweeted a few times today by some fairly major players in the design community, but I thought I would feature it anyhow, for those of you who may not have seen it yet.

Brizk Design

The design itself has a nice, watercolour based minimalism, prominently featuring the hand painted hummingbird as the cornerstone of the site’s visuals. Other hand painted items – leaves, flowers and a butterfly – also appear across this single-paged site, bringing a strong sense of continuity to the overall site design.

The site also has some really nice animation effects, which I would like to draw to your attention. First, it is one of those single page sites were clicking on any of the navigation items will actually cause the page to automatically scroll down to the appropriate section. Try scrolling on your own, though, and watch as the active menu item changes as you hit each new section. Very slick. Also, try hovering over the tiny little bird icon at the bottom of the page. A footer bar pops up with the latest tweet and a link to follow the designer. These are the little touches that can really turn a site into something special!

Well that’s it for this week’s Echoes. Which ones were your favorites? As always, if you know of any designs, tutorials or art that merits being included in a future post, feel free to let me know about it!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

This is the second article in a series addressing the use of icons in web design. In the first article, we looked at what an icon is and why it can be an important element web design. Of course, that’s all well and good, but before you can start building icons into your designs, first you need to actually get your hands on some icons. In this article, we will discuss the process of locating and gathering icons for your own library.

Icons and the Web – Part 2: Collecting Icons

Really, icon design is an entire creative branch onto itself, one tends to cross over into the realm of illustration (which is an entirely separate topic to be addressed at a different time). There are certainly many web designers out there who are also capable of creating their own icons, but there are also many more who just don’t have the time, interest or skill to invest in this creative process. Fortunately, there are numerous steps and resources that you can make use of for finding awesome and usable icons.

What follows are some tips that I’ve picked up in building an icon library throughout the course of my own design work.

Keep Your Eyes Peeled

There are hundreds of blogs and other sites giving away different freebie icons sets every single day. Frequently, blog and magazine owners will also publish lists that collect great new icons releases, or of icons of a particular type or design. More often than not, these icons seem to be of the social media type (which, though popular, may be getting just a wee bit tedious), but there are also some other types of really, really great icon sets being released.

So, I suggest keeping a careful eye on your RSS reader, and being willing to spring into download mode at a moment’s notice. When you see an awesome icon set, or something that you think you will be able to make use of at some point in the future, just go ahead and download it to your library for use at a later date. If you’re really lucky, you might even find a new set that is absolutely perfect for your current project!

Also, most sets tend to come in a compressed archive of some sort. Check the contents and make sure that there is a readme file or other documentation outlining credit and licensing information. If there’s not, I would recommend creating a quick text file yourself, and filling it with any pertinent information, such as the artist, the site you downloaded the set from and the license. That way, if you come back to the set months later, it’s quick and easy to find that information.

Bigger is Often Better

Typically, I have also found larger sets to be vastly more useful than smaller sets, simply on the basis of variety. Unless you have specifically commissioned an icon set, the chances of finding a small set with all of the exact icons that you are looking for or feel that you need is probably pretty rare. Since larger sets generally offer a wider variety, they are often also much more useful.

IconEden's Bright set is really extensive, especially for a free set

However, this is not always necessarily the case. Some icons sets can be quite large in terms of the number of icons that they present, but very narrow in the variety of those icons. For instance, a set may contain dozens of glassy button icons, with the same shapes repeated over and over, just in different colours. Or, you may have only a few core icons which are simply used together in other combinations to create more “unique” icons.

Now don’t get me wrong. Neither of these are necessarily bad things when it comes to icon sets. They are simply techniques by which a larger icon set can actually have a much smaller variety (and thus a more minimal potential usefulness) than it’s size might lead you to believe.

Nor am I saying that you should avoid smaller packs, many of which can be a real goldmine! I have simply found myself using the larger packs in my library on a much more frequent basis.

Establish An Icon Map

When starting out on a new project, it can be both helpful and beneficial to begin developing what I like to call an icon map. Basically, it’s a matter of examining the specific needs of the particular site that you are working and making a list of the areas in which you are going to need icons. This list then becomes your icon map, and can work as a guide for helping you determine which icon pack (or packs if you are combining several) will best serve your unique needs.

With this list in hand, you can then begin browsing through the different icon sets that are available to you, either online or in your own library. You can then cross check what’s available in each given pack against what you need. Obviously, the pack that meets the most of your unique needs is likely going to be the pack that you will want to implement.

Also, try not get to focused on one particular icon object (unless you have a good reason). Often, there are several different objects that can represent the same concept, though perhaps with slightly different connotations. For example, the concept of video could be represented by a camcorder, by a strip of film or by a television set. Being more open to different icon objects can often help you get more value and use out of a given pack.

Know Your License

One thing to keep in mind when searching for icons to use in your web designs is the fact that there is a large audience out there who are also looking for application icons, which they can use in their operating systems. As such, many icons are made available free of charge for personal use and this kind of customization. In these cases, the icons are often not available for public and/or commercial use, which may (or may not) rule out their use in your next design.

Even if the icons in a pack are not designed specifically as application icons, it is always important to read and understand the license agreement. Different artists release their work for use in different circumstances. Some icons may be completely free, with no strings attached. Others may require credit, or a backlink, or may limit the ways in which their icons can be used.

Always be sure to follow the specific terms laid out in these agreements. If the creator is kind enough to release them free of charge, it’s only common courtesy to adhere to their wishes. If your particular needs fall outside of the scope of the license, consider contacting the creator and seeing if you can work out an alternate arrangement. You may have to pay a little bit, but hopefully it’s a small price for the perfect icon set!

Resources

Of course, all of this talk about picking and choosing the right icons and building your own library won’t do anyone a lick of good if you don’t know where to find awesome icon sets in the first place! Well, I’m going to help you out in that regard too! Here are some great resources for finding equally awesome icons (both free and paid).

IconEden

IconEden is a great icon site, and some of my all time favorite icon sets have come from here, including the Bright and Milky sets, both of which are good sized and totally free sets. Additionally, IconEden also has a collection of premium sets, featuring as many as 440 awesome icons in a single set! Be sure to check them out!

IconEden

DryIcons

DryIcons is one of the single largest repositories of totally rocking icons, which can be used in both personal and commercial projects! One of the only requirements is to provide a link back to the DryIcons site, which is certainly a small price to pay for such awesome resources. If you just can’t bring yourself to add the link, though, you can always purchase a commercial license too.

DryIcons

IconShock

Like DryIcons, IconShock offers a huge repository of free icons for both personal and commercial use. Again, you will find plenty of social media related icons here, and even more character icons, based on popular cultural works (movies, video games, comics). Many of the free sets are simply samples of larger, premium packs, which can be purchased for a price.

IconShock

IconLab

IconLab is an icon design firm offering a variety of different icons. They have some really cool freebie icons, and some really great premium ones. I’ve reviewed some of the pricing on these premium icons too, and it’s very reasonable for the quality of the icons.

IconLab

IconDock

IconDock is an icon site by Nick La, creator of Web Designer Wall and the founder of N.Design Studio. Nick has created some really awesome icons, most of which are of a premium nature and can be purchased in packs, or individually, which is something I haven’t seen on too many other icon sites. There are also some freebies available too, but you have to visit the blog portion of the site to find them.

IconDock

MediaLoot

Icons are certainly among the many different design resources that MediaLoot has to offer. Many are reserved strictly for members, but there are also some really awesome freebie sets that you can download for free. MediaLoot is still a really new site too, so you can definitely expect the total icon library to grow.

MediaLoot - Premium Graphic Design Resources

deviantART

Obviously, deviantART is so much more than just an icon repository, but there are plenty of awesome icons to be found there, if you’re willing to take the time to really look. A word of warning though: many of these icons are provided strictly for desktop customization (as discussed above) and may not be available for use in your next web design.

deviantART

Smashing Magazine

I certainly recognize that Smashing Magazine is more than an icon site, but it is also one of my favourite resources to turn to when I’m looking for a new icon set. They have released a number of their own freebie icons, but even more importantly they periodically publish lists of some of the best new icons out there on the net!

Smashing Magazine

Conclusion

Now, through two articles, we’ve discussed why using icons can be hugely beneficial for your web designs, and looked at where and how to find sets to help build your own library. Next week, we’ll look at some techniques for helping you organize those icons!

In the meantime, feel free to share your own thoughts and views on building an icon library. Is there another site or resource that you would recommend? Do you have any other tips for finding the best and most relevant icons?

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd