septiembre 22, 2009

The Most Controversial Magazine Covers of All Time

We’ve put together a collection of magazine covers that have stirred up controversy through the years.

These covers can serve as object lessons for what to do and what not to do both with design and editorial.

While some controversial covers have worked and sold more magazines, or won awards for the editors who made the decision to go to press with them, others were embarrassments that the publication had to either apologize for, or fire an editor over.

Here are some of the most controversial magazine covers of all time. Feel free to suggest other covers that you think should be part of this collection.

Time Magazine, January 2, 1939: Hitler as Man of the Year

This cover featured an elaborate illustration of Hitler playing “his hymn of hate in a desecrated cathedral while victims dangle on a St. Catherine’s wheel while the Nazi hierarchy looks on.” Baron Rudolph Charles von Ripper was a Catholic that fled Hitler’s Germany, and the artist of this disturbing piece. By 1938, Hitler had firmly seized power in Germany, taken over Austria and Czechoslovakia, and had been given a free hand in Eastern Europe by the English prime minister of the time, Neville Chamberlain. Time has had to defend this choice throughout history, and at the time defended it by stating that the “Man of the Year” was a title bestowed on the person who had most influenced events of the previous year.

Time Magazine, April 8, 1966: Is God Dead?

This cover has been called the most controversial of all time. The related article concerned the “death of god movement” that had sprung up in the 1960’s. The cover and article enraged readers.

Life, November 26, 1965: War In Vietnam

Paul Schutzers captured this arresting image of a VietCong prisoner being taken prisoner by American forces during the Vietnam War. Photography and news coverage like this helped to turn the American public against the Vietnam war. While Schutzers was one of LIFE’s best photographers, he was killed on assignment during the Six-Day War of 1967 between Israel and its neighbouring states of Egypt, Jordan, and Syria.

Esquire, April 1968: The Passion of Ali

This smart rendition of Muhammad Ali was created to illustrate his martyrdom to his cause after he refused to join the US military due to his religious beliefs and was subsequently stripped of his heavyweight boxing title. The piece was done after the same manner as “The Martyrdom of St. Sebastian”, a popular theme through medieval art but most recognizable in the painting by Andrea Mantegna.

Esquire, May 1969: The Drowning of Andy Warhol

Another triumph of Esquire’s former visionary Art Director, George Lois, this picture combined two separate shots of a soup can and Warhol. In the first ten years of his employment at Esquire, circulation was boosted from 500,000 to 2 million, a figure for which his covers were partially responsible. This shot references Warhol’s famous “soup can” exhibits that symbolized the American avant-garde art movement.

Playboy, October 1971: First Playboy African-American Woman

This cover was the first Playboy cover to feature an African-American woman. The model is Darine Stern and the photographer was Richard Fegley.

National Lampoon, January 1973: If You Don’t Buy This Magazine…

While this cover didn’t do much more than make people laugh when it came out despite its violent overtones, Ronald G. Harris’ famous cover shot definitely raised a few eyebrows in pre-Photoshop days.

The New Yorker, March 29, 1976: Steinberg Map of New York

This portrayal of a New Yorker’s idea of what the rest of the United States looks like was drawn by Saul Steinberg. The artist sued Columbia Pictures over their movie poster for “Moscow on the Hudson”, which does seem to be derived from Steinberg’s cover down to the placement of the title. Steinberg won the case.

Rolling Stone, January 22, 1981: John Lennon and Yoko Ono

Annie Leibovitz took this shot just hours before John Lennon was shot outside of his apartment building, the Dakota, in New York City on December 8, 1980. Leibovitz originally wanted to take the shot of Lennon alone but he insisted that his wife be in the pictures. This cover was named the most popular magazine cover of the past 40 years by the American Society of Magazine Publishers.

Vanity Fair, August 1991: Demi Moore, Pregnant and Nude

This cover was shot by celebrity photographer Annie Leibovitz and was decried as shameful and disgusting when it was released. Some stores sent back the issue, or only sold it with a brown paper covering the “offensive” image. It has spawned countless celebrity nude pregnancy shots done in the same fashion, and helped to launch Demi Moore’s career into the stratosphere.

Vanity Fair, August 1993: K.D. Lang and Cindy Crawford

The cover was meant to be as controversial as the country star’s career. According to the cover story, Lang got more grief from the country music industry over her decision to join PETA than her decision to come out as a lesbian.

Time Magazine, June 27, 1994: OJ Mug Shot Controversy

In 1994, OJ Simpson was accused of murdering his wife, Nicole. In 1995, he was acquitted after a long and highly publicized trial. The photo used on the cover of Time Magazine was manipulated to make OJ look darker in skin tone and more menacing. For comparison, see the Newsweek cover which uses the original shot without any alteration.

The Economist, September 10, 1994: The Camel-Humping Issue

Obvious Black Eyed Peas references aside, this cover drew some fire for the UK-based magazine. The cover was printed for the North American market only.

Time, April 14 1997: Ellen’s Coming-Out Issue

Time’s cover and exclusive story left no doubt in the minds of all Americans that Ellen was, in fact, gay. Even in 1997, coming out could be perilous for a star’s career. While it may now seem like a mere bump in the road due to Ellen’s stunning success, at the time TV outlets in rural America pulled her show.

Wired, June 1997: 101 Ways to Save Apple

When this magazine went to press, Steve Jobs had just rejoined Apple through Apple’s acquisition of his NeXT Software Inc. While the cover was a bit more pessimistic than the story it was meant to illustrate, it remains one of the top magazine covers of all time. We don’t think anyone would try to give Jobs advice today, but back then Mac fans would have done anything they could to help the ailing corporation.

Time, Dec 21, 1998: Devil Horns on Clinton

This was one of several magazine covers that featured Bill Clinton during the Monica Lewinsky scandal. In 1995, Lewinsky was an intern at the White House during Clinton’s presidency, and they had an intimate affair. The scandal broke when Lewinsky confided in a colleague in January of 1998. The scandal eventually resulted in Clinton’s impeachment. The top of the letter “M” in the Time masthead appear to be resting on the top of Clinton’s head as horns. The devil horns were written off by Time as an accident of masthead placement rather than a deliberate act.

Esquire Magazine, December 2000: The Crotch Shot

This shot of Clinton was said to be inspired by the Lincoln Memorial, but was interpreted as an obvious reference to the Monica Lewinsky scandal. Like the Obama couple satire in the New Yorker seen further down, this cover drew fire from both sides of the political fence.

The New Yorker, Sept. 24, 2001: Twin Towers in Silhouette

This cover was a graphical as well as an editorial success. The magazine succeeded in creating a fitting and classic memorial to the victims of the tragedy and the buildings themselves in true upscale New Yorker fashion. Covers editor Franoise Mouly created a testament to the Twin Towers that drew on the inspiration of Ad Reinhardt’s black-on-black paintings.

Entertainment Weekly, May 2 2003: Dixie Chicks

The Dixie Chicks set off a firestorm when they criticized then-president George W. Bush for invading Iraq on the grounds that Iraq was manufacturing weapons of mass destruction. The Dixie Chicks used their weapons of mass distraction on this provocative cover.

Seventeen, May 2003: Sarah Michelle Gellar’s Zombie Arm

This horrendously manipulated stock photo of Sarah Michelle Gellar made the mag send an expensive purse by way of apology. Gellar returned the purse since she didn’t wear leather. While the practice of using stock photos for covers is common, flagrant abuse of Photoshop is something that the art department and editor usually catch before print time.

Rolling Stone, January 2006: The Passion of Kanye West

Rolling Stone tipped a thorny hat to Esquire’s portrayal of Ali with this 2006 cover. It isn’t known if the cover was meant to be a joke about the singer’s ego, but most people found it very funny. Religious fans of the magazine didn’t find it as hilarious, and the odd cover story that went with it in which the singer admits to a porn addiction just made the whole thing awkward. The tone of the cover feels current in light of the singer’s recent mike-grabbing moment at the 2009 VMA’s.

Baby Talk, August 2006

While this image seems benign to most people who have been involved with a baby in one fashion or another, the cover was decried as obscene. Even though moms made up the target demographic, a survey of 4000 of them turned up the fact that 25% had a negative response. One mother actually shredded the magazine so that her 13-year old son couldn’t see it. Not that he likely noticed; he was probably on the computer downloading porn watching tips from Kanye.

Texas Monthly, January 2007: Dick Cheney Cover Issue

Building on the famous 1973 Lampoon cover, Texas Monthly took a jab at the Vice-President’s hunting accident where he shot a colleague in the face. This cover won the 2007 Best Cover Line of the Year Award from the Magazine Publishers of America.

Time, August 29, 2007: Devil Horns on Billy Graham

The blogosphere was rife with rumours about this cover. This was probably not intentional. Time Magazine has claimed that all of its “Devil Horn” covers through the ages are mere coincidences. For a defense of the Time Magazine position, this blog post has a list of Time Magazine covers that have devil horns but no potential hidden meaning. Accident of their masthead design, or subtle editorial statement? You decide…

Golfweek, January 19, 2008: The Noose that Hung an Editor

This cover was born out of the comments of a golf anchorman, Kelly Tlighman, that fellow players should “lynch (Tiger Woods) in a back alley” and the subsequent feature story that was published in that edition of Golfweek. PGA Tour director Tim Finchem had this to say about it: “Clearly, what Kelly said was inappropriate and unfortunate, and she obviously regrets her choice of words, but we consider Golfweek’s imagery of a swinging noose on its cover to be outrageous and irresponsible”. A day after the cover was published, the editor was let go.

People Magazine, March 2008: Brangelina Twins

This cover and photo shoot sacrificed People’s editorial soul for a first shot at the Brangelina twins. Instead of their usual journalistic even-handed approach, they seemingly acquiesced to the couple’s need for nothing but positive coverage in order to get a scoop on the rest of the world with the first baby pictures. While People magazine denied these charges as “categorically false”, the coverage was nevertheless very rosy-cheeked in tone.

Vogue, April 2008: King Kong Cover

This cover of model Gisele Bundchen and sports star Lebron James was considered to be a racist portrayal of “King Kong”. Images that portray black males as threatening “reinforce the criminalization of black men,” said Damion Thomas, assistant professor in the Department of Kinesiology at University of Maryland. The cover was supposed to showcase two stars with excellent bodies, in keeping with the “Shape” theme of the issue.

The New Yorker, July 21, 2008: The Obama Couple Satire

This cover by famous New Yorker cartoonist Barry Blitt was heavily criticized by both the McCain and Obama camps during the 2008 US election. While the piece was meant to be a satire of allegations lobbed at the couple by their detractors, its inopportune appearance during a campaign didn’t have Obama’s supporters laughing as hard as the magazine intended.

OK Magazine, June 2009: Michael Jackson Death Photo

Fans were upset over the magazine’s decision to publish this photo. Sarah Ivens, editorial director, said that the cover decision was made since they wanted to stand out from all of the tribute covers that were dominating the stands that week. Jackson died on June 25, 2009 after being given a cocktail of drugs by his physician.


Compiled and written by Angela West.

septiembre 17, 2009

300+ Resources to Help You Become a WordPress Expert

WordPress is one of the most popular blogging platforms available today. And for good reason.

It’s powerful enough to be a complete CMS, has every feature or function a blogger could dream of (either built in or available via plugins or custom functions), and it’s free and open source.

While WordPress is incredibly powerful and easy to use on its most basic levels, it can also get pretty complicated, pretty quickly.

Below are more than 300 resources to help you master WordPress no matter what your skill level is.

Everything from premium and free themes to plugins to WP hacks and everything in between is included. If it’s possible with WordPress, it’s likely you’ll find it below.

Theme Roundups, Theme Templates, and Theme Frameworks

WP can have an almost infinite variety of designs applied to it. Themes can be as simple or complicated as you want. Below are a wide variety of theme roundups, theme frameworks for building your own themes, and premium theme sites with customizable or out-of-the-box themes. Be sure to check out the tutorial section next for resources for building your own themes.

WordPress PSD Framework – A free PSD template that includes all the common elements in a WP design for you to build on.

WordPress Theme Generator – An online theme generator that doesn’t require any coding knowledge.

Easier Theme Development with Sample WordPress Content – A downloadable bundle of sample WP content that includes posts, tags, categories, and pages to make theme development easier.

