Archive for November, 2011

The use of illustration in web design

Wednesday, November 30th, 2011

The use of illustration in web designIllustration is an incredibly versatile tool that can find many different uses in design. And when it comes to web design we can find an extremely wide variety of implementations.

Today I want to dig into some key ways that this tool has been put to work so we can draw new ideas to inspire and challenge the designs we produce.

Let’s begin someplace I seldom do, with a basic definition: Illustrated: 1) To make clear; 2) To make clear by giving or by serving as an example or instance; 3) To provide with visual features intended to explain or decorate.

It seems that in the real world of web design, illustration tends to perform both functions at one time. It beautifies while it clarifies. And if it is only doing one of these you might need to ask yourself why. Perhaps by putting illustration to work fulfilling both roles is the way to truly leverage the design element for all it is worth.

This is, of course, not to say that a design can’t be successful if it only handles one or the other; certainly it can. But in order to get the most out of our work I find that challenging our thinking is always helpful. As usual, let’s dig into some groupings of samples to see what can be done with this visual device. Along the way, consider if each approach provides clarity or decoration, or both.

Thematic illustration

The first approach to illustration that I want to cover here is the use of this style to produce an overall thematic approach. In this situation illustrations are put to work to establish an overall theme. Are we climbing mountains, visiting a space station or exploring a company’s office?

While this approach doesn’t have to take us to a location, it quite often does. In other situations the style simply establishes an overall motif that the site follows.

The reason we are interested in it here though is that it is being used to drive the overall design in a radical way. The illustration is not some small supporting element. Instead, it is the most prominent design element and control the entire layout.

Get my boss to North Cape

In this sample the approach could not be clearer. The design of the site clearly echoes its most basic purpose. The illustration provides a visual reference to what the individual will do. And in terms of defining the illustration, the artwork provides decoration and beauty to the page.

In this case the theme firmly establishes the site’s purpose and helps the user buy in on the concept.

Launch Kit

A thematic approach doesn’t have to be so blunt in a way. Sometimes it can be a more natural part of a more typically structured site. In this case, the site is slightly unique in its layout, and the theme doesn’t force some over-the-top interface based on rocket ships.

Instead, the theme is woven into the design in such a way that it communicates its decorative touches without interfering with the content. Here the illustration serves to decorate, but not clarify so much. This is not surprising at all and of course demonstrates that there is no formula to follow.

Atelier Anonyme Design

In other situations such as this one, the thematic illustration literally IS the site. It is not a supporting element, but rather completely becomes the design itself.

Here the use of illustration clearly plays a decorate role. But I would argue that it also provides a great level of clarity to the visitor. This is a web site for a design agency. The design and nature of this site communicates a great deal to it’s visitors. As such, I am certain it serves as a massive filter to their client base. You will either be drawn in and love their playful and creative approach, or, you will be totally turned off by it. So to this point, I think it provides a great deal of clarity about the agency and their mentality.

Allure Graphic Design

On this site the use of illustration plays a clear thematic approach as well. Though the site follows some standard layout formulas, the entire design is wrapped in a thematic layout. These elements drive not only the design of the site, but they merge with the main logo and copy used on the site. The theme is immersive and drives the entire message the site presents.

Additional thematic samples

Here are some additional sites that make use of thematic illustrations to establish an environment or theme for a site.


Drift Boys




How could I possible cover the idea of using illustrations without reviewing one of the most obvious: mascots? With this visual element the designers tend to personify the site, its product, or purpose with a character. Not only does the implementation of such an element vary, but the power and reasoning behind it does as well.


In this design the illustrated mascot plays a rather clear role. Clear in that it echos the name of the product. It not only provides some life for the design, but it puts a face to it. In this way the audience has something a bit more unique to file away in their brain. Hopefully, the mascot helps to make a more memorable and unique experience that will help the product to stand out from the heard.

Perhaps that is the most powerful purpose behind a mascot, to help something stand out. The great thing about an illustrated mascot like this is that it can be totally unique and specific to this product. Assuming it was custom made for this design it should be the only place this exact illustration exists.

The Evnt

Ironically we find here another illustrated octopus-like mascot (what is a three legged sea creature?). In this case the mascot is obviously a much larger step away from reality: a robot three-legged creature with a brain in a bubble.

While it might be an odd choice, it does provide a beautiful distinguishing element for the event. This unique mascot gives a cool visual element to connect with the event. It takes on a life all its own and really connects people with something concrete. I suppose this is exactly the purpose of a mascot.

This site’s design is beautiful, but consider how dull it would be without this crazy mascot in place. Producing such an element isn’t easy, but it is extremely effective in this situation.

Big Eye Creative

For an example of a non-octopus based mascot take a look at the Big Eye Creative site. Here the mascot doesn’t play as much of a predominant role in the design. It does, however, add a lot of personality to it. Obviously the other illustrations and overall style of the site make for a less formal presentation. But the mascot in the logo is present throughout the site. This ensures their light-hearted style permeates the design.

Additional mascot illustrations

Here are a few extra samples of mascots at work in design. Including yet another octopus one; it would seem that is a popular one to use.

Pioneer Records Management

Argyle Octopus



Illustrated decoration

