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 - UXCamp DC 2016

2,689 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

×