Robert Fudge - RSS

Designing and Producing Creative Business Cards: Techniques and Details

Lisa Valuyskaya — Wed, 08 Sep 2010 04:34:17 -0700

Plenty of creative business card showcases are available out there. Many of these are beautifully done and well thought out, and they serve as inspiration for those who would like their business card to be more than the standard rectangular piece of paper. Yet little explanation accompanies these examples, and figuring out just how to bring your idea to life can be overwhelming, to say the least. This guide is meant to help you decide which technique is right for you, how to correctly prepare the files and what to look for in a printer.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

General Advice

Content Goes First

I never tire of repeating this to anyone who will listen. Don’t base your business card design on the fact that your printer has a special limited-time offer on round corners or metallic inks.

Think in terms of what the design will add to your message. Tempted to use rounded corners just because the cool kids are doing it? Maybe your card would stand out more by not using this technique.

Why do you want metallic ink? Do you think your name would really stand out in gold, even though your message is all about technology and recent code developments? You may want to rethink that. Or do you sell hand-crafted jewelry and want a design that reflects your latest silver creation? Then the silver ink might be the perfect solution for you after all.

The back of a business card is often ignored, but it can be a great place for extras that make your card even more memorable. Make it relevant to what you do, and make it useful if you can. You could include tips or a quick how-to guide relevant to your product, offer a free consultation, add a reminder for a date when you will offer discounts, or invite loyal customers to collect a stamp every time they purchase from you. Think of something that would make them want to hang onto your business card and consult it often. If you think the back should be reserved for note-taking, why not mark a few dotted lines, titled “Notes,” rather than leave it blank?

Talk to Your Printer

No one knows more about the techniques and materials available—and new ones come out all the time. Generally, printers are more than happy to give you all the industry news and advise you on techniques and materials. (If yours isn’t, you might want to look for a new printer.) If you learn a little about how they operate, they will appreciate it and be even more willing to help.

Size

While this article focuses on custom shapes and sizes, keep in mind standard sizes, too. Card holders are made to fit standard size cards, and I have often heard comments like, “If a business card doesn’t fit in my wallet, I don’t care how beautiful it is, it’s going in the trash.”

The standard sizes are 3.5 x 2 inches in the US and Canada, 85 x 55 mm in the European Union and 90 x 55 mm in Australia, New Zealand and Scandinavia. Or you could use a standard credit card as a reference, which about 85 x 54 mm or 3.34 x 2.25 inches.

Unless you have some other use for your cards in mind (for example, a bookstore’s card that doubles as a bookmark), you’ll want to stay within those dimensions. Smaller is okay, but anything too big won’t fit in most pockets, so consider going bigger only if you have reason to believe your cards will not be stored in wallets or holders.

Do you have the perfect idea but don’t know what to do with it? Maybe you’ve heard about die-cutting, varnishes, metallic inks, letterpressing and special materials but are unsure what they are exactly or which one is for you? Let’s jump into the different techniques!

Die-Cutting

Any card (or any printed material for that matter) that isn’t a standard rectangle or that has holes in it is created by a technique known as die-cutting. A metal template is prepared and is used to cut the paper in the given shape. The easiest way to think about this is to picture a giant hole-puncher, except that the holes are not necessarily round, but rather whatever shape you want them to be.

This means that, in addition to the artwork, you will need to provide the printer with a custom shape to “punch out” your cards.

The result can be as simple a round hole in the center of your card or as complex as a three-dimensional pop-out.

This simple and effective design makes use of the round hole on both sides of the card.

This card takes the shape of the product. Instant recognition!

Preparing the File

I’ll use die-cutting as an example, but most of these guidelines apply to the other finishes as well. The main differences are cited in the respective sections below, and I will provide links to help you read about the techniques in more detail. The guidelines below should give you a good starting point.

The best applications to prepare files for any special print finishes are the industry-standard Adobe Illustrator and InDesign. Photoshop is not suitable because it does not have the precision necessary for this kind of project.

As with any other print document, set up your file to the printed dimensions (i.e. whatever size you want your card to be, whether rectangular or a non-standard size), at 300 PPI resolution, using CMYK as the color space for all the elements of the artwork.

There seems to be a bit of confusion about DPI, PPI, CMYK and RGB. Preparing a file for printing with either Illustrator or InDesign is actually very simple.

In Illustrator, when creating a new document, click on the “Advanced” options tab (in some versions this is already visible). This brings up the options for both the resolution and color space. Set the resolution to 300 PPI and the color mode to CMYK.

Note that PPI, or pixels per inch, is often confused with DPI, or dots per inch. The latter refers strictly to printer hardware and its capability to reproduce dots on paper. When preparing files for printing, don’t worry too much about the DPI. 300 PPI is the magic number. Remember that and you’ll be golden. If you would like to learn more about DPI and PPI, see the link at the end for an article that explains it in much more depth.

InDesign documents are automatically created at 300 PPI. The only thing to make sure of is that the elements you insert in the document (such as photographs) are also at 300 PPI and use CMYK. Check this by selecting your image and bringing up the info window (hit F8).

For example, the image below uses the RGB color space; it should be changed to CMYK:

Even though you can use RGB images, it doesn’t mean you should. Yes, both InDesign and Illustrator are perfectly capable of converting the output to CMYK when you export a file as PDF, but if you ever have to submit your source files to someone or use the images for something else, this extra step could save you hassles.

And please-double check the resolution. Print out the card to check for pixelation. I know this sounds like a no-brainer, but so many people forget to check the printed result. What you see on the screen is not what you will see in print.

Another thing to check is your black text and line art, if you are converting any of them from RGB. They should be 100% K in CMYK color mode to avoid a muddy effect and color halos.

When your artwork is ready, create a new layer above the artwork. Call the layer something like “dieline.” You could be even more specific and name it “Dieline – DO NOT PRINT,” which would be especially helpful if you are not able to speak with the printer before submitting the file (say, if you are using a Web order form or your client is the point person for the printer.)

Now, create the guidelines for how your card should be cut. Make sure your outline for the die-cut uses a custom spot color, not CMYK; this allows the printer to extract the die-cut template when printing separations. To create a custom color, click on the little arrow in the swatches palette, and click to make a new swatch. In the dialog box that appears, choose any color that will stand out in your artwork, and then select “Spot color” from the drop-down menu next to “Color type.” The color can be anything you want. 100% magenta is quite popular because it usually stands out, but saving it as a spot color is important.

Also, remember to set the stroke (if it’s a custom crop shape) and/or fill (if you are cutting out holes) to “Overprint” to avoid knocking out the art below. You can bring up the options for Overprinting in InDesign by going to Window → Attributes, or in Illustrator by pressing F11 to bring up the “Attributes” window.

Let’s say your logo is a cloud, and you want the card to be cut in a cloud shape (not a very creative example but easy to explain). Your file in Illustrator would look something like this:

And your finished card would look like this:

If you wanted to cut out the cloud shape, it would look like this:

And the finished card would look like this:

Notice how the logo has moved from the artwork layer to the dieline layer and is now also filled with the custom spot color.

Make sure your artwork has enough bleed (i.e. it extends well past the edge of the document if the shape is regular or past the die-cut guidelines if custom). Usually 0.125 inch, or about 3 mm, is enough, but I tend to add more to be safe. Both InDesign and Illustrator allow you to add bleed in the “Document setup” options.

I won’t go into too much detail here, because bleed is a rather complex subject that deserves its own guide. For those of you interested in learning more, a couple of links are at the end of this article that explain it more thoroughly.

On the same note, do not put any important elements (such as logo or text) too close to the edge. Leave a buffer margin (again, about 0.125 inch or 3 mm) around the dieline or document, to avoid the risk of something getting cropped.

Usually, either a native file (AI, INDD, EPS) or high-resolution PDF is acceptable as the final file for printing. (Always check with the printer before preparing the final file.) If you prepare a PDF, make sure your custom fifth color is kept as a spot color and is not converted to CMYK. You can check it in the “Ink Manager” window (Export as PDF → Output → Ink Manager):

You can double-check that it appears in the Ink Manager list in the PDF itself (Acrobat Pro) by clicking Advanced → Print Production → Ink Manager:

Printing It

Most big print shops have die-cutting equipment. Check first if you are printing locally. The best way to make sure everything goes according to plan is to ask questions, explain your requirements and look over the proofs in person. Small printers outsource die-cut jobs. If you want more control, look for one that does it in-house.

If you are unable to print locally (for example, because your client is remote), you have two options. One is to find a printer local to your client. Usually, the client will already have one lined up, but I strongly recommend you get in touch with that printer yourself, rather than just pass the files to the client and let them handle it. Ask questions, send over mock-ups, get a proof sent back to you—do what you can to make certain that the job prints the way it should.

Alternatively, you could find an online print shop that offers die-cutting. Again, get in touch with them personally, rather than just submit the file via an online form, and make sure all your questions and concerns are addressed.

Printer Checklist

Need help choosing a print shop and communicating with it? Here are some things to keep in mind.

Before you do anything else, get their phone number or email address and get in touch. Tell them about your project, and ask about technical specifications and any other questions you may have. (This is a good time to request a cost estimate as well.) If you have more than one candidate, rinse and repeat.
Ask to see samples of similar pieces they have printed. Examine them. This could lead to more questions—or inspiration to make your project even better.
The main criteria I use in choosing a printer is how responsive and knowledgeable they are. You want someone who will actually check your file and contact you if there are any problems or questions; because no matter how great a printing deal you find, if your file has an error, that’s money thrown down the drain.
To save some money, you can often do this by asking the printer for advice. Would making the file layout slightly smaller allow them to fit more cards on one sheet? Could you adjust the shape so that there is less wasted paper? How about using fewer colors? Your printer should know the options; just ask!
In my experience, PDF is one of the safest options for prepress. Native Illustrator files work well too, but be sure to check which versions of Illustrator your printer accepts. Always check which versions of any Adobe software your printer uses if submitting native files.
Ask the printer if they have .joboptions files. These files can be imported into Adobe applications and will give you presets for exporting to PDF or EPS. This is the easiest way to make sure that your final files are exactly the way your printer needs them. If they don’t have these files, both InDesign and Illustrator have presets for saving in PDF. Just make the necessary adjustments; for example, you will have to add the bleed to these presets manually (see the links at the end for step-by-step instructions).
If you are not able to speak with the printer, add an email message or a file with instructions. Don’t forget to include your contact information so that they can call or email you if they have any questions!

You’ve probably noticed that most of these tips emphasize the importance of communicating with your printer. I cannot stress this enough: every project is different, and communication is the key to getting the best result possible.

How Much Will It Cost?

While pricing depends on many factors, there is usually a set-up fee when using a die-cut or other special finishing technique. (Remember the giant hole-puncher mentioned above? They need to make one of those, just for you.)

The fee will be the same whether you print 50 or 500,000 cards, so printing larger quantities is much more cost-effective.

This may not be the case with certain popular formats (for example, rounded-corners business cards) because the printer would reuse the same template for multiple jobs, hence the special offers.

Special Finishes

I’ve devoted a big portion of this article to die-cutting because the file preparation and printing process described here is similar to many other techniques. But let’s look at some of them.

Spot UV Coating

