All Posts in Graphic design

April 27, 2018 - No Comments!

La page 2 de Google n’existe plus!

L’avez-vous remarqué? La pagination des résultats de recherche du moteur de recherche Google n’existe plus, du moins sur les téléphones et tablettes intelligents.

Google effectue actuellement des tests d’optimisation et de présentation des résultats de recherche de sa plateforme mobile. Le changement sera bientôt déployé à l'ensemble de la communauté. Fini la pagination des résultats de recherche. C’est la navigation par défilement vertical qui est mise à profit sur mobile avec l’ajout d’un bouton « Plus de résultats » situé tout en bas des résultats de recherche.

Le nouveau bouton «Plus de résultats» remplace le système de pagination du moteur de recherche de Google sur plateforme mobile.

Le nouveau bouton «Plus de résultats» remplace le système de pagination du moteur de recherche de Google sur plateforme mobile.

Une décision sensée qui priorise le contenu de qualité

Ce changement reflète une approche axée sur les besoins et les habitudes des utilisateurs de plateformes de recherche mobile.

D’abord, puisque l’utilisateur ne dépasse rarement la première page des résultats de recherche, il n’a aucunement besoin de savoir que Google lui en offre plus d’une dizaine. Ce qu’il recherche, c’est du contenu de qualité correspondant aux mots clés qu’il a insérés dans le moteur de recherche.

Si l’utilisateur ne trouve pas de réponse dans les premiers résultats de sa requête, il peut utiliser le nouveau bouton « Plus de résultats ». Celui-ci présente à l’utilisateur du contenu de meilleure qualité que celui présenté par l’ancien système de pagination. En effet, chaque fois que ce bouton « Plus de résultats » est appuyé, 10 résultats de recherche naturels supplémentaires sont chargés, puis 3 nouvelles publicités Adwords de Google s’affichent également, mais tout au bas de ces nouveaux résultats de recherche. Ce sont donc les sites web au référencement naturel qui s’affichent en premier, et les publicités des annonceurs en second, contrairement à ce qui se faisait avant!

À vos téléphones!

Avez-vous pris connaissance de cette nouvelle fonctionnalité? Si oui, que pensez-vous de ce changement?

March 14, 2018 - No Comments!

Page d’erreur 404:
Frustration… ou opportunité UX?

Temps de lecture: 5 minutes

Quoi de plus frustrant que d’atterrir sur une page d’erreur 404? Cette page cul-de-sac du web interrompt la navigation et nuit à l’expérience utilisateur.

Cependant, lorsque son design est axé sur l’expérience utilisateur, la page d’erreur 404 peut transformer le désagrément de navigation en véritable opportunité de conversion!

Le présent article contient quelques conseils et bonnes pratiques en matière de design des pages d’erreur 404.

D’où viennent les erreurs 404?

Ce code d’erreur est certainement le plus répandu et le plus connu du web. Renvoyé par les serveurs d’hébergement web, il indique que les ressources ou pages web demandées par l’usager sont introuvables dans la base de données.

Les erreurs 404 peuvent être causées par l’utilisateur lui-même s’il effectue des fautes de frappe lors de la saisie de l’URL. Dans la majorité des cas toutefois, l’erreur provient des administrateurs web.

Causes fréquentes des erreurs 404

La migration d’un site web vers un nouveau serveur d’hébergement

En cas de changement d’hébergement ou de nom de domaine, il peut être difficile d’effectuer la redirection de toutes les pages et tous les liens internes du site web. Certaines pages peuvent être oubliées ou supprimées lors du processus de transfert. Les liens qui mènent à ces pages inexistantes deviennent ce qu’on appelle des « liens morts », puisqu’ils ne mènent nulle part.

La gestion d’un site web

En effectuant la gestion quotidienne ou hebdomadaire d’un site web, certains administrateurs web décident de supprimer un produit par exemple, ou de renommer une catégorie d’article. Certains modules de gestion de site web gèrent mal les changements d’URL occasionnés par de telles modifications, ce qui résulte en l’accumulation de liens morts.

Page d'erreur 404 par défaut

