HOW TO SKIP
4 YEARS OF
DESIGN SCHOOL
IN 1 HOUR
Amy CQ @ HUGEishWhat is“Good” Design?
USEFULSTRATEGIC
FORM+FUNCTION
USER FRIENDLYUNOBTRUSIVEAESTHETICLY
PLEASING

artfulblogger

THE MISSING INGREDIENTGOAL +

FOR EXAMPLE…
DesignFine Art

FOR EXAMPLE…
DesignThis makes
me want to buy
some MAYPO!

Fine Art

FOR EXAMPLE…
DesignFine Art
This makes
me want to…

This makes
me want to buy
some MAYPO!

THE 12 ELEMENTS & PRINCIPLES OF DESIGN

Elements+Principles=Deliverable

DISCLAIMER:DISCLAIMER:TCFA

These Elements & Principles
can be applied to ALL formsof visual media.

DISCLAIMER:

TC
FA

These Elements & Principles
can be applied to ALL formsof visual media.

HTMY

All designers are in agreement
as to which Elements andPrinciples are included.

DISCLAIMER:

TC
FA

These Elements & Principles
can be applied to ALL formsof visual media.

HTMY

All designers are in agreement
as to which Elements andPrinciples are included.

binaryTHIS ISN’T MATH, PEOPLESIX ELEMENTS
1.

LINE

2.

SHAPE

3.

SPACE

4.

COLOR

5.

TEXTURE

6.

VALUE

ELEMENTS
1. LINE

2. SHAPE

3. SPACE

4. COLOR

4. COLOR

WARM

COOL

5. TEXTURE

6. VALUE

Same lineof text

Same lineof text

Same lineof text

SIX PRINCIPLES
7.

UNITY

8.

HARMONY

9.

CONTRAST

10. SPACE
11. BALANCE
12. HIERARCHY7. UNITY• PROXIMITY• SIMILARITY

7. UNITYPROXIMITY: NEARNESS IN PLACE, TIME, OR ORDER

Something Happening
2:00pmIt's usually quite loudat Our House
Sunday, June 16, 2020
Directions:
In the middle of our street

7. UNITYPROXIMITY: NEARNESS IN PLACE, TIME, OR ORDERSomething Happening
It's usually quite loudSunday, June 16, 2020
2:00pmwhatwhenOur House

Directions:
In the middle of our street

where7. UNITY
SIMILARITY: A COMPARABLE ASPECT; CORRESPONDENCE

Hey, I’m a Headline
Your awesome website copy
ﬁlled with spectacular content
your audience can’t wait to read.
“You can quote me on that”— Me
PRESS ME!

Style similar items
consistently acrossyour piece.

8. HARMONY• ALIGNMENT• CONTINUATION

8. HARMONY
ALIGNMENT: ARRANGEMENT ALONG A STRAIGHT LINE

8. HARMONYCONTINUATION: EXTENSION TO A FURTHER POINT

I’m going to force your eye
to go against the normal
order of (western language)
reading. After you readthrough this you will look at

So, without that line, thisparagraph would typicallybe read second.

This instead of theparagraph directly
below. Normally, weread from top tobottom and left to right.

8. HARMONYCONTINUATION: EXTENSION TO A FURTHER POINT

I’m going to force your eye
to go against the normal
order of (western language)
reading. After you readthrough this you will look at

So, without that line, thisparagraph would typicallybe read second.

This instead of theparagraph directly
below. Normally, weread from top tobottom and left to right.

8. HARMONYCONTINUATION: EXTENSION TO A FURTHER POINT

Not only lines, shapes and text
can lead your eye in a certain
direction.
Remember that photos can dothe same thing. Especiallyanything with eyes! (We tendto want to look at what others
are looking at too!) So be
careful not to lead youraudience’s eye oﬀ the page.

oops

8. HARMONYCONTINUATION: EXTENSION TO A FURTHER POINT