This special finish is achieved by applying a clear varnish to an area of the card defined by you. The effect is a slightly raised design element, with a glossy, matte or satin finish. The example below shows a glossy finish:

File preparation is done the same way as for die-cutting, but instead of specifying a stroke, you specify a shape or area to apply the varnish to. This is still done by filling it with a spot color and, in this case, setting the fill to overprint.

Letterpressing

Letterpressing is done by inking a raised surface and then pressing it into the paper, giving the design both color and depth. This technique is suitable for vector images and text, using solid Pantone inks. An article linked to at the end of this article provides more technical detail. Here is an example of a business card done with this technique:

Embossing

Similar to die-cutting, a die is used to press the paper up, creating a three-dimensional raised effect.

Foil stamping

With this technique, a layer of thin foil is applied to an area of the card you specify.

File Preparation for Special Finishes

File preparation for all of these effects is similar to that of die-cutting: you have to define the area to be coated, embossed or whatever the effect is. But you might need to submit two files: one with the artwork, and another with the area to apply the effect to.

Make absolutely certain these two files line up perfectly. The easiest way to do this is to use a file with separate layers: one or more for the artwork, and another for the special finish guidelines (as described for the die-cutting file preparation above). Then, simply save them as separate files by first hiding one layer and then the other.

When using photos for a special finish, create a clipping path in Photoshop before placing the photo in Illustrator or InDesign. Then you can use this same clipping path as the mask for your effect either by choosing to export the clipping paths to Illustrator or by right-clicking (PC) or Control-clicking (Mac) on the clipping path in InDesign and converting it to frame. (You might want to check the options first if it isn’t showing by going to Object → Clipping Paths → Options.)

For example, you can use different masks with this image:

This mask will apply the effect to the entire photo:

While this one will apply it only to the foremost apple:

Special Inks

Additional inks can be used to make your card stand out even more. Metallic, pearlized and fluorescent inks can produce interesting effects. (To better preserve metallic inks, consider putting a varnish on top.) The even more common Pantone colors give a different and more solid effect than their process equivalents because they are opaque.

This one is simple: just find a custom color you like by looking at the Pantone swatches, and add it to your document. Prepare your artwork as you normally would, but make absolutely certain that your output does not convert to CMYK if you are preparing a PDF (as described above).

Note: the easiest way to prepare photos with a special ink is to convert your image in Photoshop first to grayscale and then to duotone. Choose your ink(s) from the Pantone library, and tweak your settings as necessary. (Working with color channels is a complex way to get more control over the result, but I don’t recommend this to Photoshop beginners, and Photoshop experts probably already know how to do this.)

Duplexing and Triplexing

This technique is about using two or more sheets of paper glued together. The effect achieved is commonly referred to as edge-painting or edge-tipping, because a different-colored sheet of paper that is inserted between the two main ones produces colored edges “inside” the card (triplexing), as seen here:

Using only two sheets (duplexing) gives a two-color edge—one on the front and one on the back:

It adds a touch of elegance and makes your card thicker than the standard stock. Combining this technique with die-cutting—budget permitting—gives an even more interesting result.

Scented Inks

You won’t find many examples of this technique on the Internet because it doesn’t exactly translate as a photo. Still, it is an interesting way to make your business card jump out.

Available scents range from chocolate to mildew. If that is not enough (and money is no object), you can create a custom scent for an extra fee.

Special Material

This is a vast subject because the options are countless. We will only touch on this topic. To see and feel the different kinds of material available, visit your printer!

Paper and Cardboard

There are so many varieties that I wonder why most people still use the same white or off-white cardboard stock for their business cards. From soft-as-cloth finishes to cold-pressed textured paper, there are enough options for everyone’s needs. The options are rather hard to describe; I recommend you make a trip to the printer (and give yourself an hour or so to ponder the choices)

File preparation is no different; except with colored paper stock, keep in mind that the colors will not display the same way in your software. To simulate the effect, use a layer of a similar color below the artwork, and set the artwork layer to multiply; or to about 70% opacity with darker color stocks.

Plastic

Transparent, frosted, stretchy—there are plenty of options for a plastic stock.

Plastic is usually printed with a different process, such as screen printing. Check with your printer to see what colors you can use. Special printing processes usually require that you use Pantone inks. Remember to account for any special effects, such as transparency and stretch. Giving general advice on this one is hard, because each material has its own requirements.

Metal

If your service or product is related to a metal, you might want to consider using metal as a material. You could simulate a credit card or computer. Keep the design minimal for a more striking effect.

Again, check with the printer before preparing your artwork to find out what process they use to print on metal and which colors you can safely use.

Other Material

Other options are wood, plexiglass, cloth. You could combine these and use a special finish as well. Hopefully this article has given you some ideas, and you will know how to start researching: by speaking with your printer.

Customizing by Hand

Sometimes, printing a highly customized card is simply not worth it, especially if you need only a small quantity. Does that mean you should dismiss your creative idea and stick with a standard solution? Not necessarily.

All you need is some imagination and a lot of patience. An appetite for crafts or having crafty friends or relatives can be a big plus, too.

You could print a standard card as the base of your idea and then customize smaller quantities by hand. I recommend doing this with fewer than 500 cards, or you will be overwhelmed. If you have crafty friends or relatives who are willing to help, you could tackle more.

Again, keep it relevant to the content. For example, colorful hand-stitching to underline a key phrase or “stitching” your design would be fun for a textile or fashion business:

Gluing on an element would work for crafts stores. Or you could glue a piece of fabric or something else that characterizes your service:

Incorporating something relevant to what you sell is a great idea, and there are plenty of ways to do this. Here is an excellent example:

A paper clip would work for a business supply store or even a business consultant, while a dried or plastic flower would work for a flower or gift shopt. Just about any kind of business can find something relevant to add on.

You could even invite the recipient to customize the card themselves; for example, by including cut and fold lines that transform your card into a unique shape. Simple examples are a paper doll for a children’s store or origami for a stationery store. Just make sure it’s relevant and fun, otherwise your recipients are unlikely to go through the trouble of cutting out and folding the card.

Hopefully this article offers enough information and inspiration for you to make business cards that are as creative as your imagination allows, and on any budget.

Want To Know More?

Here are a few articles that go into more detail on some of the topics covered:

Living in a Die-Cut World
An in-depth article on die-cutting from GoMediaZine.
Display, Printing, DPI and PPI
If you are really curious about the differences between DPI and PPI, this article by Photo.Net is for you.
Brand Spanking New Colors: Making Custom Spot Colors in Illustrator
A step-by-step guide with screenshots.
Page Bleed: What Is It, How Much Is Needed and How to Fix It
An easy-to-understand explanation of why bleed is needed and how much you need.
Adobe InDesign Tips
Tips on setting up bleed and exporting to PDF in InDesign.
Illustrator Tips Tips
Tips on setting up bleed and exporting to PDF in Illustrator.
TheStandard: Prepress
A very thorough guide from TheStandard on preparing your artwork for printing.
PDF Basics: The File Format and Its Use in Prepress.
Everything you need to know about preparing PDFs for prepress.
How to Choose a Printer or Prepress Specialist
Excellent tips from the printers themselves, put together by BoDo.
New Uses for Old Clipping Paths
A detailed explanation from Adobe on using clipping paths as frames in InDesign.
Combining Metallic Inks With Color
Useful tips on using metallic inks.
Creative Business Cards: Uses of Various Shapes and Materials
A showcase of different techniques and materials.

You may be interested in the following related posts:

(al)

Showcase of Interesting Navigation Designs

Sarah & Adrienne Kahn — Tue, 07 Sep 2010 06:12:22 -0700

Everyone is always looking for interesting and effective ways to organize their website and allow users to move about and find things. But there’s a fine line between unexpected and unusable. Three points to consider in any navigation scheme are consistency, user expectations and contextual clues.

If page is long and provides different levels of navigation, will users be able to find their way through the site and use proper navigation quickly? Forcing visitors to use certain keystrokes to navigate, rather than what they’re used to, might be novel, but is that effective if you have to explain instructions prominently on your home page? Here are some examples for your reading pleasure.