Blank WordPress Themes Ready for 2.7 Up for Grabs – Offers up a couple of free, empty themes you can download.

Blank WordPress Themes – A collection of two- and three-column blank themes from Refueled.

Thematic – One of the most advanced theme frameworks available.

Carrington – A free WP CMS theme framework that includes two browser versions and a mobile version.

Free HTML 5 WordPress Theme – A free theme template that takes advantage of HTML 5 features and functions.

The Buffet Framework – A theme framework aimed to be easy-to-use for both developers and end users.

Thesis Theme for WordPress – Another basic theme framework.

OnePress Community – A WP and bb Press theme framework.

Whiteboard – A basic framework for WP theme development.

WP Framework – A blank theme framework with minimal formatting.

WordPress Theme Frameworks—A Comprehensive Overview – A great rundown of what theme frameworks are and why they’re useful.

WordPress Theme Development Frameworks – An in-depth review of some of the most popular WP theme frameworks.

WP Contact Manager – A theme that basically transforms your WP installation into a full-featured contact manager.

41 Great Looking Free WordPress Themes – A roundup of beautiful free themes.

16 Free Premium WordPress Themes That Don’t Suck – An awesome roundup of free premium-style themes.

11 Tips for Speeding Up WordPress Theme Development – A great list of ways to speed up your theme development process.

13 Helpful Cheat Sheets for Building WordPress Themes – A great roundup of cheat sheets helpful to WP theme designers.

140+ Brilliant Free WordPress Themes Around – A roundup of some excellent free WP themes.

10 of the Best WordPress 2.7 Compatible Themes – An overview of ten excellent WP themes compiled by Mashable.

10+ Best WordPress Themes for March 2009 – An awesome collection of newish themes from WP DesignBlog.

17 Free and Best WordPress Themes – A small roundup of excellent WP themes.

3-Column WordPress Theme Gallery – Includes a large number of excellent 3-column themes.

45+ Free Premium WordPress Themes with Magazine or Grid Layouts – An excellent roundup of free magazine-style and grid themes.

15 Fresh WordPress Themes to Get the Coolest Portfolio for You or Your Studio – A collection of portfolio-styled WP themes.

Best WordPress Themes Collection – A roundup of excellent paid WP themes.

10 Best Free WordPress Themes You Haven’t Seen – A great collection of seldom-seen WP themes.

30 Free Magazine/Grid Style WordPress Themes – A compilation of 30 excellent magazine and grid style WP themes.

100 Excellent Free WordPress Themes – An excellent roundup of high-quality themes from Smashing Magazine.

40 Stylish, Minimal and Clean Free WordPress Themes – A roundup of minimalist themes from Speckyboy Design Magazine.

WordPress.org – The official theme repository from WordPress, with nearly 1,000 free themes available.

WordPressThemesBase.com – A categorized theme directory that you can browse by category, design properties (columns, sidebars, etc.) or tag.

Top WP Themes – A directory of free themes, many with a corporate or professional look.

Themes2WP.com – A categorized directory with more than a thousand themes.

WPthemespot.com – A theme aggregator with beautiful themes featured from all over the web.

WooThemes – Offers paid themes in a club format, though you can also purchase individual themes.

Obox Theme Shop – A premium theme site with some really awesome themes available with single-site licenses or developer licenses.

StudioPress – Premium WP theme site that lets you download themes individually or as a package.

NattyWP – Another club-based premium themes site.

Blurbia – A premium themes site that also offers one free theme.

Elegant Themes – Another great premium themes site that allows unlimited access for less than $20.

WP Remix – A premium WP CMS theme with more than 50 page templates available.

10 Premium WordPress Themes Released in April 2009 – A roundup of recently released premium themes.

Gorilla Themes – A premium themes site with ten themes available.

Press75 – Another premium themes site that lets you buy themes individually or as a bundle.

Theme Layouts WordPress Themes – The WP category from ThemeLayouts has hundreds of themes available, free for members to download.

100 Amazing Free WordPress Themes for 2009 – An awesome roundup of beautiful themes compiled by Smashing Magazine.

Cream of the Crop: Six Cutting-Edge, Minimalist WordPress Themes – An article from Skelliewag of beautiful, minimal themes.

Graph Paper Press – A club-based WP themes gallery that also offers some free theme downloads.

10 Minimalist WordPress Themes You’ll Love – A collection of ten minimalist themes, some of which aren’t commonly seen.

25 Simple and Minimal WordPress Themes – A great roundup of minimalist themes from ReviewPk.

60 Great WordPress Themes – An excellent, recent roundup of gorgeous WP themes.

25 Best Free WordPress Themes – An absolutely amazing roundup compiled by EliteFreelancing.com of gorgeous WP themes.

14 Most Visually Appealing Free WordPress Themes – A small collection of beautiful and elegant themes.

15 Magazine WordPress Themes You Can Use for Free – Another roundup of excellent magazine themes.

83 Beautiful WordPress Themes You (Probably) Haven’t Seen Yet – While this post is a couple of years old and you probably have seen many of the themes on it, it’s still a great roundup of gorgeous designs.

21 Mindblowing Premium-Like Free WordPress Themes – A collection of unique themes that often defy the conventions of what we normally think of as a “blog design.”

20 More Free First-Class WordPress Themes – An excellent roundup of beautiful themes, many of which aren’t widely seen yet.

85 Best Beautiful Free WordPress Themes – An excellent roundup from [Re]Encoded.com of stunning WP themes.

23 of the Best Grunge-Style WordPress Themes – A collection of excellent grunge-style themes, many of which aren’t commonly seen.

13 Best Grunge WordPress Themes Online – A great roundup from CSSAddict of beautiful grunge themes.

20 Free 3 Column WP Themes – A great roundup of gorgeous 3-column themes.

45+ Must See WordPress Themes – A categorized roundup of themes compiled by Noupe.

15 Free Stunning and Unique WordPress Themes – A roundup of mostly clean and professional-looking themes.

WordPress Rainbow: 35 Colorful Free WordPress Themes – A great roundup of bright and colorful free themes.

22 Free and Unique WordPress Themes – A recent roundup of themes not seen very often.

Great Green WordPress Themes – A wonderful collection of WP themes with a green color scheme.

25 Free WordPress Themes (2009 Edition) – A roundup of some really beautiful and different themes.

25 Artistic Themes for WordPress – A great roundup of artsy WP themes.

21 Premium-Like Free Photoblog Themes for WordPress – Photoblogs have specific needs not often addressed in standard WP themes. Here are 21 themes specifically built for photoblogs.

15 Portfolio Themes for WordPress – A great roundup of themes perfect for portfolio sites.

65+ Free Exceptional WordPress Themes Worth Investigating – A great roundup of gorgeous themes compiled by Tripwire Magazine.

8 Fresh WordPress Themes – An older post that offers up some great theme designs.

50 Beautiful Free WordPress Themes – A roundup of stunning WP themes.

Tutorials and Tips

The tutorials featured below cover everything from basic WP installation and setup to more complicated topics like theme development, plugin development and advanced WP features and functions.

My WordPress Install Process – A guide from Blogging Pro for installing WP.

You’ve Installed WordPress, So What’s Next? – A great overview of steps you should take after you’ve installed WP.

The Ultimate Guide to Setting Up WordPress after an Install – A complete guide to what to do once you’ve installed WP, from Pro Blog Design.

Dissection of a WordPress Theme: Part 1 – A really in-depth overview of how WP themes are constructed.

How to Create a WordPress Theme: The Ultimate WordPress Theme Tutorial – An extremely in-depth tutorial for creating themes from ThemeShaper.

The WordPress Developer Toolkit – This tutorial and tool roundup from iThemes gives a great overview of what you need to have and learn to develop great WP sites.

How to Edit WordPress Themes Using Dreamweaver – A great guide to theme editing with Dreamweaver.

WordPress as a CMS – A 27-minute video tutorial for using WP as a content management system.

How to Create a WordPress Theme from Scratch – A great tutorial for building a WP theme from the ground up.

Create An Awesome WordPress Theme Options Page (Part 1) – A tutorial for creating a theme options panel in the backend of WP.

WordPress Loop: Get Posts Published Between Two Particular Dates – A great guide to retrieving and displaying posts published during a specific time frame.

Leopard: How to Install WordPress – A tutorial for creating a local installation of WP on Mac OS X Leopard.

Premium WordPress Theme Design Part 1—The Photoshop Mock Up – The first in a series of tutorials for creating a premium-style WP theme.

The Power of WordPress Custom Fields – A great overview for working with custom fields.

Customize Your WordPress Login – Learn how to customize the look of your WP login screen.

Things You Should Know When Using Post Excerpt – An overview of things to keep in mind when using the post excerpt function in WP.

WordPress Custom Fields; Laying Text Over Your Lead Graphic – A tutorial that shows you how to add a text overlay to your graphics.

5 Useful WordPress Functions You Didn’t Know Existed – A rundown of five great WP functions most people have never heard of.

Power Tips for WordPress Template Developers – An excellent resource from Smashing Magazine of advanced techniques useful to template and theme developers.

How to: Make a Control Panel for Your WordPress Theme – A tutorial for creating a customization menu in the backend. for your WP theme.

WordPress Ajax Commenting Revisited – A tutorial for creating your own ajax comment system.

WordPress Screencast Tutorial—Photo Captions – A video tutorial for adding captions to your photos.

How To: Adding an Author Page to Your WordPress Blog – A fantastic tutorial for creating an “about the author” page on your blog.

Turning a Web Template into a WordPress Theme: A Video Tutorial – A video tutorial for turning virtually any website template into a WP theme.

Styling Your WordPress Comments – Learn to style your comments to better complement your site’s design.

Displaying Author Meta Information in WordPress 2.8 – An excellent tutorial for displaying the meta information included about authors within the front-end of your WP site.

So You Want to Create WordPress Themes, Huh? – This is one of the most comprehensive and in-depth theme development tutorials out there, broken down into more than 16 parts.

The Ultimate Guide to the WordPress Loop – A must-have resource for anyone who wants to develop WP themes or just have a better understanding of how WP works.

Mastering Your WordPress Theme Hacks and Techniques – A great collection of hacks and customization from Noupe.

How to Use Thumbnails Generated by WordPress in Your Theme – A guide to working with WP-generated thumbnail images.

How to Write Your Own WordPress Theme – A complete tutorial for WP theme development.

Tutorial: Creating Custom Write Panels in WordPress – A tutorial for adding unique data to your posts using custom write fields in the backend.

Display Thumbnails for Related Posts in WordPress – A tutorial for displaying the WP-generated thumbnail images for your posts in a related posts list.

How to Set Up Pretty Permalinks in WordPress – A guide to creating pretty permalinks from ThemeLab.

Multiple WordPress Page Layouts in One Single Template – A tutorial that shows you how to create more than one page layout without having to resort to separate templates.

Build a Newspaper Theme with WP_Query and the 960 CSS Framework – A complete tutorial for building a news-style theme.

How-To: Create a WordPress Theme in 5 Minutes – A tutorial that shows how to set up a basic WP theme. It also includes all the code you’ll need.

The Ultimate WordPress 2.8 Optimization Guide – A complete guide for setting up and optimizing your WP 2.8 installation.

WordPress as a CMS: How to Think About Building a Website with WordPress – A great overview and tutorial for setting WP up as a CMS.

WordPress: How to Get Custom Fields Outside the Loop – A tutorial for creating custom fields that reside outside the WP Loop.

WordPress Tutorial: Blog Posts in Different Columns – A tutorial that shows how to make blog posts appear in more than one column on your site.

Multiple WordPress Loops Explained – A great tutorial to get you started with multiple loops.

DiggProof Your WordPress – A complete guide to making your site stand up to traffic spikes, like those caused by making the front page of Digg.

Displaying Code in WordPress Posts – A brief overview of the methods available for displaying code snippets within your posts.

WordPress Tutorial: Category Trick for WP 2.7 – A tutorial for applying different styles to specific categories.

How to Make a Random Post Button – A tutorial for creating a button to take visitors to a random post on your blog.

10 Things to Do After Installing WordPress – A list of 10 must-do steps to take after installing a fresh copy of WordPress.

