[Just to be clear, I know some form of probably all these techniques may have existed for awhile but I feel these five choices can still be used/improved upon by us developers and/or not fully adapted yet even though they are known by many to be productive. A bump and a nod, if you will.]

1. Perfect Full Page Background Image

by Chris Coyer of CSS Tricks

For a project I worked on in the past, I tried to implement a full page background image via CSS and it is much more difficult than you’d expect. First of all you’re dealing with the scaling issue (because we don’t want white space) and then you have the proportions to worry about and then on top of all that you have to deal with the scroll bars and browser compatibility issues.

Thankfully, Chris Coyer takes you through two techniques (albeit only one technique truly fulfills all the requirements above).

http://css-tricks.com/perfect-full-page-background-image/

2. CSS Sprites: Image Slicing’s Kiss of Death

by Dave Shea of A List Apart

If your “images” folder is about to burst because of the sheer quantity and complexity of its contents, we have a winner for you! CSS sprites are basically a grid of images in a single image file that you position and re-position as necessary. You do this to help your production efficiency as you only need to maintain a single file. This technique is an absolute godsend for navigation links states effects.

ALA all-star, Dave Shea outlined these techniques as far back as 2004 and re-visited the subject in 2008.

http://www.alistapart.com/articles/sprites/
http://www.alistapart.com/articles/sprites2/

3. How To Recreate Silverback’s Parallax Effect

By Paul Annett of Think Vitamin

I first saw Jeremy Keith show off the Silverback website at An Event Apart in San francisco last year (2008) and was blown away. Not so much because of how exciting it looked but more because of its elegant coolness factor. The parallax effect can basically be described as multiple background images set at individual visual levels to acheive a nice movement effect when the user changes the browser window size.

British developper, Paul Annett is responsible for the original implementation of this technique for Clearleft (who makes Silverback) and gives us a rundown of how he implemented it for them.

http://carsonified.com/blog/design/how-to-recreate-silverbacks-parallax-effect/

Other ways to accomplish this technique:
http://forthelose.org/examples-of-and-how-to-do-the-css-parallax-effect
http://webdev.stephband.info/parallax.html

4. CSS: Add a “Loading” Icon To Your Larger Images

by DynamiX Labs

The tricky thing about dealing with large images (or multitudes of images that hog bandwidth) is that during loading it can really mess with your layout and confuse your viewers until the image loads. In other words – a bad first impression with your audience. To remedy this, use a preload image so that they know something is coming and they won’t be alarmed that the page is broken.

DynamiX Labs has a nice solution that is multi-browser compatible and requires no javascript.

http://www.dynamixlabs.com/2008/01/17/a-quick-look-add-a-loading-icon-to-your-larger-images/

5. Create a Lightbox Effect Only With CSS – no javascript needed (except to close the windows)

by Emanuele Feronato

I am an advocate of Lightbox, Greybox and the other jQuery options to achieve the pop-up effects for opening new windows within a webpage. As they mature, the options for them become more and more impressive. However, sometimes all you need is a simple lightweight option that gets the job done for you without a whole lot of fuss. That’s the beauty of this mostly CSS solution (rudimentary javascript is used to close the window).

For a landing page project that I worked on that had a shelf-life of about a month, I decided to use this technique for a registration form and it worked out great. it was easy and fast to implement and had I appreciated the tiny footprint.

http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/

You may also find these articles useful:

3 Fresh Web Design Ideas
CSS Rehab – 3 Step Program To Getting Clean
Why I Love Expression Engine (CMS)

Did I Miss Something?! Let me know in comments!

#1 — Making the Usual, Unusual.

Instead of the usual neatly organized drop-down sub menu of options, we have a custom drop-down shelf! This is a great concept for the young demographic visiting their website who are in interested in the lifestyle aspects of the brand. Beyond that though, it’s a way for Converse to show how relevant they still are by employing innovative web design techniques.

http://www.converse.com/

#2 — Kill a Fly with a Shotgun.

David Airey is a great designer and a vocal blogger based in Ireland. Even though I frequent his website, I’ve never clicked on his explanation of RSS. When I did, I saw he decided to answer that question with a video of all things (linked from commoncraft). He could have accomplished this with a sentence or two and a tidy little diagram but the sheer pomp magnificence of a video makes it monumentally more interesting.

Instead of a standard text/photo “About Me” page — why not produce a gangsta rap video to tell your life story? That may be extreme but that’s the point! Do something normal but in extraordinary ways to shake things up. Usability theories are centered on making something easier to use. However, if you can figure out how to make something more difficult but more interesting it may be worth it to risk connecting with your audience better.

http://www.davidairey.com/what-is-rss/

#3 — Nice to Meet You. Again.