Not only lines, shapes and text
can lead your eye in a certain
direction.
Remember that photos can dothe same thing. Especiallyanything with eyes! (We tend
to want to look at what others
are looking at too!) So be
careful not to lead youraudience’s eye oﬀ the page.

8. HARMONYCONTINUATION: EXTENSION TO A FURTHER POINT

Not only lines, shapes and text
can lead your eye in a certain
direction.
Remember that photos can dothe same thing. Especiallyanything with eyes! (We tend
to want to look at what others
are looking at too!) So becareful not to lead youraudience’s eye oﬀ the page.

9. CONTRAST“The state of being strikingly different
from something else, typically somethingin juxtaposition or close association.”9. CONTRAST
BIGGEST PROBLEM AREAS:• COLOR• SIZE

9. CONTRAST
BIGGEST PROBLEM AREA #1: COLOR“But Amy, I made sure
my design is super BOLD
so it would stand out!”9. CONTRAST

COME TO OUR
OPEN HOUSE!!
123 MAIN STREET
508.555.5555

9. CONTRAST

COME TO OURARESEYEOPENMHOUSE!!
YG!
MGO
N
123 MAIN
STREETITLEM
508.555.5555

9. CONTRAST
BIGGEST PROBLEM AREA #1: COLOR
NO ONE WANTS
TO READ THIS.
Stop it.

THIS IS CALLED COLORVIBRATION!

9. CONTRAST
BIGGEST PROBLEM AREA #1: COLOR
NO ONE WANTS
TO READ THIS.
Stop it.

THIS IS CALLED COLORVIBRATION!

Both of these could be ﬁxed with more
contrast in VALUEI SEE THE LIGHT!
er, I mean dark.

NOT A GREAT COLOR
COMBO BUT MY EYESSTOPPED HURTING!

9. CONTRAST
BIGGEST PROBLEM AREA #2: SIZE

“Amy, what gives, mydesign looks so boring.”

9. CONTRASTBIGGEST PROBLEM AREA #2: SIZEOPEN HOUSE

Siouxsie’s 123 MAIN ST
RealAnytown, USA
EstateSat., June 1, 2013508.555.5555 4br, 2bth, Must see!

9. CONTRAST
BIGGEST PROBLEM AREA #2: SIZEOPEN HOUSE

OPEN HOUSE
4br, 2bth,
Must see!

v
Siouxsie’s 123 MAIN ST
Real
Anytown, USA
EstateSat., June 1, 2013508.555.5555 4br, 2bth, Must see!

123 MAIN ST
Anytown, USA
Sat., June 1, 2013

Siouxsie’s
Real
Estate508.555.5555

10. SPACE
Size

OverlappingColor11. BALANCE
Distribution of the visual weight of objects
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sintoccaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure duisolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sintoccaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse.

11. BALANCE• Balance doesn’t mean you need torepeat the same thing on both sides•

That can be boring and repetitious• Balance is the reason working withcentered text is diﬃcult•

Entire design wants to be vertically balanced

11. BALANCEUNBALANCED =NO POTENTIAL FOR MOVEMENT =NO FUN

11. BALANCEBALANCED =POTENTIAL FOR MOVEMENT =FUN

SymmetricalAsymmetrical12. HIERARCHY

If EVERYTHING is important,than NOTHING is12. HIERARCHYREMEMBER THIS?

GOAL +12. HIERARCHY
Hierarchy = Disruption

12. HIERARCHY
Hierarchy = Disruption

123SPACE
good12. HIERARCHY
Hierarchy = Disruption

12123

SPACE
good

3

SIZE

better12. HIERARCHY
Hierarchy = Disruption

121123

SPACE
good23SIZE

better

3BOTH
best

EXAMPLES IRL

THE SQUINT TEST

http://estrogenenius.org/

THE SQUINT TEST

www.uprinting.com

THE SQUINT TEST

longislandnetworkingmoms.com

THE SQUINT TEST

utahvalleychamber.blogspot.com

QUESTIONS?
Amy CQ @ HUGEish