The Non-Designer’s Guide to WordPress (Making Your Site Look Awesome)
-
Upload
mykl-roventine -
Category
Design
-
view
621 -
download
1
description
Transcript of The Non-Designer’s Guide to WordPress (Making Your Site Look Awesome)
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
colourlovers.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