Those differences determine how that city sees its citizens and how it wants to represent itself to others.

For each city with one, the metro plays a part in defining those differences. The metro maps in this post show the skeletons of these cities. Each map explores the paths taken by the residents of that city.

The design and style of the maps appears reflective of the particular place. They may be seen as not only maps, but individual expressions of a local identity.

Here’s a great compilation of metro maps from around the world…

Amsterdam, Netherlands

Athens, Greece

Atlanta, United States

Barcelona, Spain

Baltimore, United States

Bangkok, Thailand

Beijing, China

Berlin, Germany

Boston, United States

Brasilia, Brazil

Brussels, Belgium

Bucharest, Romania

Buenos Aries, Argentina

Bursa, Turkey

Busan, South Korea

Caracas, Venezuela

Chicago, United States

Cleveland, United States

Copenhagen, Denmark

Deagu, South Korea

Delhi, India

Dubai, United Arab Emirates

Glasgow, Scotland

Helsinki, Finland

Istanbul, Turkey

Kiev, Ukraine

Kobe, Japan

Kyoto, Japan

Lausanne, Switzerland

Lima, Peru

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: Z2Dn3e

The possibility that such discussions are going to improve the design community is quite troubling.

In the interests of taking advantage of this recent trend (namely, writing about “killing the community”), I felt it would be necessary to address this issue by describing some easy-to-learn and practical tips that will help all of us do our part in killing the community.

Rules for Commenting on Blogs

Design blogging and commenting are inseparable. You cannot have any kind of blog without allowing a free flow of discussion and spam on each published article or tutorial.

That said, I have a number of very important suggestions for posting comments on various sites.

Don’t Use Your Real Name

Although comments are posted by human beings, there is no need to reaffirm such an obvious fact. Therefore, take advantage of the opportunity to promote your services by using a name that tells people exactly what you do, instead of who you actually are.

For example, if you are a web designer who lives in, oh I don’t know, maybe the Gold Coast, you could use the name “Gold Coast Web Designer”, instead of something overly-personal like “John Williams”, as shown in the example below.

It’s actually very helpful to receive comments from persons with such names because as soon as I see someone named “Gold Coast Web Designer”, I realize that if I’m ever in the Gold Coast area, I’ll know who to call for web design services. So, the benefits are twofold: You promote your services; and everyone who reads the article will have a web design contact in the Gold Coast area.

Of course, maybe you want to be an honest member of the community, and it would bother you to use a fake name. Well, in that case, all you have to do is legally change your name to whatever you need it to be. For example, take a look at the image shown below from the comments on a post from Webdesigner Depot:

In order to cleanse their consciences of dishonest practices, the commenters shown above have probably legally changed their names to those you see listed. This has brought them immeasurable benefits: Increased visibility, quality click-throughs (there are so many people in the web design community who want to learn to “jump higher”), and an exponential increase in sales. Those benefits can be yours if you do the same.

Don’t Let rel=“nofollow” Stop You

Don’t worry about the fact that 99% of blogs use the nofollow value for the rel attribute. That doesn’t matter. What’s important is that you inform everyone that you are a Gold Coast web designer (or an Indian Joomla developer, or a guy who teaches people to jump higher, etc). So don’t use your real name — that would unnecessarily expose personal information that is nobody’s business but yours.

Tell Them They’re Wrong, But Don’t Tell Them Why

Time is a valuable commodity. You’re a busy Gold Coast web designer responding to all the RFQs you’ve garnered through the comments you’ve posted. You can’t kill valuable time explaining to some dumb blogger why his article sucked, or why his design is terrible. You just want to tell them that they suck, to get your opinion noted (like a vote, Yay or Nay). Don’t explain why, and don’t listen to the whiny bloggers that ask for reasons.

This concept of not providing reasons for your opinion will be discussed further in another section, but for now understand that it’s best that you don’t provide any sort of depth to your stance on the topic under consideration.

Use Your Photo to Attract Attention

Your fake name is not the only way to get you noticed in blog comments. Your photo plays a large role in this area, and you should make effective use of this opportunity.

Let’s be honest, here. Babies are cute. Everyone loves them. They’re adorable, the way they drool, the way they smile, the way they talk, the way they walk — it’s all good. Take advantage of people’s love for babies by using a cute baby photo as your personal avatar. Often, the only comments I ever read are the ones posted by cute babies, because I just can’t resist!

Babies, however, aren’t the only way to draw attention to your comments. Since the majority of web design and development professionals are male, use this to your advantage by using a picture of a pretty girl as your avatar photo — even if you’re not a pretty girl. Heck, even if you’re not a girl!

Jane, Latia, Jaisa (and many more) ***LOVE WEB DESIGN***! If you love web design, you’ll want to show it too. Don’t be shy about your feelings towards your work. And don’t worry, no one will know that the pictures and names are fake. They’ll draw everyone’s attention and before you know it, your website will be inundated with quality click-throughs.

The company that’s been posting comments using the photos and taglines shown in the images above is obviously a group of marketing geniuses that knows what it takes to earn respect in the web design community. You should learn from their example and disregard the so-called integrity keepers.

The First Comment is Crucial

If you’re the first person to post a comment on a high-traffic blog, there is a requirement for the content of the first post: Your comment must consist of the following 7 characters in the exact order shown:

f – i – r – s – t – ! – !

You cannot omit the trailing exclamation points. It is imperative that you inform all subsequent commenters that you were the first one to post a comment on that article (hence, why you say “first!!”). The “first” commenter in the example below almost got it right, but he failed to include the exclamation points immediately after the word “first”:

Readers will not know that you were the first one to comment unless you specifically say so. Someone who posted the 5th or 12th comment might presumptuously use the phrase “first!!”, thus giving everyone the false impression that they were the first (who can be bothered to count to one?). So make sure everyone knows that you were first by stating it clearly and confidently.

Do Everything Possible to Get the First Comment

Of course, being the first commenter on a high-traffic blog is not an easy feat to accomplish. You’ll need to subscribe to all the popular blogs and stake them out early in the day. Don’t wait for email notifications that announce new blog posts; visit their home page and hit the refresh/reload button regularly (preferably once per minute or more).

You need to develop the Wal-Mart shopper mentality and get ahead at all costs. Therefore, don’t read the article. Just say “first!!” and follow with something that makes it sound like you’ve read the article. For example, you could say “nice post, thx”, or maybe “this is a nice” and then just repeat the title of the article (”This is a nice 20 jQuery tutorials” or “This is a nice 30 portfolio designs”).

The key is not to spend too much time formulating what you have to say; the important thing is that you get the first comment, and thus gain some quality visibility. Before you know it, your business will be booming and you’ll be turning away clients left and right.

Your Brand is More Important Than Anything Else

What does all of the above mean? It means that your branding should be put before all else.

The community must be sacrificed so that you can gain traffic and visibility. How do you think all the big design blogs, css galleries, and agencies got people to visit their websites? You guessed it: Baby pictures, photos of hotties, and fake names at the top of the comments list. Those are the principles on which all top blogs and agencies built their businesses, so its crucial that you follow their example.

Save, Tweet, Share — But Don’t Read!

