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.

Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - feb 15, 2017 - Chicago Web Professionals Meetup


Published on

Put down that design tool! We typically turn toward graphic tools like Sketch for wireframing, then export into a presenter like InVision for usability tests. We try our darndest to get the menu functionality to “appear” like code, to fake responsive design, and to audit every hotspot linking to every screenshot. The irony is, we spend more time trying to get non-code looking like code than if we’d used code.

But wait, I’m not a dev! That’s cool. I’ve got you covered. Attendees will be given live demos of existing responsive frameworks, learn how to customize them, and walk away with a foundation for creating their own code prototyping kit (without needing to know how to code). This talk is written for information architects, UI/UX designers, product leads, and researchers.

What you’ll learn:

• How to use WordPress to create a content-managed prototype, regardless of what you intend to build your final site in;

• Which UI frameworks are cheapest and easiest to “wireframe” with, code-free; and

• Why this approach is simpler than many of your sketching tools, arriving at a better and more testable IA/content prototype more quickly.

Anthony is a UX researcher and designer at GE Transportation, creating web applications and data visualizations for the US railroad industry. Outside the office, you’ll find him spread across regional meetups and conferences—evangelizing IA/UX, accessibility, and a variety of open source dev projects. He’d divulge something funny from his past, but these days the Internet does a better job of surfacing our embarrassing moments; find him anywhere by Googling “anthonydpaul”.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Responsive Prototyping with WordPress and Atomic UI Libraries - anthonydpaul - feb 15, 2017 - Chicago Web Professionals Meetup

  1. 1. Responsive Prototyping with WordPress and Atomic UI Libraries Chicago Web Professionals • @anthonydpaul
  2. 2.
  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 User Experience Researcher and Designer @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 • • $69/year
  18. 18. pros: more components • easier to start
  19. 19. cons: not client friendly (abstract) • poor mobile admin • harder to style globally
  20. 20. pros: front-end editing (intuitive) • works with any theme • regular updates
  21. 21. Beaver Builder • • $99/year, $199/year (free “lite”)
  22. 22. pros: front-end editing (intuitive) • works with any theme • easier to brand later
  23. 23. pros: mobile admin works if needed • has dev docs for custom components
  24. 24. cons: fewer default components • has theme for $100 • known AWS bug
  25. 25. Preparation before digging into prototyping
  26. 26. install either theme
  27. 27. preview theme (default WP sidebar layout)
  28. 28. optionally pick any theme and make sure it’s responsive (MH Edition Lite)
  29. 29. for both, I’d recommend making a child theme
  30. 30. One-Click Child Theme
  31. 31. install One-Click Child Theme (or similar)
  32. 32. name your child theme
  33. 33. voila
  34. 34. WP Add Custom CSS
  35. 35. install WP Add Custom CSS plugin
  36. 36. use inspector to get classes and IDs • ideally entire body
  37. 37. modify CSS as needed
  38. 38. Row Widths
  39. 39. review changes • note plugins often default to defined width
  40. 40. optionally change per row
  41. 41. Other Global Customizations
  42. 42. Divi options
  43. 43. Divi CSS editor
  44. 44. Beaver Builder options (not really needed)
  45. 45. Beaver Builder options (not really needed)
  46. 46. Live Demo!
  47. 47. Process Examples
  48. 48. inventory existing and needed components with clients and users
  49. 49. consolidate into a core component library with optional parts
  50. 50. skip wireframing • prototype with your library
  51. 51. brand your library
  52. 52. communicate better • get better feedback
  53. 53. SlideShare past videos (my talks and blog) or http:// .ws or http:// .ws Thank you @anthonydpaul