design basics & usability shelley paulson june 1, 2005
TRANSCRIPT
![Page 1: Design Basics & Usability Shelley Paulson June 1, 2005](https://reader034.vdocuments.site/reader034/viewer/2022042822/56649e6c5503460f94b6b390/html5/thumbnails/1.jpg)
Design Basics & Usability
Shelley PaulsonJune 1, 2005
![Page 2: Design Basics & Usability Shelley Paulson June 1, 2005](https://reader034.vdocuments.site/reader034/viewer/2022042822/56649e6c5503460f94b6b390/html5/thumbnails/2.jpg)
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
![Page 3: Design Basics & Usability Shelley Paulson June 1, 2005](https://reader034.vdocuments.site/reader034/viewer/2022042822/56649e6c5503460f94b6b390/html5/thumbnails/3.jpg)
BDK
![Page 4: Design Basics & Usability Shelley Paulson June 1, 2005](https://reader034.vdocuments.site/reader034/viewer/2022042822/56649e6c5503460f94b6b390/html5/thumbnails/4.jpg)
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
![Page 5: Design Basics & Usability Shelley Paulson June 1, 2005](https://reader034.vdocuments.site/reader034/viewer/2022042822/56649e6c5503460f94b6b390/html5/thumbnails/5.jpg)
Usability
Don’t mess with what people know– Form Buttons– Links– Navigation
Keep it simple
Provide instructions
Scannable Text
No skip intro pages!
![Page 6: Design Basics & Usability Shelley Paulson June 1, 2005](https://reader034.vdocuments.site/reader034/viewer/2022042822/56649e6c5503460f94b6b390/html5/thumbnails/6.jpg)
Show and Tell
![Page 7: Design Basics & Usability Shelley Paulson June 1, 2005](https://reader034.vdocuments.site/reader034/viewer/2022042822/56649e6c5503460f94b6b390/html5/thumbnails/7.jpg)
![Page 8: Design Basics & Usability Shelley Paulson June 1, 2005](https://reader034.vdocuments.site/reader034/viewer/2022042822/56649e6c5503460f94b6b390/html5/thumbnails/8.jpg)
View the redesigned page
![Page 9: Design Basics & Usability Shelley Paulson June 1, 2005](https://reader034.vdocuments.site/reader034/viewer/2022042822/56649e6c5503460f94b6b390/html5/thumbnails/9.jpg)
![Page 10: Design Basics & Usability Shelley Paulson June 1, 2005](https://reader034.vdocuments.site/reader034/viewer/2022042822/56649e6c5503460f94b6b390/html5/thumbnails/10.jpg)
View the redesigned page
![Page 11: Design Basics & Usability Shelley Paulson June 1, 2005](https://reader034.vdocuments.site/reader034/viewer/2022042822/56649e6c5503460f94b6b390/html5/thumbnails/11.jpg)
![Page 12: Design Basics & Usability Shelley Paulson June 1, 2005](https://reader034.vdocuments.site/reader034/viewer/2022042822/56649e6c5503460f94b6b390/html5/thumbnails/12.jpg)
View the redesigned page
![Page 13: Design Basics & Usability Shelley Paulson June 1, 2005](https://reader034.vdocuments.site/reader034/viewer/2022042822/56649e6c5503460f94b6b390/html5/thumbnails/13.jpg)
![Page 14: Design Basics & Usability Shelley Paulson June 1, 2005](https://reader034.vdocuments.site/reader034/viewer/2022042822/56649e6c5503460f94b6b390/html5/thumbnails/14.jpg)
View the redesigned page
![Page 15: Design Basics & Usability Shelley Paulson June 1, 2005](https://reader034.vdocuments.site/reader034/viewer/2022042822/56649e6c5503460f94b6b390/html5/thumbnails/15.jpg)
My Process
Design research– coolhomepages.com– designinteract.com/sow– digitalrefueler.com (“sites we love” section)– misspato.com– cssvault.com– stylegala.com
![Page 16: Design Basics & Usability Shelley Paulson June 1, 2005](https://reader034.vdocuments.site/reader034/viewer/2022042822/56649e6c5503460f94b6b390/html5/thumbnails/16.jpg)
My Process
Sketching– Yep, paper and pencil– You don’t have to be an artist– Saves a bunch of time
![Page 17: Design Basics & Usability Shelley Paulson June 1, 2005](https://reader034.vdocuments.site/reader034/viewer/2022042822/56649e6c5503460f94b6b390/html5/thumbnails/17.jpg)
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
![Page 18: Design Basics & Usability Shelley Paulson June 1, 2005](https://reader034.vdocuments.site/reader034/viewer/2022042822/56649e6c5503460f94b6b390/html5/thumbnails/18.jpg)
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
![Page 19: Design Basics & Usability Shelley Paulson June 1, 2005](https://reader034.vdocuments.site/reader034/viewer/2022042822/56649e6c5503460f94b6b390/html5/thumbnails/19.jpg)
My Process
Make it Dynamic– Create output pages in Dreamweaver with dummy content for
output– Create applications, replace dummy content with cfml
![Page 20: Design Basics & Usability Shelley Paulson June 1, 2005](https://reader034.vdocuments.site/reader034/viewer/2022042822/56649e6c5503460f94b6b390/html5/thumbnails/20.jpg)
Working with a Designer
Collaborate - clearly define goals
Provide sample output or spec output
Be specific
Leave room for creativity!
![Page 21: Design Basics & Usability Shelley Paulson June 1, 2005](https://reader034.vdocuments.site/reader034/viewer/2022042822/56649e6c5503460f94b6b390/html5/thumbnails/21.jpg)
Resources
How Design (www.howdesign.com)
Creative Latitude (www.creativelatitude.com)
![Page 22: Design Basics & Usability Shelley Paulson June 1, 2005](https://reader034.vdocuments.site/reader034/viewer/2022042822/56649e6c5503460f94b6b390/html5/thumbnails/22.jpg)
Questions?