Open Design

Par My Lê

Mini-conf (15 mn) :

Langue :

Français

Design

Liens connexes

• Diaporama (PDF)

Le sujet

« Open Source » est une expression qui peut nous être familière, mais qu'en est-il pour « Open Design » ? Comment pourrait-on définir l'Open Design ?

Les dessous de la création en design sont souvent secrets pour protéger le processus de conception aussi bien que les techniques utilisées, pour en garder l'exclusivité, pour que les œuvres originales ne soient pas dupliquées. Comment remettre en question cette vision et ouvrir les pratiques de création? Où il sera question des initiatives existantes et de pistes de collaboration autour du design graphique, des fontes libres et de l'objet libre.

Présenté par

Transcription

0 – Introduction : qu'est-ce que l'Open Design 1 – Design graphique : The Hour of Design, Ricardo Vazquez 2 – Typographie : Velvetyne Type Foundry and OSP Foundry 3 – Refonte d’identité visuelle et partage 4 – Mot de conclusion

========== 0– Introduction

J'ai été designer graphique print (supports imprimés), puis designer graphique web (UI designer) et aujourd'hui je suis UX designer. Parmi vous il y a peut-être des designers, des développeurs, des chefs de projet, des enseignants, ou des personnes curieuses à propos de ce thème.

En quoi ça consiste ? Qu'est-ce que cela peut nous apporter ? Quelles sont les limites ? Comment aller plus loin ?

Ce que j'entends par Open Design dans ce cadre-ci, ce sont des designers qui partagent : [slide] • soit leur processus de travail • soit le résultat de leur travail • soit également leurs fichiers source par exemple

Dans les 2 premières parties, je vais donner des exemples d'Open Design qui m'ont inspirée : • un exemple en design graphique • des exemples en typographie • ensuite j'en profiterai pour parler de l'originalité et de la copie • pour finir sur une partie que j'intitule “Refonte d’identité visuelle et partage” (un exemple d'actualité)

1– The Hour of Design, Ricardo Vazquez

Dans ce premier point, je vais vous parler d'un designer dont la démarche a été le point de départ de mon questionnement et de mon intérêt pour l'Open Design.

L'année dernière, j'ai participé au programme Outreachy (bourse de 3 mois), en tant que designer UX et UI pour la Fondation Mozilla. Je discutais avec mon mentor Ricardo Vazquez, qui est aujourd'hui designer d'interaction pour Firefox chez Mozilla. Il me parlait d'une chaîne Youtube qu'il avait créé et sur laquelle il partageait pendant des sessions d'une heure en direct intitulées “The Hour of Design” sa pratique en tant que designer graphique web, .

Quel était son but ? Il souhaitait montrer comment il travaillait au quotidien chez Mozilla. Il montrait comment partir d'une page blanche (comme les écrivains, compositeurs, toute personne qui conçoit, crée quelque chose) et que ce n'est pas si facile d'arriver à un résultat final satisfaisant. Ça peut être assez stressant. Il commente ce qu'il fait, on le voit se poser des questions, tâtonner, revenir en arrière. C'est un exercice difficile, car toutes ces étapes sont visibles.

Qu'est-ce que ça peut nous apporter ? En quoi cette démarche peut être intéressante ? • l'utilisation de Sketch (logiciel pour concevoir des maquettes de pages web) par exemple les plugins • des conseils pour annoter son travail pour l'équipe de développement – épisode 5 • il a également dessiné un modèle de téléphone portable pour l'un de ses projets, il a partagé le ficher source que l'on peut utiliser • à partir du moodboard fourni par l'équipe comment créer une gamme de couleur pour une application mobile (c'est une partie qui m'a beaucoup aidée) – épisode 6 • il y a des liens vers des livres et des sites dont il pointait un aspect remarquable Tout ça, se sont des choses dont on peut s'inspirer et réutiliser. Il y a 7 vidéos, je vous invite à jeter un œil, vous pourrez découvrir des informations utiles. Je partagerai les liens à la fin.

Il partageait ses recettes secrètes, et ses techniques pour qu'on s'en inspire. Toute cette démarche, c'était une façon – pour reprendre ses mots – de “démystifier” le processus de création. Il appelait cette démarche ‘Open Design’, expression que je ne connaissais pas encore.

Qu'est-ce que ça remet en question ? Ça m'a permis de remettre en question ma propre pratique de designer. Un créateur a tendance à cacher la façon dont il a pensé et réalisé un projet, étant donné qu'on tire un revenu de nos créations, et qu'a priori on détient quelque chose d'unique. J'y reviendrai sur l'aspect unique lorsque j'aborderai les notions d'originalité et de copie. La démarche de collaboration peut paraître évidente pour les personnes parmi vous qui contribuent dans le monde du code. Mais elle est plutôt peu répandue dans le domaine de la création graphique et plus largement artistique.

