Type:Rider est un jeu vidéo multi-support retraçant l'histoire de la typographie, lancé par Arte Creative le 10 octobre dernier. Ce jeu d'aventure permet donc de parcourir l'histoire de la typographie, depuis ses origines avec les premières traces laissées par l'être humain grâce aux peintures rupestres, jusqu'à nos jours, avec le pixel art, en passant bien sûr par l'invention de l'alphabet puis de l'imprimerie.
Les grandes phases de cette histoire sont découpées en tableaux thématiques : Gothic, Garamond, Helvetica, etc. que l'on explore pour découvrir au fur et à mesure de nouveaux pans du récit. Le jeu est disponible gratuitement en version PC/Mac, et à télécharger pour 2,69€ dans sa version smartphones et tablettes pour iOs et Android, plus complète (4 niveaux de plus, et des fonctionnalités supplémentaires).
Depuis son lancement, Type:Rider cumule déjà plus de 25 000 téléchargements, et se classe en tête des ventes de l'App Store et de Google Play. Un succès extrêmement rapide qui s'explique notamment par la très grande qualité graphique mais aussi sonore de ce jeu. Le gameplay est simple et agréable, et permet de découvrir de manière ludique ce domaine qui reste relativement méconnu de la plupart des gens.
Mais Type:Rider n'est pas qu'un jeu vidéo. En effet, il s'accompagne d'une installation d'art numérique destinée aux lieux éducatifs et culturels qui mêlera projection et jeu vidéo, mais aussi d'un social game sur facebook permettant de créer ses propres niveaux et de les partager avec ses amis.
Pour sa première incursion dans le monde du jeu vidéo, Arte a donc frappé fort en proposant une expérience multi-support, riche, créative et particulièrement intéressante. Un bel exemple de transmédia !
Affichage des articles dont le libellé est typographie. Afficher tous les articles
Affichage des articles dont le libellé est typographie. Afficher tous les articles
vendredi 18 octobre 2013
lundi 29 octobre 2012
Datavisualisation, entre nouvelle forme de communication et inspiration artistique
A chaque instant sur le net, de nombreuses données sont collectées par votre navigateur, les sites sur lesquels vous vous rendez, etc. La collecte d'informations, leur traitement et leur revente à des fins commerciales ou marketing est une source de revenus non-négligeable pour de nombreuses plateformes, comme celles recueillies par les réseaux sociaux, qui permettent notamment de nous abreuver de publicités toujours plus ciblées. Mais il existe des finalités bien plus intéressantes que la simple insertion dans des bases de données ou le suivi des statistiques de visite d'un site. Et c'est là que la datavisualisation, ou visualisation des données, entre en scène.
Plus facile et plus rapide à lire qu'un texte descriptif, plus impactante et plus immédiate, la datavisualisation correspond très bien au mode de consommation de l'information sur le web. Et quand on pense à la datavisualisation, cette science de la réprésentation des données sous forme visuelle, on pense souvent en premier lieu aux infographies. Véritable reine de l'information ces dernières années, surtout dans les domaines du blogging et du webjournalisme, l'infographie permet de présenter, simplifier, digérer tout type de données, de façon plus ou moins bien réussie. Tout ou presque peut être représenté sous forme d'infographie, et des outils et sites permettant de créer automatiquement ses propres infographies comme Visual.li ou Easel.li ont rapidement vu le jour. Il existe même une typo vous permettant de transformer vos données en diagrammes automatiquement dans InDesign :
Au delà de l'infographie, de nombreuses expérimentations artistiques ont vu le jour autour de la datavisualisation, qu'elles aient un but informatique ou simplement graphique. L'un des leviers de cette création graphique, c'est l'open data : la mise à disponibilité du grand public de données brutes, sans restriction, et avec la possibilité de les réutiliser à loisir. De belles inititatives ont vu le jour, comme l'initiation à la datavisualisation auprès d'élèves de CE2 et de CM1. Des artistes s'en sont également emparés, les ont agrégées, et nous livrent des démonstrations innovantes et hors du commun. Voici deux exemples qui ont attiré notre attention :
Les bijoux personnalisés Meshu :
La datavisualisation rencontre l'expérience personnalisée. Les designers de la marque Meshu, Rachel Binx et Sha Hwang, basés à San Francisco, vous proposent en effet de transformer vos informations géographiques en objets physiques. Et, en l'occurence, en bijoux. Le concept est simple : à l'aide de son interface graphique basée sur une carte, vous indiquez des coordonnées géographiques (ville, adresse, coordonnées GPS, etc.) qui vous tiennent à coeur (vos dernières vacances, les endroits où vous avez vécu, le chemin parcouru entre votre domicile et votre bureau, etc.), de choisir vous-même des points à relier sur la carte, ou bien vous connectez votre compte foursquare ou facebook.
Le chemin parcouru forme un dessin qui servira de base au bijou que vous aurez choisi : pendentif, boucles d'oreille ou boutons de manchettes (compter de 70 à 150$). Vous avez ensuite le choix de la matière : bois, acrylique, nylon ou argent. Selon le matériau choisi, le bijou est réalisé en découpe laser ou en impression 3D. Vous obtenez ainsi un bijou personnalisé, avec une histoire à raconter !
L'expo du rapport financier de la banque L-Bank :
La banque allemande L-Bank a requis les services de l'agence de communication Jung von Matt (nous vous avions déjà présenté le travail de cette agence dans notre article consacré au Musée des objets obsolètes) afin de présenter de façon graphique son rapport financier annuel. Il en résulte une série de 8 oeuvres d'art (une par segment principal du rapport), représentant de manière concrète chiffres et pourcentages. Une forme de datavisualisation grandeur nature sous forme de parcours exposé dans une musée d'art contemporain. Comme ces 358 ballons noirs représentant les 358 000 tonnes de CO2 qui économisées chaque mois en 2011 par la banque (plus d'images dans leur galerie Behance) :
Dans un monde où tout est désormais mesuré, chiffré, évalué, les possibilités offertes par la datavisualisation sont très nombreuses, tant dans les domaines du datajournalisme, de l'art, ou même de la communication d'entreprise ou institutionnelle. Face à l'abondance de données disponibles aux quatre coins de la toile, leur mise en scène graphique permet de les mettre à la portée de tous. Reste encore à éditorialiser, à les hiérarchiser, pour leur apporter du sens.
Stéphanie M.
![]() |
| Datavisualisation du hashtag digital natives sur twitter - réalisé avec DNoise |
Plus facile et plus rapide à lire qu'un texte descriptif, plus impactante et plus immédiate, la datavisualisation correspond très bien au mode de consommation de l'information sur le web. Et quand on pense à la datavisualisation, cette science de la réprésentation des données sous forme visuelle, on pense souvent en premier lieu aux infographies. Véritable reine de l'information ces dernières années, surtout dans les domaines du blogging et du webjournalisme, l'infographie permet de présenter, simplifier, digérer tout type de données, de façon plus ou moins bien réussie. Tout ou presque peut être représenté sous forme d'infographie, et des outils et sites permettant de créer automatiquement ses propres infographies comme Visual.li ou Easel.li ont rapidement vu le jour. Il existe même une typo vous permettant de transformer vos données en diagrammes automatiquement dans InDesign :
Au delà de l'infographie, de nombreuses expérimentations artistiques ont vu le jour autour de la datavisualisation, qu'elles aient un but informatique ou simplement graphique. L'un des leviers de cette création graphique, c'est l'open data : la mise à disponibilité du grand public de données brutes, sans restriction, et avec la possibilité de les réutiliser à loisir. De belles inititatives ont vu le jour, comme l'initiation à la datavisualisation auprès d'élèves de CE2 et de CM1. Des artistes s'en sont également emparés, les ont agrégées, et nous livrent des démonstrations innovantes et hors du commun. Voici deux exemples qui ont attiré notre attention :
Les bijoux personnalisés Meshu :
La datavisualisation rencontre l'expérience personnalisée. Les designers de la marque Meshu, Rachel Binx et Sha Hwang, basés à San Francisco, vous proposent en effet de transformer vos informations géographiques en objets physiques. Et, en l'occurence, en bijoux. Le concept est simple : à l'aide de son interface graphique basée sur une carte, vous indiquez des coordonnées géographiques (ville, adresse, coordonnées GPS, etc.) qui vous tiennent à coeur (vos dernières vacances, les endroits où vous avez vécu, le chemin parcouru entre votre domicile et votre bureau, etc.), de choisir vous-même des points à relier sur la carte, ou bien vous connectez votre compte foursquare ou facebook.
Le chemin parcouru forme un dessin qui servira de base au bijou que vous aurez choisi : pendentif, boucles d'oreille ou boutons de manchettes (compter de 70 à 150$). Vous avez ensuite le choix de la matière : bois, acrylique, nylon ou argent. Selon le matériau choisi, le bijou est réalisé en découpe laser ou en impression 3D. Vous obtenez ainsi un bijou personnalisé, avec une histoire à raconter !
L'expo du rapport financier de la banque L-Bank :
La banque allemande L-Bank a requis les services de l'agence de communication Jung von Matt (nous vous avions déjà présenté le travail de cette agence dans notre article consacré au Musée des objets obsolètes) afin de présenter de façon graphique son rapport financier annuel. Il en résulte une série de 8 oeuvres d'art (une par segment principal du rapport), représentant de manière concrète chiffres et pourcentages. Une forme de datavisualisation grandeur nature sous forme de parcours exposé dans une musée d'art contemporain. Comme ces 358 ballons noirs représentant les 358 000 tonnes de CO2 qui économisées chaque mois en 2011 par la banque (plus d'images dans leur galerie Behance) :
Dans un monde où tout est désormais mesuré, chiffré, évalué, les possibilités offertes par la datavisualisation sont très nombreuses, tant dans les domaines du datajournalisme, de l'art, ou même de la communication d'entreprise ou institutionnelle. Face à l'abondance de données disponibles aux quatre coins de la toile, leur mise en scène graphique permet de les mettre à la portée de tous. Reste encore à éditorialiser, à les hiérarchiser, pour leur apporter du sens.
Stéphanie M.
mercredi 27 juin 2012
Rédaction web : n'oubliez pas les règles typographiques !
Quand on écrit pour le web, de nombreuses contraintes s'imposent, notamment en termes d'optimisation des contenus pour le référencement. De nombreux rédacteurs se plient à ces exigences, mais omettent de porter l'attention nécessaire à des éléments pourtant essentiels mais souvent oubliés : l'orthographe et les règles typographiques. Nous nous penchons aujourd'hui sur le respect des règles typographiques, qui, bien que souvent négligées, sont pourtant un gage de professionnalisme pour tout rédacteur. Pas toujours facile de toutes les respecter, mais un petit récapitulatif des principales règles peut s'avérer utile.
Rien de plus frustrant qu'un texte au fond intéressant, bien documenté mais dont la ponctuation laisse franchement à désirer. Rappelons ainsi quelques règles de base concernant le positionnement des caractères de ponctuation par rapport aux espaces (à noter, quand on parle de typographie, " espace " est un mot féminin).
Pas d'espace avant, une espace après :
Sur le web, pour éviter qu'un signe de ponctuation passe à la ligne, pensez à utiliser le caractère insécable dans votre code source.
Pas toujours évident de connaître par cœur toutes les conventions concernant les abréviations, voici donc un rappel des principales règles les concernant :
Dans la langue française, on est souvent tenté de mettre des majuscules partout. Cependant, il existe des contraintes assez strictes concernant leur usage.
Certaines normes s'appliquent plus particulièrement à la rédaction pour le web.
Vous voici désormais armés rédiger vos articles en toute sérénité.
Stéphanie M.
![]() |
| Good typography is invisible - Craig Ward |
La ponctuation :
Rien de plus frustrant qu'un texte au fond intéressant, bien documenté mais dont la ponctuation laisse franchement à désirer. Rappelons ainsi quelques règles de base concernant le positionnement des caractères de ponctuation par rapport aux espaces (à noter, quand on parle de typographie, " espace " est un mot féminin).
Pas d'espace avant, une espace après :
- la virgule - ex. : il était une fois, un blog sur la rédaction ;
- le point - ex. : il était une fois un blog sur la rédaction. ;
- les points de suspension - ex. : il était une fois un blog sur la rédaction...
- le point d'exclamation - ex. : il était une fois un blog sur la rédaction ! ;
- point d'interrogation - ex. : il était une fois un blog sur la rédaction ? ;
- point virgule - ex. : il était une fois ; un blog sur la rédaction.
- deux points - ex. : il était une fois - un blog sur la rédaction ;
- tirets - ex. : il était une fois - un blog - sur la rédaction ;
- guillemets - ex. : il était une fois un " blog " sur la rédaction.
Sur le web, pour éviter qu'un signe de ponctuation passe à la ligne, pensez à utiliser le caractère insécable dans votre code source.
Abréviations :
Pas toujours évident de connaître par cœur toutes les conventions concernant les abréviations, voici donc un rappel des principales règles les concernant :
- Une abréviation composée des premières lettres du mot se termine par un point - ex. : " synonyme " devient " syn. " ;
- Une abréviation qui comprend la dernière lettre de ce mot n'a pas besoin de point - ex. : " compagnie " devient " Cie " ;
- Enfin, une abréviation basée sur un groupe de mots n'a pas non plus besoin de point final - ex. : " Bon à tirer " devient " BAT ".
Majuscules et minuscules :
Dans la langue française, on est souvent tenté de mettre des majuscules partout. Cependant, il existe des contraintes assez strictes concernant leur usage.
- L'une des règles typographiques les moins respectées concerne sans doute les majuscules et minuscules appliquées aux mots se référant aux populations, aux habitants ou aux langues. Dans le cas d'un nom : les Français, les Anglais, on met une majuscule. Dans le cas d'un adjectif : le peuple français, l'armée anglaise, on se contente d'une minuscule. Même chose pour les langues : " je parle espagnol " ne nécessite pas de majuscule ;
- Il est vivement conseillé d'accentuer les capitales d'imprimerie. Cependant, et notamment sur le web, ce n'est pas toujours facile à mettre en place. Dans ce cas, un choix éditorial s'impose : accentuer toutes les majuscules, ou aucune.
Règles propres au web :
Certaines normes s'appliquent plus particulièrement à la rédaction pour le web.
- On ne souligne pas un texte qui n'est pas un lien, ceci afin d'éviter d'induire en erreur les internautes qui sont habitués à cette convention ;
- Éviter d'utiliser des polices à empattement, plutôt réservées au print .
Autres règles :
- On écrit en lettres les chiffres inférieurs à 10. Au delà de 10, on peut les écrire en chiffres ;
- Les énumérations sont séparées par des points virgules, et terminées par un point final.
Vous voici désormais armés rédiger vos articles en toute sérénité.
Stéphanie M.
mercredi 23 mars 2011
Les trois étapes incontournables pour trouver la typo idéale
Première étape : trouver la bonne police

