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.

2. 2

3. “Design is not just
what it looks like
and feels like.
Design is how it
works.”

4. 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

5. 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

6. Start by
making
your site
your own

7. Color

8. 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

9. design-­‐seeds.com

10. colourlovers.com

12. 12
chrome.google.com/webstore/detail/eye-­‐dropper/hmdcmlfkchdmnmnmheododdhjedfccka

13. Typography

14. 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

15. google.com/fonts

16. wordpress.org/plugins/easy-­‐google-­‐fonts/

17. typekit.com

18. wordpress.org/plugins/typekit-­‐fonts-­‐for-­‐wordpress

19. fontsquirrel.com/fonts/list/hot_web

20. Photos &
Images

21. Images Size & Quality
• Physical Size*
• File Size
• Resolution
• File Type
* IMPORTANT

22. 22
pixlr.com
picmonkey.com
canva.com

23. photoshop.com/tools

24. 24
croppola.com

25. wordpress.org/plugins/manual-­‐image-­‐crop

26. creativecommons.org

30. compfight.com

31. thenounproject.com

32. thenounproject.com

33. Page Templates

34. Use Different Page Templates
• Built into many themes
• Creates variety,
• Can enhance different
types of content

36. Theme
Customizer

37. my.studiopress.com/themes

38. woothemes.com

39. Share Icons

40. sharethis.com

41. addthis.com

42. wordpress.org/plugins/simple-­‐custom-­‐css

43. 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

44. wordpress.org/plugins/simple-­‐custom-­‐css

45. wordpress.org/plugins/simple-­‐customizer

46. wordpress.org/plugins/forget-­‐about-­‐shortcode-­‐buttons

47. wordpress.org/plugins/advanced-­‐wp-­‐columns

48. wordpress.org/plugins/simple-­‐page-­‐sidebars

49. 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

50. 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.

51. “A designer knows he has
achieved perfection not
when there is nothing left
to add, but when there is
nothing left to take away.”

52. Photo: Tsahi Levent-Levi on Flickr

53. Photo: Nate Grigg on Flickr