Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing For WordPress

Designing For WordPress

When designing for WordPress, it is important to keep the needs of your target audience in mind with predetermined goals that are specific and measurable. In this session, I will talk about the principles of good web design for the broadest audience possible. I will show you how to use general composition, scale, proportion and the use of color and fonts to convey a feeling, as well as resources for finding media that complies with licensing terms.

Suzette Franck

October 25, 2013
Tweet

More Decks by Suzette Franck

Other Decks in Technology

Transcript

  1. DESIGNING FOR WORDPRESS Suzette Franck (mt) Media Temple WordPress Evangelist

    2013 Boston WordCamp #WCBOS Friday, October 25, 2013
  2. SUZETTE FRANCK with a “CK” ★WordPress Evangelist @ Media Temple

    ★Born in Hollywood, California Native ★19+ Years Coding & Web Development ★Developed over 200 WordPress sites ★Speaking at 12 WordCamps this year ★Reg. Contributor on WPwatercooler.com ★Hosted DradCast Episode 17 ★Blogs at: suzettefranck.com ★Slides: speakerdeck.com/suzettefranck Tweet me! @mt_Suzette
  3. WHAT WE WILL COVER ★Website Goal and Core Audience ★Picking

    a Color Scheme ★Anatomy of a Website ★Composition and Layout ★Web Typography ★Licensing and Creative Commons ★Image Resources
  4. WHAT IS YOUR FOCUS? ★Who will be using your website?

    ★Why will they use your website? ★How will they use your website? ★What is the purpose of the website? WRITE IT DOWN AND POST IT WHERE YOU CAN SEE IT!
  5. COLOR AS AN ENIVIRONMENT ★Emotion vs. Apathy ★Movement vs. Stillness

    ★Chaos vs. Harmony ★Warm vs. Cool ★Bright vs. Muted
  6. COLOR ASSOCIATIONS ★Red - love, dramatic, dynamic, powerful, passion ★Orange

    - energy, warning, enthusiasm, creativity ★Yellow - caution, vibrancy, happiness, alert ★Green - nature, wealth, stability, environment ★Blue - calming, intelligence, honesty, melancholy ★Purple - royalty, power, prestige, depression ★White - purity, truth, perfection, light, sacredness ★Black - mystery, death, evil, elegance, formality
  7. WORDPRESS PARTS CLICK ME! Name of Business A very catchy

    tagline NAVIGATION | NAVIGATION | NAVIGATION | NAVIGATION Copyright 2013 by Name WIDGET code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. Content Heading code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. WIDGET
  8. HEADER Name of Business A very catchy tagline NAVIGATION |

    NAVIGATION | NAVIGATION | NAVIGATION CLICK ME! LOGO CALL TO ACTION NAVIGATION
  9. BODY/CONTENT Content Heading code is poetry. code is poetry. code

    is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. code is poetry. SIDEBAR CONTENT WIDGET WIDGET WIDGETS
  10. EXPANDED FOOTER Copyright 2013 by Name COPYRIGHT/ CREDITS WIDGET WIDGET

    WIDGET NAVIGATION | NAVIGATION | NAVIGATION | NAVIGATION | NAVIGATION NAVIGATION CLICK ME! CALL TO ACTION WIDGETS
  11. LINE UP ELEMENTS CHAOS HARMONY Name of Business A very

    catchy tagline NAVIGATION | NAVIGATION | NAVIGATION | NAVIGATION CLICK ME! Copyright 2013 by Name WIDGET WIDGET Content Heading Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Name of Business A very catchy tagline CLICK ME! Copyright 2013 by Name WIDGET WIDGET Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Content Heading NAVIGATION | NAVIGATION | NAVIGATION | NAVIGATION X
  12. PHI - THE GOLDEN RATIO ★Leonardo Da Vinci Used ★“Divine

    Proportion” ★Appears in art & music ★Appears often in nature ★Aesthetically pleasing Phi ( Φ = 1.618033988749895… )
  13. WHY USE TEXT? ★Fonts have come to web publishing ★Text

    loads faster than images ★Google understands text and can index it ★Accessibility for Screen Readers ★Readability for visitor ★Easy to update compared to images ★Use image for logo only, navigation should be text
  14. WEB TYPOGRAPHY ★Fonts can be embedded via @font-face ★Cufón (Javascript)

    not as good ★Check licensing for web embedding ★Store original fonts in your theme folder ★Test in different browsers, will NEVER be same ★Paid fonts have better kerning/scaling ★Embed different styles of same font (bold, italic) to improve browser rendering
  15. GOOGLE FONTS IN WORDPRESS function load_fonts() { wp_register_style('googleFonts', 'http://fonts.googleapis.com/css?family=Rock+Salt|Neucha'); wp_enqueue_style(

    'googleFonts'); } add_action('wp_print_styles', 'load_fonts'); DON’T ADD THIS TO YOUR HEADER.PHP DO ADD THIS TO YOUR FUNCTIONS.PHP XXXXX
  16. PUBLIC DOMAIN Works in the public domain are those whose

    intellectual property rights have expired, have been forfeited, or are inapplicable. Rights are country-based and vary, so read all licensing requirements before using a digital work GOOGLE IMAGE SEARCHES ARE NOT PUBLIC DOMAIN
  17. TAKE AWAY REVIEW ★Don’t get distracted from your website goals

    ★Study general design principles ★Use colors and fonts to their full advantage ★License your digital media (Share Alike) ★Don’t search Google images for websites ★Have fun and make beautiful websites!