Par défaut, la page d’erreur 404 d’un fureteur présente très peu d’information. Pour les utilisateurs, ces pages sont particulièrement frustrantes parce qu’elles interrompent la navigation.
Source de la capture d'écran: http://www.designbypearl.com/404

Personnalisation de la page d’erreur 404: bonnes pratiques

La meilleure utilisation qu’on puisse faire d’une page d’erreur 404 en termes d’efficacité UX, c’est de s’en servir pour réorienter l’utilisateur et lui permettre de reprendre la navigation. En personnalisant la page d’erreur 404 d’un site web, on évite de perdre le visiteur! Une bonne page d’erreur 404 doit:

1. Informer l’utilisateur de la nature de l’erreur

Elle doit rassurer l’utilisateur en détaillant la nature de l’inconvénient.

Page d'erreur 404 d'Adobe

La page d’erreur 404 du site web d’Adobe, par exemple, indique clairement que la page recherchée est introuvable.
Source de la capture d’écran: https://www.adobe.com/ca_fr/windows

2. Permettre à l’utilisateur de reprendre la navigation

Afin de ne pas perdre le visiteur, la page d’erreur 404 d’un site web doit le rediriger efficacement vers une autre section ou page du même site web. L’ajout d’un moteur de recherche permet à l’usager d’effectuer rapidement une recherche à même le contenu du site. Il est également recommandé d’ajouter des informations de contact.

Page d'erreur 404 de Apple

La page 404 de Apple inclut un moteur de recherche ainsi que plusieurs liens vers les différentes sections du site web.
Source de la capture d'écran: https://www.apple.com/fr/404

3. Être traitée avec humour!

La personnalisation des pages d’erreur 404 est vite devenue partie intégrante de la culture du web. Bien traitée, elle est un gage de qualité au niveau du design et du développement du site web. Plusieurs agences, compagnies et sites web de vente s’en servent pour faire de l’humour!

Page d'erreur 404 de l'agence Featuring

La page d’erreur 404 de l’agence Featuring invite les internautes à participer à un karaoké!
Source de la capture d'écran: https://featuringagency.com/fr/404

Page d'erreur 404 de l'agence Featuring

Sur la page d’erreur 404 de Pixar figure le personnage de Sadness du film Inside out avec la mention ‘Awww… Don’t cry.’ (« Awww… Ne pleure pas. »)
Source de la capture d'écran: https://www.pixar.com/404

Je termine avec la page d’erreur 404 du site web des Jeux olympiques de Pyeongchang. Le comité olympique s’est moqué de l’erreur technique du spectacle d’ouverture des Jeux olympiques de Sochi, en 2014. Les anneaux olympiques présentés au spectacle d’ouverture se formaient à partir de flocons de neige lumineux. Une erreur technique, cependant, a empêché le cinquième anneau de se déployer! ...D’où le visuel humoristique de la page d’erreur 404 des JO de Pyeongchang ainsi que la mention ‘Sometimes, things don’t go as planned…’ (« Parfois, les choses ne se passent pas comme prévu…»)!

Erreur technique du spectacle d'ouverture des Jeux olympiques de Sochi, en 2014

Les anneaux lumineux du spectacle d’ouverture des Jeux olympiques de Sochi, en 2014. Le cinquième anneau ne s’est jamais déployé.
Source de l’image: https://www.webnoviny.sk/fotogaleria/otvaraci-ceremonial-zimnych-olympijskych-hier-v-soci/otvaracim-ceremonialom-odstartovali-zimne-olympijske-hry-v-soci-jpeg-5/

Page d'erreur 404 du site des Jeux olympiquesde Pyeongchang

La page d’erreur 404 du site web des Jeux olympiques de Pyeongchang, en 2018.
Source de l’image: http://olympics.org/404

November 16, 2017 - No Comments!

Les principales étapes de conception, de création et de développement d’un site web

Afin de faciliter la compréhension de mon processus de création de sites web, j’ai créé ce visuel informatif. J’y détaille les différentes étapes de conception, de création et de développement d’un site web.

 

Un travail d’équipe!

