Designing For WordPress - Fresno

Designing For WordPress - Fresno

Transcript

1. DESIGNING FOR WORDPRESS Suzette Franck (mt) Media Temple WordPress Evangelist Fresno Meetup Saturday, January 11, 2013
3. ABOUT ME send tweets to @mt_Suzette
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
16. AGENDA #agenda { visibility: visible; }
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
26. DEFINING SUCCESS eye on the prize
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!
34. ALWAYS REMEMBER...
35. ALWAYS REMEMBER... YOUR CLIENT’S CLIENT IS YOUR CLIENT
37. COLOR SCHEME the language of color
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
48. love, drama, dynamism, power, passion, blood
50. energy, warning, enthusiasm, creativity, shock
52. sunshine, caution, vibrancy, happiness, alert
54. nature, wealth, stability, environment, relaxation
56. calm, intelligence, honesty, depression, openness
58. royalty, power, prestige, holiness, melancholy
60. purity, truth, perfection, light, sacredness
62. mystery, death, evil, elegance, formality
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
69. COLOR SCHEMES
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
77. KULER.ADOBE.COM
79. COLORSCHEMEDESIGNER.COM
81. COLOURLOVERS.COM
83. ANATOMY you must understand the pieces before the whole
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
96. COMPOSITION placement and proportion are everything
98. PIET MONDRIAN
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
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… )
112. EXAMPLES OF GOLDEN RATIO
113. EXAMPLES OF GOLDEN RATIO
115. RULE OF THIRDS
117. EXAMPLE OF RULE OF THIRDS
119. WEBSITE LAYOUT EXAMPLE
120. WEBSITE LAYOUT EXAMPLE
121. WEBSITE LAYOUT EXAMPLE
122. WEBSITE LAYOUT EXAMPLE
124. TYPOGRAPHY a font is not just a font
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
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
142. FONTSQUIRREL.COM
144. WEB FONT GENERATOR
146. DOWNLOAD ZIP FILE
148. VIEW STYLESHEET.CSS
150. DAFONT.COM
152. GOOGLE.COM/FONTS
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
158. WP GOOGLE FONTS
160. FONTS.COM
162. IDENTIFONT.COM
164. MYFONTS.COM/WhatTheFont
166. LICENSING the internet is not public domain
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
172. CREATIVECOMMONS.ORG/CHOOSE/ZERO
174. CREATIVECOMMONS.ORG/CHOOSE
176. CREATIVE COMMONS LICENSES
178. RESOURCES check it before you wreck it
180. WEB DESIGN BOOKS
181. WEB DESIGN BOOKS JASON BEAIRD
182. WEB DESIGN BOOKS LISA SABIN-WILSON JASON BEAIRD
184. SEARCH.CREATIVECOMMONS.ORG
186. COMMONS.WIKIMEDIA.ORG
188. FLICKR.COM/CREATIVECOMMONS
190. FOTOPEDIA.COM
192. 123RF.COM
194. GETTYIMAGES.COM
196. PICMONKEY.COM
198. PICASION.COM
200. TINEYE.COM
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!
209. QUESTIONS? Suzette Franck suzette@mediatemple.net https://speakerdeck.com/suzettefranck