This document provides tips for making templates look good when building websites. It recommends planning content by considering the audience, creating a site map, and developing a content plan. It also advises knowing the limits of templates by selecting the right one and only using demo features that make sense. Finally, it suggests applying appropriate styles such as pairing legible fonts, using whitespace, font sizes, and custom colors, photography, and other assets to make templates fit individual sites rather than look like generic templates. The overall message is that templates are tools to be customized rather than directly poured content into.

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

2. 2
#hottemplates
Let’s build a more
beautiful, useful, &
connected Internet.
img: @NASA

3. 3
#hottemplates
“That
looks like
a
template.”
img: @mcdonalds img: @shoot_the_route
Some things
are supposed
to be identical.
Not websites.

4. 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/

5. 5
#hottemplates
If you think they are, you’re going to build
websites that look like templates.
TEMPLATES ARE NOT
WEBSITES

6. 6
#hottemplates
Not this.
This.
img: @sharkdesignstudio
Use templates
as tools!

7. 7
#hottemplates
Plan your content.
Know your limits.
Apply appropriate styles.

8. 8
#hottemplates
Plan your
content.
Don’t pour
your content
into someone
else’s designs.

9. 9
#hottemplates
Plan your
content.
Audience
Who’s going to be looking?
Site map
Where will they find it?
Content plan
How will I explain it?

10. 10
#hottemplates
Plan your
content.
A content plan
identifies
components
of a page.

11. 11
#hottemplates
Know
your
limits.
A template
is a tool.
Use the
right one.
img via Buzzfeed

12. 12
#hottemplates
Know
your
limits.
Look for demo
features that
make sense.

13. 13
#hottemplates
Apply
appropriate
styles.
Colors
Primary, secondary, tertiary, & greys
Typography
Pair two legible Google fonts
Elements that fit
Make custom assets
Better than average photos
10 minutes in Photoshop

14. 14
#hottemplates
Whitespace
Font size
Color
ramotion.com

15. 15
#hottemplates
Whitespace
Font size
Photography
advancedplasticsurgery.com

16. 16
#hottemplates
Whitespace
Font size
Photography
advancedplasticsurgery.com

17. 17
#hottemplates
Custom assets
Photography
Colors
Dribbble: Creative Mints

18. 18
#hottemplates
Custom assets
Photography
Colors
Dribbble: Creative Mints

19. 19
#hottemplates
Whitespace
Fonts
Custom assets &
colors
famous.co

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

21. 21
#hottemplates
THANK YOU!
John Gough @john_gough | Skyhook Interactive
NOW GO MAKE THE
INTERNET LOOK
GOOD.