Remember in the previous section when I told you to avoid reading an article so you can be the first one to comment? The truth is, you shouldn’t read anything. Ever. You should judge a post by its title, bookmark it in your browser, add it to your Delicious account, and save it with all your research tools.

After you’ve saved it for your own personal use, don’t be selfish — using all your social networking and microblogging tools, share what you never intend to read. Tweet it, and Facebook it. But don’t stop there. Go nuts.

Naturally, since you will be tweeting without reading, you will have no idea whether or not an article is of quality authorship, or if it promotes best practices, or if it’s something that has been repeated ad nauseam. That doesn’t matter. Don’t read any content; just share like your plane’s going down. Read the title, forward it, and move on to more important things (like posting the first comment on top blog articles).

“Design News” Feeds FTW!

One of the best ways to ensure that you’re reading as many headlines and as little content as possible is to subscribe to as many tutorials and news feeds as you can find. Your RSS reader should be 90% design news feeds (the other 10%, of course, are popular blogs that you stake out so you can be the “first!!” to comment).

Keep Your Content Trendy and Shallow

Many times in life you’ll be required to explain, research, ruminate, think, consider, analyze, contemplate, compare, and do a whole lot of other stuff that requires use of your brain. That’s what court cases are for! Your design blog doesn’t need that kind of so-called depth.

Nobody wants to hear why you thought it was good to make your sidebar 160px wide instead of 150px wide, and how that affected your site’s grid, and how the typography would then need to be adjusted and blah blah blah. Do I really need to know that the Gestalt principles of perception help take the guesswork out of design?

A List a Day Keeps the Web Analyst Away

Seriously, just give us the goods. Tell us your 35 favourite CSS techniques, or introduce us to 20 new JavaScript libraries, or show us 45 beautiful footers. And don’t ramble on explaining why each footer is intricately designed, babbling on about color theory, and use of whitespace. Just show us the pictures.

Compare the beautiful, graphic-filled article above with the boring one shown below.

Jason Santa Who?

Safe Content is Best

There is a fine line between sounding like you have something valuable to say, and actually saying something valuable. The problem with saying what is normally viewed as “valuable” is that many people will disagree and will express this in the comments (unless they are the “first!!” to comment).

The best way to avoid ruffling any feathers is to create safe, easy content that appears to make many profound statements without actually saying much of anything. To illustrate the difference, here are some examples of safe and unsafe statements you might include in one of your articles:

Examples of Unsafe Content:

• “Client-side scripting can be a helpful way to enhance fully accessible content, but should be used with care so as not to harm the user experience.” (way too complex!)
• “Logo design should be based on careful analysis of marketing goals, company image, and industry trends.” (are you kidding me?)

Examples of Safe Content:

• “JavaScript is a very important part of modern web design.” (wonderful!)
• “Your logo will pop if it has a cool design.” (nice!)

You’ll notice that the first two statements (the “unsafe” content) are full of depth and opinion, and will inevitably lead to long comment discussions where you’ll have to explain yourself, justify your reasons, and clarify your points all over again. That’s not what you want.

The next two statements (the “safe” content) are perfect. They are 100% true. No one in their right mind would disagree with either of those statements. The only thing they can say is “great post, so true!” (or similar). You’ll get about 75 of those comments in a matter of minutes, allowing dozens of Indian Joomla web developers to advertise their services. Thus, everybody wins (well, except the community).

Don’t Tell Us Why It’s Blue, Just Tell Us It’s Blue

Don’t give reasons for your decisions on design, and why you’re listing a particular example of beautiful web design. If you do that, then you’ll have to discuss your reasons with the people in the comments who oppose your “unsafe” view. If it’s glossy and has drop shadows, just say so; don’t explain why those features were necessary.

In fact, it’s probably best if you have no reasons for your design decisions, in which case you will never be tempted to explain why you designed something a certain way — because you won’t know! If anyone asks you why you decided to go with a particular color, you can just say “I don’t know!” and really mean it.

Everything You Need is Online

The only research you should ever do is online. There is no point in wasting time and money on books, magazines, or other non-internet sources. Everything in books is available on the internet — for free! (You don’t pay for internet access, do you?) Books, on the other hand, cost money. That money will subsequently go towards supporting a supposedly intelligent, educated, and experienced designer. That would mean less money for you, which is a bad thing.

Don’t Be Inspired by Anything Offline

All the inspiration you need can be found online. You are a web designer; you cannot be inspired by anything other than web design.

For example, you might want to create a pretty navigation bar. In order to do so, you need to look at other pretty navigation bars. It’s logical. How could a beautiful tree or flower inspire you to create a beautiful navigation bar? A tree or flower is nothing like a beautiful navigation bar. A navigation bar is the only thing that is like a navigation bar, therefore in order to be inspired to create a beautiful navigation bar, you must look at other navigation bars. I cannot emphasize this enough.

I know this is beautiful, but it should not inspire you.

Some people feel they need to enjoy the outdoors, breathe some fresh air, look at a sunset, or take a walk in a beautiful park or valley. They claim this “inspires” them. How ridiculous.

We are web designers, not tree designers or flower designers. Besides, you’re on the internet, so there is no need to take a walk in the park. You can look at parks and valleys and forests and trees from the comfort of your computer (or your handheld device, if you are forced to go to the bathroom or something).

What About Other Creative Sources?

Just because there are creative people involved with television, music, movies, theatre, culinary arts, and dance, does not mean that you can learn how to improve your own creativity from those professionals.

Steven Spielberg is a creative and accomplished film director and screenwriter, but you are a web designer so you cannot learn anything from him.

You are a web designer. You’re not a television writer, movie producer, playwright, chef, or ballet performer. Stick to what you know, and stay in your comfort zone. Those other so-called creative industries will only cloud your vision.

Conclusion

I was so disturbed when I began to read on different design blogs that the community needs to improve and that we need more in-depth discussions. But don’t worry, this “don’t kill the community” attitude is just a passing trend that will be gone soon.

The shallow, immature, anonymous, low-quality discussions that take place on internet giants like Digg and YouTube have worked wonders for them. Why can’t the same formula work for us?

I hope this article has provided plenty of useful tips that will help all of us to prevent the community from moving forward and being saved.

Please do your best to put these suggestions into practice, otherwise we’ll end up with a million design blogs that feature analytical articles full of text and informed opinions that elicit quality discussions promoting good practices and healthy exchanges of new ideas. Is that really what we want?

This post was written exclusively for Webdesigner Depot by Louis Lazaris, a freelance writer and web developer. Louis runs Impressive Webs where he posts articles and tutorials on web design. You can follow Louis on Twitter or get in touch with him through his website.

Disclaimer: The opinions posted in this article are the author’s and they may not necessarily reflect WDD’s views on these matters.

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: Z2Dn3e

With nearly 50 million iPhones sold to date, there are hundreds, perhaps even thousands, of iPhone cases that have been created.

In this article, we have compiled some of the most creative ones, but also a few of the wackiest and most unusal iPhone cases that we have ever seen.

What do you think of these designs? Please leave links to other interesting iPhone cases which you may have seen, in the comments are below.

Bacon

Bacon and Egg

Camera

Recession Cardboard iPhone Case

Cassette

Chocolate

Demon

DIY Denim Case

