Applying the 7 Principles of Design to WordPress

a p p ly i n g the

7 Principles of Designto w o r d p r e s s

@JillLynnDesign / #wcatl

Jill AndersonI 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 screating visual interest to engage the

viewer, and, most importantly, effectively

communicating the message.


No. 1

c o n t r a s tContrast creates variety between elements

and adds visual interest to a design.


http://arcticwild.com/


http://www.democraticleader.gov/


Ideas to createc 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 sEmphasis creates a focal point in a design and

brings attention to what is most important.


http://arts.princeton.edu/


http://connectwithcopy.com/


Ideas to createe 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 eBalance 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 createb 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 yUnity 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 createu 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

p at t e r nPattern creates consistency in a design

through the repetition of certain elements.


http://www.travelingvineyard.com/


http://www.newyorker.com/


Ideas to createp a t 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 mRhythm suggests implied motion and moves the eye of the viewer throughout the design.


http://happyyearof.com/


http://corneliuskrump.com/


Ideas to creater 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 p a c eSpace refers to the area surrounding the elements and allows a design to breathe.


http://adcglobal.org/


http://www.vogue.com/


Ideas to creates 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 newsletterJillLynnDesign.com/freegift

Schedule a free 30-minute chatJillLynnDesign.com/say-hello

Tweet@JillLynnDesign