10 Impressive Techniques to Spice Up Your WordPress Theme – A great roundup of style improvements you can add to your WP theme.

20+ Tutorials and Resources for Working with Custom Fields in WordPress – An excellent collection of tutorials for dealing with custom fields.

Top 50 WordPress Tutorials – A roundup of fifty great WP tutorials compiled by Nettuts+ and covering virtually every aspect of WP development.

135+ Ultimate Round-Up of WordPress Tutorials – A categorized roundup of tutorials compiled by instantShift.

30 Tutorials Combining Both WordPress and jQuery – A great roundup of jQuery/WP combo tutorials from Speckyboy Design Magazine.

40+ Awesome Tutorials and Techniques for WordPress Theme Developers – A tutorial list specifically aimed at theme development put together by tripwire magazine.

60+ Awesome WordPress Tutorials – A great collection of tutorials that will lead you right from installation through advanced WP development.

30 Excellent WordPress Video Tutorials – A collection of video tutorials for everything from theme development to creating plugins to administration tasks.

110+ Massive WordPress Video Tutorial Collection – A roundup of more than 110 video tutorials for everything from installing WP to using it to developing for it.

Top 10 Tutorials for Developing WordPress Themes – A compilation of ten of the best theme development tutorials out there.

23+ Excellent Tutorials for WordPress Theme Developers – A great roundup of theme development tutorials from Web Developer Plus.

63 Essential WordPress Hacks, Tutorials, Help Files and Cheats – A great roundup of WP resources.

Getting Past First Base…Using WordPress as a CMS – A recent guide from Foraker Design to using WP as a CMS.

How to Speed Up Your WordPress Blog – An excellent resource for making your WP site run faster.

HOW TO: Create a jQuery Carousel with WordPress Posts – An excellent tutorial for creating a carousel to display WP posts from a specific category.

Customize WordPress Theme to Match an Existing Website: A Step-by-Step Blog Integration Tutorial – Create a WP theme that matches an existing website design for seamless integration.

How to Only Show Posts With a Specific Custom Field – A quick tutorial for showing posts with content in a specific custom field.

Create a Plugin With Its Own Custom Database Table – A tutorial for coding plugins that need to have their own custom db table.

How to Add Sidebars to a Theme – A very basic tutorial for theme developers.

Post Image the Easy Peasy Way – A quick tutorial for creating a function that automatically displays images with your posts.

How to Add an Announcement Box to Your WordPress Theme – A complete tutorial for creating a news or announcement box that can be switched on and off from the dashboard.

Create Your Own Private Twitter Site Using WordPress – A quick tutorial for creating a private, Twitter-like network using WordPress.

How to Add Pagination Into a List of Records or WordPress Plugin – A very thorough tutorial for adding pagination to records generated by a WP plugin.

Creating Widgets in WordPress 2.8 with the Widget API – A great overview and tutorial for working with the new widget API included in WP 2.8.

Use WordPress as a PHP Framework for Your Static HTML Pages – A very interesting tutorial on how to use WP as a PHP framework.

Tutorial: Multiple single.php Templates in WordPress – A guide to using more than one single.php file in WP.

How to Create a Beautiful Dropdown Blogroll without JavaScript – A complete tutorial for creating dropdown menus using just plain HTML.

Custom Header Images for WordPress Pages – A tutorial for using custom header images on different pages using custom fields.

How to Display Recent Comments Without Using a Plugin or Widget – An excellent tutorial for adding recent comments to your theme using the functions.php file and some code right within your theme files.

Display a Random Post (with AJAX Refresh) – A complete tutorial for creating a random post display using jQuery.

Get More Traffic: An SEO Guide for WordPress – Thorough coverage of changes to make to improve your blog’s SEO.

How to Design and Style Your WordPress Plugin Admin Panel – A complete tutorial for styling the admin panel for your WP plugins.

Wicked WordPress Archives in One Easy Step! – A complete tutorial for creating stylish WP archives.

Make a Mobile Friendly Version of Your Blog with Google Reader – An awesome method of making a blog better-formatted for viewing on mobile devices by using Google Reader.

Designing for WordPress: Complete Series and Downloads – A complete video tutorial series from Chris Coyier for designing WP themes.

100+ WordPress Video Tutorials, from Basic to Advance – An awesome roundup of video tutorials for virtually every aspect of working with WP.

Complete WordPress Theme Guide – A three-part tutorial series from Web Designer Wall for creating WP themes.

Import and Export WordPress Data – A video tutorial that shows you how to import your data from other blogging platforms (including TypePad and Blogger) and how to export your data for installing on another version of WP.

Create a Tabbed Featured Posts Area in WordPress – A tutorial for creating a tabbed area for displaying multiple featured posts.

A Crash-Course in WordPress Plugin Development – A video tutorial for creating your first WP plugin.

List of WordPress Thesis Theme Tutorials – A collection of tutorials for working with the Thesis parent theme.

Tutorial: Add a Background to Your WordPress Theme – A very basic tutorial for adding a different background image to a standard WP theme.

26 Complete WordPress Blog Design Tutorials – A roundup of 26 tutorials for creating specific WP designs from scratch.

Installing WordPress on Tiger – A great tutorial for installing a local copy of WordPress on Mac OS X 10.4 Tiger.

Integrating BuddyPress, WordPress MU, and bbPress – A great guide if you want to build a complete social networking site.

12 Great Tutorials on Creating a New WordPress Theme – An awesome roundup of theme development tutorials compiled by [Re]Encoded.com.

5 Useful and Creative Ways to Use WordPress Widgets – A great guide to using WP widgets.

How to Easily Customize the WordPress Image Caption – A tutorial for customizing the appearance of the built-in WP image caption text.

10 Steps to a Client Friendly WordPress CMS – A guide to making WP more end-user-friendly as a CMS.

An Elegant Featured Content Slider for WordPress – A tutorial for creating a slider to display your recent posts.

WordPress Theme Guide – A complete guide to building WP themes from Urban Giraffe.

Mastering WordPress Shortcodes – A great guide for learning all about WP shortcodes.

Plugins

Plugins extend the functionality of a standard WP installation. There are thousands of plugins on the WordPress site but finding the best among them can be incredibly time-consuming. The plugins featured here have already been vetted by other bloggers, making it easier to find not only the plugins that do what you want, but those that do it well.

BuddyPress – A plugin that adds a social networking platform to WordPress MU.

bbPress – A forum system meant to integrate with WP, created by the makers of WP.

WordPress Plugins and Tutorials – A great roundup of categorized plugins, with a few articles and tutorials included at the end.

Top 10 Characteristics of a Great WordPress Plugin – An excellent guide that should be referred to by anyone developing, or even just using, WP plugins.

12 WordPress Plugins for Theme Development – A great list of plugins essential for theme developers.

Top 35 Plugins of WordPress to Share Your Blog Post – A great roundup of plugins that make it easier for your visitors to share your blog’s content.

3 WordPress Plugins to Manage 125×125 Ads – 125-pixel-square ads are a very popular size; here are three plugins to help you manage them.

55 Best WordPress Plugins – A roundup from About.com of the plugins every WP user should consider.

Top WordPress Plugins – A compilation from TheBlogJoint.com of the best WP plugins available.

10 Best WordPress Plugins—March 2009 – A recent post covering ten of the best WP plugins, including ThickBox and Lexi.

20 Best WordPress Plugins—April 2009 – Another great roundup from AjaxLine of recent WP plugins, including AnyFont and Twitter Widget Pro.

13 of the Best WordPress Plugins – A list compiled by David Airey of the best WP plugins, including All in One SEO Pack and cforms II.

6 Best Facebook WordPress Plugins – A collection of six plugins for integrating your WordPress blog and your Facebook profile or page.

20 of the Best SEO Plugins for WordPress – A collection of great plugins to improve your SEO, compiled by Mashable.

30+ Must Have WordPress Plugins – Another roundup of essential WP plugins.

Best WordPress Plugin for Related Posts? – A review of some of the available related posts plugins and the author’s verdict on which one is best.

50 Best WordPress Plugins for Power Blogging – A compilation of some of the best plugins available for WP power users.

5 of the Best WordPress Plugins – A fairly in-depth look at five great WP plugins.

Top WordPress Plugins – A roundup of great plugins, broken down by category and including Advanced Admin Menu and In Series.

11 Top WordPress Plugins Every Blog Should Have – A list from Yoast of what they consider to be the essential WP plugins.

Top 8 WordPress Plugins Used by SEO.com – A list of 8 of SEO.com’s preferred WP plugins.

70 Best WordPress Plugins to Supercharge Your Blog – A comprehensive list of awesome plugins, including Broken Link Checker and Comment Timeout.

The Best WordPress Plugins – A short review of some of the best WP plugins out there.

9 Best WordPress Plugins – A list of great plugins, including WP Smushit and WP Syntax.

Best WordPress Plugins—18 Most Downloaded WordPress Plugins Ever – A listing of the most popular WP plugins, including NextGEN Gallery and WP Super Cache.

5 Best WordPress Plugins to Shorten URLs – A collection of WP plugins for shortening your URLs.

Best WordPress Plugins – This post compiles the best WP plugins broken down by category.

WP Tutorial: Your First WP Plugin – A tutorial for creating your own WP plugins.

10 WordPress Plugins Guaranteed to Save You Time – This is a great collection of plugins compiled by Six Revisions to make you a more efficient blogger.

How to Write a Simple WordPress Plugin – A great tutorial to acquaint you with building WP plugins.

40 Exceptional “CMS Enabling” WordPress Plugins – Includes forty plugins to turn WP into a full-featured content management system.

Contact Form Plugins for WordPress – An overview of some of the contact form plugins available for WP.

The TTFTitles WordPress Plugin – A plugin to let you swap out your post titles with dynamically-created images.

TDO Mini Forms – This is one of the coolest plugins for WP out there. It allows non-registered users and/or subscribers to your site to submit their own content (which is kept in draft form until an administrator approves it). It even works with Akismet to help prevent spam posts.

30+ Plugins for WordPress Comments – A great roundup of comments-related plugins compiled by Mashable.

21 of the Best WordPress Plugins for New Blogs – A collection of plugins focused mostly on front-end features and basic end-user management.

Top 5 WordPress Plugins that Help Increase Comments – A small roundup of plugins designed to get more visitors to comment.

Top 30 WordPress Plugins That Are Actually Useful! – An awesome roundup from Speckyboy Design Magazine of incredibly useful plugins, including FireStats and WASABI Related Post.

19 Top WordPress Plugins – A great roundup of popular and useful WP plugins, including DISQUS Comment System and Popularity Contest.

Top 10 WordPress Hidden Gems (Plugins) – An awesome roundup of often-overlooked plugins that do really amazing things, including Front-End Editor and Feed Styler.

10 of the Best WordPress Contact Form Plugins to Choose From – A roundup of some of the best contact plugins available.

Top 11 Comment Plugins to Make Your WordPress Blog More User Friendly – An awesome roundup of comments-related plugins, including the Top Commentators Widget and CommentLuv.

Top 10 WordPress Gallery Plugins – Ten great plugins for creating and managing image galleries.

10 Best Photo and Image WordPress Plugins – A roundup of excellent plugins for handling images, including Shutter Reloaded and SEO Friendly Images.

Plugins That Make WordPress Into a Company Intranet – Coverage of plugins that make it possible to use WP as a corporate intranet.

20 New, Useful and Promising WordPress Plugins – A roundup of twenty great WP plugins, including WP Greet-Box and Post Ideas.

10 Mistakes You Could Avoid in WordPress Plugin Development – A must-read article for anyone doing plugin development.

16 Excellent WordPress Security Plugins to Secure Your Blog – A great roundup of security-related plugins for WP.

31 Useful Twitter Plugins for WordPress to Choose From – An extensive list of plugins for integrating Twitter and WP.

6 WordPress Plugins That Help Your Blog’s Maintenance – A great roundup of maintenance-related plugins, including Broken Link Checker and WP Anti-Virus.

Tricks, Customizations, and Hacks

The resources featured below involve customizations and hacks you can apply to your WP installation and themes that extend the functionality of WP beyond what plugins and widgets are generally capable of.

13 Vital Tips and Hacks to Protect Your WordPress Admin Area – A compilation of security hacks for WP admin.

