Design Basics & Usability Shelley Paulson June 1, 2005

Introduction Started Summerset Studio in January, 2003 Design-Photography-Video 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

My Process Design research –coolhomepages.comcoolhomepages.com –designinteract.com/sowdesigninteract.com/sow –digitalrefueler.com (“sites we love” section)digitalrefueler.com –misspato.commisspato.com –cssvault.comcssvault.com –stylegala.comstylegala.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 ( Creative Latitude (

Questions?