Mature websites may have taken years to get to where they are now, slowly building and growing with every added piece of content. It only reasons that newer members of your community may not be familiar with your past brilliance. Why leave it up to them to stumble onto your old content in a search or list somewhere? Take the initiative to introduce your content and your website properly to your new viewers. Point them to your most poignant and relevant posts. They’ll appreciate it and understand the significance of where your website has been and where it’s going.

http://www.alistapart.com/articles/ALAprimer/

Like this article? Comment!

Toy Pistols

See Larger
That’s a bad motherf… shut yo’ mouth!

See Larger

Board Games

See Larger

Alphabet Blocks

See Larger

Bicycles

See Larger

Trains

See Larger

See Larger

Toy Animals

See Larger
Five down from the top left – I proclaim thee “crack dog”.

Erector Sets

See Larger
Sounds like there’s a joke in here somewhere, but this is a classy website…

Christmas Stockings

See Larger

Other articles you may like:

3 Beautiful Retro Photographic Manuals
25 Inspiring Indie Band Websites

What’s your favorite catalog ad? Comment!

Here is a curated retrospective of some of the top retired baseball logos of the past separated by American and National Leagues respectively and concluding with the current logo at the end for contrast:

AMERICAN LEAGUE

Baltimore Orioles

Current:

Boston Red Sox

Current:

Chicago White Sox

Current:

Cleveland Indians

Current:

Detroit Tigers

Current:

Kansas City Royals

Current:

Los Angeles Angels of Anaheim

Current:

Minnesota Twins

Current:

New York Yankees

Current:

Oakland Athletics

Current:

Seattle Mariners

Current:

Tampa Bay Rays

Current:

Texas Rangers

Current:

Toronto Blue Jays

Current:

NATIONAL LEAGUE

Arizona Diamondbacks

Current:

Atlanta Braves

Current:

Chicago Cubs

Current:

Cincinnati Reds

Current:

Florida Marlins

Current:

Houston Astros

Current:

Milwaukee Brewers

Current:

Philadelphia Phillies

Pittsburgh Pirates

Current:

San Diego Padres

Current:

San Francisco Giants

Current:

St. Louis Cardinals

Current:

Washington Nationals

The Nationals were formerly known as the Montreal Expos and I desperately wanted to show the great retro Expos logos.

Current:

Other articles you might like:

En Fuego! Best & Worst NBA Websites

Which Retired Logo Is Your Favorite?! Comment!

1 — Information

You can make a strong statement with what you don’t say. Depending on the type of business, you can get away with not saying much on a card. It can draw attention to what you really want them to do, such as visit the website. Conversely, you can pack a card with tons of data as long as it ties in with a concept. The business cards for my design firm have a lot of random personal information but it often leads to easily striking up conversations and getting to know clients better.

2 — Concept

Having a unique overall concept instantly captures attention. It can also be a double edged sword because since it has so much cache in the client’s mind — it should be relevant in some way. Sometimes being overly clever is akin to trying too hard. However, if you can make it work because you’re taking advantage of some sort of unique factor in your name, company, or industry… that’s fair game.

3 — Shape

I think shape is one of the most underrated ways to make your card stand out. My experience with my personal cards being slightly smaller than the norm is that it’s a detail that people always notice. Now imagine if you did some sort of die-cut or choose a shape completely divorced from what people think of in business cards… you and the card would be instantly memorable.

4 — Material

CAUTION… when leaving the realm of 100lb paper you can get into hit or miss situations because of how well the piece is produced. Other issues such as price and how annoying it becomes to carry around come into play too. On the opposite spectrum, using cheaper substrate can be just as bad because the card may require you to hand craft each one or the material may be very delicate. However, when successful — these cards are total show stoppers.

5 — Color

This may be one of the easiest ways a designer can set themselves apart while not straying too far away from the pack. Colors play such a huge role in the way people perceive things that a smart designer can use that to their advantage and design a great card without having to resort to exotic tricks and the trendy technique of the moment.

6 — Texture

This is one of the human senses that I think designers forget about sometimes for business cards. Whether it’s an emboss, varnish, substrate or special process — it’s always fun to watch people focus on just the feel of the card rather than the look (which we are more used to).

7 — Size

Risky as it may be, size can be a playful and instant attention getter. Dramatically bigger or smaller somehow always says something about the card owner as well from my experience. The challenges of this can be tough as a large card is cumbersome but a small card can easily be misplaced.

8 — Versions

Often unappreciated because people rarely see all the cards together as a set, having multiple versions can serve as a nice conversation starter if they notice that each card is unique. If you’re like Jason Santa Maria (as seen below) and participate in conferences/meetings where you might have a stack of cards out — a nice functional trick may be to lay them out so they can see the cards as a set if you designed them that way.

9 — Alternate Purpose

