Résumé de la conférence : réconcilier les développeurs et les designers
Notez que ces astuces peuvent être facilement transcrites à n’importe quel CMS.
Cette conférence a été réalisée par Matthieu Bousendorfer et Geoffrey Crofte.
Voir les slides de la conférence
L’absence de communication entraîne :
- Une vision différente du projet
- Une perte de temps conséquente
- Une intériorisation des problèmes individuels
- Des retards et défauts dans les projets
L’exemple des menus de navigations a été pris ici.
Une navigation complexe demande de bien connaître le code ou les plugins.
Le menu vu côté designer
Il se moque de :
- ton code propre et stylé
- ton code
- ton code
- ton code…
Par contre il fait attention :
- aux couleurs
- aux respect de la maquette
- au respect de la grille et des tailles des typos
- aux 300 icônes qu’il s’est fait chier à faire
Le menu vu côté développeur :
Il se moque :
- des couleurs exactes de la maquette
- des tailles des fontes
- des fontes
- des marges
- de la grille
Par contre il fait attention :
- au nommage de tes *$% de calques
- au problème de performance lié aux fontes
- à avoir un code propre et maintenable
- à gagner du temps (pour jouer à CS / WoW, …)
Au final le client :
- se moque de vos problèmes internes
- veut voir son projet aboutir
- tient à faire respecter le planning et le cahier des charges
Faire un pas vers l’autre
La relation entre un designer et un développeur c’est comme la rubarbe, bien préparée elle peut être douce et savoureuse
Pour améliorer les relations entre développeur et designer, il faut échanger ces connaissances et harmoniser ses lexiques.
Ce que le designer peut faire pour le développeur
Pour aider les développeurs (ou intégrateurs), les designers peuvent :
- faire un styleguide avec les couleurs et typos
- rassembler et ordonner les éléments graphique
- demander son avis sur les maquettes
- expliciter les types de contenus et leurs articulations
- envoyer des exemples de ce que vous avez en tête
Ce que le développeur peut faire pour le designer
Pour aider les designer, les développeurs (ou intégrateurs) peuvent :
- analyser la maquette (à plusieurs étapes)
- expliciter les limites techniques (les siennes et celles de WordPress (ou d’un autre CMS))
- lui expliquer comment fonctionne WordPress (ou un autre CMS sur lequel vous travaillez)
- monter en compétences
- fournir au designer des contenus types pour WordPress (FakerPress)
Il existe plein d’outils pour travailler en équipe
Trouvez des outils communs et formez-vous dessus. Prenez également le temps de mêler les étapes de la chaîne de production.
Invision
- permet de créer des maquettes interactives
- des flux de discutions
- des test en live sur mobile et tablette via une app iOS
- des assets (éléments graphiques).
Sketch (Mac)
- Application pour faire de l’UX/UI Design ( facile a appréhender)
- Export des éléments graphiques
- Sketch mirror
- Transposition vers CSS
- Intégration avec Invision et Slack
- Communauté et plugins
Photoshop
- polyvalent
- gestion des artboards
- partage des assets
- GuideGuide
- CSSHat : calques vers CSS / Sass
Slack
- Abandonner les mails
- Discuter / échanger
- Intégrer les maj depuis Invision
- Partage de docs
Trello
- board perso accessible à l’équipe
- board commun étape par étape
- deadlines
- connaître avancement des tâches
Avocode
- Plus besoin d’une licence Adobe pour les développeurs
- Récupère les infos des fichiers Sketch et Photoshop
- Liste les calques
- Préparer le code et les images
- Exporter du CSS, Less, Sass
- Partie commentaire
WordPress
- Mettre du contenu fictif à disposition (FakerPress)
- lister les plugins qui répondent à des besoins précis
- lister les thèmes
- manger du codex et monter en compétences
En bref
- Communiquer plus et mieux
- Utiliser des outils qui facilitent la transition design / dev
- Travailler mieux ensemble
- Automatiser certaines tâches
Conférence de Matthieu Bousendorfer et Geoffrey Crofte. Voir leurs slides.