1. copyright © 2006 by m.wyllyamzcopyright © 2006 by m.wyllyamz

2. Basic principles of design:
Applied specifically to creating web pages

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. 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. 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. ask yourself ...

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. 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. 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. remember corporate image
Mangadine Systems
Where the future starts when it's good and ready
"branding" or "look & feel" guidelines

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. don’t forget all your hats.
producer/designer
writer
editor
artist / graphic designer / layout artist
typesetter
technician …
WEBMASTER.

13. keep an extra set of eyes handy.

14. repetition provides cohesion.
a consistent
“look and feel”
shows
planning and
professionalism.

15. variation brings interest.
small variations within
your scheme
keep your audience
engaged.

16. symmetry loses your attention

17. asymmetry holds your interest.

18. use the rule of thirds.
(a design principle taken from photography, fine art,
graphic design, et al)

19. keep the eye on the page.

20. Effect is
a product of quality and culture.
you might also want to
think of “effect”
as your audience’s
experience.

21. effect is the result of
unconscious assessment.

22. Form has function

23. Style means something.
Style means something.
Style means
something.

24. effect (or experience) is the bottom line.

25. and very important to realize ...

26. fashion exists.

27. details are important.
they contribute to the unconscious assessment that is
your audience’s experience.
"Details"
“Details”
however …

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. perfectionism wastes time.
80% effort = 99% effect

30. Strive for excellence …
not perfection.

31. ReadRead
this.this.
Efficiency is
a product of effort and effect.
Read
this.

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. readability is key!
… and content
is as important as effect.

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. 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. 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. 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
http://www.coolsiteoftheday.com

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. 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. #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. #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 …