Le design d’un site web n’est pas une tâche qui s’effectue en solo! Je travaille en équipe avec vous tout au long du processus. Au courant des étapes préparatoires du projet, vous êtes appelés à réfléchir sur les objectifs de votre site web. Je vous demande également d’identifier votre public cible. Après cette analyse préliminaire, nous sommes en mesure de dresser la liste des contenus à produire et des fonctionnalités à inclure dans votre site web. Nous définissons également un échéancier de production qui nous aidera à maintenir le cap tout au long du processus.

La rédaction du contenu et l’architecture de l’information

C’est au cours de l’étape de rédaction du contenu et d’architecture de l’information que j’organise le contenu en différentes pages et sections. J’utilise un organigramme pour présenter la structure du site web. À cette étape, je commence déjà à penser aux différentes façons de permettre aux usagers d’interagir avec votre site web et de naviguer à travers vos contenus. Au courant du cycle d’approbation, nous finalisons la création des contenus et je peaufine la structure du site web.

La création et le design du site web

Ensuite vient l’étape de la création et du design web. Je commence toujours par assembler des wireframes. Les wireframes consistent en des schémas simples qui permettent de mieux définir les différentes zones et les composantes de chaque page de votre site web. C’est, en quelque sorte, le squelette de votre site web. Une fois les wireframes finalisés, il devient beaucoup plus facile de monter les prototypes du site web. Je crée les prototypes de façon responsive, c’est-à-dire de façon à ce que le site web s’adapte au support où il est visionné, que ce soit sur un écran d’ordinateur, une tablette ou un téléphone intelligent.

Le développement web et l’intégration des contenus

Une fois les prototypes finalisés et approuvés, j’entame le développement web et l’intégration des contenus. Près de 80% des sites web que je produis sont développés à l’aide de la plateforme de gestion de contenus WordPress. Avec WordPress, il vous sera facile de modifier et d’ajouter vos propres contenus, sans toujours avoir à faire appel à mes services! J’offre une formation WordPress pour vous permettre de vous familiariser avec la plateforme. Avant de mettre votre site web en ligne, je fais évidemment plusieurs tests afin de repérer des irrégularités au niveau de la programmation. Une fois que tout est en place et que tout fonctionne parfaitement, j’effectue la mise en ligne!

Prêt à vous lancer?

Comme vous pouvez le constater, le processus de conception, de création et de développement d’un site web est demandant! Ne vous inquiétez pas, votre temps et votre argent seront rapidement rentabilisés. Il n’y a rien de mieux qu’une bonne présence web pour faire connaître votre entreprise et vos services. Maintenant que vous connaissez mieux le processus, êtes-vous prêts à entamer votre projet de site web? Contactez-moi!

À propos de l’auteur

Laurence Pilon est diplômée du programme de design de l’information (design UX et design e-commerce) de l’Université Reading, en Angleterre. Elle travaille présentement à la Fondation du CHU Sainte-Justine. Elle enseigne également le design graphique au Collège Ahuntsic.

November 9, 2017 - No Comments!

Pictogrammes d’espèces menacées: travaux de mes étudiants

Dans le cadre du cours de Schématisation et de stylisation que j’enseigne présentement au Collège Ahuntsic, mes élèves ont eu à créer un micro-systèmes de quatre pictogrammes représentant des espèces en voie de disparition. L’objectif du projet était de développer des icônes qui serviraient aux besoins (fictifs) en publicité et en signalétique du Biodôme de Montréal.

Avec leur permission bien entendu, je me permets de vous partager les réalisations finales de certains étudiants. Je suis très fière de leur travail! Bravo! N’hésitez pas à commenter cette publication. Je partagerai vos commentaires constructifs avec eux!

Magali François


Stéphanie Giroux


Elissette Vidal-Garcia


Malik Douadi Ziani

November 3, 2017 - No Comments!

Des drapeaux ou du texte pour représenter les langues d’un site web: quelle option choisir?

Il y a de nombreux avantages à investir dans le développement d’un site web multilingue. Vos clients parlant l’anglais, l’espagnol, l’italien ou encore le portugais apprécieront les différentes versions linguistiques qu’offriront votre nouveau site web. Votre investissement sera vite rentabilisé: plus facilement vos clients accéderont à vos contenus, meilleures seront les chances qu’ils achètent vos produits et services!

