Archives par mot-clé : News

Los Angeles Times 2014 redesign

Une refonte efficace et complète pour le Los Angeles Times, LA Times pour les intimes. Elle a été réalisée par les talentueux designers de Code and Theory, qui n’en sont pas a leur premier coup d’essai.

Homepage du LA Times (2014).
Homepage du LA Times (2014).

Vous qui recherchez la colonne publicitaire, l’espace sponsorisé, vous risquez d’être décus. Tout ces espaces ont littéralement fondu dans le décor, et fait place devant l’intelligence d’une mise en page résolument simplifiée. Car au delà des nécessités de l’utilisateur moderne (responsive design), ainsi que celles qui rendent le site simplement élégant (une typographie particulièrement travaillée), le site a fait un gros efforts de nettoyage et de suppression de tout le superflu en terme de gestion, mais aussi d’affichage et de transition du contenu: le concept de page et sa problématique rupture (lors du chargement, mais pas seulement) disparaissent.

Le pitch est simple: Si le LA Times produit du contenu, l’utilisateur se l’approprie, et le parcoure comme s’il s’agissait du sien. Comme bon le lui semble.

Les videos, signées LA Times, qui fait sa promo:


La navigation par rubrique, qui s’affiche en toute circonstance, sans s’imposer. L’architecture d’information, par rubriques, est le reflet d’une organisation interne conçue pour produire du contenu. Chaque rédaction produit du contenu pour ‘sa’ rubrique. Le problème, c’est que pendant longtemps, les sites de presse ont trop misé sur ces onglets pour afficher d’autres type d’informations, plus commerciales. Plus que jamais, le lecteur a besoin de ce repère, mais le passage d’une rubrique à l’autre ne doit plus rompre l’experience de lecture.


Le chargement des photos en grand format, pour naviguer en mode visuel, pour les détesteurs de chapeaux d’articles.


Pour les twittos, des fonctions de partage qui vous mache le travail, tout en vous laissant le controle. Cela parait si simple… pourtant si éloigné de la plupart des comportements de boutons de partage.


Les galeries ont toujours été l’obsession des marketeux. Source de pages vues? Marketing enrichi? que nenni! Ici les images défilent intuitivement, comme si l’on parcourait ses propres photos sur sa tablette.


La bonne vieille liste d’articles en relation (comme vous en trouverez en bas de ce post) commence a sentir le moisi. Si un article vous plait, un clic sur l’onglet ‘related’ et, surprise…

Le modèle économique? un modèle qui se tourne vers le payant, avec une offre a environ 50 dollars US par an.

Bim.

Bloomberg View

Connu avant tout pour son flux d’actualités du milieu financier, Bloomberg se cherche différents moyens pour diversifier son offre de contenus. Le redesign du site Bloomberg view apporte une réponse aux lecteurs qui ne lisent que les contenus de la rubrique Opinion.

Conçue par le studio Schema, la homepage du site propose une interface en grille pour chacun des contenus d’articles. Le rendu est proche de celui d’une application iOS et a été conçu pour supporter les formats mobiles, en responsive. Entrecoupé d’un nombre restreint de formats publicitaires, la plupart des contenus sont agrémentés de photographies et d’un elegant portrait illustré du contributeur de l’article. Le résultat est à la hauteur et montre que la proche collaboration du studio avec l’équipe éditoriale porte toujours ses fruits.

Bloomberg View — Homepage.
Bloomberg View — Homepage.
Bloomberg View — Article page.
Bloomberg View — Article page.
Bloomberg View — Mobile view.
Bloomberg View — Mobile view.

Pour en savoir plus, suivez le studio Schema sur Twitter.

Redesign du site TIME

Un redesign réussi pour TIME, qui se tourne vers une interface responsive dépouillée et résolument mobile. La gestion des contenus de la Homepage est simple et sans multi-colonnage. Il fallait faire rester les 60 millions de visiteurs habitués à la précédente version. L’objectif est de poursuivre sur la lancée opérée en 2013, avec plus du double de lecteurs depuis un an et une audience mondiale qui nécessite des éditions sur plusieurs continents. Continuer la lecture de Redesign du site TIME

BBC mobile (et responsive) en version beta

Le site mobile de la BBC est en cours de refonte. Habitué aux versions beta — La plus récente suivait l’esprit graphique de l’interface « Metro » propre à Windows 8 — cette nouvelle beta a pour objectif de réduire le temps de chargement grace à une conception en mode responsive. Continuer la lecture de BBC mobile (et responsive) en version beta

The Independent redesign

The Independant cover redesign (2013)

Le journal britannique The Independent a dévoilé il ya quelques semaines un nouveau design, le résultat de 3 mois de travail pour Matt Willey et l’équipe interne. Comme pour chaque refonte, de gros changement au niveau du masthead et pour les magazines. L’identité visuelle (caractérisée par le fameux « aigle ») a également été retravaillée. Visuels de la nouvelle maquette dans CR blog.

Circa

Cela faisait un moment qu’aucune application sérieuse s’intéressait à améliorer notre manière de consommer l’information en ligne, en utilisant une app iPhone. L’idée maitresse :

« We can take a story and cut eighty percent of it. »

 

Circa est une application de curation d’info – avec un travail de synthèse entre les meilleures sources d’infos, realisée par une équipe éditoriale en interne.

Ses 3 objectifs:

  • Ne pas avoir à relire systématiquement la meme information, souvent rewritée d’un site de news, à l’autre. Réduire la surabondance d’information redondantes.
  • Présenter au lecteur un maximum d’enrichissements utiles au beau milieu du texte, en contexte. Confort et convivialité.
  • Consommer l’info dans un environnement difficile (transport urbains), avec une seule main. Pouvoir rester sur l’appli sans avoir besoin de gerer plusieurs apps simultanément via des liens, en utilisant le ‘gap time‘, ce moment ou vous attendez qui est tant convoité par les app de casual gaming ou Twitter.