The next type of usage I would like to consider is what I refer to as thematic decoration. This is when illustration is put to work in a decorative way that doesn’t really provide a specific physical reference. For example, most often illustration includes pictures of people, animals, objects, or places. But in this case the illustration doesn’t so much represent anything real, but rather, it simply provides decoration to beautify the design in a way only illustration can. As always, let’s clarify this through some samples.

1000 WP Themes

For our first example, consider the 1000 WP Themes web site. On this site the use of illustration provides an underlying framework and style for the site. But it does so in what is most purely decorative. The overall style feels like an illustration, and yet, it doesn’t have the typical humanistic elements.

Now, I want to totally contradict myself. I think the style is predominantly decorative. But I can actually see how we could argue that it does provide a level of clarification for the site. The style the design is using connects with a certain audience. It says something about the style of the site, and the themes they might produce. In so many ways, the quality of the illustrated layout demonstrates the quality of work you might expect to see through this site. In that way, the clarification is perhaps more subtle and less in your face, but present nonetheless.

Coca-Cola History

On this web site we find another design driven by illustration. There are some illustrated elements here that demonstrate real things, but most of the thematic approach is established with pure decoration. Not only does this example demonstrate the approach, but it also shows that almost no technique is used in a purist fashion. The reality is that you will likely merge these elements I various ways.


In this final example for decorative illustration you find some excellent background elements. Some of these are more tangible than others, but overall they are more about stylistic support elements than anything else. It is remarkable how beautiful such simple line drawings can be when combined with beautiful text, well chosen colors, and simple icons. The end result here is fantastic and remarkably beautiful.

More designs with illustrated decoration

Here are some additional samples to round out this type of illustration in design.

Moo’s Cupcakes

Tech Jobs

Pixel Stadium

Custom Bags HQ

Illustrated text

Hand rendered text is certainly not a new concept, and is something I have covered many times before. However, I have never considered such an approach with an illustration perspective.

Hand rendering text is one popular variation of illustrated text, and a great solution for many creatives. For one, it is a great way to put all that hands-on art school training to work. Secondly, it’s a great way to produce something unique. After all, if you hand render some text it will be 100% unique. Even if you sketch over an existing typeface, it will still become a distinct creation.


This is a perfect example of illustrated type. The style is extremely gorgeous, totally unique, and very inviting. But it doesn’t stop there. The hand rendered type actually demonstrates the individuals talents. It shows he creates artwork with his hands and it connects perfectly to his animation skills. I particularly love the fact that it is all based on a chalkboard theme as it really ties the theme and elements together perfectly. In my opinion this site demonstrates how unifying illustration can be with the purpose and message of the site.

Joey Lomanto

In this case, the illustrated text is far more subtle. Instead of driving the entire direction of the design, it simply plays along nicely. In fact, on first take you might not even notice the hand rendered style of the large home page text. Granted, the text might actually be a font, but it has been used in such a way that it merges perfectly with the style of the site. Regardless, the style is beautifully unified and illustration plays many roles in the overall design.

Go Live

Illustrated text need not be hand rendered though. As you will find in this example the text is styled in various ways that turn the text itself into bits of the overall illustration. The beauty of this approach is that it unifies the text with the other illustrations. This avoids a less unified feel where you simply have illustrations over standard web-based text. The latter can work, but in this case the impact of illustrated text is clear.

Additional samples of illustrated text

The following examples fit loosely into this category. I say loosely because it is hard to say at times as it is sometimes a subtle thing. In some of these cases the text merely feels like a work of art, so I have placed it into this collection.

Contrast Rebellion


La Web Shop

Informative illustrations

By the very definition of illustration, one of its purposes is to clarify and explain. So it is only fitting that we find some examples where the illustrations do this in with extraordinary clarity.


Let’s begin with the Bookish site. In this unusual layout we find that the illustrations very clearly symbolize the various points of the home page layout. Each block has a visual element that not only beautifies it, but more importantly, explains it. So much so that as a reader I almost don’t even have to read the copy. The devices artwork in the bottom left especially demonstrates this.


In a much less prominent way the illustration in this design proves equally informative. The simple illustration single handedly demonstrates the topic of the site. It might not beat you over the head with its message, but it echoes the site’s purpose beautifully.


The illustration in this design not only communicates information about the event it represents, but also echoes the very purpose of the event. This particular event revolves around disconnecting from technology. It is a chance for people inundated with technology to escape it’s clutches.

The illustration here shows us what attendees will be doing, so it is informative. And by it’s very nature, the illustration breaks with technology and roots itself in a purely organic feel, a fundamentally great way to communicate the sites purpose.

More informative illustrations

These extra sites also demonstrate the idea of illustrations that inform us. Some are tiny and basic icons, while others are immersive elements that fully define and represent the content.

Vitality City


A technological antidote

With the last example (The Activate site) we stepped into what I want to consider next, the use of illustration to break with the technology oriented feel of things. Sometimes it is necessary to disconnect from the web’s technological underpinnings and demonstrate a very organic feel. Illustration is one of the most powerful tools for accomplishing such an idea.

Shipment App

This straightforward coming soon page is nothing short of extraordinary. And clearly how it accomplishes its beauty is radically simple. A single huge illustration single-handedly distracts us from the fact that this is a web page. It feels more like a work of art that happens to have a small interactive element, certainly a great way to make a huge impact on users and establish a memorable image.


