Professional Wordpress Themes

Corporate Website Design: Creative and Beautiful Solutions

Posted in professional wordpress themes on September 4th, 2010 by professional wordpress themes – Be the first to comment

in Corporate Website Design: Creative and Beautiful Solutions

What do corporate websites have in common with other people’s children? Three things: they have their charm, like finger-paintings on the refrigerator; they can be useful, if infrequently; they are usually admired only by the people who created them.

While designers know that a user’s experience on a website has a large impact on the way that customer will interact with them, impressing that concept on the corporate establishment has taken a very long time. Trends in design are making their way into corporate web, albeit slowly; with patience and a little luck, businesses will soon start to consider carefully coded and appropriately functional design as important as their mission statement and recent sustainability reports.

One unfortunate fact is evident above all else: despite having plenty of money at their disposal, many corporations are lost in sterile MS Word-esque designs that are more stagnant than a museum exhibit… though at least museums have dinosaurs and mummies and stuff. Here’s hoping we all will get new corporate clients soon.

Below, we present some interesting corporate websites, although the insight they offer may not be immediately apparent. This review is not about aesthetics or visual appeal, but rather about the design solutions the sites exhibit. In fact, corporate websites aren’t as visually arresting as you might think, so if the appeal isn’t immediately apparent in the previews below, take a moment to visit and interact with each of them.

[Offtopic: by the way, did you already get your copy of the Smashing Book?]

Beautiful Corporate Websites

Levi Strauss & Co
With its website, Levis demonstrates that it has not only a strong flair for style and interactivity, but a rich sense of history. Hover over or click the photographs to see some of the company’s defining moments; ever known for its sense of identity, Levis draws you into its past, present and future, excellently breaking through to customers and inviting them to stay.

McDonald’s
By simplifying and softening the navigation, McDonald’s opens the entire screen up to use as canvas for their product. Harmonious colors in the typography complement the food (and exploit the visual association with hamburgers), while the vivid photography does not obscure surrounding elements.

Starbucks
Gentle colors and careful hierarchy of elements aside, Starbucks’ strength is in the details. The navigation exhibits an attention to hierarchy not often seen on corporate websites, while offering alternative destination links, should you find yourself in the wrong section. Such consideration for the user would be a welcome trend in design going into 2011.

Sony
You’ll see that this is a link to Sony Canada’s website. While the navigation and theme is the same as its American counterpart, the experience here is different: here you can see short films in which people relate their experiences of how Sony technology has enriched their lives. Best of all, a floating meter lets you sort stories into categories, giving you control of the content. Brilliantly executed.

The Ones You Would Expect

Adidas
Few websites employ a grid design that is at once so rigid and flexible. Individual modules expand and contract to allow for dynamic exploration—a lot of fun, particularly because the website has so many parts to explore. The only thing to note is that images do not obviously reflects the content they open to display, necessitating the standard top-menu — an important point in usability.

Citroen
While the technique of using tiny images to fill a shape has been done a million ways, Citroen takes an old technique to the next level. Draw your cursor across the world to see the photos dance around it, beckoning you to select a region. An excellent use of a landing page, effectively drawing in users without information inundation.

Fender Guitars
While you may need to be a guitar player to fully appreciate the beautiful lines and tones of Fender products, you need only a pair of eyes to appreciate the simplicity and functionality of Fender’s website. Unobtrusive navigation at the top and hot links lower down make way for a large stage on which Fender can showcase the stars of its website: its beautiful instruments.

Heinz
One of the most recognizable brands in the world, Heinz has intelligently focused its website on its consumers. Rotate the globe by clicking on photos to see simple recipes from around the world. A design brilliantly suited to users of any skill level, Heinz has found a new means to engage their customers and entice them to visit more.

Prologue Films
Any company that designs opening credits and effects for movies needs a keen aesthetic sense, and Prologue Films’ visual dynamic is evident on its website. A clean grid with gray tones puts the company’s custom type and effects (an impressive collection) front and center, the same technique made famous by artists and photographers. Using a pop-up window for the content, though, is ill-advised.

Rolex
The beauty of this website is in Rolex’ masterful attention to detail. With the gorgeous products on display, the eye almost misses the clever tricks contained therein, such as the clock face that adjusts to your time zone. The intuitive user experience reinforces the notion that great design blends together. When it works right, it’s seamless.

Steinway & Sons
Lucky for us, Steinway invests as much effort into its website as it does into its pianos. Elegant type and warm subtle imagery grace this design and project an image of quality, undoubtedly the intended effect.

The Ones You Should Have Thought Of

Aflac
While a blue and white palette is nothing new, Aflac has mastered the use of subtle gradients to enhance type. Smartly assembled, this site is intuitive and easily digestible. The clever part is the horizontal scrolling frame, a visual hook aptly used here to display customer testimonials.

American Standard
A gorgeous website; American Standard exemplifies grid design, employing the majority of frame as a news scroller. Intelligent use of color, elegant type and thoughtful spacing make this website particularly easy on the eyes.

Avery Dennison
At first glance, this might look like the website of any old manufacturer of office supplies. At second glance, though, brilliant little touches leap out:: the subtle grid, the attention to readability, the side-scrolling frame that harmonizes type, color and imagery. Oddly dissonant, the side and top navigations make this website looks almost as if it were a composite of different designs over time, a curiosity.

Con Edison
While the Con Edison website doesn’t have much to look at, the section for the annual report has been capably executed. Great attention to space, clean type and subtle movement are all used to great effect in this section where Con Edison addresses its corporate responsibility.

Grow Interactive
Most interactive firms don’t have exciting websites, which makes Grow stand out all the more. Grow demonstrates an expert use of type and illustration, moving your eye in perfect circles over the page, and nuances like the small interactive animals along the footer make it stand out among its peers.

PGI (formerly Premiere Global)
Here is another rare instance of a Canadian version surpassing its regional siblings. A playful take on the boxed blog/corporate theme, the website for PGI puts an interactive panel into the fold, an attractive way to draw users further into the website. The layout and color elements are evidence of authentic design acumen.

Rohm and Haas
This Fortune 500 company knows how to engage visitors online, with interactive features coming from every angle. The innovation in its products is reflected in the playfulness of the website, which encourages users to explore. Careful, effective use of otherwise familiar textures and themes support an engaging concept, to good effect.

Society for Environmental Graphic Design
While the inclusion of an organization of graphic designers in this showcase is no surprise, SEGD shines in its presentation of simple yet powerful elements. As any designer can attest, bold colorful shapes can easily run a design off course, but that isn’t the case here. SEGD has married vivid color with effective usability, creating a website that is smooth and wonderfully user-friendly.

Virb
Recently rebranded and redesigned, Virb demonstrates a capable grasp of visual elements even in this placeholder page: good typography, ample white space, soft shapes and forms — akin more to social media than standard corporate toadery, excellently indicative of the target demographic.

The Ones You Might Not Know About

