the non-designer’s guide to wordpress (making your site look awesome)
Post on 19-Oct-2014
2.482 views
DESCRIPTION
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.TRANSCRIPT
#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 themes or widgets get in the way of that
• Good site design should emphasize your content, not itself
#mnblogcon @myklroventine
But… #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
#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 & follow creative curators on the web and via social channels
• Listen to recommendations
• Apply what you learn
#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 dominant color for emphasis
• A little goes a long way, even monochromatic tones can be powerful
#mnblogcon @myklroventine
#mnblogcon @myklroventine
#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
#mnblogcon @myklroventine
#mnblogcon @myklroventine
#mnblogcon @myklroventine
Typography
#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
#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
• Create rules for formatting and be consistent (rounded corners, specific width, right-aligned, etc.)
• Always credit sources. Don’t steal!
#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
• Creates variety,
#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
#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
• Take advantage of those controls to tie into your site’s style whenever possible
#mnblogcon @myklroventine
#mnblogcon @myklroventine
#mnblogcon @myklroventine
Sidebar
#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
#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 & pages (H1, H2, blockquote, etc.)
• Less is ALWAYS better. Simplicity is never a bad choice.
#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
#mnblogcon @myklroventine
Photo: Tsahi Levent-Levi on Flickr
#mnblogcon @myklroventine
Mykl Roventine myklroventine.com
Thank you!
Headshot: Glimpses of Soul Photography
#mnblogcon @myklroventine