TG Designer

10 Responses to “50 New Free High-Quality Icon Sets (with Easter Icons!)”

1. 

   Smashing Editorial says:

   April 1st, 2010 at 9:35 pm

   Today we are pleased to provide our readers with a yet another round-up of high-quality icon sets. Below, you will find free sets covering a wide range of subjects, including Easter and food sections. Please read the license agreements carefully before using the icons, and feel free to follow the links: they will certainly come in handy when you’re designing a new website or looking for inspiration.

   Please notice that we do know that round-ups of icon sets are getting old; but because these round-ups are always useful and handy, we are keeping doing them. Most of the icons featured below are new, some are a bit older. Let us know if you’d like to have more or less similar round-ups in the comments to this post. Thank you!

   You can also scan our other icon-related articles:

   • 50 Fresh Useful Icon Sets For Your Next Design
   • 50 Free High-Quality Icon Sets
   • 40 Professional Icon Sets For Free Download
   • 35 (Really) Incredible Free Icon Sets
   • 20 Free And Fresh Icon Sets

   [By the way, did you know we have a brand new free Smashing Email Newsletter? Subscribe now and get fresh short tips and tricks on Tuesdays!]

   Easter And Food Icons

   Free Easter Icons
   Easter being so close, I thought you might want a couple of free icons to decorate your website: a cute Easter bunny and an Easter egg. In the ZIP file for the Bunny and Egg Easter Pack. you’ll find transparent PNGs for an Easter rabbit, a rabbit holding an RSS icon, a rabbit holding an Easter egg and a rabbit holding an RSS icon and an egg. You will also get the Easter egg in the same size as the icon of the rabbit displayed above.

   

   Happy Easter Icon Set
   Four icons in resolutions ranging from 16×16 to 512×512 pixels.

   

   Easter Bunny Icons
   44 cute Easter icons that you can use for web and print design. Icons include: bunnies, birdies, Easter eggs, and candy bars. You can use them to spirit up your blog themes or to design your Easter postcards and invitations. The icons are available in vector PDF format, meaning you can resize them to any size to fit your design.

   

   No Ordinary Easter Eggs Icon Set
   Six transparent icons in the resolution 512×512 pixels.

   

   Yummy: Icon Eden
   Yummy is a set of delicious, tasty and beautiful free icons. It has 20 icons in various sizes, from 48×48 to 128×128 pixels. Also included are scalable and editable vector icons.

   

   Apple Mug Icons and Extras

   

   Valentine’s Day Icons

   

   Donut Box
   Nothing is tastier than fresh donuts, as any law enforcement official would tell you.

   

   Fruits Illustrated
   Fourteen colorful fruits. This icon set includes strawberry, banana, blackberry, peach, apple, watermelon, grapes, kiwi, coconut, orange, lemon, lime, cherries and a special orange.

   

   Useful Icon Sets

   ComFi Telecom Icons
   ComFi created a specific telecom icon set in 32×32 pixels. Some icons could have a more general application, such as the ones for receptionist, feedback, guarantee, help. Others not so much: Wi-Fi, VoIP, VPN, Bluetooth.

   

   Icons

   

   Design Cartons Free Icon Set for Designers
   Here are five high-quality icons of boxes and cartons that you can use to announce the launch of a new application or on your portfolio website. There is plenty of space to add your own flavor to the graphics, like your name, an important date, a blog name or app name. These icons are free for personal and commercial use. They come in two sizes, 512×512 and 256×256 pixels, and are in PNG format.

   

   Notes Icons
   Pack of icons, PNG, ICO and ICNS, including notebooks of various size.

   

   User Center Calendar

   

   Pixel Perfect
   55 free user icons. Generate a template (between 400 and 700 pixels in width) that matches your blog’s color and width.

   

   Once
   A set of general-purpose icons in PNG format (48×48 pixels).

   

   Help
   A set of icons inspired by a help icon that belonged to the artist Everaldo.

   

   nixus
   60 icons in resolutions of 32×32, 48×48 and 64×64 pixels.

   

   Colorful Panel Icons
   Simple colored icons.

   

   32px Mantra
   This 32 pixel icon pack consists of approximately 50 icons.

   

   This Is Art Icons
   Icons optimized for v5.0 of Officinadigitale.co.cc (coming soon).

   

   Cartoon Icons
   The package includes icons in resolutions of 256×256 and 512×512 pixels and in the formats of .ico (256 pixel only), ICNS, PNG and iContainer.

   

   Breathe
   Breathe is a replacement icon set for the Android OS, inspired by the iPhone’s rounded icons.

   

   Project Icons
   A pack of 17 icons, 32 pixels only. Available in PNG, ICO, ICNS and as pasted icons.

   

   Areskub
   By Stephane Reverdy

   

   Alias Badges
   “Tag” style alias icons, inspired by Georg Rebensteiner’s alias replacement icons. It has just a small rectangle with a single letter on it, instead of the whole word “Alias.”

   

   Free Weather Icons
   16 icons in a resolution of 24×24 pixels. Available in PNG, ICO, TIF, GIF and BMP formats. Freely available for commercial and non-commercial projects.

   

   Iconlicious
   Royalty-free toolbar icons.

   

   Detailed 3-D Icon Set

   

   Oxe Icons Set
   18 PNG icons.

   

   Mac Application Icons and Extras
   Five icons in resolutions ranging from 64×64 to 512×512 pixels, in PNG and ICNS formats.

   

   Mobile Icons

   Free Mobile Berries (registration required)
   This set consists of 80 64×64 pixel icons for websites GUIs, mobile applications and presentations.

   

   New HTC Sense UI 2.1 Icons
   Official icons from the newest HTC Sense UI Android 2.1. 20 PNG icons in 48×48 pixel resolution, plus five icons in PNG format at 128×128 pixel resolution. Use BetterCut to apply them.

   

   Android Icon Set
   Android application icons, Part 2. 34 PNGs at 600×600 pixels.

   

   User Interface Icons

   Gesturecons Multi-Touch Icons
   These vector-based icons aid in the design, development, implementation and promotion of multi-touch interfaces, as well as in the creation of wireframes, digital help files and printed documentation. You could also use Gesturecons in applications to demonstrate how to complete tasks or to prompt users to interact with the application as they approach it. Swap symbols to create your own icons. Because these are scalable vector shapes, you can scale them to any size and alter them any way you wish. Use your favorite vector graphics application to edit.

   

   User Interface Icon Sets
   Gesturecons is a unique icon set featuring hands that perform 35 different multi-touch actions. This set will be useful for those creating iPhone and Google Android apps. The icons are in vector format, so they can be resized easily and used in tutorials and help guides for multi-touch devices.

   

   E-Commerce and Payment Options Icons

   Pos Machine Icons

   

   Exclusive Payment Method Icon Set
   This set contains six icons and includes a choice of eight different sizes: 12×12, 16×16, 24×24, 32×32, 64×64, 128×128, 256×256 and 512×512 pixels. The icons are entirely free for personal or commercial use.

   

   Payment Icons
   Free collection of popular credit card, debit card and payment icons in PNG format. The icons come in three different sizes, with both curved-edge and straight-edge versions that would look great on any website!

   

   Pictograms

   8 Free Pictogram Icon Libraries and Collections
   Here is a collection of 50 professionally designed common signs. The icons are free and available in OpenType font format, allowing you to easily add symbols to your sign and way-finding designs. The pictograms are all commonly used signs for public services such as restrooms, telephones, first aid, elevators, information, restaurants, coffee shops, no smoking, baby, recycling, shower, reception desk and much more.

   

   DOT Pictograms
   68 free pictograms icons in PNG, ICO and ICNS.

   

   Beautiful General Icon Sets

   MODEEEERN Icon Set
   “The concept for this icon set popped into my head in Art History class, studying the modern art movement, Bauhaus, post-modern art, etc. I was impressed by them, so, I decided to create a super-unique icon set. These icons may look like some vibrant color patched together, but they were actually designed. For example, the Photo icon is a round shape within another round shape that refers to a camera’s aperture.

   

   El Bandito
   Because you know you’re a bandit on the inside. The bandit icon comes in eight of your favorite delicious colors, complete with 16×16, 32×32, 64×64, 128×128, and 256×256 pixel versions, optimized for each size.

   

   Fungiiiiiii Iconset
   Designed to look futuristic retro (with red-cream and black), these icons turned out to be creepy in the end. That’s a good thing.

   

   Icons: Porn Needs You
   An assortment of icons from past work. 180 icons in total, 70 general icons, 60 folders and 50 vertical folders. Currently only in 256×256 pixel PNG format. Some are easier to use than others.

   

   Warm Regards Bar
   Three flavours, chocolate, strawberry and vanilla, in three formats, PNG, ICO and ICNS.

   

   Cigarette Packet
   Three icon sets in 256×256 pixel resolution and coming in PNG ICO and ICNS.

   

   Women Icons
   These icons are available as transparent PNGs at 256×256 and 128×128 pixels, and they are free for personal use. The set includes lipstick (two colors), vanity mirror, bottle of perfume, bracelet, aquamarine pendant, fountain pen, notepad, pocket calendar, wallet, handbag and silk scarf.

   

   House
   Download the ZIP file to get the PNG file in 512×512 pixels.

   

   Icon Design “Castle”
   A design castle available in two sizes, 256×256 and 128×128 pixels.

   

   Umbrella
   A pack of icons (825×750 pixels), including umbrellas of various sizes.

   

   Touchscreens That Changed the World
   These icons are for personal non-commercial use only.

   

   “The” Lens
   Awesome set of lens icons for non-commercial, personal and student projects. Get written consent if you want to use them.

   

   Briefcase

   

   Printer: Brother Mfc-410cn
   The ZIP contains icons in both ICNS and PNG format (512×512 pixels).

   

   Iomega Ultramax
   The ZIP contains icons in both ICNS and PNG format (512×512 pixels).

   

   Camera: Sony Alpha 380
   Icon of the Sony Alpha 380 camera, in various sizes (512×512, 324×324, 256×256, 128×128, 64×64 and 58×58 pixels).

   

   Daft Punk Helmets
   Set of 18 icons of the Daft Punk helmets (512×512 pixel resolution, and in ICO, ICNS and iContainer formats).

   

   DeviantART Creative Icon
   In 512×512, 256×256, 128×128, 64×64 and 48×48 pixel resolutions.

   

   Ironman Icon Pack

   

   CANON 500D ICON

   

   Umbrella Icon
   A set of umbrella icons in various sizes.

   

   Suitcase Icon

   

   IconTexto: IconTexto Blu-ray Discs
   Free Windows Vista icon pack for your website or application. Ten icons in PNG, ICO and ICNS formats (256×256, 128×128, 48×48, 32×32, 16×16).

   

   Icon Library, Iconshock blog
   Put these on your desktop to remind yourself each day how important these environmental efforts are.

   

   Centigrade
   The set contains 60s. Most of them are at 32×32 pixels, making them great for desktop or rich Internet applications in the medical domain. To put a cherry on this pie, Centigrade also created some great-looking versions at 128×128 pixels, too. With perspective and reflective effects, these are real stunners on landing pages or touchscreen application menus. All icons come as PNG files in 32-bit color.

   

   Social Icon Sets

   social moleskin icon
   Moleskin icons for RSS, Twitter, Delicious, Stumbleupon and Facebook. They come in 256×256 pixel resolution and are in PNG format.

   

   Social Trucks Icons
   An icon set created for the well-known blog Hongkiat, which is aimed at tech users, designers and bloggers and which is also in the Smashing Network. There are 10 colorful, spacious and unstoppable social trucks, coming in at a whopping 512×512 pixel resolution.

   

   Professional Buddy Icon
   This ZIP file contains icons in five sizes (512×512, 256×256, 128×128, 64×64 and 32×32 pixels).

   

   Friendfeed Icons

   

   IconTexto: Google Buzz Kit
   Free Windows Vista icon pack for your website or application. Five icons in PNG, ICO and ICNS format (256×256, 128×128, 48×48, 32×32, 16×16).

   

   Lontar Icons
   A set of free social icons, available in PNG only.

   

   24 Free Exclusive Google Buzz Icons
   Google Buzz had a loud and controversial launch in February, shrouded in privacy issues and other concerns. Like it or not, Google Buzz is here to stay, and many blogs have added Buzz icons to their posts. Here is a free and exclusive set of icons for Buzz. The set includes 24 beautiful icons in raster and vector formats. They are completely free for personal and commercial use. You are just asked to link back to Webdesigner Depot if you use them.

   

   OLED Social Icons
   This is an experiment with the OLED style. Basically, every icon is a 16×16 pixel OLED display, with glowing dots and stuff.

   

   Vector Social Media Icons
   This free set includes 50 icons from the most popular social media networks. The icons are designed in 32×32 and 16×16 pixel resolution. The ZIP package gives you three different file formats: vector EPS, PNG and GIF.

   

   (al)

   ---

   © Smashing Editorial for Smashing Magazine, 2010. | Permalink | 31 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | http://www.smashingmagazine.com/2010/04/01/50-new-free-high-quality-icon-sets/“>Tweet it! | Submit to Reddit | Forum Smashing Magazine
   Post tags: Icons
   
