Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Responsive Prototyping
with WordPress
Anthony D Paul
UXCamp DC 2016 • Washington, DC
Preparation
before digging into prototyping
remove tagline
create pages
set static page as homepage
choose a better URL structure
remove default sidebar widgets
for Beaver Builder, install both the theme and plugin
use “One-Click Child Theme” if you’d like to edit a theme
Framework:
Divi ($69)
http://www.elegantthemes.com/gallery/divi/
Divi is an abstraction of a page but has more out-of-the-box components
fine-tune any row, column, or component
override CSS natively in the theme options
Framework:
Beaver Builder ($199)
https://www.wpbeaverbuilder.com
Beaver Builder is a front-end editor with similar drag/drop library
fine-tune any row, column, or component
has nice developer docs for creating custom components
Collaborative Sketching
with Google Slides
video: http://is.gd/1ofc9h • slides: http://is.gd/vNfkV2
for initial sketches, see my previous talk on using Google Slides
Remote Unmoderated Usability Tests
with TryMyUI ($35 per)
http://trymyui.com
a budget-friendly service to use your prototype in usability tests
Anthony D Paul
Director of User Experience
@anthonydpaul • http://adp.rocks or http:// .ws
Upcoming SlideShare
Loading in …5
×

Responsive Prototyping with WordPress - UXCamp DC 2016

2,682 views

Published on

Sometimes a static InVision prototype isn't enough for a usability test and creating multiple sizes of prototypes to run desktop versus mobile can feel like a waste of time. In this talk, I show non-developers how to use WordPress as a means of quickly and easily creating responsive prototypes to usability test across all devices with one, live prototype.

Published in: Design

Responsive Prototyping with WordPress - UXCamp DC 2016

  1. 1. Responsive Prototyping with WordPress Anthony D Paul UXCamp DC 2016 • Washington, DC
  2. 2. Preparation before digging into prototyping
  3. 3. remove tagline
  4. 4. create pages
  5. 5. set static page as homepage
  6. 6. choose a better URL structure
  7. 7. remove default sidebar widgets
  8. 8. for Beaver Builder, install both the theme and plugin
  9. 9. use “One-Click Child Theme” if you’d like to edit a theme
  10. 10. Framework: Divi ($69) http://www.elegantthemes.com/gallery/divi/
  11. 11. Divi is an abstraction of a page but has more out-of-the-box components
  12. 12. fine-tune any row, column, or component
  13. 13. override CSS natively in the theme options
  14. 14. Framework: Beaver Builder ($199) https://www.wpbeaverbuilder.com
  15. 15. Beaver Builder is a front-end editor with similar drag/drop library
  16. 16. fine-tune any row, column, or component
  17. 17. has nice developer docs for creating custom components
  18. 18. Collaborative Sketching with Google Slides video: http://is.gd/1ofc9h • slides: http://is.gd/vNfkV2
  19. 19. for initial sketches, see my previous talk on using Google Slides
  20. 20. Remote Unmoderated Usability Tests with TryMyUI ($35 per) http://trymyui.com
  21. 21. a budget-friendly service to use your prototype in usability tests
  22. 22. Anthony D Paul Director of User Experience @anthonydpaul • http://adp.rocks or http:// .ws

×