Tag : design

Quoi, le bon coin adopte un nouveau design?

Certes l’information n’a pas vocation à changer la face du monde mais je me suis toujours demandé quand le bon coin mettrait à jour son site, du moins la partie graphique visible de l’utilisateur final. Hier j’ai pu accéder à la version qui sera déployée normalement dans les prochains jours ou mois mais comme l’enjeu est important pour le bon coin ils prennent toutes les mesures pour faire en sorte que ce changement de design ne perturbe pas leurs utilisateurs.

Cette nouvelle version est accessible via cette url : beta.leboncoin.fr et présente un design qui finalement ne change pas beaucoup mis à part quelques modifications en terme de codes de design qui adoptent maintenant le flat design sans fioriture et une meilleure utilisation de la largeur de la page puisque le site est maintenant dans une résolution de 1200px de large.

Les menus sont plus évidents et moins basiques c’est pas mal et cela manquait :

J’aurais bien aimé que le site adopte le défilement automatique des pages cela aurait été bien plus pratique mais ils ont préféré conserver la pagination classique par page. En revanche, ils ont viré cette saloperie de « focus » du curseur sur la barre de recherche qui n’était pas pratique lorsque l’on passait d’une page d’annonce à la page de résultats avec le « back » de la navigation, c’est vraiment plus pratique comme cela car le « back » vous ramène maintenant au niveau de l’annonce cliquée dans la liste des annonces!

Globalement pas de gros changements ni de révolutions, c’est plus propre, les couleurs sont toujours les mêmes, bref l’utilisateur lambda ne sera pas trop perdu je pense!


Les tendances pour 2013 pour les design interactifs

Voici une présentation slideshare bien fournie sur le sujet des designs interactifs. Celle-ci présente les évolutions en matière de design et ce qui sera la tendance en matière de design pour 2013. De bonnes idées à prendre pour vos nouveaux projets de l’année.

Dans cette présentation on parle bien entendu de responsive design, d’interface, de gestuelle et bien évidemment de mise en avant du contenu!


Nouveau design pour google.com

Google continue à faire évoluer le design de sa page de résultat. Cette fois-ci c’est la barre d’option à gauche qui fait les frais de cette évolution de design puisqu’elle disparait purement et simplement et se retrouvera en haut au dessus des résultats.

La disparition de cette « sidebar » n’est pas une surprise, Google à besoin de place pour afficher plus d’information notamment le pavé à droite comme sur l’exemple ci-dessous. Mais aussi doit s’adapter au mieux au format des tablettes qui sont avec les smartphones les interfaces d’avenir, bien plus que notre vieux PC.

Pour l’instant ce nouveau design n’est disponible que pour la version US de Google mais il devrait être déployer assez rapidement partout dans le monde.

La nouvelle interface
L’ancienne interface
La version française

Source Google


Dingue, Leboncoin.fr change graphiquement

Je ne pouvais pas passer à côté de « cette nouvelle », site leboncoin.fr, connu pour sa rigidité graphique vient de faire des modifications mineures sur son site. Oui vous ne rêver pas, le site change graphiquement… Certes les changements ne sont pas radicaux mais quelqu’un chez eux a fait une modification…

Alors voici la liste des changements graphiques, si jamais j’en ai oublié un n’hésitez pas à me le signaler en commentaire.

-Nouvelle barre de recherche avec un fond marron, dommage la mise en forme des menus déroulants n’est pas ajustée…
-Présence renforcé de la couleur orange qui il me semble est beaucoup plus aggressive que dans la précédente version
-Lorsque l’on survole une annonce, automatiquement on va surligner l’annonce avec une jolie couleur bleutée
-Les photos sont plus grandes et la zone avec les autres photos passe en dessous de la photo principale avec là encore des flèches de navigation
-L’image principale est entouré d’un liseré bleu-gris
-Le prix passe en orange et la taille de la police est augmenté, c’est plus lisible et bien comme cela
-Les boutons de call to action en bas de page d’annonce ont été aussi révisités avec toujours la présence de cet orange

