Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Optimiser son workflow frontend

Optimiser son workflow frontend

Quelles sont les différents outils que nous pouvons mettre en place pour mieux collaborer avec les membres de notre projet ?
Comment construire une architecture CSS modulaire ?

https://www.youtube.com/watch?v=nWWslZboeEE

Louis Chenais

May 18, 2016
Tweet

More Decks by Louis Chenais

Other Decks in Design

Transcript

  1. Pourquoi cette présentation ? Suite de mon article publié en

    février concernant différents headers à implémenter.
 => 4 Responsive Navigation Principles
  2. À QUI m’adrÉsse-je ? Principalement aux développeurs et aux designers

    curieux de mieux collaborer avec les membres de leur projet et d’automatiser leur workflow.
  3. Se partager le travail Credits : Tom Maslen, Testing &

    Debugging Responsive Web Design from Smashing Book 5
  4. C’est se parler, se comprendre et mettre en place les

    méthodes et les outils basés sur cette compréhension. En tant que développeur Front-End je me dois de comprendre comment travaillent les designers et les autres développeurs du projet.
  5. KÉzako le styleguide ? Un styleguide est un guide de

    design pour un projet donné. Il va aider les différents contributeurs à rester dans le même chemin et à construire un produit le plus homogène possible.
  6. Identité de marque Vocabulaire commun Ton & Voix Librairie de

    modules Code Anatomie d’un styleguide http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand
  7. Identité de marque Son but : établir un guide d’utilisation

    des principaux composants de la marque Destinataires : toute personne susceptible de communiquer au nom de la marque Peut inclure : logo, typographies, charte graphique, documents, templates, etc…
  8. Vocabulaire commun Son but : établir un langage commun pour

    un expérience utilisateur homogène sur l’ensemble des produits et services de la marque Destinataires : toute personne susceptible de créer une expérience utilisateur au nom de la marque Peut inclure : principes de design, esthétique globale, principes d’UX, type d’animation… (ex : Material Design)
  9. Ton & Voix Son but : établir et encourage un

    ton homogène et approprié à travers l’ensemble des produits et services de la marque Destinataires : toute personne susceptible de créer du contenu écrit pour la marque Peut inclure : marketing, documentation, blog post, CGU/CGV, alertes, conventions de rédaction…
  10. code Son but : établir des conventions pour les développeurs

    afin de créer un code performant, cohérent et maintenable Destinataires : toute personne susceptible de développer pour la marque Peut inclure : conventions de développement, structure HTML, CSS architecture, HTML/CSS/JS Styleguides…
  11. librairie de modules Son but : établir/maintenir un système de

    composants pour des UI cohérentes et accélérer la production Destinataires : toute personne susceptible de toucher aux projets de la marque Peut inclure : modules globaux, typography, blocs de navigation, objet media, animations, littéralement tout ce que l’on inclue dans une interface
  12. 74% des internautes quitteront un site mobile s’il met plus

    de 5s à charger https://kinsta.com/learn/page-speed/
  13. Pourquoi ? Spécificité du CSS difficile à maîtriser CSS difficile

    à scale si mal organisé CSS rapidement hétérogène du fait qu’il soit un langage accessible
  14. À connaître Flexbox Module Responsive Typography SVG Responsive Design Patterns

    & Components ARIA (Accessible Rich Internet Application)
  15. « If I had to choose between making something my

    problem or the user’s problem i’ll choose to make it mine every time » - Jeremy Keith, Web Developper