Acro Media
A Web development firm that knows exactly when to stick to the grid and when to break boundaries. The most impressive parts of this website are the way certain elements react to hovering, such as the company name in yellow at the top left. Mousing over it flips the logo around to display a toll-free number. Clever.

AgencyNet Interactive
The spirit of AgencyNet is clearly the team of creatives behind its work. Showing the team at work (and play) behind the scenes in the office is refreshing, well executed and a great way to engage viewers to learn about the company.

AmoebaCorp
A small creative firm, AmoebaCorp shows expert use of type on its website. The type establishes a strong hierarchy, enabling the content and navigation to coexist on the left without confusing the user about functionality.

Imaginary Forces
Less is more with Imaginary Forces, which displays its brilliant work as prominently as possible by cluttering the screen as little as possible. Even without the showcased work, the website would stand out: take away the grand images, and you’d still have a clever arrangement of type and navigation, which is more than can be said of most websites.

Kurylowicz & Associates
This Polish architecture firm has produced a website that bleeds inspiration from every pixel. Elegant in its use of gray tones, this website combines line, shape and space in a way no other website does. Perhaps it took an engineer to think abstractly enough to design with such abandon, but the result is brilliance online, from start to finish.

Vancouver Convention Centre
Aside from the harmonious colors and subtle grid that frames the content, the Vancouver Convention Centre succeeds by going the extra mile to make its website visitors feel local: the “Cheers!” factor in action. Not many websites impart a sense of belonging with their welcome; that this one does makes a strong case for using heart as a design tool as much as shape, color and texture.

What Have We Learned Today, Bobby?

Finding beautiful corporate websites proved to be quite a challenge, and we had to make a number of unusual choices along the way. We sought regional versions of international websites, for instance, because multi-national companies present a number of differences among their sister websites. Bizarrely, did you know that many Fortune 500 companies don’t even have websites? Or worse, have non-working ones?

Admittedly, the word “corporate” is pretty loose in definition here. For the sake of impartiality, we did not discriminate by industry or field. We were more interested in collecting websites that employ interesting techniques. Because innovative and fresh stand out on the Web whatever the industry, putting aside traditional definitions is crucial.

For further reading on corporate websites and design, you may be interested in Corporate Blog Design: Trends and Examples, published August 2009.

Would you like to see more similar showcases on SM?

(al)

Business Card Design Starter Kit: Showcase, Tutorials, Templates

Posted in professional wordpress themes on September 4th, 2010 by professional wordpress themes – Be the first to comment

Professionals in any field should always keep business cards on them because you never know when you’ll meet a potential client, partner or like-minded person. Despite their small size, business cards are one of the most powerful and handiest marketing tools. Not only do they create a link between you and your new contact, they’re also a quick way to give a great first impression. Business cards promote your skills and achievements and serve as a little container for big ideas.

Don’t underestimate the process of designing business cards; a well-made card does not just share your contact details: it generates further sharing and buzz. Like any self-promotion tool, designing a business card requires solid brainstorming and careful implementation to get the best effect.

This post targets a diverse audience. It features a collection of remarkable business card designs that could help you in your search for creative ideas. The round-up of fresh tutorials and business card templates further down might come in handy for those who don’t have the skills or experience to design their own.

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

Showcase Of Original And Memorable Business Cards

Letterpress Cards

Letterpress printing has actually been the only form of printing text and images since it was invented by Johannes Gutenberg in the 15th century. Because of its distinctive qualities, such as crisp and tangible impression onto paper, letterpress work is now widely used for branding and identity development. Letterpress gives stronger visual definition to type and artwork and has a special touch, which is why it’s a popular technique for business card printing. Below you can see some beautiful examples of letterpress business cards.

John Henry Donovan
On this business card, the fine design created by Irish designer and developer John Henry Donovan is complemented by the printer’s excellent choice of paper and inking.

Greg Anderson
This card works because of the stylish dirty texture, good use of color and, of course, letterpress. Designed by Thomas Guy.

Chris Piascik
The funky typography of freelance graphic designer Chris Piascik is set off well by the letterpress work on his business card.

Space 150
This stylish letterpress business card was designed for the creative agency Space150 by designer Evan Nagan. The card is part of the agency’s periodic general redesign, which it conducts every 150 days. The elegant constellation theme and high-quality letterpress printing make for an excellent card.

White Rabbit
This card promotes the portfolio of the German photographer Florian Muller (aka the White Rabbit). The use of the negatives pattern incorporates the card owner’s occupation well, and the surface is enhanced by an embossed rabbit.

One in Zero
The business card of Hong Kong-based idea firm OneinZero is minimalist: the focus is on the letterpress type and paper texture.

Christian Garibaldi
The effective combination of blind and ink debossing, along with the subtle coloring along the edge, makes for a clean and exquisite business card that perfectly conveys the aesthetic of the photographer’s online portfolio.

Montage
Dallas Graham of Montage Creative has a simple and strong business card.

Paper Monkey Press
Some filigree letterpressing is evident on the card of Paper Monkey Press.

Second World Design
The guys over at Second World took their branding very seriously, resulting in the clean beautiful letterpress card you see below.

Kinetic Lens
This card was designed by photographer Riley Maclean for his company Kinetic Lens. Combining various letterpress techniques and a great set of red tones, this business card has a multi-dimensional feel. It’s printed on thick 220-pound-bond cotton paper.

Laura Moretz
A good use of letterpress on the front and back of this card and the labels make this card memorable. It’s printed on French Speckletone #140 stock.

23rd And 5th
Here is a beautiful business card showing fine typography and two-color letterpress. It was designed for the staff of the 23rd & 5th branding agency. This business card for the Director of Development features a QR code that drives contacts to a dedicated mobile website optimized for the iPhone, Blackberry and Android.

Die-Cut Business Cards

Something else that determines a business card’s memorability and appeal is shape. Today many individuals, businesses and organizations die-cut their cards, going beyond traditional dimensions. Die-cutting is an effective way to make a business card eye-catching, unique and even interactive. But remember that a die-cut card should still be compact enough to fit in a standard wallet or card holder. Alternatively, you could suggest some other way to carry or hold your card. Some noteworthy die-cut business cards are showcased below.

Derrick Mitchell
Derrick Mitchell, a designer from Kalispell, Montana, creates his business cards by hand with chip board, screen printing, labels and stamps.

Popupology
This cute die-cut business card is done entirely in-house by designer Elod Beregszaszi.

Dyalect
The chic design of this business card is accentuated by the custom shape and 16-point silk matte finish card stock.

Kaman
This concept-based business card was designed by Mehdi Tuchak for the Iranian multimedia company Kaman.

Sean Gerety
This lovely business card mimics a Moleskine notebook. While the front is glossy, the back is matted and can be used as a note card.

Amundson Films
Cheap card stock and moderate-quality print wonderfully fit the aesthetic of this vintage movie ticket business card. Great job, Alice Cho!

Alteroy
This die-cut masterpiece belongs to the Israel-based designer Alteroy. The cardboard icons can be separated. Much effort was put into this business card, and the result is absolutely worth it.