While this site doesn’t make use of quite as radical an approach, the illustration is still large and prominent in the layout. Here the animated imagery breaths life into the page. Combine this with a creative and unusual layout and it feels fully detached from the technology that drives it. Perhaps the fact that it doesn’t look like a normal site plays a powerful role in this as well. Also consider that the illustration in this case really helps to inform us of the theme of the site.


In yet another atypical layout we find that illustration has been put to work. Here the artwork not only tells us about the individual the site represents, but they also break us out of the normal web mindset a visitor might have. Again, it feels more like an interactive work of art than a website. If this is your goal and need, then this is a great approach to consider.


Compared to the previous examples, the Zaarly site stands in stark contrast. Although the design is ruled by a single large illustration, and this illustration serves to set a tone for the site, the underlying function is far more complex than these other samples.

This site is an application that is intended to be used. And the illustration helps establish a certain set of expectations. It gives a light-hearted, humanistic feel that is clearly very organic and natural feeling. Imagine this in contrast to semi-minimalistic apps with no personality at all. The design gives the site a sense of approachability and shifts our expectations.


The use of illustration in design is an age-old practice, and its application to the web is clear. As with any design element I enjoy the process of reconsidering its purpose and use. Through such an effort I inevitably find that I gain a better understating of how it works, ways to leverage it for an intended purpose, and, ultimately, some fresh and inspiring ideas.

Patrick McNeil is a freelance writer, developer and designer. In particular he loves to write about web design, train people on web development and build web sites. Patrick’s passion for web design trends and patterns can be found in his books on Follow Patrick on Twitter @designmeltdown.

How do you use illustration in web design? Please share your own experiences below….

Photoshop Plugin for Easy Creation of WordPress Themes


Techniques in responsive web design

Thursday, November 24th, 2011

We’ve talked a lot about responsive design here on Webdesigner Depot, and shared a lot of valuable resources. Today we’re sharing another valuable resource: at the end of this article are details for getting a discount on Chris Converse’s responsive design course on MightyDeals.

CSS3 media queries allow us to dynamically alter the design and layout of a web page in order to deliver an optimal user experience from a single set of HTML and CSS markup.

The techniques in this article explain how we can leverage this powerful capability of CSS to also change imagery, alter the navigation on hand-held devices, and set up default CSS for compatibility older browsers.

Creating different images

When altering your design for different devices, consider creating multiple versions of your graphics. This can greatly affect the speed at which your design loads on smaller screens, and gives you the opportunity to customize each version of your graphic.

The example below shows the different sizing, and cropping choices, in addition to the varying amounts of compression that are applied to each set of images. Since many small screen devices have higher resolution screens, the extra compression is unnoticeable, and the file size is significantly smaller.

Take advantage of the fact you can switch your images dynamically, and customize the sizing and cropping of your images for each screen size. In the example above, the sidebar photo for the large screen size shows more detail of the stained glass window, whereas the smaller images show more context of the window.

Assign images to HTML elements

Images are typically added to a web page using the image tag . While we can use media queries to alter the sizing of the images, we cannot change the actual graphic file being used. Instead of using the image tag, we can use an HTML element as a container, such as div tag, and assign an image into it’s background using CSS.

Assigning images to an element’s background allows us to change the referenced graphic file, in addition to being able to alter the dimensions and position properties of the container.

Reposition the global navigation on hand-held devices

When viewing web pages on larger screens, the expected location of the navigation is at the top, or left side, of the screen. Considering larger screens allow us to see content in addition to the navigation, this user experience does not hinder the user from getting the content. On hand-held devices, however, the navigation can take up all the screen real estate if it appears at the top. This can also lead the user to believe they must make another navigation choice instead of realizing the content is further below on the page.

For hand-held devices, global navigation typically appears after the content, so a user can swipe upward through the content, then be presented with additional navigation options. The challenge here is to reposition the navigation with CSS without needing to alter the HTML.

The figure above shows that the navigation markup is placed after the main content markup. This allows us to keep the natural flow of content for hand-held devices, and reposition the navigation on larger screens. This is achieved by setting absolute positioning properties on the navigation container when viewed on larger screens, and removing the position properties on small screens.

In addition to changing the position of the navigation, we can also change the style as well. Standard anchor tags are restyled on small screens to reflect the look of mobile buttons commonly used on hand-held devices. The figure below shows the dramatic transformation our CSS file can have on our navigation links.

Use large screen CSS as default for older browsers

In order to keep backwards compatibility with older browsers, keep the large screen rules outside of any media queries. This will ensure earlier versions of browsers that lack support for media queries can still “see” a set of CSS rules.

When the media query conditions are met by your user’s screen size, the rules defined within the query will override the rules outside of any queries for large screen devices. This will give you some built-in backwards compatibility for browsers that support CSS-based layouts, but not CSS3 media queries.

Learn to create a responsive web design

Follow along with Chris Converse as he teaches you to create the above web design step-by-step. The regular price for the Creating Responsive Web Design course is $150, but for a limited time you can get the course via Mighty Deals for only $39!

Chris Converse is a designer, photographer, and web developer at Cōdify Design Studio. Chris is a regular featured speaker at Adobe MAX, HOW Design and Interactive Conferences, AIGA, and Mogo Media events. Find his video workbooks Bring Your Web Design to Life and Creating Interactive Documents on your favorite bookstore’s website, follow him on Twitter and Facebook.

Launchlist PRO – Pre-Launch Website Testing – only $20