These type of “business cards” often generate huge buzz in design books and magazines because they’re almost like modern art. At it’s best, people will never forget you because of it but at it’s worse you might need to make a second set of cards because let’s face it — you’re not gonna carry around a box full of wooden laundry clips every where you go.

10 — Part of a Business System

A jaw dropper of a card is all well and good but if it is a total disconnect from the rest of your business system, you may have consistency issues. Alternatively, if you make your business system some sort of circus to help buoy the card’s extravagance that can make you look like you’re “trying too hard” (which can appear unprofessional at times).

Business cards at their best display some basic information while showing a bit of your personality. There is a fine line you have to look out for depending on who you are, what type of work you do and other factors but I support those who are willing to take a bit of a risk and throw some caution to the wind for the sake of innovation. If you concentrate on two of the ten listed elements, you’re well on your way to a quality card.

You may also like:

20 Astonishingly Intricate International Metro Maps
A Designer’s Guide to Copyright

Comment if you like the article!

Clinton Reno

Boss Construct

The Small Stakes

Tiny Media Empire

Douze

Pop Fuel

Delicious Design League

Doublenaut

Furturtle

Gigart

Hero Design Studio

Lure Design

The Decoder Ring

Powerslide Design

Strawberry Luna

Spike Press

Other Music Related Articles:

Top 30 Indie Band Website Designs

30 Awesome Designerly Band T-Shirts

25 Inspiring Indie Band Websites

Which was your favorite? Let me know in the comments!

Brooklyn Brewery

I admit some favoritism, but the overall experience and energy of the website was executed very well.

Pyramid Brewery

Very simple and not very flashy in terms of technology but it is very well done overall and the ease of use is top notch. VERY un-annoying.

Guinness

Guinness being a huge brewery managed to put together a neat well-crafted website — something the big American breweries couldn’t do. (Although Budweiser did come closest.)

Blue Moon Brewing Company

Blue Moon and Rolling Rock both tried to capture the local/small town flavor of their brand. The little “Easter eggs” for everyone to find are a fun touch.

Rolling Rock

Rolling Rock tried to capture a small town newsletter feel which I felt offered it a unique look.

Stella Artois

Stella Artois does a good job appearing as a premium brand.

Pabst Blue Ribbon

“PBR” as people call it is essentially a cheap beer but they separate themselves by marketing a reaching out to their “following”.

Peroni

My former co-worker called this the “Budweiser of Italy” — I have no idea if that’s true or not but the website is pretty unique from all the others. It feels like some design portfolio websites I’ve been to.

Red Stripe

I think of Red Stripe as a hip party beer and I think it does a good job of portraying itself that way.

Duvel

Duvel is a premium beer like some of the others but they really believe in the “less is more” approach.

Like this article? Raise a glass in the comments!

]]> http://www.typesett.com/2009/04/10-smashingly-dapper-brewery-websites/feed/ 4 http://www.typesett.com/2009/04/20-astonishingly-intricate-international-metro-maps/ http://www.typesett.com/2009/04/20-astonishingly-intricate-international-metro-maps/#comments Wed, 22 Apr 2009 04:57:15 +0000 admin http://www.typesett.com/?p=628 Born and raised in Brooklyn, I grew up on the Orange lines of the NYC MTA. I used to stare deeply into the huge maps at each station waiting for my train to show up and have always been in awe of how much detail is in each square inch. Here are some of the most beautiful metro/transit maps from around the world. ]]> Born and raised in Brooklyn, I grew up on the orange lines of the NYC MTA. I used to stare deeply into the huge maps at each station waiting for my train to show up and have always been in awe of how much detail is in each square inch. Here are some of the most beautiful metro/transit maps from around the world.

(I tried to focus on the most simplified “quick-view” versions meant for scanning on stations rather than intricate street combo versions. These versions have their own unique challenges like — readability, that I felt made them especially designerly.)

Japan

Click to Enlarge

New York City

Click to Enlarge

London

Click to Enlarge

Hong Kong

Click to Enlarge

Chicago

Click to Enlarge

Paris

Click to Enlarge

Moscow

Click to Enlarge

Montreal

Click to Enlarge

Melbourne

Click to Enlarge

Munich

Click to Enlarge

Oslo

Click to Enlarge

Zurich

Click to Enlarge

Madrid

Click to Enlarge

Washington, D.C.

Click to Enlarge

Boston

Click to Enlarge

Berlin

Click to Enlarge

Barcelona

Click to Enlarge

Switzerland

Click to Enlarge

Milan

Click to Enlarge

Singapore

Click to Enlarge

I apologize for any mistakes due to language barriers. Please alert me to any mistakes so I can make corrections!

