#mnblogcon @myklroventine
#mnblogcon @myklroventine

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

So you’re already on your way
•  WordPress already
WORKS pretty damn well
•  Don’t let your the...
#mnblogcon @myklroventine

But…
#mnblogcon @myklroventine

“Everybody thinks they
have good taste and a
sense of humor but
they couldn't possibly
all have...
#mnblogcon @myklroventine

Good taste is
subjective.
Good design:
not so much.
#mnblogcon @myklroventine

Photo: emiliokuffer on Flickr
#mnblogcon @myklroventine

Look around. Get inspired.

•  Pay attention to what you like about other sites
•  Find & follo...
#mnblogcon @myklroventine

Start
by making
your site
your own.
#mnblogcon @myklroventine

Photo: LeonMMelissa on Flickr
#mnblogcon @myklroventine

Color
#mnblogcon @myklroventine

Color
•  The easiest way to make any site
stand out
•  Mix pairs of unusual colors or pick
one ...
#mnblogcon @myklroventine
#mnblogcon @myklroventine
#mnblogcon @myklroventine

Hex Colors

•  Annotation for the combination of Red,
Green, and Blue color values (RGB)
•  HEX...
#mnblogcon @myklroventine
#mnblogcon @myklroventine
#mnblogcon @myklroventine

Typography
#mnblogcon @myklroventine

Type Tips
•  Web fonts (@fontface) allows you to
use a variety of different fonts
•  Perfect wa...
#mnblogcon @myklroventine
#mnblogcon @myklroventine
#mnblogcon @myklroventine
#mnblogcon @myklroventine
#mnblogcon @myklroventine

Photos
#mnblogcon @myklroventine

Show, don’t just tell
•  Great photos are another powerful
way to make
your design stand out
• ...
#mnblogcon @myklroventine
#mnblogcon @myklroventine
#mnblogcon @myklroventine
#mnblogcon @myklroventine
#mnblogcon @myklroventine

Page
Templates	
  
#mnblogcon @myklroventine

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

Theme Customizer
•  Introduced in WordPress 3.4
•  Make changes, preview them in realtime,
befo...
#mnblogcon @myklroventine
#mnblogcon @myklroventine

Premium
Theme
Frameworks
#mnblogcon @myklroventine
#mnblogcon @myklroventine
#mnblogcon @myklroventine

Plugins
#mnblogcon @myklroventine

Plugins

•  Choose plugins that add functionality
but allow control over their style/design
•  ...
#mnblogcon @myklroventine
#mnblogcon @myklroventine
#mnblogcon @myklroventine

Sidebar
#mnblogcon @myklroventine

Triage your sidebar often
•  Only include what you NEED to
•  Avoid too many third-party widget...
#mnblogcon @myklroventine

:(
#mnblogcon @myklroventine

:)
#mnblogcon @myklroventine

Default widgets usually
need tweaking
#mnblogcon @myklroventine

Consider consolidation
#mnblogcon @myklroventine

Other bits & pieces
•  Create & use a favicon

•  Use built-in HTML text formatting for
posts &...
#mnblogcon @myklroventine

“A designer knows he
has achieved perfection
not when there is
nothing left to add, but
when th...
#mnblogcon @myklroventine

Photo: Tsahi Levent-Levi on Flickr
#mnblogcon @myklroventine

Thank you!
Mykl Roventine
myklroventine.com

Headshot: Glimpses of Soul Photography
Upcoming SlideShare
Loading in...5
×

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

2,861

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
2,861
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
10
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×