Download
technology training n.
Skip this Video
Loading SlideShow in 5 Seconds..
Basics of Web Design PowerPoint Presentation
Download Presentation
Basics of Web Design

Basics of Web Design

101 Vues Download Presentation
Télécharger la présentation

Basics of Web Design

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Technology Training Basics of Web Design

  2. What do you think of…? • Shop in Paradise • Thomas Edison Foundation • LA Eyeworks • Google • Mint.com • J Sainsbury plc

  3. What is ‘Good’ Web Design? • The designer: • ‘Beautiful design. A significant amount of effort must be placed into making it attractive.’ • The client: • ‘Effective. It must bring in customers and meet client’s goals.’ • The user: • ‘Functional. It’s easy to read, easy to use and easy to get out of it what was promised.’

  4. Basics of Web Design - Overview From site structure to front-end design

  5. Plan The who, what, why, and how

  6. Plan – Users • Who are they and why would they use your site? • They want/need information • They want/need to make a purchase/donation • They want/need to be entertained • They want/need to be part of a community

  7. Plan – Content • What is your content? • “Heroin Content” • Web writing basics • Shorter is better • Use search keywords • Drive user action • Proofread • Get a second opinion

  8. Plan – Purpose • Why a website? • Share information (photo albums, profiles, calendars) • Gather data, materials, or money (surveys, forms, shopping carts, etc) • Facilitate collaboration, discussion, and creation of ideas (wikis, blogs, forums)

  9. Plan – Format • How will you deliver your content? • Dictated by Purpose and Content • Happens mostly in Plan and Organize phase • Blogs, surveys, calendar, video, podcasts, social networking (Facebook, Twitter, etc.)

  10. Plan – Format • Wikis • Wikipedia • TV Tropes • Blogs • The Huffington Post • The Official Google Blog • Facebook • Chevron • Skittles • Twitter • Starbucks • Barack Obama • YouTube • Universal Music Group • Geico

  11. Organize Common Mistakes, Site Maps, Print vs. Web

  12. Organize – Common Mistakes • Unclear purpose • Too much material on one page • Navigational failure • Direct Print to web

  13. Organize – Common Mistakes • Too Much Material • Priority: Before, After • Beware scrolling: Before, After

  14. Organize – Common Mistakes • Navigational Failure • Poorly worded links • Inconsistent navigation • Dead-end pages and lead links • No way back home

  15. Organize – Common Mistakes Print Web

  16. Organize – Site Maps • Show site architecture • Link related topics together • Organize material based on users’ needs • No dead-end pages

  17. Organize – Site Maps • All navigation must answer: • Where am I? • Where have I been? • Where can I go next? • Where's the Home Page? • Where's the Home Home Page?

  18. Design Common Mistakes, Layout, and Accessibility

  19. Design – Common Mistakes • Form over Function • Elements that get in the way • Not enough contrast • Visual elements vs. text

  20. Design – Common Mistakes • (Mis)Using visual elements instead of text • Limits accessibility of screen readers • Not search-engine friendly • Increases page size and load time • Harder to edit

  21. Design – Accessibility • When sites are correctly designed, developed and edited, all users can have equal access to information and functionality.

  22. Design – Accessibility • Text Alternatives for Non-Text • Alternatives for Time-based Media • Adaptable • Distinguishable • Keyboard Accessible • Well-timed • Avoid Seizures • Navigable • Readable • Predictable • Input Assistance • Compatible • Web Content Accessibility Guidelines are good for all users

  23. Revise Validators, Simulators, and Guinea Pigs

  24. Revise – Testing Quantitative Qualitative User testing Friends Colleagues Designers/Developers OMC • Validators • Check for broken links • Compare to web standards • Simulators • Mobile device simulators • Search Engine Optimization Tools (SEOs) • Cross-platform check • Firefox, IE, Safari, Chrome, Opera, etc. • Mac OS X, XP, Vista, Windows 7, Linux, etc.

  25. Revise – Keep Content Fresh • Create/find new content regularly • Replace images • Verify external links are active • Look for broken links • Solicit user input • Check marketing outlets

  26. Next Steps Hosting, domain names, and publishing options

  27. Next Steps – Web Hosting Options • Determine your needs • Bandwidth: streaming video vs. portfolio • Space requirements • Choosing the right host • Reliability • Contact • Cost • Extra features • Some hosting sites offer domain names or entire publishing packages

  28. Next Steps – Domain Names • ‘Vanity plate’ of the web • Examples • Go Daddy • Network Solutions • Register.com

  29. Technology Training www.scu.edu/training Questions?