A DESIGNER’S GUIDE 
TO WORDPRESS 
WordCamp Toronto 2014
JAMES HIPKIN 
Started in traditional 
advertising 
Moved over to direct 
marketing 
Been involved with digital for over te...
OVERVIEW 
What you need to know about websites 
The WordPress Content Management System (CMS) 
Implications for designers ...
WEBSITES 
Understanding how 
websites are built 
makes building them 
easier (less expensive) 
using WordPress or any 
oth...
SOME BROAD POINTS 
Websites are integrated systems—a 
small change in one place can have a 
big impact in other, often 
un...
STRUCTURE 
HTML is the framing—it 
uses “elements” to tell 
the browser what 
to display
STYLE 
CSS tells the browser 
how elements will 
be displayed
HTML and CSS work 
together to create 
both an aesthetic and 
functional end result
FONTS 
Web-safe fonts are, well, safe 
Fonts treatments are not rendered consistently 
across browsers
FONTS 
Font services can help add variety—use them for 
Headers and Subheads 
Design so the site won’t break if the desire...
FONTS 
Use font effects carefully 
• Modern browsers support many new treatments 
(CSS3) but older IE browsers don’t 
• To...
MOBILE FIRST 
50%+ using smartphone/tablet 
over desktop users 
Mobile devices outnumber PC/ 
Mac sales 
Mobile designs sh...
MOBILE FIRST 
When designing for mobile, keep in mind the core 
functionality of your site 
• what will the user need 
on ...
RESPONSIVE OR ADAPTIVE?
RESPONSIVE 
Responsive—adjusts the size of elements, it can be fluid, 
or not, and repositions them based on screen size
ADAPTIVE 
Adaptive also adjusts the size and repositions elements, 
and it changes what content is available based on the ...
WORDPRESS
CONTENT 
WordPress manages content in two ways: 
• static content—content 
that isn’t managed using 
WordPress, it’s held ...
THEMES 
WordPress uses a theme to create a specific look for 
the website—you are designing the theme 
Think of WordPress ...
THEMES 
A theme is a collection of templates and stylesheets 
There are a lot of pre-built themes available 
• some are fr...
TEMPLATES 
Templates manage the structure of pages, and provide 
page-level functionality
PLUGINS AND WIDGETS 
Plugins and widgets extend WordPress’ functionality 
• most are free, some are premium 
• they can ad...
POSTS 
Posts are used to add specific, dynamic, or time sensitive 
content to pages 
• custom post types 
give designers a...
PAGES 
Pages are a specialized form of post 
• prebuilt templates 
provide functionality 
and structure to the 
page
IMPLICATIONS FOR DESIGNERS
EXISTING THEME VS. CUSTOM 
Consider designing with an existing theme in mind 
• quality varies so before you start customi...
PREMIUM THEME SOURCES 
Select a theme from an established theme vendor— 
the code is solid and support is available 
Some ...
CUSTOM THEMES 
If your site is complex, and/or you need a lot of control over 
how content is displayed a custom theme wil...
TEMPLATES 
Control the number of templates 
• a change in page structure or functionality requires 
a new template 
• buil...
VARIETY 
Involve a WordPress 
developer early and often 
—they will help you 
understand: 
• when a new 
template is requi...
STYLE 
The stylesheet is used to customize a theme 
• plan how dynamic content will be styled 
• consider all the controls...
PLUGINS AND WIDGETS 
Know your plugins 
Design to their capabilities
≠ 
Snow Report Plugin 
GoTahoeNorth.com Design
THINGS TO WATCH OUT FOR
WHEN YOU DESIGN 
Think about the Navigation 
• show us how you want it to work 
• custom navigation is possible but expens...
WHEN YOU DESIGN 
Footers are often forgotten 
• a lot of info of secondary importance can be 
located in the footer 
• foo...
WHEN YOU DESIGN 
Provide a font hierarchy 
• Especially important when using a font service 
Test the design using the fon...
WHEN YOU DESIGN 
Think about how you want links to display 
• there are four states: resting, hover, active 
and visited 
...
WHEN YOU DESIGN 
Secondary and error 
pages need to be 
considered 
• 403 Forbidden, 
404 Not Found, 
Privacy Policy, 
etc...
WHEN YOU DESIGN 
Design the forms 
• keep plugin capabilities in mind 
• external connections to CRM or email services can...
WHEN YOU DESIGN 
Design the login screen—give yourself some credit
WHEN YOU DESIGN 
Please, please 
follow Photoshop 
best practices 
Read and follow 
the guidelines at 
Ps Etiquette
ASK EARLY, ASK OFTEN 
If in doubt, check with an experienced WordPress 
developer—there is almost always a solution
THANK YOU! 
Red8 Interactive 
San Francisco 
St. Louis 
James Hipkin 
james@red8interactive.com 
415.789.3685
Upcoming SlideShare
Loading in...5
×

WordPress for Designers

11,708

Published on

Published in: Internet, Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
11,708
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

