design with crap.pdf

7/23/2019 Design With CRAP.pdf

http://slidepdf.com/reader/full/design-with-crappdf 1/34

Designing withC.R.A.P.

INFO/COM S 130:Intermediate Web Design

and Pwning



Who am I?

● Christian Montoya

● Section 3 Teaching Assistant● Class of 2007 Senior

● Electrical and Computer Engineering

● Web e!eloper in my spare time

● "logger when I'm not doing homework



oda! !o" wi## #earn abo"t C$%$&$P$

● C#$#A#%# & The ' basic principles of design#

●Contrast

● Repetition

● Alignment

● Pro(imity

● )###the basic principles of design that appear ine!ery *ell+designed piece of *or,#

● + $obin Williams

● The Non-Designer's Design Book



Dis'#aimer

● C#$#A#%# *ill not guarantee perfect design

● This lecture is not enough for you to fullyunderstand C#$#A#%#

● .nly *hen you truly understand C#$#A#%# *illyou ,no* *hen to use it and ho*

● The Non-Designer's Design Book is a must read

if you *ant to be a good designer /and impressthe graders

● 1 am not an e(pert on design- but 1 ,no*C#$#A#%# *hen 1 see it



Contrast

● 1f elements on your

page are not thesame- ma,e them!ery different#

● Contrast attracts theattention of your!ie*ers#



Contrast: ()hibit 1



Contrast: ()hibit *



%e+etition

● $epeat !isual

elements throughouteach page and yourentire site#

● $epetition de!elopsthe organiation andcreates a strongbrand#



%e+etition: ()hibit 1



%e+etition: ()hibit *



&#ignment

● othing should be

placed arbitrarily# onot toss elementsrandomly at yourpage or simply try tofill space#

● E!ery element shouldha!e a !isualconnection *ithanother on the page#



&#ignment: ()hibit 1



&#ignment: ()hibit *



Pro)imit!

● 1tems related to each

other should begrouped closetogether#

● 4rouping organiesinformation andreduces clutter#



Pro)imit!: ()hibit 1



Pro)imit!: ()hibit *



,et-s +#a! .S+ot that C$%$&$P$.

● 5et6s loo, at some successful *eb designs and

e(amine ho* they utilie the principles ofcontrast- repetition- alignment- and pro(imityeffecti!ely#



()am+#e 1: 'hero#et$'om



()am+#e 1 C$%$&$P$ ana#!sis

● eader- Car Types-

and Specific Modelsare all separatedsimply by changes incolor /contrast#

● Car Types are aligned*ith each other- andModels are aligned*ith each other# Allarro*s are aligned#




● Without the contrast

and alignment- the!isual hierarchy andorganiation ofinformation is lost#




● $epetition of the style of these )buttons) unifies

them as being related both in sub8ect andfunction# 1t is also clear that any con!entionsthat apply to one button apply to the rest#




● Slight de!iations from the style causes elements

to stand out and attract undue attention# Anelement that stands out also brea,s the !isualflo* of the design#



()am+#e *: i'onb"et$'om



()am+#e * C$%$&$P$ ana#!sis

● %ro(imity strengthens the center stage andseparates it from the rest of the site#



()am+#e * C$%$&$P$ ana#!sis

● Without tight pro(imity- the !isual relationship isno longer present#



()am+#e 3: immertwins$'om




● Alignment of

paragraphs ,eepscontent organied#

● %ro(imity of headersto sub+contentpro!ides a !isualrelation#

● $epetition ma,eselements easy torecognie#




● $emo!al of these

cues from theinformation beingpresented can ma,ethe content !eryconfusing#



()am+#e 2: eer#e$d"oh$'om




● Contrast bet*een columns defines main andsecondary le!els of content#

● %ro(imity of title to post+data creates a commonlocation *here all information about a post canbe found#




● Without contrast bet*een the columns- it is hardto tell that columns are e!en present#

● With post+data thro*n about the page 8ust to fillspace- the user is left *ith many places to loo,for information#



F"rther reading$$$

● o* C#$#A#%# is 9our Site esign:

● ; Simple Steps to esigning 4rid Systems● 4rid Computing### and esign

● Color Scheme 4enerator

● Color Schemer

● And of course- The Non-Designer's DesignBook

http://www.thinkvitamin.com/features/design/how-crap-is-your-site-design

http://www.markboulton.co.uk/journal/five_simple_steps_to_designing_grid_systems_part_1/

http://www.subtraction.com/archives/2004/1231_grid_computi.php

http://wellstyled.com/tools/colorscheme2/index-en.html

http://www.colorschemer.com/online.html

http://www.colorschemer.com/online.html

http://wellstyled.com/tools/colorscheme2/index-en.html

http://www.subtraction.com/archives/2004/1231_grid_computi.php

http://www.markboulton.co.uk/journal/five_simple_steps_to_designing_grid_systems_part_1/

http://www.thinkvitamin.com/features/design/how-crap-is-your-site-design



Credits

● Contrast E(hibit <& dangergraphics#com

●

Contrast E(hibit 2& stopdesign#com● $epetition E(hibit <& shoc,media#com#au

● $epetition E(hibit 2& che!rolet#com

● Alignment E(hibit <& subtraction#com

● Alignment E(hibit 2& pseudoroom#com

● %ro(imity E(hibit <& mattbrett#com

● %ro(imity E(hibit 2& paumano,re!ie*#com

● All ugly sample graphics *ere made by Christian Montoya



4 5 Design Baseline

Basic Visual Design Elements:

CRAP, color, continuity, imagery, white space, balance, branding, font size & style.

Basic questions to consider:

1. Focal point: Where is the eye drawn when the page opens (and what do users immediatelyunderstand)—and what design elements induce that focus?

2. User options: What kinds of users are being served, and what are they encouraged to do (esp usersnew to this topic or site)—and what elements induce that activity?

3. What makes the site navigation easy for anyone to use?

4. How is information hierarchy established?

5. What brands the site, and/or lends credibility, and/or makes it sticky or appealing—and what is theoverall tone?

6. Overall layout: how are balance achieved and clutter avoided?

7. What is the lasting impression—what 1 or 2 things will people definitely remember after leaving andwhat's the site's unique niche or user-benefit?

Checklist:

Main content fits 800x600.

Navigation contrasts with other content and establishes a consistent, site-wide pattern.

Graphics and backgrounds always augment (rather than distract from) main content.

Page colors (preferably limited to no more than 4) cohere with each other & with links & text.

Text is easily legible, buffered from edges, in narrow columns, & contrasts with bgs & headlines.

No incorrect language; or broken links; or shoddy graphics, borders, frames, etc.

Page(s) load easily and look relatively the same in major browsers.

Separate pages are united by a consistent theme, and so are all elements within each page.

design with crap.pdf

Documents