Your viewing the DMD archive. Visit the Design Meltdown Portal to find the latest DMD content.

Or skip straight to Monster Meltdown - the new face of Design Meltdown

Table of Contents

PRINCIPLES OF DESIGN

Introduction

Emphasis

Contrast

Balance

Alignment

Repetition

Flow

COLOR USAGE

Black: 1, 2, 3

Black & White: 1, 2, 3, 4, 5, 6

Blue: 1, 2, 3, 4, 5, 6, 7

Blue & Green: 1, 2, 3, 4

Brown: 1, 2, 3, 4, 5, 6

Green: 1, 2, 3, 4, 5, 6, 7, 8

Grey: 1, 2, 3, 4, 5, 6, 7

Muted: 1, 2, 3

Orange: 1, 2, 3, 4

Pink: 1, 2, 3, 4, 5, 6

Pink & Blue: 1, 2, 3

Purple: 1, 2

Rainbow: 1, 2

Red: 1, 2, 3, 4, 5

Ultra Pop: 1, 2, 3

White: 1, 2, 3

Yellow: 1, 2, 3

Color Review

DESIGN ELEMENTS

Badges: 1, 2, 3

Crests: 1, 2

Clouds: 1, 2

Dates

Decorative Animation

Dog Ears: 1, 2

Drop Down Menu

Fabric

Flower Power

Food

Gradient Madness: 1, 2

Icons: 1, 2, 3

iPhones

Mascots

Ornate Elements: 1, 2, 3, 4

Ornate Backgrounds: 1, 2, 3

Price Tags

Radial Elements: 1, 2, 3

Rounded Corners: 1, 2

Single Stripe

Stripes: 1, 2, 3

Transparency

Web Typography: 1, 2

DESIGN STYLES

3d Worlds: 1, 2

Chic Designer

Collage: 1, 2, 3

Distressed Design: 1, 2, 3, 4

Elegant

Giant Type: 1, 2

Illustrated: 1, 2, 3, 4, 5, 6

Let The Art Speak: 1, 2

Minimalism: 1, 2, 3, 4, 5, 6, 7

Photo Backgrounds: 1, 2, 3, 4, 5, 6

Retro Style: 1, 2, 3

Shiny Stuff: 1, 2, 3, 4, 5, 6, 7

Sketchy: 1, 2, 3, 4

Super Clean: 1, 2, 3, 4

DESIGN THEMES

Drips Sprays & Splatters: 1, 2, 3, 4

Extreme Theme

Got Wood: 1, 2, 3, 4, 5

Grassy Design

Holiday Branding: 1, 2

Imitate Print: 1, 2

Nature: 1, 2

Office Supplies

Old Paper: 1, 2, 3, 4, 5

Where Are We: 1, 2

SITE STRUCTURES

3 Little Buckets: 1, 2

Accordion

Atypical Layout: 1, 2, 3

Atypical Navigation: 1, 2, 3, 4, 5

Horizontal Scrolling: 1, 2

Hybrid: 1, 2, 3, 4, 5

Lightbox

Module Madness: 1, 2

One Page Sites: 1, 2, 3, 4, 5, 6, 7

Tabs: 1, 2

Tiny Web Sites: 1, 2

Ultra Zoom: 1, 2

SITE TYPES

Blogs: 1, 2, 3, 4, 5, 6

Business Card

Coming Soon: 1, 2

Commercial: 1, 2

Community Server: 1, 2

Design Firms: 1, 2, 3, 4

Events: 1, 2, 3, 4, 5

eCommerce: 1, 2, 3

Fashion

Finance: 1, 2

Forum Design: 1, 2

Free Scripts

Government

Hotels & Resorts

Kid Sites

Music & Bands: 1, 2, 3

Personal: 1, 2

Photo Blogs & Portfolios: 1, 2

Political

Portfolios: 3, 4, 5, 6, 7, 8, 9, 10, 11

Real Estate: 1, 2, 3, 4

Religious: 1, 2, 3, 4, 5, 6

Restaurants: 1, 2, 3

Software: 1, 2

Travel & Tourism: 1, 2

tShirt Sites

Universities: 1, 2, 3

Web Hosting: 1, 2

Web Services: 1, 2, 3

Web Software: 1, 2

PROBLEMS & SOLUTIONS

Columns: 1, 2

Forms Part 1—Fieldsets & Labels

Forms Part 2—Fieldset & Label Samples

Forms Part 3—Required Fields

Forms Part 4—The Select Control

The Grid

Link Fest: 1, 2

Logo Color Variations

TUTORIALS

Drips 1 - Blend If

Drips 2 - Colorize Sprays

Drips 3 - 3d Drips & Sprays

Stripes 1 - Basic Vertical

Stripes 2 - Random Stripe Patterns

Stripes 3 - Diagonal Stripes

OFF TOPIC POSTS

Web Designer's Idea Book Vol 2

Pre-Order The Book

FOWD, London, and the Book

Future of Web Design Conference

Holiday Branding Refresher

Big News for Design Meltdown

Design Meltdown on Boagworld Podcast

Resolio is Live

Color Search on the Daily Slurp

Icons Part 3

3rd edition — by Patrick McNeil — Mar. 2, 2009

Editions:

1 2 3

The Design Element

It's funny when you open up a topic like this and see that it has been 2 years since you last looked at it. It is so hard to belive I have been doing this for that long. I guess time just tends to run away from you.

The use of icons in design is not likely to ever end. The practice of summing up lots of information in a little package will never go away. It all boils down to the most rapid form of communcation possible. Design is in fact all about communication (even if you don't realize it or belive it). These fine examples of icons put them to work in interesting and useful ways.

Sample Usage

Premium Free Icons

Awesome free icon list

Tango Desktop Project (free icons & more)

Other Free Icon Sources

Great set of mini pixel icons

TIny Icon Factory (web based icon creation, simple b&w)

Commercial Icons

SimpleBits stock icons

How To Create Icons

Anatomy of an icon

Another anatomy of an icon

Create XP Style Icons

Icon drawing tutorial

Recreate the iTunes icon

Special Software

Axialis IconWorkshop

Comments

Derek Mabie

3/23/2009 9:10:59 AM

Good Post, its funny how some companies use icons as an extension of their brand identity and others use them more as a action point for the user. You can always tell the sites who have taken the time to figure out how to accomplish both

Make a Comment:

All fields are required & all posts are hand moderated.

NAME:

E-MAIL: (not displayed publicly)

COMMENT:

HUMAN DETECTOR:

Captcha