[Offtopic: by the way, did you know that we are publishing a Smashing eBook Series? The brand new eBook #3 is Mastering Photoshop For Web Design, written by our Photoshop-expert Thomas Giannattasio.]

Made by Water

A JavaScript-Powered Vertical Fun

The large bold headings and modern color palette on Made by Water feel fresh and fun. The grid layout is nice and clear, while the background texture is subtle but interesting. The icons at the top are visually appealing, and the animation makes them fun to click. It’s not immediately apparent what they are for, though. Some text would help to clarify that they are for navigation.

Vertical navigation buttons with icons.

The other problem with the navigation is the yellow “up” arrow that is displayed in the footer of the page. One would expect it to bring you back to the top of the page, but it leaves you more in the middle. The circle of stripes that follows you down as you scroll doesn’t match the background pattern, but we can’t tell if it’s part of the navigation. At any rate, we clicked it to no effect.

Finally, while the text at the top is fun and exciting, finding the “Who am I” section is a bit hard. It’s not immediately clear what the website is about.

Made in Haus

Horizontal Slideshow as Navigation

The large page keeps Made in Haus from feeling unoriginal, and the smooth motion is a bit different from many of the sliders we’ve seen. Bumping the accompanying text up into the body of each slide is a good way to keep it above the fold and visible as the user flips through the slides. The sliders on the sub-pages are also effective, being an easy way to skim through a fair amount of content. Also, nice hover-effects under the slideshow look attractive and give an insight into the work of the agency.

Bold horizontal navigation.

One drawback is that the triangle on the far right of the upper navigation menu is a bit confusing. It appears to link to the home page, as a logo would, but we’re not quite sure why. Also, the arrow on the right side of the slideshow may be a bit too tiny, making it a bit difficult for users to navigate the slideshow. We’ve seen a similar navigation earlier, on Weightshift which is a nice example of an alternative implementation of this technique.

Foundation Six

Animated Text Scrolls Down With the User

Foundation Six features a few big bold screenshots at the center of the page, giving us the impression that they were interactive in some way. The first thing that we did was try to click on the screenshots, but nothing happened (except for the central one which links to the description of the project featured in the center of the page), which was a little frustrating.

Text moves instead of images.

The headings are large and very clear, and the type is handled nicely throughout. The color palette is very soft and clean, and it nicely matches the atmosphere of the site. The call-to-actions buttons are large and easy to find, read and click. The subtle hover effects in the upper navigation enhance the user experience, making it smooth. Additionally, the contact form tracks well and is nicely laid out, while the map is a nice touch. The company scores bonus points for linking to Bring Down IE6.

On the projects page, the way the explanatory text slides down instead of the images is original. But being so unexpected, it could be a little disorienting, which may or may not be a good thing: is explanatory text really the best place to make a statement with moving parts?

Word Refuge

Textual Content in a Horizontal Slider

Word Refuge features an old-fashioned bookish vibe. Because it is a copywriting service, this seems appropriate. The contact form is prominent, easy to find and easy to use. The logo is also nicely done, and the color palette is rich and regal.

Various arguments for the company are organized into slides.

One small point is that the tag lines in the main navigation are effective under some of the menu items but not under others. Some of them feel redundant, as if they’re there only to balance things out. As a rule, if text doesn’t add any explanation, it shouldn’t be there. That said, the text throughout the website is nicely kerned, and while the page is wordy, the text is easy to skim through and read.

Relogik

Animated Horizontal Slideshow Navigation

Relogik is another example of minimalism done well. The logo is understated and sophisticated. Most design elements are semi-transparent and appear on hover. The close-up images are bold and make the content the focal point of the page. The code is clean and well-structured and uses a solid grid layout with pulls to keep everything squared up.

Sliding horizontal navigation.

The classic numeric navigation makes it easy to navigate the slideshow. One weakness is that the contact information has a very low contrast against the background. A darker color would help to highlight it. The project detail pages do a good job of showing rather than telling and of displaying each piece in a real-world context.

Drexler

Horizontal Navigation… If the User Follows Instructions

The horizontal navigation on Drexler works both with the arrow keys and mouse clicks. On the first glance, it’s not clear how to navigate the site: you need to either read the hint in the upper area of the site (“User your arrows”) or experiment with the design to figure it out. To browse blog posts, users need to click on the illustration of the post or use keyboard arrows. The design itself is visually appealing, but the navigation scheme isn’t straightforward.

“Use your arrows” to navigate.

The retro color palette and big bold fonts make the website colorful and energetic, but they also might be a little overpowering. The “t” for Twitter in the upper right is an interesting break from the usual little bird, but the downside of breaking with convention is that you might lose clarity. We didn’t know what the icon was for until we clicked it, and we probably wouldn’t have clicked it if we were merely visiting the website as a normal user. The contact button is amazing indeed, as it claims. The multi-column contact form is an interesting take on the email form. It seems effective, and it tracks very well. This is a design that needs to be explored to be understood — but maybe it was the intention of the designer in the first place?

The logo is simple and clean, but again, it adds a note of confusion. The yellow underline on mouse-over feels unbalanced, because the rest of the logo isn’t highlighted. One other thing to note is that the page changes color to match the project being displayed. This is an unusual take on the portfolio. Usually, projects are displayed uniformly, sometimes to the point of being indistinguishable. This approach makes the projects stand out, in a good way.

Komrade

Vertical Navigation With a Twist

This page allows users to forge their own path through the website. Komrade features original illustrations, a fresh color palette and an original “Choose Your Own Adventure”-style navigation scheme. The navigation has the following cracks in it, though:

The light blue text looks like it’s hyperlinked. One of the first things a user sees upon loading the page is the blue “Who’s Komrade” heading. The first thing we did was click it, but nothing happened. This started the user experience off on the wrong foot. With this unusual scrolling navigation, distinguishing the clickable from the unclickable is extremely important.
The numbered navigation for Komrade’s past work does not stand out enough. The red circles look like yet more flowers, which caused us to pass over them several times before figuring out that they were the navigation. This goes back to the clickable/unclickable issue. Well-placed labels would go a long way here.

“Choose Your Own Adventure”-style navigation.

All For Design

Scrolling Navigation and “Shelf”-Navigation

All For Design feels light and airy, with its crisp woodcut headings and subtle effects such as the Twitter icon that flies on hover. The design os single projects pages is especially nice, making clear exactly what was involved in each project. The section “some inspiration” nicely puts books, useful websites and articles on a “shelf” and has subtle shadow- and hover-effects. The only problem is that the title-attribute is displayed on hover together with the screenshot which makes it a bit difficult to focus on one of them.

“Shelf”-navigation.

Calendar next to the contact form.

The calendar next to the contact form is also a great idea: it sets expectations and makes it easy for potential clients to plot a timeline. While the font is scannable, it still feels a bit too wordy overall, although the shadow effects, subtle borders and custom icons keep the eye flowing down the page.

Digital Labs

Horizontal or Vertical Navigation?

With the prominent screenshots on this website, one would think the page would have horizontal navigation; in fact, the page is static. Digital Labs uses a wide layout, with a nice textured background. The dark colors make it feel spacious without being too spacey. One issue, though, is that the orange ribbon on the right looks like it should be clickable, but it isn’t. The text-based social media widget, which responds to mouse-over, is an interesting touch. The web design scene is full of social media icons, so a text-based widget stands out.

The static screenshots above look like a slideshow.

The other issue is that the “Are you ready to get started?” link at the bottom is a mailto: link, rather than a link to a contact form. This is acceptable, but a drop-down form in that space would really kick things up a notch.

Calobee Doodles

Classic Thumbnail and Lightbox Combination

Calobee Doodles, an illustration-based portfolio website, has fun details, such as the objects and people falling from the sky. The cloud menu items could be clearer, though. At first, we were not sure what “Custom” stands for (it stands for custom design and illustration work). However, the menu benefits from descriptive tooltips and appear on hover. Still, a different wording, for instance “Work”, would have been clearer.

The website uses the classic thumbnail and lightbox navigation.

A thumbnail gallery is a common way to display work, but in this case illustration thumbnails are a bit too small, and they are linked to images. A lightbox may work better in this context. The bottom-up-navigation may be useful for some readers, and the footer is truly remarkable. Also, it would be nice to remove dotted lines appearing on click in the navigation menu. A simple outline: none; for links with proper styles for :focus and :active states would suffice.

Build

Classic Top-Level Navigation

While the overall layout of Build is clean and modern, the content could stand to be more easily scannable, for two reasons for this. A look at that code suggests that the margins and padding are a bit arbitrary. The padding for the main body conforms to a design pattern, but the major content elements do not. Maybe it would be a good idea to use multiples of a set base number for the margins, padding and borders, so that there is a consistent ratio throughout.

Classic top-level navigation.

Secondly, the contrast of the text in the content sections has some problems. The contrast between strong white and strong grey background is very striking, and maybe a bit too strong. The second part of the page looks a bit busy and a bit difficult to scan, probably because the colors of the headings and descriptions are very similar. Maybe if the headings were kept as a serif, the content blocks could be distinguished a bit by making the text lighter and using a sans-serif font. Some textual variation or typographic work might add visual interest as well. Subtle hover effects for links are attractive and fun to click on: nice touch!

We liked the listserv sign-up widget in the footer of the page. A sample email in the relevant field, along with more space on the line, could be a helpful, though. Also, an explanation of what exactly users are meant to type here would be great — for instance, a sample e-mail in the input field. Also, the mouse pointer should change after you click on the submit-button, but in this case it doesn’t. We fumbled a bit at first until we looked at the code.

Mail Chimp

Graphics-Heavy Vertical Page With No Navigation Other Than Browser Scroll Bar

Mailchimp’s promo page is a visually appealing website with a lot of interesting vintage graphics. Some real strengths of this website are the many interesting textures and patterns. The color scheme is modern and appealing. There are, however, a few usability problems. First, there is actually no navigation. We’re as big a fan of shedding unnecessary conventions as the next guy, but if we were an existing customer visiting this website, we would have no idea what to do. The “Sign in” link is obscured at the bottom of the page, with few visual cues to reward the user’s patience as they scroll down. Even a few small links at the top would add some structure and provide some cues for navigation, which would make the whole website make more sense.

Graphics-heavy vertical website.

Secondly, the edgy graphics, while fun and visually interesting, don’t give much sense of what the main point of the page actually is (if you are visiting the site for the first time). The primary message is only delivered in the paragraph towards the middle, and even it is a bit hard to read, with the small white text over the shades of gray. The paragraph would be more effective if it were bigger and had more contrast. The promotional videos are really great and remarkable, though.

Pline Studios

Minimalism in Vertical JavaScript-Based Navigation

Pline studios is an architecture firm, so it makes sense for it to have a spacious vertical layout with graphic touches that are reminiscent of CADD drawings. The big headings are clean and visually appealing and do a great job of leading the eye around. In an unconventional navigation scheme, making it clear where to click is critical, and this website makes it extremely clear. The navigation is repeated in each section, so the user is never stranded and left to scroll.

One problem, though, is the project descriptions; so much focus is on the images and animations that there’s actually very little explanation about the projects themselves.

Minimal vertical navigation.

Transformology

Persistent Toolbar-Navigation

Transformology shows another way to handle navigation on a vertical page. When the user scrolls the page, the navigation menu at the top of the site changes accordingly. The elaborate headings in the text blocks are visually appealing, but almost to the disadvantage of the content that should be showcased. The headings make the content easy to see but more difficult to read. The website has a clean, solid grid layout, but it may not always do an effective job of displaying the content, which sometimes feels overpowering.

Static navigation follows wherever you go.

Burton

Sliding Captions and Tabbed Boxes in a Vertical Layout

The first thing we noticed about Burton is the nice visual details, such as the animated eyes on the “Search and Destroy” search box, and the animated GIF on the mouse-over logo. The jigsaw layout is clean, bold and easy to scan. The mouse-over labels are a good way to display details without overwhelming users with text, and the mini-tabbed layouts inside the content blocks keep things clean and minimal. All of the content is available without being visible all at once.

The scrolling vertical navigation is aided by the jigsaw sections with sliding captions.

A problem with the navigation, though, is the up and down arrows on the side of site’s pages. We expected that they would allow us to move up and down the page; instead, they pop out a text-based navigation menu. Not knowing what sections of the page correspond to the labels (for instance, when you visit the page for the first time), this isn’t very useful. Still, overall very nice, original and memorable design.

New Adventures in Web Design

Fun Shapes That Feel Like Navigation

At the first sight, the interactive shapes in the middle of the New Adventures page feel a bit like navigation, in that they change as you move through the website, providing cues that the page has changed. New Adventures is an example of a clean and solidly structured design. The rainbow of dynamically transforming shapes is fun and original. Adding more color could make the design a bit stronger; the brown palette is calm and professional, but it probably could have been be more interesting with some accent colors.

The shapes move all over the place!

The typography overall is effective, and the line heights and margins make the information very clear and concise. An interesting touch of the design would be to highlight the speaker’s photo when a user hovers over his or her name in the list of speakers. Also, when trying to return to the front page, we clicked on the text logo in the left upper corner (“New Adventures in Web Design”), but it isn’t clickable which is a bit confusing. We had to use the small “Home”-link in the upper left corner instead.

Christopher Kaufman

Wide Horizontal Slider With a Difference

On Christopher Kaufman’s page, the sub-content panels slide up as the slider moves left to right. The layout is clean and organized, the background is colorful and unique, and the slideshow adds plenty of eye candy. The logo is minimal but detailed, and the top-level navigation is clear and effective. One drawback is that the background image is a pretty big file; as it loads, it creates a flashing effect that can be disorienting. One could argue that the height of the slideshow is optimized for larger screens; but scrolling through the slideshow content, some users can see that the content below has changed, yet have to scroll down to read all of it. This isn’t necessarily a big issue, but the slideshow panels could be a bit shorter.

The wide horizontal navigation forces users with small screens to scroll.

Chapolito

Another Example of Tabbed Navigation

Chapolito is really a unique website. The footer animation catches the eye right away, and the abstract shapes in the top-level navigation are original, as is the way the logo is integrated in the navigation, which keeps the brand as a focal point. We do have a suggestion for the sub-navigation in the portfolio section, though. The circles-as-progress indicator probably works best for slideshows of about five pieces of content or fewer. With such an extensive showcase, the user might get lost and not be able to find a particular project again. If numbers were in the circles, that would help.

Interesting top navigation.

Flywheel Design

Sliders and Graphic Tiles That Flip on Mouse-Over

Flywheel Design gives a good overview of its work right on the home page. The hover-over navigation is fun and gives users an incentive to mouse around and explore. The background is simple without being boring, making this a good example of minimal design. One problem for us was the slider navigation on project sub-pages: almost too minimal, because it took us a while to figure out it was there. Making it a little bigger or adding a splash of color might help.

Flip-tile style navigation.

Wishbone Design

Flash-Based Animated Navigation

Wishbone Design is created for kids and parents, so it makes sense for it to be fun and full of Flash animations. The navigation is entertaining but a little hard to use. Having the sub-elements open on hover seems to be the root of the problem; changing it to a click might give users a greater sense of control. Hover navigation should be as speedy as possible. The main slideshow is eye-catching, but you really have to dig to figure out that this is actually a company manufacturing bicycles (among other things). An explanatory blurb or even some slides would help new visitors. Another problem: if you’re going to have audio, please give users a way to turn it off! Overall, the site is truly remarkable, with attention to details. Nice work, this is what Flash is supposed to be used for!

Flash-based navigation.

Basmatitree

Flash-Based Animation That Could Be Navigation

We can’t lie: on first arriving on 60 mq missione casa, we were really hoping that the spoons were the navigation. We were sad to find out they aren’t. That said, this is a pretty fun layout for a food blog. The typography could benefit from some more variation, though. Also, the posts would be easier to scan if some texture or color variation were added to the columns.

Flash-animated spoons are fun!

Minus Five

An Entirely Horizontal Sliding Website

Horizontal navigation can be problematic. In this case, though, Minus Five is larger than life and colorful. The hover-over “Forth” and “Back” controls are large and easy to see, making it abundantly clear where you can click and what you are supposed to do, and avoiding one of the common drawbacks of unconventional navigation.

Entirely horizontal navigation.

For a portfolio, one thing that could confuse users is that the featured websites are not linked to anything. Using images embedded in a Mac frame to convey that they are websites is a good idea, but they make it a little hard to see the details in the designs. Another questionable design choice is positioning the portfolio pieces to the right of the background image. This makes it feel as though the background is the focus, instead of the portfolio pieces themselves. Also, the page is difficult to browse if you don’t have a proper wide screen display, because you see only small chunks of the site at once.

Retinart

Completely Text-Based Navigation

Retinart is a lovely example of a typography-focused website. The nice, even gutters and margins are relaxing on the eyes. One thing that’s a little unexpected is that the “Feedback” tab on the left side doesn’t pop out from the side (as most users would expect), but rather opens a modal window.

The beautiful typography goes well with imaginative language.

Notice the careful attention to language. In conjunction with beautiful type, a designer can really take it to the next level by using beautiful language to emphasize the quailty of the site.

Collision Labs

Classic Tabbed Navigation

Collision Labs is energetic. We immediately wanted to take this design firm’s advice and fasten our seat belts! The large header block is exciting without being overpowering. The portfolio sub-pages are clear and do a good job of both telling and showing what the projects were about. The typography, though, is a little uniform. One thing that confused us was the Twitter icon in the footer navigation: the bird flips upside down on hover. We couldn’t really see the reason for this, so it felt vaguely unsettling. Overall, though, an effective website, and a good example of judicious and not excessive icon usage.

Bold color and traditional navigation.

Summary

In sum, navigation is as much about communicating instructions for finding content as it is about being fun and interesting. There are some points to take away. For instance, if something is clickable, make sure it looks clickable. If it’s not clickable, make sure to communicate that, too. Also, be fun without being confusing. And show, don’t tell. If you have to tell users what to do, then the navigation has failed. After all, the crucial attribute of any truly exceptional website is both aesthetics and the usability of its navigation.

Would you like to see more similar showcases on SM?

Let us know what you think in the comments to this post! And please like this article below if you find it useful and would love to see more similar posts on Smashing Magazine in the future. Thanks.

Keynotopia Wireframing Set: Free Wireframing Templates for Apple Keynote

Smashing Editorial — Mon, 06 Sep 2010 16:01:01 -0700

Lately, Apple Keynote has been gaining popularity among designers as a wireframing and prototyping tool. Features like multiple slide masters, styles, grouping, animation and hyperlinks make it ideal for crafting interactive prototypes and UI narratives. Today’s freebie, Keynotopia, is a free set of interface elements for Keynote that makes it possible for anyone to create these prototypes in minutes. All elements are hand-crafted in Apple Keynote, and organized in nested groups for easier manipulation and customization. The templates can be used in Keynote 09 and 08 and are designed by Amir Khella.

Start with a blank presentation, and create a new slide for each application screen. Then copy/paste elements from the wireframe templates into your slides, and edit their labels, sizes and colors. To save time, group elements together, and use master slides to share common interface and navigation components across multiple screens. Finally, add hyperlinks to enable user interaction, and use slide transitions to create cool interface animations.

Voila! You now have an interactive prototype that you can test with users, share with team members, and present to stakeholders.

Download the set for free!

You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. The set may not be resold, sublicensed or rented. Please link to this article if you want to spread the word.

[By the way, did you know we have a free Email Newsletter? Subscribe now and get fresh short tips and tricks in your inbox!]

Screenshots

Containers and Dialogs. Large view.

Controls. Large view.

Navigation. Large view.

Galleries. Large view.

Social Web. Large view.

Browser window. Large view.

Application window. Large view.

Lightbox. Large view.

Badges and icons. Large view.

Motivation behind the design

Here are some insights from the designer of the set:

“The first time I’ve used Apple Keynote for prototyping, I was helping a friend create a product pitch for his startup idea. He didn’t have design or development skills, and I wanted to show him how he can quickly put together a click-thru demo in less than an hour, using his favorite presentation tool. He was impressed by the outcome, and I was equally impressed by Keynote’s simplicity and efficiency. I never went back to my prototyping tool since.

Keynotopia was created so that anyone with an idea can quickly test its potential, without having to spend time and money on design and development resources. It’s a simple proof that having the right mindset for prototyping is more important than buying expensive tools.

I also wanted to find a way to avoid writing UI specs. Using Keynotopia templates, I created prototypes that I annotated and shared with development teams, and the response was phenomenal! Time was no longer spent reading, staring at screenshots and imagining interactions; developers and testers were actually having fun playing with the prototypes and providing feedback. Design was finally catching up with the lean and agile development process.

I am constantly updating the website with guides, tips, and new prototyping templates.

— Amir

Thank you very much, Amir! We appreciate your efforts.

You may be interested in the following related releases:

Fight The System: Battling Bureaucracy

Paul Boag — Mon, 06 Sep 2010 01:13:40 -0700

If you work as part of an in-house Web team, you have my sympathy. If that in-house team is within a large organization, then doubly so. Being part of an in-house Web team sucks. Trust me, I know. I worked at IBM for three years and now spend most of my days working alongside battle-weary internal teams.

Web designer trying to hang himself.

It’s hardly surprising that most in-house teams are worn down and depressed. They face almost insurmountable challenges:

Departmental feuds
Too often, a website becomes a battleground for pre-existing departmental conflicts. Political power plays can manifest themselves in fights over home page real estate or conflicts over website ownership. After all, is the website an IT function or a marketing tool?
Uninformed decision-makers
Rarely does an internal Web team have the authority to make final decisions on a website. Instead decision-making happens higher up in the organization. Unfortunately, although these individuals have more authority, they do not have greater knowledge of the Web. Decision-making is often based more on personal opinion than the needs of users or business objectives.
Committees
Committees are the curse of larger organizations. The bigger the organization, the more the number of people who want their say, and that leads to committees. Unfortunately, committees inevitably lead to compromise and design-on-the-fly. Both are the kiss of death to any Web project.
An inward perspective
Becoming institutionalized is very easy in a large organization. Eventually you speak an internal language and think in terms of organizational structure. This proves problematic when communicating to end users. Not only do most large organizations have their own internal perspective of the world, some individuals even think departmentally, further aggravating departmental conflict.
Endless scope creep
When an in-house Web team is constantly available, calling on their help is easy. This is both a benefit and a curse. The truth is that many Web teams are taken for granted, and websites that should never exist are built and launched because there are no constraints. Worse still, good projects can be drowned as “internal clients” keep demanding additional functionality that the Web team cannot block.
Problem people
The bigger the organization, the higher the chance they will hire a jerk. If you work for a large organization, I can pretty much guarantee you have someone in mind as you read this. These people can really hinder the work of the Web team and prevent a website from reaching its full potential.
Glacially slow progress
With endless red tape and painful committees, getting stuff done in a large institution can be nearly impossible. It is not unusual for projects to grind to a halt entirely because they become dependant on other systems or projects yet to be implemented. I have even seen something as simple as the roll-out of a content management system take years to implement.

With the odds stacked so high against them, I am surprised in-house Web teams get anything done at all. Their success depends as much on their ability to navigate politics and bureaucracy as it does on their skills as designers and developers.

But do not despair. I can tell you from the over-subscription to workshops I have run on the subject that you are not alone. This is a universal problem and one that can be overcome, as I will outline in this post.

Our Web design agency specializes in complex projects. During my time there, I have developed certain techniques that will hopefully help others keep their Web projects moving.

Let’s look at four areas in particular:

Improving how your team is perceived within your organization,
Overcoming politics and problem people,
Ensuring that a project gets approval from the powers that be,
Delivering work within scope and on time.

Let’s begin by addressing how Web teams are perceived.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]

