1 / 37

Basics of Web Design

Technology Training. Basics of Web Design. What do you think of…?. Shop in Paradise Thomas Edison Foundation LA Eyeworks. Google Mint.com J Sainsbury plc. What is ‘Good’ Web Design?. The designer:

karan
Download Presentation

Basics of Web Design

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

More Related