Il y a toutefois beaucoup d’aspects à considérer lors du développement d’un site web multilingue. La méthode d’accès aux différentes options linguistiques en est une. Plusieurs designers et développeurs web optent pour une navigation visuelle, en affichant différents drapeaux sensés représenter les options de langues (voir figure 1). Est-ce vraiment la meilleure solution?

Duolingo language options

Duolingo utilise le drapeau de l'Espagne pour représenter l'Espagnol, mais le drapeau du Brésil (et non du Portugal) pour représenter le Portugais... Logique? Source: https://fr.duolingo.com/

Privilégiez le format texte, dans la langue d’origine

Pour que la langue soit compréhensible par le public concerné, il est mieux de privilégier l’affichage des choix de langues en format texte, et dans leur langue d’origine. Par exemple:

Français | English | Deutsch | Italiano | Español | 中国的 |  ไทย  | русский

Vous qui lisez le français et probablement pas le japonais, il est évident que si vous vous rendez sur un site japonais et que l’accès à la version française du site est indiquée par le terme バーゲン, vous allez très probablement éprouver de la difficulté à trouver le contenu dans une langue que vous comprenez! N’est-ce pas? C’est quelque chose à considérer pour les utilisateurs anglophones, hispanophones, italophone (etc.) de votre site! Peut-être que vos visiteurs parlant l’anglais reconnaîtront le terme « Anglais » comme étant la traduction du mot « English », mais certaines traductions sont moins évidentes (comme « Allemand » et « Deutsch » par exemple).

Et pourquoi pas les drapeaux?

Les drapeaux sont des symboles représentant des pays, et non des langues…

Certaines langues sont parlées dans plusieurs différents pays

Quel drapeaux utiliseriez-vous pour représenter l’Espagnol? Le drapeau de l’Espagne, de l’Argentine, du Mexique, du Venezuela, ou de la Colombie?

Certains pays ont plusieurs langues officielles

En cliquant sur le drapeau de la Suisse, vous attendriez vous à accéder à un site web en français, ou en allemand?

Certains visiteurs risquent de ne pas reconnaître les drapeaux affichés

Je suis certaine que vous-même, cher lecteur, auriez de la difficulté à différencier certains de ces drapeaux…

Quel est le drapeau de la Côte d'Ivoire, et quel est le drapeau de l'Irlande?

Quel est le drapeau de la Lituanie, et quel est le drapeau de la Bolivie?

Lithuanie? ou Bolivie?

Quel est le drapeau de la Belgique? Quel est celui de l'Allemagne?

Évitez de semer la confusion chez vos visiteurs!

Optez pour le format texte, dans la langue d’origine pour afficher les différentes options linguistiques de votre site multilingue. Vous éviterez ainsi de semer la confusion chez vos visiteurs, et augmenterez l’expérience utilisateur de votre site web!
Vous avez des questions au sujet de cet article? N’hésitez surtout pas à me contacter!

À propos de l’auteur

Laurence Pilon est diplômée du programme de design de l’information (design UX et design e-commerce) de l’Université Reading, en Angleterre. Elle travaille présentement à la Fondation du CHU Sainte-Justine. Elle enseigne également le design graphique au Collège Ahuntsic.

Sources

Richard, S. 2014. « Choix de langues sur un site web: drapeaux ou textes? ».http://blog.axe-net.fr/choix-langue-site-web-drapeaux-textes/.

Domingo, I. 2014. ‘Never use flags for language selection.’http://wplang.org/never-use-flags-language-selection/

February 15, 2017 - No Comments!

La maison d’édition Gaberbocchus

Stefan et Franciszka Themerson

La maison d’édition Gaberbocchus a été fondée en 1948, à Londres, par les artistes et conjoints polonais Stefan et Franciszka Themerson. Leur collaboration artistique est née à Varsovie, en Pologne, où tous deux travaillaient ensemble comme producteurs de cinéma expérimental, mais également comme créateurs de livres pour enfants. Stefan prenait alors le rôle d’auteur, et Franciszka, d'illustratrice. Les Themerson ont fuit la Pologne au commencement de la Seconde Guerre Mondiale. Ils se sont retrouvés à Paris, en 1937, puis quelques années plus tard, en 1940, à Londres.