Quelques nouveautés en terme d’interface utilisateur ont été ajoutées. En voici quatre qui me paraissent particulièrement bien conçues :

Scrolling ‘aimanté’

L’expérience de scrolling sur iOS oblige parfois à jongler avec 2 doigts ou à être rapide afin de l’interrompre. Ici, le système de pagination fonctionne par swipe (de manière à éviter le problème du scrolling incontrôlable).

Embed et contextualisation

En matière de présentation du contenu de l’info, chaque ‘article’ dispose de plusieurs styles, comme une carte au beau milieu d’un article, une citation, ou d’une photo. Ici , l’idée est de rendre l’information avec tous les enrichissements possibles. Le plus: Un systeme de ‘couverture’ pour chaque article, avec une photo et un résumé. Les sources d’informations, sont elle, savamment presentées car toujours en contexte de la page affichée.

 

Personnalisation ‘invisible’

Le solution de customisation est encore rudimentaire, mais l’idée ici est de s’eloigner du complexe Flipboard et de ses thématiques imposées. Ici, il s’agit de rapidement ‘follower’ un contenu pour générer ensuite une liste personnalisée. Circa ne se positionne ni en app de curation ni en app de flux automatiques. Elle fait les deux.

Partage d’un point de lecture

Le principe du partage sélectif. Ici, il est possible de partager une info entière ou une bribe d’information que l’on aura denichée au sein d’un article. C’est là encore un moyen supplémentaire de faire gagner du temps aux lecteurs.

Si on veut voir plus loin on peut s’interroger :

  • Est-ce que ce type de consommation d’information va modifier la manière de produire l’information (avec 60% de staff technique, 30% de redactionel) ?
  • Est-ce que le modele economique de la curation peut fonctionner (l’application est gratuite, mais imaginons qu’elle devienne payante) ?
  • Comment Flipboard, Instapaper, mais aussi Apple vont-ils réagir en regard de ces quelques innovations ergonomiques ?

Avec des investisseurs tout aussi passionnés d’ergonomie et d’interface utilisateur, comme Dave Morin (Path), on peut s’attendre a des évolutions de plus en plus intéressantes sur cette app. À suivre, donc !

Comptes Twitter : Matt Galligan @mg, @circa
Site officiel : About CircaAppstore 

Quelques liens:

 

Paroles de conflits

Depuis mars 2010, le journaliste reporter multimédia Raphaël Beaugrand sillonne l’Eurasie à vélo. Depuis son départ de Paris, il à été possible, en léger différé, de suivre ses péripéties sur webdocu.fr (anciennement linterview.fr) ainsi que sur la page Facebook Paroles de conflits.

Première rencontre

J’avais pu faire connaissance de Raphaël lors de ma collaboration pour le site internet du Point, en 2008. Nous anticipions l’arrivée d’un journalisme d’un genre nouveau, moins textuel et plus visuel. Il n’en fallait pas davantage pour que Raphaël manifeste son voeu d’aller sur le terrain. Il resta difficile d’organiser une rédaction internet dans ce sens, avec 10 journalistes web souvent bien plus appliqués à mettre du contenu facile à indexer sur les moteurs de recherche afin de maximiser l’audience du jeune site. Les occasions de mettre une vidéo auto-produite sur le site du Point.fr se faisaient donc plutôt rares, bien qu’elles aient toutes été couronnées de succès, avec des vidéos à forte visibilité. Raphaël n’en démord pas, sa patience et son insistance seront récompensées.

Son voeu fut donc exaucé un an plus tard, avec cette opportunité de créer son web-documentaire. Mais avec plus d’une centaine de témoignages de victimes de conflits armés ou idéologiques, l’équipe réalise qu’une grande quantité d’informations conviendrait mieux pour un format de documentaire vidéo plus classique. Le web-documentaire en prend un peu pour son grade, mais qu’importe : le plus important ici est de réaliser à quel point il est reste important de penser à plusieurs formats au lieu d’un seul.

J’ai pu partir à sa rencontre ce weekend à Xi’an, dans la province du Shaanxi. Morceaux choisis de notre rencontre.

L’après Hiroshima

Alors que son trajet arrive bientôt à son terme, viendra un long travail pour Raphaël, l’équipe de production FatCat Films (avec Pierre Zandrowicz et Antoine Cayrol) et Mediastroika (avec Grégory Dominé). Au programme de ces prochains mois : traduction et montage. Est prévu pour 2011 la sortie du site internet vidéo dédié, qui présentera cartes, photos et récits que nous vous présenterons ici.. Viendra aussi le temps de réfléchir à une possible distribution de contenus exclusif pour un média : Site d’information traditionnel, pur player, ou encore chaine de télévision… toutes les possibilités sont envisagées pour trouver le meilleur moyer de monétiser le documentaire. En attendant, le projet est co-financé par amis, fans ou autres journalistes… et par tous ceux et celles qui veulent soutenir le projet.

Pour en savoir plus :
➜ Paroles de Conflits : Galerie photos de l’étape à Xi’an (Flickr)
➜ Paroles de Conflits : Exemple de crowdfunding appliqué au journalisme (Owni)
➜ Paroles de Conflits : Le blog (Webdocu.fr)

Slate.fr v2

Ces dernières semaines ont été importantes pour ces medias que l’on appelle ‘pure-players’, non qu’ils recherchent à tout prix à ressembler aux medias plus traditionnels, mais qu’ils aient pu mobiliser des moyens comparables, tant sur le fond que sur la forme. Dans cette course contre la montre pour obtenir le scoop, l’arrière-garde que représente les web designers ont aussi leur role pour trouver de nouveaux modes d’accès à l’information.

Après un an d’existence, le nouveau magazine slate.fr assure un redesign efficace à partir de lundi 12 juillet. De nouvelles ambitions apparaissent pour ce pur-player un moins populaire que Rue89 (ou, plus récemment, de Mediapart), qui continue très certainement à se distinguer par la longueur agréable de ses articles ainsi que de son esprit analytique et moins caustique.

