1.
Rapid Prototyping with
WordPress Page Builders
WordCamp Asheville 2016 • #wcavl • @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 • is a theme

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

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

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

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

23.
cons: fewer default components • more effort first time • has theme for $100

24.
Preparation
before digging into prototyping

25.
install Divi theme

26.
Divi theme

27.
for BB, pick any theme and make sure it’s responsive (MH Edition Lite)

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

29.
One-Click Child Theme

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

31.
name your child theme

32.
voila

33.
WP Add Custom CSS (& BB Pro)
for Beaver Builder

34.
for BB, you need the plugin • also recommend WP Add Custom CSS

35.
review your theme

36.
check the editor area

37.
install WP Add Custom CSS plugin

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

39.
modify CSS as needed

40.
review changes • note Beaver Builder defaults to max width

41.
optionally change per row

42.
Other Global Customizations

43.
Divi options

44.
Divi CSS editor

45.
Beaver Builder options (not really needed)

46.
Beaver Builder options (not really needed)

47.
Live Demo!

48.
Process Examples

49.
inventory existing and needed components with clients and users

50.
consolidate into a core component library with optional parts

51.
skip wireframing • prototype with your library

52.
brand your library

53.
communicate better • get better feedback

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