Design for Non-Designers from a Non-Designer

#nonDesigners
D E S I G N F O R A N O N - D E S I G N E R
F R O M A N O N - D E S I G N E R
@ j a y h a r r i s

View Slide

!
"

View Slide

why
?

View Slide

design
recognize
the purpose
of

View Slide

fundamentals

View Slide

unity

View Slide

cohesion
structure
through

View Slide

View Slide

cohesion
style
through

View Slide

View Slide

TYPEFACE

View Slide

View Slide

contrast

View Slide

recognition
instant
of important
visual elements

View Slide

View Slide

Nunc bibendum, urna quis
cursus vestibulum, neque leo
vehicula leo, id pellentesque
nulla dolor in tellus.
Morbi facilisis laoreet
odio sagittis interdum.
Phasellus ut nisi sit amet leo
pharetra gravida id eu urna.
Nunc bibendum, urna quis
cursus vestibulum, neque leo
vehicula leo, id pellentesque
nulla dolor in tellus.
Morbi facilisis laoreet odio
sagittis interdum.
Phasellus ut nisi sit amet leo
pharetra gravida id eu urna.

View Slide

View Slide

alignment

View Slide

location
association based on

View Slide

Curabitur ligula sapien, tincidunt non, euismod vitae,
posuere imperdiet, leo. Maecenas malesuada. Praesent
congue erat at massa. Sed cursus turpis vitae tortor.
Donec posuere vulputate arcu. Phasellus accumsan
cursus velit. Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia Curae.
Aenean posuere, tortor sed cursus feugiat, nunc augue
blandit nunc, eu sollicitudin urna dolor sagittis lacus.
Donec elit libero, sodales nec, volutpat a, suscipit non,
turpis. Nullam sagittis. Suspendisse pulvinar, augue ac
venenatis condimentum, sem libero volutpat nibh, nec
pellentesque velit pede quis nunc.
In dui magna, posuere eget, vestibulum et, tempor
auctor, justo. In ac felis quis tortor malesuada pretium.
Pellentesque auctor neque nec urna. Proin sapien
ipsum, porta a, auctor quis, euismod ut, mi.

View Slide

Nulla sed auctor nibh. Nulla nulla dui, porttitor id
euismod nec, vestibulum nec elit. Morbi nulla lorem,
suscipit id orci at, elementum cursus orci. Etiam
bibendum metus elit, eget efficitur sapien dictum ut.
Praesent sollicitudin nec turpis nec semper. Donec
imperdiet convallis pretium.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc mattis laoreet purus, ac lobortis neque
ullamcorper id. Etiam et diam varius, pretium justo
euismod, placerat massa.
Curabitur porta nulla id nisi sollicitudin consectetur.
Praesent semper sapien odio, vel mattis justo posuere
a. Donec erat lorem, egestas id diam nec, volutpat
interdum purus. Phasellus pulvinar nisi vitae sodales
rhoncus. In hac habitasse platea dictumst. Vestibulum
fermentum, purus et gravida bibendum.

View Slide


View Slide

congue erat at massa.

View Slide

Aenean posuere, tortor sed cursus feugiat, nunc
augue blandit nunc, eu sollicitudin urna dolor
sagittis lacus. Donec elit libero, sodales nec,
volutpat a, suscipit non, turpis. Nullam sagittis.
Suspendisse pulvinar, augue ac venenatis
condimentum, sem libero volutpat nibh, nec
pellentesque velit pede quis
Nunc mattis

View Slide

proximity

View Slide

meaning
location
based on

View Slide

interpretation
influences
of data

View Slide

interpretation
influences
of relationships

View Slide

interpretation
influences
of flow

View Slide

predictable inconsistant random

View Slide

grouped isolated
consolidated

View Slide

hierarchy

View Slide

View Slide

primary idea
secondary idea
secondary idea
primary idea
secondary idea
secondary idea
page title
don’t make it bad
take a sad song
make it better
don’t let me down
you have found her
go and get her
hey jude

View Slide

whitespace

View Slide

congestion

View Slide

isolation

View Slide

color

View Slide

View Slide

vs

View Slide

View Slide

MONOCHROME

View Slide

ANALOGOUS

View Slide

COMPLEMENTARY

View Slide

SPLIT
COMPLEMENTARY

View Slide

TRIADIC

View Slide

TETRADIC

View Slide

View Slide

psychology
OF COLOR

View Slide

accessibility
OF COLOR

View Slide

colorblind

View Slide

protan
#FF99CC V. #0099CC

View Slide

deutan
#FFCC66 V. #FF6666

View Slide

tritan
#FF99FF V. #FF9900

View Slide

typeface

View Slide

classification

View Slide

serif

View Slide

serif
SERIF

View Slide

serif
SERIF
SERIF
SERIF
SERIF

View Slide

serif
STRESS
THICK / THIN
SERIF

View Slide

sans serif

View Slide

script

View Slide

decorative

View Slide

conflict

View Slide

contrast

View Slide

texture

View Slide

