Haute en Coolors


Le travail de la Couleur est une des spécialités du Design et plus précisément de l’UI. Certains en ont d’ailleurs fait un métier à part entière. Je pense, par exemple, aux graphistes qui mettent en couleur les bandes-dessinées et autre films d’animation. Comme pour le Dessin, le travail de la couleur nécessite un vrai savoir-faire et souvent un don.

La Couleur est surtout au cœur de stratégies de communication. Son utilisation et les choix qui lui sont liés doivent porter les valeurs que l’on veut transmettre, le territoire visuel que l’on souhaite occuper. La couleur illustre aussi le valeurs de l’entreprise. Ai³ a choisi le rouge pour illustrer la Passion qu’il l’anime et l’a toujours animée.

S’il y a une dimension « mode » et « saisonnière » dans le choix des couleurs (nos créateurs de mode en savent quelque chose), c’est surtout la question de leur interprétation qui mobilise l’esprit des équipes marketing. Alors, comment choisir une couleur ? Sur quel registre faut-il s’appuyer pour que tout le monde s’y retrouve ? Bien sûr, on peut utiliser l’apprentissage que l’on en fait à l’école (l’herbe est verte, le ciel est bleu… etc.) Ou bien se référer nos diverses religions friandes en symbolismes colorés ?

Egalement, notre société nous transmet certains codes sur la couleur : code de la route, symbolique citoyenne… Etc. On peut aussi interroger notre histoire, chaque grand événement est associé à des couleurs (par exemple, le noir associé au blanc et rouge peut évoquer le IIIe Reich). Les dimensions physiques et métaphysiques sont aussi à prendre en compte (on connaît les vertus curatives et « magiques » de certaines teintes). Les tabous et les interdits peuvent aussi être associé à des couleurs… Bref, les angles sont multiples et passionnants.

A défaut de trouver une réponse précise à « Comment choisir une couleur ? » on pourra se rabattre sur les outils qui facilitent ce choix. Ces ressources sont nombreuses et souvent gratuites. A défaut du pourquoi, on pourra essayer le « comment » et se fier à ses (premières) impressions (qui sont souvent les bonnes).

Dans la série ressources couleurs qui vont bien, voici coolors. Pas très loin de l’application d’Abobe ou de Pantone que tout le monde connaît. Ici il s’agit de choisir des harmonies en partant d’une teinte de base. On en choisi une et en appuyant sur la barre d‘espacement, on peut faire défiler des propositions qui vont bien.

Simple, beau et ludique, coolors peut sauver la vie aux handicapés de la Couleur que nous sommes (que je suis ?). Sans doute le plus simple et le plus ludique dans le genre. Incontournable, donc. On pourra également naviguer dans une multitude d’harmonies proposées par la communauté, sélectionner une nuance, la modifier, récupérer la référence hexadécimale qui correspond, etc. Une bonne ressource !

Prototyper, quel format pour quel usage ?

Un article de Vincent Forner

« Prototyper, c’est construire une représentation visuelle, une ébauche plus ou moins aboutie simulant le fonctionnement de l’interface d’un système, d’un produit ou d’un service à venir. »

Tout comme le ferait un architecte qui imagine un bâtiment, les concepteurs de systèmes interactifs se servent des prototypes comme support de travail pour réfléchir aux meilleures solutions possibles, tester, communiquer et challenger des idées. Les prototypes économisent des modifications coûteuses de code sur un système fonctionnel en testant le système au plus tôt. De plus, ils permettent de créer une vision partagée du système et de réduire les incompréhensions entre les membres d’une équipe (le prototype pouvant aller jusqu’à servir de spécifications pour une équipe de développeurs), les clients ou les investisseurs (le prototype devenant alors un outil de démonstration).

Le prototypage est donc une activité qui peut faire gagner un temps précieux dans un projet, à condition de l’utiliser rationnellement. Tout est question d’équilibre entre l’effort consacré à la création d’un prototype et les bénéfices qu’on espère en tirer. Aussi, connaître les différents formats de prototypes pour choisir le plus adapté à ses besoins apparaît primordial.