WordPress for Designers

  1. 1. A DESIGNER’S GUIDE TO WORDPRESS WordCamp Toronto 2014
  2. 2. JAMES HIPKIN Started in traditional advertising Moved over to direct marketing Been involved with digital for over ten years Currently owner and Managing Director at Red8 Interactive
  3. 3. OVERVIEW What you need to know about websites The WordPress Content Management System (CMS) Implications for designers Things to watch out for
  4. 4. WEBSITES Understanding how websites are built makes building them easier (less expensive) using WordPress or any other technology
  5. 5. SOME BROAD POINTS Websites are integrated systems—a small change in one place can have a big impact in other, often unexpected places Design for mobile first Design for 72 dpi A change is never a “little thing”
  6. 6. STRUCTURE HTML is the framing—it uses “elements” to tell the browser what to display
  7. 7. STYLE CSS tells the browser how elements will be displayed
  8. 8. HTML and CSS work together to create both an aesthetic and functional end result
  9. 9. FONTS Web-safe fonts are, well, safe Fonts treatments are not rendered consistently across browsers
  10. 10. FONTS Font services can help add variety—use them for Headers and Subheads Design so the site won’t break if the desired font isn’t available
  11. 11. FONTS Use font effects carefully • Modern browsers support many new treatments (CSS3) but older IE browsers don’t • To achieve font effects in older IE browsers, shadows, glows, etc., we need to use images, which don’t scale, affect performance and aren’t SEO friendly • Design sites to degrade gracefully in IE browsers
  12. 12. MOBILE FIRST 50%+ using smartphone/tablet over desktop users Mobile devices outnumber PC/ Mac sales Mobile designs should not be an afterthought Share of U.S. Time Spent on Digital Media by Platform Source: comScore Media Metrix Multi-Platform Total Desktop Audience and Mobile Audience Age 18+ Date: June 2013
  13. 13. MOBILE FIRST When designing for mobile, keep in mind the core functionality of your site • what will the user need on each device? Design for hand position Use a 12-column grid Keep it simple
  14. 14. RESPONSIVE OR ADAPTIVE?
  15. 15. RESPONSIVE Responsive—adjusts the size of elements, it can be fluid, or not, and repositions them based on screen size
  16. 16. ADAPTIVE Adaptive also adjusts the size and repositions elements, and it changes what content is available based on the device (break points)
  17. 17. WORDPRESS
  18. 18. CONTENT WordPress manages content in two ways: • static content—content that isn’t managed using WordPress, it’s held within the HTML • dynamic content—content that is managed by WordPress, it’s held in a database
  19. 19. THEMES WordPress uses a theme to create a specific look for the website—you are designing the theme Think of WordPress as the operating system, and the theme is the software that determines how the site looks, and what and where content is displayed
  20. 20. THEMES A theme is a collection of templates and stylesheets There are a lot of pre-built themes available • some are free, and some are premium • some are good, and some, not so much… A custom theme gives you the greatest flexibility, will make the site unique, and performs better
  21. 21. TEMPLATES Templates manage the structure of pages, and provide page-level functionality
  22. 22. PLUGINS AND WIDGETS Plugins and widgets extend WordPress’ functionality • most are free, some are premium • they can add functionality easily and quickly • they can also add bloat, affect performance, and impact security
  23. 23. POSTS Posts are used to add specific, dynamic, or time sensitive content to pages • custom post types give designers a lot of flexibility and control
  24. 24. PAGES Pages are a specialized form of post • prebuilt templates provide functionality and structure to the page
  25. 25. IMPLICATIONS FOR DESIGNERS
  26. 26. EXISTING THEME VS. CUSTOM Consider designing with an existing theme in mind • quality varies so before you start customizing, have your developer check it out to be sure it’s stable and supported
  27. 27. PREMIUM THEME SOURCES Select a theme from an established theme vendor— the code is solid and support is available Some to consider: • Studio Press • iThemes • Elegant Themes • Woo Themes
  28. 28. CUSTOM THEMES If your site is complex, and/or you need a lot of control over how content is displayed a custom theme will be required Custom themes also tend to be lighter, which improves performance
  29. 29. TEMPLATES Control the number of templates • a change in page structure or functionality requires a new template • build wireframes first
  30. 30. VARIETY Involve a WordPress developer early and often —they will help you understand: • when a new template is required • how to create a variety using Custom Post Types, Hooks, Filters and styles
  31. 31. STYLE The stylesheet is used to customize a theme • plan how dynamic content will be styled • consider all the controls on the visual editor and provide style direction The Wordpress visual editor
  32. 32. PLUGINS AND WIDGETS Know your plugins Design to their capabilities
  33. 33. ≠ Snow Report Plugin GoTahoeNorth.com Design
  34. 34. THINGS TO WATCH OUT FOR
  35. 35. WHEN YOU DESIGN Think about the Navigation • show us how you want it to work • custom navigation is possible but expensive • mobile navigation should push content over or down
  36. 36. WHEN YOU DESIGN Footers are often forgotten • a lot of info of secondary importance can be located in the footer • footers need design love too!
  37. 37. WHEN YOU DESIGN Provide a font hierarchy • Especially important when using a font service Test the design using the fonts in the hierarchy
  38. 38. WHEN YOU DESIGN Think about how you want links to display • there are four states: resting, hover, active and visited • no hover on mobile, just say’n • give links and action buttons enough space to be practical on mobile devices
  39. 39. WHEN YOU DESIGN Secondary and error pages need to be considered • 403 Forbidden, 404 Not Found, Privacy Policy, etc.
  40. 40. WHEN YOU DESIGN Design the forms • keep plugin capabilities in mind • external connections to CRM or email services can dictate form structure
  41. 41. WHEN YOU DESIGN Design the login screen—give yourself some credit
  42. 42. WHEN YOU DESIGN Please, please follow Photoshop best practices Read and follow the guidelines at Ps Etiquette
  43. 43. ASK EARLY, ASK OFTEN If in doubt, check with an experienced WordPress developer—there is almost always a solution
  44. 44. THANK YOU! Red8 Interactive San Francisco St. Louis James Hipkin james@red8interactive.com 415.789.3685
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×