Curabitur ligula sapien, tincidunt
non, euismod vitae, posuere
imperdiet, leo. Maecenas malesuada.
Praesent congue erat at massa. Sed
cursus turpis vitae tortor. Donec
posuere vulputate arcu. Phasellus
accumsan cursus velit. Vestibulum
ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia
Curae.
Aenean posuere, tortor sed cursus
feugiat, nunc augue blandit nunc, eu
sollicitudin urna dolor sagittis
lacus. Donec elit libero, sodales nec,
volutpat a, suscipit non, turpis.
Nullam sagittis. Suspendisse
pulvinar, augue ac venenatis
condimentum, sem libero volutpat
nibh, nec pellentesque velit pede
quis nunc.
In dui magna, posuere eget,
vestibulum et, tempor auctor, justo.
In ac felis quis tortor malesuada
pretium. Pellentesque auctor neque
nec urna. Proin sapien ipsum, porta
a, auctor quis, euismod ut, mi
cursus turpis vitae tortuur vulputate
arcu Phasellus accumsan ipsum
primis in faucibus orci.
Curabitur ligula sapien, tincidunt non,
euismod vitae, posuere imperdiet, leo.
Maecenas malesuada. Praesent
congue erat at massa. Sed cursus
turpis vitae tortor. Donec posuere
vulputate arcu. Phasellus accumsan
cursus velit. Vestibulum ante ipsum
primis in faucibus orci luctus et
ultrices posuere cubilia Curae.
sollicitudin urna dolor sagittis lacus.
Donec elit libero, sodales nec,
volutpat a, suscipit non, turpis. Nullam
sagittis. Suspendisse pulvinar, augue
ac venenatis condimentum, sem
libero volutpat nibh, nec pellentesque
velit pede quis nunc.
vestibulum et, tempor auctor, justo. In
ac felis quis tortor malesuada pretium.
Pellentesque auctor neque nec urna.
Proin sapien ipsum, porta a, auctor
quis, euismod ut, mi cursus turpis
vitae tortuur vulputate arcu. Phasellus
accumsan.
n o n , e u i s m o d v i t a e , p o s u e r e
imperdiet, leo. Maecenas malesuada.
Praesent congue erat at massa. Sed
cursus turpis vitae tortor. Donec
posuere vulputate arcu. Phasellus
accumsan cursus velit. Vestibulum
ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia
Curae.
Donec elit libero, sodales nec, volutpat
a, suscipit non, turpis. Nullam
ac venenatis condimentum, sem libero
volutpat nibh, nec pellentesque velit
pede quis nunc.
a, auctor quis, euismod ut, mi cursus
turpis vitae tortuur vulputate arcu.
Phasellus accumsan ipsum primis in
faucibus orci luctus venenatis
condimentum.

View Slide

color

View Slide

primis in faucibus orci luctus et
ultrices posuere cubilia Curae.
volutpat a, suscipit non, turpis. Nullam
ac venenatis condimentum, sem
libero volutpat nibh, nec pellentesque
velit pede quis nunc.
vestibulum et, tempor auctor, justo. In
ac felis quis tortor malesuada pretium.
Pellentesque auctor neque nec urna.
Proin sapien ipsum, porta a, auctor
quis, euismod ut, mi cursus turpis
vitae tortuur vulputate.
non, euismod vitae, posuere
i m p e r d i e t , l e o . M a e c e n a s
malesuada. Praesent congue erat at
massa. Sed cursus turpis vitae
tortor. Donec posuere vulputate
arcu. Phasellus accumsan cursus
velit. Vestibulum ante ipsum primis
in faucibus orci luctus et ultrices
posuere cubilia Curae.

volutpat a, suscipit non, turpis.
Nullam sagittis. Suspendisse
pulvinar, augue ac venenatis
condimentum, sem libero volutpat
nibh, nec pellentesque velit pede
quis nunc.

a, auctor quis, euismod ut, mi
cursus turpis vitae tortuur vulputate.
primis in faucibus orci luctus et ultrices
Donec elit libero, sodales nec, volutpat
a, suscipit non, turpis. Nullam sagittis.
Suspendisse pulvinar, augue ac
venenatis condimentum, sem libero
volutpat nibh, nec pellentesque velit
pede quis nunc.
In dui magna, posuere eget, vestibulum
et, tempor auctor, justo. In ac felis quis
tortor malesuada pretium. Pellentesque
auctor neque nec urna. Proin sapien
ipsum, porta a, auctor quis, euismod
ut, mi cursus turpis vitae tortuur
vulputate.

View Slide

base font

View Slide

restraint

View Slide

composition

View Slide

focal point

View Slide

View Slide

group information

View Slide

strong alignments

View Slide

page title
MENU | MENU | MENU | MENU
heading
Curabitur ligula sapien, tincidunt non, euismod
vitae, posuere imperdiet, leo. Maecenas
malesuada. Praesent congue erat at massa. Sed
cursus turpis vitae tortor. Donec posuere vulputate
arcu. Phasellus accumsan cursus velit. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices

View Slide

Design for Non-Designers from a Non-Designer

Design for Non-Designers from a Non-Designer

Jay Harris

More Decks by Jay Harris

Other Decks in Design

Featured

Transcript