Hack Together a User Contributed Link Feed with WordPress Comments – Shows you how to set up a user-generated public link feed by utilizing post comments.

5 Great WordPress Hacks – A small roundup of hacks, including sending pages to Twitter and listing all of the authors on your blog.

Top 10 WordPress Hacks from June ‘09 – A roundup of recent hacks, including listing all hooked WP functions and detecting which browser a visitor is using.

9 WordPress Hacks to Encourage User Interactivity – A great collection of hacks for getting your visitors to interact more, including showing the most recent comments and reversing the order of your comments so the newest ones show up first.

9 Useful Snippets for Your WordPress Functions – A collection of handy snippets you can add to your functions.php file to add functionality to your blog.

WordPress Hack: Opening Links in New Windows – A great hack using JavaScript for forcing links to open in new windows.

10 Tips to Improve Your WordPress Theme – A great rundown of theme customizations that make your site more user-friendly.

10 Most Wanted Category Hacks and Plugins for WordPress – A great rundown of category hacks, including displaying the most recent posts within a specific category and excluding certain categories from being displayed in a loop.

10 Awesome .htaccess Hacks for WordPress – A great collection of .htaccess hacks, including removing/category/ from your WP URLs and how to redirect visitors to a maintenance page.

10 Killer WordPress Hacks – A roundup of great hacks from Smashing Magazine, including displaying AdSense ads only to search engine visitors and replacing the “next” and “previous” page links with pagination.

10 WordPress Tips and Tricks for Your Comment Page – A great roundup of comment tricks, including displaying the total number of comments on your blog and separating comments from trackbacks.

15 Killer Hacks for WordPress That Are Extremely Useful – An excellent roundup of useful hacks including displaying random header images on your blog and listing future “upcoming” posts.

9 Extremely Useful RSS Tricks and Snippets for WordPress – A great selection of tricks and customizations for RSS feeds, including creating RSS-only posts and excluding a category from your RSS feeds.

7 WordPress Customizations – A quick rundown of how to customize your WP installation in multiple ways.

Define Your Own WordPress Loop Using WP_Query – A great hack to creating your own customized WP loop.

10 Useful WordPress Loop Hacks – A roundup from Smashing Magazine of ten excellent WP loop hacks.

13 Tags to Delete From Your Theme – A list of tags that are generally unnecessary in a standard WP theme.

30+ New Useful WordPress Tricks & Hacks – This post from Hong Kiat shows more than thirty new hacks and tricks to customize your WP installation.

40+ Most Wanted WordPress Tricks and Hacks – A roundup of great hacks compiled by Hong Kiat.

WordPress Theme Hacks – A roundup of a number of simple hacks for making better WP themes.

30+ (More) Most Wanted WordPress Tips, Tricks and Hacks – Another roundup from Hong Kiat of great WP customizations.

22 Mixed Quality WordPress Hacks – Despite the title, this is actually a roundup of more than twenty high-quality hacks for customizing your WP blog and making it stand out from the crowd.

10 Easy Ways to Fix Common WordPress Headaches – A great overview of ways to improve the functionality of your WP installation.

Galleries and Inspiration

If you’re looking for inspiration for your next WP-powered site, look no further than the resources below. Included are design roundups, galleries, and instances of uncommon WP usages.

160 Unique WordPress Themes – An awesome roundup of 160 unique WP designs.

11 Non-Traditional Uses of WordPress – A great roundup of some unique WP implementations and the tools used to create them.

WPLuxe – A great WP gallery that also includes a blog with WP news and resources.

45 Beautiful and Creative (WordPress) Designs – A roundup of beautiful WP designs compiled by Six Revisions.

15 Creative WordPress Header Designs – A small roundup of beautiful WP headers.

15 Impressive and Beautiful Uses of WordPress – A collection of 15 sites using WordPress in elegant and innovative ways.

Best WordPress Sites – A gallery of excellent WP-powered sites compiled by N.Design Studio.

60+ Unusual WP Blog Designs – A great roundup post from Noupe of unique WP designs.

30 Untypical WordPress Sites – A great roundup of 30 unique WP sites.

WordPress Showcase – The official WP showcase blog/gallery.

WP Inspiration – An amazing gallery showcasing only WP-powered sites.

CSSBloom – This gallery includes a WP tag with a great collection of unique designs.

CSS Glance – Another gallery with a WP tag that includes hundreds of WP designs.

We Love WP – A great gallery dedicated to beautiful WP designs.

Sites—WP Candy – A WP gallery from the WP Candy blog.

LoopPress – A WP gallery that lets you rate and comment on designs.

WPCube – Another dedicated WP gallery.

Unmatched Style – The WP category on Unmatched Style includes a few dozen WP designs.

Best CSS Gallery – Their WordPress tag includes more than a dozen WP designs.

Gallerific – Another general-purpose gallery that has a WP tag and features some great designs.

Blogs, Articles and Other Resources

This is where you’ll find everything else WP-related that didn’t quite fit into the categories above. There are articles about WP-specific topics, blogs by and for WordPress designers and developers, and cheat sheets and other resources to make your WP development easier and more efficient.

Adii Rockstar – The blog of “WP Rockstar” and theme developer Adii, covering blogging, development, and themes, among other topics.

Brian Gardner – The personal blog of WP theme designer Brian Gardener.

WordPress Tavern – A blog that covers WP news, plugins, themes, and even BuddyPress.

instantShift – InstantShift’s WordPress category has tons of great tutorials, tips, and other information on WP.

StylizedWeb – StylizedWeb has a great WP category with tutorials, reviews, plugins, theme roundups, free themes, and more.

Weblog Tools Collection – A WP blog that covers mostly plugin news and releases.

WordPress Blog – The official WP blog.

WordPress.com Just Another WordPress Weblog – The official WordPress.com blog.

WPCandy – A blog that covers themes, plugins, tutorials, and more.

WordPress Publisher Blog – A blog from Automattic aimed at publishers using WordPress.

Hong Kiat – Hong Kiat’s WordPress category has pages of great content, including hacks, tutorials, giveaways, and roundups (some of which are mentioned above).

155 WordPress Resources, Tutorials, Plugins, Themes, AJAX, Podcasting…WP Monster List – A huge roundup of resources from Speckyboy Design Magazine.

The Advanced WordPress Help Sheet – A PDF WP cheat sheet.

WordPress.tv – View videos about all things WP.

Nathan Rice – Nathan Rice writes about WP theme design and blogging.

WpRecipes.com – A blog covering WP tutorials and tips.

Wpazo – A blog covering the best WP news, resources, and updates every day.

WP Engineer – A blog for WP developers.

ThemeShaper – The blog from the developers of the Thematic framework.

WordPress Weekly – A weekly podcast dedicated to WP from TalkShoe.

Darren Hoyt – Darren Hoyt’s WP archive category has tons of great resources and new articles are added most months.

WordPress Theme Development Check List—PDF Version – A PDF checklist for WP theme development.

Justin Tadlock – Blogs about WP plugins, tutorials, and news.

Plugins – A podcast dedicated to WP plugins.

WordCast – A WordPress podcast with more than 60 episodes already published.

50+ Cheat Sheets for Building WordPress Themes and Plugins – A huge roundup of cheat sheets and references for theme and plugin developers.

WP Topics – An aggregation of the content of some of the most popular blogs about WP out there.

Pro Blog Design – Pro Blog Design’s WordPress tag has tons of articles and resources related to WP design and customization.

Top WordPress 2.7 Tips, Hacks, Plugins and Resources – While this roundup is specific to WP 2.7, much of the resources and information it includes also applies to 2.8.

100+ Killer WordPress Resources – A huge collection of varied WP resources compiled by Steffan Antonas.

WordPress Daddy – A great blog with regular posts on plugins, customizations and hacks.

WPDesigner.com – A great blog with a huge archive of WP-related content.

wpGuy – A blog dedicated to WP that also features themes and plugins.

Lorelle on WordPress – An exceptional WP blog that covers tons or WP news, tips and advice, as well as general blogging info.

15 Resources for Setting Up an E-Commerce Site with WordPress – A great roundup of plugins, themes, and tutorials for creating an e-commerce site with WP.

The Autopsy of WordPress as CMS with 25 Great WP Plugins and Designs – A great article on using WP as a CMS, along with plugins that make it possible.

WordPress God: 300+ Tools for Running Your WordPress Blog – A slightly older post from Mashable, but it still has some great plugins and other resources listed.


Compiled exclusively for WDD by Cameron Chapman.

Which are the resources and plugins you can’t live without? Did we miss your favorite one? Please add it below…


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

septiembre 15, 2009

The Evolution of Apple Ads

Apple first started advertising its products in the late 1970s.

The 80s showed a wide variety of ads, some of which served to convince consumers that they should purchase a computer, and specifically an Apple.

These ads were text-heavy and light on images, as were many computer and technology ads from that era.

Apple ads really came into their heyday during the 1990s, with the “Think Different” campaign, which became very popular as they featured a number of famous people.

Here’s a stunning compilation of some of Apple’s most notable advertisements from the 70s until the present day, including a few videos ads.

With the launch of the iMac in the late 90s, Apple ads became much more artistic and, for the most part, focused much more on showcasing the product and used very little text compared with earlier ads.

It’s also worth noting how the ads changed as the hardware changed. For more on the evolution of Apple’s hardware, see The Evolution of Apple Design between 1977-2008 which takes a look at the changes from a hardware perspective.

Most recently, Apple has focused on television advertising, most notably with its Mac vs. PC ads. The company had done TV ads prior to that (starting with the ad based on George Orwell’s “1984″ during the 1984 Super Bowl), but mostly in conjunction with print campaigns.

Current Apple ads seem to follow two veins: advertisements for their computers generally have a white background and put the emphasis on the product being advertised; ads for the iPod line generally have bright backgrounds with silhouetted figures. Most of Apple’s current advertising seems to be on TV these days. You can watch most of the recent ads on the Apple website.

1970s

1980s

1990s

2000-Present

Video Ads


Compiled exclusively for WDD by Cameron Chapman.

How has Apple’s advertisement changed over the years? What are the most significant changes? Please share your opinion with us.


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

septiembre 14, 2009

How to Display Your Content on a Blog’s Front Page

The front page of a blog is obviously of great importance to the overall design.

Up until a few years ago, most blogs simply showed posts in order of publication, the most recent at the top.

Then excerpts became popular, and later magazine-style front pages.

The purpose of the front page will, of course, vary a bit from one type to another; for example, a personal blog will be different from a professional multi-author blog.

In this post, we will take a look at the options that bloggers and designers have for showing content on the front page, and some reasons for choosing each.

Before getting into the details, let’s consider the purpose of the front page, so that you can make a more informed decision about the type to use for your own blog.

The front page is important because it has a substantial impact on the first impression of visitors.

New visitors expect to be able to get a good idea of what the blog offers from the front page alone. Visitors also want to be able to find content they are looking for through it.

Easy navigation and usability are important because the front page will likely be the most frequently viewed page on the website.

The front page is important, finally, because it will promote the most important or recent content.

Options for Displaying Content on a Front Page

You have basically three options for displaying blog content on the front page: full posts, post excerpts and magazine-style. We’ll look at the benefits of each, which will hopefully assist you in understanding your situation and making an informed decision.

1. Full Posts

With the full posts option, blog posts are displayed in full, not truncated, in reverse chronological order. This method is not nearly as popular as it was a few years ago. Here are the benefits of showing full posts on the front page:

  • Visitors Can Read Entire Posts Without Leaving Page
    Not many blogs show full posts on their front page anymore because other options provide more benefits. But one benefit of showing full posts is that visitors can read several recent posts in full without leaving the page. The only thing they probably couldn’t do is comment on a particular post.
  • Works Well With Short Posts
    If your blog posts are relatively short (say, 500 words or less), showing them in full on the front page may be easier. Excerpts can look funny if they already contain half the post, and visitors can get annoyed if they click through to the full post and find only two more paragraphs to read.
  • Doesn’t Break Reader’s Flow
    Having to click through to an individual post after having read the excerpt can break the reader’s flow and perhaps cause them to lose interest and leave the website altogether.

2. Post Excerpts

Another option is to show only excerpts of posts, with links to the full content for those who are interested.

