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

3,289 views
3,146 views

Published on

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. Presented at Minnesota Blogger Conference on October 12, 2013.

Published in: Design, Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,289
On SlideShare
0
From Embeds
0
Number of Embeds
1,518
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. #mnblogcon @myklroventine
  2. 2. #mnblogcon @myklroventine “Design is not just what it looks like and feels like. Design is how it works.” - Steve jobs
  3. 3. #mnblogcon @myklroventine So 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. #mnblogcon @myklroventine But…
  5. 5. #mnblogcon @myklroventine “Everybody thinks they have good taste and a sense of humor but they couldn't possibly all have good taste.” - When Harry Met Sally
  6. 6. #mnblogcon @myklroventine Good taste is subjective. Good design: not so much.
  7. 7. #mnblogcon @myklroventine Photo: emiliokuffer on Flickr
  8. 8. #mnblogcon @myklroventine 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
  9. 9. #mnblogcon @myklroventine Start by making your site your own.
  10. 10. #mnblogcon @myklroventine Photo: LeonMMelissa on Flickr
  11. 11. #mnblogcon @myklroventine Color
  12. 12. #mnblogcon @myklroventine Color •  The easiest way to make any site stand out •  Mix pairs of unusual colors or pick one dominant color for emphasis •  A little goes a long way, even monochromatic tones can be powerful
  13. 13. #mnblogcon @myklroventine
  14. 14. #mnblogcon @myklroventine
  15. 15. #mnblogcon @myklroventine 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
  16. 16. #mnblogcon @myklroventine
  17. 17. #mnblogcon @myklroventine
  18. 18. #mnblogcon @myklroventine Typography
  19. 19. #mnblogcon @myklroventine Type Tips •  Web fonts (@fontface) allows 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 combining
  20. 20. #mnblogcon @myklroventine
  21. 21. #mnblogcon @myklroventine
  22. 22. #mnblogcon @myklroventine
  23. 23. #mnblogcon @myklroventine
  24. 24. #mnblogcon @myklroventine Photos
  25. 25. #mnblogcon @myklroventine Show, don’t just tell •  Great photos are another powerful way to make your design stand out •  Create rules for formatting and be consistent (rounded corners, specific width, right-aligned, etc.) •  Always credit sources. Don’t steal!
  26. 26. #mnblogcon @myklroventine
  27. 27. #mnblogcon @myklroventine
  28. 28. #mnblogcon @myklroventine
  29. 29. #mnblogcon @myklroventine
  30. 30. #mnblogcon @myklroventine Page Templates  
  31. 31. #mnblogcon @myklroventine Use ‘em if you got ‘em •  Built into many themes •  Can enhance different types of content •  Creates variety,
  32. 32. #mnblogcon @myklroventine Theme Customizer •  Introduced in WordPress 3.4 •  Make changes, preview them in realtime, before going live •  Theme developers continue to further integrate it into updates
  33. 33. #mnblogcon @myklroventine
  34. 34. #mnblogcon @myklroventine Premium Theme Frameworks
  35. 35. #mnblogcon @myklroventine
  36. 36. #mnblogcon @myklroventine
  37. 37. #mnblogcon @myklroventine Plugins
  38. 38. #mnblogcon @myklroventine 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
  39. 39. #mnblogcon @myklroventine
  40. 40. #mnblogcon @myklroventine
  41. 41. #mnblogcon @myklroventine Sidebar
  42. 42. #mnblogcon @myklroventine 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
  43. 43. #mnblogcon @myklroventine :(
  44. 44. #mnblogcon @myklroventine :)
  45. 45. #mnblogcon @myklroventine Default widgets usually need tweaking
  46. 46. #mnblogcon @myklroventine Consider consolidation
  47. 47. #mnblogcon @myklroventine Other bits & pieces •  Create & use a favicon •  Use built-in HTML text formatting for posts & pages (H1, H2, blockquote, etc.) •  Less is ALWAYS better. Simplicity is never a bad choice.
  48. 48. #mnblogcon @myklroventine “A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.” - Antoine de Saint Exupéry
  49. 49. #mnblogcon @myklroventine Photo: Tsahi Levent-Levi on Flickr
  50. 50. #mnblogcon @myklroventine Thank you! Mykl Roventine myklroventine.com Headshot: Glimpses of Soul Photography

×