Archives par mot-clé : redesign

Quartz 3.0

On m’a encore récemment demandé quelle était mon app iPhone favorite pour lire l’actualité. Et d’admettre que la plupart des apps y sont installées essentiellement pour les notifications, seul flux accessible en Chine: par exemple, les contenus des applications iOS le Monde New York Times sont bloquées en Chine.

J’ai récemment pris le coup de coeur des pure players qui spécialisent leur thématiques de manière claire (Slate, Eon Magazine, ou encore Good). Parmi mes préférés: Quartz ou qz.com. Le site prend le parti, et ce depuis ses débuts, de mettre en avant la plateforme mobile, et ce.. sans utiliser la moindre app, et opte pour une version responsive particulièrement travaillée.

Quartz opère sa deuxième refonte. Quartz explique que la refonte inclus l’ajout d’une homepage éditorialisée, et ce malgré que le site n’a jamais cru aux longues listes de contenus. Besoin d’audience supplémentaire? Possible. Le site souhaite convaincre ses lecteurs et les marques que la qualité et la rareté des contenus intrusifs iront de pair. Les annonceurs ne sont pas mis au placard, mais vont disposer d’espaces plus immersifs.

Une épure visuelle qui ferait plaisir à voir chez nos chers medias français.

Sous le header minimal et l’immense photo de une, quelques gros plans sur la section de la homepage intitulée « The Brief », qui prend le parti de presenter une nouvelle en 2 ou 3 phrases courtes, accompagnées de liens. L’équivalent de 3 a 4 tweets rassemblées.

The Brief. Notez que c'est la seule zone du site qui comporte la présence d'un annonceur.
The Brief. Notez que c’est la seule zone du site qui comporte la présence d’un annonceur.

Dans les articles, une navigation facile d’accès et réactive. Je vous ai capturé un exemple de parcours utilisateur dans la vidéo ci-dessous:

La version desktop du site est réussie meme si on ressent facilement que la refonte du site cible avant tout les mobiles.

Avec une seule colonne, le site démontre qu'aucun compromis a été pris pour mettre des batons dans les roues des utilisateurs. Seule obligation: scroller ou utiliser la navigation des menus.
Avec une seule colonne, le site démontre qu’aucun compromis a été pris pour mettre des batons dans les roues des utilisateurs. Seule obligation: scroller ou utiliser la navigation des menus.

Force est de constater que les choix de la simplification de la mise en page des sites d’information vont de l’avant. Avec de tels parti pris, je ne peux souhaiter que bonne continuation à Quartz!

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.

TBWA\Paris

Un site lancé tout discrètement en début de semaine, le site parisien de l’agence TBWA, l’agence au ‘\’ (Le backslash, symbole du MS-DOS, au passage). L’aspect général n’a rien de disruptif (mot pourtant associé à cette agence), mais celui-ci reste à la page, fonctionne correctement, et respecte les standards du moment (le nécessaire responsive design). Continuer la lecture de TBWA\Paris

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

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.

Gawker Redesign

Retour rapide sur le redesign de Gawker, site d’information pure player couvrant l’actualité gadget, gossip, ou actualité génerale en rapport avec internet. Comme beaucoup de ses concurrents, il s’est d’abord monté en incarnant l’univers des blogs. Désormais, il souhaite quitter cet sphère pour intégrer la sphère applicative qui permet au contenu d’être plus modulaire et perméable aux autres flux tels que Facebook ou Twitter.

Le site s’apparente désormais davantage à un flux de contenu personnalisable, qui conserve une sidebar de type blog, qui permet au lecteur de rester dans un environnement de lecture simplifié, confortable. Deux modes de lectures sont possibles: Le mode « Splash », ou la homepage du site est éditorialisée dans une présentation de type magazine, et un mode « Flux » ou les articles les plus récents apparaissent en haut de page.

On peut expliquer quelques raisons qui ont justifié ce changement.

  • Lors de l’annonce du prototype d’iPhone 4, la rédaction a du stopper la publication de nouveau contenus afin de laisser le ranking important à ce scoop. Le système de publication et de ranking au format blog est donc encore bien trop restrictif.
  • Le site intègre de plus en plus de contenus interactifs ou vidéo (flash ou autre) qui ont besoin de beaucoup, beaucoup d’espace sur l’écran et qui génèrent l’essentiel du trafic du site. Maintenir le colonnage d’un format blog limite ces affichages.
  • Le problème du manque de personnalité du site. Comme partout, les contenus mis en ligne par ces medias sont reprises par d’autres acteurs. Pour captiver le lecteur de ce site, il faut désormais offrir une mise en écrin des contenus. Cela consiste finalement à déployer des formats de plus importants dès la homepage.
  • Le problème de la cohérence et de la gestion des sites. La mise à jour concerne l’ensemble des sites de Gawker: Gizmodo, Lifehacker. Il apparait désormais possible de démultiplier le trafic des sites en apportant, dans chacun d’entre eux, une partie du contenu des autres sites.

D’autres explications de ces changements sont introduites dans un post intitulé « Bienvenue sur le nouveau Gawker ».

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’ :

M-À-J LePoint.fr

Nous y voilà donc, lepoint.fr se modernise et lance sa nouvelle version dès aujourd’hui. Sans vouloir être révolutionnaire, les principales avancées de cette version sont importantes car elles préfigurent l’orientation que prend le site en matière de traitement et de valorisation de l’information, à travers un éditing particulièrement exigeant.

Le site doit notamment exprimer toute la diversité des opinions des journalistes du web, tout en représentant les différents chroniqueurs et éditorialistes qui publient régulièrement sur le site.

planche-contact-001

C’est le résultat de beaucoup de boulot en tests, écriture de documentation et intégration.

