Construire une application Ionic sans perdre la raison

Le détail sur le blog : https://blog.stephaniewalter.fr/construire-application-ionic-perdre-raison-confoo-2017/

Avec Damien Senger nous avons travaillé durant 4 mois sur une application Ionic. C’est un framework très puissant mais dans lequel on peut rapidement se perdre. Nous souhaitions dans cette conférence partager les outils et les techniques que nous avons mis en place avec le développeur pour travailler efficacement et sans perdre la tête: userflow chart, styleguide, documents techniques d’animations et spécifications de performance, etc., vous saurez tout.

Transcript

1. Stéphanie Walter (@WalterStephanie) & Damien Senger (@iamhiwelo) Construire une application Ionic sans perdre la raison
2. Stéphanie Walter UX & Visual designer. www.stephaniewalter.fr @WalterStephanie Damien Senger UI designer & Web developer. raccoon.studio @iamhiwelo
3. Le projet dans les grandes lignes
4. Application ionic Android et iOS pour la gestion de centrales d’alarme
5. Collaboration designer / développeur dès les premières étapes du projet
6. Mise en place de l’architecture
7. Workshop papier d’architecture d’information avec le développeur et le product owner
8. Définition du parcours utilisateur avec les différentes actions serveur, modales, etc.
9. Le user flowchart sert de base pour créer les cartes du tableau Trello et les vues et contrôleurs ionic
10. Wireframe, prototype cliquable & inventaire d’interface
11. Prise en main de ionic : “look at the fucking manual”
12. Prototype cliquable : validation client + préparation des composants CSS
13. Inventaire d’interface : répertorier les composants pour assurer la cohérence du code entre les vues
14. Style guide et design
15. Mockup cliquable : test utilisateur chez le client
16. Style guide Design : librairie de tous les composants ré-utilisables de l’interface
17. Style guide CSS : mise en place des surcharges d’ionic en Sass
18. Style guide : état des boutons (normal,actif, touch), formulaires, etc.
19. Style guide adaptation spécifique iOS/ Android
20. Transitions, animations & performance
21. Mockup cliquable animé : communiquer les animations au développeur
22. Document de spécifications pour les animations et transitions
23. Liberté du développeur sur les animations CSS + communication constante
24. Document de spécifications pour la performance perçue
25. En pratique
26. Exports et recette
27. Export vectoriels des éléments
28. Centralisation des retours dans gitlab
29. Notre méthodologie
30. User flowchart : mise en place d’une architecture d’information
31. Trello : communication designer / développer sur les avancées du projet
32. Styleguide : cohérence de l’interface + faciliter le développement de nouvelles vues HTML/CSS
33. Gitlab : communication inte / dev client pour la passation de code + recette graphique
34. Documents de specifications : garder une trace des décisions prises
35. Zeplin : extraire facilement les informations CSS d’une maquette sans avoir à l’ouvrir
36. Invision : présenter les maquettes pour validation, test utilisateur et enchainement des vues
37. En conclusion
38. Stéphanie Walter UX & Visual designer. www.stephaniewalter.fr @WalterStephanie Damien Senger UI designer & Web developer. raccoon.studio @iamhiwelo inpx.it/ionic-confoo-2017 Attribution-NonCommercial-NoDerivs 3.0 France (CC BY-NC-ND 3.0 FR)