This document discusses how to create responsive prototypes using WordPress and atomic UI libraries instead of flat mockups. It recommends using Divi or Beaver Builder theme frameworks to build prototypes with real components that work across devices without having to create multiple versions. Prototypes created this way can feel more realistic and allow clients to provide better feedback than static mockups. The document provides tips for preparing, customizing and demonstrating the prototyping process.

1. Responsive Prototyping with
WordPress and Atomic UI Libraries
Chicago Web Professionals • @anthonydpaul

2. https://www.youtube.com/watch?v=aXV-yaFmQNk

3. I want to show my concept to clients or users

4. flat mockups (sketches, Sketch, Photoshop, etc.) or paper • okay for early ideas

5. not responsive • need multiple sizes

6. don’t feel real • you get the wrong feedback

7. Flat concepts are barely work today. How will they keep up with the future?

8. Apple Watch

9. John Underkoffler of Oblong Industries (immersive displays)

10. Flat prototypes don’t
work anymore.
(They require ‘splaining.)

11. Just as help files are a
bandaid for usability…
Annotations are a bandaid
for clear communication.
Show, don’t tell.

12. A code prototype would be best, but…
I’m not a developer.
Coding would take longer than a mockup.

13. Anthony D Paul
User Experience Researcher and Designer
@anthonydpaul

14. The truth is…
Easy/Fast enough to be disposable
Avoids multiple device versions
Gains equity over time (your own library)
Can allow real content without resizing everything
Can (optionally) go into production

15. Any theme framework
will work.

16. Divi
Beaver Builder

17. Divi • elegantthemes.com • $69/year

18. pros: more components • easier to start

19. cons: not client friendly (abstract) • poor mobile admin • harder to style globally

20. pros: front-end editing (intuitive) • works with any theme • regular updates

21. Beaver Builder • wpbeaverbuilder.com • $99/year, $199/year (free “lite”)

22. pros: front-end editing (intuitive) • works with any theme • easier to brand later

23. pros: mobile admin works if needed • has dev docs for custom components

24. cons: fewer default components • has theme for $100 • known AWS bug

25. Preparation
before digging into prototyping

26. install either theme

27. preview theme (default WP sidebar layout)

28. optionally pick any theme and make sure it’s responsive (MH Edition Lite)

29. for both, I’d recommend making a child theme

30. One-Click Child Theme

31. install One-Click Child Theme (or similar)

32. name your child theme

33. voila

34. WP Add Custom CSS

35. install WP Add Custom CSS plugin

36. use inspector to get classes and IDs • ideally entire body

37. modify CSS as needed

38. Row Widths

39. review changes • note plugins often default to defined width

40. optionally change per row

41. Other Global Customizations

42. Divi options

43. Divi CSS editor

44. Beaver Builder options (not really needed)

45. Beaver Builder options (not really needed)

46. Live Demo!

47. Process Examples

48. inventory existing and needed components with clients and users

49. consolidate into a core component library with optional parts

50. skip wireframing • prototype with your library

51. brand your library

52. communicate better • get better feedback

53. SlideShare
http://www.slideshare.net/anthonydpaul
past videos
http://wordpress.tv/speakers/anthony-d-paul/
(my talks and blog)
http://adp.rocks or http:// .ws or http:// .ws
Thank you
@anthonydpaul