Carlos Vazquez
This super-cute business card might be the shortest route to any Mac fan’s heart.

Herbert Martin
Besides containing the contact info of German dentist Herbert Martin, this business card has another cool function: it helps you check your bite by way of a die-cut stencil. Designed by Petra Penz.

Truf
The business card is square and “combines a hand-crafted feel with the style of Russian propaganda posters.”

Classic, With a Twist

Most of the business cards below have a classic rectangular shape and standard dimensions… but that is where their classic-ness ends. Creative ideas and skillful implementation make these cards look anything but ordinary.

Coco
The amazing identity concept for COCO was created by Polish designer “Wallstreet Different Creature.” This business card, as part of the overall branding, is pure style and beauty.

Erich Hartmann
Erich Hartmann designed his business card to spell out a bunch of his skills, along with his main occupation. This clever idea is nicely visualized by way of a two-sided card, with an offset logo on the front and letterpress on the back.

Fran Rosa
Motion and graphics designer Fran Rosa takes different angles on both his website and business cards… literally.

Grill Me
To see the info on this business card, grill it against a fire, because the card is stamped with lemon juice for ink. Quite an original idea, but using this effect for non-essential information or for an image, rather than contact info, might be more reasonable.

Luciano Ferreira
A lovely typographic business card made by Brazilian graphic designer Luciano Ferreira for promotional purposes.

Sandra Boils
This elegant business card was made for Spanish jazz vocalist Sandra Boils by graphic design studio Estudio Menta.

Stepan Prokop
A beautiful artistic business card by graphic designer Stepan Prokop.

Synchromatik
The rich grass texture makes the card of designer Marko Manojlovic look fresh and beautiful.

Van Der Buzz
This transparent business card, mimicking an X-ray, belongs to Ukrainian advertising agency Van Der Buzz.

What What
These cool playful business cards were created by twin brothers, designers John and Edward Harrison, also known as What What.

Combining Techniques

When it comes to developing promotional material for a brand today, the variety of choice is impressive. With all the different printing techniques, the loads of diverse paper and material available and relatively cheap digital technology, the process of designing a business card is limited only by the designer’s imagination. The following business cards rely on both paper quality and printing methods to create a memorable experience.

TAM Cargo
Traditional at first glance, this business card can be transformed into a little cargo transport box. The card was design by Brazilian advertising agency Y&R for TAM Airlines.

Cinch Creative
Design company Cinch Creative printed its business cards on 60-point Blotter paper with a fine natural texture. Thanks to this and the debossed logo and text, the card is a pleasure for both the eyes and hands.

Feelme Crew
This creative business card in the shape of a clapper board was designed by Ralev.com for Bulgarian multimedia agency Feelme Crew.

Fiverr
Here’s a green approach to business card design. The cards for Fiverr CEO Micha Kaufman are made from recycled paper and cardboard. Moreover, the cards are completely hand-made. See details on Kaufman’s Facebook page.

Groundflights
This card, inspired by a boarding pass stub, was created by creative agency R3M1X3D for transportation company Groundflights. It is a successful mix of letterpress printing and die-cutting.

Herofilm
A beautiful business card stylized as a film frame. It was designed by Jimmituanart for Herofilm Productions.

Philosophy Communications
With a squeezable circle built in, the business card of PR company Philosophy Communications is a two-in-one solution. Brilliant work, wouldn’t you agree?

Rhino Studio
Premium paper, imitation rhino skin and a stylized typographic logo make this card chic indeed. Designed by Contreforme.

Paper Fortress
This vintage-looking business card, which features die-cutting, embossing and high-quality paper, was designed by the studio Second World for the film production company Paper Fortress.

Hear
This fancy silk-laminated card, featuring a spot UV coating, was designed by social media and design company Hear.

Gita Ayu
The cool illusion on this business card was achieved with a thin transparent plate that makes it look as though this faux-3D brick is broken. The amazing card was created by Saatchi & Saatchi, Indonesia, for a karate club.

Something Completely Different

The cards showcased below considerably expand the parameters of the business card format. It seems that business cards can be grown, played with and even eaten! Look at the craziest business card concepts around.

MODhair
Not only can you comb your hair with this business card, you can also play a classic rock song on it with your fingernail. The card was designed by Fabio Milito for a Rome-based hair salon.

Gitam BBDO Spicy
The Gitam BBDO agency uses spice sachets as business cards, associating each of its departments with a particular condiment.

BC Adventure Survival Training
The cards of BC Adventure remain extremely useful even in situations where a business card is useless. They are made of organic beef jerky and are good to eat for up to a year.

RDA
To promote one of his projects (an interactive chopping board), designer Sam Gough created 20 wooden business cards, carving his project’s title and contact info neatly into each.

Dept of Energy
With its business “cords,” Dept of Energy shows a skillful play on its identity and style.

Lush
This business card is a thin envelope stuffed with grass seed. The clean design, clever copy and sneaky seed surprise make for an adorable card. Designed by Brandon Knowlden.

Taberu Me
For the most desperate self-promoters, peanut business cards are not a bad idea. Taberu Me uses innovative CO2 laser engraving technology to print on the peanuts. But before you hands yours out, make sure no squirrels or chipmunks are around.

Wes Thomas
This business card design is an ongoing project of Philadelphia-based industrial designer Wes Thomas. The laser-cut card can be quickly transformed in a cute desktop toy. This is no ordinary concept and is pretty labor-intensive, but who would refuse such a business toy for their desk?

Business Card Galleries

Only the truly unique are remembered. When designing anything for yourself, it’s always useful to look around for fresh ideas. Here are permanent showcase galleries where you can find trends and best practices for business card design.

Card Observer
Cardonizer
Card Nerd
Cardview
CardGala
Creattica
CardsPress
The Art of the Business Card (Flickr pool)
BusinessCardCritic

Tutorials

To get you started on your own business card, we’ve selected some fresh and useful tutorials and guides that cover various issues you might deal with in this area.

Create a Print-Ready Business Card in Illustrator
In this tutorial, well-known designer and blogger Chris Spooner walks you through the process of creating a fun business card with a sketched illustration.

How to Create a Stylish Business Card Template in Adobe Photoshop
In this tutorial, you learn how to create an elegant minimalist business card design in Photoshop. The source files are available for free downloading.

Create a Grunge Print-Ready Business Card
Use this tutorial to create a business card with nifty faded brush strokes in Photoshop.

How to Create a Nebula Background in Photoshop
Learn how to design a business card with an astral background.

Print-Ready Business Card Tutorial
This tutorial explains how to create a print-ready business card with a clean dark design in Photoshop.

How to Make a Print-Ready Business Card in Photoshop
In this tutorial, you will learn how to create a two-sided business card with crop marks and bleed.

How to Design Your Business Card
This article discusses the basics of business card design and covers some best practices.

Business Card Design Walkthrough
Along with other step-by-step tutorials, a detailed case study like this one might be useful to you.

PSD Tutorial: Design a Dirty Business Card
Learn how to create a simple business card, complete with grungy texture.