$20,000 Diamond iPhone Case

Domo

Factron iPhone Case and Fisheye Lens

Flower

Frank Miller’s Sin City & 300 iPhone Cases

Full Metal Case

Bender from Futurama

Game Boy

“Golden Delicious” – $Over 100k

Hoodie

iBike Rider

iKnit

Lady Vampire

Superbad’s McLovin

University of Michigan

Monstrously Cute

Nintendo Entertainment System Control Pad

Match Your iPhone Case to Your Nike Air Max

Cute Panda

PlayStation

Pocky

PopTart

R2-D2

SPAM

Star Trek

Star Wars

Sushi Bento Box

Telephone

Tire Tread Pattern

VHS

Waterproof Case

Xbox 360

Compiled exclusively for WDD by Zoe Ajiboye.

What do you think of these designs? Do you use a special case of your iPhone? Please share your views below…

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: Z2Dn3e

Advances in their design have occurred in tandem with the advances in technology in this digital era, with many large products being redesigned and miniaturized into amazingly small sizes.

While we may laugh at the fact that anyone ever found this technology to be cutting-edge, we can’t discount its place in history as a forerunner for all of the technology that wouldn’t exist today without its dinosaur ancestry.

Here is a quick look through history at vintage technologies that we no longer use.

1. “Super 8/8mm” Handheld Video Cameras

Kodak invented the Super 8/8mm video format in 1965. Soon after, handheld video cameras flooded the market and the living rooms of people everywhere were filled with families watching the hi-jinks at Freddie’s sixth birthday party.

2. Betamax

Betamax was developed by Sony in 1975, a year before the ultimately more popular VHS format was invented as a response to Sony’s attempt to control the format of the industry.

3. VHS Format

Invented by JVC, VHS was the predominant video format by the 1980’s, despite what some argued was the technical superiority of the Betamax format.

4. Laser Disc Players

Initially marketed as “Discovision”, laser discs were the format choice of tech enthusiasts who had the money to put together a collection until the DVD format came out.

5. Phonograph

The phonograph, or gramophone, was invented by Thomas Edison in 1877 and was on the mass market by the turn of the century. The gramophone was replaced by the considerably less bulky record player in the latter half of the twentieth century.

6. Turntables

Record players are still in use in DJ booths, recording studios, and radio stations all over the world.

7. HAM Radio

An estimated six million people are still involved with this hobby that began at the start of the 20th century. HAM radio operators communicate with each other over short wave radio. HAM radios have been featured in many popular movies, including The Shining and Contact.

8. Reel to Reel

The first tape recorders were reel to reel and were the preferred technology for professional sound designers until digital formats rendered them obsolete.

9. Cassette Tape Recorders

These devices were considerably less bulky then their reel to reel ancestors, and were used mostly for transcription.

10. Transistor Radios

Transistor radios typically only picked up on the AM band and were a ubiquitous sight in schools and businesses in the seventies.

11. Cassette Tapes

The compact cassette was originally developed for transcription purposes, and its users quickly realized that they could use it to record music and make “mixed tapes”.

12. Boom Boxes

Associated with hip hop, break-dancing, and other aspects of eighties culture, the boom box was introduced in the late 1970’s as portable, all-in-one music devices. Earlier models took huge quantities of batteries and were very heavy.

13. Telegraph

The telegraph was the precursor to telex and fax machines. Used by shipping operators and for military uses, the telegraph required a skilled operator to transmit and receive messages.

14. Telex Machines

These machines used radio and/or microwaves to transmit information over the airwaves. Variations of them are still in use today for communications by the hearing impaired.

15. Wang Calculators

No, we didn’t pick that just for the headline. In the seventies, Wang manufactured mini-computers that were a cut above your standard accounting computer, with exciting features like a FORTRAN IV compiler.

16. Analog Telephones

While exactly who invented the phone is a topic of debate, the first patent was awarded to Alexander Graham Bell in 1876. They have evolved from rotary dial models to smart phones that we can use today to surf the internet.

17. PDA’s

Considered one of the biggest tech flops of all time, the Apple Newton was sold at a huge price point compared to other Personal Digital Assistants (PDA) that were on the market. Personal digital assistants were electronic timekeepers for the times when you couldn’t fit a computer in your pocket. The Newton’s development laid the groundwork for Apple’s hugely successful iPod and iPhone. Who’s laughing now?

18. Portable Televisions

Portable televisions, such as Sony’s Watchman, were an idea that came a little before the ability of the media to catch up to it. With a limited selection of channels, they never really caught on.

19. Walkman

The Walkman was invented for the co-chairman of Sony, Akio Morita, who wanted to be able to listen to his favorite operas on plane trips. It was initially marketed as the Soundabout in North America, but the “Walkman” name was used for the product up until the present day.

20. Discman

Two years after the mass production of the Compact Disc, Sony released its portable player for it. While they were popular with audiophiles, who appreciated the quality of recording, earlier Discmans would skip and didn’t allow for the popular “mix tapes” until it became possible for computers to “burn” CD’s.

21. Pagers

Pagers were commonly used from the seventies to the nineties, when widespread adoption of cell phones rendered them obsolete for mass market use. They are still used by emergency responders as they are not subject to network outages or similar disruptions in communication.

22. LED Watch

The watch pictured is the Pulsar, the first LED watch. The watch’s designer was inspired by the film 2001: A Space Odyssey, having worked on the timepiece props for the movie.

23. TV Watch

While the concept of this watch was attractive, it faced the same lack of channel availability issues as the Watchman.

24. Seiko Wrist Computer

The smartphone of 1984: this took the idea of the “computer watch” to a whole new level. Think this is too much? Consider the nuclear watch, whose invention was rumoured in this Time magazine article. Be very glad that never happened.

25. Calculator Watches

The eighties saw watches infused with more gizmos than ever before. The most ubiquitous watch in geek culture was the calculator watch. Since most of us now have computers attached to our hips, it is no longer necessary. Unless you’re Dwight Schrute.

26. CRT Monitor

Just when you thought you were done with vacuum tubes in your computers, they put them in your monitors in the form of cathode ray tubes (CRT).

27. Massive Mainframes

While mainframes still exist, they generally don’t take up entire rooms or store information on magnetic tape.

28. Typewriters

While some writers still swear by them, most writers remember when they swore at them and have happily moved on.

29. Dial-Up Modems

The dial-up modem was used everywhere until cable internet and DSL became available to the masses. While they are still in widespread use, everyone who has one wants to upgrade.

30. Zip Drive

This short-lived technology was the bridge between 3.5″ Floppy Disc and CD storage.

31. Slide Projectors

These were classroom and office standbys for years, and were replaced by digital projectors and smartboards.

32. 8″ Floppy Disc

If you wanted to save one or two word processing documents, you could do it on these. Their smaller relatives are still in widespread use.

33. 3.5″ Floppy Disc

The 3.5″ Floppy took over from its bulkier cousin with larger storage and a less destructible design. It had largely been replaced by the late nineties by CD’s, DVD’s, USB drives and other more convenient computer storage methods.

34. Polaroid Cameras

While these cameras were largely replaced by digital cameras, the trademark has recently been purchased and the buyers are trying to breathe new life into the brand by hiring Lady Gaga as a spokesperson.

