Book UI Design - Nicolas Dias

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)