Construire une application Ionic sans perdre la raison

Slide 1

Slide 1 text

Stéphanie Walter (@WalterStephanie) & Damien Senger (@iamhiwelo) Construire une application Ionic sans perdre la raison

Slide 2

Slide 2 text

Stéphanie Walter UX & Visual designer. www.stephaniewalter.fr @WalterStephanie Damien Senger UI designer & Web developer. raccoon.studio @iamhiwelo

Slide 3

Slide 3 text

Le projet dans les grandes lignes

Slide 4

Slide 4 text

Application ionic Android et iOS pour la gestion de centrales d’alarme

Slide 5

Slide 5 text

Collaboration designer / développeur dès les premières étapes du projet

Slide 6

Slide 6 text

Mise en place de l’architecture

Slide 7

Slide 7 text

Workshop papier d’architecture d’information avec le développeur et le product owner

Slide 8

Slide 8 text

Définition du parcours utilisateur avec les différentes actions serveur, modales, etc.

Slide 9

Slide 9 text

Le user flowchart sert de base pour créer les cartes du tableau Trello et les vues et contrôleurs ionic

Slide 10

Slide 10 text

Wireframe, prototype cliquable & inventaire d’interface

Slide 11

Slide 11 text

Prise en main de ionic : “look at the fucking manual”

Slide 12

Slide 12 text

Prototype cliquable : validation client + préparation des composants CSS

Slide 13

Slide 13 text

Inventaire d’interface : répertorier les composants pour assurer la cohérence du code entre les vues

Slide 14

Slide 14 text

Style guide et design

Slide 15

Slide 15 text

Mockup cliquable : test utilisateur chez le client

Slide 16

Slide 16 text

Style guide Design : librairie de tous les composants ré-utilisables de l’interface

Slide 17

Slide 17 text

Style guide CSS : mise en place des surcharges d’ionic en Sass

Slide 18

Slide 18 text

Style guide : état des boutons (normal,actif, touch), formulaires, etc.

Slide 19

Slide 19 text

Style guide adaptation spécifique iOS/ Android

Slide 20

Slide 20 text

Transitions, animations & performance

Slide 21

Slide 21 text

Mockup cliquable animé : communiquer les animations au développeur

Slide 22

Slide 22 text

Document de spécifications pour les animations et transitions

Slide 23

Slide 23 text

Liberté du développeur sur les animations CSS + communication constante

Slide 24

Slide 24 text

Document de spécifications pour la performance perçue

Slide 25

Slide 25 text

En pratique

Slide 26

Slide 26 text

Exports et recette

Slide 27

Slide 27 text

Export vectoriels des éléments

Slide 28

Slide 28 text

Centralisation des retours dans gitlab

Slide 29

Slide 29 text

Notre méthodologie

Slide 30

Slide 30 text

User flowchart : mise en place d’une architecture d’information

Slide 31

Slide 31 text

Trello : communication designer / développer sur les avancées du projet

Slide 32

Slide 32 text

Styleguide : cohérence de l’interface + faciliter le développement de nouvelles vues HTML/CSS

Slide 33

Slide 33 text

Gitlab : communication inte / dev client pour la passation de code + recette graphique

Slide 34

Slide 34 text

Documents de specifications : garder une trace des décisions prises

Slide 35

Slide 35 text

Zeplin : extraire facilement les informations CSS d’une maquette sans avoir à l’ouvrir

Slide 36

Slide 36 text

Invision : présenter les maquettes pour validation, test utilisateur et enchainement des vues

Slide 37

Slide 37 text

En conclusion

Slide 38

Slide 38 text

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)