35. Home Movie Projectors

Super 8 home movies and educational films were shown on these simple projectors. While they are still used in some schools, they have been largely replaced by digital projectors and the fact that you can now burn most home movies to a DVD.

36. Vinyl Records

Vinyl was the dominant music format for the 20th Century. From your grandmother’s old 78’s to the single 45 format, vinyl was perfected over the years to be as acoustically correct and cheap to press as possible. While they are still in use by DJ’s and radio stations, records have for the most part been relegated to the garage sale heap.

37. CRT Television

The first widespread use of television was in Germany beginning in 1929, and the German Olympic Games of 1936 were the first to be broadcast on television. Televisions remained out of the reach of the middle class until the 1950’s, when their ownership boomed globally and television shows became more popular. Cathode ray tubes gave way to the technologies that we use for television now, making sets less bulky and furniture-like.

38. Tape Drives

Remember when backing up the computer meant changing the tape in the tape drive and letting it back up overnight? We’re so glad those days are gone too. The clunky old tape drives of the past didn’t store a lot of data and it would often take multiple tapes to back up important data. Old-school programmers started out as “tape-apes” doing backups as junior programmers.

39. 8 Track

Stereo 8 was more commonly known as the eight track tape. It was the portable format of choice for a brief period in the 70’s before cassette tapes took over.

Disclaimer: This is not a complete list. Among others, we have purposely omitted featuring vintage computers, game consoles and others as some of these would merit their own post and we may cover them in future posts.

Compiled exclusively for WDD by Angela West.

Have we missed your favorite piece of vintage technology? Feel free to post it in the comments section below.

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: Z2Dn3e

Getting rid of paper, digitizing your business cards, minimizing your office supplies are just some of the measures you can take to declutter your workspace and redesign your work life.

Working in an aesthetically pleasing and minimalist workspace enhances your creativity and focus.

Eliminate anything you don’t need, and you’ll have less of a visual distraction. We have enough online distractions; shouldn’t we be limiting the physical ones as well?

The minimalist zen like work spaces that we’ve collected below can inspire you to create a clean design for your environment that meshes with the beautiful work  that you do online.

Compiled exclusively for WDD by Andy Johnson, a freelance designer and developer living in South England. He currently freelances via his web design studio Pixeno, and he’s also working on his web app called Authentic. You can  follow him on Twitter @Andy92.

Which workstation is your favorite and why?

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: Z2Dn3e

One of the great things about design is that we can use our imagination to break free from the norm by rewriting the laws of physics.

In this post, we invite you to look at our reality in a new light and expect the unexpected.

The ads in this post feature impossible compositions that cause the viewer to question the laws of the universe while bringing an extra dimension of wonder to our world.

We’ve collected 30 examples of adverts that defy the law of gravity to varying degrees…. enjoy!

Which one did you like best? Share your favorites below…

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: Z2Dn3e

The book deals with designing for print, but I thought it would make a great topic to discuss in the context of web design.

The principle of proximity calls for related items to be grouped visually, creating less clutter and making for a more organized layout. Items unrelated to each other should be placed further apart, to emphasize their lack of relationship.

I’ll discuss details and some ways in which this can be implemented effectively, but this definition should suffice for what we’ll discuss in this article.

The correct use of proximity, in conjunction with other design principles, has a big impact on the user experience and, ultimately, a website’s overall success.

Don’t Fear White Space

The first step to properly implementing the principle of proximity is understanding the importance of white space in design.

Lack of white space is a common problem in amateur designs. Design is a means of communicating information, and when amateurs attempt to convey a message through design, their natural inclination is to spread out the content evenly to fill the space, without giving much thought to the potential of well-organized white space.

White space can affect the user’s behavior as much, if not more, than the actual content on the page. White space guides the user’s eyes in the intended direction, creates contrast and makes a lasting impression.

Even though W3Avenue’s website above contains a considerable amount of content (with articles under numerous categories, like any design blog) and a series of sidebar ads, it doesn’t overwhelm the user visually.

The generous room in the header and appropriately spaced items in the content and sidebar areas contribute to this clean and organized look. W3Avenue is not doing anything particularly unique with its content, but its design probably contributes to the strong traffic it gets in a short period of time.

So don’t be insecure about empty space in your design. Properly using white space is the first step in implementing the principle of proximity and, thus, making a design more visually appealing.

Visually Group Related Elements

White space, however, is just one part of implementing proximity. A design can have a lot of white space, but if items are not grouped correctly, the white space will have little effect, as illustrated by the two business cards below:

The card on the left is not cluttered; it has some white space. But the elements are not logically grouped, so the effect is weak.

The reader is forced to scan the card multiple times. The card on the right, however, has a more pleasing visual effect. The reader simply has to glance at it to take in the information (more on this later).

The grouping of elements in the card on the right is also more logical. In the first set of elements we see the company name in large font with the location below it. The second set tells us how to get information on the services provided (i.e. phone number and website address).

This example illustrates the importance of proximity in print design, and a similar idea can be used for elements in web design, as shown in the screenshot below.

Although Arora Designs’ website is not complex or information-heavy, its use of white space and visual separation of grouped elements are effective. It should be noted here that “white space” does not have to be white; it can be any empty space between elements, regardless of color.

In the case of Arora Designs, although the white space has color, it serves the same purpose of visually separating the header, navigation and content areas.

Creating Visual Hierarchy

Using white space effectively and grouping related elements are critical to giving your website a clear visual hierarchy. Of course, the website’s architecture and flow of information are the foundation of effective proximity.

Hierarchy is conveyed by the way in which elements are grouped and sub-grouped.

This hierarchy helps the user understand where they’ve been and where they want to go and, thus, helps to communicate the purpose of the website. A list is a good example of an element that has the potential to communicate visual hierarchy, as demonstrated in the image below:

Just by glancing at the two lists above, without even examining the content, you’ll see that the list on the left has a clear visual hierarchy, showing the relationships between items (indented items are sub-categories of the primary items).

This hierarchy would not be possible without white space (including macro and micro white space). The list on the right is just a random grouping of elements with no seeming relationship or hierarchy.

Implementing this principle on a website with something as simple as an HTML list is easy. The challenge is to use this principle as a guiding factor in the website’s construction from the planning and wireframing stage through to the design.

Layouts That Are Easy to Scan and Read

Content that is organized into a hierarchy and logically grouped is easier to read and scan.

Headings, for example, should allow the user to scan by clearly indicating main points. Needless to say, content should be planned from the get-go to reflect an appropriate visual hierarchy; the list above with the indented items is a poor example, because the content does not match the visual hierarchy.

A website that uses proximity in its architecture and design does not overwhelm the user with information.

So, although it is relatively easy to implement the principles of proximity on websites that are light on content, proximity is much more important on content-rich websites.

News websites are good case studies of this principle. Below is a comparison of the Los Angeles Times and the Globe and Mail.

Overall, the LA Times website has a pleasing design mainly because of color choice and typography. But it also has a clean and uncluttered look, especially in the header section.

The logo is big and stands out, contributing effectively to the website’s branding. The object nearest to the logo is the horizontal navigation bar below. Because the navigation bar is dark, it contrasts with the logo.

