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 …