Réalisé par Upian, cette refonte s’articule de nombreux changements visuels et structurels. En voici l’avant-première.

Slate.fr — nouvelle version (Homepage)Slate.fr — nouvelle version (page article)

Ce qui faisait un des originalités du site slate.fr, à savoir la liste de liens verticale appelé « ici et ailleurs », s’appelle désormais « Lu, Vu & Entendu, et s’affiche à l’horizontale. Comme pour signifier que Slate.fr poursuit son évolution un format web-magazine, et s’éloigne de la logique de flux en temps réel. Un choix relativement risqué : les chiffres d’audience générés par ce type de contenu sont importants, mais il ne faut pas négliger l’économie d’énergie réalisée. Maintenir un desk requiert beaucoup de temps aux équipes en interne.

Les contenus générés par les utilisateurs ont vu davantage qu’un lifting, avec l’integration des commentaires dès la homepage. Comme pour marquer une nouvelle ambition pour le site, celle d’attirer de plus en plus de nouveaux lecteurs et participants. Avec, au même niveau hiérarchique, la présence d’une liste de récents blogposts, ainsi que de réactions de lecteurs.

Enfin, comme pour tenter de diversifier un peu plus les contenus, slate.fr se dote d’un affichage de galeries photo tout doit inspiré de Boston, avec une première application du format « Big Picture » à la française. Plus immersif encore, avec le choix d’afficher les photos sur un fond foncé. Autre nouveauté de contenu, l’arrivée d’une chaine Slate.tv, qui recense les dernières bonnes vidéos et met en valeur les futures productions vidéos maison.

Enfin, quelques fonctionnalités existantes ont pu être remaniées et mises en valeur, comme la possibilité de naviguer d’article à article, par grands sujet d’actualité (ex tags) mais aussi par ordre chronologique, la possibilité de se connecter à son réseau social favori pour pouvoir poster un commentaire.

En exclu pour le blog Gabyu, la page d’accueil et la page article (sur Flickr).

Le coup d’oeil dans le de ‘rétroviseur’ :

Arte Webdocs

Le site d’Arte Webdocs va, je l’espère, réussir son pari. L’enjeu ne concerne pas seulement Arte. Le principal enjeu : mieux intégrer et valoriser les web-documentaires sur les sites d’informations et ainsi générer une nouvelle et importante source d’audience sur ces sites. La direction artistique est réalisée par la webagency Upian (Sebastien Brothier), la réalisation de Thibaut Lion et la gestion du projet a été confiée à Marie Chevalier. Fidèle à l’aperçu à J-10, la capture du site prise ce matin.

Arte-Webdocs-20100223

En ligne également, le web-documentaire consacré à Havana et Miami. Ici, l’interface permettant de réagir et d’ajouter de contenus. Tout en couleurs et en contrastes !

arte-webdocs-interface-com

L’idée est ‘simple’ : il s’agit d’éditorialiser et d’organiser une base de documentaires multimedias (essentiellement vidéos) avec du texte enrichi, au travers d’articles rédigés par Arte. Le tout avec une mise en avant de sélections de vidéo, de classement et de commentaires via les plateformes sociales comme Twitter.

Les codes graphiques (par Karim Moreau et Eric Drier de Upian) reprennent un player vidéo géant (avec une large format pour le webdoc du moment), suivi d’un déroulé d’articles plus classiques. Il y a encore quelques petits détails qui me chiffonnent (petit jeu : parviendrez-vous à trouver l’annonce du webdoc « Gaza-Sderot » ?), mais dans l’ensemble je ne cacherai pas que c’est une belle réussite et que les gros écueils ont été évités.

Quelques particularités et mes ‘bons points’ au niveau des web-feuilletons :

  • Chaque web-documentaire dispose d’une élégante interface de consultation/navigation, afin d’offrir au lecteur une experience de consultation unique. Elle est un bon moyen de faciliter l’ajout de commentaires et de remettre le ‘lecteur’ au centre de l’expérience.
  • Chaque web-feuilleton dispose de sa propre url et un sous-domaine. Cela est necessaire quand on sait que les webdoc sont disponibles au format flash, un format pas idéal niveau SEO. Lorsque l’on connait l’état du débat sur le Flash/html5 à l’arrivée des tablettes Apple en France, on peut se dire que Flash a encore quelques beaux jours devant lui. Le fait qu’il sera possible de bidouiller le flash pour le transformer en application iPad empêche une profonde remise en question, pourtant nécessaire..
  • Vu la fréquence de mise à jour des productions (certaines sont des feuilletons s’étalant sur 3 mois), le flux RSS pour chaque webdoc est d’une réelle utilité. Imaginer d’autre méthodes d’alertes de mise à jour (email pour les plus gâteux) n’aurait pas été de trop.
  • La question du débit : Ce genre d’experience n’est possible qu’à partir de l’ADSL. Je fais la fine bouche, me direz-vous, mais c’est le genre de mention qu’on verra très certainement apparaitre je l’espère.
  • La question du modèle économique n’est visiblement pas un problème, et le choix de ne pas afficher de format publicitaire classique est un réel plaisir. Cela laisse supposer que si publicité il y aura, elle se trouvera ailleurs  (le webdocu sponsorisé par un annonceur?).

J’espère que vous irez vous faire une idée sur webdocs.arte.tv, et lire vos avis sur vos sites respectifs ou ci-dessous !

Social News

mayer

La présence de Marissa Mayer (une des baronnes de Google) à la conférence Leweb ’09 n’aura pas vraiment permis de découvrir de nouveaux produits… Michael Arrington, bien que montrant beaucoup de talent, n’aura pas réussi à la ‘cuisiner’ davantage. Hormis les quelques anecdotes sur Wave (qui est un peu utilisé par les équipes en interne), ou sur Safari (son navigateur préféré apres celui de la maison, Chrome browser), on n’en saura pas plus.