Trends Behind Hotel Web Design And A Mesmerizing Showcase

Thursday, November 17th, 2011

Hotels cannot be tagged as a second home for most of us (other than those executives who tend to spend their lifetimes in hotels) but the time spent in a hotel somehow sticks with us. Not saying that life never gifted me with the luxury that a hotel serves but still! The hotel industry has grown leaps and bounds due to their efficient on-spot service.

Although the hotel industry is already flourishing, there is still a lot of room for improvement. Most hotels do not understand the importance of their online presence. Having a website is not the only solution. It is about a riveting website just like it is about riveting service within hotel premises. I thought that it was time for me to study the latest trends on hotel web design and help you gauge a few real-time examples. Time to check-in!

Mobile Compatibility

Technically speaking, I should discuss the obvious trends in hotel web design and later on jump onto the mobile world but I have to start with Mobile Compatibility and I have my reasons. The hotel industry is such that people want to access the related information from anywhere. Usually, rooms are booked on the fly and information downloaded directly onto a customers cell phone. This is when a hotel web design must be mobile compatible so as to mesmerize the customer on every visit.

Be it collecting information, searching for deals or even booking rooms – mobile compatibility is a must!

High Quality Maps

No hotel targets local customers. Usually the customers are from outside the local area and have spend considerable time before ending up at your hotel. A hotel website must have the best possible maps. Also, make sure that you have updated your details in Google Maps and other local online map services. Do not leave one reason for your client to show dissatisfaction. None!

Appropriate Contact Information

Contacting the support desk of a hotel must be a cakewalk. I visit a hotel website and if I have to spend two minutes looking for contact information then there’s a good chance I’m not even going to bother, if you don’t make it easy for me to give you my money, why would I want to?

Nothing is more frustrating then when I dial a hotel’s number and it’s busy! If a hotel doesn’t have open phone lines, how will they have time to serve my needs?

Socialize Day and Night

Having a website is not just the only solution. The reach of the web (and the people using it) has increased exponentially in recent years. If you have to run a business then you have to be where your client is. Famous hotels tend to keep staff solely for the purpose of optimizing their online presence. A Twitter account and a Facebook page is a must for every hotel. Also, these should show up on the hotel website so as to keep these in sync and interconnected.

Multilingual Support

Guess what, your visitor isn’t necessarily from the U.S. or other English speaking countries. One might pop up from Indonesia and will end up leaving the respective hotel website if he finds no support for his language. If a hotel is targeting the international market then multilingual support is a must for every hotel web design.

Vibrant Colors

Remember something. You get one chance to catch the attention of your reader and you cannot afford to lose them. I am not asking you to include a combination of pink and orange in a hotel web design but it is suggested that you make use of vibrant colors so that they pop out of the visitor’s screen.

Detailed Service

I should not be telling you this as inclusion of service details is a must for every hotel web design. It is suggested that you include every possible details and do not expect the visitor to contact you personally to know such details. Relevant price details and any discounts must be updated continuously as I have seen occasions where hotels do not update prices in their websites. This is surely a turn off for the visitor and shows the seriousness of the hotel towards their business.

Optimize for Search Engines

If you are good at what you do then you will face stiff competition. Having a search engine optimized hotel web design so that you sit on the top on Google’s SERPs can be the difference between a hotel being booked up or empty. Also, remember not to overdo it in order to get to the top of search results. A balance of good web design and perfect SEO is what makes a true hotel website.

The Showcase

As is the case with all articles of mine, here goes the super inspirational showcase to keep your adrenaline pumped up.

1. 41 Hotel

2. Banyan Tree

3. Bellagio

4. Christophe Harbour

5. Conrad

6. Hotel Arcaluinoe

7. Hotel Grand Pacific

8. Hotel Hiranoya

9. Hotel Terra Jackson Hole

10. Jumeirah

11. Kahal Resort

12. Kiwi Collection

13. Lancemore

14. Leonia

15. Narutis

16. Palazzo

17. Peninsula

18. Raffles

19. Ritz Carlton

20. Sanderson London

21. Shangri-La

22. The Dorchester

23. Trump Las Vegas Hotel

24. UMA

25. Wynn Las Vegas

Building your web design all-star team

Tuesday, November 8th, 2011

All Star TeamWeb design is a multidisciplinary craft. So why do so many of us try and do everything ourselves?

Maybe it’s because we can. Our nature as web designers tells us to build things. We have the capability to handle just about every role in a web design project. If we don’t already have the expertise in a certain skill, then at least we have the self-motivation to teach ourselves and learn on the job. That’s how must of us got to where we are. But is doing it all the right approach?

When you look at the bigger picture, maybe it’s not. For me, my over-arching goals are to build an impressive portfolio of work, land bigger and better clients, and grow my web design business. It’s simply not feasible to achieve these goals by doing everything myself. The only way is to build a web design all-star team to help me do it.

So here are some tips for building a well-rounded team for producing amazing web design work. These are things I’ve come to learn over the years as I transitioned from being a freelancer to owner of a distributed web design agency.

The “one thing” concept

What separates the high-end web design shop from the do-it-all freelancer? It’s the well-rounded quality of every piece in their portfolio. From wireframes to PSDs to code, copywriting, and strategy: Every role is executed by a specialist in that particular craft.

The key is to assign the right person to the right role. So how do you get this right?