Improving How Your Team Is Perceived

In too many organizations, the Web team is considered the lowest of the low. It looks like something straight out of The IT Crowd.

This is all the more bizarre considering that websites themselves are perceived as being important. Somehow there is a disconnect between those who produce websites and the websites themselves.

This poor attitude toward Web teams boils down to two beliefs:

The Web team is a road block that needs to be detoured.
Many large organizations find themselves frustrated by their internal Web teams, seeing them as people who constantly block their more “imaginative” ideas and set restrictions on what they can and cannot do online.
Web team members are implementers, not experts.
Management perceives Web team members as “techies,” there to implement the ideas of others. They are in no way perceived as experts who are capable of advising on strategy.

Fortunately, much can be done to overcome these beliefs. For a start, improve your communication skills.

A disturbingly cheerful Web designer.

Communicate Better

Most internal Web teams are terrible at selling themselves. If they were a Web agency, they would be out of business in a few weeks. Perhaps that is their reason for working in-house. But despite what you may think, most internal Web teams could desperately do with communicating and selling better.

To overcome the negative impressions people have of your team, you need to actively promote yourself and the work you do.

Here are just a few ideas to try:

Hold launch events.
When was the last time you celebrated the launch of a new feature or the redesign of your website? Holding a launch party is a great way to shout about your successes, and it’s fun, too. Email colleagues, telling them how excited you are about the completion of your latest project, and invite them to celebrate with you. Everyone loves free food, and it’s a great chance to show off your work.
Publish a monthly newsletter.
How will anybody know about the great work you do if you don’t tell them? One way to do this is through a monthly newsletter that features work you have been doing and cool stuff happening online. This is a great way to both increase your profile and educate people on the power of the Web.
Report successes to management.
Management needs to be regularly informed on traffic levels, dwell time and conversion rates. If you don’t have any calls to action to track conversion, get some. If you have no way to measure success, then the team is simply a drain on resources. Demonstrate that you generate income, rather than just spend it.
Offer training courses and workshops.
Part of your role as in-house Web team should be to educate those in the organization about the Web. I’m talking not just about technical training on using the CMS, but rather more general training about the Web and how it can benefit your business. Sessions like this not only educate internal stakeholders, but also increase your credibility and establish you as the expert.
Hold regular meetings with website stakeholders.
Set up regular meetings with those who most often use the website. Talk to people such as the head of marketing, sales and IT. Meet with front-line staff who answer customer support queries or those who work with suppliers. These meetings build relationships across the organization and demonstrate that the Web team is always looking for ways to help the business.

