Just Make It Look Pretty: Principles of Design

Session #LS411
BYOL: Just Make It Look Pretty
Caitlin Steinbach
Orlando, FL • March 22 – 24, 2017

Fundamental
principles of
design

The brain automatically
and unconsciously simpliﬁes,
arranges, and orders objects
the eyes see.

Proximity Similarity
ContinuityClosure

#1Proximity
We perceive
objects that are
close together
as belonging to
the same group
1#

Proximity
We perceive
objects that are
close together
as belonging to
the same group
1#

Similarity
Our minds
group things
with similar
properties
2#

Continuity
Our minds will
continue a
pattern beyond
its ending points
3#

M a u r i s u l l a m c o r p e r , n i s l a
s e m p e r u l t r i c e s , t o r t o r n i s l
p o r t t i t o r d i a m , s e d c o n d i m e n t u m
l o r e m l e o e g e t t o r t o r . P r a e s e n t
s i t a m e t n i b h e l i t . I n t e g e r m a t t i s
f e l i s n o n a r c u c o n d i m e n t u m
i n t e r d u m . A e n e a n a p h a r e t r a
m a u r i s . N u l l a m e t m a s s a u t f e l i s
d i g n i s s i m e l e m e n t u m u t v e l
m a g n a . P r o i n l u c t u s f r i n g i l l a
l a c u s q u i s s o l l i c i t u d i n .
V e s t i b u l u m a n t e i p s u m p r i m i s i n
f a u c i b u s o r c i l u c t u s e t u l t r i c e s
p o s u e r e c u b i l i a C u r a e ; S e d
p r e t i u m c u r s u s n i s i a b l a n d i t .
D u i s q u i s f e l i s t o r t o r . A e n e a n
l o b o r t i s c u r s u s n i s l , a c r u t r u m
t o r t o r i n t e r d u m n e c .
Continuity
Our minds will
continue a
pattern beyond
its ending points
3#

Closure
Our minds will
ﬁll in the gaps to
complete a
perceived shape
4#

Closure
Our minds will
complete a
perceived shape
Gestalt Principles
4#

4 Closure
Our minds will
complete a
perceived shape
#

The brain adds information to the
raw visual impressions, which gives
a richness of meaning far beyond
the simple stimuli it receives.
-- Robert Solso

04 Closure
03 Continuity
02 Similarity
01 Proximity

A visual hierarchy tells your
viewer where to look and in
what sequence.

Modular Design
Topic 01
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Pellentesque tincidunt, erat id
blandit rutrum, magna lacus
varius magna, ut placerat
turpis mauris et erat.
Topic 02
Topic 03

Mauris ullamcorper, nisl a
semper ultrices, tortor nisl
porttitor diam, sed condimentum
lorem leo eget tortor. Praesent
sit amet nibh elit. Integer mattis
felis non arcu condimentum
interdum. Aenean a pharetra
mauris. Nullam et massa ut felis
dignissim elementum ut vel
magna. Proin luctus fringilla
lacus quis sollicitudin.
Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices
posuere cubilia Curae; Sed
pretium cursus nisi a blandit.
Duis quis felis tortor. Aenean
lobortis cursus nisl, ac rutrum
tortor interdum nec.

M a u r i s u l l a m c o r p e r , n i s l a
s e m p e r u l t r i c e s , t o r t o r n i s l
porttitor diam, sed condimentum
lorem leo eget tortor. Praesent
sit amet nibh elit. Integer mattis
felis non arcu condimentum
interdum. Aenean a pharetra
mauris. Nullam et massa ut felis
d i g n i s s i m e l e m e n t u m u t v e l
magna. Proin luctus fringilla
l a c u s q u i s s o l l i c i t u d i n .
Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices
p o s u e r e c u b i l i a C u r a e ; S e d
pretium cursus nisi a blandit.
Duis quis felis tortor. Aenean
lobortis cursus nisl, ac rutrum
tortor interdum nec.

Clutter is a failure of design,
not an attribute of information.
-- Edward Tufte

aka negative space
yes, this is white space…

Nam felis lorem, aliquet
ac aliquam porta,
pulvinar ultricies erat.
Morbi porttitor velit
sed augue lacinia, vel
pharetra leo eﬃcitur.
Aenean rutrum turpis in
tempus convallis. Proin
pellentesque mattis.
01
02
03

Step 01 Step 02
Step 04Step 03
varius magna, ut placerat turpis
mauris et erat.
varius magna, ut placerat turpis
mauris et erat.
Placerat Turpis Magna Lacus
Mauris et EratBlandit Rutrum

Use lines to chunk content
Case study
Example
Section 02Section 01

SECTION HEADER
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Pellentesque tincidunt, erat id
blandit rutrum, magna lacus varius magna, ut
placerat turpis mauris et erat. Donec faucibus
quam a sem imperdiet, non elementum ipsum
eleifend. Morbi lacus mauris, ultricies ut
pharetra vitae, imperdiet non neque. Ut eget
lacus quis diam facilisis scelerisque eros.
Subheaderwithadditionalcontext Donec faucibus quam a sem
imperdiet, non elementum
ipsum eleifend. Morbi lacus
mauris, ultricies ut pharetra
vitae, imperdiet non neque.
Ut eget lacus quis diam
facilisis scelerisque eros.

&vary sizing and color
to establish visual hierarchy
leading, kerning, font styling

Aa
LoremIpsum
Dummy Text
for Designers
CorporateIpsum BobRossIpsum
Leverage agile frameworks
to provide a robust synopsis
for high level overviews.
Iterative approaches to
corporate strategy foster
collaborative thinking to
further the overall value
proposition. Organically
grow the holistic world view
of disruptive innovation via
workplace diversity and
empowerment. Leverage
agile frameworks to provide
a robust synopsis for high
level overviews.
There is immense joy in just
watching - watching all the
little creatures in nature. It's
so important to do
something every day that
will make you happy. Clouds
are free they come and go
as they please. We spend so
much of our life looking -
but never seeing. Nature is
so fantastic, enjoy it. Let it
make you happy. This
present moment is perfect
simply due to the fact you're
experiencing it.
Pellentesque tincidunt, erat
id blandit rutrum, magna
lacus varius magna, ut
placerat turpis mauris et
erat. Donec faucibus quam
a sem imperdiet, non
elementum ipsum eleifend.
Morbi lacus mauris, ultricies
ut pharetra vitae, imperdiet
non neque. Ut eget lacus
quis diam facilisis
scelerisque sed ac eros.

To design is much more than
simply to assemble, to order, or
even to edit: it is to add value and
meaning, to illuminate, to simplify,
to clarify, to modify, to dignify, to
dramatize, to persuade, and
perhaps even to amuse. To design
is to transform prose into poetry.
-- Paul Rand

Caitlin Steinbach
|M.S.EdAdultEducation:InstructionalDesign
| @caitsteinbach
| mnmlstdsgnr.com
|TechnologyEnthusiast
TeamOxfordComma

Just Make It Look Pretty: Principles of Design

More Related Content

What's hot

Similar to Just Make It Look Pretty: Principles of Design

Recently uploaded

Just Make It Look Pretty: Principles of Design