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

How to work faster by building your design systems with Webflow - No Code Conf 2019 Workshop

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Próximo SlideShare
Software testing Basic
Software testing Basic
Cargando en…3
×

Eche un vistazo a continuación

1 de 11 Anuncio

Más Contenido Relacionado

Similares a How to work faster by building your design systems with Webflow - No Code Conf 2019 Workshop (20)

Más de Webflow (20)

Anuncio

Más reciente (20)

How to work faster by building your design systems with Webflow - No Code Conf 2019 Workshop

  1. 1. HOW TO WORK FASTER BY BUILDING YOUR DESIGN SYSTEMS WITH WEBFLOW @ransegall
  2. 2. 1 Give You a Process That will speed up your workflow & make your work more efficient TODAY’S GOALS @ransegall 2 Get You To Experience It So that you’ll feel comfortable applying it on your next project
  3. 3. 1 Learn the Process15 Minutes TODAY’S AGENDA @ransegall 2 Practice 30 Minutes 3 Review Work & Questions15 Minutes
  4. 4. Demo So What’s a Webflow Design System / Style Guide @ransegall
  5. 5. Why Use a Style Guide? •Once it’s setup - building is much faster •Reuse components easily •Make global changes easily •Central location to visually see all main styles / components •PS - this also makes sense to create in your design software @ransegall
  6. 6. What Should Be Included? •Typographic elements (Titles, headers, body, links..) •Button types •Colors •Grid (containers, columns, layouts) •Repeatable components (FAQs, Team bios, post/article) - including their interactions •Popups / Modals interactions @ransegall
  7. 7. How To Style the Elements? •Whenever possible - style native HTML Tag •Use only Global Colors •Never leave default names - always be clear •Start from the “global” use-case, than narrow to the specific use-cases @ransegall
  8. 8. @ransegall THE PROCESS
  9. 9. The Steps 1. Create the style guide in your design software - make sure elements have style names to keep consistency / future updates easy 2. From Atoms to Organisms: start with basic HTML tags (type & links), and then build the more complex components 3. Create a task list of all elements you need to rebuild - don’t forget layout & interactions. 4. Create a new project & load fonts 5. Create the style guide page @ransegall
  10. 10. @ransegall LET’S PRACTICE
  11. 11. @ransegall QUESTIONS?

×