On ne le présente plus, DaFont reste le site incontournable pour trouver la police dont vous rêvez.
Grâce à un catalogue recensant plus de 12 000 typos téléchargeables pour la plupart gratuitement, se procurer une police devient alors un jeu d'enfant. L'un des points forts du site est le classement par thématique, optimisant vos chances de trouver la bonne police.
Pour ceux qui n'auraient pas trouvé leur bonheur avec DaFont, d'autres sites similaires sont disponibles :
Abstractdafont : ce site offre un catalogue de 13 000 polices avec un système de notation permettant de s'informer sur les modèles les plus plébiscités.
Acidfonts : des milliers de polices sont également téléchargeables gratuitement sur ce site qui se démarque par un design plus épuré et une présentation moins anarchique.
Modern life : se destine aux passionnés du web 2.0 qui pourront retrouver les polices des sites "social media" les plus emblématiques et ainsi s'en inspirer.
Outre les catalogues en ligne, il vous est surement déjà arrivé de croiser une police sur un site web et de vous arracher les cheveux pour trouver son nom. Whatthefont met un terme à votre frustration en vous permettant d'uploader un fichier ou de spécifier l'url du site qui a retenu votre attention.
Deuxième étape : tester sa police
On observe souvent une incompatibilité entre la sélection et l'intégration de la police au sein de son site web. Il est en effet difficile d'anticiper le rendu qu'aura une typo avec le seul aperçu proposé par le catalogue en ligne. Le site Typetester s'avère très utile lors de votre phase d'intégration car il permet de comparer simultanément jusqu'à trois polices différentes sur un même écran avec la possibilité de leur appliquer divers attributs (couleur, espacement etc). Une fois votre sélection définie, le code css peut être généré depuis le site.
Troisième étape : rester à l’affût des dernières tendances
On le sait, les tendances web se succèdent à une vitesse folle engendrant par conséquent un travail de veille inéluctable pour tout utilisateur qui souhaiterait rester à la page. Le blog Ilovetypography, comme son nom l'indique est consacré exclusivement à la typographie et fait figure de référence dans le milieu du webdesign. Mis à jour quotidiennement, le site décrypte les dernières tendances en matière de police. A conserver précieusement dans vos favoris !
Si au terme de cet article, vous êtes toujours "sans police fixe", le collectif Digitives a la solution ultime : "So you need a typeface" un graphique ingénieux réalisé par Julian Hansel, qui vous permettra à coup sûr d'identifier votre police idéale.
Et en bonus, "FontFace" une vidéo très réussie sur le thème de la typographie réalisée par le studio Atipo

