Design Basics & Usability

Shelley PaulsonJune 1, 2005

Introduction

Started Summerset Studio in January, 2003

Design-Photography-Video

www.summersetstudio.com

Previously:– Johnson Bros (Director of Communications)– RedStar Creative (Interactive Director)– Bennett Office Technologies (Web Designer/Developer)

Web designer since 1996

BDK

Design Basics

Start with a concept

Let your layouts breathe

Find a balance

Create a focal point

Prioritize content

Keep it simple

Choose a color palette

Limit typeface usage

Design with CSS

Reinforce Branding

Usability

Don’t mess with what people know– Form Buttons– Links– Navigation

Keep it simple

Provide instructions

Scannable Text

No skip intro pages!

Show and Tell

View the redesigned page

View the redesigned page

View the redesigned page

View the redesigned page

My Process

Design research– coolhomepages.com– designinteract.com/sow– digitalrefueler.com (“sites we love” section)– misspato.com– cssvault.com– stylegala.com

My Process

Sketching– Yep, paper and pencil– You don’t have to be an artist– Saves a bunch of time

My Process

Mock up Design in Fireworks– Design home page– Include all the elements, including dummy text– Send proof to client as a jpeg– After home page approval, design secondary page

My Process

Slice and dice– Slice up home page and secondary page design in Fireworks– Export html just for the rollovers– Rebuild page in Dreamweaver– Create templates for secondary pages

My Process

Make it Dynamic– Create output pages in Dreamweaver with dummy content for

output– Create applications, replace dummy content with cfml

Working with a Designer

Collaborate - clearly define goals

Provide sample output or spec output

Be specific

Leave room for creativity!

Resources

How Design (www.howdesign.com)

Creative Latitude (www.creativelatitude.com)

Questions?