Expression protocolaire

l'expression protocolaire

Projet de diplôme, master Ui design, Ecv Aix-en-provence

Dans notre société où les normes, la mode, et la mondialisation font fondre nos différences, comment montrer ce qui compose notre psyché, ce qui compose les nuances de l’humain ?

L’ expression protocolaire est une œuvre participative qui permet à chacun de donner à voir ce qui nous caractérise. À travers le filtre d’un protocole, une machine dénuée de sentiment, une image prend forme, le proto. Et c’est lorsque l’ensemble de ces images -chacune définissant un humain, une personnalité, ou un message- sont mises ensemble, sur un mur blanc immense, que nous apparaît l’arc-en-ciel de l’humanité, le colaire.

Le protocole est là pour réunir des variables, les assembler et produire un résultat. L’utilisateur ne sait pas ce que ses choix vont produire, comment vont se matérialiser les informations réunies.

À travers un protocole, l’utilisateur / spectateur est invité à nous donner à voir une part de lui-même sans le savoir, et cette part, le proto, vient se mélanger avec celle d’autres utilisateurs formant le colaire, une galerie livrant la nature humaine en couleurs et textes.

Le protocole est la part importante de l’œuvre, mise en place par moi-même, il est le noyau, ce qui produit et fait l’œuvre.

Cette œuvre vise à montrer la complexité des sentiments et de la nature humaine à travers la neutralité de la machine.

Comme certains artistes utilisent l’intelligence artificielle sous forme de petits robots pour co-créer avec eux, ou encore l’utilisation du protocole pour donner à tout le monde la possibilité de créer et s’exprimer pour eux-mêmes.

 

Le proto :

Le ton définit une typographie et un fond coloré. Quant à la personnalité, elle définit une deuxième couleur qui vient former ce dégradé.

Les protos forment comme un arc-en-ciel de personnalités formant les nuances que constitue la psyché humaine. De ce qu’on laisse voir, entendre, à ce qui nous définit. Cependant, la personnalité vient distendre, tordre, se mélanger à ce qu’on laisse voir. Formant ainsi une forme presque unique pour chacun.

Le colaire :

Machine

Le colaire machine possède un système de filtre : chronologique, et par ville. Cela permet de voir si dans cet arc-en-ciel d’humanité on peut voir apparaître de ressemblance, lié au message ou au ton par exemple. Si par exemple pendant le confinement il y a eu beaucoup de polémique, d’ironie, ou de pathétisme. Ou encore par géolocalisation, selon des situations politique, pandémique ou culturelle.

Humaine

Ce colaire est ce qui ressemble le plus à ce que l’expression protocolaire serait sous sa forme dématérialisée. Une fois le proto créé, l’utilisateur vient l’exposer où il le souhaite. Le mur blanc géant est présent, l’utilisateur peut scroller à l’infini pour choisir la place où il souhaitera déposer son proto. Une fois cela choisi, il peut choisir son inclinaison, un peu comme s’il le collait lui-même, sans la rigueur numérique. C’est ici que l’œuvre touche son but, en créant un mur géant ou des personnalités ou messages peuvent se rejoindre, se contrer ou se superposer.

Pour aller plus loin:

Dans le but de retrouver l’esprit originel de l’œuvre, avant le confinement, j’ai développé un second protocole. L’utilisateur imprime son proto, et l’expose où et comment il le souhaite. Il prend ensuite une photographie qu’il m’envoie et je l’expose sur instagram. Ce réseau social au mur blanc de photo vient recréer un colaire plus libre que la machine existant actuellement, et tend vers le colaire humain, et le message de l’œuvre déconfinée.

L’origine

À cause du confinement, l’œuvre a dû s’adapter. Ce grand mur blanc devient dématérialisé, et le protocole peut se faire où on le souhaite. Cependant, j’aimerais aussi vous présenter aujourd’hui ce qu’il aurait donné dans sa version matérialisée. 

Dans la version première, la matérielle, l’œuvre se situe dans une pièce blanche, le protocole présent sur une tablette contre un mur, de préférence en face de l’entrée. Sous la tablette serait cachée une imprimante qui sortirait le proto une fois celui-ci produit. De là, l’utilisateur / spectateur prendrait cette affiche sur papier autocollant, et déciderait où l’afficher. Sur le mur, sur d’autres protos, à l’envers ou encore sur le mobilier ou le plafond. La possibilité d’expression en devient double : à travers le proto premièrement puis à travers son emplacement qui traduit un autre morceau de la personnalité ou du message de l’utilisateur.

