the non-designer’s guide to wordpress (making your site look awesome)
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.TRANSCRIPT
2
“Design is not just what it looks like
and feels like. Design is how it
works.”
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
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
Start by making your site your own
Color
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
design-‐seeds.com
12
chrome.google.com/webstore/detail/eye-‐dropper/hmdcmlfkchdmnmnmheododdhjedfccka
Typography
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
google.com/fonts
wordpress.org/plugins/easy-‐google-‐fonts/
typekit.com
wordpress.org/plugins/typekit-‐fonts-‐for-‐wordpress
fontsquirrel.com/fonts/list/hot_web
Photos & Images
Images Size & Quality
• Physical Size*
• File Size
• Resolution
• File Type* IMPORTANT
22
pixlr.com
picmonkey.com
canva.com
photoshop.com/tools
24
croppola.com
wordpress.org/plugins/manual-‐image-‐crop
creativecommons.org
compfight.com
thenounproject.com
thenounproject.com
Page Templates
Use Different Page Templates
• Built into many themes • Creates variety, • Can enhance different
types of content
Theme Customizer
my.studiopress.com/themes
woothemes.com
Share Icons
sharethis.com
addthis.com
wordpress.org/plugins/simple-‐custom-‐css
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
wordpress.org/plugins/simple-‐custom-‐css
wordpress.org/plugins/simple-‐customizer
wordpress.org/plugins/forget-‐about-‐shortcode-‐buttons
wordpress.org/plugins/advanced-‐wp-‐columns
wordpress.org/plugins/simple-‐page-‐sidebars
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
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.
“A designer knows he has achieved perfection not
when there is nothing left to add, but when there is
nothing left to take away.”
Photo: Tsahi Levent-Levi on Flickr
Photo: Nate Grigg on Flickr