53
Responsive Prototyping with WordPress and Atomic UI Libraries edUi 2016 #eduiconf @anthonydpaul

Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

Embed Size (px)

Citation preview

Page 1: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

Responsive Prototyping with WordPress and Atomic UI Libraries

edUi 2016 • #eduiconf • @anthonydpaul

Page 2: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

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

Page 3: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

I want to show my concept to clients or users

Page 4: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

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

Page 5: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

not responsive • need multiple sizes

Page 6: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

don’t feel real • you get the wrong feedback

Page 7: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

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

Page 8: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

Apple Watch

Page 9: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

John Underkoffler of Oblong Industries (immersive displays)

Page 10: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

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

Page 11: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

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

Page 12: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

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

Coding would take longer than a mockup.

Page 13: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

Anthony D PaulDirector of User Experience

@anthonydpaul

Page 14: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

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

Page 15: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

Any theme framework will work.

Page 16: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

Divi

Beaver Builder

Page 17: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

Divi • elegantthemes.com • $69/year

Page 18: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

pros: more components • easier to start

Page 19: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

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

Page 20: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

pros: front-end editing (intuitive) • works with any theme • regular updates

Page 21: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

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

Page 22: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

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

Page 23: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

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

Page 24: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

cons: fewer default components • has theme for $100 • known AWS bug

Page 25: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

Preparationbefore digging into prototyping

Page 26: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

install either theme

Page 27: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

preview theme (default WP sidebar layout)

Page 28: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

optionally pick any theme and make sure it’s responsive (MH Edition Lite)

Page 29: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

for both, I’d recommend making a child theme

Page 30: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

One-Click Child Theme

Page 31: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

install One-Click Child Theme (or similar)

Page 32: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

name your child theme

Page 33: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

voila

Page 34: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

WP Add Custom CSS

Page 35: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

install WP Add Custom CSS plugin

Page 36: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

use inspector to get classes and IDs • ideally entire body

Page 37: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

modify CSS as needed

Page 38: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

Row Widths

Page 39: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

review changes • note plugins often default to defined width

Page 40: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

optionally change per row

Page 41: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

Other Global Customizations

Page 42: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

Divi options

Page 43: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

Divi CSS editor

Page 44: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

Beaver Builder options (not really needed)

Page 45: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

Beaver Builder options (not really needed)

Page 46: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

Live Demo!

Page 47: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

Process Examples

Page 48: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

inventory existing and needed components with clients and users

Page 49: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

consolidate into a core component library with optional parts

Page 50: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

skip wireframing • prototype with your library

Page 51: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

brand your library

Page 52: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

communicate better • get better feedback

Page 53: Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - edUi 2016 Charlottesville VA

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