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.

1. #mnblogcon @myklroventine

2. #mnblogcon @myklroventine
“Design is not just
what it looks like
and feels like.
Design is how it
works.” - Steve jobs

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. #mnblogcon @myklroventine
But…

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. #mnblogcon @myklroventine
Good taste is
subjective.
Good design:
not so much.

7. #mnblogcon @myklroventine
Photo: emiliokuffer on Flickr

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. #mnblogcon @myklroventine
Start
by making
your site
your own.

10. #mnblogcon @myklroventine
Photo: LeonMMelissa on Flickr

11. #mnblogcon @myklroventine
Color

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. #mnblogcon @myklroventine

14. #mnblogcon @myklroventine

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. #mnblogcon @myklroventine

17. #mnblogcon @myklroventine

18. #mnblogcon @myklroventine
Typography

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. #mnblogcon @myklroventine

21. #mnblogcon @myklroventine

22. #mnblogcon @myklroventine

23. #mnblogcon @myklroventine

24. #mnblogcon @myklroventine
Photos

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. #mnblogcon @myklroventine

27. #mnblogcon @myklroventine

28. #mnblogcon @myklroventine

29. #mnblogcon @myklroventine

30. #mnblogcon @myklroventine
Page
Templates

31. #mnblogcon @myklroventine
Use ‘em if you got ‘em
• Built into many themes
• Can enhance different
types of content
• Creates variety,

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. #mnblogcon @myklroventine

34. #mnblogcon @myklroventine
Premium
Theme
Frameworks

35. #mnblogcon @myklroventine

36. #mnblogcon @myklroventine

37. #mnblogcon @myklroventine
Plugins

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. #mnblogcon @myklroventine

40. #mnblogcon @myklroventine

41. #mnblogcon @myklroventine
Sidebar

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. #mnblogcon @myklroventine
:(

44. #mnblogcon @myklroventine
:)

45. #mnblogcon @myklroventine
Default widgets usually
need tweaking

46. #mnblogcon @myklroventine
Consider consolidation

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. #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. #mnblogcon @myklroventine
Photo: Tsahi Levent-Levi on Flickr

50. #mnblogcon @myklroventine
Thank you!
Mykl Roventine
myklroventine.com
Headshot: Glimpses of Soul Photography