2. 

   Smashing Editorial says:

   April 1st, 2010 at 9:55 pm

   Desktop wallpapers can serve as an excellent source of inspiration. However, if you use some specific wallpaper for a long period of time, it becomes harder to draw inspiration out of it. That’s why we have decided to supply you with smashing wallpapers over 12 months. And to make them a little bit more distinctive from the usual crowd, we’ve decided to embed calendars for the upcoming month. So if you need to look up some date, isn’t it better to show off a nice wallpaper with a nice calendar instead of launching the default time application?

   This post features 80 free desktop wallpapers, created by designers across the globe. Both versions with a calendar and without a calendar can be downloaded for free.

   Please notice:

   • all images can be clicked and lead to the preview of the wallpaper;
   • you can feature your work in our magazine by taking part in our desktop wallpaper calendar series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?

   So what wallpapers have we received for April 2010?

   [By the way, did you know we have a brand new free Smashing Email Newsletter? Subscribe now and get fresh short tips and tricks on Tuesdays!]

   Splatter

   "Inspired by an area of my painting studio." Designed by Stephanie Crisalli from USA.

   

   • preview
   • with calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
   • without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

   Unknown Beauty

   "I’m a 21 year old student from the Netherlands. My school project was to make a wallpaper for this contest ^^So i did..Why the girl? this was my first vector and i wanted to show you all.Greetz,Jeroen van den Brand." Designed by Jeroen van den Brand from Netherlands.

   

   • preview
   • with calendar: 1024×768, 1440×900, 1680×1050, 1920×1200, 2560×1600
   • without calendar: 1024×768, 1440×900, 1680×1050, 1920×1200, 2560×1600

   Design Sleep Design

   Designed by Krystian Kubicki from Poland.

   

   • preview
   • with calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
   • without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

   Spring Flower

   "Shot with a 50mm lens. I love bokehs. And this flower was so springy I had to shoot it.Enjoy and Happy Easter!" Designed by Anca Varsandan from Romania.

   

   • preview
   • with calendar: 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200
   • without calendar: 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200

   Little April

   "In the spring I have a lot on my mind and no rest day." Designed by Anna Skibinska from Poland.

   

   • preview
   • with calendar: 1024×768, 1152×864, 1280×1024, 1400×1050, 1600×1200, 1680×1200
   • without calendar: 1024×768, 1152×864, 1280×1024, 1400×1050, 1600×1200, 1680×1200

   Oops Illustration

   "Oops! – wallpaper is devoted to upcoming onset " Designed by Egor Kosten from Ukraine.

   

   • preview
   • with calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
   • without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

   Happy Easter

   "HQ-wallpapers and Smashing Magazine wishes you a Happy Easter" Designed by Paul from USA.

   

   • preview
   • with calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200

   Easter Bunny With Painted Egg

   "This month I decided to make something related to Easter , so it’s a painted egg and a bunny " Designed by Alexandra Ipate from Romania.

   

   • preview
   • with calendar: 800×600, 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200, 2560×1600
   • without calendar: 800×600, 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200, 2560×1600

   Spring Bunny

   "The bunny family for Easter and whole April" Designed by Kamila Norys from Poland.

   

   • preview
   • with calendar: 320×480, 800×600, 1024×760, 1280×800, 1280×1024, 1440×900, 1600×1200, 1680×1050, 1920×1200
   • without calendar: 320×480, 800×600, 1024×760, 1280×800, 1280×1024, 1440×900, 1600×1200, 1680×1050, 1920×1200

   Spring Bunny

   Designed by Andrei Tudorica from Romania.

   

   • preview
   • with calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200
   • without calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200

   Easter Day

   "Well I made “Girl in the Rain” for those who don’t want an Easter wallpaper… but how can I resist making an Easter wallpaper?! Happy Easter!" Designed by Sasha Bell from England, UK.

   

   • preview
   • without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200, 2560×1600

   Don’t Mess with Mr.Hare

   "Greyhound learns a valuable lesson about messing with the hare at Easter" Designed by Tom Bradshaw from United Kingdom.

   

   • preview
   • with calendar: 320×480, 1024×768, 1280×800, 1440×900, 1680×1050, 1920×1200
   • without calendar: 320×480, 1024×768, 1280×800, 1440×900, 1680×1050, 1920×1200

   Easter Bunny

   "A white Easter Bunny standing in the tall green grass." Designed by Narcis Lupou from Romania.

   

   • preview
   • with calendar: 800×480, 1024×640, 1280×720, 1440×900, 1680×1050, 1920×1200
   • without calendar: 800×480, 1024×640, 1280×720, 1440×900, 1680×1050, 1920×1200

   Easter Bunny

   "The scene represents a bucolic place. There’s a little bunny in a green field with two trees and bushes. He’s taking a greeting of “happy easter”. On the horizon there are white clouds in the blue sky. On the top-right cloud lays the smashing magazine logo while the days of april’s month flying in that sky." Designed by Laura Sclavi from Italy.

   

   • preview
   • with calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
   • without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

   Let’s read with Tiger

   "Theme: International Children’s Book DayI dedicate my illustration to children. I decided to draw my story with a little tiger, because2010 is Tiger’s year. My illustration combines this two events.:)" Designed by Miglena Boncheva from Bulgaria.

   

   • preview
   • with calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
   • without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

   Secrets

   "I was inspired by a photograph of Olivia Bell, on DeviantART and thought it would be quite cool as a wallpaper! Happy April and enjoy!" Designed by Rosanna Bell from England, UK.

   

   • preview
   • with calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200
   • without calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200

   April Showers

   "Living in Seattle, there are always showers…especially in April" Designed by Lauren Curtis from United States.

   

   • preview
   • with calendar: 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
   • without calendar: 320×480, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

   Girl in the Rain

   "I was inspired to make this, from all the RAIN we get over here – we’ve had about 10 days of rain in England… not very fun, but inspiring anyway!" Designed by Sasha Bell from England, UK.

   

   • preview
   • with calendar: 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
   • without calendar: 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200

   Carpe Diem

   "Carpe diem (from latin) means to live fully. like a man who is not afraid from anything, and despite of a pain caused by a fire, he is fully happy. during the april, also the nature wakes up, as well as we should to start live fully." Designed by Tomas Golha from Slovakia.

   

   • preview
   • with calendar: 800×600, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050
   • without calendar: 800×600, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050

   Sweet Messy

   "April is hot and messy in sun, colors and mushrooms April is hot and messy in sun, colors and mushrooms" Designed by Romy Menegazzi from Brazil.

   

   • preview
   • with calendar: 1024×768, 1280×800, 1366×768, 1440×900, 1680×1050, 1900×1200
   • without calendar: 1024×768, 1280×800, 1366×768, 1440×900, 1680×1050, 1900×1200

   Spring Beez

   "For me, the bees signify April, spring and the sunny days beginning." Designed by Eugenie Huard from California, USA.

   

   • preview
   • with calendar: 320×480, 640×480, 800×480, 800×600, 1024×640, 1024×768, 1280×800, 1280×960, 1280×1024, 1440×900, 1680×1050, 1920×1200, 2560×1600
   • without calendar: 320×480, 640×480, 800×480, 800×600, 1024×640, 1024×768, 1280×800, 1280×960, 1280×1024, 1440×900, 1680×1050, 1920×1200, 2560×1600

   New Beginnings

   "Designed for daily inspiration and encouragement to live life." Designed by Millicent Bowman from USA.

   

   • preview
   • with calendar: 320×480, 1024×768, 1280×768, 1440×900, 1680×1050, 1920×1200, href=”http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/uploader/wallpa
