Your SlideShare is downloading. ×
0
Usabilityslideshow
Usabilityslideshow
Usabilityslideshow
Usabilityslideshow
Usabilityslideshow
Usabilityslideshow
Usabilityslideshow
Usabilityslideshow
Usabilityslideshow
Usabilityslideshow
Usabilityslideshow
Usabilityslideshow
Usabilityslideshow
Usabilityslideshow
Usabilityslideshow
Usabilityslideshow
Usabilityslideshow
Usabilityslideshow
Usabilityslideshow
Usabilityslideshow
Usabilityslideshow
Usabilityslideshow
Usabilityslideshow
Usabilityslideshow
Usabilityslideshow
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Usabilityslideshow

235

Published on

Good Web Design

Good Web Design

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

  • Be the first to like this

No Downloads
Views
Total Views
235
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. <ul>Good Web Design With Elements of Art And Universal Useability </ul>
  • 2. Fundamentals <ul>For Websites to not only look pleasing to the eye, but be easy to use and functional as well you need to keep two things in mind: </ul>
  • 3. Fundamentals <ul>You need to know a little about the elements of design along with what is called universal useability. Not surprisingly there are times that these things overlap in good web design. </ul>
  • 4. Elements of Design <ul>One of the first overlapping aspects that goes into putting together a good page includes it's arrangement. This invloves the element of space, or to be more exact, whitespace. As defined, space is ”Space is the area provided for a particular has purpose. It may have two dimensions (length and width), such as a floor, or it may have three dimensions (length, width, and height), such as a room or dwelling.” Whitespace in this instance is the space that you leave blank to better emphasize your content. </ul>
  • 5. Good Example http://www.flickr.com/photos/splat/345674260/
  • 6. Bad Examples http://www.flickr.com/photos/austin2179/2363538677/
  • 7. Whitespace <ul>It's important to have whitespace in your pages for many reasons. One is that it helps emphasize your content. If you have too much around it then it won't get noticed. It's also just more pleasing to the eye when the page is clean. When it is cluttered with information it becomes overwhelming. This overlaps with one of the fundamentals of useability: </ul>
  • 8. Fundamentals of Useability <ul>Design Simply: ”In a simple layout, drawing the eye to an important section can be accomplished by changing one attribute: background color, leading, or typeface. If, however, the page already contains elements of emphasis, highlighting what is important becomes difficult since so many elements are already competing for attention. And if more and more emphasis is added in an effort to make each element stand out, the resulting design is chaotic and confusing” </ul>
  • 9. Design Simply <ul>If your pages are simple, they are easier for the user to use and understand and for you to maintain. Here is a picture of a page I made, which makes good use of whitespace and simplicity: </ul>
  • 10. Design Simply
  • 11. F-Shaped Pattern <ul>Whitespace and Designing simply both fall under on how to arrange your content. Knowing about the F-Shaped Pattern can help. Research has been done on how users scan for information on web pages. They scan heavily at the beginning of the page and drift off near the end. </ul>
  • 12. F-Shaped Pattern <ul>So when deciding where and how to place your content, arrange information by order of importance from top to bottom. </ul>http://www.useit.com/alertbox/reading_pattern.html
  • 13. Color <ul>Back to the Elements of Design, choice in color is also very important when designing your webpages. Not only should your colors be uniform with the rest of your pages, but your content should contrast from the rest of your page. For example, if you have a white background, your content will stand out best if the color of you font is black. If colors don't contrast, not only will your content be harder to notice, but also harder for the user to read. </ul>
  • 14. Bad Example
  • 15. Line <ul><li>Another Element that is important to think about in your design is the use of line. Line ”is the mark made by a moving point, such as a pencil or brush. The edges of shapes and forms also create lines. It is the basic component of a shape drawn on paper. Lines and curves are the basic building blocks of two dimensional shapes like a house's plan.” For web design an emphasis on ”Psychic Line” is needed. </li></ul>
  • 16. Line <ul>Psychic Line is the imaginary line created as your eyes are drawn from one thing to another. This can be useful in the design of your pages because if used correctly, it can help you in placing your content and help guide the user through your pages. </ul>
  • 17. Usability http://www.flickr.com/photos/logo_symbol_disability_handicap/1362225689/
  • 18. Build Well <ul>Back to usability, another fundamental is Building Well. This is setting up the page so that the user can still fully navigate it and get all the information they need from it even if it can't fully load, which is what's called a ”fall back”. For images use alt tags so if the picture can't load, a description still comes up in it's place. </ul>http://www.flickr.com/photos/mag3737/3033430499/
  • 19. HTML http://www.flickr.com/photos/jesper/346483297/
  • 20. HTML <ul>For creating your pages, things like Flash and PDF's can be a great way to enrich the content of your page, yet may decrease the accesability of your site because not everybody may be able to have access to the software or plugins and your pages will not display correctly. Sticking with HTML is better because everyone using a browser will be able to display the page. </ul>
  • 21. Transformation http://www.flickr.com/photos/kingsbraegarden/250060121/
  • 22. Transformation <ul>”Web pages adapt to the user environment and user modifications. Design pages that adapt to different conditions, such as enlarged text or different window widths, while keeping their design integrity.” A big mistake that developers make is that they design their pages to be static, distorting pages too badly for users who need to adjust the page to view it. </ul>
  • 23. Keyboard Access http://www.flickr.com/photos/ppdigital/2329376071/
  • 24. Keyboard Access <ul>”Some users navigate the Web using the keyboard only. Make sure all functional elements, such as links and forms, can be controlled and activated from the keyboard.” With the Elements of Design and Fundamentals of Useability, you will be well on your way to creating good looking, user friendly websites. </ul>
  • 25. Credits <ul><li>http://universalusability.com/access_by_design/fundamentals/
  • 26. http://en.wikipedia.org/wiki/Design_elements_and_principles
  • 27. http://www.useit.com/alertbox/reading_pattern.html </li></ul>

×