I call it the “one thing” concept. The idea is to figure out what your subcontractor’s core competency is, that one skill that they’re a rockstar at. This can be harder than it seems. Most web designers, particularly those who primarily work alone, tend to claim they’re a “jack of all trades”. It’s your job to see past this and reveal that one thing that they’re most experienced with.

One of the first questions I ask potential subcontractors is “Do you consider yourself primarily a designer or a developer?”. Many of us can do both, but 99% of the time, we’re better at one than the other. I want to find out which one it is, and hire them to handle only that part of the project.

Web Designers vs Developers

Determine your own role first

Now hold on a minute. Before you can start outsourcing, you must first determine which role you will personally fill yourself. Start by figuring out your one thing that you’re best at. Maybe it’s front-end HTML/CSS coding.

Perhaps you’re a talented visual designer, capable of producing beautiful PSDs. Or maybe your strength is in the pre-design planning stage, producing wireframes and information architecture diagrams that provide a good road map for production. It should be difficult to choose just one thing.

Keep in mind that since this will become a team effort, your role will likely include project management duties: Finding and hiring teammates, communicating project specs, client communication, etc. Be sure to budget your time accordingly!

Build your network early and often

Many freelancers and web shops are going with the distributed agency model these days. That is, your teammates work remotely from their own offices across the street or across the globe. If this is your direction, then it’s never too early to start building your network of remote workers.

Here are some ways to do that:

  • Build relationships with designers and developers on Twitter.
  • Seek out and follow creators of amazing work on Dribbble.
  • Follow and comment with those you find interesting on Forrst.
  • Post targeted ads on job boards and filter the responses to separate the quality from the noise.
  • Meet designers and developers at local meetups and conferences.
  • See something great on the web and get in touch with the creator.

The last one is my favorite. There are so many amazing things being created on the web every day. In the space in which my company operates, which is WordPress web design, I often come across a really cool plugin, an interesting theme or a well-written article. I’ll immediately reach out to the author to see if they’d be up for brief Skype chat to talk informally about their work and strike up a new relationship.

Later on, when a new project comes in and you’re looking for talent, it’s better to start knocking on the doors of those you already know than to scramble and start looking for someone new at the last minute. Build and nurture your network today and leverage it for your projects tomorrow.

Identifying talent & fit

How do you identify who is worth considering for a spot in your network?

Before you reach out to people, you have to know what you’re looking for. Here are things I value before I speak to someone:

  • A great portfolio, but particularly an informative portfolio. The work should look great, but I want to know exactly what the person’s role was in the project. Case studies are great for this.
  • A well written blog. This shows they’re passionate about their craft, enough to take the extra (often unpaid) time to write about it. This is also a good indication of their written communication skills.
  • Their industry presence. High profile work, published articles, speaking engagements, books. These are all good signs of a talented and dedicated professional. But be careful, these credentials can sometimes be deceptive.

Next, we need to determine if we’re a good fit. You can’t get a full read on these things until you actually work together, but there are some things you can look for in your first few conversations:

  • Professionalism and reliability. Can they reliably schedule and show up for your call/meeting? You’d be surprised how many people fail at this simple act of professionalism.
  • Collaborative fit. Take note of the types of questions they ask (shows they really want to understand and collaborate). See if their “one thing” compliments yours and the others in your network/team.
  • Logistics. Ask about their working hours and availability for meetings and progress updates. I’m generally open to working with anybody, but I prefer a timezone that is within 3 hours from me (North America). Just makes collaboration easier.

Great people do great things… together

When it’s time to take your web design business to the next level, it’s time to start teaming up with great people.

That’s the key to thinking big and doing amazing things in this collaborative industry we call web design.

Hopefully these ideas will help you form the basis for your network, which you can look to when it comes time to assemble a web design all-star team.

Brian Casel is the founder of CasJam Media, a web design studio specializing in custom WordPress sites.  Brian loves to connect with fellow web workers on Twitter @CasJam.

Please share your own ideas for building a great web design team in the comments…


Reasons Why Every Web Designer Should Blog

Thursday, November 3rd, 2011

I won’t be polishing a non-existent shoe. Those web designers who are totally against the idea of blogging (believe me, there are a few who really won’t appreciate this post) can hop out of this discussion. Although, I would feel blessed if you leave your thoughts – positive or negative – in comments section below. I guess you can squeeze out a free minute from your insanely busy schedule?


With that introductory disclaimer already in place, let me tell you why I will be (literally) begging web designers to start blogging. The human race has a come a long way since our monkey-sort-of ancestors started to dish out newer ways to survive. All of us are aware of the art-like images left by them in their luxurious caves. Those drawings have been a major source of learning for people behind Nat Geo shows and their so-called discoveries. Aren’t those cave drawings just early image blogging? Haven’t these drawings helped us learn a lot about their lifestyle and the stone age as a whole? I guess you know the answers!

So? Web designers must blog because our ancestors had free time for drawing?

Nooo! I mean, not yet! Stick with me and see where this is going. During its infant years blogging started as a personal online diary for many. Soon our money loving race commercialized blogging to heights that nobody might have ever imagined. The likes of Tech Crunch, Mashable, Engadget and our very own 1st Web Designer happened. Stars from the big silver screens gave it the much wanted Midas Touch!

