1 / 22

Design Basics & Usability

This article explores the fundamentals of design and usability for web developers and designers. Learn how to create visually appealing layouts, prioritize content, and enhance usability through simple navigation and instructions. Discover the best resources and collaborate effectively with designers to achieve your web design goals.

lorak
Download Presentation

Design Basics & Usability

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

  7. View the redesigned page

  8. View the redesigned page

  9. View the redesigned page

  10. View the redesigned page

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

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

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

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

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

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

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

  18. Questions?

More Related