La complexité de l’œuvre vient, de plus, de l’installation finale. Quand les spectateurs posent leur proto dans la salle d’exposition, il n’y a pas de contrôle. Ce facteur d’imprévisibilité même décrit la nature humaine, à mon avis, et est donc représenté la colaire.

 

Ce projet fait partie d’un ensemble de projets produits par tout les étudiants de l’ECV de France. On peut retrouver tout ces projets sur le site Copy/Paste, ainsi que le mien.

« L’ECV Digital vous invite à son exposition dématérialisée intitulée Copy/Paste.

Une exposition prospective sur le monde d’après 🚀 Plus de 40 étudiants des campus de Paris, Bordeaux et Aix-en-Provence en dernière année de Mastère Web Design se sont penchés sur la question « du monde d’après » et sur les solutions digitales pour le réinventer derrière leurs écrans. L’exposition accessible en ligne jusqu’en mai 2021 propose une quarantaine d’oeuvres numériques, autour d’une expérience immersive inédite

 

Quel monde pour demain ? Comment le télétravail prendra-t-il sa place dans les usages économiques futurs ? Que retenir de cette mise à l’arrêt de nos vies quotidiennes et comment se projeter dans celles d’après ?  »

La gazette du corona

la gazette du coronavirus

Workshop co-design, master Ui design, Ecv Aix-en-provence

Notre projet de workshop s’articule autour de la crise du Covid-19 qui a débuté en décembre 2019 en Chine dans la province de Wuhan et qui à atteint le reste du monde dans les mois suivant. En France, l’état d’urgence sanitaire a été décrété en mars 2020 et le confinement total de la population le 15 du même mois. Après deux mois de confinement, il a été décrété qu’un déconfinement serait autorisé le 11 mai 2020.

Dans le cadre d’un retour à des activités quasiment normales de la population, il est important de présenter à l’ensemble de la population française les bons gestes pour ne pas faire repartir l’épidémie.

En accord avec notre cheffe de projet, Annabel, nous avons donc préparer une solution co-design, qui réunit les apports de nos matières de prédilection sur un sujet d’actualité important.

Au sein du groupe il y a un UX designer et 2 UI designer. L’UX designer s’occupe de la retranscription écrite, des documents et de l’oral avec la construction du projet notamment pour la recherche personas, mind mapping et tests. Les UI designer s’occupent de la partie graphique du projet, avec la mise en place des prototypes, des wireframes et de la solution. Nous avons travaillé tous les 3 à la construction du projet et fais une session d’idéation pour pouvoir cibler au mieux notre problématique. Il fallait que le projet soit en harmonie avec les thèmes qui sont abordés à savoir le développement des infox, les sources des médias, le gouvernement et la confiance qu’ont les français en ce qui leur est soumis en termes d’informations.

Comment informer et accompagner la population pour limiter les risques et impacts du dé-confinement ?

Création d’un canal d’information cross-média, sous délégation de l’état français. Une sorte de petit journal du Corona. On y trouverai des actualités, un agenda des dates officielles, les information en temps réel et par localisation. 

Diffusé sur tout réseaux sociaux mais aussi dans la presse écrite : tous les jours, un pdf serait téléchargeable, permettant au journaux régionaux de relayer l’information (comme son faite les attestations). Ce PDF peut aussi être utilisé pour les particuliers souhaitant s’informer ou informer leur entourage (un boulanger qui l’affiche tous les jours, un habitant l’imprimant et l’affichant dans l’entrée de sa résidence, …). 

Le but est donc de communiqué facilement, des informations officielles, dès leur mises à jours afin d’informé une grande majorité de la population, que celle-ci lise la presse sur internet ou papier.

Cependant, quand nous avons réfléchis à cette idée de Gazette du coronavirus, nous étions encore en confinement. Deux semaine plus tard, nous sommes passés à la production. Cependant entre temps, le gouvernement  a eu la même idée et leur version de la gazette est sortie.

