making wordpress templates look good

21
1 #hottemplates WORDCAMP PHOENIX 2016 John Gough @john_gough | Skyhook Interactive YOU CAN MAKE TEMPLATES LOOK GOOD

Upload: skyhook-interactive

Post on 12-Jan-2017

165 views

Category:

Design


0 download

TRANSCRIPT

Page 1: Making WordPress templates look good

1 #hottemplates

WORDCAMP PHOENIX 2016John Gough @john_gough | Skyhook Interactive

YOU CAN MAKE TEMPLATES LOOK

GOOD

Page 2: Making WordPress templates look good

2 #hottemplates

Let’s build a more beautiful, useful, & connected Internet.

img: @NASA

Page 3: Making WordPress templates look good

3 #hottemplates

“That looks like a template.”

img: @mcdonalds img: @shoot_the_route

Some things are supposed to be identical. Not websites.

Page 4: Making WordPress templates look good

4 #hottemplates

There are a lot of them out there.

50,000 websites

launch every day

822 themes downloaded daily

just from wordpress.org

https://codeinwp.com/blog/wordpress-statistics/

Page 5: Making WordPress templates look good

5 #hottemplates

If you think they are, you’re going to build websites that look like templates.

TEMPLATES ARE NOT

WEBSITES

Page 6: Making WordPress templates look good

6 #hottemplates

Not this.

This.

img: @sharkdesignstudio

Use templates as tools!

Page 7: Making WordPress templates look good

7 #hottemplates

Plan your content.

Know your limits.

Apply appropriate styles.

Page 8: Making WordPress templates look good

8 #hottemplates

Plan your content.

Don’t pour your content into someone else’s designs.

Page 9: Making WordPress templates look good

9 #hottemplates

Plan your content.

AudienceWho’s going to be looking?

Site mapWhere will they find it?

Content planHow will I explain it?

Page 10: Making WordPress templates look good

10 #hottemplates

Plan your content.

A content plan identifies components of a page.

Page 11: Making WordPress templates look good

11 #hottemplates

Know your limits.

A template is a tool. Use the right one.

img via Buzzfeed

Page 12: Making WordPress templates look good

12 #hottemplates

Know your limits.

Look for demo features that make sense.

Page 13: Making WordPress templates look good

13 #hottemplates

Apply appropriate styles.

ColorsPrimary, secondary, tertiary, & greys

TypographyPair two legible Google fonts

Elements that fitMake custom assets

Better than average photos10 minutes in Photoshop

Page 14: Making WordPress templates look good

14 #hottemplates

Whitespace

Font size

Color

ramotion.com

Page 15: Making WordPress templates look good

15 #hottemplates

Whitespace

Font size

Photography

advancedplasticsurgery.com

Page 16: Making WordPress templates look good

16 #hottemplates

Whitespace

Font size

Photography

advancedplasticsurgery.com

Page 17: Making WordPress templates look good

17 #hottemplates

Custom assets

Photography

Colors

Dribbble: Creative Mints

Page 18: Making WordPress templates look good

18 #hottemplates

Custom assets

Photography

Colors

Dribbble: Creative Mints

Page 19: Making WordPress templates look good

19 #hottemplates

Whitespace

Fonts

Custom assets & colors

famous.co

Page 20: Making WordPress templates look good

20 #hottemplates

Plan your content.

Know your limits.

Apply appropriate styles.

Make it fit; Audience, Site map, Content plan

Pick the right tool, and features that make sense

Colors, typography, custom assets, photography

Page 21: Making WordPress templates look good

21 #hottemplates

THANK YOU!John Gough @john_gough | Skyhook Interactive

NOW GO MAKE THE INTERNET LOOK

GOOD.