You could show teasers to, say, 10 articles on the front page and let visitors choose what to read. WordPress generates excerpts automatically, or you could create a custom excerpt taken directly from the post or show any other text you like.

Showing excerpts on the front page is a popular option now. Here are the benefits:

  • Scanning Is Easier
    Most visitors prefer to scan content on the front page to see what is available and what kind of posts are published. Full posts make scanning difficult. Showing excerpts makes it quick and easy for visitors to see what has been recently published and to choose what they like.
  • Control of Design
    Theme designers and bloggers can be a bit more creative with excerpts than with full posts. You can control the length of excerpts, which allows you to more precisely position and line up content, without worrying about long posts breaking the layout. As you will see in the showcase at the end, some theme designers are quite creative with excerpts. Excerpts simply give the designer more control over how the front page looks.
  • Shorter Front Page
    If your posts are relatively long and you display several of them in full on the front page, the page will quickly become unmanageable. Excerpts keep the page shorter, making it easier for visitors to navigate. Of course, the number of excerpts you display affects manageability as well, so adjust that accordingly.
  • More Page Views
    Some bloggers use excerpts to increase page views: if a visitor reads an excerpt and wants to see the full content, they will have to leave the front page, giving the blog another page view. More page views can lead to more income for certain types of advertising. However, inflating page views for more revenue can irritate visitors. In general, if this is your only reason for showing excerpts on the front page, don’t do it.
  • Duplicate Content Is Avoided
    Search engines don’t like duplicate content and might penalize you if they suspect your blog has it. A front page that shows full posts essentially duplicates the content of individual blog pages. Showing excerpts instead can help prevent this problem.

3. Magazine-Style

The third option is a magazine-style page. It is similar to excerpts, but posts are not necessarily shown in chronological order. Instead, they are usually categorized, with their dates shown.

This is typical of news websites, on which headlines and teasers are arranged in columns by subject, such as sports, world news and so on.

This magazine style brings all of the benefits of excerpts and a few others. Here are the benefits:

  • Better Organization of Content
    The most significant benefit is that the magazine style allows for better organization of content. Rather than simply displaying the five or ten most recent posts, you can display posts by category or even reserve a feature area for posts you want to give the most exposure to. You control what content visitors see first. And visitors may be able to better understand what your blog offers by seeing the content arranged by category.
  • Control of Design
    This benefit is even greater with magazine-style front pages than with excerpts. The blogger chooses exactly where to display each piece of content, based on category. And plenty of layout styles are possible with this option.
  • Looks Like Typical News Website
    Organizing and classifying content by subject tends to make the front page look like a news website. If your blog has a lot of content and is news-oriented, this could be the deciding factor. This style tends to create the impression of a larger website because it shows off so much content and variety of topics.

Tutorials for Designing and Laying Out Blog Front Pages with WordPress

Here are several tutorials on creating front pages in WordPress and the types of layouts we have discussed.

Blog Front Page Showcase

Now we’ll feature a number of blog front pages that demonstrate various approaches to displaying content.

Excerpts

Vectips
This style of excerpts, with thumbnails to the left, is rather popular.

Vectips

Lokalisten Sprechblase
A brief excerpt of each post, with accompanying image. The front page shows only the three most recent posts.

Lokalisten Sprechblase

Blogfullbliss
The images on this front page are to the right of the excerpts.

Blogfullbliss

Francesca Battistelli
Just text excerpts, no images.

Francesca Battistelli

Creative Tempest
Very brief excerpts, with a thumbnail of the lead image from each post.

Creative Tempest

Blog Me Tender
Excerpts of the three most recent posts, each with an image.

Blog Me Tender

The Art of Nonconformity
This unique layout is split down the middle. Five post excerpts are shown on the left.

The Art of Nonconformity

Bluedots Design
The images on this front page appear above, rather than beside, the excerpts.

Bluedots Design

Design Reviver
Here is an example of the flexibility that excerpts can bring to the front page. The layout of these two columns would not have been possible with full posts.

Design Reviver

Excerpts Plus Featured Content

Tutorial9
Includes a slider featuring five recent posts, with post excerpts shown below.

Tutorial9

Colorburned
A similar slider and excerpt combination is used here.

Colorburned

L’effet Crea
This front page also has a featured content area above excerpts of recent posts.

L'effet Crea

Magazine Style

Pop Culture Tees
Four headlines are displayed horizontally (with their categories) above excerpts of recent posts. “Latest Tees” are shown to the left of the excerpts.

Pop Culture Tees

The 9513
Excerpts of “Editor’s Picks” are shown in the main column, with headlines of the latest blog entries to the right.

The 9513

Kineda
One post is featured “In the spotlight,” with four other popular posts from the week displayed horizontally. Excerpts of other recent posts are shown below.

Kineda

ANidea
Includes an area for one featured headline and excerpt. Four other excerpts from various categories appear below.

ANidea

Ecoki
A featured article is at the top, with four recent posts listed horizontally, and then another row of four “Must reads.”

Ecoki

Full Posts:

Freshivore

Freshivore

Owltastic

Owltastic

Unusual Front Pages

Story Pixel
Headlines of three recent posts, but no excerpts or full posts.

Story Pixel

Michela Chiucini
One post excerpt, with headlines of other recent posts listed below.

Michela Chiucini

Dirt Du Jour
One post shown in full.

Dirt Du Jour

This post was written exclusively for Webdesigner Depot by Steven Snell, a web designer and blogger. Steven runs Blog Design Heroes, which showcases well-designed blogs.

Which system works best for you and why? Please share your feedback with us.


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

septiembre 12, 2009

Our Favorite Tweets of the Week Sep 6-Sep 12, 2009

Every week we tweet a lot of interesting stuff highlighting great content that we find on the web that can be of interest to web designers.

The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week.

Note that this is only a very small selection of the links that we tweeted about, so don’t miss out.

To keep up to date with all the cool links, simply follow us @DesignerDepot

Showcase of Fresh and Well-Designed Online Shops: http://bit.ly/18NMFw

Google Wave: 5 Ways It Could Change the Web: http://bit.ly/ALu9W

The Making of a Type Sample: http://bit.ly/14D4w4

100 Ways To Improve Your Blog: http://bit.ly/yqGOL

What to pack: http://bit.ly/bGPx7

Create Apple’s Navigation Bar in Photoshop from Scratch: http://bit.ly/N7nJo

Creative tree cutting: http://bit.ly/PoLWg

Spheres: http://vimeo.com/6271487

Stop! Plane crossing: http://bit.ly/ooebl

5 Steps to Streamline your Creative Process: http://bit.ly/vFc4Z

Hilarious Photobombs: http://bit.ly/4n9mB

jQuery Tools 1.1.0. is out. 5.68 kb of raw web engine fuel! Richer, faster and smaller. http://bit.ly/11ad5h

Top 5 Web Trends of 2009: The Real-Time Web: http://bit.ly/pHNIc

30 Examples of Brilliant Logo Design: http://bit.ly/Ywq5e

HTML 5 Visual Cheat Sheet: http://bit.ly/2rIqtL

This will come in handy when in need of a formal apology: http://bit.ly/2eyui

The first Windows 7 commercial airs: http://bit.ly/mkzt3

Facebook Punks Techcrunch: http://bit.ly/T8q6h

15 Fascinating Light Sculptures: http://bit.ly/1BZohF

Not Photoshopped: Just Incredible Forced Perspective Photography: http://bit.ly/3a3qCG

This Clip is Proof That Birds Are Secretly Composers: http://bit.ly/Naseq

7 Rules for Mixing Multiple Fonts in Good Web Design: http://bit.ly/LlAVm

Amazing Art Work by Jacek Yerka: http://bit.ly/gomva

Microsoft helps Best Buy employees troll Mac users, too: http://bit.ly/18lZfN

Why your Web content will look darker on Snow Leopard: http://bit.ly/3H6A24

A tough ad to decipher: http://bit.ly/43EhN

Search Engine Optimization 101: http://bit.ly/1xRJBT

Not smart! http://bit.ly/a7sqq


Hungry for more? No problem! Keep track of all our tweets by following us @DesignerDepot


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

septiembre 11, 2009

30 Typography Posters That You’ve Probably Never Seen Before

Typography is the art of arranging, designing and modifying type.

Creating a well designed typography poster is no easy task, and takes time and patience.

When a poster focuses only on typography as its main element, the designer has to carefully craft his design to make sure that the type is both legible and artistic at the same time.

In this amazing compilation, you will see typography posters created by designers from all over the world.

Here are 30 Amazing Typography Posters that you have probably never seen before.

1. Typography is Tedius

by Derek “longdesinzzz”
United States

2. Make Good Typography

by Enzo “EN70″
Poland

3. Urban Typography

by Andrew Ackroyd
United Kingdom

4. Punk Typography

by TPHorne

5. Funke – Terry Francis

by Sébastien Nikolaou
Greece

6. AIGA Typo Show

by Allison Wilton
United States

7. Bauhaus Typography

by Samuel “SeriousSamm”
United States

8. “T” ypography

by “bacon111″
United Kingdom

9. Jimi Hendrix

by Kuba Czerniak
Canada

10. Better Than Nothing

by Nils Davey
United States

11. Helvetica

by William Antonius
Indonesia

12. Sylfaen Type

by Dan Smith
United States

13. Design Culture Now

by Emn1ty
United States

14. Helvetica

by Nikko. P. Lukman
Indonesia

15. Morgellons Awareness

by Lisa “Spambi”
United States

16. Watchmen Quote

by Daniel Peters
Singapore

17. Wonderland of Type

by Philippe Nicolas
Italy

18. Typography

by “shetsy”
Canada

19. The Cult of the Ugly 2

by Tyler Durden
New Zealand

20. The Cult of the Ugly

by Tyler Durden
New Zeland

21. Typography

by Stefano Joker Lionetti
Italy

22. Typography Dope

by Francesco Muzzi
Italy

23. Movie Poster

by Boris Bonev
Bulgaria

24. Chaos is my name

by Palax
Turkey

25. Defence H1N1

by Mike Chan
China

26. Most Of the Clients Don’t Know What Typography is!

by Mike Chan
China

27. Valdrada

by Carpet Crawler
Argentina

28. Graphic Evolution

by Boris Bonev
Bulgaria

29. The Past and the Future Make the Present Inspiring

by Mauro Hernández
Colombia

30. Nothing Can Stop a Good Idea

by Mauro Hernández
Colombia

Compiled by Paulo Canabarro.

septiembre 8, 2009

35 Inspirational Fashion Website Designs

Appearance is crucial for obvious reasons in the fashion industry. With that in mind, many fashion e-commerce sites can be an excellent source of design inspiration.

Attractive design and photography can make the products more appealing to visitors and increase sales.

There are a lot of different design styles and approaches that are used by online fashion shops, but generally photography and product/model images play a large role.

Sometimes the design and layout is minimal, allowing for more empasis on the products. Others feature huge photos as the primary focal point of the page.

In this post we’ll feature 35 inspirational fashion website designs that represent a variety of styles that are sure to inspire you.

1. Closed

Closed

2. Martin + Osa

Martin + Osa

3. Abercrombie & Fitch

Abercrombie & Fitch

4. Myla

Myla

5. Burberry

Burberry

6. Coast

Coast

7. Roxy

Roxy

8. Armani Exchange

Armani Exchange

9. Nine West

Nine West

10. Anna Scholz

Anna Scholz

11. J.Crew

J.Crew

12. Barrie Pace

Barrie Pace

13. Free People

Free People

14. Jungstil

Junstil

15. Urban Originals

Urban Originals

16. New York & Company

New York & Company

17. Lane Bryant

Lane Bryant

18. Tooby Doo

Tooby Doo

19. BCBG MAXAZRIA

BCBGMAXAZRIA

20. Acne

Acne

21. Miss Selfridge

Miss Selfridge

22. Ralph Lauren

Ralph Lauren

23. Ralph Lauren Rugby

Ralph Lauren Rugby

24. Shoe Guru

Shoe Guru

25. Bluefly

Bluefly

26. Tommy Hilfiger

Tommy Hilfiger

27. ASOS

ASOS

28. White + Warren

White + Warren

29. Bridge55

Bridge55

30. Nordstrom

Nordstrom

