Construire une application Ionic sans perdre la raison

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

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.

raccoon.studio @iamhiwelo

inpx.it/ionic-confoo-2017 Attribution-NonCommercial-NoDerivs 3.0 France (CC BY-NC-ND 3.0 FR)