Les différents formats de prototypes

Un prototype peut se présenter sous une multitude de formes et sous différents niveaux de fidélité et d’interactivité selon ce que l’on souhaite démontrer/tester avec ce prototype, et ce que l’on compte en faire à terme. On parle de dimensions du prototype :

  • Forme de représentation (papier, vidéo, logiciel …)
  • Niveau de précision/fidélité (informel jusqu’à réel)
  • Niveau d’interactivité (regarder jusqu’à agir)
  • Évolution du prototype (jetable jusqu’à itératif ou incrémental)
  • Stratégie (orienté tâche, interaction ou scénario, couverture fonctionnelle horizontale ou verticale)

Le format d’un prototype est défini par chacune de ces 5 dimensions. Par abus de langage et pour simplifier, il est commun de catégoriser les prototypes selon les 3 formats suivants :

Maquette/Prototype papier (Sketching)

On parlera de « maquette/prototype papier (Sketching) » pour des maquettes papier statiques ou avec une interaction simulée (vidéo, déplacement manuel des papiers, Magicien d’Oz…)

blog ai3 So-youz%20Prototyper2 Prototyper, quel format pour quel usage ?
Original photo by Amélie Mourichon on Unsplash

Wireframe

Un wireframe est une maquette statique schématisant la structure d’une interface en intégrant du contenu et des éléments fonctionnels plus ou moins détaillés (on pourra parler de Mockup pour un wireframe « haute-fidélité »).

blog ai3 So-youz%20Prototyper3 Prototyper, quel format pour quel usage ?
Derivative of « NCDOT Home Page » Wireframe and Mockups by After Victory under CC BY 2.0

Maquette/Prototype interactif

On parlera de « maquette/prototype interactif » pour des maquettes interactives (logique portée par la maquette) reprenant des éléments d’interface et du contenu réel.

blog ai3 So-youz%20Protoyper%204 Prototyper, quel format pour quel usage ?
Original photo by Balázs Kétyi on Unsplash

Si on considère la combinatoire des 5 dimensions énoncées plus haut, on se rend vite compte de la limite d’une telle classification. Aussi, les termes pour désigner un prototype pourront varier d’un ouvrage et d’un professionnel à l’autre. Cette classification a cependant le mérite d’offrir une bonne vue d’ensemble des formats de prototype les plus courants, et à ce titre reste une base du prototypage.

Choisir son format

Prototyper prend du temps, un prototype réussi ne sera pas forcément le plus détaillé mais au contraire le minimum nécessaire pour atteindre vos objectifs.  Il n’y a donc malheureusement pas de format miracle, il faudra faire le choix du format le plus adapté à votre contexte, vos moyens et vos contraintes.

Se poser les bonnes questions permet d’amorcer efficacement le processus de prototypage, à savoir :

  • Quel est mon objectif avec ce prototype ?
  • Mon objectif est-il en phase avec les objectifs et les priorités de mon projet ?
  • A quelle audience mon prototype est-il destiné ?
  • Quelles sont mes ressources/contraintes pour atteindre mon objectif (données, temps, compétences, outils …) ?
  • Que vais-je prototyper ?

Le schéma suivant (traduit et adapté à partir de celui-ci dont l’article est cité plus bas dans les sources) positionne les raisons courantes d’une activité de prototypage selon les dimensions de niveau de fidélité et de stratégie. Deux dimensions sur cinq étant couvertes, ces 4 catégories ne sont évidemment pas exhaustives mais constituent néanmoins un bon exemple de base de réflexion dans le choix du format d’un prototype.

blog ai3 So-youz%20Prototyper%205 Prototyper, quel format pour quel usage ?

Conclusion

Peu importe le nom qu’on lui donne, l’essentiel est de se poser les bonnes questions sur ce qui motive une activité de prototypage et de considérer les cinq dimensions du prototype afin d’identifier le format le plus adapté à ses objectifs, ressources et contraintes dans le cadre de son projet. Idéalement, le choix du format sera réalisé par une équipe pluridisciplinaire intégrant des compétences sur l’expérience/les interfaces utilisateur et sera fondé sur une analyse de besoins réalisée au préalable.

