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.

6224f65dc0d9288ca4c9817d993d8ca4?s=128

Suzette Franck

October 25, 2013
Tweet

Transcript

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

    2013 Boston WordCamp #WCBOS Friday, October 25, 2013
  2. ABOUT ME send tweets to @mt_Suzette

  3. 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
  4. AGENDA { #agenda: visibility: visible; }

  5. 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
  6. DEFINING SUCCESS eye on the prize

  7. 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!
  8. COLOR SCHEME the language of color

  9. COLOR AS AN ENIVIRONMENT ★Emotion vs. Apathy ★Movement vs. Stillness

    ★Chaos vs. Harmony ★Warm vs. Cool ★Bright vs. Muted
  10. 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
  11. BASIC COLOR WHEEL ★Primary: Red, Blue, Yellow ★Secondary: Orange, Green,

    Purple ★Tertiary: Intermediate Colors
  12. COLOR SCHEMES

  13. HUE, TINT, SHADE, & TONE PURE COLOR PLUS WHITE PLUS

    BLACK PLUS GRAY
  14. KULER.ADOBE.COM

  15. COLORSCHEMEDESIGNER.COM

  16. COLOURLOVERS.COM

  17. ANATOMY parts is not necessarily parts

  18. 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
  19. HEADER Name of Business A very catchy tagline NAVIGATION |

    NAVIGATION | NAVIGATION | NAVIGATION CLICK ME! LOGO CALL TO ACTION NAVIGATION
  20. 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
  21. SIMPLE FOOTER Copyright 2013 by Name COPYRIGHT/ CREDITS

  22. EXPANDED FOOTER Copyright 2013 by Name COPYRIGHT/ CREDITS WIDGET WIDGET

    WIDGET NAVIGATION | NAVIGATION | NAVIGATION | NAVIGATION | NAVIGATION NAVIGATION CLICK ME! CALL TO ACTION WIDGETS
  23. COMPOSITION placement and proportion are everything

  24. PIET MONDRIAN

  25. 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
  26. PHI - THE GOLDEN RATIO ★Leonardo Da Vinci Used ★“Divine

    Proportion” ★Appears in art & music ★Appears often in nature ★Aesthetically pleasing Phi ( Φ = 1.618033988749895… )
  27. EXAMPLES OF GOLDEN RATIO

  28. RULE OF THIRDS

  29. EXAMPLE OF RULE OF THIRDS

  30. WEBSITE LAYOUT EXAMPLE

  31. TYPOGRAPHY a font is not just a font

  32. 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
  33. 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
  34. FONTSQUIRREL.COM

  35. WEB FONT GENERATOR

  36. DOWNLOAD ZIP FILE

  37. VIEW STYLESHEET.CSS

  38. DAFONT.COM

  39. GOOGLE.COM/FONTS

  40. 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
  41. WP GOOGLE FONTS

  42. FONTS.COM

  43. IDENTIFONT.COM

  44. MYFONTS.COM/WhatTheFont

  45. LICENSING the internet is not public domain

  46. 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
  47. CREATIVECOMMONS.ORG/CHOOSE/ZERO

  48. CREATIVE COMMONS LICENSES

  49. CC BY

  50. CC BY-SA

  51. CC BY-ND

  52. CC BY-NC

  53. CC BY-NC-SA

  54. CC BY-NC-ND

  55. CREATIVECOMMONS.ORG/CHOOSE

  56. RESOURCES check it before you wreck it

  57. WEB DESIGN BOOKS LISA SABIN-WILSON JASON BEAIRD

  58. SEARCH.CREATIVECOMMONS.ORG

  59. COMMONS.WIKIMEDIA.ORG

  60. FLICKR.COM/CREATIVECOMMONS

  61. FOTOPEDIA.COM

  62. 123RF.COM

  63. GETTYIMAGES.COM

  64. PICMONKEY.COM

  65. PICASION.COM

  66. TINEYE.COM

  67. 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!
  68. QUESTIONS? Suzette Franck suzette@mediatemple.net https://speakerdeck.com/suzettefranck