Inspiré du dragon de Lewis Carrol

Le nom Gaberbocchus vient du poème de fiction de Lewis Carrol, « Jabberwocky ». Ce choix de nom évoque le caractère absurde, ou encore surréel de certaines des publications de la maison d’édition. Celle-ci a d'ailleurs publié 59 livres en 31 ans. Les premiers livres ont été imprimés à la main, dans la demeure des Themerson même. Plus tard, ils ont déménagé l’imprimerie sur la rue Formosa, à Londres. Ce nouvel espace servait à la fois de salle d’édition et d’impression, mais également de salle de rencontre, où famille et amis intéressés par l’art et la science se retrouvaient, occasionnellement, pour assister à des visionnements de films, à des pièces de théâtre, à des concerts musicaux ou à des lectures de poésie.

Gaberbocchus Press

Le nom Gaberbocchus vient du poème de fiction de Lewis Carrol, « Jabberwocky ». Le poème surréaliste raconte l’histoire d'un dragon du même nom. Source: Franciszka Themerson, Gaberbocchus Press. 1951. From Jarry, Alfred. 1951. Ubu roi: drama in 5 acts. London: Gaberbocchus Press. At Special collections at the MERL (Museum of English Rural Life), Reading, UK.

Collaborations interdisciplinaires

Très vite, Gaberbocchus se spécialise dans la publication de textes intellectuels dits d'avant-garde. La maison d’édition a publié des textes de Stefan Themerson lui-même, mais également de Hugo Manning, de Bertrand Russell, de C. H. Sisson et de Stevie Smith. Gaberbocchus a également publié des traductions d’auteurs français dont Alfred Jarry et Raymond Queneau. Les Themerson étaient intéressés par le travail interdisciplinaire. Pour eux, il n’y avait pas de frontières entre la philosophie, l’art et la science.

Forme et contenu

Les Themerson étaient convaincus que le design d’un livre devrait en refléter étroitement son contenu. Avec Gaberbocchus, leur objectif était de créer des livres peu coûteux, au design inventif et imaginatif. La maison d’édition se distinguait nettement des autres compagnies de l’époque de par son caractère révolutionnaire. Stefan Themerson a lui-même affirmé vouloir créer des “best-lookers” et non des “best-sellers”. L’artiste et sa femme étaient sensibles à la matérialité des livres. Ils portaient grand attention à leur composition et à leurs dimensions. Ainsi, plusieurs de leurs livres sont imprimés sur des papiers de formats non-standards aux différentes couleurs et textures.

The Good Citizen’s Alphabet (publié en 1953)

Le livre The Good Citizen’s Alphabet a été publié par la maison d’édition Gaberbocchus en 1953. Il a été écrit par le fameux mathématicien, logicien et philosophe britannique Bertrand Russell, et illustré par Franciszka Themerson. Le livre est né d’une correspondance qu’ont entretenus Russell et les Themerson dans les année 40. L'alphabet socio-politique que renferme ce livre est un délicieux mélange entre écriture satirique et illustrations humoristiques: “O” pour “Objective: A delusion which other lunatics share”, ou encore “L” pour “Liberty: The right to obey to the police.” Ironiquement, le contenu du livre semble toujours être d’actualité, et ce, même 60 ans plus tard!

The Good Citizen's Alphabet, by Bertrand Russell

Le livre The Good Citizen’s Alphabet, de Bertrand Russell a été publié par la maison d’édition Gaberbocchus en 1953 (Source).

Mélange de surréalisme et de Dada

Dans le livre Ubu Roi d’Alfred Jarry publié par Gaberbocchus en 1951, textes et illustrations sont combinés d’une manière encore jamais vue dans l’industrie de la publication anglaise. Franciszka avait proposé à Barbara Wright, la traductrice, d’écrire directement sur la pierre d’impression lithographique qui serait plus tard utilisée pour imprimer les livres. L’artiste y a ensuite ajouté ces illustrations. Le produit final est une juxtaposition de croquis et d’écriture manuelle. Ce style est devenu une certaine marque de commerce de la maison d’édition Gaberbocchus. Les Themerson, à travers leurs nombreuses publications, ont exploré la calligraphie, l’écriture manuelle, la typographie produite par la machine à écrire, et les polices de caractères décoratives. Leur style est un mélange de surréalisme et de Dada.