By improving communication within your organization, you significantly improve the perceived value of your team.

Create Value

There can be little doubt that internal Web teams are undervalued. As an external consultant, if I say exactly the same thing to management as the Web team, management will listen to me and ignore its own people. This is largely because as an external consultant, the cost of my advice is more evident. They listen to me because they are paying me in a very visible way.

Of course, they are paying as much (if not more) for their internal Web team. But that cost is not as evident and so is not valued as highly. The way to increase the value of your team is to make that cost more visible.

People are less likely to ignore your advice or waste your time if they are obviously paying for your advice or time. The way to establish this kind of value is to cross-charge for your work between departments. Have an internal charge-out rate based on salary, infrastructure, training, etc., and then price any new work coming into the department based on that rate.

This not only makes your value obvious, it also makes “internal clients” think twice before asking you to build some ill-conceived project just because you’re “free.” Nothing will change perception more than making them pay for your time.

Man holding a briefcase of money saying nothing is free, not even your internal Web team.

Of course, you might not be in a position to cross-charge. But that doesn’t mean you can’t go through the process of setting rates and costing projects. When you receive a request for work, respond with a breakdown of tasks, how long it will take and how much it will cost the company based on your charge-out rate.

While not as compelling as charging for work, it still drives home the point that your time is valuable. It might also make them think twice before suggesting a project, especially if they know that pricing will be included in your report to management.

Finally, keep track of the time you actually spend on projects. This will help with scope creep (see below) and show management how efficient you are.

Of course, cross-charging can be perceived as another blocking tactic, reinforcing people’s negative opinion of your team. Therefore, balance this with a positive and helpful approach…

Be Positive

No offence, but most of the in-house Web professionals I meet are a miserable lot. Okay, that was probably offensive. Still, it shouldn’t come as a surprise. With so much negativity aimed at Web teams, some of it is bound to rub off on them. It is up to you to keep the website on course, and that involves telling people “No” or putting constraints on what they can do. The problem is that this damages relationships and eventually forces people to bypass you, often by outsourcing to agencies such as mine!

However, you don’t need to say no to people or even constrain them with rules. Take my situation, for example. When clients pay me, I don’t have the luxury of saying no. I have to be Mr. Positive, or they’ll just find someone else.

The next time someone asks you to implement a stupid idea on the website, try to be positive. Praise positive aspects of the idea (if there are any), and encourage the “client” to explain their thinking behind the rest. Often you will find something workable in the idea.

Even when the idea has no redeeming feature, there is still no need for you to say no. Instead, explain the probable consequences of the idea to the client, and guide them to the point that they reject it themselves. The problem with “No” is that it is a dead end. It leads only to confrontation. By focusing on the positive and educating the client on the consequences of their suggestion, you create an open and honest conversation.

The process of educating the client on the potential pitfalls of their suggestion also demonstrates your expertise…

Become the Expert

The ultimate aim of improving your reputation is to establish yourself as an expert. If people see you in that way, then they will listen to your opinions and follow your advice. But if your reputation is already damaged, coming to be seen as the expert is hard.

One way to be perceived as an expert is by association. This comes in two forms: referring to another expert or having an expert refer to you.

Referring to an expert is easy. If you have no credibility in the eyes of internal stakeholders, borrow the credibility of others. For example, the next time a client asks you to put all content above the fold, don’t just tut and say that it’s a stupid idea. Instead, refer to a study on the subject, such as one of the several by Jacob Nielsen. This lends weight to your argument and demonstrates that you are well read on the subject.

The second approach is to get an expert to back you up. Essentially, this is the very reason why I am hired by many Web teams. I am brought in to reinforce the arguments they have been making all along. Because I am perceived as an expert and support what the Web team says, I add creditability to the team and increase their expertise in the eyes of management. It’s ridiculous, but it works.

Web designer suggesting a better way of working.

Finally, don’t try too hard. A true expert demonstrates their knowledge but is not afraid to admit their limitations. They are confident enough to challenge wrong thinking, but not arrogant or aggressive. I speak with too many in-house Web developers who come across as sneering and condescending because they believe they are above everyone else.

While improving your reputation will go a long way to pushing your projects forward, it is not the only hurdle to overcome. No matter how respected you are, there will always be those with agendas that interfere with the smooth running of your website…

Overcoming Politics And Problem People

Politics are unavoidable in large organizations, and yet most of us consider ourselves above them. We claim not to play politics, and we moan about those who we perceive do. But in reality, we all do it. We all have an agenda and want our point of view to be taken seriously. To believe otherwise is naive.

Ultimately, having a holier-than-thou attitude to internal politics is damaging. If you refuse to deal with those who play politics and avoid pushing your own agenda, you will only damage the website.

To get things done in a large organization, don’t shy away from playing the political game. As the saying goes, if you can’t beat ’em, join ’em.

While we’re citing aphorisms, another one is, keep your friends close…

… But Your Enemies Closer

One of the biggest mistakes people make with problem people is avoiding them. A far better strategy is to keep them close. The problem with avoiding your “enemies” is that you are entrenching their position. If they know you are hostile towards them (and trust me, they’ll know), then they’ll become even more hostile towards you. Eventually, the arms race of hostility will get out of control.

A better approach is to keep talking. Meet with them regularly. Ask them what they want from the website? Look for ways to build bridges. Listen to what they say.

Some individuals only want their voice to be heard. As long as you listen and make them feel important, they’ll go away happy. Also, let them win whenever possible. It may dent your pride, but that is a small price to pay for winning the war.

A client refuses to sign off a design.

On the topic of war…

Avoid Confrontation

When I suggest that you meet with problem people regularly, I’m not setting the scene for a monthly showdown. In fact, avoid confrontation whenever possible, especially when other people are around. No one wants to lose face in front of their peers, which is why people become entrenched in their views in group settings.

Instead, use the tactics I spoke of in relation to being positive. Use the question “Why” as a way to encourage people to think through their position. Encourage positive contributions with praise, and explain their consequences in the gentlest language possible.

Finally, when you are criticized in a group setting (such as a committee meeting or group email), take a long deep breath before deciding whether to respond.

In my experience, there is little point in becoming defensive or, worse, retaliating. Most of the time I don’t say anything at all. It’s amazing how often someone else will leap to your defence if given the chance. Better that they say how great you are than saying so yourself!

Of course, it should never come to that, especially if you learn to empathize with problem people…

Learn to Empathize

As Web professionals, we pride ourselves on our ability to empathize. We go to great lengths to get into the heads of our users and understand what they want to achieve and how to motivate them. We have become experts at nudging users towards the goals we want them to complete.

Interesting, then, that we totally fail to demonstrate this ability with our colleagues. Instead, we often dismiss them as stupid or “not getting it.” This kind of narrow-minded attitude causes many of the problems we encounter. Take the time to really understand your colleagues. What makes them tick? What problems do they face in their jobs that the Web could solve? What pet subjects could we use to nudge them in the right direction?

If we tried to empathize with our colleagues and understand their psychology, we would find internal politics much less painful.

A Web designer talking to a client about his problems.

Stay tuned for the second part

The second part of this article will be published soon here, at Smashing Magazine. Please stay tuned for our updates: subscribe to our RSS-feed and follow us on Twitter.

You can also check Paul’s workshop that he ran on the topic of this article.

You may be interested in the following related posts:

Web Design Checkmate: Using Chess For Success in Web Design

Alexander Dawson — Fri, 03 Sep 2010 02:49:39 -0700

The business of building websites is one of constant change, adaptation and strategy. The way designers and developers build websites is often informed by the methods of others and their own trial and error. In light of this, we can draw a number of parallels — some philosophical, to a certain extent — between Web professionals and one of the oldest and most popular board games of all time (counting traditional and digital games). This game is chess.

Image credit

In this article, we’ll explore the relationship between the game of chess and the Web industry. We’ll learn fundamental lessons from the pawn, rook, knight, bishop, queen and king, and we’ll highlight the factors — both offline and online — that determine best practices. The game is beloved by many professionals, so it seems fitting to apply its great strategy and elegance to the digital age; certain practices might help you lead a more successful working life.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]

Pawns

Of all the pieces on a chessboard, the most abundant and least strategically useful are the pawns. Acting as soldiers on the front line, these men of honor advance across the board in an attempt to reach the end of the opponent’s side and transform into a more useful piece (i.e. another queen). While this doesn’t happen often, pawns nevertheless play a fundamental role in shielding higher-ranking pieces from attack, and these simple pieces are also used at the outset to gain positions of advantage.

Always Move Forward

Pawns can only move forward. They can get a quick start; players have the option of moving the pawns up to two spaces on their first move and subsequently moving them one space at a time. When you work on projects in a business environment, the principle of moving forward without back-tracking is an inspirational perspective. If you cease to constantly drive your ideas forward, they can become stagnant; progress is critical to a website’s development.

Here are some tips you can use to adopt this mindset:

Don’t get stuck using deprecated practices when structuring website code.
Examine your community to determine needed features for future upgrades.
Change a website’s interface only if it would benefit the user experience.

Be Willing to Sacrifice

The ideal of giving something up in exchange for a greater good is realized by pawns, which, though limited in function, are plentiful and can protect others. In design, shielding the end user from issues that can damage the usability of the website is a worthwhile sacrifice. Having to let go of something that took time and energy is always unfortunate, but knowing when to say goodbye could mean the difference between success and failure.

Here are some tips for internalizing this attitude:

Ensure that your Web layouts are flexible enough to meet the needs of various devices.
Weigh the benefits of features against their pitfalls before eliminating them.
Content is more valuable than design; never dilute its quality for eye candy.

Aim for Change

The pawn’s greatest moment is arriving at the opponent’s side of the board. Striving for betterment and aiming for your goals are behavioral ideals firmly upheld by professionals. This requires dedication and careful planning. When undertaking a creative project, it’s important to think beyond the current ask and consider the long-term project.

Here are some tips to get into this mode:

The website-building process is never complete; ensure that you maintain a steady flow of updates.
Think of ways to enhance the website to better cater to your visitors’ changing needs.
It never hurts to have a business plan when scoping out a Web-based project.

Rooks