31. DSW

DSW

32. Lord & Taylor

Lord & Taylor

33. The Vestry

The Vestry

34. Wallis

Wallis

35. My Wardrobe

My Wardrobe

This article was written by Steven Snell exclusively for WDD. Steven showcases the best e-commerce sites at CartFrenzy, a gallery that is updated daily.

What do you think of these fashion website designs? Which ones were the most inspiring for you?


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

septiembre 4, 2009

100 Examples of Japanese Municipal Flags

In this post, we focus on Japanese design by taking a closer look at the design of Japanese municipal flags.

These flags feature highly stylized bicolor geometric symbols, often incorporating Japanese or Latin characters, making them especially interesting from a designer’s perspective.

The symbols that are featured are representative of the foundation on which the municipality is built.

We’ve put together a compilation of 100 Japanese municipal flags which we thought were the most graphically appealing, especially to those with an interest in logo or Japanese design.

 

Here’s an explanation of some of the Japanese words that appear in this article:

Hiragana/Katakana: a Japanese syllabary, which is a component of the Japanese writing system.

Kanji: the Chinese characters that are used in the Japanese logographic writing system.

Ume: Plum.

Origami: Folded Paper.

Tomoe: Japanese abstract shape that resembles a comma.

Aioi, Hyogo. The A in this flag represents a boat and ocean waves.

Azumino, Nagano. This flag consists of a stylized kanji.

Biratori, Hokkaido. The three stars are replicas of the stars that form Big Dipper.

China, Kagoshima. This flag features a stylized kanji with Erabuyuri, lilies local to the island.

Dazaifu, Fukuoka. This flag features an ume with a stylized kanji.

Ebina, Kanagawa. This flag features a stylized katakana.

Esashi, Hokkaido. This flag features a katakana surrounded by four stylized katakanas.

Fuji, Shizuoka. This flag symbolizes Mount Fuji, with the three lines representing the three municipalities that merged in 1966 to form the current city.

Fujimino, Saitama. This flag contains a stylized version of the letter ‘F’.

Fukushima, Fukushima. The nine katakana on the outside of the symbol and the four katakana in the inside make the rebus of Fukushima.

Fukuyama, Hiroshima. This flag symbolizes a bat.

Ginowan, Okinawa. The katakana in this flag represents wings over a bay.

Hachijo, Tokyo. The kanji in this flag symbolizes eternal peace and endless progress, qualities that Hachijo hopes to adopt.

Hachinohe, Aomori.This flag represents a crane.

Hagi, Yamaguchi. The grid pattern in this flag is used on the walls of the Hagi castle.

Hakodate, Hokkaido. The inside of this five-pointed star is the single tomoe which represents the map of the peninsula.

Hakusan, Ishikawa. This flag shows Mount Hakusan with the Tedori River and the Sea of Japan.

Hamada, Shimane. This flag features a stylized kanji which symbolizes ocean waves, representing a beach.

Hanamaki, Iwate. The four petals represent the four municipalities that merged in 2006 to form the current city.

Hirakata, Osaka. This flag symbolizes the image of a bird flapping its wings in the sky.

Hitoyoshi, Kumamoto. The katakana in this flag represents a bird.

Ibaraki, Osaka. The kanji in this flag represents a pigeon.

Ibusuki, Kagoshima. The three lines represent a map symbol of hot spring, as well as the three municipalities that merged in 2006 to form the current city. The letters ‘I’ and ‘U’ represent the city name.

s

Iki, Nagasaki. This features a stylized version of the letter ‘i’.

Imabari, Ehime. This flag features the letter ‘i’, which represents the Inland Sea and the bridge over the Kurushima Strait.

Imizu, Toyama. This flag sports the hiragana that represents the Sea of Japan.

Ise, Mie. This flag symbolizes the letters: ISE.

Ishigaki, Okinawa. This emblem features a stylized kanji.

Ishinomaki, Miyagi. This flag features a stylized kanji.

Itami, Hyogo. The kanji symbolizes a swan of the Koya Pond.

Itoigawa, Niigata. This flag comprises of a stylized kanji.

Iwakuni, Yamaguchi. The petals of sakura in this flag represent the arches of the Kintai Bridge.

Izumo, Shimane. The flag features a stylized kanji.

Kagoshima, Kagoshima. The foreground of this flag is a kanji based on the symbol of a popular Japanese clan, while the background is Sakurajima, an active composite volcano.

Kaizuka, Osaka. The five prongs represent five pine leaves that surround the waves of Osaka Bay and the kanji.

Kakogawa, Hyogo. This flag represents the Kakogawa River.

Kamagaya, Chiba. The flag contains a stylized katakana.

Kamakura, Kanagawa. This flag represents bamboo leaves and a gentian, originally used as the symbol of a prominent Japanese clan.

Kanazawa, Ishikawa. This flag consists of a stylized kanji, the outline of ume and a symbol from a notorious Japanese clan.

Kanoya, Kagoshima. The blue shape in this flag represents the Osumi peninsula and the red circle with the gold katakana represents the city.

Karuizawa, Nagano. The hiragana in this flag symbolizes a flying bird.

Kitadaito, Okinawa. The flag of Kitadaito is comprised of a stylized kanji.

Kokubunji, Tokyo. The katakana forming the circle expresses harmonious unity and the kanji in the center symbolizes the city’s name.

Kozushima, Tokyo. The hiragana in this flag, represents the Izu Islands and the flow of the Kuroshio Current.

Kuji, Iwate. This flag is a stylized form of the letter ‘K’.

Kumamoto, Kumamoto. This flag is a stylized version of a hiragana.

Kurobe, Toyama. This flag is also a stylized version of the letter ‘K’.

Kurume, Fukuoka. The flag of Kurume features nine katakana that surround a stylized kanji.

Kutchan, Hokkaido. This flag consists of the stylized letter ‘K’, representing snowflakes and flying birds.

Makurazaki, Kagoshima. The katakana in this flag, and the letter M, symbolize a caudal fin of the skipjack tuna.

Matsumoto, Nagano. The circle represents a pine, and the inside is a stylized kanji.

Matsuyama, Ehime. This is the stylized version of a kanji.

Minamidaito, Okinawa. The flag of Minamidaito consists of a stylized katakana and kanji.

Mishima, Kagoshima. The flag features a stylized kanji.

Miyakonojo, Miyazaki. The three arrows represents a stylized kanji.

Muroran, Hokkaido. The outside of the symbol are six stylized katakanas and the inside is an orchid.

Nagaoka, Niigata. The shape of the blue noble phoenix in this ceremonial flag represents the city Nagaoka.

Nankoku, Kochi. The katakana in this flag symbolizes wings.

Nara, Nara. This flag represents a stylized kanji inside a sakura.

Naruto, Tokushima. The symbol in this flag represents the Naruto whirlpool.

Nikko, Tochigi. This flag contains five letter ‘N’s representing the five municipalities that merged in 2006 to form the current city.

Ninohe, Iwate. This flag features a stylized katakana.

Noshiro, Akita. The hiragana in this flag represents the Sea of Japan and Shirakami Mountains.

Obama, Fukui. The kanji in this flag represents wings.

Odawara, Kanagawa. This flag represents ocean waves and ume, the city’s flower.

Ogasawara, Tokyo. In this flag the disk represents the sun, harmony and progress, and the three birds within the disk stand for the peace and friendship of the islanders.

Okayama, Okayama. The symbol in this flag represents mountains.

Okazaki, Aichi. In this flag, the kanji is in the center and in the outer parts there are a dragon’s claws holding a sacred gem.

Ome, Tokyo. The emblem of this flag features a stylized kanji in the shape of a flying bird arranged on the shape of an ume flower, which symbolizes active development.

Osaki, Miyagi. This flag displays a hiragana.

Oshu, Iwate. This flag comprises of the letters O and S, as well as a stylized kanji.

Rishiri, Hokkaido. The white hiragana in this flag represents ocean waves and the green hiragana represents Mount Rishiri.

Rumoi, Hokkaido. This flag comprises of a katakana surrounded by the four gulls.

Sakaiminato, Tottori. The hiragana of this flag represents waves in a port.

Sapporo, Hokkaido. The white hexagon represents snow. The circle inside is the the first kanji of Sapporo. It also represents a katakana. The star is Polaris, as well as the katakana.

Shikokuchuo, Ehime. This flag sports the letter ‘S’ representing expressways.

Shimanto, Kochi. The kanji in this flag represents a flow of the Shimanto River.

Shimonoseki, Yamaguchi. The stylized hiragana represents a puffer fish.

Shinjuku, Tokyo. The kanji character in a diamond shape is a symbol of steadiness.

Suita, Osaka. The kanji represents a pigeon and the background is the kanji, which represents a flower.

Takamatsu, Kagawa.The center is a stylized kanji surrounded by pine (matsu) leaves.

Toshima, Tokyo. This flag is made up of a chrysanthemum with a stylized kanji inside.

Tosu, Saga. The flag of Tosu features a stylized hiragana.

Tottori, Tottori. The circle and the lozenge of this flag were adopted from the Tottori Domain symbol and the inside is the seal script kanji.

Toyama, Toyama. In this flag, the symbol is based on the one used by the Toyama Domain and the inside is a stylized kanji .

Toyonaka, Osaka. The symbol as a whole represents a kanji.

Tsuruoka, Yamagata. The symbol represents a flying crane.

Tsuwano, Shimane. This flag sports the stylized kanji.

Wadomari, Kagoshima. The concept of this flag is a ring representing a mari ball.

Wakayama, Wakayama. The circle is a stylized katakana and the inside is the kanji, representing mountains surrounding the city.

Wakkanai, Hokkaido. The flag as a whole represents water, and the three letters W stand for “will”, “wisdom” and “work”. The inside is a steering wheel of a ship.

Warabi, Saitama. This flag shows the katakana inside a ring.

Yamatokoriyama, Nara. The four kanji in the diamond-shaped symbol were taken from the flowery rhombus of the a popular Japanese clan’s crest.

Yatsushiro, Kumamoto. The 6 represents the six municipalities that merged in 2005 to form the current city. The inside is the kanji from the former municipal symbol.

Yokote, Akita.In this flag the stylized hiragana and the letter Y represents Yokote, and the blue hiragana represents the former Hiraka District.

Yonago, Tottori. This flag contains a stylized kanji.

Yoron, Kagoshima. This flag features a stylized kanji.

Yufu, Oita. This flag features a stylized form of the letter ‘Y’.

Yurihonjo, Akita.The kanji in this flag represents a lily flower, a lily bulb and a gotenmari, a local varitey of temari ball.

Zama, Kanagawa. This flag features the stylized katakana.

Compiled exclusively for WDD by Zoe Ajiboye.

Which flags were your favorites and why? Please share your opinion with us…

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

septiembre 2, 2009

25 Examples of Web 2.0 and Traditional Design Rules Coming Together

In the large scope of the design world, the term “Web 2.0″ is relatively a new one.

With it, comes its own set of standards, some strong, others not so strong, since Web 2.0 in itself is a very fickle, ever-evolving definition of design standards.

Countless examples of Web 2.0 sites have broken the rules of what was once considered strong design.

On the other hand, in many cases Web 2.0 has strengthened common design misnomers; it places a focus on usability, interface, and readability.

At its best, Web 2.0 stands as an equal to the traditional design rules practiced for centuries, though it is no doubt a reflection of our society in its current state of hustle and bustle.

Here’s a collection of 25 sites showcasing how Web 2.0 and traditional design practices can come together to form truly stunning websites.

1. Pixel Matrix Design

Josh Pyles is a nice guy, and he’s also a fantastic, disciplined designer. His latest iteration of Pixel Matrix is a stunner, and makes especially good use of color and a strong grid system. Browse over his portfolio and you’ll see that he carries this practice into his client work.

If you check out the “About” page (making note of the nice tab system in play), you can see that Josh has included a nice photo of his workspace.

Below this shot is a great balance of Web 2.0 styled fonts, which establish an extremely strong hierarchy of information. He keeps his own bio small and tucked into the sidebar, and balances the larger text of the content area with smaller, sophisticated type in the sidebar.

Traditional Aspects:

  • Great grid system.
  • Wonderful color theory
  • Strong hierarchy of information