Business Card Tutorial in Inkscape
Here is a detailed guide on how to design a business card in Inkscape. While the result shown does not look that great, the principles of working in Inkscape are described quite well, so you can get a better result using this open-source graphics editor.

Business Card
If you like the business card shown below, learn how to create it in Photoshop in this tutorial.

Making Creative Business Card
This tutorial shows how to make a nice business card in a matter of minutes.

How to Design a Print-Ready Business Card Design in Photoshop
This business card tutorial includes a couple of bonus templates, which you can download in PSD format and use for free.

How to Design Business Card
Learn how to create the unconventional and attractive business card below.

Grungy Business Card
Another variation of the grunge design is explained in this guide. The image preview and PSD file are free to download.

How to Make your Own Photographic Negative Business Cards
Now, here’s a completely different take on business card design. Photographer Steph Goralnik shares his technique for crafting a unique photographic negative business card.

How to Choose Business Card Paper
Paper is an important consideration when printing business cards. The right paper can make your card shine, while poor-quality stock can spoil even a top-notch design. Read this article to learn the key points and differences between various types of paper.

How to Choose the Right Paper
Although quite old, this article contains some useful tips on choosing the right paper for your business card. A solidly written article.

Templates

A template is definitely a great option for those who don’t have the skill to create a business card on their own. But even if you’re a professional designer, you may need the job done very fast or simply want to save time making customizations. This is when a template comes in handy. Below you’ll find a selection of well-designed free and commercial business card templates that you can take advantage of in your own projects.

Free Templates

Most of the templates in this category are free for personal and commercial use, but please be sure to read all accompanying legal usage notes before downloading the files.

Free Business Card Design from IceTemplates
A simple yet attractive business card design, ready to print and customizable. The ZIP container includes two PSD files and a font folder.

I love dA Business Card

This nifty business card design was created by graphic designer depart on the occasion of deviantArt’s birthday. The template is available for free download in both PSD and Ai formats.

FreelanceSwitch Business Card Template
This Adobe Illustrator template can be customized for any freelance profession. The pack comes with templates for writers, coders and designers.

Bokeh Business Card | More
The PSD template for this business card is available in high resolution and is ready to print.

Free Business Card Template for Photoshop (PSD) | More
This minimalist grayscale business card template is available as a free download at DeviantArt.

Free Business Card Design Pumpkin
This “Pumpkin” business card template features 300 DPI resolution and CMYK color mode for professional printing, front and back sides and four color schemes: pumpkin, cream, Indian pink and brown.

Construction Hazard Stripes Theme | More
This print-ready business card template is in Photoshop format.

Free Abstract Blue Business Card Template
This double-sided PSD card template includes well-organized layers and is in CMYK color mode for easy editing.

Die Gallery
In this gallery, you’ll find some unusual card shapes, all for free. All files are in EPS format.

Business Card Template
Here is a blank template for a standard US business card. Both JPEG and PSD versions of the template are available for free downloading.

Noise Modern Card | More
This download pack includes two full-layered PSD files for the front and back. The dimensions are 3.5 x 2 inches, and the resolution is 300 DPI.

Minimax Positivo Business Card Template
The template has six color variations and features a letterpress effect. The template package includes a PSD file, PDF help file and preview image.

Business Card Template (Vector) | More
A free Adobe Illustrator business card template in 3.5 x 2 inch format.

Vertical Business Card Vectors | More
An EPS file containing 18 vertical business card templates with JPG preview.

Free business card templates
10 free business card designs in PSD and TIFF formats.

Seextwood Business Card | More
A minimalist template in CMYK mode and 300 DPI resolution. The dimensions are 3.5 x 2.5 inches.

4 Blue Personal Business Card Templates | More
A set of four PSD business card templates in blue. The dimensions are 3 x 2 inches, and the resolution 300 DPI.

Premium Templates

Pure Style Business Card Template | More
A minimalist two-sided business card design (3.5 x 2 inches) that can fit practically any profession or brand. The template comes in high resolution and requires Adobe Photoshop 8 or higher for editing. Price: $7

Blue Monster Business Card Template | More
This funny template is ready to print and can be easily customized in a vector graphics editor. Price: $4

Business card (set 17) | More business card templates
These cheerful business cards might appeal to people in creative fields. Three license types are available; the basic one gives you this set for $5.

Typography Mini Business Card | More
These bright typographic mini-cards come in two styles, grungy and clean, and include a black and white version for low-cost printing. The templates are print-ready and can be edited in Photoshop. Price: $6

Tender Flowers Business Card | More
An original floral design that would work well for wedding photographers. It is print-ready and can be customized in Photoshop. Price: $7

Blue Bubble business card | More
This clean and airy design will appeal to fans of minimalism. It is in print-ready CMYK, 300 DPI, and includes two PSD files and two high-quality JPG images. Price: $5

Black Business Card Template | More
This business card has a rather universal design and would serve a personal brand, company or other project equally well. It is print ready; all you need to do is change the default text. Price: $7

The Black Family business Card Pack | More
These super-original and cute business cards might be good for showing off members of a creative team. They are two-sided, in CMYK and 300 DPI, easy to edit and print-ready. Price: $6

You may be interested in the following related posts:

Business Card Design: Better Than A Plain Ol’ Business Card
The Ultimate Round-Up of Print Design Tutorials

(al)

Improve Your E-Commerce Design With Brilliant Product Photos

Posted in professional wordpress themes on September 3rd, 2010 by professional wordpress themes – Be the first to comment

in Improve Your E-Commerce Design With Brilliant Product Photos

Product photography could well be the single most important design aspect of any e-commerce website. Without the ability to touch, hold, smell, taste or otherwise handle the products they are interested in, potential customers have only images to interact with. Ultimately, the softer, tastier, flashier and more attractive your products look to shoppers, the more confident they’ll feel about purchasing from you and the better your conversion rate will be.

While any product can look great in a photo (sometimes deceptively so), keep in mind that your images should match your website’s overall aesthetic and your company’s image. Let’s start with a few great examples of how online retailers have incorporated high-quality product photos onto their websites. In this article, we will focus on images of actual items, rather than models, events or landscapes.

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

Examples Of Beautiful Product Photography

Uncrate
Uncrate is probably the best-looking men’s shopping blog, and a lot of the credit goes to the product photos in its posts. One of the criteria for its blog posts seems to be for product photos to be incredibly well shot. This is a great place to get inspired for your own product photography project.

Ties.com
Ties.com has years of experience with dress-tie photography and has improved the quality of its photos over the years. Now it uses a lightbox effect to offer close-ups of its ties. The layout of the website is similar to that of Amazon. As with any website of this nature, super-clear photos are essential to compensate for the customer’s inability to feel the ties.

Made.com
Turning to furniture, UK website Made.com does a great job of showing its products from multiple angles and perspectives without cluttering the website or making the images feel redundant. Its lamps, for example, can be viewed up close or at a distance within the same frame, while its tables and desks can be viewed from both eye level and low angles. Again, the selective use of color throughout the website directs attention to the products themselves, while giving the overall design a sleek minimalist feel.

