Applying the 7 Principles of Design to WordPress

a p p ly i n g the
7 Principles of Design
to w o r d p r e s s

@JillLynnDesign / #wcatl
Jill Anderson
I design and develop websites for creative businesses.

b u t f i r s t
Why should we care?

g o o d d e s i g n m e a n s
creating visual interest to engage the
viewer, and, most importantly, effectively
communicating the message.

No. 1
c o n t r a s t
Contrast creates variety between elements
and adds visual interest to a design.

http://arcticwild.com/

http://www.democraticleader.gov/

Ideas to create
c o n t r a s t
✔✔ Use complimentary typefaces
✔✔ Vary imagery and graphics
✔✔ Break apart sections using color blocks
✔✔ Use contrasting colors
✔✔ While consistency is important, not everything
needs to be matchy-matchy

No. 2
e m p h a s i s
Emphasis creates a focal point in a design and
brings attention to what is most important.

http://arts.princeton.edu/

http://connectwithcopy.com/

Ideas to create
e m p h a s i s
✔✔ Consider “hero” areas to quickly let the viewer
know what the site is about
✔✔ Understand the main goals of the website and
include appropriate content
✔✔ Break up text by using headlines and other
graphic elements
✔✔ Allow bold text to really stand out—no faux
browser bolding!

No. 3
b a l a n c e
Balance is the distribution of visual weight
in a design to provide stability and structure.
Balance can be symmetrical or asymmetrical.

http://www.montere.it/

https://coffeebeansdelivered.com.au/

Ideas to create
b a l a n c e
✔✔ Balance can be symmetrical or asymmetrical
✔✔ Use text and graphic elements to create
balance in individual sections
✔✔ Don’t go crazy with too many contrasting
elements—retaining the overall stability and
structure of the design is what really matters

No. 4
u n i t y
Unity creates a harmonious effect in which
all the elements are working together
to support the design as a whole.

http://aspenhomes.com/

http://methodhome.com/

Ideas to create
u n i t y
✔✔ Look at the logo and brand elements to include
throughout the design
✔✔ Consider the feeling and message you want to
invoke in the viewer
✔✔ Be aware of the bigger picture of the site as a
whole and that all sections and elements are
working together in harmony

No. 5
pat t e r n
Pattern creates consistency in a design
through the repetition of certain elements.

http://www.travelingvineyard.com/

http://www.newyorker.com/

Ideas to create
p at t e r n
✔✔ Capture the essence of the logo and brand in
the visual elements used in the design
✔✔ For example, if a logo has circles, use circles
throughout the site—icons, patterns, graphics
✔✔ Look at existing print collateral to create a
complementary design

No. 6
r h y t h m
Rhythm suggests implied motion and moves
the eye of the viewer throughout the design.

http://happyyearof.com/

http://corneliuskrump.com/

Ideas to create
r h y t h m
✔✔ Use lines, arrows or other visual cues to draw
the viewer’s eye
✔✔ Position faces so they engage with the design
and not allow the eye to wander
✔✔ Include transitions or other moving elements
to create interest

No. 7
s pa c e
Space refers to the area surrounding the
elements and allows a design to breathe.

http://adcglobal.org/

http://www.vogue.com/

Ideas to create
s p a c e
✔✔ Allow elements on the page to breathe by
providing adequate white space around text,
images, navigation items, headlines, etc.
✔✔ Use a grid and columns for layout
✔✔ Allow enough line-spacing between text for
easy readability

Want to chat more?
Get the slides
slideshare.net/jilllynnanderson1
Sign up for my newsletter
JillLynnDesign.com/freegift
Schedule a free 30-minute chat
JillLynnDesign.com/say-hello
Tweet
@JillLynnDesign

Applying the 7 Principles of Design to WordPress

Recommandé

Recommandé

Contenu connexe

Similaire à Applying the 7 Principles of Design to WordPress

Similaire à Applying the 7 Principles of Design to WordPress (20)

Dernier

Dernier (20)

Applying the 7 Principles of Design to WordPress