Bien que souvent associé au domaine logiciel, il ne faut pas oublier que les prototypes sont tout autant utilisés pour des produits physiques et qu’au-delà des formats courants que nous avons vu dans cet article, les formats utilisés (du papier jusqu’à l’imprimante 3D en passant par les LEGO) n’ont pour limite que l’imagination des concepteurs !

blog ai3 Soyouz%20Prototyper9 Prototyper, quel format pour quel usage ?
Cardboard prototype by Plusea under CC BY 2.0 / Photo by Xavi Cabrera on Unsplash

Sources

• Ouvrages :

Méthodes de design UX : 30 méthodes fondamentales pour concevoir des expériences optimales
Livre de Carine Lallemand et Guillaume Gronier

Design d’expérience utilisateur : Principes et méthodes UX
Livre de Sylvie Daumal

• Sites web :

https://www.interaction-design.org/literature/article/design-thinking-get-started-with-prototyping
https://www.interaction-design.org/literature/article/prototyping-learn-eight-common-methods-and-best-practices
https://uxdesign.cc/the-right-tool-for-the-job-picking-the-best-prototyping-software-for-your-project-6ddd5145d860
https://gizmodo.com/replacing-parts-of-3d-printed-models-with-lego-speeds-u-1569310877
https://www.mockplus.com/blog/post/wireframe-mockup-prototype-selection-of-prototyping-tools


#design #prototypes #maquettes #tests #communication

MonOrdo, un concept dans l’air du temps

Nous sommes fiers d’avoir participé à ce projet innovant et complétement d’actualité.

MonOrdo est une start-up toulousaine créée en 2019. C’est aussi une application au concept complétement d’actualité puisqu’il s’agit d’ordonnances digitales qui peuvent être éditées, stockées, échangées. Ces « e-prescriptions » peuvent circuler de façon complétement sécurisée et transparente (MonOrdo est conforme, sécurisée « HDS » et enregistrée auprès de la Sesam-Vitale et de l’ANS). Autant dire que ce service arrive à point nommé dans un contexte d’urgence sanitaires que nous connaissons actuellement.

MonOrdo permet la simplification du parcours de soin : de l’émission de l’ordonnance jusqu’à la délivrance du traitement. Ce nouveau service s’adresse à 3 types de population : les médecins qui peuvent prescrire à distance. Ces ordonnances sont certifiées et sécurisées. Les patients qui reçoivent leur ordonnance directement sur leur mobile et qui peuvent les transmettre à leur pharmacien. Les pharmaciens, enfin, qui peuvent mieux gérer leur relation commerciale et éventuellement mettre en place un système de « click and collect » complétement adapté au confinement que nous connaissons actuellement.

So-youz, l’entité conseil d’Ai³ a eu le plaisir d’accompagner, côté UX et UI, ce très beau projet qui fait complétement sens dans le contexte actuel. Tous nos vœux de réussite vont à l’équipe de MonOrdo et nous reviendrons bientôt sur ce projet et cette application !


Pour plus d’informations, rendez-vous ici-même.

Redécouvrons les fondamentaux de la Couleur et de ses harmonies !

Un article de Manon Lay, designer UX/UI chez So-youz

Introduction

Que ce soit dans le domaine du design graphique, de la photographie, ou de l’aménagement d’intérieur, l’harmonie des couleurs est une donnée importante qui permet de mettre en valeur une composition.  

L’harmonisation des couleurs permet indépendamment des goûts et affinités de chaque personne, d’obtenir une combinaison de couleurs qui fonctionne dans tous les cas.  

Le cercle chromatique permet de visualiser les différentes combinaisons de couleurs possibles.

Le cercle chromatique, c’est quoi ?

blog ai3 Cercle_chromatique@3x-100 Redécouvrons les fondamentaux de la Couleur et de ses harmonies !

Le cercle chromatique représente les familles de couleurs conventionnelles et leurs dégradés, on pourra utiliser leurs saturations ou encore leurs luminosités pour augmenter la palette de dégradé. 