The text links above the logo are neatly arranged, with plenty of space between the two sections. Left alignment of the content in the header also contributes to the clean look.

Every bit of information in the LA Times header is grouped with related items, except for the logo, which stands alone. Nothing in the header confuses you or makes you wonder where it belongs.

What about the Globe and Mail website, shown below?

The Globe and Mail website has a complex header section that fails to implement the principle of proximity.

The only significant amount of white space is in the center, beside the logo, which accomplishes nothing. Two ads appear in the header, contributing to the clutter. The ads may be necessary for financial reasons, so the problems are understandable.

The biggest problem is the messy section above the large banner ad. There is no clear distinction between elements in that section.

Three dotted vertical lines attempt to separate the area into four sections, but the first separator doesn’t make any sense. In fact, that section would probably look more inviting if those dotted separators were removed.

Grids Help With Proximity

One way to group items and use white space appropriately is to start with a grid.

From a cursory glance at both the LA Times and Globe and Mail websites, only the LA Times seems to have based its design on a grid, or at least used grid-based principles in the planning stage. The Globe and Mail’s website shows little evidence of a grid format.

A grid-based layout, with appropriate gutter sizes, allows for plenty of room between sections, and in many cases it forces the designer to implement principles of proximity without even thinking about it.

Below are screenshots from two websites that have employed the 960 grid system. They’re both fairly simple (i.e. not content-heavy like the news websites discussed above), but they show that grids give page elements breathing room, affording each section its own visual home.

Lead Users Down the Right Path

One other major benefit of proximity is that it help users navigate a website without unnecessary delays or obstacles. When the primary navigation is clearly separated from the other elements on the page, it will be found instantly and is less likely to be forgotten.

Proper visual hierarchy by way of proximity helps users delve deeper into your website without worrying about where they’ve been or where they’re going.

They’ll always feel comfortable, and they’ll get to the most important sections of your website quickly and efficiently.

Web designers with little or no experience in print design could benefit greatly from the principles that print designers have been putting into practice since years before the web boom.

Proximity is not the only design principle that will help a site be more usable and visually pleasing, but it is an important factor to consider for many of the reasons just discussed.

Further Reading

• Design Basics: The Proximity Principle
• How C.R.A.P. Is Your Site Design?
• Using Grouping in Web Page Layouts

This post was written exclusively for Webdesigner Depot by Louis Lazaris, a freelance writer and web developer. Louis runs Impressive Webs, where he posts articles and tutorials on web design. You can follow Louis on Twitter or get in touch with him through his website.

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: Z2Dn3e

Typography designers can exercise a lot more artistic freedom in the design of the ampersand, ranging from very traditional representations to those that bear little resemblance to the original form.

But many designers have little knowledge about the origin and meaning of the ampersand. The ampersand has a long and rather interesting history, though.

And with all the variations available out there, there are a whole host of design possibilities presented by this particular character.

Read on for more information, a history of the ampersand, and a gallery of ampersand designs from a variety of different typefaces.

A Brief History of the Ampersand

The ampersand can be traced back to the first century AD. It was originally a ligature of the letters E and T (”et” is Latin for and). If you look at the modern ampersand, you’ll likely still be able to see the E and T separately.

The first ampersands looked very much like the separate E and T combined, but as type developed over the next few centuries, it eventually became more stylized and less representative of its origins.

You can see the evolution of the ampersand below (1 is like the original Roman ligature, 2 and 3 are from the fourth century, and 4-6 are from the ninth century).

The modern ampersand has remained largely unchanged from the Carolignian ampersands developed in the ninth century.

Italic ampersands were a later ligature of E and T, and are also present in modern fonts. These were developed as part of cursive scripts that were developed during the Renaissance. They’re often more formal-looking and fancier than the standard Carolignian ampersand.

The word “ampersand” was first added to dictionaries in 1837. The word was created as a slurred form of “and, per se and”, which was what the alphabet ended with when recited in English-speaking schools. (Historically, “and per se” preceded any letter which was also a word in the alphabet, such as “I” or “A”. And the ampersand symbol was originally the last character in the alphabet.)

The ampersand is a part of every roman font. It’s used in modern text often, probably most frequently in the names of corporations and other businesses, or in other formal titles (such as Dungeons & Dragons).

It’s experiencing a bit of a resurgence in general usage, as it commonly replaces “and” in text messages and Twitter updates. Ampersands are also commonly used in programming, particularly in MySQL, C and C++, XML, SGML, and BASIC.

Ampersand Designs

The original ampersand designs reflected their origins as a ligature of E and T. Even as the ampersand has evolved and become more stylized, it still retains the basic shape of E and T combined.

The standard ampersand most of us are used to seeing is the Carolignian variety, and is featured in many commonly-used fonts. Here are some examples:

Andale Mono – A very traditional, sans-serif example.

Apple Chancery – A fancier, serif example.

Kingthings Petrock - A gothic example.

The other common ampersand design is the italic ampersand, featured below:

Monotype Corsiva – A traditional script example.

Scriptina - A less-formal script example.

Aller Dispay – A modern, sans-serif example.

Hill House – A craftsman-style example.

Ampersands in Websafe and Web-Common Fonts

Some websafe and commonly used fonts on the web have excellent ampersand designs. Others, not so much. Here are the ampersands from a variety of web-common fonts:

Arial – Arial has a very basic, sans-serif ampersand.

Georgia - A very traditional, serif ampersand.

Helvetica – Helvetica’s ampersand is slightly more refined than Arial.

Palatino – Another very traditional example.

Times New Roman – A heavy, somewhat bulky-looking ampersand.

Verdana – The verdana ampersand is more squat and square than many other sans-serif examples.

Trebuchet MS – The only web-common font that uses an italic-style ampersand.

If you’re unhappy with the ampersand in a font you’ve chosen for your website, there are ways to use custom ampersands. The Typogrify plugin for WordPress makes it incredibly easy to use a custom ampersand on your WordPress blog.

The Ampersand in Design and Art

Ampersands have become a bit of an obsession for some. There are blogs that focus on ampersands (some within larger typography blogs, others focusing solely on the ampersand). There are t-shirts. And there are a surprising number of people out there who have ampersand tattoos. Here are some examples of ampersands in real life:

Using Ampersands in Your Designs

Whether for a web project or a print design, ampersands can play a prominent role in the look and feel of your website. When used in titles or headers they can add some extra graphic impact without images.

Italic ampersands, which are generally formal and fancy, can add extra elegance to a design that otherwise remains minimal. Carolignian ampersands in a sans-serif font are often bolder and have a modern feeling.

Carolignian ampersands in a serif font have a very traditional feeling, though depending on the specific font they can become more formal or more modern. A few more examples:

Italic Ampersands

Lucida Handwriting

Papyrus

Windsong

Goudy Bookletter 1911

Bernhard Modern

Caviar Dreams

Carolignian Ampersands

Lithos Pro

Tahoma

Optima

American Typewriter

Regency Script

Further Information

Here are some additional resources, and sources used in the crafting of this post.

