Rapid Prototyping withWordPress Page Builders

WordCamp Asheville 2016 • #wcavl • @anthonydpaul

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

I want to show my concept to clients or users

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

not responsive • need multiple sizes

don’t feel real • you get the wrong feedback

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

Apple Watch

John Underkoffler of Oblong Industries (immersive displays)

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

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

A code prototype would be best, but…I’m not a developer.

Coding would take longer than a mockup.

Anthony D PaulDirector of User Experience

@anthonydpaul

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

Any theme framework will work.

Divi

Beaver Builder

Divi • elegantthemes.com • $69/year

pros: more components • easier to start • is a theme

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

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

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

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

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

Preparationbefore digging into prototyping

install Divi theme

Divi theme

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

for both, I’d recommend making a child theme

One-Click Child Theme

install One-Click Child Theme (or similar)

name your child theme

voila

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

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

review your theme

check the editor area

install WP Add Custom CSS plugin

use inspector to get classes and IDs • ideally entire body

modify CSS as needed

review changes • note Beaver Builder defaults to max width

optionally change per row

Other Global Customizations

Divi options

Divi CSS editor

Beaver Builder options (not really needed)

Beaver Builder options (not really needed)

Live Demo!

Process Examples

inventory existing and needed components with clients and users

consolidate into a core component library with optional parts

skip wireframing • prototype with your library

brand your library

communicate better • get better feedback

SlideSharehttp://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