Stefan et Franciszka Themerson ont vendu Gaberbocchus à une maison d’édition allemande en 1979. Ils sont décédés, à deux mois d’interval, en 1988.

Ubu Roi, d'Alfred Jarry

Franciszka Themerson avait proposé à Barbara Wright, la traductrice, d’écrire directement sur la pierre d’impression lithographique qui serait plus tard utilisée pour imprimer les livres (Source).

Sources

Barnard, Fiona. 2003. “The Gabberbocchus Press.” V&A Museum.
Kubasiewica, Jan. 1995. “An extraordinary venture.” Print 49 (5): 85–112.

February 8, 2017 - No Comments!

Le monogramme d’hier à aujourd’hui

Considéré comme l’ancêtre du logotype, le monogramme est l’une des plus anciennes méthodes d’identification d’une personne ou d’une autorité.

Les spécialistes des arts et du design ne s’entendent pas tous sur sa définition. En général, le monogramme est définit comme étant une marque ou une signature stylisée et formée de la combinaison de chiffres ou de lettres initiales d’un nom. Le monogramme sert à marquer l'appartenance. Il est utilisé pour signer un vêtement, une oeuvre, un meuble, ou tout autre objet appartenant à un propriétaire spécifique.

Les pièces de monnaie antiques

Les monogrammes ont d’abord été introduit sur les pièces de monnaie en Grèce et en Rome Antique. Ces pièces servaient non seulement de moyen d’échange, mais également de méthode de propagande. C’est ainsi que plusieurs d’entre elles marquent le reigne d’importants empereurs. Les monogrammes permettaient d’économiser de l’espace sur ces petites pièces de laiton, de cuivre, d’argent ou d’or qui ne dépassaient, dans certains cas, à peine les 3 cm!

Pièce de monnaie byzantine affichant le monogramme de Théodorich

Cette pièce de monnaie présente le monogramme de Théodorich dit « le grand » (455–526). Les historiens décodent un D et un N, pour Dominus Noster (Notre Seigneur), puis les lettres du nom THEODERICUS. Comme certains pourront le constater, les monogrammes n’étaient pas destinés à être lus, mais plutôt à être reconnus! Source: Coin Archives. 520–530. “Solidus Numismatik.” Coin Archives.

Le monogramme du Christ

Très vite l’église catholique a adopté le monogramme pour former ce que l’on pourrait qualifier d'« identité visuelle ». Le « chrisme » est un symbole formé des deux premières lettres du mot latin ΧΡΙΣΤΟΣ, qui signifie « Christ ». Le Chi (X) et le Rho (P) sont parfois accompagnés des lettres Alpha (α) et Oméga (ω), qui symbolisent le commencement et la fin. Le monogramme du Christ est d’abord inscrit sur des tombeaux, dans les catacombes romaines par exemple, puis éventuellement sur les mosaïques, les vitraux et les sculptures d’inspiration chrétienne.

Le monogramme du Christ

Ici, le chrisme est sculpté sur un sarcophage chrétien qui se retrouve aujourd'hui dans le Musée du Vatican. Lorsqu’entouré d’un cercle ou d’une couronne, le symbole évoque l’idée de l’éternité de Dieu le Père. Source: Source: OP, Laurence. 2007. “Chi Rho”. Flickr.

La signature du roi

Charles dit « le grand », ou Charlemagne (742–814), populairement considéré comme « l’inventeur de l’école », a appris à lire et à écrire en fait que très tard dans sa vie. Comme la plupart des rois et empereurs avant lui, il devait assurément signer ses documents officiels avec l’inscription d'une simple croix. Plusieurs historiens croient que son conseiller lui aurait appris à modifier cette croix pour la rendre distincte. Il lui aurait suggérer d’y ajouter consonnes aux extrémités et voyelles aux centre, de manière à former un monogramme de nom latin Karolus, qui se traduit par le nom français Charlemagne.

