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

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

Blue & Green: 1, 2, 3, 4

Brown: 1, 2, 3, 4, 5

Green«NEW»: 1, 2, 3, 4, 5, 6, 7, 8

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

Muted: 1, 2, 3

Orange: 1, 2, 3

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

Pink & Blue: 1, 2, 3

Purple

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 & TECHNIQUES

3d Worlds: 1, 2

3 Little Buckets: 1, 2

Accordion

Atypical Layout: 1, 2

Atypical Navigation: 1, 2, 3, 4

Badges: 1, 2, 3

Chic Designer

Crests: 1, 2

Clouds: 1, 2

Collage: 1, 2, 3

Coming Soon

Dates

Decorative Animation

Distressed Design: 1, 2, 3, 4

Dog Ears: 1, 2

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

Drop Down Menu

Elegant

Extreme Theme

Flower Power

Food

Giant Type: 1, 2

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

Gradient Madness: 1, 2

Grassy Design

Holiday Branding: 1, 2

Horizontal Scrolling: 1, 2

Hybrid: 1, 2, 3, 4, 5

Icons: 1, 2

Illustrated: 1, 2, 3, 4, 5

Imitate Print: 1, 2

Let The Art Speak: 1, 2

Lightbox

Mascots

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

Module Madness: 1, 2

Nature: 1, 2

Office Supplies

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

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

Ornate Elements: 1, 2, 3, 4

Ornate Backgrounds: 1, 2, 3

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

Price Tags

Radial Elements: 1, 2, 3

Retro Style: 1, 2, 3

Rounded Corners: 1, 2

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

Single Stripe

Sketchy: 1, 2, 3, 4

Stripes: 1, 2, 3

Super Clean: 1, 2, 3, 4

Tabs: 1, 2

Tiny Web Sites: 1, 2

Transparency

Web Typography: 1, 2

Ultra Zoom: 1, 2

Where Are We: 1, 2

SITE TYPES

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

Commercial: 1, 2

Community Server: 1, 2

Design Firms: 1, 2, 3

Events: 1, 2, 3

eCommerce: 1, 2, 3

Fashion

Finance: 1, 2

Free Scripts

Government

Hotels & Resorts

Kid Sites

Music & Bands: 1, 2, 3

Personal

Photo Blogs & Portfolios: 1, 2

Political

Portfolios: 1, 2, 3, 4, 5, 6, 7, 8, 9

Real Estate: 1, 2, 3

Religious: 1, 2, 3, 4, 5

Restaurants: 1, 2, 3

Software

Travel & Tourism: 1, 2

tShirt Sites

Universities: 1, 2, 3

Web Hosting: 1, 2

Web Services: 1, 2, 3

Web Software

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

Forum Design: 1, 2

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

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

Suggest A Site

Photographic Backgrounds Part 3

3rd edition — by Patrick McNeil — Feb. 9, 2007

Editions:

1 2 3 4 5

Sample Usage

Comments

skippy

2/9/2007 2:58:58 PM

How about calling this section the "Scale my browser to full screen so i have to freakin resize afterwards - Part 1". Seriously, why do people do this?

Patrick

2/9/2007 3:05:43 PM

no doubt, I HATE sites that do that. I skip many samples for that reason alone...only including them if they are really good.

Kelli

2/10/2007 1:01:34 PM

Good bunch of samples there. And I agree-- nothing annoys me more than a site that resizes my browser window.

jkru

2/11/2007 8:44:01 PM

Not all the sites resize your browser. And alsowhy not take advantage of all the available spaceinstead of being confined to a box.

Ritch

2/11/2007 8:44:37 PM

You guys should learn about marketing and get a multiscreen system, if you don´t want to resize your windows.

This technique is excellent

Patrick

2/11/2007 8:46:01 PM

Ritch, you can´t tell me that it isn´t massively annoying to have web sites resize your browser; and this has nothing to do with having more then one monitor.

TJ

2/13/2007 7:56:20 AM

It´s like opening a present., that one click gives you just a few moments of special attention. All focus is on the design and interactive experience. In full (screen) effect. That´s the way the Brand and/or designer wants you to experience it. If you don´t like it, you just switch away. It´s the same with television. Not a big deal, just 1 key to press right?

Lib

2/22/2007 7:13:56 PM

Yeah, all the focus is on the design and interactive experience... no, wait. All the focus is on me closing that irritating window as quickly as possible ;)

It´s like a stranger coming into your house and rearranging your furniture - a bit rude!

Lee Rickler

2/26/2007 11:48:37 AM

Talking of photographic backgrounds?

http://z6.co.uk

tom

3/6/2007 7:41:12 PM

I think as aesthetically, photo backgrounds can look very cool and design wise there are ways to make your screen a general size to meet the needs of those with smaller screens. Too me, it´s not too annoying to resize my browser window, it´s all part of interacting with the user...if all websites were the same size, then it would be very boring. Overall though, I enjoy looking at them. I can say it´s given my design studio(creativeinfluences) a boost in exposure :)

Bhushan

5/8/2007 7:27:04 AM

Hi,
It is wonderful and out of imagination.

Thanxs

Make a Comment:

All fields are required & all posts are hand moderated.

NAME:

E-MAIL: (not displayed publicly)

COMMENT:

HUMAN DETECTOR:

Captcha

free web stats