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

Designing For WordPress - Fresno

Designing For WordPress - Fresno

Designing For WordPress - Fresno

6224f65dc0d9288ca4c9817d993d8ca4?s=128

Suzette Franck

January 11, 2014
Tweet

More Decks by Suzette Franck

Other Decks in Technology

Transcript

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

    Fresno Meetup Saturday, January 11, 2013
  2. None
  3. ABOUT ME send tweets to @mt_Suzette

  4. None
  5. SUZETTE FRANCK with a “CK” ★WordPress Evangelist @ Media Temple

    Follow me! @mt_Suzette
  6. SUZETTE FRANCK with a “CK” ★WordPress Evangelist @ Media Temple

    ★Born in Hollywood, California Native Follow me! @mt_Suzette
  7. SUZETTE FRANCK with a “CK” ★WordPress Evangelist @ Media Temple

    ★Born in Hollywood, California Native ★19+ Years Coding & Web Development Follow me! @mt_Suzette
  8. SUZETTE FRANCK with a “CK” ★WordPress Evangelist @ Media Temple

    ★Born in Hollywood, California Native ★19+ Years Coding & Web Development ★Developed over 200 WordPress sites Follow me! @mt_Suzette
  9. SUZETTE FRANCK with a “CK” ★WordPress Evangelist @ Media Temple

    ★Born in Hollywood, California Native ★19+ Years Coding & Web Development ★Developed over 200 WordPress sites ★2013: 12 WordCamps, 8 states, 2 countries Follow me! @mt_Suzette
  10. SUZETTE FRANCK with a “CK” ★WordPress Evangelist @ Media Temple

    ★Born in Hollywood, California Native ★19+ Years Coding & Web Development ★Developed over 200 WordPress sites ★2013: 12 WordCamps, 8 states, 2 countries ★WordPress Podcast WPgirlieshow.com Follow me! @mt_Suzette
  11. SUZETTE FRANCK with a “CK” ★WordPress Evangelist @ Media Temple

    ★Born in Hollywood, California Native ★19+ Years Coding & Web Development ★Developed over 200 WordPress sites ★2013: 12 WordCamps, 8 states, 2 countries ★WordPress Podcast WPgirlieshow.com ★Reg. Contributor on WPwatercooler.com Follow me! @mt_Suzette
  12. SUZETTE FRANCK with a “CK” ★WordPress Evangelist @ Media Temple

    ★Born in Hollywood, California Native ★19+ Years Coding & Web Development ★Developed over 200 WordPress sites ★2013: 12 WordCamps, 8 states, 2 countries ★WordPress Podcast WPgirlieshow.com ★Reg. Contributor on WPwatercooler.com ★Hosted DradCast Episode 17 Follow me! @mt_Suzette
  13. SUZETTE FRANCK with a “CK” ★WordPress Evangelist @ Media Temple

    ★Born in Hollywood, California Native ★19+ Years Coding & Web Development ★Developed over 200 WordPress sites ★2013: 12 WordCamps, 8 states, 2 countries ★WordPress Podcast WPgirlieshow.com ★Reg. Contributor on WPwatercooler.com ★Hosted DradCast Episode 17 ★Blogs at: suzettefranck.com Follow me! @mt_Suzette
  14. SUZETTE FRANCK with a “CK” ★WordPress Evangelist @ Media Temple

    ★Born in Hollywood, California Native ★19+ Years Coding & Web Development ★Developed over 200 WordPress sites ★2013: 12 WordCamps, 8 states, 2 countries ★WordPress Podcast WPgirlieshow.com ★Reg. Contributor on WPwatercooler.com ★Hosted DradCast Episode 17 ★Blogs at: suzettefranck.com ★Slides: speakerdeck.com/suzettefranck Follow me! @mt_Suzette
  15. None
  16. AGENDA #agenda { visibility: visible; }

  17. None
  18. WHAT WE WILL COVER ★Website Goal and Core Audience

  19. WHAT WE WILL COVER ★Website Goal and Core Audience ★Picking

    a Color Scheme
  20. WHAT WE WILL COVER ★Website Goal and Core Audience ★Picking

    a Color Scheme ★Anatomy of a Website
  21. WHAT WE WILL COVER ★Website Goal and Core Audience ★Picking

    a Color Scheme ★Anatomy of a Website ★Composition and Layout
  22. WHAT WE WILL COVER ★Website Goal and Core Audience ★Picking

    a Color Scheme ★Anatomy of a Website ★Composition and Layout ★Web Typography
  23. 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
  24. 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
  25. None
  26. DEFINING SUCCESS eye on the prize

  27. None
  28. WHAT IS YOUR FOCUS? ★Who will be using your website?

  29. WHAT IS YOUR FOCUS? ★Who will be using your website?

    ★Why will they use your website?
  30. WHAT IS YOUR FOCUS? ★Who will be using your website?

    ★Why will they use your website? ★How will they use your website?
  31. 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?
  32. 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!
  33. None
  34. ALWAYS REMEMBER...

  35. ALWAYS REMEMBER... YOUR CLIENT’S CLIENT IS YOUR CLIENT

  36. None
  37. COLOR SCHEME the language of color

  38. None
  39. COLOR AS AN ENIVIRONMENT

  40. COLOR AS AN ENIVIRONMENT ★Emotion vs. Apathy

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

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

    ★Chaos vs. Harmony
  43. COLOR AS AN ENIVIRONMENT ★Emotion vs. Apathy ★Movement vs. Stillness

    ★Chaos vs. Harmony ★Warm vs. Cool
  44. COLOR AS AN ENIVIRONMENT ★Emotion vs. Apathy ★Movement vs. Stillness

    ★Chaos vs. Harmony ★Warm vs. Cool ★Bright vs. Muted
  45. The Power of Color

  46. The Power of Color CULTURAL COLOR ASSOCIATIONS

  47. None
  48. love, drama, dynamism, power, passion, blood

  49. None
  50. energy, warning, enthusiasm, creativity, shock

  51. None
  52. sunshine, caution, vibrancy, happiness, alert

  53. None
  54. nature, wealth, stability, environment, relaxation

  55. None
  56. calm, intelligence, honesty, depression, openness

  57. None
  58. royalty, power, prestige, holiness, melancholy

  59. None
  60. purity, truth, perfection, light, sacredness

  61. None
  62. mystery, death, evil, elegance, formality

  63. None
  64. BASIC COLOR WHEEL

  65. BASIC COLOR WHEEL ★Primary: Red, Blue, Yellow

  66. BASIC COLOR WHEEL ★Primary: Red, Blue, Yellow ★Secondary: Orange, Green,

    Purple
  67. BASIC COLOR WHEEL ★Primary: Red, Blue, Yellow ★Secondary: Orange, Green,

    Purple ★Tertiary: Intermediate Colors
  68. None
  69. COLOR SCHEMES

  70. None
  71. HUE, TINT, SHADE, & TONE

  72. HUE, TINT, SHADE, & TONE PURE COLOR

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

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

    BLACK
  75. HUE, TINT, SHADE, & TONE PURE COLOR PLUS WHITE PLUS

    BLACK PLUS GRAY
  76. None
  77. KULER.ADOBE.COM

  78. None
  79. COLORSCHEMEDESIGNER.COM

  80. None
  81. COLOURLOVERS.COM

  82. None
  83. ANATOMY you must understand the pieces before the whole

  84. None
  85. WORDPRESS PARTS

  86. 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
  87. Name of Business A very catchy tagline NAVIGATION | NAVIGATION

    | NAVIGATION | NAVIGATION CLICK ME!
  88. HEADER Name of Business A very catchy tagline NAVIGATION |

    NAVIGATION | NAVIGATION | NAVIGATION CLICK ME! LOGO CALL TO ACTION NAVIGATION
  89. 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. WIDGET WIDGET
  90. 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
  91. Copyright 2013 by Name

  92. SIMPLE FOOTER Copyright 2013 by Name COPYRIGHT/ CREDITS

  93. Copyright 2013 by Name WIDGET WIDGET WIDGET NAVIGATION | NAVIGATION

    | NAVIGATION | NAVIGATION | NAVIGATION CLICK ME!
  94. EXPANDED FOOTER Copyright 2013 by Name COPYRIGHT/ CREDITS WIDGET WIDGET

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

  97. None
  98. PIET MONDRIAN

  99. None
  100. LINE UP ELEMENTS

  101. LINE UP ELEMENTS 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
  102. 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
  103. None
  104. PHI - THE GOLDEN RATIO Phi ( Φ = 1.618033988749895…

    )
  105. PHI - THE GOLDEN RATIO Phi ( Φ = 1.618033988749895…

    )
  106. PHI - THE GOLDEN RATIO ★Leonardo Da Vinci Used Phi

    ( Φ = 1.618033988749895… )
  107. PHI - THE GOLDEN RATIO ★Leonardo Da Vinci Used ★“Divine

    Proportion” Phi ( Φ = 1.618033988749895… )
  108. PHI - THE GOLDEN RATIO ★Leonardo Da Vinci Used ★“Divine

    Proportion” ★Appears in art & music Phi ( Φ = 1.618033988749895… )
  109. PHI - THE GOLDEN RATIO ★Leonardo Da Vinci Used ★“Divine

    Proportion” ★Appears in art & music ★Appears often in nature Phi ( Φ = 1.618033988749895… )
  110. PHI - THE GOLDEN RATIO ★Leonardo Da Vinci Used ★“Divine

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

  113. EXAMPLES OF GOLDEN RATIO

  114. None
  115. RULE OF THIRDS

  116. None
  117. EXAMPLE OF RULE OF THIRDS

  118. None
  119. WEBSITE LAYOUT EXAMPLE

  120. WEBSITE LAYOUT EXAMPLE

  121. WEBSITE LAYOUT EXAMPLE

  122. WEBSITE LAYOUT EXAMPLE

  123. None
  124. TYPOGRAPHY a font is not just a font

  125. None
  126. WHY USE TEXT? ★Fonts have finally come to web publishing

  127. WHY USE TEXT? ★Fonts have finally come to web publishing

    ★Text loads faster than images
  128. WHY USE TEXT? ★Fonts have finally come to web publishing

    ★Text loads faster than images ★Google understands text and can index it
  129. WHY USE TEXT? ★Fonts have finally come to web publishing

    ★Text loads faster than images ★Google understands text and can index it ★Accessibility for Screen Readers
  130. WHY USE TEXT? ★Fonts have finally come to web publishing

    ★Text loads faster than images ★Google understands text and can index it ★Accessibility for Screen Readers ★Readability for visitor
  131. WHY USE TEXT? ★Fonts have finally 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
  132. WHY USE TEXT? ★Fonts have finally 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
  133. None
  134. WEB TYPOGRAPHY ★Fonts can be embedded via @font-face

  135. WEB TYPOGRAPHY ★Fonts can be embedded via @font-face ★Cufón (Javascript)

    not as good
  136. WEB TYPOGRAPHY ★Fonts can be embedded via @font-face ★Cufón (Javascript)

    not as good ★Check licensing for web embedding
  137. 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
  138. 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
  139. 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
  140. 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
  141. None
  142. FONTSQUIRREL.COM

  143. None
  144. WEB FONT GENERATOR

  145. None
  146. DOWNLOAD ZIP FILE

  147. None
  148. VIEW STYLESHEET.CSS

  149. None
  150. DAFONT.COM

  151. None
  152. GOOGLE.COM/FONTS

  153. None
  154. GOOGLE FONTS IN WORDPRESS

  155. GOOGLE FONTS IN WORDPRESS DON’T ADD THIS TO YOUR HEADER.PHP

    XXXXX
  156. 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
  157. None
  158. WP GOOGLE FONTS

  159. None
  160. FONTS.COM

  161. None
  162. IDENTIFONT.COM

  163. None
  164. MYFONTS.COM/WhatTheFont

  165. None
  166. LICENSING the internet is not public domain

  167. None
  168. PUBLIC DOMAIN Works in the public domain are those whose

    intellectual property rights have expired, have been forfeited, or are inapplicable.
  169. 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
  170. 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
  171. None
  172. CREATIVECOMMONS.ORG/CHOOSE/ZERO

  173. None
  174. CREATIVECOMMONS.ORG/CHOOSE

  175. None
  176. CREATIVE COMMONS LICENSES

  177. None
  178. RESOURCES check it before you wreck it

  179. None
  180. WEB DESIGN BOOKS

  181. WEB DESIGN BOOKS JASON BEAIRD

  182. WEB DESIGN BOOKS LISA SABIN-WILSON JASON BEAIRD

  183. None
  184. SEARCH.CREATIVECOMMONS.ORG

  185. None
  186. COMMONS.WIKIMEDIA.ORG

  187. None
  188. FLICKR.COM/CREATIVECOMMONS

  189. None
  190. FOTOPEDIA.COM

  191. None
  192. 123RF.COM

  193. None
  194. GETTYIMAGES.COM

  195. None
  196. PICMONKEY.COM

  197. None
  198. PICASION.COM

  199. None
  200. TINEYE.COM

  201. None
  202. TAKE AWAY REVIEW ★Don’t get distracted from your website goals

  203. TAKE AWAY REVIEW ★Don’t get distracted from your website goals

    ★Study general design principles
  204. TAKE AWAY REVIEW ★Don’t get distracted from your website goals

    ★Study general design principles ★Use colors and fonts to their full advantage
  205. 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)
  206. 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
  207. 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!
  208. None
  209. QUESTIONS? Suzette Franck suzette@mediatemple.net https://speakerdeck.com/suzettefranck