The end result was phenomenal. A constant stream of quality content that could increase your IQ (EQ and every other form of Q) exponentially erupted all around the Internet. The human brain has been designed to consume infinite amount of information and blogosphere cashed upon the same. No doubt why different forms of blogging like image blogging and video blogging popped up.
best blogs

[Image Credits]

Henceforth, when I ask you to start blogging please don’t assume that I am only talking about text blogging. There are some really informative image based blogs and video based blogs. Content, in any format, will continue to be the king of Internet!

Well said! But, why should “I” blog?

I am assuming that the readers of this article are studs, heroes, geeks and other similar words. We are our own idols. We listen to nobody and we follow our own rules. You know what I mean – we are the best!

Now, isn’t it the duty of this smart race to help themselves grow for their own good? Today’s cement and brick age faces the same challenge as was faced by the stone age – extinction due to fast paced technology. Out of the millions of web designers barely any are sharing their thoughts and making a note of their journey.  What about the rest? Are they earning nothing? Do they have no client list? Of course they do. It is just that they have no time (and no reason) to share the same with the outside world.

Case One:

The copy-cat web designer from a nearby high school makes over a grand just by using free templates whenever clients approach him. He is famous and considered a geek in his circle. But do we know about him? Some of us might be earning half of what he earns. If he was blogging then we would have access to a database of smart tricks that can help us start our own web design business.

Case Two:

The 75-year-old work-from-home grandma of three has witnessed the evolution of the Internet since its infancy. She has the knowledge and experience to come up with an idea that will be a true blend of legacy and technology. She knows why most of the work-from-home dreams end up crashing and why internet marketing is a scary business. Her tips hit the bull’s-eye and she has 100 % success rate. Again, are we aware of her existence? Wouldn’t it be amazing if she was blogging about her experiences? Many would have loved to call her grandma if they knew the vast amount of knowledge she had.

Any monetary benefits?

Now you are talking! Well, I won’t give away tips if they had no monetary backings. After all money does make a difference. doesn’t it?

Usually, web designers tend to have an online portfolio which at times is their only source of income. Without that portfolio they will cease to exist. What if you add a “useful” blog to that portfolio? The benefits involved with a successful blog will indirectly affect your portfolio. This will help your portfolio with the much wanted visibility that you had been deprived of otherwise. Let me list some of the benefits below:

  • Your domain earns backlinks from reputed websites.
  • Those backlinks get you bonus traffic.
  • You earn visibility on the Internet and more people admire your work.
  • Your search engine rankings improve.
  • You will be tagged as the “generous web designer” who isn’t afraid of sharing his secrets.

money from blogging

[Image Credits]

Lastly, the most important benefit is the jump in the number of clients. Let me do some very quick calculations:

  • You spend 30 hours writing 5 overly informative articles.
  • 2 out of those 5 articles get the requisite social media recognition.
  • 1 out of these 2 articles get backlinks from a few famous blogs.
  • These backlinks send you referral traffic which would be, let’s say, 150 visitors.
  • Assume that at least one of these 150 visitors just ONE ends up hiring you for his next online project.
  • To wrap up – he pays you $500 for that project.
  • End Result – You earn a client that otherwise you would never have met.

Imagine the returns when you rinse and repeat the process. With time, you might just be the in-demand web designer. Sounds luring? Now will start blogging? Please?

Other “exciting” benefits!

My teacher used to say that you should start and end your essay with the your best content. So, let me wrap up this article with some of overly exciting benefits of blogging:

  • You are a part-time freelance web designer? You hate your boss? Start blogging, attract more clients, earn more money and resign!
  • Be the next-big-stud of Internet and attract the girls. Trust me, girls love nerdy studs!
  • Your dad assumes that you are killing your time online? Blog, increase your online income and surprise him.
  • Your dream weren’t met because your family had financial issues when you were a kid? Blog, attract clients, earn money and live your dreams.
  • Blog to be the Google of your own kind. You won’t believe but in few years blogs become the information hub of their own. Situations come when you do not have to look outside one particular blog when you are stuck. Imagine if readers find your blog to be the one stop place for all their web design queries. You will be famous!

In short, live the freelancer’s dream in return of the extra effort that you put in to your blogging.

The Showcase

Looking for inspiration? Here we go:

1. Adii

2. Brian Gardner

3. CSS Globe

4. CSS Tricks

5. David Airey

6. I Love Typography

7. Just Creative Design

8. Larissa Meek

9. Octwelve

10. Pearsonified

Navigation patterns for ten common types of websites

Thursday, November 3rd, 2011

Navigation is one of the most important aspects of any website. Without good navigation, a site becomes useless to visitors. They can’t find the information they need, and then seek out competing sites instead. It’s vital that your sites be easy to navigate if you want to be a successful designer.

iBut there are no one-size-fits-all solutions to navigation. What works great on a news site might not work well for a personal site. Something that’s incredibly user-friendly on a blog might be frustrating on an e-commerce site.

Below are ten common types of sites, with suggestions for the kinds of navigation patterns that work well for each one.

There are also examples, to give you a better idea of what we’re talking about. Feel free to share more great examples in the comments!

All sites

There are certain navigation patterns that work on virtually all sites. Rather than re-hashing the same information in each of the categories below, I’ll just include them here.

The first pattern is tabbed navigation. Tabs are perfectly suited for navigation, because psychologically they remind visitors of paper tabs, and navigating to a new section of a notebook or binder, something that buttons or plain text links don’t do. Tabs are almost always the preferred method of styling your main navigation links, though of course they work best when there’s a limited number of links in a menu.

