1. Design Basics & Usability Shelley Paulson June 1, 2005

2. 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

3. BDK

4. 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

5. Usability Don’t mess with what people know –Form Buttons –Links –Navigation Keep it simple Provide instructions Scannable Text No skip intro pages!

6. Show and Tell

8. View the redesigned page

15. 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

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

17. 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

18. 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

19. My Process Make it Dynamic –Create output pages in Dreamweaver with dummy content for output –Create applications, replace dummy content with cfml

20. Working with a Designer Collaborate - clearly define goals Provide sample output or spec output Be specific Leave room for creativity!

21. Resources How Design (www.howdesign.com)www.howdesign.com Creative Latitude (www.creativelatitude.com)www.creativelatitude.com

22. Questions?