Archives par mot-clé : layout

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.

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

gMail design concept

Avez-vous des collegues/amis qui préfèrent toujours utiliser le site web de gMail plutôt que d’utiliser un client?

Cela fait plus d’un an que les dernières rustines d’interfaces ont été déployées pour gMail, et voila qu’un nouveau concept de l’interface gMail vient de sortir, par le designer Ukrainien Ruslan Aliev. Continuer la lecture de gMail design concept

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.

Le Blogzine

the-death-of-the-blog-postJe reprends, traduit (en raccourcissant parfois, je l’admets) et présente la vision synthétique de Paddy Donnelly, qui présente, sur l’incontournable Smashing magazine, 3 designers web qui tentent de sortir de la masse de blogs, en créant des blogs avec des posts au design unique, avec le concept de Blogazine, que je traduirais volontiers en ‘Blogzine’, contraction de blog et de magazine.

L’un des billets les plus importants de l’année : The Death of the Boring blog post ?

C’est une grosse claque ! Le billet original est en lui-même d’une élégance et d’efficacité incroyables, certains designers parlent déjà en commentaire du billet de l’année 2009. Je ne peux pas m’empêcher d’imaginer ce concept appliqué pour un média au contenu froid, voire même chaud ! Bon, on en reparlera certainement.

Soyons honnêtes, les billets classiques sont ennuyeux.

Hormis le texte et les images, chaque billet a généralement la même apparence. On constate peu d’originalité d’un billet à l’autre. Bien évidemment, la cohérence et l’identité d’une marque sont des aspects essentiels lorsque l’on conçoit le design visuel d’un site ou d’un blog. Mais que dire de son individualité ? Est ce si logique de penser qu’un billet consacré aux chatons devrait respecter la même charte graphique que celui consacré aux Hacks CSS ?

Trop facile ?

L’utilisation et d’installation d’un thème WordPress sont devenues si aisées, si intuitives, qu’il ne suffit que de quelques minutes pour donner vie à un site. Est-ce devenu justement trop facile ? Surtout si l’on compare cette facilité avec les heures d’efforts qu’un maquettiste print va mettre afin de créer une mise en page intelligente. Quelques designers ont décidé de rompre la monotonie du monde du blog.

Ils n’utilisent pas les thèmes standard de WordPress ou tenter de les remixer, histoire de rendre leur vie plus facile. Au lieu de cela, ils se sont donné pour objectif de créer du contenu, non seulement textuel, mais visuel, pour chaque billet. C’est peut être la nouvelle manière de s’amuser en mettant à jour son blog. Mais pourquoi cette tendance de combiner un billet avec un article de magazine, le « Blogazine », n’a pas encore totalement conquis les masses de blogueurs ?

Une tendance encore bien discrète

Employer le mot « tendance » fait déjà trembler nombre de designers, qui ont déjà entendu parler de ce terme lorsque les boutons glossy, avec des reflets et des ombres portées ont fait leur apparition. Mais la tendance du Blogzine pourrait se présenter autrement, pour plusieurs raisons. Concevoir une mise en page créative pour chaque billet, en fonction de son contenu, demande un certain nombre de compétences, de la patience, une certain engagement vis à vis du contenu, et, le plus important, un effort certain de la part du designer web !

Les Pionniers

Jason Santa MariaJason Santa Maria est l’une des personnes ayant porté l’innovation de ce type de blogs et qui a crée des billet aux designs individuels depuis juin 2008. Avec un background en print, Jason a eu la vision de créer un blog dans le style d’un magazine, plutôt que de suivre les règles établies dans le design de blog.

« Oui, c’est une sorte de redesign, je considère que c’est surtout une manière de repenser le site » ~ Jason Santa Maria

Les billets de Jason sont fascinants et couvrent une large gamme de sujets, comme le design, la typographie, les livres, la photographie et le cinéma. Les différences dans le design visuels sont parfois de subtils changements dans la typographie employée, mais qui donne, pour chaque message, un sens unique et qui n’aurait jamais pu apparaitre s’il avait été uniformisé avec le reste des billets. Parfois, les changements apportés sont radicaux, tous se rapportent au style de Jason. Le header et le footer sont eux homogènes, mais même sans les voir, vous pouvez deviner que le billet provient de son blog.

« Nous avons vu tant d’avancées dans la manière de publier du contenu, que nous avons pas pris le temps de regarder en arrière pour observer ce que nous créions réellement. Beaucoup de designers ont vu des barrières fortes entre le design print et web, et j’ai vraiment souhaité remettre en question cette séparation. » ~ Jason Santa Maria

dustin1Dustin Curtis. Son initiative est devenu connue, suite à l’un de ses billets, une lettre ouverte sur le redesign du site d’American Airlines, dans laquelle il proposait un redesign en profondeur du site internet, ainsi que de repenser l’expérience utilisateur. Les autres articles de Dustin, sur son blog, sont tout aussi fascinants.

Grégory Wood est un webdesigner chez Erskine Design et a crée son site comme une expérimentation en DA. En se retenant d’utiliser un thème existant, Greg a crée un site magnifiquement réalisé, utilisant des thèmes personnalisés pour chaque billet. Voir sa page d’explication de son blog.

Est ce que le web en temps réel à provoqué l’émergence du blogzine ?

Twitter, Posterous, Flickr, Facebook, l’iPhone et les innombrables actress services ont permis de créer un gouffre entre l’information instantanée et atomistique d’un billet élaboré et sophistiqué. (Micropost Vs. Macropost).

Le bon moment pour les macro-billets de briller

Les billets longs avec du contenu à valeur ajoutée ne pourront pas obtenir la reconnaissance qu’ils méritent, parceque les 140 signes que le microblogging ont habitué une lecture rapide d’un billet. En utilisant la technique du blogzine, il est possible de créer l’attention pour lire davantage.

greg_work

Relier les deux mondes

Nous ne savons pas encore sur l’avenir du blog, mais le micro-blogging va encore l’influencer. Les blogzines devront offrir des appels de lecture courts et proposer une lecture progressive d’articles de journaux et de magazines. On pourrait ainsi créer un pot entre l’article traditionnel et la photo TwitPic.

Pour quels types de sites le format blogzine pourrait-il fonctionner ?

  • Les portfolios : Plutot que de créer un portfolio uniforme, pourquoi ne pas créer un portfolio qui présenterait chaque collaboration au sein d’un habillage différent pour chaque client, projet ?
  • E-Commerce : La plupart des sites de commerce en ligne utilise le meme système de présentation : vignette en grille, page de description, paiement. Ce système a l’avantage d’être bon pour l’usabilité, mais il y a un petit vide à combler entre la lecture rapide et le design visuel. Peut être que de subtils changements dans l’habillage pourraient créer la différence et rendre le site plus distinguable ?
  • Les blogs ‘peu bavards’ : Les bloggeurs manquent parfois de motivation pour maintenir leur site à jour. Pourtant, sept articles publiés sans conviction ne valent pas un billet bien conçu et avec un design unique. Et même si les lecteurs RSS ne vont pas toujours exploiter vos design, vos articles auront la possibilité de faire ressortir votre billet parmi la jungle des autres blogs.

Regardons ce que Jason, Dustin et Greg ont réalisé : Ils ne blogguent pas souvent, parfois qu’une fois par semaine, ou par mois. Mais la qualité de leur billet est toujours ce qui en ressort.