La signature du roi Charlemagne

La signature du roi est composée d’une croix ainsi que des lettres formant le nom latin Karolus, qui se traduit par le nom français Charlemagne. Source: Abulédu Data. "Monogramme de Charlemagne”.

Au tour des artistes

Les artistes savent flairer la bonne affaire lorsqu’il en est une! Plusieurs ont donc adopté le monogramme comme façon de signer leurs oeuvres. Parmi les plus connus se retrouvent l’artiste allemand Albrecht Dürer (1471–1528), le peintre français Henri de Toulouse-Lautrec (1864–1901) et le peintre autrichien Gustav Klimt (1862–1918).

Les monogrammes de Albreicht Dürer, de Henri de Toulouse-Lautrec et de Gustav Klimt

Le livre Artist’s Monograms and Indiscernable Signatures de John Castagno est une référence en matière de monogrammes et signatures d’artistes. Source: Dubois, Jean-Pierre. 2014. “Monogrammes”. JP DUBS.

Le trousseau de mariage

Le monogramme est devenu très populaire au début du XXe siècle. Symbole de richesse, il est graduellement apparu sur les objets du quotidien des familles aristocrates. Il était commun pour les femmes fiancées de broder leurs monogrammes sur les mouchoirs, nappes et édredons qui allaient constituer leur trousseau de mariage!

L’ancêtre du logotype

Aujourd’hui, les monogrammes sont partout! Certains bénéficient d’une incontestable notoriété dans le domaine de la mode par exemple, et représentent des marques telles celles de Louis Vuitton, de Roger Federer, ou encore, de Yves Saint Laurent.

Les monogrammes de Louis Vuitton, de Roger Federer et de Yves Saint Laurent

Sources

Seibt, Werner. 2016. 'The Use of Monograms on Byzantine Seals in the early Middle-Ages (6th to 9th centuries)’. Parekbolai 6. 1–14 see it here.

February 1, 2017 - No Comments!

Qu’est-ce que le design de l’information ?

Le terme « design de l’information » peut être définit comme étant la sélection, la planification et la mise en forme d’un message et de son médium de communication, dans le but de satisfaire les besoins de ses destinataires. L’origine du design de l’information remonte aux fonctionnalisme visuel des années 60, lui-même inspiré par la typographie helvétique développée en Suisse, et également stimulé par les concepts du Bauhaus, en Allemagne.

Le système Isotype d'Otto Neurath

Otto Neurath (1886–1939), est aujourd’hui considéré comme l’un des précurseurs du design de l’information. Philosophe, économiste et scientifique social d’origine autrichienne, Neurath a mis au point le concept d’Isotype (International System of Typographic Picture Education), un système de pictogrammes utilisé pour éduquer la population de façon visuelle. Neurath et son équipe, composée entre autres de Marie Neurath (sa femme) et de Gerd Arntz, sont les premiers à avoir développé une méthode pour organiser, analyser et représenter graphiquement des données complexes et des statistiques.

Tiré du livre Gesellschaft und Wirtschaft (1930), ce graphique d’Isotype compare le nombre de véhicules aux États-Unis par rapport aux nombre de véhicules dans le reste du monde. La collection Isotype appartient maintenant au Département de Typographie et de communication graphique (Department of Typography & Graphic Communication) de l’Université Reading. La collection a été offerte à l’université par Marie Neurath en 1971. Source: Patton, Phil. 2009. "Neurath, Bliss and the Language of the Pictogram”. Aiga.

Utilités et applications

Aujourd’hui, le design de l’information est utilisé quotidiennement par différents acteurs de la communication visuelle. D’abord employé comme outil d’analyse, de tri et de hiérarchisation de l’information contenue dans des publications imprimées, le design de l’information est maintenant également utilisé dans en multimédia, notamment pour le développement de systèmes de navigation de sites Web. Les principaux domaines du design de l’information sont l’identité visuelle, le design d’orientation spatiale (souvent appelé signalétique), la représentation cartographique, la visualisation de données, le montage de documents complexes et le design d’interface.

L'identité visuelle