• 112. Ampersand – A short but excellent history from Art Lebedev Studio.
• Ampersand – Wikipedia’s entry on the ampersand.
• The Ampersand – Adobe’s history of the ampersand.
• The Ampersand – An entire blog devoted to real-life examples of the ampersand.
• Ampersand Typography – Another blog devoted to ampersand examples, particularly historical ones.
• The Funkiest Ampersands You Have Ever Seen – An excellent roundup of unusual ampersand designs from Spoon Grahpics.
• The Mesmerizing Curves of Ampersands – Another excellent roundup of ampersand designs, with download links. -

Written exclusively for WDD by Cameron Chapman.

Do you use the ampersand in your designs? Feel free to share some examples below…

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: Z2Dn3e

The style is recognized for its unique and rather groundbreaking attention to typography. Needless to say, Switzerland’s design culture has taken the world by storm.

Of course, the style has grown beyond the graphic design industry and made its way into web design.

When we web designers search for inspiration, though, we tend to stick to this one culture.

Though a great source of inspiration, let’s look at some graphic design styles from other parts of the world. Perhaps we could incorporate at least subtle elements from those other cultures into our current style.

Drawing Inspiration and Lessons from Other Cultures

Finding fresh inspiration can be difficult, but with a bit of persistence and know-how, you should find it. The great thing is that any culture or environment that is foreign to you will probably elicit some strong emotion or fascination in you. In observing a different environment, things stick out at us, and we find beauty in certain things in a way that a person who lives there might not.

Because as people carry on day to day, they start to ignore our surroundings. Exploring a different environment helps us notice the little things again. Inspiration should come quite naturally in this situation.

Inspiration is one thing, though; knowing how to give it expression in a design is another. But just like any form of art, an environment and its elements have their own shapes, textures, colors, sizes, etc. Look at natural elements, the details and the bigger picture.

Covering every culture’s style would be impossible, so let’s look broadly at the continents and maybe zero in on certain sub-cultures of interest.

Europe

Because we have just referred to the Swiss style, let’s begin with Switzerland’s continent, Europe. Europe has always had innovative design, some countries more than others. And advances in technology have brought huge advances in design.

Much of what we see in European graphic design after 1950 is, again, Swiss-style: emphasis on typography, clean lines, legibility and new color palettes. Overall, we find much more simplicity, too.

Below is a vintage Swiss album cover (but still post-1950).

Many designers follow this style closely to achieve a vintage look, while others take lessons from its structural balance. An article over on Smashing Magazine, “Lessons from Swiss Style Graphic Design,” discusses just how this modern style reflects in web design, with many great examples of both.

Robust Germany

We did say we would look beyond Switzerland, didn’t we? So, let’s move over to Germany, whose graphic design style many of the design principles of its neighbor.

Again, we find the heavy focus on typography. By contrast, though, whereas Switzerland tends toward clean sans-serif fonts, Germany showcases its own traditional fonts:

The above is the top half of a German poster advertising the Klingspor Museum in Offenbach. German print and fonts have been around for centuries, and now in digital media they are being used to highlight the country’s history and celebrate its typographic style.

Romantic Italy

Italy has similar design principles to those of Germany but a much more artsy, informal feel.

The above poster is from Milano (1969), promoting an advertising agency. One notices much more “freedom” in Italian graphic design. Both abstraction and softer shapes seem to have a stronger presence.

The Rest of Europe

Overall, European graphic design is becoming more uniform. And yet each country has its own history of art, culture and, thus, design style.

We focused on Germany and Italy to show how geographically close countries can have such distinct styles.

If you’re looking for new inspiration, Europe has much to offer. Look at Europe’s historical art, or focus on a particular period of a particular country.

Asia

As on all the other continents, every country, cultural group and religion has its own art forms and history. The graphic design style often reflects this history, and someone who is not a part of one of these cultures could benefit a lot from incorporating some of the design principles into their own work.

Below is a website inspired by an Asian culture, China to be specific. Notice how the simple large background creates most of the effect. The natural textures in the rest of the design complements this theme.

The above design is effective because it reinforces the purpose of the website. Let’s turn to a couple of more cultures for inspiration. The lessons we learn can be applied to similar cultures as well.

Japan

More than others, Asia’s main cultures seem to incorporate a more historical sensibility into their modern graphic design. Japan in particular is renowned for mixing historical culture and modernism quite well, whether for graphic design, Web design, architecture or other structural designs.

A great example of this is how cities in Japan seamlessly integrate innovative and traditional architecture and use traditional architecture to inspire shapes, textures and structures into modern design.

The two images above show how Japan can be both innovative and traditional, and they’re also a lesson in art. We can draw inspiration from the design elements in both, and we can learn to mix different eras and styles of art for effect.

This is also evident on the Japanese art scene. Japanese art seems to swing between two extremes: traditional and modern. Sometimes, though, those extremes are harmonized. Below are a few pieces that show just this.

And in the graphic design, we see a familiar pattern:

India

India’s push into modernism has been relatively recent. But again, its graphic and Web design often reflects the country’s traditional art forms and can be a beautiful source of inspiration.

India is particularly known for its intricate patterns. Below are just a few examples:

Australia

Much of Australia is a vast outback: a landscape that is unique to the continent. It also offers great beauty in its coral reefs and underwater life. A strong theme of nature appears in Australia’s art and design.

The Outback Steakhouse restaurant (in the US) promotes “authentic” Australian food, and its website reinforces this image: simple use of a culturally appropriate texture in the background, and natural colors.

The above website subtly integrates a natural theme, but one can get just as much inspiration from the culture, both modern and traditional. Despite being such a small continent, Australia offers a lot of great design.

Africa

Such a large continent; such a wide array of art. Perhaps, some of us think of African art as being the opposite of modernism, more of a step back into traditional art and a celebration of nature.

Traditional Africa

African art has an incredibly long, and rather distinguished, history. Taking inspiration from it for graphic and web design is fairly easy.

Because African art uses natural elements so heavily, texture would have to play a strong part in any design based on it. Again, as always, look at shapes and patterns, too.

Below is a great example of a web design. It mixes both cultural and natural elements perfectly to create a clean, beautiful and effective design.

Although this organization is based in Africa itself, there is no reason groups in other parts of the world could not use similar elements in their websites. The design style could be appropriate for many types of websites and designs.

Wildlife

The African landscape has unique wildlife that can be found nowhere else on earth, except in captivity. Traditional African art features the people’s unique perspective of the wildlife.

Both the wildlife itself and the cultural art based on it are worthy of attention.

Egypt

We’ve included Egypt here specifically for its ancient art. From pyramids and other majestic sculptures to the rock art, ancient Egypt has much to offer the modern web designer.

Again, design can be found in a culture’s art and monuments, as well as from the textures, shapes and colors of the natural environment.

South America

Like Africa, South America has a large native population, and the design style reflects this. But South America has its own distinct perspective on nature and offers as much as inspiration as the art in Africa.

The above sculpture is a traditional one from the area. One could perhaps draw some parallels between this style and Africa’s, but differences are obvious: rich colors and materials and unique shapes.

It reflects the South American environment itself: dense jungles, wet swamps and tropical wildlife. Much of Africa is dry desert, which is why the art has its brown hues and rocky textures.

Notice the difference in shape, too, probably more a cultural than environmental factor. In general, native African art is “harder” and more rigid, while native art from South America has more curves.

