The Non-Designer’s Guide to WordPress (Making Your Site Look Awesome)
-
date post
19-Oct-2014 -
Category
Design
-
view
2.480 -
download
0
description
Transcript of The Non-Designer’s Guide to WordPress (Making Your Site Look Awesome)
#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