What’s your favorite? I’m sure I missed some good ones, let me know in the comments!

]]> http://www.typesett.com/2009/04/20-astonishingly-intricate-international-metro-maps/feed/ 1 http://www.typesett.com/2009/04/yeah-yeah-yeahs-the-cover-art/ http://www.typesett.com/2009/04/yeah-yeah-yeahs-the-cover-art/#comments Mon, 20 Apr 2009 06:20:35 +0000 admin http://www.typesett.com/?p=618 The Yeah Yeah Yeahs have a new record out and I thought to myself as I picked up the new album (it's Blitz!) what a great cover art they have. As I listened to the album, I thought what great matches they turned out to be for the actual music of their respective albums...]]> The Yeah Yeah Yeahs have a new record out and I thought to myself as I picked up the new album (it’s Blitz!) what a great cover art they have. As I listened to the album, I thought what great matches they turned out to be for the actual music of their respective albums…

Fever To Tell

Fever To Tell featured a punk-grunge-collage solution to it that mirrored the raw sound from that record.

Maybe it was lead singer’s hairdo that made me make the connection but I always thought they were trying to pay tribute to the another NYC band — the Ramones. Now that I think about it the Clash and Green Day’s Winston Smith Insomniac cover look like more of an influence.

The music itself on this album had many great tracks including Maps, Pin and my favorite — Y-Control. For the most part, a lot of the energy from this album was courtesy of Karen O’s snarling vocals over crunchy/gritty guitars on tight punk style 2 to 3 minute tracks.

Show Your Bones

The Show Your Bones legend goes — the band reached out to their fans to help come up with a Flag and they liked some so much they turned it into the cover art.

This one instantly reminded me of jasper John’s work of symbols like the various Flag works he did. Wondrously simple and beautiful how the tactile texture is responsible for the true beauty of the work.

The music of this album had everything we came to love and expect from the band but clearly you can see they sound very tight. The biggest hit on the album — Gold Lion is a haunting track that just sticks to your ears like honey. Karen O doesn’t need to snarl or hide behind guitars as much as her clear emotion is easily distinguishable as she sings. Just like the flag has fringes of unpredictable texture, so do most of the tracks.

It’s Blitz!

The latest album — It’s Blitz! has quite a striking feminist egg squashing image (although I have no idea if they intended that).

Made me think of the Saatchi collection a bit from when they came to the Brooklyn Museum of Art. Damien Hirst’s bizarre animal dissections and Sarah Lucas’s fried egg coming to mind first. I feel as though I’ve seen stuff exploding on CD art before but I can’t recall anything for the life of me this moment.

Music-wise, it’s still fresh on my iPod but from my observations it’s a degree cleaner than Show Your Bones but now they have a more predictable sound but make up for it in competence. Some of the tracks like Soft Shock and Skeletons make me think of how Robert Smith from the cure would approach a mid-tempo song. There is a “delicate quality” in how both sound too.

Yeah? No? What do you think of their cover art?

]]> http://www.typesett.com/2009/04/yeah-yeah-yeahs-the-cover-art/feed/ 3 http://www.typesett.com/2009/04/25-inspiring-indie-band-websites/ http://www.typesett.com/2009/04/25-inspiring-indie-band-websites/#comments Wed, 08 Apr 2009 05:41:50 +0000 admin http://www.typesett.com/?p=539 The Arts & Crafts Record Label in Canada is my favorite record label. I support many artists including Broken Social Scene, Feist, Stars, The Dears, The Stills, Brandan Canning and Kevin Drew — so I know this label and what they are about. They are truly interested in making creatively expressive music just as we are interested in making creatively expressive design. So let's see what happens when one crosses paths with the other.]]> The Arts & Crafts Record Label in Canada is my favorite record label. I support many artists including Broken Social Scene, Feist, Stars, The Dears, The Stills, Brandan Canning and Kevin Drew — so I know this label and what they are about. They are truly interested in making creatively expressive music just as we are interested in making creatively expressive design. So let’s see what happens when one crosses paths with the other.

The 25 Artist Websites of Arts & Crafts Record Label:

Amy Millan

The American Analog Set

Apostle of Hustle

Bell Orchestre

Broken Social Scene

BSS presents Brendan Canning

BSS presents Kevin Drew

Charles Spearin

Constantines

Feist

Gentleman Reg

Gonzales

Hidden Cameras

Jason Collett

Los Campesinos

New Buffalo

Phoenix

Stars

Still Life Still

The Dears

The Most Serene Republic

The Stills

Years

Young Galaxy

Zeus

Other Music related Articles from TypeSett:

Top 30 Indie Band Websites
30 Awesome Designerly Band T-Shirts

What’s your favorite website from A&C? Rock that pick in the comments!

]]> http://www.typesett.com/2009/04/25-inspiring-indie-band-websites/feed/ 3