Le cercle chromatique est composé de 3 groupes de couleurs : 

  • Les couleurs primaires :cyan, magenta et jaune qui sont les couleurs de base (elle ne sont composées d’aucun mélange)  
  • Les couleurs secondaires : rouge, vert, et bleu qui sont les mélanges issus à parts égales de deux couleurs primaires  
  • Les couleurs tertiaires : regroupent toutes les autres couleurs qui sont des mélanges des trois couleurs primaires dans différentes propositions. 

+ un dernier groupe qui ne fait pas partie du cercle : les couleurs achromatiques, sont le noir, blanc et le gris.

blog ai3 Couleurs@3x-100 Redécouvrons les fondamentaux de la Couleur et de ses harmonies !

Quels sont les grands principes pour utiliser le cercle chromatique ?

blog ai3 Principes@3x-100 Redécouvrons les fondamentaux de la Couleur et de ses harmonies !
  • L’harmonie monochromatique (ou camaïeux) :l’utilisation d’une seule couleur en utilisant différents tons de cette couleur  
  • L’harmonie complémentaire : l’utilisation d’une couleur principale et de la couleur directement opposée (elles permettent de créer un dynamisme entre les couleurs) 
  • L’harmonie analogue : l’utilisation d’une couleur principale et des couleurs qui se trouvent directement à côté (cela permet d’avoir accès à une gamme plus large de couleur tout en restant harmonieux) 
  • L’harmonie triade :l’utilisation de trois couleurs se trouvant à égale distance dans le cercle (à utiliser avec une couleur principale et les deux autres couleurs avec moins d’intensité pour éviter une surcharge) 
  • L’harmonie en carrée : l’utilisation de quatre couleurs se trouvant à égale distance dans le cercle (à utiliser de manière plus délicate puisqu’elle couvre une grande partie du cercle chromatique)

Quels outils peut-on utiliser ?

blog ai3 Examples@3x-100 Redécouvrons les fondamentaux de la Couleur et de ses harmonies !

Parmi tous les outils disponibles sur le web pour créer des harmonies de couleurs, voici quelques exemples d’outils utilisés couramment :  

Paletton :  permet de créer une gamme de couleurs rapidement en utilisant les différents types d’harmonies  

Adobe Color CC :outil de la suite adobe qui permet de générer des palettes de couleurs avec le cercle chromatique  

Coolors propose des définitions déjà créées de palettes de couleurs 

Et après ?

Pour aller plus loin, on pourra se renseigner sur la signification des couleurs.  

Chaque couleur a une ou plusieurs significations qui peuvent provoquer différentes émotions.  

Ces propriétés sont intéressantes à connaitre pour permettre d’adapter vos compositions et d’avoir plus d’impact sur la personne qui les regarde. 

Voici les liens de deux articles qui donnent plus d’informations à ce sujet : 

• 99 designs

• La Cascade

#design #couleurs #harmoniedescouleurs #cerclechromatique #outils 

Milton Glaser (et les 10 choses qu’il nous apprend)

En plus d’avoir créé le logo « I Love NY » ou le poster avec un Bob Dylan coloré et hirsute, Milton Glaser a toujours eu plein de choses à dire.

Il est toujours bon d’apprendre d’un « grand » du métier, surtout quand il s’agit d’un des  derniers « monstres » du Design. Je me rappelle de l’intervention de Milton Glaser lors de son passage à lAIGA Talk (Londres en 2001). C’était beau et ça nous avait interpellé quant à la nécessité que le Design soit régi par des lois éthiques plutôt que commerciales. Du bon sens mais aussi une véritable révolution idéologique.

Pourquoi ? Parce que tous les métiers qui font appels à des pratiques créatives débordent forcément du simple cadre économique. Quel prix donner à une œuvre de l’esprit ? Celle que le marché est prêt à payer sur l’instant ! Demain, le marché disparaîtra et l’Idée – ce petit truc indescriptible qui nous différencie des autres espèces animales – continuera à faire tourner le Monde.

