Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Stéphanie Walter (@WalterStephanie) & Damien Senger (@iamhiwelo)
Construire
une application Ionic
sans perdre la raison
Stéphanie Walter
UX & Visual designer.
www.stephaniewalter.fr @WalterStephanie
Damien Senger
UI designer & Web developer.
...
Le projet dans les grandes lignes
Application ionic Android et iOS pour la gestion
de centrales d’alarme
Collaboration designer / développeur
dès les premières étapes du projet
Mise en place de l’architecture
Workshop papier d’architecture d’information
avec le développeur et le product owner
Définition du parcours utilisateur
avec les différentes actions serveur, modales, etc.
Le user flowchart sert de base
pour créer les cartes du tableau Trello et les vues et contrôleurs
ionic
Wireframe, prototype cliquable &
inventaire d’interface
Prise en main de ionic :
“look at the fucking manual”
Prototype cliquable :
validation client + préparation des composants CSS
Inventaire d’interface :
répertorier les composants pour assurer la cohérence du
code entre les vues
Style guide et design
Mockup cliquable :
test utilisateur chez le client
Style guide Design :
librairie de tous les composants ré-utilisables de
l’interface
Style guide CSS :
mise en place des surcharges d’ionic en Sass
Style guide :
état des boutons (normal,actif, touch),
formulaires, etc.
Style guide
adaptation spécifique iOS/ Android
Transitions, animations &
performance
Mockup cliquable animé :
communiquer les animations au développeur
Document de spécifications pour les animations
et transitions
Liberté du développeur sur les animations CSS +
communication constante
Document de spécifications pour la performance
perçue
En pratique
Exports et recette
Export vectoriels des éléments
Centralisation des retours dans gitlab
Notre méthodologie
User flowchart :
mise en place d’une architecture d’information
Trello :
communication designer / développer sur les
avancées du projet
Styleguide :
cohérence de l’interface + faciliter le
développement de nouvelles vues HTML/CSS
Gitlab :
communication inte / dev client pour la passation de
code + recette graphique
Documents de specifications :
garder une trace des décisions prises
Zeplin :
extraire facilement les informations CSS d’une
maquette sans avoir à l’ouvrir
Invision :
présenter les maquettes pour validation, test
utilisateur et enchainement des vues
En conclusion
Stéphanie Walter
UX & Visual designer.
www.stephaniewalter.fr @WalterStephanie
Damien Senger
UI designer & Web developer.
...
Upcoming SlideShare
Loading in …5
×

Construire une application Ionic sans perdre la raison

437 views

Published on

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.

Published in: Design
  • Be the first to comment

Construire une application Ionic sans perdre la raison

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

×