Comment contribuer en tant que designer web? Vous pouvez : • partager vos méthodes, vos recherches via un blog, une vidéo tutoriel • partager le résultat de votre travail : par exemple les personnes qui créent des animations CSS, je m'en suis servi en modifiant le CSS et les utiliser sur mes projets (merci à ces contributeurs)

[Transition] Dans cette optique de partage de son travail, je vais vous présenter deux autres exemples auxquels je porte beaucoup d'attention, dans le domaine de la typographie cette fois. 2– Open Typography: Velvetyne Type Foundry and OSP Foundry

Dans nos métiers, nous sommes amenés à choisir des fontes pour des sites ou des app mobile. Quels choix s'offrent à nous ? • Vous pouvez acheter des fontes auprès de fonderies connues, il y en a de magnifiques Et vous rémunérez le travail des typographes • Vous pouvez utiliser des fontes gratuites en ligne, avec des fonts de qualité et d'autres moins • Et parmi les fontes gratuites en ligne, vous avez les fontes Open Source

Deux exemples VTF (Velvetyne Type Foundry) et OSP Foundry. [slide : Fengardo Neue et Lment] Ce sont des typographes qui mettent à disposition gratuitement le résultat de leur travail. Vous pouvez télécharger leurs familles de caractères. Certaines de leurs fontes sont disponibles sur des repositories GitHub : vous pouvez dupliquer/forker une branche, développer votre version, la distribuer, ou contribuer. Pensez à lire le fichier README.md pour vous informer sur la licence. (Plusieurs types de licences Open Source.)

En quoi l'Open Design peut être intéressant dans ce cas? Lorsque vous choisissez une fonte chez VTF ou OSP : • la qualité du dessin des caractères et du rendu (lorsque l'on regarde de plus près certaines familles de caractères gratuites en ligne, les dessins ne sont pas toujours au point et il y a aussi de vraies catastrophes) comme dans tous les domaines, l'expérience et la maîtrise de son domaine font la différence, qui apporte une plus-value • dans ces cas particuliers ce sont deux fonderies de tailles réduites qui travaillent dans l'open source : ce sont aussi des typographes et designers qui ont une approche expérimentale, repoussent les limites, ils ont une liberté totale de conception [slide OSP] • ce sont des caractères qui ont beaucoup de particularité ; • il y a quelque chose qui se dégage, qui donne une atmosphère particulière. C'est une façon de contrer l'uniformisation ; bien sûr si on se met tous à les utiliser, on retombe sur de l'uniformisation, mais je doute que cela arrive. (Beaucoup utilisons la Roboto, l'Open Sans, la Source Sans Pro) Ça fait du bien de voir des choses inattendues, nouvelles.

Quelles sont les conséquences quand vous choisissez une de ces fontes ? C'est un choix artistique fort de votre part.
Quand vous utilisez leur fonte, vous soutenez aussi leur démarche de travailler dans l'open source, vous êtes invité•e•s à créer votre propre version et à devenir acteur–ice dans l'Open Source Pour des associations, des organismes publics, pour des designers free lance (selon le client et la taille du projet, il n'y a pas de budget pour payer une fonte) ; ça a un sens d'utiliser un travail de qualité, gratuit, dont la démarche est le partage. C'est aussi ça l'intérêt de l'Open Design dans ces cas.

Qu'est-ce que ça apporte de plus ? – Ateliers Ils organisent parfois des ateliers (moments riches) gratuits pour dupliquer une fonte, et créer de nouvelles versions. [slide FFF : Cooper Hewitt] Ils vous accompagnent pendant l'atelier qui durent 2 jours par exemple, et se termine avec une restitution et une présentation du travail de tou•te•s. Si vous avez des bases pour le dessin de caractères, n'hésitez pas à participer. Ou bien aller observer les ateliers, regarder les résultats et discuter. C'est ce que j'avais fait. Ce que j'apprécie vraiment dans les exemples que je vous ai montrées, c'est que ces personnes, en plus de leur travail, transmettent leur passion.

Aller plus loin – Copyleft Le point de vue que j'aimerais proposer ici : [slide : logo copyleft] Parmi vous, il y a des designers qui se disent peut-être : je n'ai pas l'intention de partager mes techniques et mes réalisations, c'est on travail original. Vous pouvez décider d'ouvrir certains de vos projets (sous les formes qu'on a pu voir dans les exemples précédents) ; si vous partagez vos techniques, les résultats seront toujours différents du vôtre. Les développeurs s'entraident. C'est une base technique qui aidera quelqu'un d'autre, qui réalisera autre chose. Ça ne peut apporter que du positif et permettre à tout le monde de progresser. C'est additionner des savoir-faire et des intelligences. Si vous lisez que votre travail a aidé ou inspiré quelqu'un. Belle récompense.