3. 

   Joshua Johnson says:

   April 1st, 2010 at 10:18 pm

   Photoshop’s wide array of cloning tools is the cause of many of the absolute best and worst works created with the application. In a skilled and experienced hand, these tools lead to phenomenal results. In the hands of a careless artist, Photoshop cloning can be disastrous to the credibility of the result. This article introduces the several cloning tools available in Photoshop and goes over the proper usage and best practices of each.

   [Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter!]

   The Clone Stamp Tool

   The Clone Stamp tool is the oldest and most widely known of the cloning tools. The basic concept is that you duplicate certain portions of an image using a source, destination and brush.

   
   Use the “Option” key (”Alt”) to set the source.

   To clone out the name on the tombstone above, you would select a source that shares the texture of the area you want to replace. In this case, the area around the words provides an ample source of stone texture from which to clone.

   To begin, simply click on the preferred source area while holding down the “Option” key (”Alt” on a PC). Then, with no keys held down, begin painting over the area you want to replace. The image area from the source will be transferred to the destination.

   To be able to use this tool effectively, let’s look at the relevant settings.

   Basic Settings: Brush

   Below, you’ll find the default settings when the clone stamp is selected.

   
   The clone stamp’s basic settings.

   The first setting you’ll want to familiarize yourself with is for the brush. Photoshop does not restrict cloning to a basic default brush. Instead, it allows you to use any brush you want, allowing you to create an unlimited number of effects. In the example above, and in most cases in fact, a small to medium-sized round soft brush gives the best result.

   
   A hard brush creates noticeable seams.

   As you can see, a hard brush often creates visible edges along the path of the clone. The transition is much smoother on the left side, where a soft brush was used. Both sides suffer from noticeable replication, but this was intentional to exaggerate the cloned area. We’ll discuss how to avoid this later.

   As stated, while a soft round brush is recommended for basic cloning, a number of interesting effects can be created using alternate brushes. For instance, below I’ve used a scatter brush shaped like a leaf to add some visual interest to the photo.

   
   Use a scatter brush to create interesting particle effects.

   Experiment with the opacity, blending mode and brush flow for an even wider variety of results. For more information on using these features, check out the article “Brushing Up on Photoshop’s Brush Tool.”

   Basic Settings: Sample

   Under the “Sample” menu are three options: Current Layer, Current & Below and All Layers. These options affect the area you are sourcing. Here’s a visual illustration of how each mode works:

   
   The area cloned depends on the selected layer and sample mode.

   As you can see, with Current Layer selected, the clone stamp ignores pixel data contained in any other layer. Conversely, All Layers ignores all layer distinction and clones any visible pixels in the document (invisible layers will be ignored). Finally, Current & Below samples pixels from the selected layer and any visible layers behind it.

   Basic Settings: Adjustment Layers

   The final basic setting (the circle with a diagonal line through it) lets you decide whether the clone stamp tool should sample adjustment layers when cloning. Adjustment layers, such as Hue/Saturation and Levels, are meant to be a non-destructive way to change the appearance of layers. So, you can make drastic changes to a layer or group of layers without destroying the original pixels.

   Because of this, turning on Ignore Adjustment Layers When Cloning is almost always a good idea. This allows you to clone the original image, which can then be affected by an ever-changeable adjustment layer. If you do not choose to ignore the adjustment layer, the adjustment becomes permanent in the cloned areas.

   In the layer set-up below, turning on Sample All Layers would by default clone pixels from both the background layer and the adjustment layer in the foreground. Turning on Ignore Adjustment Layers prevents this.

   
   You can choose to ignore adjustment layers when cloning.

   The Spot Healing Brush

   As you can see below, the Spot Healing Brush tool is located under the Eyedropper tool and above the Brush tool, and it can be accessed quickly by hitting J on the keyboard.

   
   Type J to bring up the Spot Healing Brush.

   The Spot Healing Brush is by far the simplest cloning tool in Photoshop. With little to no experience, you can repair small areas of an image. The secret to using the tool is in the name: Spot Healing. The tool is intended not for large areas of replacement, but rather to remove little unwanted spots, such as a scratch on an old photograph or a mole on a person’s face.

   To use the tool, simply hover over the area you want to replace and click once. Photoshop does all the work by examining the pixel data around the spot and seamlessly integrating the data into the destination.

   
   The Spot Healing Brush is perfect for repairing old photographs.

   As you can see above, the tool does a remarkable job of not leaving behind any noticeable artifacts or repeating patterns. The trick is to go slowly and work on very small portions of the image. Select a spot to fix, and use a brush that’s only slightly bigger than the selected imperfection. The larger the brush, the more likely you are to clone unwanted portions of the surrounding area, and the more noticeable the repetition of pixels will be.

   
   Use a brush slightly bigger than the target spot.

   The Healing Brush

   The Healing Brush tool, located under the Spot Healing Brush tool, is very similar to the Clone Stamp tool. To begin, Option + click (Alt + click on a PC) to select your source, and then carefully paint over the destination to transfer the pixels. The Healing Brush performs this operation with more built-in intelligence than the Clone Stamp.

   As with the Spot Healing Brush, the Healing Brush attempts to automatically blend in the cloned pixels with the environment around it.

   
   The Healing Brush tool automatically blends the source with the destination.

   As you can see, using the Clone Stamp to clone the puppy’s eye results in a straight copy of the pixels, while the Healing Brush does a much better job of blending with the background.

   This built-in intelligence proves extremely helpful when cloning a subject with diverse colors, textures and lighting conditions. Using the Clone Stamp in these situations can leave you with a lot of noticeably patchy spots that really stand out from the surrounding area.

   
   The Healing Brush Tool makes it easy to clone visually complicated areas.

   The photograph above is a good example of a subject with a fairly complicated surface. Using the Clone Stamp tool would have made it quite difficult to paint over the cracked areas while retaining the integrity of the stained stone. Much of the discoloration would have been sacrificed as you sourced smoother areas to erase the cracks. However, the Healing Brush was able to effectively replace the cracked areas with smoother areas, while sampling from the surrounding area to replicate the stains.

   The Patch Tool

   The final healing tool we’ll examine is the Patch tool, which can be found under the Healing Brush tool, as seen below.

   
   Tip: hit Shift + J to cycle between the tools in the fly-out menu.

   The cloning tools we’ve examined so far are best when used meticulously on small portions of an image. By contrast, the Patch tool is the best way to clone large, relatively uniform areas. As with the other healing tools, the Patch tool not only performs a straight clone but attempts to blend in the edge of the selected area with the target environment.

   To use the Patch tool, either make a selection with any of the selection tools, or simply select an area with the Patch tool’s built-in lasso. There are two modes to choose from for the behavior of the patch: “Source” and “Destination” (found in the menu bar above the document area).

   Source Mode

   With the source mode selected, first select the area of the image you want to replace, and then drag that selection to the area you want to source. For instance, to eliminate the golf ball in the image below, you would first select the area around the golf ball, and then drag that selection around to find the best source.

   
   In source mode, first select the area you want to replace.

   As you drag the selection around to find a suitable source, watch the destination (i.e. your originally selected area) for a preview of what the source pixels will look like in that area. Keep in mind that this preview is a straight clone without any blending (the final image will look much better). Release the selection to see the actual result.

   
   The Patch tool’s result.

   As you can see, it does a pretty impressive job of blending the source and destination pixels all on its own. But going over areas that need improvement with the Healing Brush is good practice.

   Destination Mode

   With “Destination” mode selected, the area you select first will be the area that is replicated elsewhere. For instance, if we start with the same selection as before, dragging the selection this time gives us a preview of copying the ball to a new location.

   
   Patch tool destination mode.

   After you release the selection, the golf ball is copied to a new area of the image and blended with the surrounding pixels.

   
   Result of “Destination” mode.

   The Clone Source Palette

   The Clone Source palette (found under Window → Clone Source) is an invaluable resource for professional-quality cloning. This tool gives you much more control over the results and functionality of the Clone Stamp and Healing Brush.

   The Clone Source palette contains three primary sections: cloning source, offset adjustment and overlay options.

   
   The Clone Source palette.

   Cloning Sources

   In the first section in the Clone Source palette, you can define multiple areas of an image as a source from which to clone and/or heal.

   
   Defining multiple sources.

   The image above illustrates an example of when you might want to define multiple sources. To save a source, click on one of the five source buttons, and then Option + click (Alt + click) with either the Clone Stamp or Healing Brush. That location will now be saved to that button. Now, select the next button in line, and do the same in another part of the image. Once your sources are loaded, you can quickly shift between them simply by clicking the related button.

   Notice that the file name appears just under the clone source buttons. This is because you can actually select a clone source outside of the image that you’re working on. Simply open a different file and set the clone source. Then, when you go back to the primary file to paint with the Clone Stamp or Healing Brush, the pixels from the other image will function as the source of the clone.

   Offset Options

   The second section of commands in the Clone Source palette really increase the variety of cloned results available to you. You can set exact coordinates for the source, change the size of the cloned result relative to the original source, tweak the rotation of the result and set a precise offset (again, relative to the original source).

   
   Tweaking the cloned results.

   You can see these transformation effects in action in the example above. The two bails of hay are actually one and the same, but they look considerably different because of the offset options. First, I set both the width and height to 90%, so that the cloned bail would appear slightly smaller than the original. Then I changed the width to -90% to flip the clone horizontally (you could change the height to a negative number to flip the image vertically). Finally, I set the rotation to 10° to give the illusion of a small hill.

   Overlay Options

   The overlay options are among the most helpful features in the Clone Source palette. Years ago, cloning involved a lot of guess work because it was difficult to tell exactly what the selected sample would look like without actually applying it. The guesswork has been eliminated with the “Show Overlay” command. When “Show Overlay” is selected in conjunction with the “Clipped” option, your brush is shown with a preview of the clone source inside. This is extremely helpful when attempting to clone inorganic areas with straight edges, such as a brick wall.

   
   An overlay of the source is displayed within the brush.

   Note that if you choose to turn on the overlay but turn off “Clipped,” then your entire clone source layer will be shown surrounding the brush.

   
   An overlay of the source is displayed within the brush.

   Working this way is actually quite difficult because the source significantly blocks your view of the destination. But if you prefer it, try reducing the opacity of the overlay so that you can see the image below.

   Vanishing Point

   Vanishing Point takes cloning to an entirely new dimension, literally. The tool makes it possible to set up primitive planes across your artwork, which a clone then follows to simulate a three-dimensional space. Vanishing Point has a ton of features and potential applications, and it really merits its own entire article, so this will be just a brief introduction.

   When you open up the Vanishing Point dialog (found under the “Filter” menu item), you’ll see a large preview of your image, along with a small set of tools on the left side.

   
   The Vanishing Point dialog.

   Grab the tool sitting second from the top to set up your initial plane. With this tool, click once on each of the four corners, outlining the desired plane. Once you’ve created an initial plane, you can Command + click (Control + click on a PC) to extend the plane perpendicularly. Some images, though, like this old barn, won’t have perfect angles. In this case, you’ll have to create a second plane, entirely distinct from the original.

   
   Setting up planes.

   Once you’re satisfied with the planes, grab the Clone Stamp (fourth from the top), and Option + click the desired source (in our case, the barn door). Then clone the door onto the front-facing wall using the same method you would use with the normal Clone Stamp tool. Turn “Healing” on in the drop-down menu above the image preview to ensure that the source is properly blended into the destination.

   
   Vanishing Point result.

   As you can see, Photoshop interpreted the planes fairly well. Some fine-tuning and clean-up are definitely necessary if we want a believable image; but overall, the result is extremely impressive, given the lack of work required.

   5 Quick Tips For Better Cloning

   Now that we’ve examined each tool in depth, let’s close by recalling a few things to keep in mind if we want to clone with professional results.

   Take Your Time

   As you undertake a cloning project, the quality of the result is directly proportional to the amount of time you put into it. Cloning photographic details can be incredibly tedious work. The world has become well acquainted with Photoshop magic, so never assume that no one will notice your blunders.

   Duplicate the Active Layer

   The very first step to take when cloning parts of an image is to duplicate the layer you’ll be working on (or to just work on a new transparent layer). Realizing that you made a mistake so long ago that your “Undos” don’t go back far enough to fix it is beyond frustrating. Keeping the original image on a hidden layer gives you the flexibility to revert any part of an image to its original state.

   Be Selective With Your Tools

   Each cloning tool has its strengths and weaknesses, as outlined above. Never arbitrarily grab a tool and stick with it for the duration of a project. Consider which tool is best suited to the particular area of the image you’re working on. On large projects, no single tool creates believable results on its own. Use two or more tools in synergy to achieve a realistic result.

   Watch for Obvious Duplication

   
   Sloppy cloning results in noticeable patterns.

   If you’re not careful, duplicated pixels can become painfully obvious. This is especially true of areas that should look fairly organic, like the grass above. Instead of appearing natural, an obvious pattern emerges when you use the same section of an image over and over. To avoid this, make heavy use of the Clone Source palette. Use multiple sources; and change the size, rotation and orientation of the areas you’re cloning to give the illusion of an unmanipulated image.

   Avoid Disasters

   When retouching significant parts of an image, overlooking certain areas becomes all too easy.

   
   Where did her leg go!?

   If you’re not careful, you could eliminate enough vital body parts to make the image humorous. Your goal is to prevent your work from showing up on Photoshop Disasters, which is where you’ll find the image above.

   Conclusion

   Cloning in Photoshop is a difficult task that requires significant time, studious attention to detail and an in-depth knowledge of several tools and commands. To improve the quality of your results, invest some time learning Photoshop’s entire cloning arsenal. Experiment with all of the options for each tool to get a better feel for where you can excel.

   Additional Resources

   • Vanishing Point Video Turorial
   • How to Use the Clone Stamp Tool in Photoshop
   • Cloning and Healing: Photoshop Tutorial
   • How to Mirror Your Clone Stamp (video tutorial)
   • Retouching and Healing Tools, Tutorial9

   (al)

   ---

   © Joshua Johnson for Smashing Magazine, 2010. | Permalink | 58 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | http://www.smashingmagazine.com/2010/03/30/the-ultimate-guide-to-cloning-in-photoshop/“>Tweet it! | Submit to Reddit | Forum Smashing Magazine
   Post tags: photoshop, psd
   
4. 

   Paul Andrew says:

   April 1st, 2010 at 10:19 pm

   Sketching and wireframing are a specialized style of drawing, used for fleshing out preliminary complex ideas, group brain-storming, a lo-fi method for evaluating interaction concepts, and as a way of roughly perfecting a design technique.

   Sketch and wireframe paper is essentially drawing paper that is designed specifically for this purpose. You could use it for web page design, web app design, architectural or structural design, graphic design, movie direction, animation… basically any type of design that needs a physical creative outlet or group collaboration.

   Not all sketch and wireframe sheets are universal, most are specialized for a particular medium, such as storyboards and specialized grid paper (axonometric perspective templates).

   Below you will find a concise collection of ready to print sketching, wireframing and note-taking templates. Most, as expected, are geared towards the design community, but there are also templates that could be used within any industry and for any purpose.

   You may be interested in the following related posts:

   • 35 Excellent Wireframing Resources
   • 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

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

   Wireframing and Sketching Paper

   Paper Browser – It's a browser, only in paper
   This PDF can be used for creating a website’s wireframe. The entire PDF is proportionally scaled at a 1024×768 screen resolution, with guides for designs that use a 960px or 800px layout and with each grid sized at 32×32px. The PDFs are available in both A4 and A3.

   

   Web Sketching Template – Single Page
   This A4 template has been designed for sketching a website with a resolution of 1024×768.

   

   iPhone Wireframe Templates for Sketching
   These iPhone paper prototyping and design templates are available to download in two different styles: the basic iPhone design template and a more advanced one that also has the iPhone sketch template but leaves space for making notes. Both can be downloaded in a .zip-file which also contains the templates in Viso (VSD) format.

   

   iPad Idea Sheet
   This template has been designed for wireframing iPad apps. There are three templates within the zip-archive: The first template allows for full size iPad sketching (100%), the second has two iPad templates (at 70% of the normal size) and the last has four iPads sized at 50% of the regular size.

   

   iPhone Idea Sheet
   This iPhone idea sheet has been designed by the same people that released the iPad Idea Sheet above. The .zip-file contains 4 different printable templates: two templates are sized at 100% of the actual iPhone with a choice of horizontally or vertically aligned sheets and the other two sketching templates each have 9 iPhone designs (sized at 75% of the actual iPhone) and again with a choice of either horizontal or vertical orientation.

   

   iPhone Application Sketch Template
   This iPhone template has a grid with the grid squares sized at 10px; it is designed with tick marks to indicate the heights of the status bar, nav bar, keyboard, tab bar and toolbar. The download is a 300dpi A4 JPEG.

   

   Android Wireframe Templates
   This sketching set for Android contains templates for Nexus One, HTC Dream, HTC Hero, HTC Magic, HTC Tattoo and Motorola Droid.

   

   Wireframe Print and Sketch Template

   

   A4 & A3 Sketching Paper
   This printable grid sketching paper can be useful for the initial stages of web design, concept designing. You can choose between the A4 size or A3.

   

   Basic Wireframing Paper
   This is a basic grid box which you can use for concept diagrams, sitemaps, spectrums, tables, and whatever else you may need to sketch.

   

   Wireframe and Notes Paper
   This is a wireframe grid divided into 24 columns with gutters between each column. The column units are numbered along the top of the grid. To the right of the grid there is a ruled column for adding labels and annotations.

   

   Two-by-Two Wireframe Paper
   This template is a two by two grid with 4 cells divided by an x-y axis.

   

   Blank Grid and Graph Paper

   ZURB Grid Paper
   With this grid paper you can connect the dots to give your sketches a little more structure while exploring refined concepts on paper.

   

   Graph Paper with Two Lines Per Inch – Letter-Sized
   This basic letter-sized graph paper has two aqua blue lines per inch.

   

   Four Dots Per Inch A4 Paper
   This printable dot paper has four dots per inch and is in portrait (vertical) orientation on letter-sized paper.

   

   Storyboard Templates

   4 Cell Storyboard Paper
   This is a basic storyboard sketching template with 4 cells with each cell having a simple grid.

   

   MBTI Sketching Paper for Ideation
   With this MBTI sketching paper for ideation sessions, you can describe a design challenge on every piece of sketching paper which represents the problem you want to solve. There’s also some space for annotations. You can download the PDF in A4 and A3.

   

   ZURB Sketchsheets
   A set of editable PDF sketchsheets ideal for rough ideas and presentation to clients. There are five slightly different templates in the .zip-download package.

   

   Storyboard Template

   

   Storyboard with Notes
   A storyboard template with 4 cells, with the area space beneath each cell for notes.

   

   Web Sketching Template – 6 Pages
   An A4 web design sketching template with space for notes.

   

   Scenario, Taskflow and Grid Sketchsheets
   This all-in-one PDF download package contains scenario, task-flow and grid templates. All can be useful during the early stages of web development process. Here are the three templates:

   

   

   

   Lined and Notepad Paper

   A4 Narrow-Ruled
   This letter-sized lined paper is narrow ruled in portrait (vertical) orientation.

   

   8.25" x 11" Lined and Squared Paper
   This lined and squared paper template is sized 8.25"x11", and available in both PDF and JPEG.

   

   Speciality Paper

   Printable Cornell Note Paper
   This Cornell Notes paper is lined and additionally formatted with two large blank areas for a summary and a cue (on which to later note and review main ideas, ask questions, or draw diagrams).

   

   Moleskine Writing Template by Rod Graves
   This template is based on a medieval page layout principle described in Robert Bringhurst’s classic book on typography, The Elements of Typographic Style. The Large sized notebook’s dimensions are nearly equivalent to a Golden Section rectangle (1:1.61803…). The design of the template is related to the golden section / the Fibonacci sequence.

   

   Penmanship Paper
   You can use this dashed paper to practice penmanship. The PDF is in the size A4 and has twelve lines per page, in portrait (vertical) orientation.

   

   Calendars

   Weekly Printable Calendar
   This calendar's overview format lets you prioritize tasks, schedule appointments, and jot down notes all on one page. Custom options include Letter and A4 printing sizes, start day of the week, time range, and multiple languages.

   

   Monthly Printable Calendar
   This template lets you create printable monthly calendars for letter and A4 paper sizes.

   

   5-Day Monthly Calendar
   Create and print a 5-day calendar with holidays and your choice of start day by using the generator.

   

   Lined Weekly Printable Calendar
   Create and print lined weekly calendars in horizontal or vertical format with your choice of start day.

   

   Index card sized Printable Calendars
   Choose from 4 different compact templates for printing directly to3×5 and 4×6 index cards (with the dates already filled in). Here are the download links: Monthly Calendar, Split Month Calendar, Yearly Calendar and 2-Year Calendar.

   

   Music Sheets

   Music Paper from the University of Virginia
   There are many sites where you can download blank music sheets, but none are as a comprehensive and detailed as this resource. You can select PostScript or PDF formats for your templates; they are all sized 8^1/2 x 11 (portrait orientation). Overall, there are 37 templates available and they are split into the following categories: General (9 templates), Solo (3 templates), Ensemble (8 templates), Band (4 templates), Orchestra (4 templates) and finally templates for Choral (8 templates). Below you can see examples of the Basic template and the Full Orchestra templates:

   

   

   Generators and Tools

   Incompetech Grid and Graph Paper Generator
   On this site you can generate basic graph templates in any size, color and even by grid spacing, you can also choose from the scores of different graph variations: Axonometric Perspective, Cross Grid, Inverted, Equilateral Triangle, Octagonal, Hexagonal, Semi-bisected Trapezoid and Tumbling Block – Trapezoid.

   Notepad Generator
   This tool allows you to customize a PDF notepad which you can then print it out on standard 8 1/2 x 11 paper.

   Print Free Graph Paper
   Here you can choose the size (Letter or A4), paper type (Cartesian, Polar, Isometric…), measuring units (Millimetres or Inches) and finally whether you want the paper formatted or un-formatted.

   All work and no play PDFs

   Downloadable Origami Templates
   You know the saying “all work and no play…”. Well, not all printable PDFs are geared towards work. How about a fun stress reliever? This site offers a huge database of printable origami models that will keep you amused for hours. Best not to make these during collaboration and brainstorming meetings though!

   

   

   Design Police – Bring bad design to justice
   Fed up with the bad design choices of your colleagues? Design-Police.org has created, as they call it, “visual enforcement kit” for designers. Help bring bad design to justice!

   

   Related Posts

   You may be interested in the following related posts:

   • 35 Excellent Wireframing Resources
   • 50 Free UI and Web Design Wireframing Kits, Resources and Source Files

   What other goodies would you like us to collect?

   Would you like us to collect other PDFs, files, download kits? Let us know what you need in the comments below and we will collect them and present them in one of our upcoming posts!

   ---

   © Paul Andrew for Smashing Magazine, 2010. | Permalink | 60 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | http://www.smashingmagazine.com/2010/03/29/free-printable-sketching-wireframing-and-note-taking-pdf-templates/“>Tweet it! | Submit to Reddit | Forum Smashing Magazine
   Post tags:
   
