Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Rapid Prototyping with WordPress 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 Paul Director of User Experience @anthonydpaul
The truth is… Easy/Fast enough to be disposable Avoids multiple device versions Gains equity over time (your own library) ...
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
Preparation before 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
SlideShare http://www.slideshare.net/anthonydpaul WordPress.tv http://wordpress.tv/speakers/anthony-d-paul/ (my talks and ...
Upcoming SlideShare
Loading in …5
×

Rapid Prototyping with WordPress Page Builders - WordCamp Asheville 2016 - anthonydpaul

635 views

Published on

There are many popular page builders out there—CornerStone, Beaver Builder, Site Origin’s “Page Builder,” Velocity Page, Themify, Divi, and more. Some are free. Others have multiple price tiers. This session won’t get into the ins and outs of which are best for production code, but I’ll demo a couple I’ve found helpful for quick turnaround projects.

In this talk, I’ll take a couple of my favorite page builders and show you why I like them, why I feel they’re good for your clients, and how to use them as a foundation for your own UI prototyping library.

Take aways:

• The benefits of using theme builders outside of the typical development process.
• How to get started and what to focus on.
• How to build a reusable toolkit to save time on future projects.

Published in: Design
no profile picture user

  • Be the first to comment

  • Be the first to like this

Rapid Prototyping with WordPress Page Builders - WordCamp Asheville 2016 - anthonydpaul

  1. 1. Rapid Prototyping with WordPress Page Builders WordCamp Asheville 2016 • #wcavl • @anthonydpaul
  2. 2. https://www.youtube.com/watch?v=aXV-yaFmQNk
  3. 3. I want to show my concept to clients or users
  4. 4. flat mockups (sketches, Sketch, Photoshop, etc.) or paper • okay for early ideas
  5. 5. not responsive • need multiple sizes
  6. 6. don’t feel real • you get the wrong feedback
  7. 7. Flat concepts are barely work today. How will they keep up with the future?
  8. 8. Apple Watch
  9. 9. John Underkoffler of Oblong Industries (immersive displays)
  10. 10. Flat prototypes don’t work anymore. (They require ‘splaining.)
  11. 11. Just as help files are a bandaid for usability… Annotations are a bandaid for clear communication. Show, don’t tell.
  12. 12. A code prototype would be best, but… I’m not a developer. Coding would take longer than a mockup.
  13. 13. Anthony D Paul Director of User Experience @anthonydpaul
  14. 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. 15. Any theme framework will work.
  16. 16. Divi Beaver Builder
  17. 17. Divi • elegantthemes.com • $69/year
  18. 18. pros: more components • easier to start • is a theme
  19. 19. cons: not client friendly (abstract) • no mobile admin • harder to style globally
  20. 20. Beaver Builder • wpbeaverbuilder.com • $99/year (free “lite”)
  21. 21. pros: front-end editing (intuitive) • works with any theme • easier to brand later
  22. 22. pros: mobile admin works if needed • has dev docs for custom components
  23. 23. cons: fewer default components • more effort first time • has theme for $100
  24. 24. Preparation before digging into prototyping
  25. 25. install Divi theme
  26. 26. Divi theme
  27. 27. for BB, pick any theme and make sure it’s responsive (MH Edition Lite)
  28. 28. for both, I’d recommend making a child theme
  29. 29. One-Click Child Theme
  30. 30. install One-Click Child Theme (or similar)
  31. 31. name your child theme
  32. 32. voila
  33. 33. WP Add Custom CSS (& BB Pro) for Beaver Builder
  34. 34. for BB, you need the plugin • also recommend WP Add Custom CSS
  35. 35. review your theme
  36. 36. check the editor area
  37. 37. install WP Add Custom CSS plugin
  38. 38. use inspector to get classes and IDs • ideally entire body
  39. 39. modify CSS as needed
  40. 40. review changes • note Beaver Builder defaults to max width
  41. 41. optionally change per row
  42. 42. Other Global Customizations
  43. 43. Divi options
  44. 44. Divi CSS editor
  45. 45. Beaver Builder options (not really needed)
  46. 46. Beaver Builder options (not really needed)
  47. 47. Live Demo!
  48. 48. Process Examples
  49. 49. inventory existing and needed components with clients and users
  50. 50. consolidate into a core component library with optional parts
  51. 51. skip wireframing • prototype with your library
  52. 52. brand your library
  53. 53. communicate better • get better feedback
  54. 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

×