Making WordPress templates look good
-
Upload
skyhook-interactive -
Category
Design
-
view
165 -
download
0
Transcript of Making WordPress templates look good
![Page 1: Making WordPress templates look good](https://reader031.fdocuments.us/reader031/viewer/2022030304/58778d081a28ab0f778b487b/html5/thumbnails/1.jpg)
1 #hottemplates
WORDCAMP PHOENIX 2016John Gough @john_gough | Skyhook Interactive
YOU CAN MAKE TEMPLATES LOOK
GOOD
![Page 2: Making WordPress templates look good](https://reader031.fdocuments.us/reader031/viewer/2022030304/58778d081a28ab0f778b487b/html5/thumbnails/2.jpg)
2 #hottemplates
Let’s build a more beautiful, useful, & connected Internet.
img: @NASA
![Page 3: Making WordPress templates look good](https://reader031.fdocuments.us/reader031/viewer/2022030304/58778d081a28ab0f778b487b/html5/thumbnails/3.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022030304/58778d081a28ab0f778b487b/html5/thumbnails/4.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022030304/58778d081a28ab0f778b487b/html5/thumbnails/5.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022030304/58778d081a28ab0f778b487b/html5/thumbnails/6.jpg)
6 #hottemplates
Not this.
This.
img: @sharkdesignstudio
Use templates as tools!
![Page 7: Making WordPress templates look good](https://reader031.fdocuments.us/reader031/viewer/2022030304/58778d081a28ab0f778b487b/html5/thumbnails/7.jpg)
7 #hottemplates
Plan your content.
Know your limits.
Apply appropriate styles.
![Page 8: Making WordPress templates look good](https://reader031.fdocuments.us/reader031/viewer/2022030304/58778d081a28ab0f778b487b/html5/thumbnails/8.jpg)
8 #hottemplates
Plan your content.
Don’t pour your content into someone else’s designs.
![Page 9: Making WordPress templates look good](https://reader031.fdocuments.us/reader031/viewer/2022030304/58778d081a28ab0f778b487b/html5/thumbnails/9.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022030304/58778d081a28ab0f778b487b/html5/thumbnails/10.jpg)
10 #hottemplates
Plan your content.
A content plan identifies components of a page.
![Page 11: Making WordPress templates look good](https://reader031.fdocuments.us/reader031/viewer/2022030304/58778d081a28ab0f778b487b/html5/thumbnails/11.jpg)
11 #hottemplates
Know your limits.
A template is a tool. Use the right one.
img via Buzzfeed
![Page 12: Making WordPress templates look good](https://reader031.fdocuments.us/reader031/viewer/2022030304/58778d081a28ab0f778b487b/html5/thumbnails/12.jpg)
12 #hottemplates
Know your limits.
Look for demo features that make sense.
![Page 13: Making WordPress templates look good](https://reader031.fdocuments.us/reader031/viewer/2022030304/58778d081a28ab0f778b487b/html5/thumbnails/13.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022030304/58778d081a28ab0f778b487b/html5/thumbnails/14.jpg)
14 #hottemplates
Whitespace
Font size
Color
ramotion.com
![Page 15: Making WordPress templates look good](https://reader031.fdocuments.us/reader031/viewer/2022030304/58778d081a28ab0f778b487b/html5/thumbnails/15.jpg)
15 #hottemplates
Whitespace
Font size
Photography
advancedplasticsurgery.com
![Page 16: Making WordPress templates look good](https://reader031.fdocuments.us/reader031/viewer/2022030304/58778d081a28ab0f778b487b/html5/thumbnails/16.jpg)
16 #hottemplates
Whitespace
Font size
Photography
advancedplasticsurgery.com
![Page 17: Making WordPress templates look good](https://reader031.fdocuments.us/reader031/viewer/2022030304/58778d081a28ab0f778b487b/html5/thumbnails/17.jpg)
17 #hottemplates
Custom assets
Photography
Colors
Dribbble: Creative Mints
![Page 18: Making WordPress templates look good](https://reader031.fdocuments.us/reader031/viewer/2022030304/58778d081a28ab0f778b487b/html5/thumbnails/18.jpg)
18 #hottemplates
Custom assets
Photography
Colors
Dribbble: Creative Mints
![Page 19: Making WordPress templates look good](https://reader031.fdocuments.us/reader031/viewer/2022030304/58778d081a28ab0f778b487b/html5/thumbnails/19.jpg)
19 #hottemplates
Whitespace
Fonts
Custom assets & colors
famous.co
![Page 20: Making WordPress templates look good](https://reader031.fdocuments.us/reader031/viewer/2022030304/58778d081a28ab0f778b487b/html5/thumbnails/20.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022030304/58778d081a28ab0f778b487b/html5/thumbnails/21.jpg)
21 #hottemplates
THANK YOU!John Gough @john_gough | Skyhook Interactive
NOW GO MAKE THE INTERNET LOOK
GOOD.