5. 

   Louis Lazaris says:

   April 1st, 2010 at 10:49 pm

   Ah, the ubiquitous CSS sprites — one of the few web design techniques that was able to bypass “trend” status almost instantly, planting itself firmly into the category of best practice CSS. Although it didn’t really take off until well after A List Apart explained and endorsed it, it was discussed as a CSS solution as early as July, 2003 by Petr Stanícek.

   Most web developers today have a fairly strong grasp of this technique, and there have been countless tutorials and articles written on it. In almost every one of those tutorials, the claim is made that designers and developers should be implementing CSS sprites in order to minimize HTTP requests and save valuable kilobytes. This technique has been taken so far that many sites, including Amazon, now use mega sprites.

   Is this much-discussed benefit really worthwhile? Are designers jumping on the CSS sprite bandwagon without a careful consideration of all the factors? In this article, I’m going to discuss some of the pros and cons of using CSS sprites, focusing particularly on the use of “mega” sprites, and why such use of sprites could in many cases be a waste of time.

   [Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

   Browsers Cache All Images

   One of the benefits given by proponents of the sprite method is the load time of the images (or in the case of mega sprites, the single image). It’s argued that a single GIF image comprising all the necessary image states will be significantly lower in file size than the equivalent images all sliced up. This is true. A single GIF image has only one color table associated with it, whereas each image in the sliced GIF method will have its own color table, adding up the kilobytes. Likewise, a single JPEG or PNG sprite will likely save on file size over the same image sliced-up into multiple images. But is this really such a significant benefit?

   By default, image-based browsers will cache all images — whether the images are sprites or not. So, while it is certainly true that bandwidth will be saved with the sprite technique, this only occurs on the initial page load, and the caching will extend to secondary pages that use the same image URLs.

   
   The Firefox cache displaying images from amazon.com that the browser cached (type “about:cache” in the address bar in Firefox to view this feature).

   When you combine that with the fact that internet speeds are higher on average today than they were when this technique was first expounded upon in 2003-2004, then there may be little reason to use the mega sprite method. And just to be clear, as already mentioned, I’m not saying sprites should never be used; I’m saying they should not be overused to attain limited benefits.

   Time Spent Slicing a Design Will Increase

   Think about how a simple 3-state image button sprite is created: The different states need to be placed next to one another, forming a single image. In your Photoshop mockup (or other software), you don’t have the different states adjacent to each other in that manner; they need to be sliced and combined into a new separate image, outside of the basic website mockup.

   If any changes are required for any one of the image states, the entire image needs to be recompiled and resaved. Some developers may not have a problem with this. Maybe they keep their button states separate from the mockup in a raw original, making it easier to access them. But this complicates things, and will never be as simple as slicing a single image and exporting it.

   For the minimal benefit of a few kilobytes and server requests saved (which only occurs on initial page load), is the mega sprite method really a practical solution for anything other than a 3-state button?

   Time Spent Coding and Maintaining Will Increase

   After an image is sliced and exported, the trouble doesn’t end there. While button sprites are simple to code into your CSS once you’re accustomed to the process, other kinds of sprites are not so simple.

   A single button will usually be a <ul> element that has a set width. If the sprites for the button are separate for each button, it’s simple: The width and height of the <ul> will be the same as the width and height of the list item and anchor, with the sprite aligned accordingly for each state. The position of the sprite is easily calculated based on the height and/or width of each button.

   But what about a mega sprite, like the one used by Amazon, mentioned earlier, or the one used by Google? Can you imagine maintaining such a file, and making changes to the position of the items in the CSS? And what about the initial creation of the CSS code? Far from being a simple button whose state positions are easily calculated, the mega sprite will often require continuous testing and realigning of the image states.

   
   Some of the CSS used to position Google’s sprite image

   It’s true that the Amazon sprite saves about 30 or more HTTP requests, and that is definitely a significant improvement in performance. But when that benefit is weighed against the development and maintenance costs, and the caching and internet speed issues are factored in, the decision to go with sprites in the mega format may not be so convincing.

   Do Sprites Really Require “Maintenance”?

   Of course, some may feel that sprites do not cause a major headache for them. In many cases, after a sprite is created and coded, it’s rarely touched again, and isn’t affected by any ongoing website maintenance. If you feel that sprite maintenance won’t be an issue for you, then the best choice may be to use the mega sprite method.

   Not Everything Should Be a Background

   Another reason not to promote the overuse of CSS sprites is that it could cause developers to use background images incorrectly. Experienced developers who consider accessibility in their projects understand that not every image should be a background. Images that convey important content should be implemented through inline images in the XHTML, whereas background images should be reserved for buttons and decorative elements.

   
   Amazon correctly places content images as inline elements, and decorative ones as backgrounds.

   Improper Use of Sprites Affects Accessibility

   Because of the strong emphasis placed on using CSS sprites, some beginning developers intending on saving HTTP requests may incorrectly assume that all sliced images should be placed as backgrounds — even images that convey important information. The results would be a less accessible site, and would limit the potential benefits of the title and alt attributes in the HTML.

   So, while CSS sprites in and of themselves are not wrong, and do not cause accessibility problems (in fact, when used correctly, they improve accessibility), the over-promotion of sprites without clearly identifying drawbacks and correct use could hinder the progress the web has made in areas of accessibility and productivity.

   What About HTTP Requests?

   Many will argue, however (and for good reason) that the most important part of improving a site’s performance is minimizing HTTP requests. It should also be noted that one study conducted showed that 40-60% of daily website visitors come with an empty browser cache. Is this enough to suggest that mega sprites should be used in all circumstances? Possibly. Especially when you consider how important a user’s first visit to a website is.

   
   The YSlow Firefox add-on that analyzes performance shows the number of HTTP requests being made

   While it is true that older browsers generally only allowed two simultaneous HTTP connections, Firefox since version 3.0 and Internet Explorer 8 by default allow 6 simultaneous HTTP connections. This means 6 simultaneous connections per server. To quote Steve Souders:

   It’s important to understand that this is on a per server basis. Using multiple domain names, such as 1.mydomain.com, 2.mydomain.com, 3.mydomain.com, etc., allows a web developer to achieve a multiple of the per server connection limit. This works even if all the domain names are CNAMEs to the same IP address.

   So, while there could be a benefit to using CSS sprites beyond just button states, in the future, as internet connection speeds increase and newer browser versions make performance improvements, the benefits that come from using mega sprites could become almost irrelevant.

   What About Sprite Generators?

   Another argument in favour of mega sprites is the apparent ease with which sprites can be created using a number of sprite generators. A detailed discussion and review of such tools is well beyond the scope of this article, so I’ll avoid that here. But from my research of these tools, the help they provide is limited, and maintenance of the sprites will still take a considerable amount of work, which again should be weighed against the benefits.

   

   Some tools, like the one by Project Fondue, offer CSS output options. Steve Souders’ tool SpriteMe is another one that offers CSS coding options. SpriteMe will convert an existing website’s background images into a single sprite image (what I’ve been referring to as a “mega” sprite) that you can download and insert into your page with the necessary CSS code. While this tool will assist with the creation of sprites, it doesn’t seem to offer much help in the area of sprite maintenance. Souders’ tool seems to be useless for a website that is redesigned or realigned, and only seems to provide benefit to an existing design that has not yet used the mega sprite method.

   

   Improvements to current tools could be made, and newer tools could appear in the future. But is it possible, due to some of the drawbacks mentioned above, that developers are focusing a lot of effort on a very minimal gain?

   Focus Should be on Multiple Performance Issues

   As mentioned, the number of HTTP requests is an important factor to consider in website performance. But there are other ways to lower that number, including combining scripts and stylesheets, and using remote locations for library files.

   There are also areas outside of HTTP requests that a developer can focus on to improve site performance. These might include GZipping, proper placement of external scripts, optimizing CSS syntax, minifying large JavaScript files, improving Ajax performance, avoiding JavaScript syntax that’s known to cause performance issues, and much more.

   
   YSlow indicates many areas outside of HTTP requests that can improve site performance

   If developers take the time to consider all factors in website performance, and weigh the pros and cons correctly, there may be good reason to avoid overusing CSS sprites, and focusing on areas whose performance return is worth the investment.

   Conclusion

   Please don’t misinterpret anything that I’ve said here. Many top bloggers and developers have for years extolled the benefits of using sprites, and in recent years taken those suggestions further in promoting the use of mega sprites — so those opinions should be taken seriously. However, not everyone has the luxury of working in a company that has policies and systems in place that make website maintenance tasks simple and streamlined. Many of us work on our own, or have to inherit projects created by others. In those cases, mega sprites may cause more trouble than they’re worth.

   What do you think? Should we reconsider the use of mega sprites in CSS development? Do the statistics in favour of the savings on HTTP requests warrant the use of sprites for all background images? Or have sprites in CSS development evolved from a useful, intuitive and productive technique to a time-consuming nuisance?

   ---

   © Louis Lazaris for Smashing Magazine, 2010. | Permalink | 122 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | http://www.smashingmagazine.com/2010/03/26/css-sprites-useful-technique-or-potential-nuisance/“>Tweet it! | Submit to Reddit | Forum Smashing Magazine
   Post tags: CSS
   
6. 

   Kat Neville says:

   April 1st, 2010 at 11:29 pm

   Ah, the dreaded cover letter. Boring to write, difficult to get right, and you’re usually preoccupied by other things (such as the portfolio and resume, which are also really important).  Unfortunately, your cover letter is a company’s first exposure to you, and it determines whether your application is trashed or fast-tracked to the company’s to-hire list.

   The status of the cover letter is changing in the Web industry. While a well-formed cover letter still has a place, some companies believe that Web folk who rely on this archaic tool never make it to the next round. But what do I know? Let’s hear instead from some great Web and design agencies to get their advice on creating a great cover letter!

   You may be interested in the following related posts:

   • How To Create A Great Web Design CV and Résumé?
   • Business Card Design: Better Than A Plain Ol’ Business Card
   • Invoice Like A Pro: Examples and Best Practices
   • The Art And Science Of The Email Signature

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

   The Old Way: Copy, Paste… Personality-Free

   Anyone who has ever recruited for a job has received “that letter.”  And it’s always the same: usually a “Dear Sir/Madam,” followed by some generic schpiel about how the applicant will fit in well with the company, no matter what the role or company.  The text is boring, as if copied from a “How to get a job” pamphlet from 1980. The companies I spoke to overwhelmingly hated form letters. So, first and foremost, personalize your email or letter. Secondly, tailor the letter to that company. Here is the advice of some companies on personalizing cover letters.

   No Sirs or Madams!

   Addressing an actual person is so important. This was by far the most passionately made point by every company I spoke with. Companies want to know that you have taken the time to personalize your email.  If you can’t find a name to address (which happens 10% of the time) or you’re not sure whom to address, at least use something like, “To the creative director at [company name]” (don’t forget to get the title and company right before sending!).

   We trash generic inquiries (i.e. form letters) automatically. If you don’t care to put in a little effort to tailor your communication to my company, I sure don’t care to read it. Why do you want to work for Particular instead of some other company? How did you find us? Some indication that you’ve read the Particular or Matter websites is a good start.

   — Ash Arnett, PARTICULAR

   I want to click delete if I see “Dear Sir/Madam” or “To whom it may concern.” If you actually read our blog and mention one of the posts in your email, I know that you actually took the time to determine whether you liked what our organization is about or whether you just added our email address to your Bcc field. It’s not hard to find out who you’re talking to if you actually take time to browse our website.

   — Josh Cramer, Cramer Dev

   The worst thing someone could do is send over a generic copy-and-pasted email in which they’ve just changed your name or company name. You’d be amazed how many people do this. It’s an instant turn-off. You find people referencing things that have nothing to do with your company or any sort of job role you have available.

   — Andy Ashburner, Caffeinehit

   Bcc Is Not Your Friend

   We’ve all done it.  We want to save time, so we mass email many people by “secretly” blind-copying them.  Friends don’t really like it that much to begin with, so what makes you think a company would take you seriously?

   Technology gives you power to Bcc 100 email addresses or more at a time. That is dangerous. Sadly, too many applicants send one email that is clearly being posted to many agencies and is not personalized at all. For me, getting a good job is not a numbers game. From greater effort springs reward. I can still remember the intros of all the people I hired.

   — Mark McDermott, Codegent

   Really? You’re Real?

   Showing personality, showing that you haven’t just copied the cover letter of your “Web designer” template, scores big points with employers. Demonstrating personality with real examples makes you even more real.

   We look for clues that begin to reveal the candidate’s personality based on the tone and voice of the letter, as well as layout (which is actually more important to see in their resumes for some of the more design-oriented roles we have).

   — Boris Chen, Extractable

   For a CSS designer, rather than just hearing you say, “I’m crazy about CSS,” we’re looking for your blogging or tweeting about the latest CSS3 developments and seeing you active in communities and forums. A prime example is that some of our team members are ALA authors or even have been on Smashing Magazine. Those things show you’re passionate.

   — Dave Rosen, XHTMLized.com

   Structuring Your Cover Letter

   

   Cover letters are your first contact with employers, so getting the length and content right is important.  Most companies agree that you should include some links to your work, and definitely follow any instructions that they put in the job advertisement!

   You’ve Got 20 Seconds… Short and Sweet, Please!

   Any Web design agency worth its salt is too busy these days. They have to beat off new clients with a stick.  Remember that talented people are busy people, and most Web people have the attention span of a gnat. The Web is all about scanning, so make your cover letter adhere to the standards you apply to Web writing.  Every word counts!

   First, we’re busy people. We have a ton of projects and clients to manage, which generally means that we’re starved for time. This lack of time and volume of resumes means we don’t spend a good deal of time reading the emails or cover letters of every applicant (sorry, but it’s true). We’re not interested in verbose cover letters. In fact, just a line or two of copy in the email along with a link to the portfolio is plenty. Witty is fine, so is professional.

   — Geoff Teehan, Teehan+Lax

   I look for short and sweet with a touch of personality in a covering email. But the most important thing by far is the first impression I get after clicking the link to see the applicant’s website. The covering emails of both Kevin and André were strong:

   ---

   Hello,

   My name is Kevin John Gomez.  I’m a web designer currently living in Brooklyn.  I saw your post on Krop and you guys look like a really cool outfit… definitely a group I’d love to be a part of.  Just thought I’d say hello and give you some of my information.

   My portfolio/blog: http://www.kevinjohngomez.com

   My online resume: http://www.kevinjohngomez.com/resume (let me know if you’d like a PDF)

   Anyway… nice work guys… keep it up.

   Kevin

   ---

   Hello Noam,

   I’ve just seen your job posting at Krop.com. I thought it might be interesting to drop you a line:

   http://www.dresouzax.com The easiest and fastest way to get me and my portfolio introduced.

   Cheers,

   André Souza

   — Noam Sohachevsky, Mint Digital

   [Cover letters] have been replaced by email messages that must convey in two to three sentences the reason for your inquiry, your specific desired position within my firm, a phrase about your experience level, a link to your work samples and a sense of your personality.

   — Heather Olson, Larsen

   Give Your Best Examples

   Give examples of your work, but only the best. There’s no need to show 20 samples when 5 are good and 15 decent.  This goes back to the time factor: remember, you have just 20 seconds to impress them. Give them your best, and if they want more, back it up with a portfolio. And don’t forget how much you hate receiving 10 MB attachments.

   Generally, we won’t look beyond three websites that people have done (unless they are all good), so just serve a sample of your best. For JavaScript programmers, we ask that they include samples of… one or two short snippets of functions, along with an explanation of why they’re proud of that code.

   — Dave Rosen, XHTMLized.com

   Thank God that the “creative period” for cover letters—when people sent their applications on CD roms (which never worked), linked to inventive portfolios (that always crashed) and so on—seems to be over and done with.

   — Claus Sølvsteen, Partner at Peytz & Co.

   When we ask for design samples, we actually mean a link or a very small PDF, not twelve 20-MB files created in Corel Draw.

   — Scott Johnson, Rock Creek Strategic Marketing

   If You Get Instructions, Follow Them!

   Sometimes, job postings ask for something specific. They may ask, “What makes you passionate” or any other of a million questions. The employer does care about your answer (so make sure yours reflects well on your), but they often include the question to weed out those who can’t read or follow directions.

   When we write job ads, we try to include some specific instructions, just to see whether the applicant makes an effort to follow them. So, for example, we might ask for a CV/resumé in PDF format and request a description of how the applicant meets the job spec. It’s amazing how many applicants don’t follow these simple instructions: many will send CVs in Word format or won’t even attempt to explain why they’re suited to the job.

   — Jonathan Kahn,Together London

   We ask for six things from all our candidates: a catchy subject line, their top three skills, their best teamwork tactic, a URL, a resume and a reason why they want to work at ZURB. We ask for these things because we really want to see them. It’s also a litmus test to see if the candidate can follow directions. We want people to follow directions, but we also like rule-breakers when it makes sense.

   — Bryan Zmijewski, ZURB (creator of Notable App)

   Let Them Know How to Contact You

   If you’re available by phone, let them know.  If you’ve sent out 1,000 applications, though, you risk getting a phone call in which you have no recollection of who they are or what you wrote in your cover letter to them.

   Include relevant contact info (phone, cell, email, Twitter, etc.). Make sure you use a Gmail address (or something else professional-looking). You don’t want to be using a Hotmail address like sexy_stud_forever@hotmail.com.

   — Ryan Cash, Marketcircle

   Words Score You Points

   

   While not all companies expect you to be an expert writer, many want you to submit an adequately crafted cover letter. Overwhelmingly, companies agreed that spelling mistakes would cause them to look negatively on you, so you have no excuse. If you don’t have the writing skills, or the language is your second, find a friend or hire someone to help you.

   “Your a Good Companie!” Why Spelling and Grammar Mistakes Will Bury You

   I’m a stickler for spelling and grammar (if any errors are in this article, color my face red!), and I hate to admit that I do judge people by their writing abilities. Unfortunately, for weak writers, the employer’s first impression comes from your cover letter. If they notice an error, your application is already halfway to the bin.

   The basics need to be right. Well written, good grammar, no spelling mistakes (people who can write well are always viewed in a positive light). Enthusiasm needs to shine through. Solid typography, nicely laid out, showing organization and flair, but nothing too fancy (as befits our own company style). We’re also happy if the cover letter is online rather than on paper.

   Really, it’s all about attention to detail and good writing.

   — Rich, Clearleft

   Sweat the details of the wording itself. We can see pretty quickly whether you’ve made an effort, and we’ll infer from that how much effort you would make when working with us. I think it’s impossible to overstate how important good writing skills are for a Web design professional; the cover letter is your big opportunity.

   — Jonathan Kahn, Together London

   Spell-check, spell-check, spell-check… Did I mention spell-check?

   — Mark McDermott, Codegent

   Kisses of death: Typos, bad type, no personality, generic paper.

   — Justin Ahrens, Rule 29

   Don’t Look Desperate

   You may be desperate for the job, but your cover letter shouldn’t show it. You’ll scare them, and they’ll wonder why you have been having so much trouble finding work. You don’t want warning bells to sound in the introduction!

   For speculative inquiries, an attractive cover letter explains what you’re about and why you’re interested in working with us. A small compliment helps us to understand what turns you on, although I don’t recommend flattery! Also, be careful with “I’m in need of work”-type wording, because no one wants to employ someone who’s desperate. The most attractive cover letters show the applicant’s confidence in their ability, a passion for a certain type of work, and genuine interest and excitement at the prospect of working with us.

   — Jonathan Kahn, Together London

   Know The Company

   

   A form letter does not usually have any information about the company being applied to. But taking the time to research the company and find common points of interest makes an impression. It shows you care about the company and that you think you will fit in.

   Knowing the company also helps you set the tone of the letter, allowing you to inject personality that relates you to the company. Here are some more thoughts from the companies themselves!

   What Does the Company Do?

   Ask yourself what makes this company great and what it’s proud of. Getting in the employer’s state of mind makes it easier for you to sound as if “you would be a good fit” for the team!

   What usually makes me want to meet people is if they’ve demonstrated that they understand their audience. This is crucial because it’s what we ultimately get paid to do. In this case, the audience is me. Do they understand who we work for and what we do? If all we do is campaign work for shoe companies, then showing me your latest intranet design isn’t a great idea. Do they use language that shows that they did a little homework? We say a lot on our website, and someone who takes the time to read it and adopt a style or language that’s appropriate to my business will stand out.

   — Geoff Teehan, Teehan+Lax

   What makes a cover letter stand out? This is probably not a sexy answer, but not as obvious as you might think: take a second to learn something about the company you’re submitting a resume or portfolio to. Is there a particular project or client you’d like to handle? Did one of us say something on a blog that you strongly agree or disagree with? Anything other than a generic form letter. Those are depressing to get and depressing to throw away. Yet amazingly, so many job seekers just blindly fire them off.

   — Rob Robinson, Mess Marketing

   Make It as Good as the Company You’re Applying to

   So, you want to work for the best agency in the city? In the world? Think about what kind of cover letter would impress it. Maybe more is required than a cover letter: you have to aim as high as the agency does.

   This whole gig is about first impressions, isn’t it?

   Clients hire us because we have an amazing staff of designers who get people to say, “Hey, cool site.” And our developers build one-of-a-kind functionality that keeps visitors engaged and coming back. A candidate’s cover letter should be the same, with the cover letter being the design (motivating “buy in”) and the resume there to support the design and engage us as employers.

   — Brian D. Aitken, Halo Media LLC

   Be Professional

   The Web industry is pretty informal, but you are still addressing a company, so be respectful.

   Be aware that you are addressing the person who you hope will sign your pay check. We are collegial, but we’re not your buddies yet. If you’re coming at us through some social networking channel, be sensitive to the fact that those channels aren’t exactly ringing endorsements of credibility.

   — Ash Arnett, PARTICULAR

   Set an Appropriate Tone

   While you must maintain a certain level of professionalism and courtesy, if a company projects a silly image, you won’t get very far with a bank-like letter.

   Align your tone of voice in the email to the company’s culture as you perceive it. For example, we have an informal style. If a person is too formal, you couldn’t imagine them fitting in, even if their credentials are good.

   — Mark McDermott, Codegent

   Use Humor, If Appropriate

   Funny is great, but only if you can pull it off without insulting someone. Done right, it will stand out from every other form letter.

   We get a lot of email applications, so seeing someone toss in a little humor here and there is nice. It shows that the candidate is comfortable in both their technical skills and their writing. It also helps us get a feel for their personality, which is a big factor in our hiring process.

   ---

   From: Jonathan

   Subject: Nothing can beat a UI ninja. UI ninjas are masters of every style of design!

   To: jobs@zurb.com

   Very, very obscure Scrubs reference. If you got that, kudos!

   Top 3 Skills:

   • Renaissance Man I have experience in graphic arts, typography, programming, web design, print design, UI and human factors.  I also play a mean Rock Band guitar.
   • Obsessive Well within reason, I’m not crazy or anything – I just like a UI/Brochure/Website/etc to be as good as possible, and I’ve been known to go through as many iterations as I need to make that happen.  Time permitting, of course. I know the world is full of deadlines.
   • Nerd Okay, not a plus for everyone, but hear me out. I love the web and techy things and computers and what makes them tick.  I constantly look for new ways to do my work, new programs, new sites and new methodologies.  I won’t let my tools slow me down, and I can fix them when they break.  I’m not saying I can debug a crashing Dreamweaver, but only because I haven’t coded assembly in a few years.

   Portfolio is here <link removed>. Resume is here <link removed>.

   Thanks for your consideration, and I can’t wait to hear from you.

   – Jon

   Bryan Zmijewski, ZURB (creator of Notable App)

   When we hired Kejia (one of our concept developers), the job ad said “Must like hot pot.” And in his achievement section, he said he had “eaten hot pot to the point of exhaustion.” I liked that because it was a subtle touch. We met the other ideas developer (Utku) when playing “I’m in Like With You.”

   — Andy, Mint Digital

   Questions? Yes. About Benefits? No.

   You probably want to know about the perks. Everyone wants to ask about salary, benefits and extras, but this is a conversation for when you get the job (or when they bring it up, but still be careful!).  You’re supposed to be interested in working for them, not in what they can do for you.

   What makes us cringe? Preoccupation with our benefits package. ZURB treats the team very well, and we want potential candidates to understand that although we expect a high level of commitment and quality from our team members, we’ll do everything we can to make work (and life) a little easier. But we don’t want candidates who are more interested in house-cleaning than the many unique opportunities offered by working at ZURB.

   — Bryan Zmijewski, ZURB (creator of Notable App)

   Disclose Your Reason for Contacting

   Why do you want a job with that particular company? If the company is not advertising a job, you should probably let it know why you’re getting in touch.

   Be clear about why you are contacting us. What kind of job are you looking for? Why that kind of work? Are you looking for a job, for information, for a candid portfolio review? Some of the best letters we have received are from people who were smart enough to ask for a few portfolio comments or advice, even though we weren’t hiring.

   — Ash Arnett, PARTICULAR

   In an ideal world, the cover letter would act as a nice bridge from your book to ours. For example, I got a letter from a woman who had a book filled with skate and snowboard work, and she felt it would be a good fit for us. We agreed and interviewed her. I’ve also interviewed people who have a body of more traditional work and who are eager for a chance to work on cooler projects for brands they actually care about. Making the case for why you should work here, in particular, is the best way to make your cover letter work for you. And you don’t need to bust out any gimmicks or spend a lot of money on an elaborate presentation.

   — Rob Robinson, Mess Marketing

   Be Relevant

   

   So many cover letters address things that have nothing to do with the job or company. If you endear yourself to a company by being relevant, being qualified and having all the attributes they are looking for, you’re almost there!

   Bring in the Real World

   Every presentation could benefit from examples, and cover letters are no different. You need to give the employer concrete examples of what makes you hardworking, passionate and all those other things you told them.

   When writing a cover letter, bring up real-world examples of how you’ve done something positive in relation to the role you’re applying for. For example, if you’re applying for a marketing position at Marketcircle, and you used to do marketing for a restaurant, talk about how you were able to bring in more customers during non-busy nights, and how you were able to create promotions that increased the average dollar amount spent on each bill, etc. If you are applying for a job in your current industry, having relevant examples is even more important (e.g. “I was able to increase trial downloads by X amount” or “increase website traffic by X amount of visitors”).

   — Ryan Cash, Marketcircle

   Bring the Whole Package

   Some of us well rounded: we design, code, write and more.  Small companies look for that, so let your skill set shine.  Be careful though: if some of your skills are not as shiny as others, you don’t want to draw attention to them!

   Most of the resumes we receive include links to portfolio sites. And that’s where we usually start. We look for a good understanding of design basics: color choice, white space usage, proportion, contrast and typography. Next, we go back to the resume and review it for grammar. It’s important for us that our folks know how to communicate well in text as well as graphics.

   — Daimon Caulk, Modal Inc.

   Whether we’re hiring designer, programmers or project managers, we’re always looking for people who can do more than just their one role. Not that they have to be able to write Web copy, but they need to “get it.” So, someone who makes a cover letter really shine (mostly by what they say and how they say it) cuts through the clutter wall.

   — Bill Shander, Beehive Media

   Make Sure You’re Qualified

   Anyone who’s had to burrow in hundreds of cover letters gets annoyed when people apply for positions they are not even remotely qualified for. If you’re a Java developer and have never done any Ruby work, then don’t apply for a Ruby job.

   Of course, employers sometimes demand every skill imaginable, which no human possesses. Make sure you at least have most of qualities before applying.

   You’d like to think that we get the best of the best getting in touch. Truth be told, there’s a s***-load of people out there who seem tho think they’re amazing at what they do. Truth be told, they’re generally rubbish. I find it quite painful the number of people who class themselves as Web designers yet create sites that evoke the ’90s.

   — Andy Ashburner, Caffeinehit

   If someone has had seven jobs in seven years, there is a problem. If someone just graduated from design school and is applying for an Art Director position, it actually annoys us. Similarly, if someone is claiming to be the “perfect candidate” because they are “passionate about design” but somehow they forgot to go to design school, that’s also a problem. (Loads of experience and great portfolio would compensate for no design school. We have a world-class Director of UX who is completely self-taught, but that is sooooo rare!). If half your work is great, and half is terrible, we assume that you did the terrible half.

   — Scott Johnson, Rock Creek Strategic Marketing

   Be Creative

   

   Should you be showcasing your creative talents in your initial contact? That would seem to be a cautious move maybe. While you can grab their attention, not all attention is good. At the same time, you want to stand out. Typography is welcomed in some cases, while not in others, so proceed with creative cautiousness!

   Be Creative

   
   Creative coverletter example courtesy of Plank Media

   In a creative industry, a creative cover letter stands out. When you’re up against hundreds of other candidates, and if you have the guts to do it, go all out!

   If a really original and well designed cover letter came across my desk it would get my attention. There is only so much info that needs to be conveyed on cover letters so designers should always be mindful as to not to try to over design. We always keep an eye out for simple, tastefully designed solutions. Typography is probably your best weapon when it comes to cover letter layout and proper use of white space and balance.

   — Will Luper, New Medio

   As far as gimmicks and whatnot go, the same rules apply- please do a little homework and make sure it makes sense. Two years ago, I interviewed a designer who brought his resume and a few work samples in via this plywood sleeve. It was covered in street art and personalized with our logo. Kind of cool, and I appreciated the time and effort he put into it. (At the time, our website had more “street” feel that the piece kind of naturally complimented.  For whatever reason, it didn’t work out at the time, but hey.. it’s two years later and I still have resume in my office.

   — Rob Robinson, Mess Marketing

   

   … But Not Too Creative

   While everyone likes a creative soul, businesses are still businesses, so don’t go too crazy. Little touches impress just as much as grand gestures.

   In general, the really ‘creative’ applications seem to be from utter nutters.

   — Andy, Mint Digital

   There’s a fine line between showcasing your creative abilities and coming across like Elle Woods from Legally Blonde with a bright-pink perfume-sprayed resume.

   — Brian D. Aitken, Halo Media LLC

   Honestly, articulately talking about your own work and interests is a lot more impressive to us than jargon or a litany of credentials. In fact, a well written letter can be a lot more compelling than a resume. As far as format goes, I’ll just say: We love experimental typography; we don’t especially enjoy it in correspondence.
   Ash Arnett, PARTICULAR

   Traditional Cover Letters Don’t Work With All Companies

   

   Over half the companies I contacted said that traditional cover letters don’t have any impact on them. We’re in an age in which Googling reveals a lot about someone. Others say that they only work with people they know. There’s also that extra mile: as in the case involving 37signals, if you want them to impress them with a side project, design something to really impress them. Here are some thoughts on the death of the traditional cover letter.

   Get in Touch Another Way

   You may find getting introduced via social media is best. I have spoken to quite a few in the industry who were hired over Twitter, who met via LinkedIn and more.

   Often the relationship starts on Twitter or Facebook; ideas and conversation are exchanged. If there’s interest, we usually look at your blog, FriendFeed and Flickr accounts as well. We want to know how you think, how you express your ideas as much as we want to review your clever presentation or design portfolio. Designers should consider every tweet and blog post as a part of selling themselves and who they are. YouTube videos about why you want to work with us are a great way to make an introduction.

   A cover letter has never landed someone a job with us. I would say that a brief email with links to social accounts, blog and portfolio is the best way to go.

   — Ward Andrews, Drawbackwards

   End of the Cover Letter?

   As more and more people meet, are recruited, use social media and apply for jobs in different ways, the best jobs will be taken by those who can network and go the extra mile. Start networking, set up a Twitter account, do something new and impressive, and when you approach a big company, they’re more likely to notice you.

   Interestingly enough, most of the resumes we receive are via our contact form on the website, and most of them don’t come with cover letters. Recently, I called a designer back, and honestly I reached out to her because she graduated from VCU. I know the design program because I graduated from there. You know, for us, if you’ve got a good portfolio, you’ll get a call-back. Just don’t mess up that opportunity with a poorly written resume. Effective communication is the hallmark of a good designer.

   — Daimon Caulk, Modal Inc.

   In general, I think the era of the cover letter is gone. That puts it in the same dead category as the resume and traditional interview. At Fresh Tilled Soil, we are looking for something remarkable from a cold solicitation from a designer. What do we think is a remarkable way to get our attention? Here are some good examples:

   • Redesign a big name website as a way to show your skills to make improvements on an old idea.
   • Send us a quick version of what you think we could have done on a client project.
   • Redesign a single page from the FTS site to show why you think you could be valuable as an internal resource.

   Apart from that, we recommend that designers get their portfolios in order before contacting us. Nothing is worse than a designer asking for an interview but not having their portfolio ready.

   — Richard Banfield, Fresh Tilled Soil

   We don’t get cover letters. Sure, we get a lot of people looking to work for us, but in the interactive world we rarely see cover letters. In fact, we couldn’t care less about resumes, let alone whether a cover letter is attached.

   To us, it’s all about the work. What we want to see are killer portfolios, the apps you’ve built, the open-source projects you’ve contributed to, your design sense, your involvement in whatever dev community you belong, etc.

   — Chris Teso, The GOOD

   I’d say in a creative industry anyone who sends us a cover letter isn’t being creative, and I’d delete it. If you want to approach us or a potential employer that appreciates creativity and being different, I’d look for alternatives. Emailed cover letters are for uncreative scared people. I think a phone call is underrated.

   — Allan Branch, Less Everything

   You Might Need to Be Famous, or at Least Connected

   The best jobs are often gotten through recommendations, contacts and fame. Get involved in open-source projects, and go to nerdy meet-ups in your area.

   We often work with people we “know” through the Internet. I worked with Doug Bowman after admiring his work online. Same with Adam Greenfield and Brian Alvey. I started working with Jason Santa Maria after reading one of his blog posts. And Liz Danzico was a client.

   — Jeffery Zeldman, Happy Cog

   I’d say 95% of our hires have been us scouting people who we were familiar with and already respected. The other 5% were some random acts of magic. That said, all of the candidates who we get through email and even snail mail seem to come with no cover letter. Hmm… maybe that’s why we never hire them.  ;-)

   — Paul, Ratio Interactive, Inc.

   Get Your Foot in the Door

   Meeting and working with your dream company before it is able to hire you is a great way to prove yourself. If you’ve suggested a small addition to one of its project and have done a mock-up for them, suggest that you build it on a trial basis. But don’t be pushy. Proving that you’re keen and passionate about the company’s projects is a great way to get into further conversations about working with it.

   When I started A List Apart magazine in 1998, I was designer, editor, creative director, publisher, copyeditor and bottle washer. One day, a reader sent me an email politely pointing out a copy error in one of our articles.

   I fixed the error and thanked the reader.

   She followed up with another letter politely and deferentially pointing out two more errors in the magazine.

   I snapped, “Do you want to be my copyeditor? I can’t pay you.” (We had no advertisers at the time.)

   She readily agreed to copyedit the magazine for free.

   Within a few months, I told her she was too good to copyedit and ought to be the magazine’s actual editor.

   When she left ten years later, Erin Kissane had been A List Apart’s editor-in-chief for nearly a decade, and she had also served as content strategist for Happy Cog for over five years. She is a brilliant writer, editor and human being, and I am proud to be her friend.

   Pretty good story, right? So, those emails worked.

   They were simple and to the point. She wasn’t asking for a damn thing. She was just providing help. That’s the only time a letter has resulted in a hire at Happy Cog.

   Oh, and I should add, of course Erin didn’t work for free forever; we have advertisers through the Deck, and we pay our staff.

   (We also don’t hire speakers at An Event Apart on the basis of letters. We hire people whom we know are experts.)

   — Jeffery Zeldman, Happy Cog

   Use Common Sense

   

   At the end of the day, you have to look long and hard at your own efforts and craft a cover letter that would impress you if you had your own company. Doing it well will definitely increase your chances of getting an interview.

   Track Correspondence

   Even if you’ve applied to only five places, you’d be surprised how easy it is to forget what you’ve said to one of them. Keep a spreadsheet that tracks the following:

   • Company name and URL,
   • Name of contact and job title,
   • What the company does (a reference to one of its clients will jog your memory),
   • When you contacted them and what you wrote,
   • When and how it responded.

   Make sure to respond to every email in a timely manner, and take note of what the contact said. Keep the spreadsheet open on your computer (or, if you’re at another job, print out a copy) so that if they call, you can quickly scan your correspondence to recall exactly where you stand.

   Be Patient

   Waiting for a response can be tough, especially if you’ve crafted a beautiful, thoughtful cover letter. Some companies have an auto-responder for their jobs email address, but most do not. While you might be tempted to follow up with an email to confirm that they received your application, you should usually take their silence to mean rejection. If they don’t respond, don’t be disappointed: it just means it wasn’t the right job for you! Change your approach with the next application and try different techniques. Looking for a job is a full-time job, but if you work at it, you’ll find work.

   Resources

   • Forget the Resume, Kill on the Cover Letter
   • 7 Mistakes to Avoid on Your Next Job Application
   • How to Create a Great Web Design CV and Resume?
   • 10 Essential Tips for Landing Your Next Job

   Related Posts

   You may be interested in the following related posts:

   • How To Create A Great Web Design CV and Résumé?
   • Business Card Design: Better Than A Plain Ol’ Business Card
   • Invoice Like A Pro: Examples and Best Practices
   • The Art And Science Of The Email Signature

   (al)

   ---

   © Kat Neville for Smashing Magazine, 2010. | Permalink | 75 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | http://www.smashingmagazine.com/2010/03/25/what-makes-a-great-cover-letter-according-to-companies/“>Tweet it! | Submit to Reddit | Forum Smashing Magazine
   Post tags:
   
7. 

   Cameron Chapman says:

   April 1st, 2010 at 11:39 pm

   Many developers and designers want to release their work into the world as open-source projects. They want others to be able to build on and share their code. The open-source community is vibrant because of this. Open-source software is available for virtually any application you could think of. Most designers use open-source software or code on a regular basis (WordPress, Drupal and many other CMS’ are open source).

   

   But many developers and designers don’t have a clear picture of what the different open-source licenses really mean. What rights are they relinquishing when they choose an open-source license? Without knowing exactly what the licenses mean and how they’re best applied, developers can’t make informed decisions about which is best for their work.

   [By the way, did you know we have a brand new free Smashing Email Newsletter? Subscribe now and get fresh short tips and tricks on Tuesdays!]

   What Is Licensing?

   A lot of confusion is out there about what exactly licensing means. When you license your work, you’re not giving away any of your rights. You still hold the original copyright (or patent if you have one) on that work. What a license does is grant specific permissions for others to use that work.

   Licensing is a great alternative to just releasing your work into the public domain or granting permissions on a case-by-case basis. By releasing into the public domain, you relinquish any copyright, and no one is obligated to list you as the original author or contributor. In the latter case, you may end up spending more time dealing with individual permissions than designing or developing.

   Open-source licenses make it easy for others to contribute to a project without having to seek special permission. It also protects you as the original creator, making sure you at least get some credit for your contributions. It also helps to prevent others from claiming your work as their own.

   GNU General Public License

   The GNU General Public Licence (GPL) is probably one of the most commonly used licenses for open-source projects. The GPL grants and guarantees a wide range of rights to developers who work on open-source projects. Basically, it allows users to legally copy, distribute and modify software. This means you can:

   • Copy the software.
     Copy it onto your own servers, your client’s servers, your own computer, pretty much anywhere you want. There’s no limit to the number of copies you can make.
   • Distribute the software however you want.
     Provide a download link on your website. Put the software on a bunch of thumb drives and give them away. Print out the source code and throw it from the rooftops (please don’t, though, because that would waste a lot of paper and make a mess).
   • Charge a fee to distribute the software.
     If you want to charge someone to provide the software, set it up on their website or do anything else related to it, you can do so. But, you must give them a copy of the GNU GPL, which basically tells them that they could probably get the software elsewhere for free. Best to be up front about that, and about why you’re charging them.
   • Make whatever modifications to the software you want.
     If you want to add or remove functionality, go ahead. If you want to use a portion of the code in another project, you can. The only catch is that the other project must also be released under the GPL.

   Please note that it is very important to see source and binaries distribution as two very different things. Also, there are issues and restrictions with some licenses when used with applications released under “each other”. You can dive into more details in the detailed article Practical Guide to GPL Compliance (via @PierreJoye). To use the GPL, you have to include certain information in the software’s code, along with a copy of the license.

   GNU Lesser General Public License

   You should be aware of another GNU license: the Lesser General Public Licence (LGPL). It grants fewer rights to a work than the standard GPL. Generally, the LGPL is appropriate for libraries that want to allow linking from non-GPL and non-open-source software. Because the GPL requires that other software with parts of licensed code to also be licensed under the GPL, developers cannot use GPL-licensed code for paid and proprietary software. The LGPL negates this by not requiring other projects with parts of the code to be similarly licensed.

   BSD License

   BSD licenses represent a family of permissive free software licenses that have fewer restrictions on distribution compared to other free software licenses such as the GNU General Public License. Among different versions of the license two versons are particularly important: the New BSD License/Modified BSD License, and the Simplified BSD License/FreeBSD License. Both have been verified as GPL-compatible free software licenses, and have been accepted as open source licenses by the Open Source Initiative.

   The New BSD License (”3-clause license”) allows unlimited redistribution for any purpose as long as its copyright notices and the license’s disclaimers of warranty are maintained. The license also contains a clause restricting use of the names of contributors for endorsement of a derived work without specific permission. The primary difference between the New BSD License and the Simplified BSD license is that the latter omits the non-endorsement clause.

   MIT License

   The MIT License is the shortest and probably broadest of all the popular open-source licenses. Its terms are very loose and more permissive than most other licenses. The basic provision of the license (minus the information that it is provided without warranty, which comprises the final paragraph) is as follows:

   Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

   The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

   What this means is that:

   • You can use, copy and modify the software however you want. No one can prevent you from using it on any project, from copying it however many times you want and in whatever format you like, or from changing it however you want.
   • You can give the software away for free or sell it. You have no restrictions on how to distribute it.
   • The only restriction is that it be accompanied by the license agreement.

   The MIT License is the least restrictive license out there. It basically says that anyone can do whatever they want with the licensed material, as long as it’s accompanied by the license.

   Apache License

   The Apache License, Version 2.0, grants a number of rights to users. These rights can be applied to both copyrights and patents. Because some licenses can be applied only to copyrights and not patents, this flexibility would be an obvious factor in a patent developer’s choice of license (read this article on How Stuff Works for an explanation of the difference).

   Here are some more details on what the Apache License allows:

   • Rights are perpetual.
     Once they’ve been granted, you can continue to use them forever.
   • Rights are worldwide.
     If the rights are granted in one country, then they’re granted in all countries. For example, if you’re in the US and the original license was granted in India, you’re not prevented from using the code under the license.
   • Rights are granted for no fee or royalty.
     Not only will you not be charged any kind of up-front usage fee, but you will not be charged fees on a per-usage or any other basis either.
   • Rights are non-exclusive.
     You can use the licensed work, and so can anyone else.
   • Rights are irrevocable.
     No one can take these rights away once they’re granted. In other words, you don’t need to worry that down the road, when you’ve created some awesome derivative of the licensed code, someone will swoop in and say, “Sorry, you can’t use this code anymore.” (A clause in the license states that if you sue someone over patent infringement on anything under this license, then your license is terminated, but that only applies to patented work, and as long as you don’t sue anyone over the work, you won’t have to worry about it.)

   Redistributing code also has special requirements, mostly pertaining to giving proper credit to those who have worked on the code and to maintaining the same license.

   Creative Commons

   Creative Commons (CC) licenses aren’t quite open-source licenses, but they are commonly used for design projects. A wide variety of CC licenses is available, each granting certain rights. A CC license has four basic parts, which can be enacted individually or in combination. Here’s an overview of the parts:

   • Attribution
     The author must be attributed as the creator of the work. Beyond that, the work can be modified, distributed, copied and otherwise used.
   • Share Alike
     The work can be modified, distributed and so forth, but only under the same CC license.
   • Non-Commercial
     The work can be modified, distributed and so on, but not for commercial purposes. The language about what constitutes “commercial” is a bit vague (no express definition is provided), so you may want to clarify this in your own projects. For example, some might interpret “non-commercial” as simply meaning that you can’t sell the work. Others might take it to mean that you can’t even put the work on a website that has advertising. Still others might consider something is “commercial” only if it makes a profit.
   • No Derivative Works
     This means you can copy and distribute the licensed work, but you can’t modify it in any way or create work based on the original.

   As mentioned, these parts of the CC license terms can be combined. The most restrictive license would be the “Attribution, Non-Commercial, No Derivatives” license, which means that you can freely share the work, but not change it or charge for it, and you must attribute it to the creator. This is a good license to get your work out there but still maintain more or less complete control over how it is used. The least restrictive would be the “Attribution” license, which means that as long as people credit you, they can do whatever they like with the work.

   CC licenses are used more for design work than development, but nothing bars you from using it for the latter. Just be aware of exactly what is and is not covered under each part.

   Further Resources

   • Creative Commons Licenses
     The official page, with descriptions of the CC licenses and links to the legal copy of each.
   • Open Source Initiative
     A fantastic website that has information on the vast majority of open-source licenses.
   • Open Source Licenses Comparison
     A chart comparing major open-source licenses.
   • Understanding Open-Source Licensing
     A pretty thorough overview of what open-source licenses are and what they’re good for.
   • HOW TO: Pick an Open Source License
     An overview of what to consider when choosing an open-source license.

   (al)

   ---

   © Cameron Chapman for Smashing Magazine, 2010. | Permalink | 44 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | http://www.smashingmagazine.com/2010/03/24/a-short-guide-to-open-source-and-similar-licenses/“>Tweet it! | Submit to Reddit | Forum Smashing Magazine
   Post tags:
   
8. 

   Steven Bradley says:

   April 2nd, 2010 at 12:08 am

   You’ve likely heard the phrase “form follows function,” but have you really thought about what it means or what it implies about Web design? On the surface, “form follows function” seems to make a lot of sense. The way something looks should be determined by its purpose. Is this really true? Does the phrase hold up upon deeper inspection?

   In the context of designing a website, “form follows function” is often taken to mean that the designer should first gather the website’s requirements from the client and then determine the aesthetics of the website based on those “functional” requirements. While that’s certainly good practice, is “form follows function” really being applied? Are client requirements the “function” of a website or something else?

   As you read through this post, keep these questions in mind. Think of your own process for designing and developing websites, and consider whether and how “form follows function” applies to it.

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

   Historical Background

   While sometimes attributed to sculptor Horatio Greenough, the phrase “form follows function” was coined by American architect Louis Sullivan. In his 1896 article, “The Tall Office Building Artistically Considered,” Sullivan wrote:

   “It is the pervading law of all things organic and inorganic, of all things physical and metaphysical, of all things human and all things superhuman, of all true manifestations of the head, of the heart, of the soul, that the life is recognizable in its expression, that form ever follows function. This is the law.”

   At the time, technology, tastes and economics were rapidly changing. The forms of late-19th century buildings were still being worked out, based on innovation going all the way back to ancient Greek and Roman architecture. It was clear to Sullivan that a new form for buildings was needed, and he thought that form ought to come from the function of a building, not historical precedent.

   This new form became the modern structural steel skyscraper.

   

   Frank Lloyd Wright, who was then Sullivan’s assistant, adopted the phrase “form follows function” and further promoted it. The Guggenheim Museum is a good example of Wright’s application of the principle. It’s spiral shape was intended to allow visitors to easily view the artwork within.

   

   In 1908 Austrian architect, Adolf Loos proclaimed that architectural “ornament was a crime” (PDF). Modernist architects such as Le Corbusier, Walter Gropius and Mies van der Rohe adopted both “ornamentation is crime” and “form follows function” as moral principles and applied them to design.

   The two phrases do not mean the same thing though. “Form follows function” allows for ornamentation as long as it serves a function.

   Still, modernism in architecture emerged from both principles. Its goal was to determine the form of a building solely from functional requirements and not traditional aesthetics.

   Bauhaus Ideology and the Future of Web Design
   
   View more presentations by Simon Collison.

   Walter Gropius founded the Bauhaus, a school of thought and movement in art that espoused that an object’s design should be dominated by its function. The Bauhaus was in some ways a reaction against the emotional expressionism of the time, and its design aesthetic was based on simple forms, clean lines, rationality and, of course, functionality.

   Gropius’ goal was:

   “to create a new guild of craftsmen, without the class distinctions which raise an arrogant barrier between craftsman and artist.”

   The Bauhaus was eventually closed under pressure from the Nazi regime, which branded the school, and modernism in general, as un-German.

   Several members of the Bauhaus found their way to the United States. Mies van der Rohe migrated to Chicago after the school closed, bringing the ideas of the Bauhaus with him to the city that epitomized “form follows function.” Walter Gropius among others began teaching at the Harvard Graduate School of Design. Both influenced American architect Phillip Johnson.

   Johnson was a strong proponent of modern architecture and helped assemble the show “The International Style: Architecture Since 1922” at the Museum of Modern Art. The design principles identified by the International Style were:

   1. Expression of volume rather than mass,
   2. Balance rather than preconceived symmetry,
   3. Expulsion of applied ornament.

   Johnson’s work was often a balancing act between minimalism and pop art. He later introduced the work of both Mark Rothko and Andy Warhol to the Museum of Modern Art. Johnson belonged to the post-modernist movement in architecture, which was a reaction to Modernism and Functionalism.

   

   Johnson claimed that the profession of architecture has no functional responsibility whatsoever, saying:

   “Where form comes from I don’t know, but it has nothing at all to do with the functional or sociological aspects of our architecture.”

   Further Resources

   The following articles offer additional perspective on the history of the phrase “form follows function” and the Bauhaus.

   • Form Follows WHAT?
   • Form Follows Function (Wikipedia)
   • The Bauhaus
   • form follows function!

   Interpreting “Form Follows Function”

   There are two ways to interpret the phrase “form follows function”:

   • Descriptive: beauty results from purity of function;
   • Prescriptive: aesthetic considerations in design should be secondary to functional considerations.

   Descriptive Interpretation

   The descriptive interpretation favors simplicity to complexity. It states that beauty results from purity of function and not from ornamentation. This ideal derives from the belief that form follows function in nature. Is this really true?

   Actually, the opposite is true. Evolution passes on genetic traits to subsequent generations without any rationale for their purpose. Each generation of a species then finds a use for the form it has inherited. Function follows form in nature.

   Applying functional elements to a design is generally a more objective process than applying aesthetic elements. A functionally objective process results in designs that are timeless but may be perceived as simple and uninteresting.

   Prescriptive Interpretation

   The prescriptive interpretation prioritizes functionality over all other design considerations, including usability, ergonomics and aesthetics.

   Aesthetic considerations in design should be secondary to functional considerations. Is this interpretation problematic? Does it lead designers to ask the wrong questions about a given design?

   This interpretation would seem to lead to designers to ask what should be omitted from a design. What elements of a design do not serve a function and thus ought to be removed? Should the form of a design be determined solely by its function?

   Taken to the logical conclusion, every element would ultimately have the same design. Every functional item would have one and only one design. Before an object’s form could be changed, it would need to serve a different function.

   Better questions come from your criteria for success. What aspects of you design are critical to success? When time or resources is limited, what design trade-offs would least harm the design’s success? Sometimes, certain aesthetics will have to be abandoned, and sometimes certain functionality will have to be abandoned. Sometimes both aesthetics and functionality will need to be compromised.

   Further Resources

   The following articles argue that the form of a design should follow its function.

   • Function Is Dead, Long Live Function
   • Form Follows Function
   • Sometimes Form’s Gotta Follow Function
   • Form Follows Function (Digital Web Magazine)

   The articles below argue that “form follows function” is not an absolute rule.

   • Form, Function, Foolishness
   • Form Follows Function? Actually, No
   • Does Form Really Follow Function?
   • The Demise of “Form Follows Function” (New York Times)

   How To Design A Clock

   If we were to follow “form follows function” as a hard and fast rule, what would a clock look like. It’s function is to tell time and nothing else. A designer might conclude that the simplest, fastest and most accurate way to show time would be on a digital display. Digital clocks are not particularly beautiful, though.

   

   Analog displays are more aesthetically pleasing to most people. They aren’t quite as accurate, and people usually need an extra moment or two to tell the time, but they are generally nicer to look at.

   Which clock above is best? Would you feel the same about either clock below if its display was digital?

   

   Rather than use “form follows function” as an inflexible rule, a better route would be to design our clock based on success criteria. If speed and accuracy are most important to the clock’s success, then a digital display would be best. If aesthetics are more important, then an analog display would be the better choice.

   Success criteria, not function, should determine form.

   How do you determine your success criteria? Ultimately, you have to define them yourself or ask your client to define them for the given project. Either way, they would likely do the following:

   1. Identify everyone with a stake in the project,
   2. Determine the goals of each stakeholder,
   3. Prioritize and harmonize those goals,
   4. Decide how success will be measured.

   What will determine the success of our clock?

   Is the clock that sells best the most successful? What if fewer clocks sales could bring greater profit? Who is the market for our clock? Is being able to tell the time at a quick glance more important to our target buyers than making a statement on their living room wall? How much are they willing to spend on a clock?

   Looking within your own company, how will the clock affect your brand? Would you be proud to put your name on the clock? Are sales figures irrelevant because the clock will mainly serve to get people to buy your line of wrist watches.

   Will your clock be mass produced, or is this a one-time project, like some of the clocks in the images above? If it’s one of a kind, who is to benefit from it? The client who commissioned it or the audience that will view it?

   The answers to these and many more questions will be specific to the project. Ultimately, you have to determine the goals of your clock and how you will measure the success of those goals. What you come up with will lead you to your success criteria and design objectives. You could decide on an accurate digital clock for mass consumption or a work of art hanging in the terminal of a major railroad station.

   Perhaps your clock will need to be both beautiful and accurate.

   

   Beautiful Things Function Better

   People spend more time with products that they find beautiful, and they claim they are easier to use. The products seem to function better because they are beautiful.

   Human beings have an attractiveness bias; we perceive beautiful things as being better, regardless of whether they actually are better. All else being equal, we prefer beautiful things, and we believe beautiful things function better. As in nature, function can follow form.

   Most marketers knows that our purchasing decisions are based primarily on emotion. We use logic to rationalize those decisions. We are emotional beings. Aesthetics influence our opinions of products, and we typically find aesthetically pleasing products to be more effective simply by virtue of their aesthetic appeal.

   Steven P. Anderson speaks of the importance of aesthetics in design in his post on A List Apart, “In Defense of Eye Candy.” Drawing on an example in the book Emotional Design, he notes:

   “Researchers in Japan set up two ATMs, ‘identical in function, the number of buttons, and how they worked.’ The only difference was that one machine’s buttons and screens were arranged more attractively than the other. In both Japan and Israel (where this study was repeated) researchers observed that subjects encountered fewer difficulties with the more attractive machine. The attractive machine actually worked better.”

   Perhaps this can be explained by the “halo effect,” whereby we carry over previous judgements of certain products to future judgements of similar or related products. A beautiful product triggers positive emotions that inform your judgment of its usability. The product does not necessarily function better, but you perceive it as functioning better because of its looks.

   You can define aesthetics in many ways, but it comes down to connecting thought, emotion and beauty. How something looks affects us emotionally and influences what we think about it.

   If pure aesthetics influence our perception of a product’s functionality, if we’re willing to take an extra second to learn how to use things that we find beautiful, and if we think objects function better because they’re beautiful, then does form follow function or does function follow form?

   Further Resources

   The articles below deal more with the connection between aesthetics, emotion and usability.

   • The Impact of Aesthetics on Attitudes Towards Websites
   • Website Aesthetics: What Has It Got to Do With Usability?
   • Usability, Aesthetics, Emotions and the User Experience
   • Aesthetics and Usability

   Applying “Form Follows Function” to Web Design

   What’s the function of a website? Does a website have a single function? The function of a blog is to communicate information. It might also be a means to deliver advertising or to generate leads to sell a service. An e-commerce website also communicates information. It also exists to sell products.

   “Form follows function” might dictate that all e-commerce websites should look the same. But would you design a website for computer networking hardware and one for children’s toys to look exactly the same? Obviously not.

   At the start of this post, I described the well-known scenario in which you gather requirements from a client and then proceed to design the website. Are those requirements “functions”? Some no doubt are. How many pages will the website have? Will the content need to be updated often? Is a shopping cart needed? What are the goals of the website in the context of the overall goals of the business?

   If you’re asking merely for functional requirements, you aren’t asking the right questions. Better questions seek to define what success looks like for the website. Should the e-commerce website serve to generate leads to draw people into the physical store. Will all of those pages help drive sales, or are some plain fluff?

   Define your success criteria first. Think of our clock example. Will success come from function or aesthetics. What would make your website successful? What is most critical to achieve that success.

   The principle of “form follows function” assumes that objects exist because of their function. That’s simply not true. There could be any number of reasons why something exists, from chance to some broad aesthetic value and anything in between. An object can exist for reasons other than function.

   Mother Ann Lee (1736–1784), founder of the Shaker movement in America, proposed another idea. “Every force evolves a form.” Dynamic forces shape eventual forms. These forces could be functional or could be aesthetic, spiritual, communal or random.

   “Every force evolves a form” is a more useful guide for designers to follow:

   “Function alone does not drive form. Form evolves from the holistic forces of the project—audience needs, client desires, ethical obligations, aesthetic inclinations, material properties, cultural presuppositions, and yes, functional requirements.

   “For working designers, “every force evolves a form” is a more useful rule. The design process actually begins with something that doesn’t yet exist but needs to exist, and it moves forward toward a formal result. Function alone doesn’t drive the resultant form. The form evolves from the holistic forces of the project—audience needs, client desires, ethical obligations, aesthetic inclinations, material properties, cultural presuppositions, and yes, functional requirements. “Function” is rightly seen as a single, isolated, quantifiable aspect of the overall “force” driving the form.”

   Does all of the above mean that you should ignore “form follows function” completely? Not at all. Use the descriptive interpretation of “form follows function” as an aesthetic guide. Beauty often does come from function. A building should not look like a boat or a magazine. Each has a different function, and that function helps to define what makes it successful.

   Objects with different functions should look different aesthetically.

   However, don’t apply the prescriptive interpretation of “form follows function” as a design rule. Pure function may not be the most important factor of success. Focus on the relative importance of both form and function as based on your criteria for success when making design decisions. Balance form and function as needed, while letting success criteria guide your decisions.

   Further Resources

   The articles below take a balanced approach to “form follows function.” They regard form and function as working together, with both following the design’s objectives.

   • “Form Follows Function” Revisited
   • Form vs. Function: Finding the Balance
   • Communicate Function with Form
   • Website Layout Design and Function
   • Web Design: Form Follows Function
   • What Came First, Form or Function?
   • Form and Function in Design and Publishing (About.com)

   Examples

   Google

   Google’s home page is little more than a search box. Over time, links have been added, but the page has clearly been designed around its primary function, which is search. The sparse design is likely a key factor in Google’s early success. Other search engines at the time did not have pages that communicated a single clear function.

   

   Function, no doubt, guided Google’s success criteria. The only thing the company wanted a visitor to do upon reaching the home page was to type a query in the box and click the “Search” button.

   Craigslist

   Craigslist is perhaps the poster child for subordinating form to function. Many think the website could use a redesign, but the Craigslist faithful see no reason to change. The website’s design, while not aesthetically pleasing, is functional.

   

   As with Google, Craigslist’s success was based on functional considerations. Beautiful it is not, but the website does work. It doesn’t take long for anyone who stumbles on the website to learn how to use it. Would aesthetic considerations have made the website easier to use and made Craigslist even more successful?

   Tweetie

   The Twitter application Tweetie lacks some features that other desktop and smart-phone Twitter apps include. Tweetie users claim not to care. The program has earned its loyal audience through its beautiful design. It does what it needs to do, and some functionality has been deliberately left out to stay true to the design objectives.

   

   One of the early goals of Tweetie was to embrace the iPhone interface. It was built for people who already use Apple products and who appreciate aesthetics for the sake of aesthetics. Form in and of itself was an important success criterion.

   USB Necklace

   Most USB drives are essentially the same. Their functionality differs little from one drive to the next. Some hold more data, some transfer data faster, some include encryption and some are more rugged.

   

   If you were to buy either of the USB necklaces above, would it be because of the specs? Or because of the function of the drive itself? It’s doubtful. You would likely have purchased it based on looks and your emotional response to it. You might glance at the specs to make sure the drive meets your minimum needs, but you would be using the specs to justify your emotional response to the aesthetics.

   Summary

   Does form follow function? Function certainly influences form in many designs, but does it have to? This post should have enough examples to show that function sometimes follows form.

   “Form follows function” works well as an aesthetic guide. Many designers, me included, believe that beauty arises from functional considerations. Functionality is important to design, but it isn’t the only thing that should be considered.

   Both function and form can guide design. More often, both follow something else. Ultimately, you need to define your criteria for success, from which the design will evolve.

   Success criteria helps you determine the functionality needed in your website and the form it should take.

   (al)

   ---

   © Steven Bradley for Smashing Magazine, 2010. | Permalink | 63 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | http://www.smashingmagazine.com/2010/03/23/does-form-follow-function/“>Tweet it! | Submit to Reddit | Forum Smashing Magazine
   Post tags:
   
9. 

   Smashing Editorial says:

   April 2nd, 2010 at 12:25 am

   help us by buying our new eBook “Professional Web Design”. follow us on Twitter!] So what seems to be the problem? We must admit that the situation is quite complicated right now. We have recently moved to an office and we hired more people, and we invested more money and other resources into more profound, in-depth articles written by professionals and high-profile designers and developers. Last year we have invested a lot in the Smashing Book and although the revenue was OK, the costs were huge and we had way too many unexpected costs and problems along the way. Finally, in February our traffic, server and external freelancing costs increased, together with many other things. In the end, we are now experiencing a bit difficult situation as our hands are tied and there is not much we can do: we can either reduce the costs by removing some features or posting less frequently (which we don’t want to do), or revising our financial situation and building up new revenue streams (which is what we decided to do and what we did). A couple of hours ago we made a quite bold move. We redirected all Smashing Magazine’s pages to one single page, the one asking for your financial support by purchasing our brand new eBook. We asked for your help. The interest of our loyal and supportive readership was huge, and we received many negative comments of people blaming us for being greedy, earning too much money anyway and having no conscience. It really hurts to hear this. Right now we are in the situation where we need some time to get the new projects running; yet we still have the high costs and advance payments. Which is why we decided to make this bold move. We didn’t mean to offend someone or look greedy, it’s more about us hoping that the community could help Smashing Media stabilize its financial situation and keeping it profitable in the months to come. The site is available now. We hope that the community will appreciate our efforts and support us in one way or another. We can’t exist without you, and we are aware of that. But sometimes some things need to be done. Today is one of those days. Thank you. About the Book This e-book contains a selection of the best articles about professional Web design that have been published on Smashing Magazine in 2009 and 2010. The articles have been carefully edited and prepared for the PDF version; some screenshots and links were removed to make the book easier to read and print out. Free book sample (pdf). This book presents guidelines for professional Web development, including communicating with clients, creating a road map to a successful portfolio, rules for professional networking and tips on designing user interfaces for business Web applications. The book shares expert advice, and it also helps you learn how to respond effectively to design criticism, use storytelling for a better user experience and apply color theory to your professional designs. Buy now and download PDF right away! our online store. Table of Contents On 242 pages you will read: Harsh Truths About Corporate Websites (Paul Boag) Portfolio Design Study: Design Patterns and Current Practices (Vitaly Friedman) Creating A Successful Online Portfolio (Sean Hodge) Better User Experience With Storytelling (Francisco Inchauste) Designing User Interfaces For Business Web Applications (Janko Jovanovic) Progressive Enhancement And Standards Do Not Limit Web Design (new article by Christian Heilmann) Color Theory for Professional Designers (Cameron Chapman) Is John The Client Dense or Are You Failing Him? (Paul Boag) How To Identify and Deal With Different Types Of Clients (Robert Bowen) How To Respond Effectively To Design Criticism (Andrew Follett) Web Designer’s Guide to Professional Networking (new article by Steven Snell) Group Interview: Expert Advice For Students and Young Web Designers (Steven Snell) spread the word on Twitter and share on Facebook. We appreciate your support! © Smashing Editorial for Smashing Magazine, 2010. | Permalink | 441 comments | Needs Could Use Your Help Today”>Add to del.icio.us | Stumble on StumbleUpon! | http://www.smashingmagazine.com/2010/03/22/smashing-magazine-needs-your-help/“>Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: Juliya Izgiyeva says: April 2nd, 2010 at 1:05 am Today we’d like to publish something completely different for a change. India, the country of mysterious paradoxes; the land where civilizations and times intermix, a mysterious place which attracts people from all over the world. In today’s showcase we are presenting a little showcase of this astonishing contrast between wealth and misery, contemporary technologies and ancient historical monuments, plenty of languages, cultures and traditions. We present people, places, traditions, culture and a broad overview of the incredible beauty of India — something different and inspirational for a change. Please let us know if you are interested in seeing more similar posts on Smashing Magazine in the future in the comments below. [Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter!] The Beauty of India Heart You Feet. Jaipur catching up! Diwali lights Aishwarya Rai in the making Golden Temple before Sunrise A Dreamer Among the Humblest 10 Interesting Places to Visit Before You Die Smiling.Pali A glance inside, a glimpse outside Dark eyes. Pushkar Prayer at the Temple Taj Mahal, the other side. Agra colors-of-india Sweeping. Varanasi India. A table Colorful Masks Bananiers en paix back to India Silent Prayer / Amritsar, India Little Red Riding Hood Golden Slumbers india – gujarat colors-of-india sri meenakshi sundareswara temple colors-of-india India style buddha from bodhgaya colors-of-india India India Wedding Tata Ace – The True India Truck! india l’homme de mehrangarh India damsel at Pushkar India- Faces Mosque (Agra India) Temple Lal baba Colors India Would you like to see more similar posts on Smashing Magazine? © Juliya Izgiyeva for Smashing Magazine, 2010. | Permalink | 380 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | http://www.smashingmagazine.com/2010/03/20/the-beauty-of-india-50-amazing-photos/“>Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: Leave a Reply