The second pattern is header navigation. If your website has a header (and most websites do), then header navigation is a good idea. Visitors are accustomed to looking at the header for navigation links. This pre-determined behavior makes it easy for you to make your website more user-friendly by locating your navigation in or near the header.

The final pattern that applies to virtually all sites is footer navigation. Many users (though not all) will look to the footer for a link if they can’t find what they’re looking for in your other navigation. Many basic pages are often linked from a footer, including “about”, “contact”, and “sitemap” links, whether they’re linked elsewhere in the navigation or not.

1. Blogs

Blogs generally have a large volume of content, in reverse-chronological order. This presents both a logical framework for your navigation, as well as some unique challenges, depending on the type of blog.

Most blogs will use a combination of pagination (or continuous scrolling), an archive page, sidebar navigation for categories and/or tags, and possibly header and footer navigation as well. It’s important to think through exactly how your visitors are likely to want to access the content on your blog.

For example, a personal blog might not need category or tag navigation outside of links in the meta information for each post. In these cases, you want visitors to access content in reverse-chronological order, rather than jumping around by subject matter. A topic blog, on the other hand, needs to have category and tag navigation, because visitors are likely looking for information on specific subjects within the overall topic.

At a bare minimum, blogs should include navigation for moving chronologically through the content (either pagination, next/previous links, or continuous scrolling), as well as header or sidebar navigation for specific pages outside the main blog page.

Topic (and sometimes corporate) blogs should also include category or tag menus in their navigation, either in the header or sidebar. Particularly large blogs should also consider implementing a search function, to make it easier for users to quickly find exactly what they’re looking for. Just make sure the search function works as intended, and really does bring up all relevant results.

Ecoki, below, includes top-level categories in their header navigation, with navigation to important pages in a secondary header navigation bar. It’s an effective layout that clearly places emphasis on the most-used links.

2. News sites

News sites are similar to blogs, in that they generally present stories in reverse-chronological order. News sites are often highly categorized, and have more complex information architecture than many other kinds of sites. Because of this, their navigation patterns are often more complex.

The key is not making the navigation more complicated than it needs to be. Drop-down and fly-out menus are both good ways to deal with larger menus without cluttering up the page. If you look at the larger news sites (like Google News, for example, below), they break down the news into broad categories like Politics, Local, World, Sports, Entertainment, etc. Which categories you use will depend on whether the site is a general news site or a topical news site.

Tags can also improve navigation substantially. By tagging each story, it makes it easy for users to find related stories, without creating a complicated or bloated category structure. It’s a good idea to not only include tag links in each article, but also to include a list of tags or a tag cloud somewhere (only including popular tags can be a good idea for sites with hundreds of tags).

Linking inline within articles improves user experience greatly. Many of the larger news sites do this, allowing users to immediately gain access to all articles on a topic. It’s very similar to including tags, but rather than a list at the beginning or end of the article, the links are within the text itself.

3. E-commerce sites

E-commerce sites are sometimes incredibly complex and have hundreds (or thousands) of individual pages for products and other information. For this reason, the way that navigation is handled is vital to both the user experience and the bottom line. Without excellent navigational structure, visitors to an e-commerce site will have a more difficult time finding the products they’re looking for, which means there’s a good chance they’ll turn to competitors out of frustration.

The main thing every e-commerce site with more than a handful of products needs is a good search system. Assisted search is key, where users can not only search by keyword, but also refine their results based on things like price, size, category, or other metrics (depending on your specific products).

Category navigation is also a must, for users who want to browse. Depending on whether you use sub-categories, breadcrumb navigation may also be a good idea (if your site is more than two or three levels deep, breadcrumbs can improve usability).

Giving your visitors multiple ways to find the products they want is a great way to increase sales, but make sure that each method is showing all relevant products. If visitors find that searching returns one set of products while browsing returns a different set, it’s only going to lead to frustration.

The Blik website, below, is a great example of a site that uses a sidebar with filters to refine product results. It’s the guided search pattern, without the appearance of search.

4. Informational and reference sites

Reference sites generally have one thing in common: a ton of information across a lot of pages. This makes it tough to create any kind of standard menu. Categories can be helpful for browsing, but when you start to get to the point of having thousands, tens of thousands, or even millions of pages (like Wikipedia), the category system breaks down. Plus, most people go to reference sites for a specific purpose, and not to browse, making categories not particularly helpful.

It’s vital that reference sites have excellent search capabilities. Guided search, much like those used on e-commerce sites can be useful, too, especially if used in conjunction with a good tagging and category organization.

It’s obvious that, below, wants visitors to use search to find whatever they’re looking for, as it’s placed prominently at the top of the screen.

Pages on a reference site should also make use of inline linking to related information. This makes it easy for visitors to find all the material they need to understand what they’re reading, without having to perform multiple searches. The need for inline linking is why wiki platforms generally have a standard syntax for linking within the text of an article, so that content creators don’t have to spend the time to look up the relevant links.

Wikipedia, below, and other wiki sites make good use of inline linking for adding context to articles.

5. Corporate sites

There’s a huge variety in the structure and size of corporate sites. Some are simply to entice new customers. Others are created to keep current customers informed. Still others must serve as both an enticement to new customers, a news portal for existing customers, and the front-end for a company intranet.

