Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
2
“Design is not just 
what it looks like 
and feels like. 
Design is how it 
works.”
You’re Already On Your Way 
• WordPress already WORKS 
pretty damn well 
• Don’t let your themes or 
widgets get in the wa...
Look Around. Get Inspired. 
• Pay attention to what 
you like about other sites 
• Find & follow creative 
curators on the...
Start by 
making 
your site 
your own
Color
Hex Colors 
• Annotation for the combination of Red, Green, 
and Blue color values (RGB) 
• HEX values are specified as 3 ...
design-­‐seeds.com
colourlovers.com
12 
chrome.google.com/webstore/detail/eye-­‐dropper/hmdcmlfkchdmnmnmheododdhjedfccka
Typography
Type Tips 
• Web fonts (@fontface) allow you to 
use a variety of different fonts 
• Perfect way to add a 
unique touch to...
google.com/fonts
wordpress.org/plugins/easy-­‐google-­‐fonts/
typekit.com
wordpress.org/plugins/typekit-­‐fonts-­‐for-­‐wordpress
fontsquirrel.com/fonts/list/hot_web
Photos & 
Images
Images Size & Quality 
• Physical Size* 
• File Size 
• Resolution 
• File Type 
* IMPORTANT
22 
pixlr.com 
picmonkey.com 
canva.com
photoshop.com/tools
24 
croppola.com
wordpress.org/plugins/manual-­‐image-­‐crop
creativecommons.org
compfight.com
thenounproject.com
thenounproject.com
Page Templates
Use Different Page Templates 
• Built into many themes 
• Creates variety, 
• Can enhance different 
types of content
Theme 
Customizer
my.studiopress.com/themes
woothemes.com
Share Icons
sharethis.com
addthis.com
wordpress.org/plugins/simple-­‐custom-­‐css
Plugins 
• Choose plugins that add functionality 
but allow control over their style/ 
design 
• Take advantage of those c...
wordpress.org/plugins/simple-­‐custom-­‐css
wordpress.org/plugins/simple-­‐customizer
wordpress.org/plugins/forget-­‐about-­‐shortcode-­‐buttons
wordpress.org/plugins/advanced-­‐wp-­‐columns
wordpress.org/plugins/simple-­‐page-­‐sidebars
Triage Your Sidebar Often 
• Only include what you NEED to 
• Avoid too many third-party widgets 
(Facebook, Twitter, Flic...
Other Bits & Pieces 
• Create & use a favicon 
• Use built-in text formatting for 
posts & pages (H1, H2, blockquote, etc....
“A designer knows he has 
achieved perfection not 
when there is nothing left 
to add, but when there is 
nothing left to ...
Photo: Tsahi Levent-Levi on Flickr
Photo: Nate Grigg on Flickr
The Non-Designer’s Guide to WordPress (Making Your Site Look Awesome)
The Non-Designer’s Guide to WordPress (Making Your Site Look Awesome)
The Non-Designer’s Guide to WordPress (Making Your Site Look Awesome)
The Non-Designer’s Guide to WordPress (Making Your Site Look Awesome)
The Non-Designer’s Guide to WordPress (Making Your Site Look Awesome)
The Non-Designer’s Guide to WordPress (Making Your Site Look Awesome)
Próxima SlideShare
Cargando en…5
×

The Non-Designer’s Guide to WordPress (Making Your Site Look Awesome)

You don’t have to be a designer to make your WordPress site look good. In fact, no matter what theme you’re using now there are lots of easy ways to make it look better. Mykl (who IS a designer BTW) will share tips and tricks to take your site design from just acceptable to downright awesome.

  • Inicia sesión para ver los comentarios

The Non-Designer’s Guide to WordPress (Making Your Site Look Awesome)

  1. 1. 2
  2. 2. “Design is not just what it looks like and feels like. Design is how it works.”
  3. 3. You’re Already On Your Way • WordPress already WORKS pretty damn well • Don’t let your themes or widgets get in the way of that • Good site design should emphasize your content, not itself
  4. 4. Look Around. Get Inspired. • Pay attention to what you like about other sites • Find & follow creative curators on the web and via social channels • Listen to recommendations • Apply what you learn Photo: emiliokuffer on Flickr
  5. 5. Start by making your site your own
  6. 6. Color
  7. 7. Hex Colors • Annotation for the combination of Red, Green, and Blue color values (RGB) • HEX values are specified as 3 pairs of two-digit numbers, starting with a # sign
  8. 8. design-­‐seeds.com
  9. 9. colourlovers.com
  10. 10. 12 chrome.google.com/webstore/detail/eye-­‐dropper/hmdcmlfkchdmnmnmheododdhjedfccka
  11. 11. Typography
  12. 12. Type Tips • Web fonts (@fontface) allow you to use a variety of different fonts • Perfect way to add a unique touch to any design • Don’t use too many • Be careful when mixing
  13. 13. google.com/fonts
  14. 14. wordpress.org/plugins/easy-­‐google-­‐fonts/
  15. 15. typekit.com
  16. 16. wordpress.org/plugins/typekit-­‐fonts-­‐for-­‐wordpress
  17. 17. fontsquirrel.com/fonts/list/hot_web
  18. 18. Photos & Images
  19. 19. Images Size & Quality • Physical Size* • File Size • Resolution • File Type * IMPORTANT
  20. 20. 22 pixlr.com picmonkey.com canva.com
  21. 21. photoshop.com/tools
  22. 22. 24 croppola.com
  23. 23. wordpress.org/plugins/manual-­‐image-­‐crop
  24. 24. creativecommons.org
  25. 25. compfight.com
  26. 26. thenounproject.com
  27. 27. thenounproject.com
  28. 28. Page Templates
  29. 29. Use Different Page Templates • Built into many themes • Creates variety, • Can enhance different types of content
  30. 30. Theme Customizer
  31. 31. my.studiopress.com/themes
  32. 32. woothemes.com
  33. 33. Share Icons
  34. 34. sharethis.com
  35. 35. addthis.com
  36. 36. wordpress.org/plugins/simple-­‐custom-­‐css
  37. 37. Plugins • Choose plugins that add functionality but allow control over their style/ design • Take advantage of those controls to tie into your site’s style whenever possible
  38. 38. wordpress.org/plugins/simple-­‐custom-­‐css
  39. 39. wordpress.org/plugins/simple-­‐customizer
  40. 40. wordpress.org/plugins/forget-­‐about-­‐shortcode-­‐buttons
  41. 41. wordpress.org/plugins/advanced-­‐wp-­‐columns
  42. 42. wordpress.org/plugins/simple-­‐page-­‐sidebars
  43. 43. Triage Your Sidebar Often • Only include what you NEED to • Avoid too many third-party widgets (Facebook, Twitter, Flickr), can slow page load times • Limit # & size of ads unless you are making lots of money • Animated anything = annoying
  44. 44. Other Bits & Pieces • Create & use a favicon • Use built-in text formatting for posts & pages (H1, H2, blockquote, etc.) • Less is ALWAYS better. Simplicty is never a bad choice.
  45. 45. “A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.”
  46. 46. Photo: Tsahi Levent-Levi on Flickr
  47. 47. Photo: Nate Grigg on Flickr

×