Put down that design tool! We typically turn toward graphic tools like Sketch for wireframing, then export into a presenter like InVision for usability tests. We try our darndest to get the menu functionality to “appear” like code, to fake responsive design, and to audit every hotspot linking to every screenshot. The irony is, we spend more time trying to get non-code looking like code than if we’d used code. But wait, I’m not a dev! That’s cool. I’ve got you covered. Attendees will be given live demos of existing responsive frameworks, learn how to customize them, and walk away with a foundation for creating their own code prototyping kit (without needing to know how to code). This talk is written for information architects, UI/UX designers, product leads, and researchers. What you’ll learn: • How to use WordPress to create a content-managed prototype, regardless of what you intend to build your final site in; • Which UI frameworks are cheapest and easiest to “wireframe” with, code-free; and • Why this approach is simpler than many of your sketching tools, arriving at a better and more testable IA/content prototype more quickly.

1. Responsive Prototyping with
WordPress and Atomic UI Libraries
edUi 2016 • #eduiconf • @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
Director of User Experience
@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