[Transition] On a vu comment ouvrir et partager ses méthodes, son travail aux autres designers. Les avantages et les problèmes que cela peut poser. Il arrive que des organisations intègrent leur public dans ce processus. Je vais prendre le cas de la refonte de l'identité visuelle de Mozilla. Comment partager ses méthodes dans ce cas ? Quelles peuvent être les limites ? Comment aller plus loin ? 4 – Refonte d’identité visuelle • Comment partager les pratiques de design graphique?

Mon but ici n'est pas de donner mon avis sur les propositions. Pour rejoindre ce dont j'ai parlé précédemment, j'aimerais exposer la façon dont les designers peuvent y prendre part.

La conception du nouveau logo de Mozilla [2 slides] 1. En juin 2016, Mozilla a lancé une consultation ouverte pour la conception d'un nouveau logo, pendant l'un des deux rendez-vous internationaux annuels des employés et bénévoles. [slide] Premier point remarquable. Ils travaillent régulièrement dans cette démarche de “work in the open”, volonté de transparence des étapes de travail. 2. Ensuite le processus de consultation, de conception a été rendu public et accessible sur internet. (Lien) 3. Autre point remarquable : Mozilla a ouvert les commentaires au public / internautes pour les 7 premières propositions livrées par l'agence à laquelle ils ont fait appel. (Il y a 4 nouvelles propositions.) Cela ouvre une nouvelle façon de collaborer qui est très intéressante.

J'ai lu beaucoup beaucoup de commentaires, qui supportaient ou rejetaient chacune des 7 propositions. Il y a eu des avis extrêmement variés, du monde entier, parfois passionnés. J'aime bien celui-ci ça correspond à ce que Mozilla représente pour moi, j'aime moins celui-ci parce que, etc.

Quelles sont les questions soulevées ? Quelles peuvent être les limites de cette démarche ? Ce sont des commentaires basés sur l'expérience, les connaissances personnelles, la culture de chaque personne qui a commenté. Vous pouvez avoir un pressentiment pour ces 7 propositions. Ce n'est pas si simple de choisir un logo sans bases en design graphique, il y a des conséquences qui découleront : • c'est un résultat qui sera utilisé sur du long terme • c'est l'identité d'un groupe et d'une marque connus

Comment aller plus loin ? Les questions soulevées Je vais d'abord vous donner un exemple pour comparaison. Si vous demandez au public de choisir un bâtiment dans un concours d'architecture. Sur quels critères le public va-t-il se baser pour juger, pour dire si un projet architectural est acceptable ou pas? Il y a des bases techniques et esthétiques que l'on apprend : des cours techniques (relevé et dessin technique, résistance des matériaux), l'histoire de l'art et de l'architecture, la conception de projets. Ça forme un tout qui fait que vous êtes un peu plus apte à juger un projet d'architecture que quelqu'un d'autre.

Il faut au minimum des connaissances et une culture dans le domaine que vous jugez : la musique, l'écriture, le code.

Dans le cas de Mozilla, voici quelques pistes pour juger de la qualité graphique. • l'efficacité en grand (bâche), en petit (cartes de visite), en impression, pour du web, en couleur, en noir et blanc • ensuite il y a le dessin et le tracé : quel rythme y a-t-il? y a-t-il des tensions créées entre les parties pleines, les parties vides? • comment il s'inscrit dans l'histoire du design graphique? • est-ce le résultat apporte réellement quelque chose? déjà vu? a-t-il l'air trop quelconque? • quels sont tous les sens qu'on peut y lire? • est-ce que ça répond à la demande de votre client? quel est son domaine? à qui s'adresse-t-il? Mozilla et ses utilisateurs, aux profils très variés

Comment aller plus loin ? – Éducation visuelle et boîte à outils Cet exemple a conforté mon sentiment du besoin d'une éducation visuelle et critique, qui permettrait de considérer les sept propositions de façon appropriée. Une boîte à outils, aide à la lecture visuelle, une aide pour former l'œil. Et c'est très belle opportunité pour les designers d'accompagner ce processus ouvert en expliquant autour de soi quels éléments sont à regarder et en quoi ils constituent une qualité ou une faiblesse dans la proposition. Ceci est recevable, ceci ne l'est pas. 6 – Conclusion

J'espère vous avoir donné des pistes sur ce qu'est l'Open Design. [slide réf.] En quoi ça peut être utile, chacun•e dans nos métiers. Que chacun•e – selon vos métiers – a pu relever des points, des questions qui l'intéressent, et des pistes pour aller plus loin. Comment l'Open Design peut faire évoluer nos façon de regarder, de travailler et de collaborer, de créer. Et je vous invite à en discuter après la présentation.