responsive prototyping with wordpress and atomic ui libraries - anthonydpaul - feb 15, 2017 -...
TRANSCRIPT
Responsive Prototyping with WordPress and Atomic UI Libraries
Chicago Web Professionals • @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 PaulUser Experience Researcher and Designer
@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
cons: not client friendly (abstract) • poor mobile admin • harder to style globally
pros: front-end editing (intuitive) • works with any theme • regular updates
Beaver Builder • wpbeaverbuilder.com • $99/year, $199/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 • has theme for $100 • known AWS bug
Preparationbefore digging into prototyping
install either theme
preview theme (default WP sidebar layout)
optionally 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
install WP Add Custom CSS plugin
use inspector to get classes and IDs • ideally entire body
modify CSS as needed
Row Widths
review changes • note plugins often default to defined 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
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