Rooks (or castles, as some people call them) are fortresses of strength that move across the board either horizontally or vertically. Their nature is similar to that of bishops in that they move in a straight line (although bishops move diagonally). Progress can be hindered by barriers, and interaction with other pieces is sometimes required, but the rook’s overall benefit is stamina and longevity.

When working on Web projects, we often put a great deal of thought into things like conventions and patterns and their theory and implementation. The nature of semantics and following recognized pathways in order to structure a document properly is reminiscent of the way that chess pieces such as the rook have a particular function and invariably carry out unique tasks. Only with logical thought can we hope to change the ultimate goals of an event and avoid obstruction.

Structure With Purpose

A rook represents strength and structure. The castle of stone might be restricted in its interactions on the chessboard, but its value is in its character. Websites need to be constructed well in order to survive the trials of everyday use. Considering how such needs should be met will ensure a sturdy and durable display of data. Take great care when structuring your work to reduce “illegal moves” and syntax.

Here are some tips for strengthening your outlook and code:

Always validate your code; it will reduce the number of bugs.
Use the right element for the job to improve your code’s semantic value.
Keep code minimal to reduce file size and loading time.

Assist Those in Need

Like the other pieces on a chessboard, the rook is always on hand to help out by attacking or defending. Working with others to accomplish a task is only part of their job. In a Web environment, the same is true: if you take the time to assist those who use your website or service, not only will you increase your value, but you will gain the gratitude of the visitors, whom your website requires in order to keep running.

Here are some tips that might be of assistance:

Providing ways for people to contact you is important to maintaining trust.
Negative feedback can still be constructive; don’t dismiss it as “bashing.”
Provide social interaction aids to help visitors feel involved in your community.

Take Precautions

Sometimes things don’t go as planned, in which case you’ll want to hold the strongest position possible. Rooks, like all other critical pieces, are only tools to protect other pieces in play, but caution is fundamental to remaining in a position of power. Thinking of how future scenarios might challenge your strategy can help future-proof your work from obvious flaws. You don’t want visitors to encounter obstacles that make them miss out on the benefits of your website!

Below are some tips for fortifying your website:

Turn off scripts and styles to test whether your website is still usable.
Test your websites on mobile devices, a market that is proliferating.

Knights

Knights are unique in their movement, going forward two spaces and then taking a single side-step. This means they can weave past other pieces and take up positions of singular advantage. Strategically, knights are most often used to pin hard-to-reach pieces in place through a clever attack. While this unique movement has its advantages, the knight does not replace the other pieces, which have their own strategic benefits.

Our uniqueness, whether as it is applies to our creative process, our products or our ability to solve common problems, is something we as professionals take for granted. We are able to incorporate creative flourishes when we forge applications, flourishes that can be tracked through the code (such as conditional comments, which give stylistic flavor to Internet Explorer). Like a white knight saving our sanity, our uniqueness helps us side-step issues that could otherwise become complicated.

Be Brave in Adversity

Mythology has taught us the familiar attributes of the knight: bravery, strength and honor. Thoughtful reflection on the Web-building process teaches us to be courteous to others and brave, while sticking to our guns when faced with the prospect of compromising in order to gain market share.

Here are some tips to make yourself more knight-like:

Never take criticism personally; negative feedback is often the most useful kind.
Don’t resign in the face of competition; the only failure in life is to quit trying.
Try to rally support for your project; there’s strength in numbers.

Have a Selling Point

The knight is the only chess piece that move in two directions in one turn; even the queen can’t do this! This attribute teaches us the value of having a selling point. Selling points give visitors a reason to choose one product or service over others that perform the same function.

Here are some tips on finding your selling point:

Draw from other people’s work, but never steal anything outright.
Improving on existing services is a kind of innovation in its own right.
Be focused in what you offer; reinventing too much increases complexity.

Avoid Barriers to Access

The knight is the only piece that can pass over others in its movement. This ability to navigate past barriers is somewhat reminiscent of standard recommendations for accessibility, which ask us to remove barriers to access on our websites. The goal is to allow freedom of movement and access to content.

Below are some tips on removing barriers:

Consider the types of people who are not as able as you are online.
Testing your work on an audience is better than going solo.
Make sure your website works in different browsers to avoid serious breakages.

Bishops

The bishop is a piece that moves diagonally across the chessboard. The bishop scans the board for its next move, minding pieces that block its path, in the same way that a visitor scans content until a barrier prevent their progress. A bishop cannot step off the tile color to which it was initially assigned, ensuring a kind of vendor lock-in.

As Web professionals, we tend to get caught up in arguments about whether frameworks are useful, given their disadvantages (and even with graceful degradation, for example). The benefits of frameworks for certain situations occasionally outweigh their downsides (like trapping users in the environment), so make the most of what you have; dismissing less powerful options is not always the best way to go — in fact it could increase the amount of work required.

Have Faith in Your Work

The bishop, of course, is religious in nature, an agent in the battle between two sides. Faith in a religious sense is not needed to practice Web design, but as a quality of character it does play a part in one’s identity. Faith affects motivation and makes you believe in the project you’re spending so much time and effort on. If you have no faith in your craft, the job is doomed from the outset.

Here are some tips for building faith in your work:

Create a list of benefits to focus on your website’s potential.
Set realistic, structured goals to achieve success.
Encourage visitors to recommend your work to people they know.

Know Your Limits

It may seem frustrating that each bishop is trapped on its own color, limited in impact. But if you make the most of it, bishops can still be useful. Know your own strengths and limitations, so that you don’t attempt the impossible or unachievable — if you do, the result will surely be flawed.

Here are some tips on knowing your limits:

Get external support or advice when you hit a wall.
If something can’t be achieved the way you hoped, look for alternatives.
Reduce your weaknesses by learning new skills regularly.

Stick to Your Guns

While being able only to move diagonally may seem like a disadvantage, this can prove useful on occasion. Having sheer determination to carry out a job in a certain way is admirable. We humans are sometimes stubborn, and we stick to our guns when possible. This can cause us to make mistakes… or motivate us to persevere.

Here are some tips on being determined:

Reflect on a project’s overall goals whenever possible in order to reassess a plan’s feasibility.
Mistakes happen, and no one is perfect, but that’s no reason to stop trying.

The Queen

The queen is the second-most important piece on the chessboard. She can move horizontally, vertically and diagonally across any distance, and her power spans the entire board. She is the king’s most agile bodyguard, and losing her can be devastating. You have to use your power responsibly, both on the chessboard and in your profession; misusing your tools could cause you to lose visitors to the competition.

Sometimes we find ourselves swatting a fly off a nuclear warhead. Knowing exactly what to use, when to use it and how to use it appropriately is what ultimately distinguishes professionals from amateurs. In addition, taking advantage of the powerful tools at our disposal can speed up progress and eliminate the complexities that come with attempting the impossible with simple tools.

Realize Your Potential

A potent force, the queen moves freely about the chessboard, with few restrictions. The queen is a powerful piece and reminds us to exert the greatest effort to reach our potential. Rather than staying in our comfort zone, we must always learn new skills and achieve more than what is expected of us.

Here are some tips to stretch your skills:

Everyone has the capacity to learn; keep your skill set up to date.
Push yourself to become a better professional and to exceed your own expectations.
Try not to let any of your skills go to waste when creating something.

Cover All Bases

In our work, we try to minimize error by viewing every situation from multiple angles — this is important. In chess, players use the queen in much the same way, exploiting her power yet shielding her from harm. In the creative process, your only real limitation is being blind to critical elements, which is why getting some perspective from outside testers and users never hurts.

Here are some tips to cover your bases:

The more time you spend planning a project, the better the results usually will be.
Information architecture is your friend; make use of wireframes and mock-ups.
Spend time testing your website intensively for critical flaws.

Strategy and Learning

You have two knights, two rooks, two bishops and many pawns, but only one queen. Her value lies in her singularity; each move of the queen requires strategy and consideration of consequences. We become better players — and professionals — through trial and error, constant learning and foresight. Being cautious in the game teaches us to be wise in business.

Here are some tips to help you strategize:

Read blogs, books, tutorials, magazines and anything else that can help guide you.
Analyze your target audience to get ideas on what your website might need in future.
Researching the competition gives you a sense of what potential visitors need.

The King

No piece is as important as the king; it is the one piece that must evade capture. The king moves only one space at a time, in any direction, and whenever it is in immediate danger, either a piece must be moved to block the attack or the king must be moved to avoid it. The king has no equal and cannot be restored by a pawn — sacrifice, and so prevention is imperative.

Web professionals have to protect what is important, too. We deal with payment details, databases, passwords and other sensitive information. If we lose any of that through carelessness or a lack of preventative measures, we end up losing something greater: the customer. Establishing trust takes time, but it can be lost as quickly as a surprise checkmate!

Avoid Traps

Protecting the king is the primary concern of every chess player. Gaining advantage to prevent loss is important. While Web professionals usually have no reason to evade capture (unless they’re doing something wrong), the benefit of avoiding common traps (the equivalent of “foolsmate” in chess) becomes apparent when testing the cross-browser functionality of a website.

Here are some tips on avoiding traps:

Try to reduce the intrusiveness and obtrusiveness of your website to enhance the visitor’s experience.
Actively seek out errors in your work to improve your service.
Internet Explorer is a pain. Watch out for its rendering faults.

Value and Importance

A common tactic in chess is to weigh the value of the pieces against the benefits they represent. The king is critical because the game is lost without it. Comparing value has an important role in the Web industry, too, especially when losing mission-critical features would undermine the entire process. Comparing value also helps when prioritizing maintenance work or scheduling upgrades.

Here are some ways to tip the scale:

Accurately pinpoint the value of your service.
Upgrades are avoidable, but reduce downtime as much as possible.
Price your service fairly; prices that are either too high or too low create problems.

Know When to Resign

Sometimes we get so excited — or stressed, as the case may be — about complex or next-to-impossible projects that we forget the option of saying “no.” We never like to resign or throw down our sword; we feel as though we have failed because we couldn’t meet the client’s needs. But firing bad clients and knowing when to scrap weak ideas is a part of being a professional. You can’t win every fight.

Here are some tips on recognizing when to throw in the towel:

Trust your instincts when deciding whether to undertake a project.
Salvage something from anything you work on.
Learn how to deal with “clients from hell.”

Chessboard

Chess players focus on the pieces in play and on capturing the king, but they must also understand the chessboard as a battleground on which this drama plays out. This relates to the website-creation process (and to a lesser extent, the Web industry): lessons are to be learned from the chessboard itself.

Image credit

Light and Dark

Like a chessboard, the Web industry is full of light and dark, good and bad. We weigh benefits and pitfalls when performing our roles. A chess game tells a story; likewise, the fruits of our labor and our highlights and disappointments all appear online.

Think Ahead

One of chess’ biggest lessons is to think ahead, instead of in the moment. Being able to predict how your opponent will move helps you gain advantage. This is also true of the website-building process. Unjustified decision-making leads to problems, whereas well-planned strategies that entice people to visit and use your service lead to faster results and greater rewards.

Weigh Your Options

In chess, there are literally millions of ways a game can play out, and with every move the number of potential outcomes decreases. Knowing your options and which route affords the best opportunity for success is a critical skill. Website creators have many different methods of production and implementation as well, but missing the mark with scalability or usability can diminish a website’s user-friendliness and jeopardize its success.