Ce qui m’a surpris, c’est l’intéret porté par Google aux médias, à la presse, bref, aux nouvelles (‘news’). Le poids de son speech sur les médias et le contenu éditorial laisse envisager que Google souhaite définitivement repenser les médias traditionnels et proposer de nouveaux modes de consommation de l’actualité, et ce, grâce aux contribution des réseaux sociaux :

L’information hyper-personnalisée

Pas de changements : le poids d’une information est associée à celle d’un lien. À l’aide du ‘bruit’ généré par les utilisateurs des réseaux sociaux, les pages articles sont interconnectées entre elles, permettant d’établir un nouveau maillage de contenus. La grande différence réside plutot dans l’utilisation des liens par Google, et proposer à l’utilisateur une information personnalisée, des liens personnalisés au pied des articles de medias et journaux en ligne. Marissa Mayer l’explique bien : Les medias traditionnels n’offrent pas assez de liens contextuels en bas de chaque article. Google va ainsi proposer au medias d’étoffer des liens associés. Reste à savoir si les medias vont accepter et se preter au jeu.

Screen shot 2009-12-09 at 7.46.36 PM

Petits ruissaux d’articles, formant un long fleuve : De l’article au dossier.

Si les actualités sur Google news sont généralement classés par thématique (Sports, sciences…), le système Living Stories à venir va rester avant tout anté-chronologique, avec des liens vers des contenus tout fraichement publiés. Pour Google, nul question de remettre en cause l’unité de base du contenu éditorial à savoir un article. Pour elle, tout ce qui reste à faire concerne, là encore, des relations entre les articles et de créer un fil d’articles sur une thématique précise et définie par les tweets et leur hashtags (en tout, 12 critères, selon Marissa). Ainsi un ‘dossier’ Changement climatique pourrait permettre de lire tous les dernières informations relatives à ces contenus, le tout en temps réel. Ce mode de consultation va ouvrir des possibilités de découvrir de nouveaux médias, il rappelle scrupuleusement le role du média et lui propose de se concentrer sur son métier de création d’articles, plutôt que de devenir agrégateur. Uniquement en anglais, le service Living stories affiche déjà plus qu’une simple liste de liens, car il conserve votre historique et parcours de navigation et sait ce que vous n’avez pas encore lu, les derniers développement d’une actualité brulante — et ne vous proposer que ceux-ci.

Fast Flip

Et voilà, ce qui devait arriver arriva… Google Lance Google Fast Flip. Je dois avouer, c’est la claque ! Le scan visuel d’articles devient possible, sans scroll. L’experience est saisissante.

google-fast-flip

Les sites webs sont parfois si lents à se charger, qu’il nous faudrait désormais parcourir le web sans meme taper une seule adresse, ni utiliser le clavier. Nos doigts ne servent qu’a tapotter et cliquer. On perd évidemment énormément en interactivité — finis les rollovers, boite flottante, effets divers et variés. Mais qu’est ce qu’on gagne en rapidité de chargement, et donc, de lecture !

Comme je le disais plus haut, ce service fonctionne car il fonctionne en un clin d’oeil. La simplicité et la rapidité, deux armes ultimes que Google détient encore pour longtemps…

Pensé (surtout?) pour les mobiles
Le service fonctionne déjà sur iPhone et Android. Et c’est une pure solution pour un affichage simple et efficace.

Bientôt avec du contenu en langue Française ! Le service utilise Google News English (pour l’instant, mais sera dispo en France à la fin de l’année, d’après les informations de Guillaume Grallet dans l’Express). A terme donc, nous pourrons lire les premières pages des articles du Figaro, du Point, Libération… Je vois déjà quelques éditeurs de sites jaser et crier au scandale. Mais, dans le même temps, cette solution pourrait sauver la presse magazine (papier) du marasme ambiant.

Les grands vainqueurs ? Google, bien sur, mais pas seulement. Les concepteurs de sites et d’interfaces, bien sur ! Car ici, et à la différence des flux RSS, le design jouera un rôle important dans le clic de l’utilisateur qui accédera au contenu de l’article.

Le combat de Libé

Est-ce que Libération va y arriver? Certains disent que c’est la “nouvelle formule” de la dernière chance.

Libé ne va pas fort, et une nouvelle fois, change de maquette. Une évolution en douceur. Un journal plus élégant. Trop? Arriverez-vous à lire “Évènement” ou “Monde” de loin, tellement la police est fine? On entend un peu de tout.

D’autres disent que la maquette change tellement souvent que cela devient difficile de s’identifier au journal. Les salariés de Libération sont désormais habitués aux nouvelles moutures. Elles se préparent, comme dans beaucoup de journaux, dans des officines externes, puis sont présentées en secret à des équipes très restreintes, et puis là patatras, souvent, cela ne fonctionne pas. Et on se retrouve au mois de juin, lorsque tout le monde commence à partir en vacances, alors on repousse à la rentrée, et cela tombe plutôt bien, parce que tant qu’à faire, il serait de bon ton que le web soit prêt, en même temps.

C’est un peu comme le dessert en même temps que l’Expresso. Souvent, c’est essentiel… Après avoir communiqué sur la culture du scoop, Libé fait donc une nouvelle offre à ses lecteurs. Un quotidien toiletté, un site web garni d’une couche payante, et un magazine de fin de semaine. Essayons d’y voir plus clair après tout le chahut de la semaine dernière.

1/9 — Libération modifie légèrement son ADN

Liberation modifie légèrement son ADN et se transforme, tant sur le web que sur le papier, avec toujours un petit retard pour le web — un grand classique désormais. L’élégante nouvelle maquette du quotidien Libération perd en lourdeur, et s’aère en lisibilité, bien qu’avec plus de texte. Car la ‘nouvelle formule’ – ou plutôt la nouvelle offre, comme la publicité le dit – exprime le souhait d’une adaptation du traitement de l’information, plus textuel, moins brut, de manière à fournir au journal une légitimité qui le différencie du contenu du site internet. J’aime dire qu’il devient un heptomadaire, tant son look de couverture ressemble à un magazine.