Alors, la responsabilité des graphistes, UI, plasticiens est de rendre les choses un peu plus jolies avec des idées visuelles et originales, aujourd’hui, pour que notre vie soit un peu plus agréable, demain. C’est, à mon sens, une vraie responsabilité au delà de la simple réponse à un cahier des charges.

Responsabilité que Milton Glaser reconnaît également en vous livrant ses fameux 10 commandements quand il parle de son métier (et une possible feuille de route pour nos futurs créatifs) :

  • On ne peut (bien) travailler que pour des gens que l’on aime bien !
  • Si tu as le choix, n’ai jamais un « job » plutôt une Passion,
  • Certaines personnes sont toxiques (évites-les)
  • Le professionnalisme n’est pas assez (le Bien est l’ennemi du Grand)
  • Moins ne veut pas nécessairement dire Plus
  • Il ne faut pas croire dans le dernier style à la mode
  • Comment tu vis change ton esprit
  • Douter est mieux que de trop croire en soi
  • L’âge ne compte pas (pour peu que l’intelligence soit là !)
  • Dis la Vérité !

Gerd Arntz, grand maître du pictogramme !

Voici une petite introduction à un designer allemand  pionnier dans cette spécialité qu’est le pictogramme. Ultra-utilisé dans le numérique et le Web, ce concept est né d’une vraie volonté politique et d’une recherche d’universalité dans la Communication.

Le graphiste allemand Gerd Arntz  est né en 1900 à Remscheid. Issu d’une famille d’industriels fortunés, Gerd se forme à l’école d’art de Düsseldorf et bien vite affiche une orientation politique très à gauche. Fidèle à ses convictions, il intègre le Groupe des Artistes Progressistes pour (d’après Wikipedia) « produire une représentation graphique des rapports sociaux, et plus particulièrement de ceux qui concernent la guerre et le capitalisme. Son art était destiné à agir directement sur la société, au moyen d’un style directement constructiviste. Il poursuivit ce projet jusque dans les années Trente, notamment en considération du fascisme qui se développait alors en Europe. » Du fait de cette démarche particulière, Gerd orienta son travail vers « un symbolisme censé être universellement compréhensible » et donc se spécialisa dans ce qui n’était pas encore nommé « pictogrammes ». Il est intéressant de noter que derrière les fonctionnalités affichées du dit pictogramme se cache une volonté politique de communiquer quasi « universellement ». Notons également que toujours d’après Wikipedia, un pictogramme est « une représentation graphique schématique, un dessin figuratif stylisé fonctionnant comme un signe d’une langue écrite et qui ne transcrit pas la langue orale. Il sert généralement à la signalétique pour s’orienter dans l’espace réel ou communicatif comme l’Internet. Lorsque possible, il constitue une alternative à la signalisation bilingue, permettant de diminuer la quantité d’information inscrite sur un panneau, et permettant d’éviter (ou de diminuer) les controverses accompagnant le choix des langues d’affichage dans les zones où, par exemple, des groupes xénophobes cohabitent avec des populations d’origine différente.» Sur le site de Gerd Arntz, on trouvera une bonne introduction à son travail (surtout dans la rubrique isotype, sorte de version bêta des pictogrammes tels que l’on connaît aujourd’hui). Il est amusant que son travail a depuis été maintes fois « pillé » surtout dans les publications de pictogrammes et autres logos sans droits. Ses visuels, ultra-diffusés, font donc parti de notre inconscient visuel et c’est assez drôle de mettre un nom sur ces classiques…

Cinq outils incontournables pour créer de l’infographie

Le design d’information est au cœur de l’internet d’aujourd’hui.