Make Your Move

Decision-making can be tricky; in chess, a wrong move can cause you to lose a piece, a good position, an advantage or even the game. The same could be said of building a website. Preparing for different projects, services and eventualities is one thing, but having the courage, skill and understanding to carry them out successfully takes practice. After examining your options, make your move: put all your careful planning into action.

Checkmate!

So many useful lessons can be learned from chess. If you haven’t played it before, visualizing what we’ve gone over might be hard, but the fundamental principles of the game — how the pieces interact and the role of strategy in the big picture — should not be ignored. The game actively promotes logical thinking and strategy — both useful skills.

More lessons could certainly be drawn from the game, but hopefully this article will serve as a source of inspiration, especially if you feel your goals are out of reach. We often learn the most from making mistakes, losing a battle and then returning to win the war. Nowhere is this been truer than in chess, where a mixture of practice, skill and occasional luck is required to become the grandmaster.

So many aspects of the Web industry (such as syntax, design and ideals) change constantly, but the fundamental principles of learning, growing and trying your best often mean the difference between failure and success. Try to incorporate lessons from the chessboard into your own work; while having all the pieces doesn’t guarantee victory, having the basic skills will give you the confidence and awareness that you need to succeed.

(al)

Showcase Of Appetizing Restaurant Websites

Sam Wilson — Thu, 02 Sep 2010 06:54:23 -0700

They say the first bite is taken with the eye. If so, these appetizing restaurant websites succeed in whetting our appetites, inviting us to a savoury next bite. In these designs, color scheme and introductory copy show vastly different aspects of the restaurant experience. Moody warm tones create atmosphere, vibrant greens underscore freshness, and earthy colors communicate a relaxed, friendly attitude.

Because customers are increasingly using mobile browsers to make decisions on the spot, restaurant websites are doing a better job of communicating core information quickly. Similarly, full Flash websites with no mobile alternatives are seeing some decline. Especially interesting is how these businesses are improving their online menus by replacing PDF-only downloads with Web-optimized alternatives that are more readable and easier to navigate.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]

Showcase Of Restaurant Designs

Geogeske
This design has printerly qualities, with its eye-catching oranges and whites and oversized headings. Everything works together to establish a relaxed yet smart urban atmosphere. The JavaScript effects (sectional fades and spring-loaded logo introduction) are used sparingly and effectively. Simple navigation and short copy make scanning easy while putting the focus on the strong menu-worthy photography. However, the site could certainly use a larger font size.

Jam Restaurant
Upscale modernist and classical elements are used consistently on this website and in the menu and restaurant interior. The vibrant typographic header looks stunning while enhancing usability by prominently displaying a phone number and hours. Another nice touch is how the body scrolls beneath the stationary translucent header.

Benito’s Hat
Named after a celebrated Mexican president, this restaurant communicates authenticity and freshness with a green cilantro backdrop and clear devotion to its culinary roots. At times, the backdrops on the interior pages eat the foreground text; a little contrast and spacing would help in spots. Overall, an offbeat feel that works.

Pizzeria Napolicentrale
This website uses horizontal navigation to guide the user through photos of mood-setting rustic Italian elements. The beige picnic pattern adds just enough visual interest without competing with the copy. But in some sections, the taller content makes horizontal scrolling a bit floaty.

Barley’s
A cozy design rich in grainy colors and sturdy serifs. Small touches—like the roll-overs, and lighting effects such as in the logo hover state—give a handcrafted feel. Do not miss the nice, readable menu and beer list that feature stylishly simple beer ratings.

State
With nocturnal tones and pictures of people having a good time, the State uses a hip design to say that it’s a cool sociable night spot. Perhaps intentionally, there seems to be little focus on food; for example, the menu section feels skimped (disjointed navigation and flimsy type for the buttons). More photos of the restaurant and food might enhance the personality of this website. Also, the home page seems a tad cluttered. In general, a little more depth in the sub-pages would round out what is a good-looking piece.

Farinella Bakery
Fun and disarmingly honest, Farinella Bakery takes the cake in blending personality and usability. The bold header and fun footer become bookends for the spot-on copy and photos. Notice the slight head bob when you click on the navigation and the magnification when you roll over menu items; a tasty browsing experience. What makes this a winner is that the integrity and consistency of the design can be found in the smallest elements.

Sono
Authentic Japanese design elements and atmospheric audio effects work well to create mystique on this Flash website. A few usability concerns pop out: for example, the flaky JavaScript for the “Back” button and the small text that is in a cramped box with a small scroll bar.

The Little Cake Parlour
This more conventional website shines with gorgeous photography that almost seems edible. The design has a strong focus on typography, with various elements embedded in the elegant pink multi-column layout. Some design elements probably shouldn’t be images and would work better as simple plain text, though. Also, because all visual elements have a similar pink tone, they may be a bit difficult to recognize at first glance — for instance, the pink PayPal-button in the footer of the site.

Pizza Luce
With playful tattoo-like scribbles and quirky photography, Pizza Luce makes clear its immutable place in Minneapolis’ food culture. Check out the oddly captivating home page illustration. For all of these strengths, the community section feels slapped together and in need of a bit of refinement.

La Vista
The clever use of the Flash overlay here adds intimacy and life to the crisp photography. The menu is noteworthy: simple to browse and very clean.

Georgian Wine Society
The backdrop feels like a matte painting that draws us into the headspace. With that, we are receptive to the interesting narrative about Georgia’s role in wine-making. The e-commerce system is well integrated; a more generous margin between elements would augment the shopping experience.

Catered by Kate
This website’s “About” page is one of the top in this showcase. It opens with Kate smiling warmly, giving the page a welcoming human touch. Next, it summarizes (in only two sentences) three very compelling reasons why you would use Kate for your catered event. Just one distracting but easy-to-fix minus: a call-out to an empty Flickr page that is supposed to hold more images.

Can Jubany
This clean layout on deep chocolate brown feels elegant even while containing a surprisingly large amount of content. The home page sets the right tone with the large yet quick-loading video that tells a story. Two more unique touches are the simple sliding navigation and the tantalizing, well-written recipe section.

Caravan
This simple and savvy composition uses negative space to focus on the coffee while adding depth with subtle textures. If the placeholder is this solid, then our expectations are high for the full website!

Chipotle
Humor, earthy tones and engaging (and notably non-Flash) animations make for an experience that is engaging and relaxed yet expertly crafted. Consistent with its corporate message of “Food with integrity,” Chipotle focuses much of the website on its brand rather than the burritos. Be sure to tug the rope in the footer for some hidden and delightful interactivity.

Le 28 Thiers
Here are tangerine and rose hues mingled with crisp photographic elements and textures. The simple wooden table distinguishes the layout and grounds the content visually. Subtle gradients in the typography, quality photography and the curved navigation inject elegance and dimension.

Brooklyn Fare
This playful design achieves a unique charm through imagery that consists of real employees, bookish serifs and a stylish seafoam background. Especially nice is the consistent layout, with its cheerful copy and gritty photography, which avoids appearing repetitive.

Canela
Canela (Portuguese for “cinnamon”) employs a conventional layout, energetic reds and generous imagery to give a sense of flavor and sophistication. The three-column PDF-only menu makes browsing on a mobile device more challenging.

Last Click

Brew Shop
The Brew Shop is not really a restaurant website, but it is still worth mentioning. The site establishes personality at first sight with a hilarious photo and beery good humor. It backs the funny with substance, such as a very usable e-commerce system, effective copy and scannable icon-enhanced navigation. Especially nice are the swaths of red as call-outs and the subtly scrambled type.

You may be interested in the following related posts:

Would you like to see more similar posts on SM?

(al)

iCandies Icon Set: 60 Free Icons For Your User Interfaces and Apps

Vitaly Friedman — Wed, 01 Sep 2010 16:08:48 -0700

Today we are glad to release iCandies Icon Set, a set with 60 high quality icons in 64×64px, 48×48px and 32×32px, available in .EPS, .AI and .PNG. The set is designed by the talented folks from IconEden on a sole purpose of giving your projects a sleek and geeky style or provide crisp, attractive icons for your modern and fashionable-looking interfaces. All the icons in this pack — 60 icons in total — are designed in Round Rectangle shape.

Download the icon set for free!

large preview
download the set (.zip, 5.1 Mb)

A word from the designers

As always, here are some words from the designers of the set:

Dear Smashing Magazine readers,

IconEden’s 2nd birthday is coming! And we’re as excited about it as you’re. To celebrate our two years of rocking the icon design world, IconEden collaborated with Smashing Magazine to craft a small set of 60 wonderful icons called “iCandies”! And it’s all yours.

Similar to previous collections, iCandies comes in vector and pixel formats and can be immediately be built into your projects at no cost. You can use the icons for any commercial and personal projects.

Thank you very much, guys! We appreciate your efforts.

