Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

No code stewardship - No Code Conf 2019 Demo Theater


Eche un vistazo a continuación

1 de 29 Anuncio

Más Contenido Relacionado

Presentaciones para usted (20)

Similares a No code stewardship - No Code Conf 2019 Demo Theater (20)


Más de Webflow (20)

Más reciente (20)


No code stewardship - No Code Conf 2019 Demo Theater

  1. 1. No Code Stewardship
  2. 2. No Code Uses a visual development environment. Relies on UX to build websites. (Webflow.) Yes Code Uses a syntactic markup environment. Requires typing code to build websites. (Traditional.)
  3. 3. Avoiding The Yes Code Marriage
  4. 4. Avoiding The Yes Code Marriage Not gonna end well :(
  5. 5. • We need a new landing page for a marketing campaign but just with a slightly different headline. • Can we move the CTA higher up on the home page? • Suzy was downsized… can we remove all traces of Suzy? • And since we’re already making changes, can we… Customer Requests
  6. 6. Now :) :( The joy of accommodating small changes LaterEnd of honeymoon
  7. 7. Empowering the client! Enter: No Code Software
  8. 8. You can probably just do that yourself, Jerald in Marketing.
  9. 9. Not so fast! No Code can actually be just as obtuse as Yes Code, bro.
  10. 10. Not so fast! No Code can actually be just as obtuse as Yes Code, bro.
  11. 11. Wait. What? • Div 134, Div 199, Div 226, Div 394 • Cat Photo Wrapper div contains photo of dog • Divs nested 10^156 deep • No sections?>???
  12. 12. “With Great power comes great responsibility.” —Stan Lee
  13. 13. Webflow makes it simple to build & to hand off a project.
 But as designers, we’re responsible for the project’s long-term usability.
  14. 14. A good steward of No Code is always thinking backward from the client hand-off.
  15. 15. 6 Principles of No Code Stewardship
  16. 16. 1. Simplicity • Think broad-to-specific. Cascade styles wherever possible, beginning with global elements & using classes to define exceptions. • Strive to achieve your look & feel by declaring as few styles as possible.
  17. 17. Simplicity Example Declaring a base font at Body (All Pages) means you won’t have to declare that same style over & over across the project.
  18. 18. 2. Self-Evidence • Strive to make your build as self-evident as possible, which might mean avoiding unnecessarily complex nestings or obscure, shorthand naming conventions. • The simplest way to solve a problem is nearly always the best way, even if that requires a little more thought or effort.
  19. 19. 3. Modularity • So much time can be saved and simplicity achieved by thinking modularly. This may mean stringing together Utility Classes to create commonly used looks or behaviors, or decoupling interaction classes from style classes. • Always use sections.
  20. 20. Modularity Example A A class like “Sales Page Intro Copy Wrapper,” which might only serve to center the copy, could simply be named “Center” and reused across the site.
  21. 21. Modularity Example B An interaction, such as a Parallax effect, can be applied to unstyled classes like “Parallax - Layer 1” and “Parallax - Layer 2”, which can be appended over and over to any element that needs the effect.
  22. 22. 4. Intuition Where possible, use pseudo-classes in HTML Embeds to automatically style elements like CTAs or bulleted lists, making them behave as intuitively as possible.
  23. 23. Intuition Example An arrow could be manually added to a CTA with a span, but a pseudo element will apply the style automatically.
  24. 24. 5. Systems Try to solve display issues with content. The integrity of the design system should supersede a specific piece of outlying content.
  25. 25. Systems Example If a headline style works across 9 pages, but wraps funny in 1 instance, it might make more sense to edit the headline copy than to create a new headline style as an exception.
  26. 26. 6. Polish In the heat of the moment, the best way to figure out how to build a complex component might be to experiment with a bunch of unnamed divs in order to find the best approach. But after the component is built, it’s important to simplify and rename. The effort it takes to refactor in the near term will be earned back over time.
  27. 27. No Code has to mean more than simply allowing designers to create quick and dirty builds. The moral pt 1
  28. 28. Thinking past quick / easy can mean empower our clients to control their own destiny. The moral pt 2 (Leaving you more time to read comic books.)
  29. 29. Fin