Regardless of the purpose of the corporate site, clear-cut navigation is key. You don’t want users to have to spend time looking for your navigation or trying to figure out which link to click on to get where they need to go. Make sure that links are arranged logically, that they each have an easy-to-understand meaning, and that they’re located in logical places (the header and sidebar are your friends here).

All of the sites below show that just because navigation is located in the most common places, doesn’t mean it can’t be creative. As long as it’s usable and easy to find, feel free to create something unique.

In sites larger than a dozen or so pages, it’s a good idea to include search functionality. It’s also a good idea to include a sitemap to make it easy for users who are having trouble with your regular navigation to find exactly what they’re looking for.

6. Community or social network sites

Generally with big social networking sites, search is the primary means of navigation. It makes sense when there are millions (or even billions) of pages on the site. Standard menu-based navigation is pretty much pointless when dealing with that volume of information.

So search takes care of overall site navigation. But that still leaves member profile pages. Here, it’s important that there’s consistency across the entire site. Regardless of whether your site allows members to customize their profiles or not, it’s imperative that links be located in the same place across every page.

Take Facebook, for example: every member profile and every page has links to things like photos and info on the left-hand side. Notifications, messages, and friend requests are always linked at the top, as are links to account settings and to log out. A standard top navigation bar like that, that always links to the visitor’s account and information has become a mainstay of well-designed social networks.

Inline links should also be consistent. For example, any time a username shows up as a link, it should link to that user’s profile, regardless of what content it’s associated with. Think through which information should logically link to which pages, and then make sure it’s consistent regardless of where those links show up.

7. Event sites

Event sites are generally simple and don’t have a huge number of pages. But it’s important to think about how your visitors will use the site. It’s most likely they’ll want to do one of the following: sign up for the event, see who’s attending or speaking, get information about attending (including costs and things like location and area hotels), and see the schedule for the event.

Signing up for the event, even if it’s a free event, should be looked at as an e-commerce transaction. For that reason, you want a prominent call to action button for signups.

Standard header and/or sidebar navigation is an excellent choice for links to other pages. Local navigation may also be necessary if you’re going to include individual pages for things like specific workshops or speakers. Drop-down or fly-out menus can work in this case only if you have a limited number of sub-links. Otherwise, you’re better off to use sub-navigation in a sidebar or within a main page.

The Hull Digital Live 10 website has a concise, easy-to-use header navigation that makes it easy to find exactly what a visitor might be looking for.

Tip: If your event site is going to include an attendees area or intranet, look to the suggestions for navigation on a social network or community site for navigation guidelines.

8. Review sites

Review sites are generally used in two ways. The first is when users are interested in a specific product and want to see reviews for that item. In this case, an excellent search function is the best navigation. It lets users quickly access exactly the product they’re looking for.

The second use is to research certain types of products. For this use, search is still a valuable navigation method. But categories and guided search are just as important. Allowing users to browse reviews by category and sub-category lets them find a variety of products that fit their needs. By further letting them refine those results based on things like price or brand allows for even better user experience.

Blippr, below, includes both category navigation (with drop-downs for sub-navigation) and a prominent search bar.

9. Personal sites

Personal sites are really the wild-cards of the web design world. You can use pretty much any kind of navigational pattern you want. Mainstays like header and sidebar navigation are still going to be the most usable, but there’s nothing wrong with doing something completely different.

Personal sites should be a reflection of the site owner. If something unexpected fits within the personality of the site, then by all means: go for it. It can still be a good idea to include a sitemap link somewhere, though, if you’re using non-standard navigation, to make it easy for visitors who don’t “get it” to find what they’re looking for.

Daniel Mall’s portfolio page has one of the most unique navigation patterns I’ve seen. It’s easy to use while still being very different from the norm.

10. Galleries

Image galleries and portfolio sites should generally use a combination of standard header or sidebar navigation, tagging, and categories. Allowing visitors to narrow the images being displayed based on a tag or category is important for good user experience, especially as the volume of images grows.

Pagination is also going to be vital for larger sites. Continuous scroll can seem like a good idea, but since galleries and portfolio sites, by their very nature, are filled with media, continuous scroll can end up using a lot of system resources. I’d recommend against it for any site with more than a few dozen images (though on smaller gallery and portfolio sites it can be a really nice touch).

Minimal Exhibit uses categories, search, and pagination.

The take-away

If there’s one navigation concept that is an absolute must regardless of what kind of site you’re designing, it’s this: consistency!

You can get away with most logical navigation choices as long as it’s consistent across your entire site. Don’t start out with sidebar navigation for half your site, and header navigation for the other half, without any logical reason for doing so. If the home link is always in the upper left, then make sure it stays in the upper left. This applies to every element of your navigation, and becomes exponentially more important as the size of the site increases.

Other than consistency, the most important thing to do when designing your navigation patterns is to think about how visitors are actually going to use your site. Don’t be afraid of A/B or multivariate testing to find out if your navigation patterns are actually working the way they should.

Regardless of how cool or new your navigation is, if it doesn’t perform it’s basic function of allowing visitors to move from one area of your site to another in the way they want to, your navigation has failed.

Written exclusively for WDD by Cameron Chapman.

Feel free to share examples of great navigation patterns in action in the comments below! Also let us know if you have any other tips for suitable navigation patterns for specific types of sites.