[Offtopic: by the way, did you know that we are publishing a Smashing eBook Series? The brand new eBook #3 is Mastering Photoshop For Web Design, written by our Photoshop-expert Thomas Giannattasio.]

You may be interested in the following related releases:

The Case For Open-Source Design: Can Design By Committee Work?

Mushon Zer-Aviv — Wed, 01 Sep 2010 06:08:43 -0700

In celebrating the merits of free software and the excitement over this radical networked production method, an important truth is left unspoken. Networked collaboration shines in the low levels of network protocols, server software and memory allocation, but user interface has consistently been a point of failure. How come the networked collaboration that transformed code production and encyclopedia-writing fails to translate to graphic and interface design?

The following is an investigation into the difficulties of extending the open-source collaboration model from coding to its next logical step: interface design. While we’ll dive deep into the practical difference between these two professional fields, the article might also serve as a note of caution to think before rushing to declare the rise of “open-source architecture,” “open-source university,” “open-source democracy” and so on.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

The Challenges

Scratching an Itch

By going open-source, coders are fulfilling a need to change software, to make it their own. They might have different motivations, but if you’re already modifying something for yourself, answering the “Why share?” question is really easy with “Why not?” By the time the code executes correctly, the immediate users of the software—that is, the coders themselves—are already familiar with the software and can operate it even without a delicately crafted user interface.

Therefore, the motivation to take an extra step and invest in a usable interface that would extend the user base beyond the original geek-pool is not obvious. The interface already works for me, so what itch am I scratching by working hard to make it usable for others who can’t help me code it?

For the designers themselves, what is their incentive to make the design process more collaborative? Will others make my design better? Will they be able to communicate my ideas better than I can?

Beyond that, open-source interface design suffers from a chicken-and-egg problem: most designers don’t use open-source tools, and so it doesn’t occur to them that they could make the software better. As a result, open-source software suffers from an inferior interface that makes designers shy away from it and stick to their proprietary tools. The cycle repeats…

Granularity

Both software and wikis are made of granular building blocks, namely characters. This makes every typo an invitation to collaborate. My first Wikipedia edit was a typo correction, my second was adding a reference link, my third was writing a whole paragraph, and that led me to more substantial contributions, like adding a whole new article and so on.

Each granular step gets you closer to the next granular step. This ladder of participation makes each successive step easier. It also allows you to compare changes easily, giving you transparency, accountability, moderation and an open license to try and possibly fail, knowing you can always revert to the previous version.

You don’t get that with design, because the changes are not granular and are not as easily traceable. The first step is steep, and a ladder is nowhere to be found.

Encoding/Decoding

In his 1980 article “Encoding/Decoding,” cultural theorist Stuart Hall defines communication in terms of code. To describe it briefly, let’s imagine a spoken conversation between Alice and Bob. Alice encodes her framework of knowledge into the communicable medium of speech. Assuming Bob can hear the sounds and understand the spoken language, he then decodes the sounds into a framework of knowledge.

Both encoding and decoding are creative processes. Ideas are transformed into messages that are then transformed into ideas again. The code that Alice uses for encoding is different than the one Bob uses for decoding. Alice could never telepathically upload ideas into Bob’s brain. (We can all agree that that is a good thing.)

Let’s entertain Hall’s ideas of encoding and decoding in software. Alice is an open-source hacker, and Bob is collaborating with her as a designer. Alice is writing software code; she knows when it executes and when it doesn’t because the program communicates that through error messages. When she is happy with the result, she uploads the code to an online repository.

Bob then downloads the code to his computer, and because it has executed on Alice’s computer, it also executes on his. When Alice and Bob collaborate through a programming language, they are literally using the same code for encoding and decoding.

Alice always chooses one of her three favorite programming languages. Being a designer, to communicate a message visually Bob starts by defining a visual language—graphics, color, layout, animation, interaction… If Alice or any other developer had to reinvent a new programming language on every single project we would not be speaking about FLOSS now.

Bob needs to define a graphic language, a standard for the collaboration. Doing that is already a major part, possibly the most important part of the creative work. Whoever works with Bob will need to accept and follow these standards, relinquish control and conform to Bob’s predefined graphic language. These artificial constraints are harder to learn and conform to than the constraints of a programming language. While constraints and standards in technology are the mother of creativity, in design they can often feel artificial and oppressive.

Beyond that, within a collaboration, when Bob tries to argue for the merits of his design, unlike in the case of Alice’s code he cannot prove that it executes flawlessly, or that it is faster or more resource efficient. The metrics are not as clear.

It is important to remember, in collaboration on code Alice and Bob have a third collaborator, one that cannot be reasoned with – the computer. This collaborator will simply not execute anything that doesn’t fit its way of work. On the other hand, as long as it is syntactically correct and satisfies the inflexible collaborator even “ugly code” executes and muddles through. And so, the different voices expressed in code are flattened into a single coherent executed application.

For better or worse, we lack this inflexible collaborator in design. It doesn’t care about our communicative message and it doesn’t level the playing field for communicative collaboration. And so, the different voices in design simply spell inconsistent multiplicity that dilutes the communicative message.

One might turn to Wikipedia as a testament to successful non-code-based collaboration, but Wikipedia enforces very strict and rational guidelines. There is no room for poetry or subjectivity within its pages.

Is It Simply Impossible?

Not necessarily. If we step out of the technical construct of the open-source methodology, we can identify quite a few networked collaborations that are transforming and often improving on the design process.

Viewing free culture and the free sharing of media as evidence of collaboration is tempting, but the availability of work to be remixed and re-appropriated does not necessarily imply collaboration. Sharing is essential to collaboration but is not enough.

WordPress, the leading free blogging software, is an interesting example. Looking to redesign the WordPress administration interface, Automattic, the company leading the WordPress community, hired HappyCog, a prominent Web design firm. And in March 2008, WordPress 2.5 launched with a much improved interface. Through a traditional design process, HappyCog developed a strong direction for the admin interface. Eight months later, Automattic released another major revision to the design that relied on HappyCog’s initial foundation but that extended it far beyond.

One of the interesting methodologies that Automattic used to get the WordPress community involved in the design process was a call for icon designers to provide a new icon set for the interface. Within two weeks, the six leading icon sets were up for voting by the community.

But rather than just casting a blanket “Like” or “Dislike” vote, community members were invited to provide a detailed assessment of consistency, metaphor coherence and so on. Some icon designers in the running even acknowledged the superiority of other contributions and voted against their own sets. The icon set that was ultimately chosen, though, was a collaborative effort, because some of the icons changed based on inspiration from the other sets.

Another example is the evolution of grid systems for Web design. Half a century after the rise of Swiss-style graphic design, some design bloggers suggested that some of its principles might apply to Web design. Those suggestions evolved into best practices, and from there into Blueprint CSS, an actual style sheet framework. The framework became popular and inspired other frameworks, such as 960.gs.

Similar processes happen in interaction design. One example is the pop-up window evolving into the elegant lightbox or modal window modules, and then changing and being modified again and again in open-source code libraries.

Other design-oriented experiments in free software, such as the ShiftSpace platform, challenge the Web interface power structure. ShiftSpace allows users to interact with a website on their own terms by renegotiating the interface and proposing different interactions on top of the page. Projects like ShiftSpace aim to expand the limited participatory paradigm of the Web beyond user-generated content to include user-generated interfaces.

Make It Happen!

There are ways to make open-source design work without falling into the traps often characterized as “design by committee.” We are already seeing designers scratching their own itch and contributing creative work to the commons.

Lecturing designers (or users) and demanding that they use bad tools for ideological reasons is counter-productive. Designers often use free tools (or use proprietary tools in unauthorized ways) only because they are free as in free beer. So, to win over new users, free software should be pitched on the full range of its merits rather than on ethics alone. While the ethics of “free as in free speech” are convincing to those who can “speak” code, the openness of the source to those who lack the skill to modify the code is a weaker selling point.

Free software tools have won on their broad merits many times, and not only on low-level system and network fronts. Wikis and blogging software (which are interaction and communication tools) that have been invented by the free software community have maintained a lead over proprietary competitors. Networking and collaboration are the bread and butter of free software, and the community should leverage these advantages.

Just as Wikipedia extends the free-software collaboration model by leveraging the granularity of characters, so can design. When possible, using code for design collaboration is preferable. Beyond that, collaborators should adopt distributed version control systems for both code and image files. Rather than trying to compete with proprietary software by creating open clones, the Free Software community can leverage its experience as an advantage and focus on new collaborative paradigms for version control and collaboration.

Finally, There are ways for us to better analyze the encoding and decoding of the communicated message. We can formalize processes of collaborative encoding. We can start by conducting networked design research using existing research tools; in this way, we might come up with design decisions collaboratively. We can define modular and extensible languages that embody design decisions but still allow for flexibility and special cases (like Cascading Style Sheets). We should also learn how to document our design decisions so that they serve other collaborators. Designers have been doing this for many years in more traditional and hierarchical design contexts when they have compiled documents such as branding books or design guides.

For the decoding part, we should realize that many design patterns are rational or standardized and can leverage common ground without compromising the creative output. For example, underlined text on the Web almost always implies a hyperlink. We could choose to indicate a link otherwise, but if we try to use this underline styling, say, for emphasis, we can expect users will try to click on it.

User experience research, technical aspects of design, best practices in typography, icon use, interaction paradigm—these are all aspects of design that can be researched and assessed according to measurable parameters. Thorough research of these can provide a basis for consensus for shared expectations of how a message will be interpreted. A lot of this work is already taking place on design blogs, which have published a lot of research on the subject over the past few years.

Finally, the substantial parts of design that still cannot be easily quantified or assessed on shared rational ground should be managed through trust and leadership. A resilient community of practice must be able to develop design leadership whose work and guidance is respected and appreciated even without the convenient meter of coding meritocracy.

Scaling Subjectivity

It comes down to the deep paradox at the heart of design (whether for interface, architecture, product, etc.). We are trying to create a subjective experience that scales—a single personal scenario that can be multiplied repeatedly to fit a wide array of changing needs by a vast majority of users. The thing is, subjectivity cannot be scaled—that’s what makes it subjective—therefore, the attempts to create a one-size-fits-all solution are bound to fail, along with the attempts to customize the solution to each individual user in each individual use case.

Chris Messina gives a great example for this paradox by comparing Apple’s Magic Mouse to the OpenOffice mouse. While Apple’s solution is a slick, clean one-button device, the OOMouse has “18 programmable mouse buttons with double-click functionality; analog Xbox 360-style joystick with optional 4-, 8- and 16-key command modes; 63 on-mouse application profiles with hardware, software and autoswitching capability…” and more. While the Magic Mouse embodies Apple’s commitment to design leadership at the price of user choice, the OOMouse embodies the free software community’s preference for openness and customization over unified leadership.

Successful open-source projects have always benefited from a mix of the two approaches, a combination of openness and leadership. Finding a similarly nuanced approach in other fields is required if we ever hope to extend the open-source model beyond code. We cannot sprinkle the pixie dust of open source on everything and expect wonders. The same goes for design. Hopefully, though, we can make some progress by demystifying the process and by collaborating wisely when it makes sense and coming up with new ways when it doesn’t.

“Can Design By Committee Work?” by Collaborative Futures is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. Based on a work at www.booki.cc. This essay is also featured in the Collaborative Futures book, written collaboratively, published for free and released under the CC-BY-SA license.

(al)

Robert Fudge - RSS

Designing and Producing Creative Business Cards: Techniques and Details

General Advice

Content Goes First

Talk to Your Printer

Size

Die-Cutting

Preparing the File

Printing It

Printer Checklist

How Much Will It Cost?

Special Finishes

Spot UV Coating

Letterpressing

Embossing

Foil stamping

File Preparation for Special Finishes

Special Inks

Duplexing and Triplexing

Scented Inks

Special Material

Paper and Cardboard

Plastic

Metal

Other Material

Customizing by Hand

Want To Know More?

Related Posts

Showcase of Interesting Navigation Designs

Made by Water

A JavaScript-Powered Vertical Fun

Made in Haus

Horizontal Slideshow as Navigation

Foundation Six

Animated Text Scrolls Down With the User

Word Refuge

Textual Content in a Horizontal Slider

Relogik

Animated Horizontal Slideshow Navigation

Drexler

Horizontal Navigation… If the User Follows Instructions

Komrade

Vertical Navigation With a Twist

All For Design

Scrolling Navigation and “Shelf”-Navigation

Digital Labs

Horizontal or Vertical Navigation?

Calobee Doodles

Classic Thumbnail and Lightbox Combination

Build

Classic Top-Level Navigation

Mail Chimp

Graphics-Heavy Vertical Page With No Navigation Other Than Browser Scroll Bar

Pline Studios

Minimalism in Vertical JavaScript-Based Navigation

Transformology

Persistent Toolbar-Navigation

Burton

Sliding Captions and Tabbed Boxes in a Vertical Layout

New Adventures in Web Design

Fun Shapes That Feel Like Navigation

Christopher Kaufman

Wide Horizontal Slider With a Difference

Chapolito

Another Example of Tabbed Navigation

Flywheel Design

Sliders and Graphic Tiles That Flip on Mouse-Over

Wishbone Design

Flash-Based Animated Navigation

Basmatitree

Flash-Based Animation That Could Be Navigation

Minus Five

An Entirely Horizontal Sliding Website

Retinart

Completely Text-Based Navigation

Collision Labs

Classic Tabbed Navigation

Summary

Related Posts

Would you like to see more similar showcases on SM?