D’après Wikipedia : « Le design d’information a été défini comme « l’art et la science de la préparation de l’information afin qu’elle puisse être utilisée par les êtres humains avec efficience et efficacité ». Terme apparu dans les années 1970. Le design d’information signifie à la fois dessin et projet, qui traduit une information claire et directe. L’information utile n’est pas un accroissement de la quantité d’informations mais tout au contraire une réduction de cette quantité par des regroupements pertinents. Le design d’information ou le traitement graphique de l’information se traduit comme l’arrangement des modèles d’organisation afin de fournir à l’utilisateur un contexte et un sens à l’information. Ce design, essentiellement graphique, se destine à structurer, à mettre en forme, en donnant à des informations des contenus et des valeurs complexes. » A cette définition de base, on pourra ajouter la conception même des informations que l’on devra ensuite organiser puis traiter visuellement. Même si il peut paraître paradoxal de parler de « création » d’information. Mais rappelons que nous sommes ici dans un contexte publicitaire et que depuis toujours la « Com » contrôle voir invente l’information qu’elle diffuse. Si le Web offre un nouveau terrain de jeux aux spécialistes du marketing, on se rend également compte qu’il lui manque ce combustible rare que sont les contenus. Sinon, pourquoi se procurer illégalement ce qui pourrait nous être offert légalement et souvent gratuitement ? (Je pense, par exemple, au piratage massif de films, séries … Etc.) Du coup, ces contenus, cette information, sont les réels enjeux du numérique plus que le « tuyau » et son débit ou un nouveau framework informatique particulièrement bien adapté.

Le graphiste, on préférera utiliser le terme « User Interface » (UI), lui aussi, se doit lui aussi de traiter cette information si précieuse et si rare. Le terme « infographie » prend alors tout son sens, littéralement : mettre en image l’information. Le blog makeuseof (muo, pour les intimes) nous propose, dans ce post : 5 Outils gratuits et en ligne pour pouvoir créer ces petits schémas qui en disent plus qu’un long discours. Générateurs d’histogrammes et de camemberts, outils de dessin vectoriels, nuages de mots clés

Tout y est ou presque et nous permettra de réaliser facilement les basiques de cette spécialité. Le résultat est souvent surprenant. A explorer…

Le gabarit de mise en page

Il n’existe qu’un seul secret de fabrication pour faire une belle mise en page. Qu’elle soit numérique ou pas. Quelle soit responsive ou statique. Ce secret (qui n’en est pas un) a maintenant un site dédié…

En design, on doit le fameux gabarit de mise page au Style Typographique International (également appelé le Style International). Ce mouvement graphique né dans les années 50 (notamment en Suisse) mettait l’accent sur la clarté, la lisibilité… Bref une certaine objectivité qui passait également par des choix typographiques orientés sans-serifs et des choix iconographiques excluant définitivement l’illustration. L’Helvetica designé par Max Miedinger, en 1957, est un héritage de ce courant.

Afin de structurer leur démarche, ces graphistes suisses ont formalisé ce qui jusque-là ne l’était pas : le gabarit de mise en page. Je pense plus particulièrement à Josef Müller-Brockmann et son ouvrage de référence : The Grid System (d’où le nom du site cité plus loin dans cet article). Il me faut cependant préciser que le gabarit existe depuis la création de l’imprimerie et est déjà présent dans la Bible à 42 lignes, premier livre imprimé par Gutenberg en 1455.

Celui qui contrôle cette « maudite » grille, contrôle l’art du lay-out quelque soit le format, la pagination, le support et le message à faire passer. Pour être plus précis, n’importe quelle publication digne de ce nom commence par un gabarit spécialement étudié pour en optimiser la lecture et le look and feel. Le framework « Bootstrap » l’a bien compris et l’utilise comme concept de base pour rendre « responsive » un site web. Le fait de re-dispatcher des contenus de 12 colonnes à un minimum de 2 permet de s’adapter à n’importe quel format d’écran. Le gabarit permet d’optimiser le rapport du contenu à l’espace qui lui est dédié. Simple mais efficace.

Bref, c’est Ze secret de beauté des designers. Il existe quelques livres plus ou moins précis sur le sujet (dont un plutôt technique chez Pyramyd)… Voilà, enfin, un site qui regroupe (en anglais) un certain nombre d’infos et de ressources gratuites : The Grid System. Un outil précieux pour les UX designers et les graphistes qu’il faudra bookmarker et consulter quotidiennement !