Harry Winston
High-end jewelry website Harry Winston emphasizes the brilliancy and luxury of its products by integrating them in a relatively stripped-down website. The sharp, vibrant images of colored gemstones and sparkling crystals command the viewer’s attention on every page, without overpowering the other elements of the design. The brilliant reds, greens and oranges of these products contrast with the neutral black, white and gray color scheme, while complementing the refined cursive and rolling script scattered throughout the website.

Louis Vuitton
Another up-market website, Louis Vuitton also uses wonderful high-res product shots and zooms for its non-clothing items, such as calendars and wallets. While this website predictably has numerous photos of models posing with the products in lifestyle and fashion vignettes, it also does an excellent job of emphasizing the craftsmanship and quality of its items.

Moben
Kitchen designer Moben has a much busier website, using pictures and videos of its products in various locations. The photos here show potential customers the innovative design and style of these products in a unified setting, while still offering detailed shots of individual items. This is a great strategy for e-commerce companies that sell large products or that sell services that are difficult to visualize.

Weber
Moving out of the kitchen and into the backyard, Weber, a well-known maker of grilling and other cooking equipment, has a fine product photography area on its website. The website itself is pretty basic, as you might expect, without much in the way of attractive text or icons, but the sharp images and high-quality close-ups add a lot of visual appeal. If nothing else, this is a good example of how good images can help a website overcome a mediocre design.

Bang & Olufsen
Turning to a website that at first glance seems a bit less inviting, audio-video manufacturer Bang & Olufsen opts for a harder, more architectural aesthetic than some of the other websites we’ve looked at. While there is plenty of black, gray and white throughout, this website is far from cold and sterile, thanks to the side-sweeping product photos, which are bright but do not compromise the futuristic feel of the design. The pages of Bang & Olufsen’s collection have another nice touch: product thumbnails glow when you hover over them.

Leica
As you might expect from one of the world’s biggest names in photography and imaging technology, Leica has some high-quality images, especially of its camera equipment. You won’t find a ton of photos here, but in keeping with the brand’s no-frills, no-nonsense approach, the pictures you do see are high-res and sharp, a perfect example of how to do more with less.

Victorinox
Another brand known for precision equipment, Victorinox has an impressive range of visual content on its website, especially in the product area. The sliding photo gallery in the “Timepiece” section, for example, captures both the mechanical and aesthetic beauty of the brand’s watches: you can really imagine how it would feel to hold and wear the watch, while still being able to see the complexity of its internals. The website is also notable for its great examples of selective focusing and dramatic lighting, which really make the products eye-catching.

CuffLinks.com
CuffLinks.com clearly puts effort into photographing its vast selection of cufflinks. It offers customers a good view of its cufflinks from all angles. It also shows the packaging or box that the cufflinks will ship in, giving us a well-rounded impression. Fortunately for this company, the size and inflexibility of cuff links make them a relatively easy product to photograph. Take a look at their many other products and the different angles the shots have been taken from.

Ties ’n’ Cuffs
Ties ’n’ Cuffs is another e-commerce store with a large selection of cufflinks, ties and other accessories. Like CuffLinks.com, it offers a handful of photos for each product. But Ties ’n’ Cuffs lets customers also zoom into its cufflinks, giving a super-clear picture of product details that one might miss in a wide shot and showing how the crystals reflect the light. Browse around this website to see how they’ve implemented their zoom function for many different products.

Chocomize
Chocomize lets chocolate lovers make their own custom chocolate bars by allowing them to select from a variety of ingredients. Here is a great example of using photos for products that offer a high degree of customization, without bogging down viewers with too many choices and images. The pictures on Chocomize—bright, glossy piles of candy, nuts, berries and decorations that can be added to a milk, dark or white chocolate base—are relatively uniform in size and shape yet distinctive enough to be unique and noticeable. It also has detailed photos of each ingredient.

Threadless.com
The t-shirt giant Threadless.com has a particular culture, and it has done a great job of keeping that culture intact with its photos, while still keeping the product itself front and center. Check out the many creative ways that it displays its t-shirts.

Designbyhumans.com
Another great t-shirt company. It has a super-clean website and keeps the product well in focus, despite the human models (which can sometimes distract from the product).

Apple
While it sounds cliché, the product photos at Apple would make anyone want to purchase an iPad or iPhone. With a limited number of images and a simple twistable 360-degree viewing mode, the designers behind this website visually sum up Apple’s mantra of simplicity and fun.

Four Steps Of Product Photography

1. Prepare Product

To take quality photographs, the complexity and time required will depend greatly on the type of product you’re shooting. Some of the easiest products to photograph are solid objects such as cups and toys; you may just have to give them a good polish before shooting.

Clothing, textiles and other items that can bend, stretch and wrinkle are much harder to photograph and could require hours of ironing and arranging to get a perfect result. Details, like whether a shirt collar is straight, will determine whether the photographs look like they were shot in a serious studio or by an amateur with a point-and-shoot camera.

Whatever the product, inspect it carefully for tears, stains, chips and other imperfections before beginning.

2. Light

To get a great-looking photo, lighting is crucial. Fortunately, with many products, you don’t need much equipment to get a well-lit balanced exposure. For objects the size of a digital camera or smaller, you can use an EZcube light tent with two small 30-watt bulbs on either side. For larger items, such as clothing, two 60-watt soft boxes on either side of the product should suffice. Also consider using a light reflector to get rid of any shadows and obvious highlights.

3. Set Your Camera

Watch out for noticeable light reflections on shiny surfaces. Even though most product photos look very staged, you don’t want yours to look too artificial.

Obviously, you’ll need a camera to take pictures, so make sure you have one. It doesn’t have to be the best or most expensive on the market, but it should at least have manual focus and shutter and aperture controls. These are all standard on most SLR cameras.

Once you’ve arranged the product and lighting equipment, take a few test shots until you get an exposure that isn’t too bright or too dark. Keep track of the shutter speed and aperture settings of your best photos, and use them again in future to maintain consistency. If you aren’t sure how things like shutter speed, aperture and lens focal length affect images, you might want to do some basic research.

If you understand the basics of photography but your photos still don’t look quite right, don’t worry, because you may have to change several in-camera settings before getting the kind of shots you want.

If your pictures look soft or don’t enlarge well, make sure the ISO setting on your camera is as low as possible. The ISO setting affects the light sensitivity of a camera’s photo sensor. By setting yours to 100 or 200, you’ll get a higher-resolution shot with less grain and pixellation. While you’re at it, change the camera’s image size to the highest possible setting. Most cameras default to a medium-sized resolution (around 1500 x 850 pixels).

Next, make sure the white balance is set to handle the kind of light you’re working in. Most cameras have modes for incandescent, fluorescent, direct sunlight and cloudy environments, and you should adjust your camera’s white balance according to these different conditions. If the white balance controls are off, your images might either look too bright or have a sickly yellow cast, especially if your product is white.

