Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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.
@JillLynnDesign  / #wcatl
b u t f i r s t
Why should we care?
@JillLynnDesign  / #wcatl
g o o d d e s i g n m e a n s
creating visual interest to engage the
viewer, and, most important...
@JillLynnDesign  / #wcatl
No. 1
c o n t r a s t
Contrast creates variety between elements
and adds visual interest to a de...
@JillLynnDesign  / #wcatl
http://arcticwild.com/
@JillLynnDesign  / #wcatl
http://www.democraticleader.gov/
@JillLynnDesign  / #wcatl
Ideas to create
c o n t r a s t
✔✔ Use complimentary typefaces
✔✔ Vary imagery and graphics
✔✔ B...
@JillLynnDesign  / #wcatl
No. 2
e m p h a s i s
Emphasis creates a focal point in a design and
brings attention to what is...
@JillLynnDesign  / #wcatl
http://arts.princeton.edu/
@JillLynnDesign  / #wcatl
http://connectwithcopy.com/
@JillLynnDesign  / #wcatl
Ideas to create
e m p h a s i s
✔✔ Consider “hero” areas to quickly let the viewer
know what the...
@JillLynnDesign  / #wcatl
No. 3
b a l a n c e
Balance is the distribution of visual weight
in a design to provide stabilit...
@JillLynnDesign  / #wcatl
http://www.montere.it/
@JillLynnDesign  / #wcatl
https://coffeebeansdelivered.com.au/
@JillLynnDesign  / #wcatl
Ideas to create
b a l a n c e
✔✔ Balance can be symmetrical or asymmetrical
✔✔ Use text and grap...
@JillLynnDesign  / #wcatl
No. 4
u n i t y
Unity creates a harmonious effect in which
all the elements are working together...
@JillLynnDesign  / #wcatl
http://aspenhomes.com/
@JillLynnDesign  / #wcatl
http://methodhome.com/
@JillLynnDesign  / #wcatl
Ideas to create
u n i t y
✔✔ Look at the logo and brand elements to include
throughout the desig...
@JillLynnDesign  / #wcatl
No. 5
pat t e r n
Pattern creates consistency in a design
through the repetition of certain elem...
@JillLynnDesign  / #wcatl
http://www.travelingvineyard.com/
@JillLynnDesign  / #wcatl
http://www.newyorker.com/
@JillLynnDesign  / #wcatl
Ideas to create
p at t e r n
✔✔ Capture the essence of the logo and brand in
the visual elements...
@JillLynnDesign  / #wcatl
No. 6
r h y t h m
Rhythm suggests implied motion and moves
the eye of the viewer throughout the ...
@JillLynnDesign  / #wcatl
http://happyyearof.com/
@JillLynnDesign  / #wcatl
http://corneliuskrump.com/
@JillLynnDesign  / #wcatl
Ideas to create
r h y t h m
✔✔ Use lines, arrows or other visual cues to draw
the viewer’s eye
✔...
@JillLynnDesign  / #wcatl
No. 7
s pa c e
Space refers to the area surrounding the
elements and allows a design to breathe.
@JillLynnDesign  / #wcatl
http://adcglobal.org/
@JillLynnDesign  / #wcatl
http://www.vogue.com/
@JillLynnDesign  / #wcatl
Ideas to create
s p a c e
✔✔ Allow elements on the page to breathe by
providing adequate white s...
Want to chat more?
Get the slides
slideshare.net/jilllynnanderson1
Sign up for my newsletter
JillLynnDesign.com/freegift
S...
Upcoming SlideShare
Loading in …5
×

Applying the 7 Principles of Design to WordPress

1,400 views

Published on

Contrast, emphasis, balance, unity, pattern, rhythm, space—what do these mean and how can we use them to design better WordPress websites? In this talk, I’ll breakdown each design principle and show practical examples to use on your next website design. Perfect for those who didn’t go to design school or just need a refresher/primer.

From WordCamp Atlanta, March 29, 2015

Published in: Design

Applying the 7 Principles of Design to WordPress

  1. 1. a p p ly i n g the 7 Principles of Design to w o r d p r e s s
  2. 2. @JillLynnDesign  / #wcatl Jill Anderson I design and develop websites for creative businesses.
  3. 3. @JillLynnDesign  / #wcatl b u t f i r s t Why should we care?
  4. 4. @JillLynnDesign  / #wcatl 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.
  5. 5. @JillLynnDesign  / #wcatl No. 1 c o n t r a s t Contrast creates variety between elements and adds visual interest to a design.
  6. 6. @JillLynnDesign  / #wcatl http://arcticwild.com/
  7. 7. @JillLynnDesign  / #wcatl http://www.democraticleader.gov/
  8. 8. @JillLynnDesign  / #wcatl 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
  9. 9. @JillLynnDesign  / #wcatl 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.
  10. 10. @JillLynnDesign  / #wcatl http://arts.princeton.edu/
  11. 11. @JillLynnDesign  / #wcatl http://connectwithcopy.com/
  12. 12. @JillLynnDesign  / #wcatl 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!
  13. 13. @JillLynnDesign  / #wcatl 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.
  14. 14. @JillLynnDesign  / #wcatl http://www.montere.it/
  15. 15. @JillLynnDesign  / #wcatl https://coffeebeansdelivered.com.au/
  16. 16. @JillLynnDesign  / #wcatl 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
  17. 17. @JillLynnDesign  / #wcatl 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.
  18. 18. @JillLynnDesign  / #wcatl http://aspenhomes.com/
  19. 19. @JillLynnDesign  / #wcatl http://methodhome.com/
  20. 20. @JillLynnDesign  / #wcatl 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
  21. 21. @JillLynnDesign  / #wcatl No. 5 pat t e r n Pattern creates consistency in a design through the repetition of certain elements.
  22. 22. @JillLynnDesign  / #wcatl http://www.travelingvineyard.com/
  23. 23. @JillLynnDesign  / #wcatl http://www.newyorker.com/
  24. 24. @JillLynnDesign  / #wcatl 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
  25. 25. @JillLynnDesign  / #wcatl No. 6 r h y t h m Rhythm suggests implied motion and moves the eye of the viewer throughout the design.
  26. 26. @JillLynnDesign  / #wcatl http://happyyearof.com/
  27. 27. @JillLynnDesign  / #wcatl http://corneliuskrump.com/
  28. 28. @JillLynnDesign  / #wcatl 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
  29. 29. @JillLynnDesign  / #wcatl No. 7 s pa c e Space refers to the area surrounding the elements and allows a design to breathe.
  30. 30. @JillLynnDesign  / #wcatl http://adcglobal.org/
  31. 31. @JillLynnDesign  / #wcatl http://www.vogue.com/
  32. 32. @JillLynnDesign  / #wcatl 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
  33. 33. 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

×