Le ton ‘magazine’ se retrouve aussi parfois dans son traitement graphique de l’information, grâce aux illustrations qui accompagnent les sujets qui sont traités en plusieurs feuillets. Exemple ici avec la double page illustrée.

double-page-illustree

Alors que, bien trop souvent, les équipes travaillant sur les maquettes ont plutôt tendance à chercher à « se cacher », et se terrer, recherchant l’indépendance et redoutant les critiques gratuites et souvent sans rapport avec les problématiques centrales, Libération s’est ouvert aux avis et conseils provenant de l’extérieur de la maison. Javier Errea and Antonio Martin, de l’agence de design de presse Innovation Media Consulting Group, ont mobilisé les équipes en interne pour réaliser la maquette. Il est possible de suivre via leur blog, des derniers préparatifs aux des dernières validations jusqu’aux dernières retouches pour l’édition weekend.

helping-design-team (Credit innovationsinnewspapers.com)

L’équipe a pour credo que les infographies pouvaient sauver un journal, mais sa démarche est allée encore plus loin : Elle a « tout simplement » exploité une des grandes forces d’internet pour le print, à savoir la possibilité de moduler la présentation en fonction des besoins éditoriaux, tout en permettant au lecteur de s’y retrouver.

libe-maquette-couverture

2/9 — La Modularité

Libération a modifié sa vision de l’actualité, en s’offrant plus de modularité sur sa Une, qui auparavant était essentiellement conçue pour n’afficher qu’un titre.

Or l’information a changé, à quelques exceptions près, impossible pour un lecteur curieux et ouvert que de rester focalisé sur un seul évènement. Et pour vendre, il vaut mieux proposer davantage de titres, histoire de présenter au plus grand nombre à quel point le journal est dense.

La solution hybride consiste désormais à s’offrir plus de gabarits, dont celui utilisé pour la sortie du lundi 7 septembre, consistant à un patchwork d’infos, et des photos horizontales difficile à recadrer. En voici quelques exemples ici

libe-maquette-article

3/9 — L’identité de Libération

La question de l’identité de la marque se pose à nouveau à nouveau. Chaque support offre un traitement différent de l’information, mais empêche-t-il une homogénéisation de la charte graphique print/web, afin de maximiser la perception de l’identité et l’image de Libération à travers ses supports ?

typographie

Deux exemples tout simples, celui des choix typographiques et de la palette des couleurs. Une Trade Gothic est désormais utilisée pour les titres du papier et devient une Georgia sur le web, à l’heure où les @font-face et autres méthodes d’affichages de polices sur le web deviennent répandus.

color-680

Là encore, bien que les rubriques print et l’architecture d’information du site web soient totalement différentes, il n’en demeure pas moins possible de rendre l’ensemble plus cohérent. Avec pour conséquence, repérage par rubrique plus aisé. Le site reste globalement fidèle à lui même, avec un Affichage de type ‘blog’ listing. Peu de changement donc, le web parchemin fait son petit bonhomme de chemin.

4/9 — La question du payant?

Pour une fois, une évolution du contenu du site se fait sentir, il s’agit de proposer des services premium. Et Libération est également tombé dans cette mode 2009 de proposer un service payant, en suivant la stratégie qui sera mise en place incessamment sous peu par lefigaro.fr, et son réseau social. Tous les modèles économiques sont le bienvenus pour cette presse en crise. Cela peut fonctionner, si les medias traditionnels s’y mettent au même moment.

Voici Ludovic Blecher, responsable du site internet du journal, annoncer lors de la conférence de presse la grande nouveauté, la zone payante:

Nous reviendrons plus tard sur cette version payante à laquelle je me suis abonné (si, si!). Qu’offre-t-elle vraiment en plus, tiendra-elle ses promesses, évoluera-t-elle régulièrement et vite? Nous en reparlerons.

5/9 — Les unes expliquées par les journalistes

“A nouvelle formule, nouvelles unes. Et nouvelle forme pour 5 jours à la une, notre émission vidéo hebdomadaire consacrée à l’actualité vue à travers les manchettes de Libé.”

“Désormais enregistrée au coeur de la rédaction, donnant la parole à tous les journalistes concernés par les événements couverts durant la semaine, 5 jours à la une a pour objectif de vous faire partager les dessous de Libé, la façon dont la rédaction fait des choix, s’interroge, travaille.” C’est une très bonne idée :

6/9 — Libération, Le Mag

Pour le même prix, le samedi, on aura un magazine. Libération, Le Mag, est le nom de ce magazine dont le premier exemplaire est sorti ce samedi 12 septembre.

C’est Béatrice Vallaeys qui en a la charge. Voici le contenu du premier numéro:

7/9 — La conférence de presse

Une vidéo à venir, à suivre sur l’Observatoire des Médias.