Color control settings are important to consider as well. Most digital cameras allow you to select several degrees of color saturation, ranging from muted to normal to vibrant. If your product is already colorful (flowers, for example), a less saturated setting would probably work better. This is especially true with red, which many digital cameras (even high-end ones) have difficulty processing.

Finally, make sure the image format is appropriate. If you’re just putting the photos online, high-resolution JPEGs are probably fine. RAW files, on the other hand, carry more data because they aren’t compressed like JPEG or TIFF files, and they carry fewer digital artifacts; but they take up more space and require special codices and converters to be viewed and edited. Some cameras have a “RAW + high-res JPEG” setting, which gives you both compressed and uncompressed versions of an image. Do a little research on your camera when deciding which format to use, because some models are automatically set to give a softer focus in JPEG mode.

4. Edit the Photos

This is the final and perhaps most important step of product photography. This is when you really take your photos to the next level and make them pop. If you’ve gotten the lighting right and your camera properly configured, then you are well on your way to great photos. Factors such as unwanted colors and objects that couldn’t be removed during the shoot, though, will require some adjustment.

Surrounding a product in white space is common practice. This makes the photo convenient to use on websites and in catalogs because it won’t clash with other elements. To make a product float freely in white space, you have to remove the background with masking in your photo editing program. As common as it is, it is often done poorly, making an otherwise fine photo look amateurish. Masking properly takes time, especially when you are not working with straight lines. Photoshop CS4 has a great “Refine edge” tool that makes it much easier to correct crooked lines.

Many people also use a variety of artistic effects in Photoshop and other bitmap editors to subtly manipulate their photos. One such effect is the soft or selective focus, which, as the name implies, softens a portion of the photo while leaving other areas sharp. This is great for creating the illusion of depth and size, and the trick is often used for pictures of food, jewelry and watches (see the examples above). Depending on your lens, you can get a similar in-camera effect by setting the aperture low and zooming in on the product from a distance.

Also, depending on the product and the look you’re aiming for, you could also experiment with the perspective controls in Photoshop. Most people assume this tool is only good for tall buildings and scenes with noticeable vanishing points, but you can also use it to make geometric objects such as tables and desks appear overpowering, especially when photographed from a low angle (see Made.com for examples).

Additional Tips

Blend Photos With Design

When putting together a collection of product photos, ask yourself if the images you’re taking will match the color scheme and aesthetic of your website. The easiest way around such a challenge is to just keep things simple and minimalist.

Use a Gray Card

A gray card is a middle-gray reference that you can set your camera to for accurate and consistent color rendering, especially on older cameras that have limited controls for white balance and color. A gray card gives a more realistic depiction of your product’s color and reduces the amount of post-exposure color adjustment you have to make later. They can be bought at any photography store and for about $10. Most cameras have a function for taking gray card test photos; read through the owner’s manual carefully.

Get a Flexible and Sturdy Tripod

Taking sharp, consistent and professional product photos is nearly impossible without a good tripod. It can be any regular tripod, but if you are shooting a product on the floor from above, you’ll probably need a horizontal extension: as the name implies, this tool extends horizontally from the head of the tripod so that you can position your camera directly above and parallel to the product itself. This prevents linear distortion, vanishing lines and uneven image depth.

The tripod you need will depend on the size of your camera. If you have a heavy-duty SLR with a long horizontal extension, you’ll need a solid tripod to support the weight of the camera and prevent shaking.

If you put your tripod in storage, make sure you are able to reset it to the same height and position for your next shoot. Measure the legs of the tripod, and mark with tape where the feet of the tripod should stand on the ground.

Use Light Reflectors

As mentioned, light reflectors give photos an even spread of light and a fresh look. They come in many sizes and shapes. A medium-sized light reflector, one as big as a large pizza, should be more than enough for product photography. Anything bigger is more appropriate for videography or photographs of people.

Reflectors come with three different surfaces: silver foliated, gold foliated and white. The gold- and silver-sided reflectors usually reflect the most light, while white reflectors give a softer, warmer glow.

Define the Decision-Making Process

If your standard of quality is high or you’re working on a team, the lack of a decision-making process can waste a lot of time. Set clear criteria for what you’re looking for, and make sure your workflow allows all parties to follow the criteria without constant interruption.

Outsource When Appropriate

If your product is easy to shoot, then outsourcing is a great option. The most important points to discuss with the photographer beforehand are quality and their willingness and ability to contribute to the editing process.

The quality of the photos will depend on the time spent editing them. Some photographers don’t want to get involved with this part, feeling that image masking and other such tedious tasks are below them. Cover all your bases before starting with the photographer, otherwise the process could turn out to be more expensive and time-consuming than you expected.

Further Resources

If you liked this article, then read Smashing Magazine’s recent article How to Use Photos to Sell More Online for another look at photography and e-commerce.

Also consider these:

An extensive practical guide to photographing various products.
A guide to photographing watches, jewelry and other products.

Zachary Lowell contributed to this article.

(al)

New eBook From Smashing Magazine: Mastering Photoshop For Web Design

Posted in professional wordpress themes on September 3rd, 2010 by professional wordpress themes – Be the first to comment

Mastering Photoshop for Web Design is the third book in our eBook series, and it’s definitely the best eBook we’ve published so far. It was written from scratch by our regular writer Thomas Giannattasio, exclusively for Smashing Magazine and its readers. We are very proud of the result, in particular because of the high quality of tips, ideas and techniques that Thomas — who is a deep expert in Adobe Photoshop — presents in his book.

Mastering Photoshop is written for advanced and intermediate designers who want to brush up on their workflow and improve their Photoshop skills. The eBook contains 178 pages, explaining fundamental techniques that Web designers need to know to produce high-quality work in Photoshop. You won’t find any generic step-by-step tutorials or learn random effects. You will gain a profound understanding of what you can do with Photoshop and how to use it effectively in your work.

All chapters have undergone a careful technical review by well-known designer, illustrator and speaker Elliot Jay Stocks. The book was proofread by our regular proofreader Andrew Lobo, and it has an attractive layout. The PDF can be printed and read on all devices.

The Author

Thomas Giannattasio is an interactive designer who resides in the Washington DC metro area. He specializes in Web design and front-end development, particularly art direction, website design and application design, and has 14 years of experience. Thomas cares strongly about typography, simplicity and user experience. He works as a senior designer for a global marketing firm and freelances under the name attasi.

Thomas’ articles on Smashing Magazine prove his expertise in Photoshop: The Ails of Typographic Anti-Aliasing and Unknown Photoshop Tricks and Time-Savers are two of the most useful Photoshop-related articles that Smashing Magazine has published over the years.

The Expert’s Opinion

“Photoshop is a powerful tool, and although the basics can be easy to grasp, mastering the application can be extremely difficult. This is where Mastering Photoshop comes in: it takes readers through the app in depth and relates all tasks back to the creative process. There’s much to learn in here, for beginners and experts alike.”

— Elliot Jay Stocks, designer, illustrator and speaker