Web 2.0 Enhancements:

  • Beautiful gradients.
  • Subtle details.
  • Large, highly legible font choices.
  • A great number of ways to stay connected.
  • Even the contact form has a nice implementation of rounded corners!

2. MuttInk

Lately texture seems to be the greatest thing since rounded corners, and though MuttInk’s site might not be classified as typical Web 2.0, one glance is all that’s required to know that Jeremy Holmes (the man behind the work) is an amazing designer and graphic artist.

An attention to detail, texture, and a strong identity places this as a personal fave.

Even though the days of overly-muted colors are somewhat behind us (which is a good thing, in my opinion), I’m still a fan of subtle, earthy tones that are complimented with bright accents, and MuttInk has pulled this off brilliantly.

The turquoise atop the beige really pops, and maintains the “drafting table” feel that permeates the site. And though the type is on the tiny side, and a bit tough to read in spots, it still looks great on the page.

Traditional Aspects:

  • Extremely close attention to detail.
  • Nice type (though perhaps too small).
  • Great brand identity.
  • Great use of space, particularly on the portfolio pages.

Web 2.0 Enhancements:

  • Great use of texture.
  • Big, professional images showcasing the work.
  • Quick access to social linkage.

3. 45 Royale

The portfolio over at 45 Royale not only showcases an amazing array of work, but it shows that the team behind the site understands good use of multiple design standards. It’s a fantastic blend of Web 2.0 fallbacks, but has a solid foundation in traditional design standards (and just look at those colors!).

In particular, 45 Royale has one of the best grid systems I’ve seen lately, and the images they’ve chosen to showcase the work really mesh well with the fluorescent colored header above.

Seeing the color theory and organization mesh with such great harmony is always a treat, and they’ve supplemented it all with a highly sophisticated blend of fonts, both large and small.

Bright colors surrounding a secondary palette of gray, white, and black? Awesome.

Traditional Aspects:

  • One of the better examples of a grid system.
  • Plenty of whitespace and breathing room.
  • Brilliant color choice.
  • Good flow of information.

Web 2.0 Enhancements:

  • The colors simply sing…so much that I listed it in both categories.
  • Jumbo-sized type is highly legible, though tasteful.
  • Great use of Illustration and graphics.
  • Multitude of projects are well organized and nicely displayed.

4. Pinch Zoom

I’m a sucker for great illustration, especially when it’s presented atop a wonderful example of white space. I love this site so much that simply clicking through the portfolio is a blast. Great whitespace, great grid system, and wonderful use of JavaScript; these things have a way of speaking to me (yes, I’m in front of a computer quite a lot).

The important thing to keep in mind when we’re faced with the many technologies available these days, especially the fancy fades and trickery made possible by JavaScript, is to taper them and reign them in.

Remember the late nineties when Flash was all the rage? Remember how sick of Flash we all got afterwards? Good Web 2.0 standards are just as much about discipline as it is about design, and Pinch Zoom has it well under control.

They sprinkle their site with the fancy goodness, yet keep it lean and fun, with virtually zero time waiting on the images.

Traditional Aspects:

  • Another great grid system (seeing a pattern here?).
  • Black on white never seems to get old.
  • Nice balance of fonts and headlines. (The small font, though legible, could maybe be a point size or two larger).

Web 2.0 Enhancements:

  • The JavaScript portfolio slider is dang fun and effective.
  • Interface is minimalist and direct.
  • Varied use of Illustration is a great touch.
  • Embraces the web’s current technology without becoming cumbersome.
  • Unique solutions to page layout (Check out the mega-dropdown when clicking the info tab. There’s virtually an entire website hiding up there!).

5. Cameron Moll

I’ve always been a fan of Cameron’s work, and as you can tell he tends to stay on the traditional side of the design playing field. Though his blog site tends to fall within the traditional side of sophisticated design and small fonts there’s no denying the elegance and beauty of his portfolio page, which is a fantastic balance of the new and the traditional.

The colors are vibrant and the font choices mesh with the overall feel, but again, the type can get pretty small in places, which is a Web 2.0 no-no. But who am I to nit-pick? Cameron has found great success and is the man behind Authenticjobs.com, a great resource for designers (and one that’s helped pay my bills).

Traditional Aspects:

  • Well-structured content.
  • Subtle color variations are a nice touch.
  • Type looks elegant, though tends to ride on the small side of the spectrum. Even so, it’s legible and looks nice.

Web 2.0 Enhancements:

  • Very nice use of texture.
  • Portfolio contains nice images of the work, which are very straightforward and easy to navigate.

6. Metalab’s “Fluid” Tumblr theme

The only Tumblr theme to make the list is entitled “Fluid,” by Metalab design. It made the list because of a simple reason: It’s a freaking beautiful example of Web 2.0 at its best. Simple, clean, and gleaming with color.

One might consider it a bit one-side in this comparison (it’s a Web 2.0 catch-all). That’s because Metalab is known for setting standards in the Web 2.0 arena, and this site is a testament to that fact. Metalab Design keeps the foundational rules in mind, however, and keeps the structure simple and well organized.

Transparency and overlapping graphics are one of the newer trends in Web 2.0. They give a site a great amount of depth and imbue a cutting edge, almost futuristic look. Metalab’s “Fluid” has embraced this concept and, better yet, delivered it to the masses as a downloadable theme.

Traditional Aspects:

  • Simple, effective structure.
  • Stands out in the masses of Tumblr themes.
  • Contemporary (though simple) color scheme.

Web 2.0 Enhancements:

  • Big, vibrant photography.
  • Ups the ante for cutting edge Web 2.0 design
  • Highly legible fonts and headers.
  • Use of rounded corners and gradients are taken to the extreme, but they are presented in a fun, modern Web 2.0 solution.
  • Icons are a great, minimalist way to navigate the options for each post.
  • Let’s not forget about the transparent backgrounds!

7. Viget

Oh boy. This site. It gets me every time. Sure I’m a softy for texture, but this designer has also captured the subtlety of good color theory and hierarchy.

I mean just check out those portraits near the bottom! They’re eye-catching yet they don’t compete with what could be a very complicated design flow. Let’s not forget the great font choices and watercolor feel. The icing on the cake is that, though the site is image-heavy, it loads in a snap!

Another cool aspect of this site is that the designers want to share a lot of information with their community, and it’s not information that sells them as designers, but information that they feel typical users might find valuable.

They allow you to dig deeper without cramming their needs down your throat, which is always a welcome practice.

Traditional Aspects:

  • Well-structured content.
  • Beautiful color and type.
  • Though the fonts are on the small side, the main content is still easy to read.
  • Great artwork fuses seamlessly into the design (cool portraits).

Web 2.0 Enhancements:

  • Watercolor theme is extremely contemporary, and though it’s image-heavy, it’s been engineered to load lean and mean.
  • Sidebar content is well organized and content-driven.
  • Unique solution to the “Speech Bubble” box in the sidebar.
  • Lots of shared, content-driven information.

8. FeelWire

Another amazing example of great whitespace is Feelwire. Black type on white backgrounds, with great shades of gray in between, never seems to get old. Add a couple of brightly colored icons, and you have yourself a simple, yet effective site. It’s all about simplicity here (heck, they only have one page!).

The Web 2.0 styled icons serve as the centerpiece for this page, and they go a long way in holding the site together. They also prevent the site from being overrun with text, and give the user something to be curious about.

Upon rolling over these icons, I was really happy with what I found: A very simple hover status that gave me the information I was looking for, doing so with the ever-popular Web 2.0 “Speech Bubble”. A great touch.

Last thing: Though I like the red links, which also pop off of the page and interact well with the icons, I do think they should make the contact link a bit more noticeable. As of now it’s a bit too tucked into the content, and I really had to search for a way to get in touch with these talented developers. Just sayin’.

Traditional Aspects:

  • Short, sweet, and to the point: a single page site.
  • White space!
  • Subtle, tasteful font choices.
  • Nice, basic layout.

Web 2.0 Enhancements:

  • The glossy icons pop off the page, in a good way.
  • Really cool rollovers on the icons keep the site uncluttered, yet give you the information you need in a fun way.
  • Nice avatars add a human element.

9. Agami Creative

Okay, maybe it is just a personal thing with these highly textured sites, but what Agami Creative does, it does very well. It’s another contemporary example of how image-heavy sites can become a perfectly acceptable solution in a day of high-speed connections.

The centerpiece of this site is most definitely the watercolor header, which serves as a perfect backdrop to the crafty logo design. It also houses the navigation, placing just enough emphasis on its location, yet without insulting the user (because most people know where to find the navigation these days.).

Clicking over to the portfolio page, you’ll notice a layout with the perfect amount of breathing space and a strong grid system.

Simple images contribute to the work and draw your eyes to the individual projects, like looking through a keyhole to the final result. All of this is wrapped up with a sophisticated serif font for the headers and a highly legible sans-serif font for the body text.

Traditional Aspects:

  • More beautiful use of color theory.
  • Great artwork.
  • Interesting combination of type/fonts.
  • Artistic, hand-drawn logo has a feel that is carried throughout the site.

Web 2.0 Enhancements:

  • Oversized navigation makes it easy to move around the site.
  • They make it really easy to get in touch.
  • Use of avatars is a good idea (though honestly I think they could have done better with these. Not sure how the anime look is supposed to mesh with this site other than the Asian influence?).
  • Love the texture!

10. Adit Shukla

Another site with a great illustrative approach, Designer Adit Shukla also knows how to put together a great color scheme, and even plays with a nice solution to the sidebar.

For some odd reason, many sidebars are sloppy and overlooked, as if designers have permission to ignore the rules of good design when throwing together the sidebar of a site. Not with this site.

Though the content is minimal (even a bit sparse), one can’t help but love the creativity involved, especially in the illustrative header, which adds a well-needed amount of depth. The navigational tabs up above are a nice touch as well.

Traditional Aspects:

  • Vibrant colors.
  • Creative solutions to common elements, such as the sidebar and the header.
  • Illustration adds a lot of depth.

Web 2.0 Enhancements:

  • Simple layout with a well-developed header illustration, which also houses the navigation.
  • Large type is effective.
  • Multiple ways to navigate the site (though honestly, I’m not convinced this is such a good thing).
  • Transparent tabs are a nice touch.

12. Cream Scoop

The first thing you’ll notice about Cream Scoop is the bold selection of colors used throughout the site. They’re not afraid to take the colors up a notch from the norm, and the result is as refreshing as it is different.

Though the colors are bold, there are also subtle blends of strong type and gradients that are peppered throughout the site. Notice how the background gradient brightens at the top, like the edge of a spotlight, to highlight the otherwise minimal navigation. The type is well organized and balanced, with a distinctly Web 2.0 feel.

Traditional Aspects:

  • Bold selection of colors, yet a selection that works in surprisingly effective ways.
  • Minimalist navigation that gets the job done.
  • Great use of playful illustration.
  • Layout is structured but fun.

Web 2.0 Enhancements:

  • Fantastic use of a gradient in the background.
  • Bright blue really grabs your attention and directs it to the important stuff.
  • Cool use of avatars on the about page (how old are these guys?).
  • Great fonts used throughout.

13. Carbonica

Carbonica forgoes the gradients and shiny goodness of Web 2.0 and goes for a “pieced together” look reminiscent of a scrapbook. Great use of texture and animation, but also a really fun take on hand-drawn type.

Be sure to scroll down a bit and check out the icons, which also fit the theme perfectly!

Traditional Aspects:

  • Basic structure is in play.
  • Hand-crafted lettering goes well with the theme of the site.
  • The animation is a nice touch (but sorry, the use of Flash keeps this point out of the Web 2.0 Category).

Web 2.0 Enhancements:

  • The texture is great.
  • Drop shadows add realistic depth.
  • Nice icons, photos, and illustration.

14. DSGN + DVLP

Again the overall black and white color scheme works for this site, and they accent this direction with some clean icons pulled right out of the Web 2.0 handbag.

The homepage stands on its own as a sort of splash page, and has a good mix of icons, strong layout, and even a bit of photography. All of these elements come together in a sophisticated way and manage to emit quite a bit of energy.

You’ll notice that the secondary pages use a separate, 3-column template to serve up the information. It’s all very much a minimalist design, but that’s not a bad thing.