Une sélection des twitts émis pendant cette conférence.

  • gillesbruno: Laurent Joffrin: « Ce n’est pas une nouvelle formule » http://bit.ly/newlibe0709
  • proxiti: RT @gillesbruno: Joffrin sur l’AFP: « l’AFP n’a rien fait sur Chatel au supermarché »
  • gillesbruno: Joffrin sur l’AFP: « l’AFP n’a rien fait sur Chatel au supermarché »
  • natachaqs: RT @gillesbruno:La future appli iPhone de Libé, qui arrivera en retard en octobre, offrira une offre spéciale pour les abonnés.
  • gillesbruno: La partie magazine sera agrafée, grâce à Riccobono http://twitpic.com/gaktq
  • eparody: @lblecher @latrive alors ça y est, c’est Tintin Objectif Lune? Tous mes voeux les garsgillesbruno: Joffrin : « le directeur du Figaro a des idées plutôt libérales » http://twitpic.com/gak6n
  • manolo0111: 2 offres payantes pour libe.fr : 6€ et 12 € ! Impatient de savoir ce qu’il y a dedans ?
  • gillesbruno: Selon Lusovic Blecher, Libé serait le premier à offrir une zone premium sur iPhone
  • gillesbruno: La future appli iPhone de Libé, qui arrivera en retard en octobre, offrira une offre spéciale pour les abonnés.
  • gillesbruno: Ludovic Blecher présente les deux offres payantes de Libe.fr : 6 ou 12 euros / mois http://twitpic.com/gaiu4
  • pierrehaski: C’est @lmauriac qui va être content! RT @gillesbruno: L’ancien Cahier Multimédia revient!! A la fin du journal.
  • gillesbruno: « Le Mag » : Libération lance un magazine le Samedi… avec une page Archives comme Le Monde 2.
  • gillesbruno: L’ancien Cahier Multimédia revient!! A la fin du journal.
  • gillesbruno: Joffrin ne veut pas uriliser le terme « nouvelle formule » #newlibe0709 http://twitpic.com/gahmr

8/9 — Les réactions sur le web

➜ L’analyse de Benoit Drouillat, designer d’interfaces, qui décrit la nouvelle formule de Libération comme étant “une forme mosaïquée”

➜ L’avis de Christian Aubry sur Médiaschroniques, La “refonte” de Libé : un rituel primitif sans intérêt

➜ L’info 01net, qui écrivait qu’« une application payante très innovante permettra d’accéder à d’autres services, dont on ne connaît pas encore la teneur ». Espérons que Libé ira dans le sens de l’ouverture des sources, de l’info multimédia, du temps réel et du remix. Si c’est le cas, je réviserai ma position en conséquence…

➜ Le parcours du montage des pages sur le chemin de fer virtuel, commenté en musique, par Peter Gabor : « Une captation video du nouveau journal électronique (pdf) de Libération on-line. Une ergonomie classique, où il manque certaines fonctionalités comme le zoom aussi bien sur les textes que sur les images… ». Avec une comparaison avec l’affichage du monde.fr.

➜ Les twits choisis :

9/9 — Laurent Joffrin invité des médias

➜ France Inter le 7 septembre – “Comme on nous parle” – Pascale Clark : Invité sur Inter le lundi du lancement. Pour arriver à “ce qui nous intéresse”, bougez le curseur jusqu’à la minute 7′41″.

➜ Sur le site de France Inter, “Mouchette” commente : “Laurent Joffrin est so lui-même. Tout en aphorismes inégalables. Un instrument du bonheur.”

➜ RFI le 11 septembre – “l’Atelier des Médias” – Philippe Couve :

@Enikao demande à Laurent Joffrin si les journalistes ne devraient pas répondre plus dans les commentaires des articles de liberation.fr… “On fait ca tout le temps. On répond à des interrogations d’internautes.”

Philippe Couve relance Laurent Joffrin et insiste : “les commentaires sont peu fréquentés par les journalistes” ce à quoi Joffrin répond: “Les journalistes n’ont que 24 heures. Il y en a un certain nombre qui ont des blogs, aussi. Sur un blog, on discute.”

Laurent Dupin pose une épineuse question sur le site de l’atelier des Médias, relayée par Philippe Couve : “Questions de logique et de stratégie : pourquoi s’opposer courageusement à la ‘presse low cost’ notamment sur le online… tout en y contribuant soi-même? Je parle des blogs de Libération (auxquels j’ai participé avec Serial Worker). Vous les dites ‘invités’ et donc gracieux (’parce que ça fait de la publicité et de la notoriété’). La belle affaire! Peut-on vivre de cela?” … et Joffrin de répondre : “Peut être un jour. Si on a besoin de pigistes, on les paye. Pour le moment, on a pas prévu de rémunérer les blogueurs.”

@StevenJambot demande à Laurent Joffrin si Libération est un journal de gauche: “Oui. […] On est une maison ouverte, cela va de Bayrou à Besancenot”.

Merci et à la semaine prochaine (avec le nouveau Figaro)

Un post roundup écrit à 4 mains, sur 2 fuseaux horaires et 3 CMS :
➜ Gabriel Jorby : @gabyugabyu.com, et
➜ Gilles Bruno : @gillesbrunoobservatoiredesmedias.com

Dave Bowker

L’infographie n’est pas toujours là pour représenter des concepts simples, bien au contraire. Dave Bowker, graphiste et designer web, en a fait l’expérience, en analysant le contenu sémantique du Guardian sur une semaine complète. Par rubrique, par auteur, par sujet : tout est passé au crible. Ce qu’il cherche à (dé)montrer : il ne le sait pas encore.

dave-bowker-one-week-of-the-guardian-detail1

dave-bowker-one-week-of-the-guardian-detail2

dave-bowker-one-week-of-the-guardian-large

L’infographie devient un outil de travail artistique. L’analyse des données, leur affichage, tout est sujet à imagination ici. Nous sommes loin, très loin de l’infographie traditionnelle. Elle est support subjectif à esthétisme. À la manière d’un tableau que l’on analyse, le lecteur l’interprétera à sa manière, et devra fouiller, être curieux. Par exemple, le chaos ambiant laisse découvrir des zones d’ombres, qui sont elles aussi sujettes à nombreuses interprétations (jour de grève, congés, week-end…). Il serait bien étonnant de réaliser une étude d’eye-tracking sur ce genre de compositions !

Dans cet autre exemple, ci-dessous, Dave Bowker souhaite repenser une table des matières. Faire une synthèse d’une semaine d’articles, classés par rubriques, et un traitement typographique basé sur les titres. Les liaisons entre les différents articles sont les liens entre rédacteurs et journalistes ainsi que les dossiers spéciaux, écrits en 2,4 voire 6 mains.

dave-bowker-one-week-of-the-guardian-contents

content-table