The eBook, in PDF format, is ideal for archiving, for armchair or mobile reading (including the iPad and iPhone via iBooks and other apps) and of course for printing. You can order your copy of Mastering Photoshop for just $19,90 (or €16.95 if you live in the EU) starting now and exclusively in our Smashing Shop.

The book contains eight chapters:

Color Management
Colors can appear lighter or darker, more or less saturated, cooler or warmer, or just plain wrong depending on the user’s environment. This can be quite a problem, especially with a client’s brand-specific colors. As Web designers, our responsibility is to ensure that the experiences we craft are as true to the original as possible.
Paths
While Illustrator’s vector tools are much more powerful, Photoshop’s benefit lies in its ability to blend vector and raster data together seamlessly. Because Photoshop documents are based on a pixel grid, the path tools in Photoshop make them superior to Illustrator for designing on-screen media.
Layer Styles
Layer Styles are essential to creating flexible and non-degradable documents, because they’re separated from the layer’s actual content. In this chapter, we’ll cover how to create great-looking and reusable styles. We’ll also cover some unique effects and non-typical uses that help to consolidate excess layers.
Brushes
Mastering the digital brush is by no means easy. It carries the same difficulties as the sable brush hidden at the bottom of your art bin. In fact, the difficulty is multiplied by the disconnect between the hand and monitor. Developing Photoshop brush skill takes time, but it is well worth the effort.
Typography
While the majority of type on the Web is rendered by HTML, Photoshop is still necessary to handle treatment beyond the grasp of CSS. In this chapter, we’ll explore Photoshop’s type tools and discover ways to maximize the software’s typesetting capabilities.
Photography
A photograph — especially of the human face — immediately draws the user’s attention and can be used to direct eye flow to important areas of the page. Placing a large photograph above the fold is a common way to provide an entry point to the content. Because photographs are high above other elements in the hierarchy, they need to be handled with care and precision.
Exporting
Once you’ve polished every last pixel, it’s time to get your work into the browser. This is a pretty straightforward process, but properly optimizing your images is crucial. You need to maintain a balance between clarity and download speed. This requires multiple formats, varying levels of compression and other optimization techniques. In this chapter, we’ll explore the workflow of exporting images via the “Save for Web and Devices” dialog.
Summary

Sample Chapter and Screenshots

You can download the Chapter 4, Brushes (4.7 Mb, PDF) for free. Please consider buying the eBook if you find it useful or helpful.

Large view

Motivation behind the book

In the foreword, Thomas describes his motivation:

“This book was written in the hope of filling a gap — a gap that has existed for as long as designers have been using Photoshop for Web design; a gap that we so often fill with tutorials focused on the latest trends and on
inspiration galleries that are quickly browsed and forgotten; a gap that is growing as quickly as our technologies. It’s a gap of foundation.

The fast pace of the Internet has focused us on the latest and greatest techniques, which typically have a lifespan of only a few months. Rarely do we focus on the fundamentals — the principles that outlive the trends. Unfortunately, the principles often appeal to us less than the shiny and new.

Photoshop tutorials offer quick results. They hold our hands step by step until something incredible appears, but they rarely explain in depth the principles that allow us to create something unique and incredible of our own. If you’re a beginner, I hope this book gives you the comprehension you need to bring your ideas to life. If you’re a veteran, I hope it unveils some of the mysteries that have always boggled you.”

The book is not protected by DRM and is available exclusively in the Smashing Shop. Please respect our work and the hard effort of our writer. If you received this book from a source other than the Smashing Shop, please support us by purchasing your copy in our online store.

Thank you.

Task:	Time allotted:
Content audit	15 hours
Develop content strategy	15 hours
Make WordPress theme changes	20 hours
Import data from old website	15 hours
Test on multiple browsers	5 hours
Total	70 hours

A Design Is Only As Deep As It Is Usable

Posted in professional wordpress themes on August 31st, 2010 by professional wordpress themes – Be the first to comment

in A Design Is Only As Deep As It Is Usable

There are well-known proverbs that imply (or state outright) that beauty is superficial and limited in what it can accomplish. “It’s what’s inside that counts” and “Beauty is only skin deep” are a few simple examples. Because the Web design industry is now flooded with a lot of raw talent, and because virtually anyone can create a “beautiful” website, recognizing a truly beautiful website experience is becoming increasingly difficult. What appears beautiful to the eye might in fact be more of a hindrance.

In this article, I hope to provide a clear demarcation between what is perceived by most to be beautiful in Web design and what is truly beautiful, along with some guiding principles to help designers today create websites whose beauty is not superficial, but rather improves and enhances the user experience.

[Offtopic: by the way, did you already get your copy of the Smashing Book?]

Gradients, Drop-Shadows, Reflections, Oh My!

A lot of things could fall in the category of “beautiful” or “attractive” in the context of Web design. But a number of factors would make such beauty shallow. Is a website more attractive if it has tastefully placed drop-shadows, gradients or reflections? What if it has an eye-pleasing color scheme? What about big over-designed buttons? Could these be standards by which a design would be deemed beautiful?

If you’ve been keeping tabs on the Web design industry in the last five years, you’ve probably at some point visited one of the many CSS galleries. Visiting those inspirational showcases is great, and I’m sure we’ve all done it, but we need to be careful not to fall into the copycat syndrome, whereby we prettify our websites for no other reason than to make them CSS gallery-worthy.

Mint.com has everything a client could ask for in a “Web 2.0 design”. Does that mean it’s beautiful?

The designers, developers and content strategists who planned and executed many of the websites in those galleries did what they did because they felt it would truly benefit the user experience and their clients’ bottom line. The truly beautiful websites and apps in those showcases are not just visually beautiful; they’re usable, accessible and optimized to benefit both the user and website owner.

The Dribbble Syndrome

With the recent popularity of Dribbble, the copycat syndrome might be gaining momentum. On Dribbble, a designer reveals a sample of something they’re working on, and then the style of that small snippet starts spreading. The context and strategy underlying it are unknown, yet the style is still viewed as beautiful in and of itself. The designer may have taken hours, days or weeks to arrive at the decisions that informed the design, but now that it’s out in the wild, the snippet becomes nothing more than eye candy.

Dribbble shows out-of-context design shots. Is this a bad thing?

Of course, the intent of this article is not to blame those who share their designs on Dribbble, nor to blame those who review these designs and offer feedback. But we mustn’t lose sight of the fact that every design decision should have significant reasoning behind it.

The Style-Less Comparison

How do we measure beauty? If a website is difficult to use, then isn’t its beauty without purpose? Look at the comparison in the image shown below.

The Nettuts+ logo and navigation bar.

I think Nettuts+ is a very nicely designed website. But is the fancy navigation and logo section shown on top more usable than the plain blue and white version below it? Taken at face value, some might argue that the plain version is more usable (if only slightly) than the “beautiful” one.

The Facebook home page.

While the Facebook home page shown on top might not appear the most beautiful design to many of us, it still contains attractive aesthetic elements (colors, gradient background, styled buttons, etc.). But when most of these minor elements are made plain, does it really affect the usability (of course, after you increase the color contrast for the form labels in the right upper corner)?