Nous avons donc développé notre version, en voyant se qu’il pouvait manquer et en revoyant l’user flow suite à plusieurs entretiens avec des utilisateurs comparant les deux versions.

Voici donc les spécificités de notre version :

L’actualité :

Un flux constant d’actualités mis automatiquement, retranscrivant tout ceux que l’on peut trouver dans la presse sur le coronavirus. Les sources sont sélectionnées, comme Le Monde, Libération, 20minutes, …

Les ressources :

Centralisation des ressources téléchargeable afin d’accéder facilement à l’information et pouvoir la transmettre. Le tout facilement identifiable et visuellement abordable.

La personnalisation :

On vient en général sur ce site pour trouver une information qui nous est propre, mais parfois il est difficile de la trouver dans cette grande quantité d’information. Nous avons donc raccourcis le parcours, en permettant de trouver dès la page d’accueil l’information souhaitée selon sa catégorie socio-professionnelle. De là, selon le nombre d’informations, d’autres filtres peuvent apparaître, permettant de trouver son information.

résumé de la gazette du jour :

Afin de donner accès à une majorité de personne, et ce quelque soit leur moyen, cette gazette est numérique mais se décline sur papier. Chaque jour on retrouve un condensé de l’information téléchargeable en PDF. Ce PDF et la manière de le distribuer peut dépendre si on est de la presse, si c’est pour soi-même ou encore pour le faire partager.

On y retrouve les chiffres de mortalité, d’entrée et sortie de réanimation pour l’ensemble du territoire français, ainsi que la carte de l’état des départements. Sont présent aussi la date, ainsi que l’explication si c’est une date importante (ouverture des écoles, déconfinement, …), mais aussi un résumé des discours télévisuels du Président et Premier Ministre si ceux-ci se sont exprimés la veille. Dans la version de partage et pour soi-même, on peut y intégrer ou non les actualités ainsi que les gestes barrières.

Pour la presse :

« Nous vous invitons à utiliser ce PDF téléchargeable sous forme d’encart à insérer dans les pages de votre journal (comme le font déjà certains avec les attestations de déplacement), afin de donner à voir l’évolution et les nouveautés de l’état du COVID-19 sur le territoire français à toutes personnes ne pouvant accéder à l’information web. Certains chiffres se retrouvent dans les éditions éditoriales des chaînes de télévision française, cependant la communication papier est encore un moyen international de prévenir une bonne partie de la population française. »

Pour le partager ou soi-même :

« Nous vous invitons à utiliser ce PDF téléchargeable pour vous informer sur l’évolution de l’état du virus ainsi que les nouveautés, les dates clefs, et d’autres. Vous trouverez ici les nouvelles du gouvernement, sortant de la source, sans possibilité de fake news. Ce document est édité par le gouvernement pour informer le plus grand nombre, simplement et facilement sur les nouvelles lois, les recommandations, et ainsi aider tout un chacun à vivre plus facilement cette période de crise sanitaire inédite, et vous rassurer.

Comment vous en servir ?

Nous vous invitons à téléchargez la version qui vous convient, à l’imprimer, puis l’afficher dans un lieu public (tout en respectant la loi d’ « Affichage d’opinion et à la publicité relative aux activités des associations sans but lucratif). Cela peut donc être sur le panneau d’annonce dans le couloir d’entrée de votre résidence, à l’entrée ou sur la porte de votre commerce, dans les moyens de transports (si vous êtes une compagnies de transports), sur les panneaux d’affichage en ville ou à la campagne,… 

Nous vous invitons à utilisez cet outils pour communiquer à votre entourage, afin de permettre à l’ensemble de la population d’accéder à l’information, indépendant de leur situations personnelles.« 

 

Bad design

Bad design

Workshop, master Ui design, Ecv Aix-en-provence

If the system lets you make the error, it is badly designed. And if the system induces you to make the error, then it is rea ly badly designed.” Donald A. Norman – The Design of Everyday Things

À l’instar de l’agence Baggar avec son projet, l’objectif de ce workshop est de nous questionner sur la notion de “mauvais design” et pour se faire, de travailler sur la conception d’une “très mauvaise interface utilisateur”. Nous avons donc été amenés à volontairement jouer sur des erreurs d’interface pour faire la démonstration – par la négative – de l’importance du design. L’idée finale étant de tirer une leçon des erreurs de design.

