Basics of Web Design

968 views
860 views

Published on

Basics of Web Design presentation for class or other venues

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
968
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Basics of Web Design

  1. 1. Web Design: Important Concepts Staci Trekles Purdue University Calumet
  2. 2. Basic Rules to Live By <ul><li>What you see on your screen when you view a page is NOT what everyone else sees </li></ul><ul><li>Web editing programs are NOT word processors - styles and formatting are controlled differently and are much simpler on the Web </li></ul><ul><li>Cool graphics and animations are nice, but make sure there is always a text alternative </li></ul>
  3. 3. Basic Rules to Live By <ul><li>Warn your users - about popup windows, where links go, etc. so that there ’s nothing unexpected </li></ul><ul><li>The faster your pages load, the happier your users are </li></ul><ul><li>Keep everything clear and understandable - keep all the navigation in the same place, looking the same, on all pages </li></ul><ul><li>Reduce unnecessary scrolling, especially left-to-right scrolling </li></ul><ul><li>Know your Audience!! </li></ul>
  4. 4. What do we mean by “audience”? <ul><li>The target audience refers to the people for whom your website is primarily for </li></ul><ul><li>Different groups of people tend to respond to and expect different things </li></ul><ul><li>How a site appeals to a target audience is usually intertwined with the company/school/organization image </li></ul>
  5. 5. For example… <ul><li>Who seems to be the target audience for a company like Apple ( http://www.apple.com ) based on their website? </li></ul><ul><li>What about Microsoft ( http://www.microsoft.com )? Are they similar or different audiences? </li></ul>
  6. 6. Another example… <ul><li>Look at the differences between Chrysler ’s different divisions: </li></ul><ul><ul><li>http://www.chrysler.com </li></ul></ul><ul><ul><li>http://www.dodge.com </li></ul></ul><ul><ul><li>http://www.jeep.com </li></ul></ul><ul><li>What are some of the standout features that help reveal who the target group is for each of the auto divisions? </li></ul>
  7. 7. One more set… <ul><li>Consider these colleges and the way they present themselves: </li></ul><ul><ul><li>http://www.harvard.edu/ </li></ul></ul><ul><ul><li>http://www.ucla.edu </li></ul></ul><ul><ul><li>http://www.capella.edu/ </li></ul></ul><ul><ul><li>http://www.govst.edu/ </li></ul></ul><ul><li>Or these K-12 school districts: </li></ul><ul><ul><li>http://www.evscschools.com/ </li></ul></ul><ul><ul><li>http://www.ecps.org </li></ul></ul><ul><ul><li>http://www.grand.k12.ut.us/ </li></ul></ul><ul><ul><li>http://www.crb2.k12.wy.us/ </li></ul></ul>
  8. 8. When designing for an audience <ul><li>Consider these primary characteristics: </li></ul><ul><ul><li>How your audience likes to receive information : Are they busy and in a hurry? Or do they like to stay a while and surf? </li></ul></ul><ul><ul><li>Their computer skills and the capabilities of their machines/Internet access </li></ul></ul><ul><ul><li>Their age , gender , socioeconomic status, location , native language </li></ul></ul>
  9. 9. User Preferences <ul><li>Younger users are more likely than older users to “surf” </li></ul><ul><li>Older users have specific purposes for their Net use, including learning activities, travel and product information, health, news </li></ul><ul><li>Older users tend to be more worried about privacy and security risks </li></ul><ul><li>Users with lower literacy levels have a harder time with navigating, using icons, and reading onscreen </li></ul>
  10. 10. User Preferences <ul><li>Most users want an obvious means to navigate the site and get to the information they want </li></ul><ul><li>Many users don ’t want to scroll down much and some do not even know you can scroll down </li></ul><ul><li>Splash screens can be a positive thing when used well and tastefully, but most users want the option to skip them </li></ul>
  11. 11. User Preferences <ul><li>Most users will not wait too long for a page to load - 5-7 seconds is about the longest many users will wait </li></ul><ul><li>Users tend to scan through pages and focus on headlines and briefs first - make headlines obvious and break up text into short paragraphs to keep them interested </li></ul><ul><li>People learning online are more likely to spend time reading but they still want visual cues like graphics and white space to move the eye through the page </li></ul>
  12. 12. So what makes a page “good”? <ul><li>There is no one “right” way to design a page, but most web designers agree on these: </li></ul><ul><ul><li>Usability! </li></ul></ul><ul><ul><li>Clean designs without a lot of “clutter” </li></ul></ul><ul><ul><li>Mix of text and multimedia elements (i.e., avoid Flash-only sites) </li></ul></ul><ul><ul><li>Fast-loading pages </li></ul></ul><ul><ul><li>Minimal need to download plugins to view the site </li></ul></ul><ul><ul><li>Compatibility with as many browsers as possible </li></ul></ul>
  13. 13. So that means that a good web page is a boring one… <ul><li>No, certainly not! There are lots of web pages out there that are simple yet very attractive and usable </li></ul><ul><li>Some of the most popular websites in the world are relatively simple in navigation and presentation: </li></ul><ul><ul><li>http://www.google.com </li></ul></ul><ul><ul><li>http://www.youtube.com </li></ul></ul><ul><ul><li>http://www.myspace.com </li></ul></ul>
  14. 14. Good Designs Get the Message Across <ul><li>No matter what the message, get it across quickly and with minimal frustration on the part of the user </li></ul><ul><li>Otherwise, they won ’t want to view your page or buy into your message </li></ul><ul><li>Compare and contrast these two sites: </li></ul><ul><ul><li>http://www.purdue.edu </li></ul></ul><ul><ul><li>http://www.mit.edu/ </li></ul></ul>
  15. 15. How about these? <ul><li>http://inpics.net/ vs. http://www.lynda.com/ </li></ul><ul><li>OR http://www.ebay.com vs. http://www.target.com </li></ul>
  16. 16. What are your favorites? <ul><li>What are some of your favorite sites as far as design is concerned? </li></ul><ul><li>What about them makes them attractive to you? Are they easy to use? Fun and entertaining? A little of both? </li></ul><ul><li>A favorite place of mine for ideas and CSS stylesheets (similar to the premade styles you can get in Dreamweaver CS3 and up, but with far more choices and options): http://css-templates.org </li></ul>
  17. 17. Useful Resources <ul><li>http://www.pantos.org/atw/basics.html </li></ul><ul><li>http://www.w3.org/ </li></ul><ul><li>http://www.useit.com/alertbox/20030825.html </li></ul><ul><li>http://avtecmedia.com/web-site-design/fundamentals.htm </li></ul><ul><li>http://www.useit.com/alertbox/990530.html </li></ul>
  18. 18. Recommended Reading <ul><li>Dept. of Health and Human Services Internet Usability Guidelines: http://www.usability.gov/pdfs/guidelines.html </li></ul><ul><li>Digital Divide between young and old Internet users article: http://www.firstmonday.org/issues/issue10_10/paul/index.html </li></ul><ul><li>Writing for a Web audience: http://www.smartisans.com/articles/web_writing.aspx </li></ul><ul><li>Stanford-Poynter Eyetracking Study: http://www.poynterextra.org/et/i.htm </li></ul>

×