1 / 17

Effective Website Design Principles and Practices

Explore the best practices and principles for designing a usable website. Learn to balance usability and graphic design considerations, compare and contrast usable vs. non-usable websites, and apply Nielsen's usability principles. Discover how to create a logical and customer-focused site organization. Dive into the essentials: taglines, window titles, search boxes, and more. Get insights on designing for a specific target market and optimizing images for quick loading. Stay ahead of the game with this comprehensive guide!

crwys
Télécharger la présentation

Effective Website Design Principles and Practices

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. Chapter 5: Planning Usable Websites Interface Design

  2. Agenda • Practice designing a website • Compare and contrast a usable Web site with a non-usable Website using Nielsen’s usability principles • Balance usability and graphic design considerations in a site design.

  3. Designing in the Real World • You have already done: • Brand Planners devise the marketing strategy. • Copywriters and Designers produce the creative material for the site. • Project Managers schedule the team members, determine how much their time will cost and maintain the budget. (Well, you have had to manage your own time) • Still to do: • Usability Experts ensure that the site organization is logical, customer-focused and consistent. (TODAY’s LECTURE) • Database Managers ensure that the system ties in smoothly with the backend database. • Testing members of the team takes the site through trial runs to catch errors before releasing it to the public.

  4. Overview of Design Principles

  5. Poor vs. Good Design

  6. 1. Include a tagline 2. Use a distinct window title3. Group corporate info together 2 3 1

  7. 2 – create descriptive window title CA OU 1 – include tagline 3 – about us

  8. 4. Emphasize important tasks 5. Include a search box 5 4

  9. CA OU 5 – include search box 4 – emphasize high priority tasks

  10. 6. Show real site content 7. Use distinct link names 8. Offer easy access to information 6 8 7

  11. CA OU 7 – begin link with important keyword 6 – show real content 8 – easy access to recent features

  12. 9. Keep formatting and organization simple10. Use meaningful, not decorative graphics 9 10 10

  13. 10 – use meaningful graphics 9 – don’t over format; create clean design

  14. The design of your page. Begin by snipping your artwork. The header will be a snip of your icon and App name/tagline together.

  15. Window title: App Name + Tagline (Manage site > General > Site Name) (Make Header icon and text in PPT and save together as a picture. Then Manage site > Site layout > change logo) Search box Icon App Name Tagline Description Buy App(copy Buy link from store. Then insert hyperlink) Store About Us Blog (edit Navigation uncheck automatically organize. Then insert pages and store URL. Uncheck site map) Register for Updates (Insert > Spreadsheet Form) Last __________ First __________ Email __________

  16. Summary/Conclusion • A website may be used to help market an iPhone app. • It is important to follow usability standards because the web does not enforce interface standards. • Jakob Nielsen is a recognized leader in usability standards. • Design your website for a specific target market. • Images used on a website need to be small enough to load quickly; PNG, GIF, and JPEG are both compression standards to squeeze images down in size. The snipping tool defaults to PNG which is just fine.

More Related