Entre design et développement
Living styleguide
--
Communiquer et parler le même langage entre designers et développeurs est primordiale pour concevoir efficacement une interface. Nous voyons aujourd’hui de plus en plus de startups ou entreprises qui internalisent la création et le design plutôt que de faire appel à des prestataires externes, et ce n’est pas une coïncidence.
Le problème majeure dans le développement d’interface est l’incompréhension entre designers et développeurs qui ont chacun des problématiques différentes. Les designers, dans un contexte responsive, vont réaliser plusieurs visuels pour des tailles d’écrans différentes et les enverront aux développeurs. Ces derniers vont commencer l’intégration à partir de ces visuels et développer l’interface page par page. Sans un minimum de méthode et de communication entre designers et développeurs, faire évoluer le design de l’application peut rapidement devenir un cauchemar si les fondations ne sont pas pensées de manière intelligible, maintenable et si les composants ne sont pas réutilisables. Cette négligence peut avoir des conséquences lourdes et conduire à une maintenabilité altérée du code et à la mort du produit.
Avec la complexification des interfaces web, le développement front-end a vu émerger des patterns et architectures inspirés du développement informatique qui ont fait leur preuves par le passé. Aujourd’hui, un bon design d’interface n’est plus seulement un design cohérent visuellement avec une bonne direction artistique. Le design d’une interface doit être intelligemment pensé à toutes les étapes de sa conception. Pour que votre produit soit performant dans le temps, il est donc primordial que son architecture technique soit maintenable sur le long terme sans que l’équipe de production s’arrache les cheveux à chaque évolutions. Il faut aussi que la phase de conception colle avec les caractéristiques technique de l’application au niveau responsive. Les designers et développeurs doivent se mettre d’accord sur l’approche de conception (mobile-first, desktop-first…), ainsi que sur les différents breakpoints de l’application afin de concevoir le produit avec les mêmes dimensions de bout en bout.
Suite à la confrontation de ces différents problèmes, mes recherches et réflexions se sont portées sur la mise en place d’un workflow front efficace et global, allant de la phase de design et direction artistique jusqu’au développement de l’interface et son architecture. Le but : pouvoir se concentrer sur l’amélioration continu de l’interface sur le long terme et dégager du temps pour des tests utilisateurs et recherches d’UX. Le point central est la mise en place d’un “living styleguide” dans l’application.
Qu’est ce qu’un living styleguide ?
Un styleguide est à la base un document créé par les designers afin de documenter le langage visuel du projet, assurer la cohérence de l’identité, et garder l’interface aussi logique que possible.
L’intérêt de ces documents s’est vite démontré dans le découpage d’une interface en différents composants réutilisables afin d’organiser la base de code le plus maintenable possible.
Ce styleguide peut être transformé en “living front-end styleguide” : un document dans l’application qui documente l’identité du produit, les règles de son langage visuel, ainsi que tout ses composants.
Cette pratique permet une itération naturelle entre designer et développeur et incite toute l’équipe de production à concevoir ensemble l’interface.
Avantages
Développement modulaire
Qui dit living styleguide, dit développement modulaire de l’interface. C’est le principe même de ce workflow, on va venir découper l’interface en différents composants que l’on viendra extraire des vues de l’application. Le living styleguide incite ce process afin de pouvoir réutiliser nos composants et les documenter dans notre styleguide.
Cohérence globale
Autre gros avantage, assurer la cohérence de nos composants et de notre interface globale. Si les composants sont extraits et réutilisés, ils auront les mêmes styles peu importe les vues dans lesquels ils sont utilisés. Les créa pourront de plus très rapidement détecter les incohérences visuelles vis à vis de la recherche graphique qui a été faites.
Documentation
Maintenance d’une documentation de nos composants UI. On construit finalement ce qu’on appelle une API de composants UI destinés à être utilisés dans nos vues (ou composants de plus bas niveau). Très pratique pour guider les développeurs et expliquer comment appeler tel ou tel composant. Essentiel également lors de l’arrivée de nouvelles recrues qui trouveront une documentions exhaustive sur le design-system du produit.
Communication et itération
La maintenance de ce document propose de façon naturelle aux designers et développeurs de devoir échanger afin de mettre en place ce workflow. Ils vont devoir travailler ensemble et penser le découpage de l’interface ainsi que la création de l’API de composants. Les designers viendront expliquer de façon visuel comment tels ou tels composants doivent se comporter pendant que les développeurs se chargeront de leurs mise en place.
Apprendre et progresser
En procédant comme cela, on apprend les problématiques de chacun et on monte en compétence.
Mise en situation
Maquette graphique
Création de maquettes graphique à partir des breakpoints défini avec toutes l’équipe de production. Il est très important pour les designers de devoir concevoir leurs maquettes aux largeurs des breakpoints utilisés dans le CSS.
A cette phase du projet, la DA est menée comme vous avez l’habitude de le faire, il n’est pas encore nécessaire de penser API de composants etc…
Composants par breakpoints
Une fois les maquettes validées, on passe à une phase de découpage des composants de l’interface, organisation de ces composants UI par breakpoint selon leurs comportements.
Atomic design / patterns
On découpe l’interface de façon atomic afin de pouvoir réutiliser chaque morceaux d’UI similaires. C’est lors de cette phase que les designers et développeurs échangent le plus afin de comprendre comment les composants se comportent et penser l’API ainsi que le nommage.
C’est un travail à la fois de design et d’ingénierie car l’on commence ici à penser la façon dont les composants interagiront entre eux dans le code du projet.
Intégration des composants dans living styleguide
Intégration des composants dans le living styleguide avec création de la documentation de l’API. Un développeur désireux de consommer des composants dans les vues de l’application pourra y trouver une explication du comportement des composants disponible ainsi qu’un exemple de code à utiliser.
Consommation des composants
Consommation et utilisation des composants UI afin de monter les vues de l’application. On retrouve nos composants UI de notre living styleguide en situation.
Zoom sur un composant qui utilise de plus petit composants.
L’itération s’installe donc autour du linving styleguide qui permet de construire un design system complet du produit. Les designers et développeurs affineront les composants et l’expérience globale de l’application à partir d’un document commun.
Aller plus loin
Design system
- Externalisation des composants UI pour un partage sur plusieurs projets (web app, applications mobiles, module iframe…)
- Création d’un design système complet avec documentation de la charte graphique graphique de l’entreprise.
- Explication des process globaux de production (design, intégration, dev front…)
- Document utile pour le marketing et le support client.
Conférence
Retrouvez les slides et la vidéo de ma conférence des Rencontres Interactives de Caen sur le sujet :
https://speakerdeck.com/kbizien/entre-design-et-developpement
N’hésitez pas à me pinger sur twitter pour toutes questions ou échanges sur le sujet :) @kbizien.