guideline

Quelques nouveautés : L’identité du site, avec, entre autres, son nouveau logo que l’on retrouve dans la zone d’identification du header, sa nouvelle typographie basée sur la Verdana, Géorgia et quelques restes d’Arial, des graisses normal aux Black.

L’éditorial n’est pas en reste, qui a complètement revu son rubriquage et qui se mobilise pour accompagner chaque sujet d’une liste de liens internes, d’une sélection de phrases intéressantes ou intrigantes, et d’une disponibilité des titres sous 4 colonnes.

Quelques gros plans (à différentes échelles, du 100% au 1600%), de cette nouvelle version, dans la suite.

header-top-lepoint

une-lepoint

sv-4col-agenda-culturel

tag-cloudconfiguration-hp

Merci à toutes les équipes qui ont travaillé sur le projet, une sorte de commando opérationnel, appelé ‘Webrocks’, composé d’Emmanuel, Fréderic, Corine, Karim et Daniel !

À mes lecteurs adorés : n’hésitez pas à me signaler sur ce site tous les bugs que vous pourriez rencontrer sur le site :-) Les utilisateurs interne du Point utilisant Mac, il se pourrait que l’affichage sur IE6 soit truffée de petits soucis.

Made by E-Artsup

C’est aujourd’hui que la collaboration entre les étudiants d’e-artsup, leur professeur Peter Gabor, et Le Point est en ligne sur le site lepoint.fr — en plus des autres infos à trouver sur le blog de l’école et du blog Design et Typo.

Lepoint.fr s’est finalement preté au ‘jeu’. Après un passage des équipes en charge du site internet, au sein de la classe des élèves de graphisme de typographie et webdesign de la jeune école E-art Sup, les opérations hivernales ont été pilotés par Peter, dans un bouillon d’idées toujours plus jaillissantes, les unes après les autres, pour, dans un second temps, dévoiler les travaux, en laissant chaque étudiant donner libre cours à ses explications et ses interprétations.

maquette-doveil
Maquette réalisée par l’équipe Doveil, chez e-art Sup.

Quelques particularités de cette experience :

  • L’élève s’exprime directement et sans intermédiaire, en direction du rédacteur en chef.
  • Le brief accordé aux élèves fut simple et ouvert.

Au final, au moins deux messages, simples et clairs :

  1. Réaligner, plutot que de refondre un site média. Réaligner quant à ses objectifs d’audience et de positionnement.
  2. Démontrer en interne comme en externe, que d’une recherche d’une ouverture permanente est benéfique comme source de débats.

La vidéo des cours à l’école, et les relations avec le site du Point.


Vidéo • Cours Web Typo

Les débats qui s’en sont suivi portaient sur le fond, mais aussi sur la forme : pourquoi confier ces travaux à des étudiants, et non à des professionnels ? Pourquoi avoir imaginé ce projet sans faire usage des règles coutumières du métier du design web, qui prévoient un appel d’offres, une sélection, une short-list ? Ce type d’interrogation sont tout a fait naturelles, à l’heure où nombre de designers (et pas seulement les freelances) souhaitent plus de transparence, plus d’équité et de respect dans les condition d’exercice des métiers du web et du graphisme.

La presse, en ligne ou papier, vit des heures follement intenses, ou chaque évenement ou avancée constitue une remise en question, qui balaie tout, ou presque, sur ce qu’on connaissait des usages de la veille, des méthodes de travail, et des mutations des métiers de journaliste et ‘d’infographiste’. Et dans cet environnement bouillonnant et instable, il fallait irrémédiablement garantir une proche collaboration avec des participants jeunes mais au fait et gestes de ces mutations. La encore, un focus group aurait pu étre monté ; mais difficile d’avoir une meilleure vision d’un concept, que lorsque l’on obtient un rendu précis et réfléchi, comme ceux qui se sont dévoilés à nous.

Lorsque l’on est freelance et que l’on collabore avec des medias presse, la notion de ‘relation client’ est très différente. Quel contraste, entre un brief venant d’un groupe hotelier tel que Accor (pour lequel j’ai collaboré entre 2002-2004) et un media de type presse magazine ou quotidienne. Un journal est une entreprise (avec son industrie, son service commercial, ses benéfices et son économie), mais force est de reconnaitre que l’objet sur lequel cette entreprise porte son attention n’est pas seulement un objet de lecture, mais un objet de pensée et de débats. Et c’est exactement ce que ces travaux ont permis de créer.

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.

Le nouveau FT.com

Le modèle de la grille et des canons de l’élégance typographique du print peuvent se décliner sur le web.
Le modèle scandinave recule outre-manche. Et c’est tant mieux, IHMO.

Quelle agréable surprise de la nouvelle page d’accueil de FT.com, le site du Financial Times !
En un écran, tout est dit :

  • Le respect du code graphique du journal, notamment du saumon, pour rappeler la force éditoriale du papier — on s’y habitue vite, très vite.
  • Un menu fonctionnel et qui est lisible — certains diront qu’il est très inspiré du menu de Digg.com, et je leur donnerai raison,
  • Simplicité dans la grille à 960px — un standard si pratique pour le découpage en colonnes,
  • Simplicité dans le nombre de niveau de titres en une, avec un effet de titre/mini chapo terriblement efficace au clic,
  • Une photo, seulement quand cela en vaut la peine — 25 images, moins de 150ko d’images en tout,
  • Une sélection de titres qui ne dépasse pas la 15-20taine de titres.

Simplicité, efficacité, sérieux et confort de lecture. C’est net, efficace.
Les sites ‘anglais’ courent dans cette direction. Pourquoi pas les sites français ?

world-business-finance-and-political-news-from-the-financial-times-ftcom-uk-20090203