L’identité visuelle d’une entreprise regroupe l’ensemble de ses supports de communication: logotype, charte graphique, papeterie, supports imprimés, support Web, etc. Le design de l’information est utile quand vient le temps de développer un système visuel cohérent qui unifie tous le matériel utilisé par l’entreprise.

La représentation cartographiques

Le design de l’information est utile également pour le développement de cartes de régions touristiques; les cartes villes, par exemple, les centres de randonnées, les centres de ski, etc. D’autres types de représentations cartographiques incluent les plans de réseaux de transport tel les systèmes de métro souterrain et les rails de trains.

La plan de type « schématique » a été développé par l’ingénieur industriel Harry Beck pour simplifier le réseau souterrain de Londres. Il a été appliqué au London Underground pour la première fois en 1933. Source: Beck, Henry Charles. 1933. “Map of London’s Underground Railways.” David Rumsey Collection.

Le design d’orientation spaciale

Le design d’orientation spaciale, ou, en anglais, le « wayfinding design », est un domaine qui se situe entre graphisme, architecture et design. En effet, le terme « wayfinding » signifie « trouver le chemin ». Ce terme désigne le processus de développement d’un système cohérent ou d'une organisation logique de l'espace qui permet aux visiteurs de mieux s’orienter. Ces systèmes sont développés par les designer de l’information pour des espaces publiques tel les musées, les aéroports, les gares, etc.

Le terminal 5 de l’aéroport Heathrow, à Londres, est traversé par quelques 30 millions de passagers chaque année. Pour que les usagers puisse s’y retrouver, il était primordial que le bâtiment incorpore un système d’orientation cohérent et compréhensible. Le système actuel a été développé par l’agence Merson Sign Design (MSD). Source: Hoeller, Christian. “Heathrow Terminal”.

La visualisation de données

La visualisation de données permet de simplifier des concepts complexes ou de représenter visuellement des données numériques, statistiques et dynamiques. Les rapports météorologiques présentés à la télévision ou sur le Web sont un parfait exemple de ce domaine du design de l’information.

Le design de documents complexes

Tout ouvrage qui nécessite une lecture à plusieurs entrées avec possibilité de rechercher de l’information spécifique est considéré comme un document complexe. Les encyclopédies, les dictionnaires, les codes juridiques, les annuaires, et les catalogues sont tous des exemples de ce type de document. Le rôle du designer de l’information est d’organiser la structure hiérarchique et visuelle pour faciliter la navigation de l’utilisateur à travers le document.

Le design d’interface

Le design d’interface, ou, en anglais, le « user interface (UI) design », désigne la conception d’un système d’accès aux différents éléments formant un produit multimédia. Ces éléments comprennent les textes, les tableaux et graphiques, les images, ainsi que les séquences vidéos qui composent site Web, applications mobiles ou logiciels. Le design d’interface est centré sur l'utilisateur. En effet, le contenu doit souvent être organisé pour qu'il puisse explorer l’information de façon interactive. Le designer de l’information doit définir, en autres, les limites du support utilisé ainsi que ses modalités de navigation.

Un outil de communication stratégique

En conclusion, le design de l’information est un domaine qui unie ordre et esthétique. En considérant avant tout les besoins des utilisateurs auxquels est destiné le contenu, les designers de l’information ont la responsabilité de mettre en forme des messages cohérents et compréhensible.

Pour en apprendre davantage sur le design de l’information, référez-vous aux publications ci-dessous.

Burke, Christopher. 2009. “Isotype: Representing social facts pictorially”. Information Design Journal 17 (3). 221–223.

Burke, Christopher, Eric Kindel, and Sue Walker. 2013. Isotype: Design and contexts 1925–1971. London: Hyphen Press.

Neurath, Marie and Robin Kinross. 2008. Transformer: Principles of Making Isotype Charts. London: Hyphen Press.

Vollaire, Louis. 1997. “Les design de l’information”. Communication et languages 112, 35–50.

Stock-Allen, Nancy. 2012. “ISOTYPE: International System of Typographic Picture Education: ‘Words Divide, Pictures Unite’”.

Vitale, Elodie. 1995. Le Bauhaus de Weimar (1919–1925). Bruxelle: Éditions Mardaga.