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

Post on 19-Oct-2014

2.480 views 0 download

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 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