Là voilà donc, l’infographie réussie que j’appelle « à trois temps ». Premier temps, « wow, c’est beau ». Deuxième temps, « je ne comprend pas, je vais devoir explorer, découvrir comment cela fonctionne », troisième temps, « tout ça pour ça ? je suis pas sur, je vais la montrer à quelqu’un d’autre pour voir ce qu’il y trouvera »…

Sortez vos onglets, toutes les infographies et illustrations étudiées sur Gabyu :

➜ David McCandless, l’infographie distrayante.
➜ La Mosca, l’agence aux infographies verticales.
➜ SPVZ (Valentin Adam), l’infographie en tant qu’auto-portrait.
➜ Dave Bowker, la lecture d’une infographie en trois temps.
➜ Information Architects (iA), WebTrend map, et l’infographie sociale.
➜ Catalogtree, illustrations et/ou design d’information ?
➜ Timm Lerkeritz, L’infographie multi-supports

Digital Distractions

Oui, la culture web favorise l’entertainment sous toutes ses formes. Et pour les plus geeks d’entre eux, la forme d’humour ultime revêt la forme ironique d’une information sérieuse. Et quoi de plus sérieux et grave qu’un schéma ou une infographie, telle que celui sur les Distractions Numériques proposée par David Mc Candless ?

The hierarchy of the digital distractions

Ou encore ce graphe précisant la conspiration américaine contre la réforme de la sécurité sociale US :

AHIP_chart

Je vous épargne des innombrables infographies-labyrinthes ou autres schémas explicatifs sur l’ingestion de bière… :)

Toutes les infographies et illustrations étudiées sur Gabyu :

David McCandless, l’infographie distrayante.
La Mosca, l’agence aux infographies verticales.
SPVZ (Valentin Adam), l’infographie en tant qu’auto-portrait.
Dave Bowker, la lecture d’une infographie en trois temps.
Information Architects (iA), WebTrend map, et l’infographie sociale.
Catalogtree, illustrations et/ou design d’information ?
Timm Lerkeritz, L’infographie multi-supports

La Mosca

Dans notre petite promenade des agences d’infographies intéressantes, je me tourne vers Mosca, studio graphique de Barcelone. Leur collaboration qui m’a interessée a été celle d’alimenter une colonne étroite du journal La Vanguardia. Le défi est de taille : comment faire entrer une telle masse de données, de timelines, courbes, cartes, ou graphiques dans un espace aussi contraignant ?

La Mosca — Data

Alors que la plupart des infographies occupent des espaces larges, ici il a fallu parfois regorger d’imagination pour faire tenir l’essentiel sur une petite largeur et une grande hauteur.

La Mosca — Data

Le reste de leur création est a découvrir sur leur site à la rubrique Data

Toutes les infographies et illustrations étudiées sur Gabyu :

➜ David McCandless, l’infographie distrayante.
➜ La Mosca, l’agence aux infographies verticales.
➜ SPVZ (Valentin Adam), l’infographie en tant qu’auto-portrait.
➜ Dave Bowker, la lecture d’une infographie en trois temps.
➜ Information Architects (iA), WebTrend map, et l’infographie sociale.
➜ Catalogtree, illustrations et/ou design d’information ?
➜ Timm Lerkeritz, L’infographie multi-supports

SPVZ

Dans cette recherches d’infographies, je n’ai pas trouvé uniquement des agences établies. Après avoir parcouru les travaux de l’agence Catalogtree, je vous propose de suivre Valentin Adam. Il fallait varier les plaisirs. Ses recherches sur la typographie et l’affiche le conduisent, tout naturellement à chercher quelque inspiration dans son activité en ligne, qu’il va raconter … en camemberts !

À la manière de Nicholas Felton, sa vie personnelle va générer un certain nombre de données, qu’il est possible de manipuler ensuite. Mais voila, Valentin est avant tout un graphiste print. Or, comme nous le voyons dans cet exemple, le print peut aussi offrir des possibilités d’interaction sensibles, tangibles.

Il réalise un supplément factice pour Le Monde consacré à la blogosphère. Un système de 2 affiches se superposent pour recomposer l’information. Ce premier exemple nous montre que nous sommes chacun en mesure de raconter une histoire différente et unique, avec nos données informatiques et personnelles. Ici, pas d’institut de sondages, ni de source officielle. En supprimant cet intermédiaire, on supprime aussi l’intention traditionnelle d’information. Ici, l’infographie est un devenue auto-portrait.

(SPVZ) Valentin Adam

(SPVZ) Valentin Adam

(SPVZ) Valentin Adam

Avec l’affiche Homme/Femmes, qu’il réalise pour le concours étudiant Chaumont (2008), les données, issues de sondages realisés entre 2005 et 2007 par l’INSEE, ne sont qu’un prétexte à faire passer un message simple, celui de l’existence de disparités. Nous sommes moins dans l’esprit de l’information mais plus dans le souci de la représentation.

(SPVZ) Valentin Adam

Au final, avec ce deuxième exemple, nous entrons pleinement dans l’illustration. La frontière entre les deux aspects de l’utilisation de l’infographie reste plus perméable.

Toutes les infographies et illustrations étudiées sur Gabyu :

➜ David McCandless, l’infographie distrayante.
➜ La Mosca, l’agence aux infographies verticales.
➜ SPVZ (Valentin Adam), l’infographie en tant qu’auto-portrait.
➜ Dave Bowker, la lecture d’une infographie en trois temps.
➜ Information Architects (iA), WebTrend map, et l’infographie sociale.
➜ Catalogtree, illustrations et/ou design d’information ?
➜ Timm Lerkeritz, L’infographie multi-supports

iA : WebTrend map

Une autre agence à suivre, Information Architects, basée à Tokyo. Nous connaissions le Web Trend map imprimé, réalisé par l’agence de design d’information.

Avec avec Craig Mod, ils lancent aujourd’hui une version interactive de ce service, que je vous invite à découvrir sur webtrendmap.com. Le service est toujours aussi élégant, et fournit nombre d’informations sur les contenus des sites sélectionnés, grâce à l’affichage des flux RSS associés.

