220 likes | 372 Views
In this introduction to design and usability by Shelley Paulson, she shares her journey from starting Summerset Studio in 2003 to becoming a web designer since 1996. Covering essential design principles such as concepts, layout balance, content prioritization, and color palette selection, she emphasizes simplicity and effective branding. Usability tips include straightforward navigation and clear instructions for users. The process entails thorough research, sketching, mock-ups, and dynamic content creation, ensuring collaboration and creativity in design projects.
E N D
Design Basics & Usability Shelley Paulson June 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
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!
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)