Je suis donc partie sur les interfaces d’applications de rencontres, tel que Tinder.

Capture d’écran 2020-08-25 à 11.14.18 PM

Les applications de rencontres sont là pour vendre ou proposer un service sous différentes formes. AdopteUnMec.com a joué sur l’idée de mettre un homme dans son panier numérique pour créer sa renommé, Happens joue sur la localisation proche, et Tinder joue sur le geste du “swipe” pour aimer ou ne pas aimer quelqu’un à partir d’une photo de profil.

Tinder a changé la donne dans la drague virtuelle, dite drague commerciale ou uberisation de l’amour, où les premières secondes suffisent pour dire j’aime ou je n’aime pas à partir d’une photo. L’amour devient un choix que l’on peut faire comme en face d’un objet. Le corps du prétendant, comme le sien, devient un objet que l’on évalue grâce à peu de variables. Il est nécessaire de passer par le processus de match avant de pouvoir connaître la personne derrière ce physique. Application jeune faite pour la jeunesse X & Y. Elle a fait rentrer le swip dans les normes gestuelles de l’utilisation sur smartphone.

Des gestes ou interactions naîent de ses applications particulières, donc reconnaissables et identifiables. 

Comment détourner ces gestes ancrés dans nos habitudes, afin de créer un anti-design novateur ?

  • Le swipe : j’aime ou j’aime pas une personne en choisissant rapidement à partir du physique.
  • Le match : Signifie que vous vous plaisez mutuellement. Recevoir des matchs afin de débloquer le service de messagerie. Valoir affective, comme un like sur réseaux sociaux, mais en commun.
  • Les filtres : premiers filtres réglables dans le profil (montrez-moi, distance maximale, tranche d’âge), deuxième filtre : like ou dislike, qui permet un match, à partir de là un choix de personne à qui discuter.
  • Elo score : algorithme basé sur ses particularité, nous donnant une note qui va déterminer quels profils nous seront présentés. Un homme avec un certain type d’étude et un revenue élevé gagne des points bonus. Pour une femme dans la même situation, c’est des points malus…

Créer une application de rencontre bad design

Ré-utilisation des codes colorimétrique, typographique et atomique de Tinder, en les détournant et exacerbant.

Ré-utilisation des codes colorimétrique, typographique et atomique de Tinder, en les détournant et exacerbant.
 
Ré-utilisation des codes de Tinder, mais en les augmentant ou inversant :
  • inversion du swipe pour une confusion
  • augmentation du click

En jouant sur les codes de tinder, tinpa (t’aime pas) intensifie et inverse ces éléments pour perdre et dérouter l’utilisateur en jouant sur l’idée du bad design. 

Une fenêtre pop-up pas très claire.

Perd ou incite l’utilisateur à aller dans la direction voulu par l’application. L’utilisateur a deux possibilités qui n’en sont pas vraiment.

Des contrastes pas contrastés

Notions de bad design en terme d’accessibilité et de visibilité. Permet de dire des choses à l’utilisateur sans qu’il le voit forcément. L’information n’est pas accessible de la même manière par tout le monde.

Des check-box cachées et pré-remplies

Du fait du peu de contraste, elles ne sont pas identifiable, et force l’utilisateur a accepté des notions.

Des boutons non-identifiables

Les éléments cliquables ne présentent pas de cohérence visuel, graphique et ergonomique. Trouble l’utilisateur et l’empêche d’accéder facile à ses fonctionnalités. 

Un formulaire pas claire

Champs de remplissage non-adaptables, des inversions de champs, message d’erreur non explicatif, boutons non-identifié, …

Digitecpharma / Intecmedia

Intecmedia / digitecpharma

intecmedia, stage, la ciotat

Voici quelques projets sur lesquels j’ai travaillé lors de mon stage à Intecmédia. Conception d’applications métiers pour des pharmaciens. Travail de conception à partir d’un WordPress pré-établi où les possibilités de personnalisation sont les couleurs, la typographie, la bannière et les pictogrammes.À partir d’une charte établie par le client ou par nous-même, déclinaison de l’identité sur l’ensemble de l’application. L’application pouvait aussi être un PWA produit sur Goodbarber, où les possibilités créatives étaient plus grandes. En général, cette offre est déclinée sur un site web WordPress. Adaptation du contenu et de la charte sur ordinateur.