Web Trend map

Toutes les infographies et illustrations étudiées sur Gabyu :

➜ David McCandless, l’infographie distrayante.
➜ La Mosca, l’agence aux infographies verticales.
➜ SPVZ (Valentin Adam), l’infographie en tant qu’auto-portrait.
➜ Dave Bowker, la lecture d’une infographie en trois temps.
➜ Information Architects (iA), WebTrend map, et l’infographie sociale.
➜ Catalogtree, illustrations et/ou design d’information ?
➜ Timm Lerkeritz, L’infographie multi-supports

Catalogtree

J’ai tenté de trouver pour cette sélection, les infographies offrant le meilleur compris entre efficacité et originalité. Quelques agences se consacrent exclusivement à leur création, et de leur experience, il est possible de distinguer des modèles présents et à venir.

Première partie de cette sélection, les travaux réalisés par l’agence de design d’information Catalogtree, qui a collaboré pour nombre de magazines, tels que Good Magazine, Le New York Times magazine, ou Wired, avec la fameuse carte de l’attaque distribuée, ou Ddos

Un exemple détaillé de leur travail sur les différents instituts et médias ayant publié des sondages lors des élections américaines.

Catalogtree ➜ Poll Position

Catalogtree ➜ Poll Position

Catalogtree ➜ Poll Position

Catalogtree ➜ Poll Position

Un coup d’oeil obligatoire sur la légende de ce graphique : Sans légende, pas de graphique.

Au cours de cette rentrée nous allons donc revoir quelques unes des illustrations qui selon-moi, sont à ranger au Panthéon du graphisme d’information. J’utiliserai tantot infographie, tantot illustration pour décrire ces images. Je vous invite à voir les posts de Peter Gabor consacré aux ouvrages Graphis, et qui rappelle, à juste titre, le véritable sens du mot infographie.

Les assistants d’aujourd’hui (Keynote, Powerpoint) sont des vecteurs de création de graphes et de courbes qui sont redoutables dans l’efficacité de l’expression du message d’un graphique, où peu de risques sont pris, permis. L’excès de conventions finissent par tuer la diversité graphique que peut revêtir ce mode d’expression. Également, on voit apparaitre de plus en plus d’agence de graphisme d’information, de studio graphiques pour les médias, concevant des illustrations de plus en plus inventives, originales, qui pouvent tomber dans le piège inverse, celui de fabriquer des infographies agréables mais qui détourne le lecteur du message que transmet celle-ci.

Toutes les infographies et illustrations étudiées sur Gabyu :

➜ David McCandless, l’infographie distrayante.
➜ La Mosca, l’agence aux infographies verticales.
➜ SPVZ (Valentin Adam), l’infographie en tant qu’auto-portrait.
➜ Dave Bowker, la lecture d’une infographie en trois temps.
➜ Information Architects (iA), WebTrend map, et l’infographie sociale.
➜ Catalogtree, illustrations et/ou design d’information ?
➜ Timm Lerkeritz, L’infographie multi-supports

Slate.fr remixé

« Nous démarrons avec un profil modeste et humble » a déclaré Jean-Marie Colombani. Pourtant, le site affiche déjà son ambition. Grâce à son contenu riche et ouvert. Après Rue89 et Mediapart, les pure players installent et veulent afficher leur différences éditoriales par rapport aux médias traditionnels. Le contenu affiché sur le site en home page est effectivement très ambitieux : Tribunes de prestiges, chroniques intelligentes, ouverture sur les liens externes…

slate.fr version betaMalheureusement la photo de une ne passe pas à l’heure où j’écris ces lignes. 

Ma grande surprise, c’est le peu de creativité qui a été employé pour la maquette du site, véritablement austère (terme mérité et utilisé dans le Figaro et sur lepoint.fr). Alors j’ai immaginé, pour vous, à quoi aurait du ressembler slate.fr s’il avait été fortement inspiré du site original américain. C’est ci-dessous et c’est un redesign en exclusivité chez gabyu :)

slate-fr-gabyu-redesign

Pour rendre la maquette un peu plus réaliste, le contenu d’exemple est ici basé sur un métissage du contenu de la version US, traduit en partie avec Google Translate et mes propres traductions. D’autres contenus, nottament iconos, sont importés directement du site US, délaissant ainsi les photos visibles sur la version française. Le système de carousel est bien présent et permet de rendre le haut du site mieux édité, tandis que le bas du site reste une sélection d’articles. Dans cet exemple, les titres et chapo sont ceux en ligne le jour du lancement du .fr… 

À comparer avec la version US qui a servi d’exemple à cette proposition de remix.

comparaison

 

Journalisme de liens
Les sélections de liens, grand sujet à la mode en ce moment vous l’aurez remarqué en France. Heureusement que Delicious n’a pas attendu les médias français pour exister. le slate.fr propose la boite à liens (un intitulé lancé nottament par Chryde sur la Blogothèque, il ya quelques années de cela).

Les codes couleurs restent globalement identiques, excepté la couleur jaune :

palette-slate-website

 

Le système de navigation supprime la fameuse languette à 45°, pourtant si symbolique et essentielle dans l’image de Slate :

menu-off

 

Autre grand moment d’émotion dans l’experience utilisateur, qui part lui aussi en fumée, dans la version fr : Le menu déroulant qui expose les derniers articles de la rubrique sélectionnée. Alors que le site français est à la recherche de financement basé sur la publicité, il aurait pu être judicieux d’imaginer vendre de l’espace pub dans ce menu, à l’instar de cet annonceur, situé en bas du menu déroulant.

menu-display-ad

Au niveau grille, mise en page, icono, slate.fr est plutot retourné s’inspiré sur le modèle de Rue89 ou d’un media français plus classique.

Heureusement, une note d’espoir : le site actuel est en version beta. On s’attendra donc à des belles améliorations ces prochaines semaines.