On ne le présente plus, DaFont reste le site incontournable pour trouver la police dont vous rêvez.
Grâce à un catalogue recensant plus de 12 000 typos téléchargeables pour la plupart gratuitement, se procurer une police devient alors un jeu d'enfant. L'un des points forts du site est le classement par thématique, optimisant vos chances de trouver la bonne police.
Pour ceux qui n'auraient pas trouvé leur bonheur avec DaFont, d'autres sites similaires sont disponibles :
Acidfonts : des milliers de polices sont également téléchargeables gratuitement sur ce site qui se démarque par un design plus épuré et une présentation moins anarchique.
Modern life : se destine aux passionnés du web 2.0 qui pourront retrouver les polices des sites "social media" les plus emblématiques et ainsi s'en inspirer.
Outre les catalogues en ligne, il vous est surement déjà arrivé de croiser une police sur un site web et de vous arracher les cheveux pour trouver son nom. Whatthefont met un terme à votre frustration en vous permettant d'uploader un fichier ou de spécifier l'url du site qui a retenu votre attention.
Deuxième étape : tester sa police
On observe souvent une incompatibilité entre la sélection et l'intégration de la police au sein de son site web. Il est en effet difficile d'anticiper le rendu qu'aura une typo avec le seul aperçu proposé par le catalogue en ligne. Le site Typetester s'avère très utile lors de votre phase d'intégration car il permet de comparer simultanément jusqu'à trois polices différentes sur un même écran avec la possibilité de leur appliquer divers attributs (couleur, espacement etc). Une fois votre sélection définie, le code css peut être généré depuis le site.
Troisième étape : rester à l’affût des dernières tendances
On le sait, les tendances web se succèdent à une vitesse folle engendrant par conséquent un travail de veille inéluctable pour tout utilisateur qui souhaiterait rester à la page. Le blog Ilovetypography, comme son nom l'indique est consacré exclusivement à la typographie et fait figure de référence dans le milieu du webdesign. Mis à jour quotidiennement, le site décrypte les dernières tendances en matière de police. A conserver précieusement dans vos favoris !
Si au terme de cet article, vous êtes toujours "sans police fixe", le collectif Digitives a la solution ultime : "So you need a typeface" un graphique ingénieux réalisé par Julian Hansel, qui vous permettra à coup sûr d'identifier votre police idéale.
![]() |
| cliquez sur l'image pour voir la version originale |
Et en bonus, "FontFace" une vidéo très réussie sur le thème de la typographie réalisée par le studio Atipo
Stéphanie M.
Inscription à :
Articles (Atom)