South America is, of course, famous for its tropical jungles, and this will also figure in design styles influenced by the region. Other features might include rivers and swamps: South America is also home to the great Amazon river.

Taking this beautiful environment as his inspiration, the designer below chose a jungle theme for his web design.

North America

Much of North American design is rooted in modernism, but still quite a bit of non-modernist tradition and culture exerts influence on graphic designers in this area.

As in Europe and most modernized Asian countries such as Japan, the Swiss style is popular here. But dig deeper and you’ll find design styles specific to this continent’s culture.

The south-western United States, for example, is known for its wild cowboy days. Most of us have heard of Outlaw Design Blog, and its design mixes texture, objects and landscape to perfectly capture this culture and its appeal.

Also worthy of attention is the art of the Native Americans, who once dominated the land. The website below does not exactly reflect Native American art, but it borrows the colors and textures to good effect. It also presents a typical North American landscape, setting the tone.

Being from the Midwest myself, I just had to include a farm and country design to the mix. The smart web design below features a Midwestern landscape that can be found throughout parts of the US and Canada.

Keep in mind, this continent stretches from the equator all the way up to the frozen arctic. The particular cultures reflect these various regions, and any of your design elements should, too.

The continent has more design styles than could be covered here, such as the northern Canadian arctic, Mexico, and Central America.

Wrapping Up

This post is almost anthropological, but that can be good for us designers looking for fresh inspiration and lessons. Webdesigner Depot is known for exploring alternative sources of art for our benefit. Exploring different cultures is a great way to do this.

There still remains, though, the general feeling that the Swiss style is the most modern, with everything else being less “formal.” You could stick broadly to the Swiss style, maintaining a simple and modern look, but incorporate subtle textures, colors or decorative elements from other cultures.

However far you decide to go, incorporating elements from different cultures in your design will likely be a change for the better. And when you have the whole world at your fingertips, the possibilities are endless.

Written exclusively for WDD by Kayla Knight.

Do you draw inspiration from other cultures? How has this impacted your design?

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: Z2Dn3e

You’ll find them accompanying many different styles. They’re handy effects for web designers because they’re attractive, useful and easy to create with any graphics program. But they have a dark side: they’re frequently abused.

Using amateurish drop-shadows or gradients is almost as bad as affixing a scarlet letter to your shirt to let the world know you’re a beginner or a hack. Even subtle, barely noticeable mistakes can create tensions that undermine otherwise beautiful and effective designs.

In this article, we’ll look at what drop-shadows and gradients do, we’ll talk about how to use them effectively and we’ll look at some examples of mistakes and how to fix them.

What Do Drop-Shadows and Gradients Do?

The job of a web designer is to create patterns of color for glowing two-dimensional screens. (There are a few exceptions to this: websites can be viewed on, say, a Kindle screen, which doesn’t glow; and websites can be printed out on paper.) These screens do not reflect the real world; they’re not even very much like the real world. For this reason, we have no real imperative to make the patterns on our websites bear any relationship to objects in the three-dimensional world we live in.

Operating systems like Unix and DOS have an interface that is nothing but colored text on a screen. Others, like Windows and Mac OS X, are filled with the illusions of real objects. OS X, for instance, has a dock that looks like a table with a shiny surface that recedes in the distance, a menu bar whose beveled edges make it look like it bulges out slightly, and scroll bars that appear to have translucent lozenges.

All of these effects are metaphors. They treat certain elements that we can interact with on screen as though they were three-dimensional objects that interact with light sources in the way that objects in the non-digital world do. It’s a funny thing to do, in a way: all of these light sources and edges and shapes are pure fantasy. Because the objects on the screen are imaginary, why should we relate them to the objects in the real world?

The illusion of space connects the imaginary to a world we are comfortable living in.

The most important reason why we relate imaginary objects to real-world ones is that we are experts at interacting with objects in our three-dimensional world. We have experience in dealing with three-dimensional objects, and we have accumulated knowledge of the visual code that tells us about the relationships of objects to each other in space.

It’s partially because the feat of interpreting light is so remarkable that we take such pleasure in illusion, or in creating the appearance of objects. We are often more engaged by dramatically life-like paintings of common objects like houses and apples than we are by the objects themselves. We humans have created drawings for thousands of years that are intended to present the ideas of objects. Illusory lozenges and tables on the screen are nothing but the most recent manifestation of this long tradition.

There’s more to it than pleasure, though. Shape and position give us information about how objects relate to each other. The long vertical lozenge shape of the scroll bar in the Safari window, for instance, creates the illusion that it sits “higher,” or closer, to me than the elements surrounding it. This gives it greater importance in the design, which is appropriate because the scroll bar is an essential interface element for navigating the page.

Visual metaphors create perceived affordance.

By appearing as an object, the scroll bar creates “perceived affordance.” That is, it links itself by way of metaphor to the properties of real objects that lend themselves to particular uses. A beveled button on a web page, for instance, communicates that it affords pressing. We can make anything on a page clickable, but associating a clickable element with the image of something pressable suggests its function in a clear, obvious and even pleasing way.

Drop-shadows and gradients are basic tools for creating the illusion of space.

Drop-shadows and gradients are two tools that help create the illusion of three-dimensionality and suggest the spatial relationships of objects on the page. When done well, this three-dimensional information makes a design more beautiful and more understandable.

In the real world, drop-shadows are created when an object blocks a light source from striking a surface that is behind it. This is one of the reasons why people say that drop-shadows make two-dimensional designs “pop”: because they make objects appear to stick out from, or float above, other elements.

Gradients appear when one part of an object is closer to a light source than another part. As a result, the closer part appears lighter, and the farther part appears darker. (Gradients get more complex, of course, when multiple light sources interact or when light sources have different colors.)

So, by mimicking the effects of light in the real world, drop-shadows and gradients communicate information about metaphorical objects, imaginary light sources and their relationships.

How To Use Drop-Shadows and Gradients Effectively

Here is one possibility: don’t use drop-shadows or gradients at all.

I mean this, seriously. This is the surest way to avoid drop-shadow and gradient mistakes, and the option should always be considered.

Because tossing drop-shadows on random objects is so easy, they can be an excuse to avoid simpler, better solutions to problems. For bits of text that need to be more prominent, for example, designers will often neglect color, size, weight of the type and many other elements in favor of a drop-shadow.

Similarly, designers often use gradients to make a field of color seem less boring, without figuring out why the overall composition is not dynamic.

If you’re working on a comp for a website, save three-dimensional touches such as drop-shadows and gradients for the end, if at all possible. Use spacing, placement and color to make the design effective before adding the final layer of polish. If you focus on making your designs work without these tricks, you may find that you don’t need them as often, and that they are more effective when you do use them.

Before you plop in a drop-shadow or a gradient, ask yourself, “Is a three-dimensional metaphor necessary for this design?” Am I using it to add useful information about the way objects are related or as an effective component of a sound aesthetic approach, or am I using it as an excuse?”

The Subtler, the Better

For drop-shadows, almost never use Photoshop’s default settings. Photoshop’s default drop-shadow is very dark and is cast to the lower-right corner of an object (the default global light source being 120°, in the upper-left).

