UI
DESIGN BOOK
2016 2018
NICOLAS DIAS
01
UI FRONT 03
BRANDING
02
UI BACK 04
GRAPHICS
UI FRONT
Paris.fr + Quefaire.paris.Fr Ville de Paris (2016-2018)
Nouveau système de design Depuis 2016, les deux sites majeurs de la Ville ont changé d’identité visuelle. Sur les recommandations de la Maire de Paris, notre service digital a mis en place des évolutions éditoriales et fonctionnelles.
Ce travail s’est basé sur un système alternatif d’interfaces : le styleguide. J’ai pris en main ce nouvel outil technique afin de mettre en production rapidement mes propositions de design.
Au cours de cette mission, j’ai également déployé un kit graphique du site de Paris. Celui-ci a servi de base graphique à notre équipe de création.
PHOTO ILLUSTRATIVE
UI FRONT
Paris (2017-2018) - Evolutions d’interfaces
Portail
Header / Intro Contenus spécif iques d’articles
Evènements
Vidéos
Ecrans d’accueil et d’actualités
UI FRONT
Que faire à paris (2018) - Création de module de quiz
Parcours du module de jeu concours
Page de participation de la rubrique «Magazine»
01
02
03
UI FRONT
Paris Tennis Ville de Paris (2017)
Ecrans Paris Tennis
Nouvelle plateforme de réservation Afin de faciliter l’accès à la réservation de tennis à ses citoyens, la Ville de Paris a souhaité proposer un nouveau site.
Sur ce projet, mon rôle a été de designer l’interface et les interactions utilisateurs. J’ai également créé des guidelines de composants pour traduire les besoins fonctionnels à l’équipe technique.
Les écrans ont été déployé en version desktop, tablette et mobile. Ceci a permis de spécifier clairement le comportement responsive du site.
UI FRONT
Paris Tennis (2017) - Réservation de tennis parisiens
Ecrans de recherche d’un court de tennis
Filtrage d’un tennis - Version Desktop
Filtrage et sélection d’un tennis - Version Mobile
UI FRONT
Paris Tennis (2017) - RĂŠservation de tennis parisiens
Guidelines pour les fonctionnalitĂŠs de recherche
Recherche par lieux
Recherche par date
UI FRONT
Client Airbus OAIO (2018)
Prototypage d’interfaces L’entreprise Airbus a émis le besoin de développer une nouvelle application interne. L’objectif du projet était de centraliser le suivi de correctifs pour l’ensemble des flottes aériennes.
J’ai été mobilisé pour la phase de prototypage de scénarios utilisateurs. Pour ce faire, j’ai travaillé en collaboration avec un consultant Lead UX.
Trois scénarios utilisateurs ont été réalisé pour illustrer le système de recherche et l’affichage des données.
UI FRONT
Airbus custowise (2018) - Gestion et suivi de correctifs
Ecrans principaux d’aff ichage et de consultation de données
Page initiale de recherche
Affichage des fiches «Topics» et «Items»
Airbus Custowise (2018) - Gestion et suivi de correctifs
UI FRONT
Parcours de recherche par saisie de références - Version mobile
01
02
03
Accès direct au système de recherche
Sélection du type de filtres Saisie de références avec autocomplétion
Feedback visuel de validation (Champs éditables après saisie)
UI FRONT
Airbus Custowise (2018) - Icônographie
Icônes principales
Statuts de résolution
Recherche / Favoris / Filtres
Etats
Statuts des sujets
Détails et références
Priorités
Open
High priority
Close
Medium priority
Draft
Low priority
Etat confidentiel
Restricted com to A/L
Statut du protocole de résolution par avion
Not impacted
Potentially impacted
Impacted & contained
Impacted & expected to be contained
UI BACK
Paris & QFAP Ville de Paris (2018)
Nouvelle gestion de contenus Depuis 2016, un nouvel écosystème de backoffice a été lancé par notre pôle de projets. La gestion de contenus a été repensé pour favoriser de nouveaux formats d’éditions.
En lien avec l’équipe de développement, j’ai réalisé le design des environnements techniques de Paris et Que faire à Paris.
La refonte d’interfaces à permis d'optimiser l’usage et la compréhension des fonctionnalités d’édition de contenus.
UI BACK
Paris.fr/admin (2018) - Administration des équipements
Ecrans principaux pour l’édition d’équipements parisiens
Connexion au backoffice
Paramétrage de rubriques
Paramétrage d’une fiche équipement
UI BACK
Quefaire.paris.fr/admin (2016) - Administration des évènements
Ecrans principaux et guidelines de l’interface
Tableau d’administration d’articles
Aperçu du formulaire dédié à la création d’articles
Styles de composants / blocs
BRANDING
Paris Ville de Paris (2017-2018)
Identité visuelle des services parisiens La nouvelle identité graphique du site web de la Ville s’est accompagnée d’une refonte visuelle de la marque Paris. Cette charte s’est étendue pour les sites annexes parisiens. La recherche de cohésion graphique a permis de développer un système de headers et footers adaptables à l’ensemble des services.
J’ai travaillé sur d’autres projets d’identités visuelles en référence à l’actualité parisienne. A l’occasion d’un concours antipollution en décembre 2017, j’ai été sollicité pour la réalisation d’un label sur la qualité de l’air.
BRANDING
Services parisiens (2017) - Guidelines de déclinaison identitaire
Adaption de headers avec la marque Paris
Modèles de newsletters des mairies d’arrondissements
Service sur l’accès à la santé
Service digital de marché à Paris
BRANDING
Paris.fr (2018) - IdentitĂŠ visuelle de services
Messagerie de chatbot pour la rubrique stationnement du site Paris.fr
Refonte graphique de la page de maintenance
BRANDING
Ville de Paris (2018) - Label «Qualité de l’air»
Création d’un logo pour un programme anti-pollution (Ville de Paris, Paris&Co et d’Airparif )
Recherches graphiques
Logo final
Qualité de l’air
Qualité de l’air
Air Quality
Qualité de l’air
GRAPHICS
Ville de Paris (2017-2018) - Facebook / Twitter
L’info en chiffres
GRAPHICS
Ville de Paris (2017-2018) - Facebook / Twitter
Visuels évènementiels
GRAPHICS
OAIO (2018) - Projets internes
Illustrations / icônes
Storyboard informatif (Application d’assistance technique à distance)
Librairie d’icônes (Slides OAIO)