applying the 7 principles of design to wordpress
TRANSCRIPT
![Page 1: Applying the 7 Principles of Design to WordPress](https://reader030.vdocument.in/reader030/viewer/2022032421/55a6441e1a28ab8a518b48bf/html5/thumbnails/1.jpg)
a p p ly i n g the
7 Principles of Designto w o r d p r e s s
![Page 2: Applying the 7 Principles of Design to WordPress](https://reader030.vdocument.in/reader030/viewer/2022032421/55a6441e1a28ab8a518b48bf/html5/thumbnails/2.jpg)
@JillLynnDesign / #wcatl
Jill AndersonI design and develop websites for creative businesses.
![Page 3: Applying the 7 Principles of Design to WordPress](https://reader030.vdocument.in/reader030/viewer/2022032421/55a6441e1a28ab8a518b48bf/html5/thumbnails/3.jpg)
@JillLynnDesign / #wcatl
b u t f i r s t
Why should we care?
![Page 4: Applying the 7 Principles of Design to WordPress](https://reader030.vdocument.in/reader030/viewer/2022032421/55a6441e1a28ab8a518b48bf/html5/thumbnails/4.jpg)
@JillLynnDesign / #wcatl
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.
![Page 5: Applying the 7 Principles of Design to WordPress](https://reader030.vdocument.in/reader030/viewer/2022032421/55a6441e1a28ab8a518b48bf/html5/thumbnails/5.jpg)
@JillLynnDesign / #wcatl
No. 1
c o n t r a s tContrast creates variety between elements
and adds visual interest to a design.
![Page 6: Applying the 7 Principles of Design to WordPress](https://reader030.vdocument.in/reader030/viewer/2022032421/55a6441e1a28ab8a518b48bf/html5/thumbnails/6.jpg)
@JillLynnDesign / #wcatl
http://arcticwild.com/
![Page 7: Applying the 7 Principles of Design to WordPress](https://reader030.vdocument.in/reader030/viewer/2022032421/55a6441e1a28ab8a518b48bf/html5/thumbnails/7.jpg)
@JillLynnDesign / #wcatl
http://www.democraticleader.gov/
![Page 8: Applying the 7 Principles of Design to WordPress](https://reader030.vdocument.in/reader030/viewer/2022032421/55a6441e1a28ab8a518b48bf/html5/thumbnails/8.jpg)
@JillLynnDesign / #wcatl
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
![Page 9: Applying the 7 Principles of Design to WordPress](https://reader030.vdocument.in/reader030/viewer/2022032421/55a6441e1a28ab8a518b48bf/html5/thumbnails/9.jpg)
@JillLynnDesign / #wcatl
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.
![Page 10: Applying the 7 Principles of Design to WordPress](https://reader030.vdocument.in/reader030/viewer/2022032421/55a6441e1a28ab8a518b48bf/html5/thumbnails/10.jpg)
@JillLynnDesign / #wcatl
http://arts.princeton.edu/
![Page 11: Applying the 7 Principles of Design to WordPress](https://reader030.vdocument.in/reader030/viewer/2022032421/55a6441e1a28ab8a518b48bf/html5/thumbnails/11.jpg)
@JillLynnDesign / #wcatl
http://connectwithcopy.com/
![Page 12: Applying the 7 Principles of Design to WordPress](https://reader030.vdocument.in/reader030/viewer/2022032421/55a6441e1a28ab8a518b48bf/html5/thumbnails/12.jpg)
@JillLynnDesign / #wcatl
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!
![Page 13: Applying the 7 Principles of Design to WordPress](https://reader030.vdocument.in/reader030/viewer/2022032421/55a6441e1a28ab8a518b48bf/html5/thumbnails/13.jpg)
@JillLynnDesign / #wcatl
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.
![Page 14: Applying the 7 Principles of Design to WordPress](https://reader030.vdocument.in/reader030/viewer/2022032421/55a6441e1a28ab8a518b48bf/html5/thumbnails/14.jpg)
@JillLynnDesign / #wcatl
http://www.montere.it/
![Page 15: Applying the 7 Principles of Design to WordPress](https://reader030.vdocument.in/reader030/viewer/2022032421/55a6441e1a28ab8a518b48bf/html5/thumbnails/15.jpg)
@JillLynnDesign / #wcatl
https://coffeebeansdelivered.com.au/
![Page 16: Applying the 7 Principles of Design to WordPress](https://reader030.vdocument.in/reader030/viewer/2022032421/55a6441e1a28ab8a518b48bf/html5/thumbnails/16.jpg)
@JillLynnDesign / #wcatl
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
![Page 17: Applying the 7 Principles of Design to WordPress](https://reader030.vdocument.in/reader030/viewer/2022032421/55a6441e1a28ab8a518b48bf/html5/thumbnails/17.jpg)
@JillLynnDesign / #wcatl
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.
![Page 18: Applying the 7 Principles of Design to WordPress](https://reader030.vdocument.in/reader030/viewer/2022032421/55a6441e1a28ab8a518b48bf/html5/thumbnails/18.jpg)
@JillLynnDesign / #wcatl
http://aspenhomes.com/
![Page 19: Applying the 7 Principles of Design to WordPress](https://reader030.vdocument.in/reader030/viewer/2022032421/55a6441e1a28ab8a518b48bf/html5/thumbnails/19.jpg)
@JillLynnDesign / #wcatl
http://methodhome.com/
![Page 20: Applying the 7 Principles of Design to WordPress](https://reader030.vdocument.in/reader030/viewer/2022032421/55a6441e1a28ab8a518b48bf/html5/thumbnails/20.jpg)
@JillLynnDesign / #wcatl
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
![Page 21: Applying the 7 Principles of Design to WordPress](https://reader030.vdocument.in/reader030/viewer/2022032421/55a6441e1a28ab8a518b48bf/html5/thumbnails/21.jpg)
@JillLynnDesign / #wcatl
No. 5
p at t e r nPattern creates consistency in a design
through the repetition of certain elements.
![Page 22: Applying the 7 Principles of Design to WordPress](https://reader030.vdocument.in/reader030/viewer/2022032421/55a6441e1a28ab8a518b48bf/html5/thumbnails/22.jpg)
@JillLynnDesign / #wcatl
http://www.travelingvineyard.com/
![Page 23: Applying the 7 Principles of Design to WordPress](https://reader030.vdocument.in/reader030/viewer/2022032421/55a6441e1a28ab8a518b48bf/html5/thumbnails/23.jpg)
@JillLynnDesign / #wcatl
http://www.newyorker.com/
![Page 24: Applying the 7 Principles of Design to WordPress](https://reader030.vdocument.in/reader030/viewer/2022032421/55a6441e1a28ab8a518b48bf/html5/thumbnails/24.jpg)
@JillLynnDesign / #wcatl
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
![Page 25: Applying the 7 Principles of Design to WordPress](https://reader030.vdocument.in/reader030/viewer/2022032421/55a6441e1a28ab8a518b48bf/html5/thumbnails/25.jpg)
@JillLynnDesign / #wcatl
No. 6
r h y t h mRhythm suggests implied motion and moves the eye of the viewer throughout the design.
![Page 26: Applying the 7 Principles of Design to WordPress](https://reader030.vdocument.in/reader030/viewer/2022032421/55a6441e1a28ab8a518b48bf/html5/thumbnails/26.jpg)
@JillLynnDesign / #wcatl
http://happyyearof.com/
![Page 27: Applying the 7 Principles of Design to WordPress](https://reader030.vdocument.in/reader030/viewer/2022032421/55a6441e1a28ab8a518b48bf/html5/thumbnails/27.jpg)
@JillLynnDesign / #wcatl
http://corneliuskrump.com/
![Page 28: Applying the 7 Principles of Design to WordPress](https://reader030.vdocument.in/reader030/viewer/2022032421/55a6441e1a28ab8a518b48bf/html5/thumbnails/28.jpg)
@JillLynnDesign / #wcatl
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
![Page 29: Applying the 7 Principles of Design to WordPress](https://reader030.vdocument.in/reader030/viewer/2022032421/55a6441e1a28ab8a518b48bf/html5/thumbnails/29.jpg)
@JillLynnDesign / #wcatl
No. 7
s p a c eSpace refers to the area surrounding the elements and allows a design to breathe.
![Page 30: Applying the 7 Principles of Design to WordPress](https://reader030.vdocument.in/reader030/viewer/2022032421/55a6441e1a28ab8a518b48bf/html5/thumbnails/30.jpg)
@JillLynnDesign / #wcatl
http://adcglobal.org/
![Page 31: Applying the 7 Principles of Design to WordPress](https://reader030.vdocument.in/reader030/viewer/2022032421/55a6441e1a28ab8a518b48bf/html5/thumbnails/31.jpg)
@JillLynnDesign / #wcatl
http://www.vogue.com/
![Page 32: Applying the 7 Principles of Design to WordPress](https://reader030.vdocument.in/reader030/viewer/2022032421/55a6441e1a28ab8a518b48bf/html5/thumbnails/32.jpg)
@JillLynnDesign / #wcatl
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
![Page 33: Applying the 7 Principles of Design to WordPress](https://reader030.vdocument.in/reader030/viewer/2022032421/55a6441e1a28ab8a518b48bf/html5/thumbnails/33.jpg)
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