rapid prototyping with wordpress page builders - wordcamp asheville 2016 - anthonydpaul
TRANSCRIPT
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