Principles of Design for Web (2006)


Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Principles of Design for Web (2006)

  1. 1. copyright © 2006 by m.wyllyamzcopyright © 2006 by m.wyllyamz
  2. 2. Basic principles of design: Applied specifically to creating web pages
  3. 3. you’re working in the post-revolution era. the “electronic publishing revolution” has made it both easier and harder for you to get your message out.
  4. 4. so, assume nobody’s interested. in the information culture that we now live, why should anybody read your pages? learn to trick your audience into paying attention. treat your publication like any other presentation, eg: a speech. this is an absolutely key principle!
  5. 5. invention is … electronic publishing is perhaps the easiest medium ever in which you can “steal” other peoples ideas. just be aware of copyright issues as you “create,” but it is certainly acceptable to borrow from other people's designs as you go. the art of "stealing" creatively.
  6. 6. ask yourself ...
  7. 7. what’s your purpose? - what do you want your pages to achieve? - determine this very early on in the planning stages of your design. to entertain to persuade to identify to inform to elicit a response to provide a reference ? ask yourself ...
  8. 8. what’s your image? formal, informal, friendly, playful, elegant, stylish, trendy, hip, classic, adventurous, conservative, corporate, radical, underground, scholarly, scientific, provocative, diverse, inclusive, spirited, concerned … the design of your pages will create an image, whether you like it or not. ask yourself ...
  9. 9. who’s your audience? who do you want to visit your page? what are they like? what do they know already? what are their interests? what other specific media do they consume? TV, radio, music, movies, magazines, websites … learn everything you can about your audience. ask yourself ...
  10. 10. remember corporate image Mangadine Systems Where the future starts when it's good and ready "branding" or "look & feel" guidelines
  11. 11. a good hammer does not equal a nice birdhouse. software is only a tool, and good design is not one of it’s default settings. in other words ... having the tools of a designer does not necessarily make you a designer.
  12. 12. don’t forget all your hats. producer/designer writer editor artist / graphic designer / layout artist typesetter technician … WEBMASTER.
  13. 13. keep an extra set of eyes handy.
  14. 14. repetition provides cohesion. a consistent “look and feel” shows planning and professionalism.
  15. 15. variation brings interest. small variations within your scheme keep your audience engaged.
  16. 16. symmetry loses your attention
  17. 17. asymmetry holds your interest.
  18. 18. use the rule of thirds. (a design principle taken from photography, fine art, graphic design, et al)
  19. 19. keep the eye on the page.
  20. 20. Effect is a product of quality and culture. you might also want to think of “effect” as your audience’s experience.
  21. 21. effect is the result of unconscious assessment.
  22. 22. Form has function
  23. 23. Style means something. Style means something. Style means something.
  24. 24. effect (or experience) is the bottom line.
  25. 25. and very important to realize ...
  26. 26. fashion exists.
  27. 27. details are important. they contribute to the unconscious assessment that is your audience’s experience. "Details" “Details” however …
  28. 28. perfectionism wastes time. most often it takes: • 20% of your time to do 80% of the job. • and 80% of your time to complete the final 20% of that job. another way to put this ...
  29. 29. perfectionism wastes time. 80% effort = 99% effect
  30. 30. Strive for excellence … not perfection.
  31. 31. ReadRead this.this. Efficiency is a product of effort and effect. Read this.
  32. 32. less is more. in designing a new "graphic piece," it is better in the opinion of most professional layout artists — though there are a few examples that seem to demonstrate the contrary — to use only a few elements and fonts than to use many different kinds. the same is "true" forthe same is "true" for words.words.
  33. 33. readability is key! … and content is as important as effect.
  34. 34. top 10 web page mistakes you want to avoid #10 no discernible goal or purpose for the page #9 just plain ugly pages #8 graphics without purpose or meaning #7 bandwidth-hogging graphics or multimedia #6 redundant content #5 “bigoted” pages #4 desired content impossible to find #3 lack of navigational aids #2 untested pages or pages “under construction” #1 lack of content
  35. 35. a few of the many pitfalls to be aware of monitor resolution and window size computer platform browser type and version font choices: size, color, and face bandwidth!
  36. 36. know your images. file formats: .gif vs. .jpeg, et al • JPGs have better compression and smaller file size • GIFs can be transparent or animated understand resolution • you can "sample down" but not "sample up" bandwidth is an issue a good web designer knows his/her image editor. eg: adobe photoshop
  37. 37. publicizing your pages WWW search engines and indexes keep in mind what “spiders” are doing. • spamdexing. a good idea? “best” sites,” message boards, "rings," blogs … site promotion services paying for traffic awards and contests
  38. 38. best website building tricks and tips... utilization of tables (prefer over CSS?) relative vs. absolute definitions understanding line vs. paragraph breaks the single pixel .gif using style sheets and more advanced techniques
  39. 39. three final points … #1 "the law of computer-user inverse inefficiency." • a novice wastes time figuring out how to do something that a veteran could do in just a few seconds. • a veteran wastes time designing a time-saving feature that will only trim a few seconds from how long it would take a novice.
  40. 40. #2 technology is not only your friend, but also … your enemy. the Internet can be a very distracting place. to complete your task, you must exercise discipline. three final points …
  41. 41. #3 remember Hofstedder’s law. “Everything you do will take three times longer than you think it will, even when you take Hofstedder's law into account.” three final points …