principles of design for web (2006)
TRANSCRIPT
copyright © 2006 by m.wyllyamzcopyright © 2006 by m.wyllyamz
Basic principles of design:
Applied specifically to creating web pages
you’re workingin the post-revolution era.
the “electronic publishing revolution” has made it both easier and harder for you to get your
message out.
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!
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.
ask yourself ...
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 ...
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 ...
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 ...
remember corporate image
Mangadine Systems Where the future starts when it's good and ready
"branding" or "look & feel" guidelines
a good hammer does not equala 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.
don’t forget all your hats.
producer/designer writer editor artist / graphic designer / layout artist typesetter technician … WEBMASTER.
keep an extra set of eyes handy.
repetition provides cohesion.
a consistent“look and feel”
showsplanning and
professionalism.
variation brings interest.
small variations within your scheme
keep your audience engaged.
symmetry loses your attention
asymmetry holds your interest.
use the rule of thirds.(a design principle taken from photography, fine art, graphic design, et al)
keep the eye on the page.
Effect isa product of quality and culture.
you might also want to think of “effect”
as your audience’s experience.
effect is the result ofunconscious assessment.
Form has function
Style means something.
Style means something.
Style means something.
effect (or experience) is the bottom line.
and very important to realize ...
fashion exists.
details are important.they contribute to the unconscious assessment that is
your audience’s experience.
"Details"“Details”
however …
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 ...
perfectionism wastes time.
80% effort = 99% effect
Strive for excellence …not perfection.
ReadReadthis.this.
Efficiency isa product of effort and effect.
Readthis.
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" for words.the same is "true" for words.
readability is key!
… and content is as important as effect.
top 10 web page mistakesyou 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
a few of the many pitfallsto be aware of
monitor resolution and window size computer platform browser type and version font choices: size, color, and face bandwidth!
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
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
best website buildingtricks 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
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.
#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 …
#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 …