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.
raccoon.studio @iamhiwelo
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
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
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)