Shadows tell you about the light in your environment. Suppose you’re in a dark room with no windows, and you turn on a flashlight. Any object that you shine it on will cast a shadow that’s almost black. That’s because the object is blocking light from the only light source, meaning that no other light is coming from anywhere else to brighten that area.

Now, the shadow won’t be completely black because of the reflected light. Some of the light from your flashlight will bounce off the walls and hit the shadowed area from a direction that’s not blocked by the object. And if you turn on a lamp in another corner of the room, the shadow will brighten considerably. The object will cast a second shadow: the new shadow will appear where the light from the lamp is blocked but will be filled with the light from the flashlight, while the area of the first shadow will still be blocked by the light from the flashlight but will be filled with the light from the lamp.

When we add drop-shadows to our designs, we suggest an imaginary environment for our web page. Dark, hard-edged drop-shadows suggest a dark room with a single light source. Light, soft-edged drop-shadows suggest a room rich with diffuse light.

A well-lit room is the most comfortable environment for users, because it is similar to the kind of environment where we use our computers: an office or study. Unless we deliberately want to avoid that comfort zone, we should bring the drop-shadow settings in Photoshop way down from their defaults. Bring the opacity down to 30 or 40%, or even lower.

Also, keep things simple so that people understand the metaphor without thinking about it. A light source at 120° does not makes much sense. Mac OS X, for instance, puts its light source at 90°, or straight above, which seems more logical. I like to make it even simpler and put the light source directly perpendicular to the screen. To do this, just bring the distance setting on your drop-shadow to zero (this represents the distance from the object that casts the drop-shadow to the object beneath it). At this point, global light doesn’t matter: it’s simply as if a big diffuse light source is coming from behind the user to illuminate the design.

This effect is very common in “trompe-l’œil” designs, the most common of which features the background image or frame of a desk surface, as if one were looking at it from straight above. Film directors such as Alfred Hitchcock, Martin Scorcese and Wes Anderson employ the same effect for their signature God’s-eye-view shots. Such web designs have a kind of effortless comprehensibility, and maintaining consistency across a design becomes easier for the designer.

If you’ve brought the distance setting down to 0 and the opacity down to about 30%, you’re at a good starting point for a drop-shadow. Play around with the size to change how far the surface of the object appears to be from the background on which it sits. Setting the size to 1 pixel, for example, gives you a beautiful effect that’s almost invisible but quite pleasing. Designer Dan Cederholm has made small, simple effects like this an integral part of his style (as demonstrated in his seminal A List Apart article on “Mountaintop Corners“).

You can certainly bring the opacity up if the effect is invisible, but starting subtle and then dialing it up is much better than the opposite. The effect should not be the slightest bit more overt than it needs to be.

For gradients, Photoshop has a lot of fancy defaults. These may have some good uses, but they certainly have unlimited poor uses, so steering clear of them is usually wise.

Instead, select the default black-to-white gradient. Then select both the black and the white and make them both the base color of your element. Now that you have a base, pick either the dark side or the light side and adjust it to be just slightly darker or lighter. Again, the subtler, the better. (Some of the best gradients I’ve come across I had to verify with the eyedropper tool in Photoshop to make sure they were there at all!)

The greater the contrast between the light and dark, the rounder the surface will appear. For some things, such as navigation menus and buttons, some roundness is appropriate. But for objects that should appear flat, keep the contrast low.

And remember, the lighter side should face the direction of your light source.

This kind of gradient is wonderful because it mimics the gradients we see around us all the time. Nothing in the real world is truly a single color field, because it always has some kind of relationship to a light source. Look carefully at the pages in a book or at the ceiling around your overhead light: you’ll find gradients everywhere.

Examples of Mistakes and How to Fix Them

The web has many obviously ugly gradients, but these are not usually done by professional designers. Rather than show egregious mistakes, I’ll illustrate a few ways in which subtle errors can create tensions in otherwise excellent designs.

Uniform Shadows for Overlapping Objects

Overlapping objects imply a difference in their distance from you (determined partly by their thickness). Designers, though, frequently use identical drop-shadows for overlapping objects. So, the information conveyed by the drop-shadows conflicts with the information conveyed by the overlap, undermining the illusion of dimensionality.

Seeing conflicts such as these makes me uneasy, and the more I focus on them, the more my head hurts. Users should take pleasure in your design, not feel pain!

You can read more about this issue in “Build a Better Drop-Shadow,” a guide by Jacci Howard Bear on About.com.

Abrupt Edges

The corners of real drop-shadows wouldn’t have hard edges unless they had absolutely no reflected light—which would be a very unusual situation. Rather, their corners are usually rounded by the rays of light that creep around them.

Here’s a drop-shadow with an unrealistically hard edge:

This otherwise lovely design has almost no dimensional illusion anywhere but has a drop-shadow along the right sidebar. The designer perhaps wanted to lower the sidebar’s hierarchy on the page, an effect that its blue background helps achieve. Not only is it unnecessarily dark, though, but the implausibly hard edge stares the visitor in the face.

At the bottom of the sidebar, you can see a rounded transition, where the designer has created a more plausible effect. But you can see why he didn’t repeat it at the top, because it would jar with the clean horizontal line set by the well-aligned top elements. Rather than demand the realism of this rounded transition, let’s fix it by toning down the drop-shadow as much as possible.

Here, I have made the drop-shadow so light that it does little more than suggest it is sitting farther back. Because it’s so light, the clean line of transition isn’t ugly or distracting.

What the heck is going on behind that object?

Sometimes, a drop-shadow goes nuts for no obvious reason, as with the blue box surrounding the W3C logo below.

Why is the drop-shadow so far back from the object, and so rounded? The more I try to understand the story being told by this drop-shadow, the more confused I get. My guess is that the designer wanted to give more prominence and weight to the logo, which the drop-shadow helps accomplish, but it disrupts the harmony of the page so much that it’s not worth it.

Don’t let your gradients suggest different light sources.

In this otherwise excellent design for WolframAlpha, objects on the page have gradients ranging from white to pale orange. The problem is that the gradient in the header region has white at the top, implying light from above, while the page elements lower down have white at the bottom, implying light from below.

You could argue that I’m over-thinking this, that gradients don’t have to match up with light sources. That’s possible, but subtle gradients like these have an inherent metaphorical relationship to the gradients we see in the real world. Let’s switch the direction of the gradients lower down on the page so that they imply a light source from above:

And we get light source harmony.

Ultimately, you’re free to do as you please.

Because the objects on a web page relate to real objects only by metaphor, their effectiveness is essentially subjective. The connection between an image of a button and an actual button has no reality beyond the mind of the user.

We designers are not required to make our metaphors consistent with reality, but being thoughtful and careful about the many levels of communication in a design helps us make our websites more harmonious.

And our care and consistency helps make the user’s experience of the website comfortable and even delightful.

Written exclusively for WDD by Nate Eagle. He studied philosophy in college, an education that prepared him perfectly to design and develop web pages for PBS KIDS. You can read more from him and his PBS co-workers at Design.PBS.

Do you think this level of detail is important when designing drop-shadows and gradients? Do you have your own pet peeves about how drop-shadows and gradients are used?

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: Z2Dn3e