Ré-appropriation de charte graphique existante, et déclinaison pour création de pictogrammes et cohérence graphique dans la charte (Pharmacie entre deux mers et pharmacie de la plage).

Ensuite, création du site web à partir de la charte existante sur l’application du restaurant de La Fontaine. Site WordPress avec Elementor.

 

app

Bezel-Less Macbook Pro with Touch Bar Mockup by Anthony Boyd Graphics Bezel-Less Macbook Pro with Touch Bar Mockup by Anthony Boyd GraphicsBezel-Less Macbook Pro with Touch Bar Mockup by Anthony Boyd Graphics

Bezel-Less Macbook Pro with Touch Bar Mockup by Anthony Boyd Graphics

Bezel-Less Macbook Pro with Touch Bar Mockup by Anthony Boyd GraphicsiPhone 7 Plus and iPad Pro 10.5-inch Mockup by Anthony Boyd Graphics

Création du logotype et de la charte complète pour la Pharmacie du Luquet et de Saint Jean. 

Gay (pride)

Gay (pride)

Ui master, ECV aix-en-provence

À l’occasion des 50 ans de la Gay Pride, j’ai créer une édition regroupant plusieurs articles et données la concernant. Utilisation des couleurs du drapeau pour compartimenter chaque chapitres. J’ai ensuite décliné ce graphisme en site web et son responsive.

 

magazine mockup web

Free Close Up 6

Magazine Close Up 04

Photorealistic Magazine MockUp

Free Scene 8

Bezel-Less Macbook Pro with Touch Bar Mockup by Anthony Boyd Graphics

Bezel-Less Macbook Pro with Touch Bar Mockup by Anthony Boyd Graphics

Bezel-Less Macbook Pro with Touch Bar Mockup by Anthony Boyd Graphics

Bezel-Less Macbook Pro with Touch Bar Mockup by Anthony Boyd Graphics

iphone-x-afigith-mock-up-01

Isometric iPhone X Mockup Vol.3 by Anthony Boyd Graphics

Cabaret Aléatoire – Refonte

cabaret aléatoire, refonte

master Ui design, Ecv Aix-en-provence

Lors de mon Master en Webdesign, j’ai eu à faire une refonte du site du Cabaret Aléatoire. Le travail consiste à être fait sur ou avec After Effect. Ce travail est une reprise des visuels produit pour le Cabaret Aléatoire par Stéphane Lamalle, dans lequel j’ai décidé de refaire le site en me centrant sur les thématiques des soirées.
Le graphisme et la hiérarchie du site est repensé, voici ce que j’ai imaginé :

Cabaret Aléatoire refonte Bonnet Margot

Cabaret Aléatoire refonte Bonnet MargotCabaret Aléatoire refonte Bonnet Margot

Kitéko, produit ton énergie verte à l’école

kitéko

master Ui design, Ecv Aix-en-provence

À l’occasion du Hackathon à l’école ECV digitale d’Aix-en-Provence (et en partenariat avec le World Design Summit), nous avons soumis l’idée de ré-utiliser les déchets organiques et ménagers des quartiers ou villes pour produire du méthagaz et donc de l’énergie verte. Pour démontrer ce projet utopique, nous avons utilisé deux démonstrateurs : Gascoin et Kitéko. Je présente ici ce dernier. Pour retrouver l’ensemble du projet, voici le lien : VILLES_RÉGIONS_Pitch

Plan de travail 3Kiteko

Les rencontres de Arles / refonte

rencontres d'arles, refonte

master Ui design, Ecv Aix-en-provence

Refonte du site, et de l’identité, des rencontres d’Arles pour un sujet de cours. J’ai décider d’aller jusqu’au bout du projet en jouant sur plusieurs support. Mise en avant d’éléments sémantiques propres à la photographie argentique, qui perd de la force face au numérique. Mise en avant des racine.

Page d'accueil copieRArles

2018-CG-Rencontres d'arles_menu

2018-CG-Rencontres-d'arles_gif 2018-CG-Rencontres-d'arles_gif2