Gestion Éléctronique de Documents

Deux années de web en poche et me voilà confronté à mon premier défi mobile: une Application iPhone en SD et HD. Après des mois de durs labeurs sur ce design mobile j’ai été récompensé par sa présentation aux San Francisco Apps World en février 2013 !!

Profile Home-3

Design iOS: Profondeur & Skeuomorphism

Ce que je voulais c’était suivre les partis pris d’Apple en matière de design. En gros, faire un design super réaliste pour me rapprocher du modèle mental de l’utilisateur (i.e. sa perception de la gestion de documents).

Thomas Delissen: Designer UI site iphone GED ineat

L’interface est basée sur des patrons que l’on retrouve partout aux travers de l’app

App Icon: Thomas Delissen interface utilisateur Mobile iPhone

Quoi de plus pertinent qu’un tiroir pour exprimer le rangement ?

Design Mobile: mon workflow créatif

J’ai de la peine quand je vois une maquette Photoshop mal organisée, du coup j’essaye d’appliquer toutes les best-pratices que je peux apprendre au travers de bouquins et autres blogs  (de design mobile ou non). Une de mes récentes découvertes c’est l’utilisation de l’outil “composition de calques” dans photoshop. Grâce à ça, je peux organiser mon fichier en page différentes, sans perdre de temps à masquer / afficher les calques concernés.

Pour ce projet long de plusieurs mois, j’ai travaillé sur juste 1 fichier (différents écrans, différentes résolutions et différents états y sont gérés) et tout ça dans 1 fichier… Et ouais mon pote !

Thomas Delissen: designer UI. Méthodologie workflow créatif Composition de calques

Ces centaines de calques sont rangés dans des vues ou compositions de calque

Photoshop: Sheet & Scripts

J’ai appris sur ce projet à maintenir une “sheet”, c’est à dire une feuille où je mets à disposition chaque image pour la découpe. À l’aide de tranches, de scripts Photoshop et de vecteurs, en un rien de temps je peux ré-extraire toutes les images en différents formats. Une bonne méthode pour une maintenabilité rapide des styles !

Thomas Delissen UI designer: slices sheet tranches iOS @2x

Chaque image est prête à être modifiée et découpée rapidement afin de prévoir un changement

Design d’interface mobile

Interface application mobile sociale: designer UI Thomas Delissen

Dîtes bonjour à l’aspect social de la gestion de documents professionnels mobile

Interface mobile gestion de document: designer UI Thomas Delissen

L’interface est basée sur des patrons que l’on retrouve partout aux travers de l’app

Gesture mobile, poignée glissable: designer UI Thomas Delissen

Une seule vue pour voir un document et ses meta-data. Un seul geste pour choisir ce que l’on veut voir

walkthrough iOS

Grâce à un guide (walkthrough) lors de la première connexion, les gestures cachées ainsi que les fonctionnalité sont présentées rapidement à l’utilisateur.