Un jour prochain, j’aborderai également la grille modulaire de mise en page qui sert à la même chose mais qui ne fonctionne pas exactement de la même façon. Mais ça, c’est une autre histoire.

Le Web design par le détail

MephoBox est un projet en ligne, né de la passion d’un designer pour les « beaux » sites bien faits. À l’origine, cette ressource devait juste être un outil pour faire de la veille. Mais très vite, Justin (un graphiste anglais) a eu envi de partager cette source d’inspiration avec sa communauté. Aujourd’hui, plus de 8000 membres suivent MephoBox. Bien sûr, cette « communauté » s’appuie sur un site divisé en plusieurs galeries. Galeries qui font un focus sur certaines micro-pratiques du Web design. Ainsi et par exemple, on pourra parcourir des « best of » visuels dans les domaines du « account login’ », du « call to action », du « navigation menu », des « submit forms » ou  des « pimpin’ forums »…Etc. Autant de « spécialités » auxquelles un Web designer doit s’attaquer quotidiennement.  Si la globalité d’un bon design web « fonctionne », s’est parce chacune de ses composantes graphiques a été pensée avec précision, réalisée avec goût et talent. Il s’agit, ici, du fameux design « par composants » dont il est question qui est la particularité du design d’interfaces. Chaque bout de « fonctionnel » doit être visualisé et son utilisation doit être facilitée puis doit faire partie d’un tout à son tour « utilisable » et graphiquement beau et cohérent.

Pour en revenir à MephoBox… On y découvrira un paquet de rubriques correspondant à la plupart des « spécialités » auxquelles un Web designer doit s’attaquer quotidiennement dans son travail.  Ce portail est donc véritablement une ressource ciblée avant tout pour les Web designers ou pour tous ceux qui travaillent dans l’UX et l’UI. Toutes les galeries proposées permettent un « voyage » visuel qui ne manquera pas de réveiller notre créativité endormi par le froid hivernal. On peut bien sûr, s’inscrire et soumettre au groupe son travail et ses tatonnements ergonomiques. Enfin, la création « globale » est elle aussi abordée via le meilleur des sites Web (façon fwa) et ce à travers l’onglet « websites ». À noter, enfin, le design plutôt sympathique et très dans l’air du temps de MephoBox (qu’on ne manquera pas de consulter régulièrement).

Design is history

L’Histoire du design graphique est pavée d’individus plus que de grands mouvements structurants (comme dans l’art avec un grand A). Pourtant le Design a accompagné chaque grand mouvement artistique du XXe siècle (du Constructivisme, aux Dada en passant par le Futurisme) que ce soit via les Arts appliqués ou que ce soit via la création typographique.

Mais quand on aborde l’histoire du Graphisme, on en revient toujours aux individus. Des egos, souvent mégalos, parfois rigolos ! Du coup, il est parfois difficile d’avoir une vision globale quant à son évolution au fil des décennies. Quelques fois, certains designers « couvrent » plusieurs mouvements artistiques. (C’est le cas, par exemple, de Marcel Jacno). Ce qui rend une vision globale encore plus difficile à exister.

Le site Design is History est précieux car il permet cette synthèse visuelle. Initié par Dominic Flask de DangerDom studios, Design is History est une plongée dans cette histoire qui débute avec le père spirituel de tous les graphistes/UI, Gutenberg et qui s’achève  par un catalogue des pratiques actuelles. Entre ces deux repères temporels, c’est un véritable voyage dans le temps qui nous est proposé.

Né professionnellement dans les eighties, je me suis bien sûr plongé, la tête la première, dans cette furieuse décennie… Emigre, le Macintosh, Designers Republic, Neville Brody et tous les autres ! Tout (ou presque) y est mentionné, abordé. Parfois juste survolé, ce qui peut être un brin frustrant. Autre richesse de ce site, sa sélection de liens, sorte de best of des meilleures ressources graphiques en ligne (côté culture métier). Un des derniers articles publié concerne une de mes récentes révélations (un must visuel) : Erik Nitsche. Allons, de ce pas, parfaire notre culture visuelle en cliquant ici.