Web Design on a Shoestring

Three Secrets to Shoestring Web Design

1. Use what you have.

2. Keep your focus clear.

3. Dare to do less.

Web Design on a Shoestring by Carrie Bickner, June 2003.

Use What You Have

Web Design on a Shoestring by Carrie Bickner, June 2003.

Astronomy Education Review

• No Funding at First.• MAP (MySQL, Apache, and Perl or

PHP).• XHTML and CSS.• Later, a two-year $150,000 grant from

NASA.

Web Design on a Shoestring by Carrie Bickner, June 2003.

RWW Woodworking

• Budget of about $2,500.

• Consumer digital camera to shoot products.

• Standards-compliant XHTML and CSS.

Web Design on a Shoestring by Carrie Bickner, June 2003.

Keep Your Focus Clear

Web Design on a Shoestring by Carrie Bickner, June 2003.

“Much of the messy advertising you see on television today is the product of committees. Committees can criticize advertisements, but

they should never be allowed to create them.” -- David Ogilvy

Web Design on a Shoestring by Carrie Bickner, June 2003.

Web Design on a Shoestring by Carrie Bickner, June 2003.

Dare to Do Less

Web Design on a Shoestring by Carrie Bickner, June 2003.

Dare to Do Less

• Simple typography.

• Less-is-more color.

• Inexpensive art and photography.

Web Design on a Shoestring by Carrie Bickner, June 2003.

Working Example

Wholesale Wedding Bands

This mother of 8 and grandmother of 6 bought an HTML book and put the site together herself.

Web Design on a Shoestring by Carrie Bickner, June 2003.

The Value of Good Typography

Careful Selection of Typefaces.

The least expensive way to create uniformity and hierarchy is to

select two or three good typefaces.

Web Design on a Shoestring by Carrie Bickner, June 2003.

The Value of Good Typography

Use typefaces consistently.

Once you have selected your typefaces, write a quick visual

style guide that will dictate how each of the typefaces will

be used.

Web Design on a Shoestring by Carrie Bickner, June 2003.

The Value of Good Typography

Place text in a way that creates clean lines.

When you lay text out on the screen, make sure that you use clean

lines. The alignment of each text area should be strong.

Web Design on a Shoestring by Carrie Bickner, June 2003.

Implementing Typographical Decisions

It’s OK to skip CSS, if you are on crack.

Web Design on a Shoestring by Carrie Bickner, June 2003.

Implementing Typographical Decisions

Save $ with CSS and well-formed markup.

• Faster downloads.• Easier maintenance.• Wider range of receiving devices.

Web Design on a Shoestring by Carrie Bickner, June 2003.

Implementing Typographical Decisions

CSS will work if…

• You use well-formed markup, and create styles that take advantage of that markup.

• You use linked, not internal style sheets. Base it on your style guide.

Web Design on a Shoestring by Carrie Bickner, June 2003.

Less-is-more Color

A simple color scheme pays.

The secret to an elegant look is stick to two or three good colors.

Web Design on a Shoestring by Carrie Bickner, June 2003.

Less-is-more Color

Not too much color, but what is there works.

• Clinique• Tiffany’s• Harrumph• NYPL Digital Library Program

Web Design on a Shoestring by Carrie Bickner, June 2003.

“You know what you look like to me, with

your good bag and your cheap shoes? You look like a rube. A well scrubbed,

hustling rube with a little taste.”

-- Hannibal Lecter to Clarice Starling in The Silence of the Lambs (1991)

Art and Photography

• Use what you have.• Place and crop consistantly.• Create uniformity.

Web Design on a Shoestring by Carrie Bickner, June 2003.

Art and Photography

Free and low-cost sources for art.

• Free and out of copyright.(NYPL Picture Collection, NYPL Image Gate, iStockPhoto)

• A Designer's Guide to Making Your Own Stock Photography (for non-photographers) By Bruce Livingstone.

• Rights-managed and Royalty-Free.(Crobis, Getty Images)

• Finishing Discount Engagement Rings.

Web Design on a Shoestring by Carrie Bickner, June 2003.