If prettiness is really as important as we think, then the current Facebook home page should perform much better than the plain alternative. How do we know, though, that the plain version wouldn’t outperform the adorned version?

What Makes A Design Usable?

I’m not about to make a case for bringing back blue links on a white background on every website. In fact, as I’ll explain, both Nettuts+ and Facebook may very well qualify as truly beautiful websites. The examples above were more illustrative, and not meant to criticize the designers who worked on them.

Rather, I’m encouraging designers to consider two things when adding “beautiful” enhancements to their designs.

Responsive and intuitive page elements,
Branding and consistency of theme.

Focusing on these two things will give every pixel in a design a purpose and will contribute to the website’s overall usability. Let’s consider both of these, with a few simple examples to illustrate their effectiveness.

Responsive and Intuitive Page Elements Make a Design Usable

If a design element makes a website feel more friendly or gives subtle hints as to what’s happening, then this adds to its usability. Look at the simple example below from Design Informer:

On the Design Informer website, hover over the search box in the top right, and you’ll notice it brightens up. This is not intrusive in any way, and it looks especially elegant in WebKit browsers, because the brightening animates with CSS3. The default look of the search box could be a bit brighter to improve the general usability of the site, but in this specific case the idea counts more than the execution.

This very simple effect conveys to the user that this is a usable element, and it makes the search box more inviting. It’s a ridiculously simple technique but has a very powerful effect.

But just because you can use an animated effect does not mean you should. If, as in the case of Design Informer, the effect makes the UI more intuitive and responsive, then it is justified. This statement by Stuart Thursby sums it up well:

If designers think that using HTML5 and CSS3 makes them a better designer just because they use them, then they’re sorely misguided.

Include an element only if it accomplishes some usability-related purpose. If the design is not made more usable by a particular technique (whether via CSS3, JavaScript or something else), then the designer should reconsider whether the extra code is worth the effort. Decoration only goes so far and often has an effect opposite to the one intended, so consider yours carefully before including it in your design.

Another example of an animation that enhances usability is found on Soh Tanaka’s new website. Look at the screenshot below from this post on his blog:

When you hover over any presentation of code on his website, you’ll notice that the block expands to the right (probably via jQuery, so it would work in every browser).

Again, a simple effect, but not just eye candy; it has a purpose. In tutorials, HTML code is often too long to fit in the highlighter, so the code either wraps or creates ugly scroll bars. Tanaka’s solution makes the code more inviting readable, and it decreases the likelihood of wrapping or scroll bars.

So whether we’re talking about text links that change color on hover, buttons that move when clicked, AJAX that creates subtle yet intuitive effects, we can take a design beyond mere decoration in many ways and truly enhance its usability.

Branding Makes a Design Usable

If an element contributes to a website’s overall branding, image or reputation, then it’s safe to say that it contributes to its usability. Properly planned and executed branding is not superficial or decorative. Carefully chosen colors and graphic elements create an inviting atmosphere that leads the user to make easy decisions and helps them interact with elements smoothly and intuitively.

Look at the screenshot below from 10k Apart:

The laurel wreath in the background and the distinctive illustration immediately distinguish this website as belonging to A List Apart. Consistency in branding contributes to the usability of this ALA microsite and makes it feel inviting and familiar.

And then we have the beautiful and intuitive design for Launchlist:

This screenshot doesn’t do justice to the website’s look and feel; you’ll have to poke around to really experience it for yourself. The design might appear decorative and superficial at first glance, but it’s not. The elements work together to create a consistent and inviting atmosphere, extending the “launch” theme throughout with subtle animations.

Usable Doesn’t Have To Mean Ugly

My purpose here was not to tell designers to forget about slickness, sexiness and beauty. This should be obvious from the beautiful examples shown, which certainly qualify as both usable and attractive. No one expects owners of beautiful websites to suddenly drop their enhancements in favor of the Craigslist look just to make them more usable.

Rather, this post is just a reminder that eye candy is important, but it isn’t everything, and that for a design to be truly beautiful, it has to be functional, have purpose and contribute in some way to the website’s intuitiveness, usefulness and branding. All of these things contribute to the overall effect of a design.

In Defense of Eye Candy
Research proves attractive things work better. How we think cannot be separated from how we feel. The next time a boss, client, or co-worker scoffs at the notion that beauty is an important aspect of interface design, point their peepers here.
Looks Matter Because We All Have Feelings
An article about the importance of aesthetics in web design.
Stop Designing Aesthetics, Start Designing Emotions
Gradients and colors and contrast are all good, but there’s a more important side to web design that many people overlook most of the time: Designing emotions. A beautiful article on Web Designer Depot.
Stop Inspiration Hunting When Designing
There is definitely a difference between looking at sites for research purposes when beginning a design versus looking at sites just to find some cool stuff you might be able to use. Nice article on Drawar.
Web Design? Screw Aesthetics
“When I talk about design I try to do more than mention the aesthetic/visual aspect of it, but it seems people tend to focus on that aspect the most. Web design however adds many more elements to the elegant answer that we are so frantically searching for.” Another interesting article on Drawar.

(al)

Beautiful Corporate Websites

The Ones You Would Expect

The Ones You Should Have Thought Of

The Ones You Might Not Know About

What Have We Learned Today, Bobby?

Would you like to see more similar showcases on SM?

Showcase Of Original And Memorable Business Cards

Letterpress Cards

Die-Cut Business Cards

Classic, With a Twist

Combining Techniques

Something Completely Different

Business Card Galleries

Tutorials

Templates

Free Templates

Premium Templates

Related Posts

Examples Of Beautiful Product Photography

Four Steps Of Product Photography

1. Prepare Product

2. Light

3. Set Your Camera

4. Edit the Photos

Additional Tips

Blend Photos With Design

Use a Gray Card

Get a Flexible and Sturdy Tripod

Use Light Reflectors

Define the Decision-Making Process

Outsource When Appropriate

Further Resources

The Author

The Expert’s Opinion

Sample Chapter and Screenshots

Motivation behind the book

What Causes A Deadline To Break?

Rate Deadlines By Severity Of Consequences

Strategies For Preventing Deadline Crises

Plan For Unpleasant Surprises

Mitigate A Deadline’s Threat By Adding Other Deadlines

Plan Sacrifices In Advance

Practice

Conclusion

Download the theme for free!

Features

Behind the design

Related Posts

The Argument

Process Makes Perfect

The Foreman Or The Architect

A Call To Arms

Further Reading

Gradients, Drop-Shadows, Reflections, Oh My!

The Dribbble Syndrome

The Style-Less Comparison

What Makes A Design Usable?

Responsive and Intuitive Page Elements Make a Design Usable

Branding Makes a Design Usable

Usable Doesn’t Have To Mean Ugly

Related Posts

Website and Account Configuration

Versioning Option Arrays

Don’t Release Too Soon

Know Which Version People Are On

URLs in WordPress

Writing to the Root Directory

Rethink Your Filters

Never Assume

Recent Posts