Vous l’avez compris les changements sont plutôt légers et toujours dans l’esprit du site initial. Il ne faut pas oublier que ce site a conquis son public avec une version esthétiquement moche alors il ne faut certainement pas tout casser avec un design trop « neuf » et « beau ». Bref, leboncoin évolue tout tout doucement pour certainement ne pas perturber ses utilisateurs…

Histoire de dater un peu ce design je dirais que nous venons de passer des années 1990 aux années 2000, allez plus que 10 ans de webdesign à rattraper!


Activer simplement la nouvelle base de Google

Comme vous le savez déjà Google va déployer une nouvelle interface pour son moteur de recherche avec notamment un nouveau design de la barre supérieure (la fameuse barre noire). Pour l’instant cette nouvelle navigation n’est pas encore déployée mais comme pour le nouveau design de Youtube il est possible de l’activer très simplement grâce à l’ajout d’un cookie.

Mettez vous sur la page Google.fr puis :

Sous Google Chrome ouvrer : « Afficher/Options pour les développeurs/Console Javascript » et coller le code ci-dessous :

document.cookie="PREF=ID=03fd476a699d6487:U=88e8716486ff1e5d:FF=0:LD=en:CR=2:TM=1322688084:LM=1322688085:S=McEsyvcXKMiVfGds; path=/; domain=.google.fr";window.location.reload();

Pour Firefox c’est presque la même méthode mais tapez Ctrl-Shift-k pour ouvrir la console et coller le code :

document.cookie="PREF=ID=03fd476a699d6487:U=88e8716486ff1e5d:FF=0:LD=en:CR=2:TM=1322688084:LM=1322688085:S=McEsyvcXKMiVfGds; path=/; domain=.google.fr";window.location.reload();

Notez que si vous avez un compte google apps de connecté cela ne marchera pas, il faut soit se déconnecter soit utiliser un compte gmail classique. Et voilà vous avez la nouvelle barre!


Nouveau look pour Gmail et Google Reader

Google poursuit les changements graphiques de ses services et pour cette fois se sont Gmail et Google Reader qui vont bénéficier de cette touche graphique google+. Les interfaces sont épurées, les couleurs douces mais cela n’est pas tout l’ergonomie est grandement améliorée avec une navigation plus naturelle et agréable pour les deux produits.

Quelques améliorations pour gmail

-Une boite de recherche qui a été améliorée sur le fond et la forme
-Un affichage des conversations email plus naturel et pratique
-Un design à la google+
-Une navigation qui se contrôle plus facilement sur la barre latérale de gauche

La bonne nouvelle c’est que cette nouvelle version de Gmail est accessible pour tout le monde (il faut regarder en bas à droite de son écran)

Quelques améliorations pour google reader

Bon j’avoue cela fait quelques années que je n’utilise plus google reader que j’ai remplacé par Feedly qui propose une meilleure interface que celle de GG reader de mon point de vu. Passons tout de même les nouveautés de Google Reader :

-Nouveau design, plus sobre, classe et épuré
-Grosse intégration avec Google+ et la fonctionnalité de +1 de Google

Pour moi ce redesign de Google Reader et réussi mais l’affichage des informations aurait pu être retravaillé car Feedly reste en avance sur ce coup.


Petit historique de la navigation sur Internet

Internet n’est pas si vieux pourtant lorsque l’on regarde les sites internet des années 90 on a clairement l’impression de regarder de vieux dinosaures avec des designs basiques et qui à l’époque étaient des standards! Voici une présentation qui brosse l’évolution des types de navigation sur les sites web, c’est rapide à lire et cela permet de constater que l’on partait vraiment de loin… Les technologies et le metier de webdesigner a lui aussi largement évolué depuis ces années.


Stéréotype, tout n’est question que de perception….

Voici un travail du graphiste Yanko Tsvetkov qui a représenté plusieurs visions de l’Europe en fonction des stéréotypes locaux. C’est vraiment bien vu et l’idée est originale, tout le monde en prend pour son grade!

Voici quelques planches :

L'Europe pour les américains
L'Europe pour les français
L'Europe pour les italiens
L'Europe pour les anglais

La suite de la série est à découvrir sur Alphadesigner.