the non-designer's guide to wordpress (making your site awesome)

51

Post on 19-Oct-2014

7.330 views

Category:

Design


1 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 acceptable to awesome. Presented at Minnebar8 on 4/6/13.

TRANSCRIPT

Page 1: The Non-designer's Guide to WordPress (Making Your Site Awesome)
Page 2: The Non-designer's Guide to WordPress (Making Your Site Awesome)

“Design is not just what it looks like and feels like. Design is how it works.”

- Steve jobs

Page 3: The Non-designer's Guide to WordPress (Making Your Site Awesome)

You’re Already On Your Way •  WordPress works pretty damn well

“out of the box” •  Don’t let your theme & widgets

get in the way of that •  Good site design should emphasize

your content, not itself

Page 4: The Non-designer's Guide to WordPress (Making Your Site Awesome)

But…

Page 5: The Non-designer's Guide to WordPress (Making Your Site Awesome)

“Everybody thinks they have good taste and a sense of humor but they couldn't possibly all have good taste.”

- When Harry Met Sally

Page 6: The Non-designer's Guide to WordPress (Making Your Site Awesome)

Good taste is subjective.

Good design: not so much.

Page 7: The Non-designer's Guide to WordPress (Making Your Site Awesome)

Photo: emiliokuffer on Flickr

Page 8: The Non-designer's Guide to WordPress (Making Your Site Awesome)

Look Around. Get Inspired. •  Pay attention to what you like about other sites •  Find & Follow creative curators on the web

and via social channels (like fastcodesign.com) •  Listen to recommendations from designers •  Apply what you learn

Page 9: The Non-designer's Guide to WordPress (Making Your Site Awesome)

Start by making your site your own.

Page 10: The Non-designer's Guide to WordPress (Making Your Site Awesome)

Photo: LeonMMelissa on Flickr

Page 11: The Non-designer's Guide to WordPress (Making Your Site Awesome)

Color

Page 12: The Non-designer's Guide to WordPress (Making Your Site Awesome)

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

Page 13: The Non-designer's Guide to WordPress (Making Your Site Awesome)
Page 14: The Non-designer's Guide to WordPress (Making Your Site Awesome)
Page 15: The Non-designer's Guide to WordPress (Making Your Site Awesome)

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

Page 16: The Non-designer's Guide to WordPress (Making Your Site Awesome)
Page 17: The Non-designer's Guide to WordPress (Making Your Site Awesome)
Page 18: The Non-designer's Guide to WordPress (Making Your Site Awesome)

Typography

Page 19: The Non-designer's Guide to WordPress (Making Your Site Awesome)

Type Tips •  Web fonts (@fontface) now 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

Page 20: The Non-designer's Guide to WordPress (Making Your Site Awesome)
Page 21: The Non-designer's Guide to WordPress (Making Your Site Awesome)
Page 22: The Non-designer's Guide to WordPress (Making Your Site Awesome)
Page 23: The Non-designer's Guide to WordPress (Making Your Site Awesome)

Photos

Page 24: The Non-designer's Guide to WordPress (Making Your Site Awesome)

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!

Page 25: The Non-designer's Guide to WordPress (Making Your Site Awesome)
Page 26: The Non-designer's Guide to WordPress (Making Your Site Awesome)
Page 27: The Non-designer's Guide to WordPress (Making Your Site Awesome)
Page 28: The Non-designer's Guide to WordPress (Making Your Site Awesome)
Page 29: The Non-designer's Guide to WordPress (Making Your Site Awesome)

Page Templates

Page 30: The Non-designer's Guide to WordPress (Making Your Site Awesome)

Use Different Page Templates •  Built into many themes •  Creates variety, •  Can enhance different

types of content

Page 31: The Non-designer's Guide to WordPress (Making Your Site Awesome)

Theme Customizer •  Introduced in WordPress 3.4 •  Make changes, preview them in realtime,

before going live •  More options to as theme

developers further integrate it into updates

Page 32: The Non-designer's Guide to WordPress (Making Your Site Awesome)
Page 33: The Non-designer's Guide to WordPress (Making Your Site Awesome)

Premium Theme

Frameworks

Page 34: The Non-designer's Guide to WordPress (Making Your Site Awesome)
Page 35: The Non-designer's Guide to WordPress (Making Your Site Awesome)
Page 36: The Non-designer's Guide to WordPress (Making Your Site Awesome)

Plugins

Page 37: The Non-designer's Guide to WordPress (Making Your Site Awesome)

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

Page 38: The Non-designer's Guide to WordPress (Making Your Site Awesome)
Page 39: The Non-designer's Guide to WordPress (Making Your Site Awesome)
Page 40: The Non-designer's Guide to WordPress (Making Your Site Awesome)
Page 41: The Non-designer's Guide to WordPress (Making Your Site Awesome)
Page 42: The Non-designer's Guide to WordPress (Making Your Site Awesome)

Sidebar

Page 43: The Non-designer's Guide to WordPress (Making Your Site Awesome)

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

Page 44: The Non-designer's Guide to WordPress (Making Your Site Awesome)

:(

Page 45: The Non-designer's Guide to WordPress (Making Your Site Awesome)

:)

Page 46: The Non-designer's Guide to WordPress (Making Your Site Awesome)

Default widgets usually need tweaking

Page 47: The Non-designer's Guide to WordPress (Making Your Site Awesome)

Consider consolidation

Page 48: The Non-designer's Guide to WordPress (Making Your Site Awesome)

Other Bits & Pieces •  Create & usa a favicon •  Use built-in text formatting for posts & pages

(H1, H2, blockquote, etc.) •  Less is ALWAYS better.

Simplicty is never a bad choice.

Page 49: The Non-designer's Guide to WordPress (Making Your Site Awesome)

“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

Page 50: The Non-designer's Guide to WordPress (Making Your Site Awesome)

Photo: Tsahi Levent-Levi on Flickr

Page 51: The Non-designer's Guide to WordPress (Making Your Site Awesome)

Mykl Roventine myklroventine.com @myklroventine

Thank you!

Headshot: Glimpses of Soul Photography