Traditional Aspects:

  • Black, white and gray offer a distinct feel.
  • Good balance of type on the homepage.
  • 3-column secondary page template allows a consistent flow of information once you navigate away from the homepage.

Web 2.0 Enhancements:

  • Social media awareness is definitely in play.
  • Glossy icons scattered throughout add needed color.
  • Good mix of photography and icons.
  • Jumbo icons are featured on the secondary pages.

15. Marchand de Trucs

So maybe I can’t speak the language, but that doesn’t mean the site isn’t still speaking to me… Okay, that line was lame, but still this site is pretty sweet. It contains wonderful artwork and, behind it all, a great foundation and structured content. Not too bad for what (I think) appears to be an online magic shop!

Traditional Aspects:

  • Intense attention to detail.
  • Color theory is well in play, and it’s a very involved palette at that.
  • Good use of fonts that follow the general theme of the site.

Web 2.0 Enhancements:

  • Extremely nice use of illustration as a header
  • Relatively large icons.

16. Paiko

Paiko, though simple, is one of my favorite sites on the list. It comes across as a split blend of traditional design staples and Web 2.0 enhancements: Good type of all sizes (including the very Web 2.0 mega-headlines), great whitespace, and of course the ever-important grid that holds it all together.

The choice of adding texture in the background really sets the site apart, and adds another layer to the already strong design; it is treated with care, and not overly used as it is in some sites. This texture, combined with the more sophisticated appeal of the site, goes a long way in strengthening Paiko’s identity.

Browse over to the portfolio page to see an example of great spacing and grid structure, not to mention some fun examples of well-cropped images.

Traditional Aspects:

  • Simple, two-column grid structure with gutter space that gives it a nice airy feel. This structure is carried throughout the site, which gives it a very consistent flow.
  • Crafty feel adds a nice touch, without being overbearing.
  • Font variations and color are very sophisticated.

Web 2.0 Enhancements:

  • Jumbo-text!
  • The headline is huge and highly legible, and plays nicely against the smaller type below.
  • Great images and layout on the portfolio page.
  • Conservative use of texture adds to the overall identity.

17. Matt Dempsey

On the other extreme of the texture spectrum, we have a site by Matt Dempsey. Now, there’s definitely a thing as too much texture, and some would have a valid point if they argued that this site goes to far.

However, I still like it, and the details won me over as I started sifting through the information. Matt isn’t afraid to break a few rules that have always bugged me (like keeping information above the fold, an idea I feel was invented at a round-table discussion of over-thinking marketing folks. I say so because I once was one of those marketing folks.).

When it comes down to it, Matt Dempsey presents his work, and his site, in a bold and “in your face” manner. And breaking a few rules is what being a designer is all about, whether the rules are old or new.

Traditional Aspects:

  • Believe it or not, there’s a simple grid system underlying the texture.
  • Distinct and unique
  • Not afraid to break a few rules

Web 2.0 Enhancements:

  • Matt uses an obviously Web 2.0 approach to his fonts and logo
  • Good use of technology on the interior pages (the JavaScript slider is a cool touch).
  • Every bit of important information is huge and easy to read.
  • Portfolio presents the work in a fun, high-tech way.

18. Digital Mash

With Digital Mash, you can see that plenty of thought went into the items they wished to include in the site, or better yet, the items they chose to leave out.

Being able to cut back the fat is an important practice for any designer, and Digital Mash lays out the basics, and only the basics. Open the page and you’ll know within seconds what the author of the site is all about.

The smooth gradient of the background does a great job of presenting the content in a sophisticated manner. From the clean type, to the punchy graphic of the illustration, the site keeps it simple.

The best part has to be when you dig deeper into the site. Head to the work page and you’ll find a portfolio presented in an almost old-fashioned way; the individual pieces look as though they’re ready to be printed and bound into a leather attache case.

However, the sleek presentation, the dropshadows, and the small details (such as the slightly bent corners of each piece), give it all a contemporary slant. Combining the new and the old. Gotta love it.

Traditional Aspects:

  • Trimmed away unnecessary elements.
  • Vibrant colors on the homepage and in the header of the secondary pages add a vibrant accent to the gray background.
  • Hierarchy of information is strong, and so is the general flow of the site.

Web 2.0 Enhancements:

  • Amazing presentation of the portfolio images; dropshadows, upturned edges, and small details really bring this site to a higher standard.
  • Nice gradient in the background really presents the information well.
  • Large type and oversized imagery are friendly to the eyes.
  • Very cool navigation solution.

19. Kyan Media

Kyan Media is another site that leans heavily on the Web 2.0 side of the spectrum. The cloud design and the vibrant blue color palette are straight out of the book, but it’s an extremely strong example of the standard.

The site plays it straight, and in large letters tells you exactly what they do, followed by examples of the work. It’s a simple design strategy found in countless sites, and for good reason. It’s quick, and doesn’t threaten a short attention span.

And, like all good examples, it embraces the technology as well as it does traditional design rules. Take some time and hover over the examples of work. It’s a fun and informative way to present featured portfolio pieces, and allows us, the user, to dig deeper, or to get the basics with just a glance.

Traditional Aspects:

  • Everything has an extremely solid feel.
  • General layout of each page is strong
  • The informational hierarchy is great.
  • Fonts, headers, and font colors are consistent throughout.

Web 2.0 Enhancements:

  • Bright blue color palette.
  • Fun use of illustration (who doesn’t like clouds?).
  • Punchy photography.
  • Good implementation of technology.
  • Subtle dropshadows add depth.
  • Highly legible fonts and oversized headers.

20. Rockatee

Well, it says “Functional Design” in the header, so it had better work, right? Luckily, this site does. It’s another example of how texture is creeping into the web design market and confirming the notion that we’re well into the high-speed era of surfing the web.

Something you might notice is that Rockatee has quite a few projects on display in the portfolio section, so a streamlined solution was definitely in order. They did so with a series of snapshots, which showcase the depth of their prolific portfolio. Do yourself a favor and check it out.

Another feature of note is the nice navigation. It’s well placed and makes the site a breeze to click through. They even help you along on the homepage with a nice big button that leads to the portfolio.

Traditional Aspects:

  • Everything has an extremely solid feel.
  • General layout of each page is strong.
  • Color theory is well explored and implemented.
  • Strong attention to detail.

Web 2.0 Enhancements:

  • Fantastic navigation.
  • Big buttons lead you to the important bits.
  • Cool “snapshot” portfolio with great crops of the individual works.
  • Site showcases the designers many side projects, but doesn’t let them get in the way of the central elements.
  • Great idea with the timeline on the “About” page.

21. Things That Are Brown

Another one of my personal favorites is Things That Are Brown. They pull off an extremely polished site that is an equal to (or better than) sites created by large agencies, yet they also give you an inside look at the people behind the scenes.

The about page contains great photography that, while professional enough, is also has a very homemade appeal. You can tell that the team took a trip outside, scouted a decent spot, and took a few snapshots with their own digital cameras.

A professional, yet accessible and friendly team is exactly the type of team I want to work with. These people are real.

This is one of those rare sites that seamlessly fuses strong design rules with modern tweaks. Their tagline, “Humbly Awesome,” is dead on.

Traditional Aspects:

  • Nice color with great accents.
  • Good use of artwork that integrates well.
  • Solid and consistent throughout.

Web 2.0 Enhancements:

  • Navigation is clean and easy to read.
  • Nice buttons that don’t overdo the gloss.
  • Photography is personal and adds a human touch to the site.
  • The portfolio is clear and easy to navigate, with great presentation of the work.
  • Headlines are large, yet sophisticated.

22. Andrew Bradshaw

This is perhaps one of the most sophisticated sites on the list. Andrew has a great way of meshing texture, type, buttons, and photography into a congealed package. He also keeps hierarchy in mind, accentuating the important aspects and minimizing the sections that may not be of interest to all users.

The navigation is a highlight, with varying colors appearing as you hover over the tabs; a very sleek touch.

Also of note is the textured header and the strong font choice used in his logo. Again, Andrew combines subtlety and accents to create a beautiful site that is thorough and compelling throughout.

Traditional Aspects:

  • Overall appeal of clean sophistication.
  • Good use of accent elements, both in color and with type.
  • As usual, a strong grid system holds it together.
  • Hierarchy is implemented well.

Web 2.0 Enhancements:

  • A different take on buttons.
  • Brilliant use of photography and image presentation.
  • Awesome details in the navigation.

23. James Lai

Lately I have a thing for single page websites, and as you’ve probably guessed, I’m a sucker for texture as well. Enter James Lai, a designer who knows how to present himself through a fancy use of type, texture, and animation.

What I commend him for the most is his ability to keep his site to a single page, and forgive us the “All About Me” page found on virtually every site. Though I place a high value on the human element, sometimes the work speaks for itself, and I can’t fault a guy for believing in his own skill set.

Traditional Aspects:

  • Simple, single-page solution.
  • Animation adds interest to the presentation (though it slowed the site a bit on my end).
  • Good attention to detail.

Web 2.0 Enhancements:

  • Huge type on the homepage tells you the exact purpose behind the site.
  • Contact information is easy to find.
  • Cool thumbnails help users navigate the portfolio.
  • Interesting use of texture.

24. Subvert

Subvert was included not only for its obviously functional layout, but for the fading slideshow featured on the homepage. The presentation is fun, but it’s also informative and valuable to potential clients.

The background texture is complimented by transparent details, including a great navigation system featuring transparent tabs! The hover status of this navigation is subtle and maintains the transparency.

I tend to navigate directly to the work pages on these sites, and Subvert doesn’t disappoint in its presentation. The grid structure is strong and easy to navigate, and upon clicking, the user is taken to an expanded view of the work.

Traditional Aspects:

  • Great overall flow.
  • Strong presentation of the portfolio on the “Work” page.

Web 2.0 Enhancements:

  • Huge type presented on a fading slideshow.
  • Transparent navigational tabs!
  • The buttons are nice and add a good contrast to the backgrounds.
  • Slideshow of the office on the “Company” page is a nice touch.
  • Embraces technology.

25. Yellow Bird Project

At first glance this site might appear a bit disheveled or scattered, but the more I look at it, and the more I browse through its pages, the more I’ve noticed the strength of its organization. Better yet, the Indie-inspired design really starts to appeal the longer the stay, and the scattered look of the site actually fits the theme.

If you check out the Photo Gallery, you’ll see a slew of amateur photos that once again add to the Indie look, while showcasing the product.

This sort of underground approach, which was made popular by sites like threadless.com, immediately attaches the viewer to the product.

They want to be a part of the crowd and don’t feel as though someone is just trying to sell them something. If that isn’t a Web 2.0 philosophy, I’m not sure what is.

Traditional Aspects:

  • Crafty logo really establishes the feel, which is carried out throughout the entire site.
  • Though it feels scattered or loose at first, one realizes that this “put together” look is exactly what the designers were going for. They pull off the look while still making the site easy to navigate.
  • Consistent, non-traditional approach.

Web 2.0 Enhancements:

  • It’s more about the philosophy with this one. While the social aspect of Web 2.0 is in full effect, this site is also made strong because of its viral marketing approach and great underlying philanthropy.
  • Builds a community!
  • Great photos and easy navigation don’t hurt either.

In Closing…

Web 2.0 is a tough standard to define, as where traditional design standards are a rigid collection of rules and guidelines (grid structure, color theory, letter spacing, kerning, tracking, and so on), Web 2.0, while containing similar standards, is almost more so a way of life.

It combines philosophy, marketing, technology, ease of use, and countless other aspects of our busy universe with an ultimate goal of making things easier for the masses.

In that regard, Web 2.0 and the traditional rules that were established ages ago, ultimately share the same goal: To organize the chaos, and to simplify the complex.

These days, it can be a tough gig, so we need all of the tools at our disposal, whether they’re cutting edge, or whether they’ve been proven over centuries past.

Written exclusively for WDD by Josh Sears. He is a Writer, Illustrator, and Designer for a slew of web-based projects. He makes his living as Lead Web Designer, Creative Director, and Co-Owner of Littlelines.com. You can check out his work here, or follow his updates on Twitter.

How do you use web 2.0 elements with traditional design? Please share examples from your own portfolio or other good examples that you may have come across.


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