Web Design Studio – Paris

And the winner is…

Le Petit PANDA a dit à 56k :

« C’est Svp @Steaw, je voudrais un fond rouge avec un Tweet oiseau déguisé en diable niark, niark… le winner !!! »

Donc félicitation à @Queen_Jude qui a gagné sont thème Follow Me I’m RED.
Suivez-la, elle voudra peut-être partager.

Upload images

Un grand merci aux participant !

Dans l’ordre d’apparition :
@lookzippy, @skrzywoglowy, @Littlecelt, @mrboo, @denisdkr, @Alban, @Toy666, @Queen_Jude, @futurecat, @viper82, @kapsteur, @sanji, @mamadou, @k_anard, @Papilouve, @2o2volleyball, @xuoan, @remybigot, @jbfeldis, @cholichuli, @sylvain

Blue, Green, Black et Pink

C’est la rentrée !!! Pour aller avec votre nouveau bronzage doré et votre nouveau cartable en cuir, nous avons le plaisir de vous offrir 4 thèmes BLUE, GREEN, BLACK et PINK pour votre petit Twitter chéri.

click to download BLUE

Téléchargez BLUE

click to download GREEN

Téléchargez GREEN

click to download BLACK

Téléchargez BLACK

click to download PINK

Téléchargez PINK

Vous voulez un thème personnalisé ? Ok ça marche.

Pour ça il vous suffit de twitter votre idée en commençant votre post par http://bit.ly/LmUul Svp @Steaw, je voudrais…

Par exemple : http://bit.ly/LmUul Svp @Steaw, je voudrais un fond aux couleurs de la boite avec un gros Mecha qui twitt !.

Voilà un exemple avec le thème d’ @iamstark.

La meilleure idée (selon des critères très précis élaborés par un armée de scientifiques) aura gagné. Clôture des propositions vendredi prochains.

3, 2, 1 … c’est parti !

Léa vous aide à réserver vos billets de train

Petite exclue du Vendredi, VirtuOz vient tout juste de signer , encore en beta dans le labs, la troisième version de Léa, l’agent conversationnel de Voyages-sncf.com. Alors que la précédente version de Léa avait pour but de vous aider à trouver de l’information sur le site et faire du SAV, cette nouvelle version est un véritable agent de guichet en ligne.

Vous pouvez donc dialoguer à n’importe quelle heure du jour comme de la nuit avec Léa pour réserver votre voyage. C’est rapide, très agréable et Léa guide bien la conversation tout en la laissant ouverte.

Petit clin d’oeil, VirtuOz est l’ancienne société de deux Steaw boy, Jérémy et moi. Rester en bon terme avec ses anciennes entreprises est primordial et cette histoire nous le prouve. Nous sommes en effet très heureux d’avoir re travaillés avec VirtuOz sur l’ergonomie, le design et le flash de la petite Léa.

Je vous laisse donc découvrir Lea3, que ses créateurs présentent ainsi : « Lea est à votre disposition pour vous aider à trouver votre billet de train. Dites lui où vous souhaitez aller puis laissez-vous guider par ses questions. Elle vous affiche le billet qui correspond le mieux à votre demande. ». Pour plus d’infos, une petite page d’aide est à votre disposition.

lea

Overblog à l’assaut de la tour TF1

Pour annoncer de façon originale la nouvelle version du portail aux employés de TF1 (investisseur), l’équipe d’Overblog a eu l’idée (et l’accord) de recouvrir les ascenseurs de la tour TF1 d’affiches événementielles.
En réalisant la maquette, on ne pensait pas que ça allait aussi bien rendre. Le résultat est canon et l’effet garanti ! La preuve en image :

elevatorDe plain pied
elevatorHall principal de la tour TF1
elevatorA l’étage
elevatorJulien, l’heureux propriétaire

Imaginez ce que fait Jean-Pierre Pernaut quand il attend son ascenseur le matin… ;)

L’autocomplétion, un détail qui peut faire la différence

L’autocomplétion est une « fonctionnalité informatique permettant à l’utilisateur de limiter la quantité d’informations qu’il saisit avec son clavier, en se voyant proposer un complément qui pourrait convenir à la chaîne de caractères qu’il a commencé à taper », merci wikipedia.

Sur les interfaces web, on retrouve fréquemment un champs de recherche dans le header muni d’un système d’autocomplétion. Très pratique pour l’utilisateur car les requêtes possibles apparaissent au fur et à mesure des lettres qu’il tape. Il peut ainsi efficacement orienter sa recherche avec un vocabulaire adapté et contextualisé au site qu’il utilise.

Sur Wikipedia (ci-dessus) on retrouve une autocomplétion très basique, mais il en existe des beaucoup plus évoluées qui peuvent allier bénéfice utilisateur et éditeur.
Les autocomplétions suggestionsCertains sites possèdent trop de données en base et donc trop de requêtes possibles pour qu’elles soient toutes correctement retransmises à l’utilisateur. C’est pourquoi certains sites prennent le parti de ne sélectionner qu’un échantillon de requêtes, plus ou moins orientées. En effet, un moteur de recherche aura tout intérêt à mettre en avant les réquêtes populaires pour gagner du crédit auprès de l’utilisateur. Un site ecommerce lui pourra plutôt glisser un best seller ou faire de cette espace un lieu de mise en avant payant. Exemple : Je vends un produit qui s’appelle « Lord of the ring », ça m’intéresserait de payer pour ressortir premier sur l’autocomplétion de « Lo », devant « Lost Season 5″.

Les suggestions d’Ebay, orientables annonceur.
Les suggestions de Google, orientées utilisateur.

Les autocomplétions graphiquesCelles-ci reprennent le bon vieux fonctionnement de base mais de façon plus présentables. Au lieu de n’afficher d’un texte brut de fonderie, elle habille la requête d’une petite image associée, de la couleur et des informations connexes. Vous avez tous en tête la recherche de Facebook, ultra pratique pour chercher dans son réseau grâce aux petits avatars qui ressortent. Linkedin associe au nom de la personne recherchée sa situation professionnelle, très très pertinent sur ce type de plateforme.

L’autocomplétion de Facebook, très réussie.
L’autocomplétion de Linkedin, pertinente et bien pensée.

Les autocomplétions triéesReprenant souvent les caractéristiques des 2 premières, ce type d’autocomplétion va plus loin en triant par catégorie les requêtes ressorties. Souvent très pratiques, elles permettent à l’éditeur de pousser plus de contenus différents grâce à un même champ de recherche. En effet, un site e commerce vend des produits et réalise également des opérations commerciales. C’est donc intéressement pour lui de faire ressortir facilement tout le contenu de son site. La palme du moment, à mon goût revient à Apple.fr, qui mixe graphiquement, lisiblement et distinctement les résultats de son autocomplétion.

Apple.fr, la palme d’or du moment
Gameblog.Fr, moins joli mais bien présent

L’autocomplétion, bien amenée, est donc une fonctionnalité très utile pour l’utilisateur. De plus, vous pourrez vous en servir pour pousser du contenu précis et pourquoi pas le monétiser. C’est le genre de détail dans une interface qui peut faire la différence.

Nouveau design d’Overblog, by Steaw !

C’est officiel et en ligne depuis quelques minutes, le nouveau web design d’Overblog.com est en ligne. Et c’est à Steaw que l’équipe du portail de blog a confié la direction artistique de la refonte. Un honneur pour nous, beaucoup de travail et un chantier digne d’un « Extreme Makeover: Web Design Edition« . Et comme de belles images valent mieux que de grands discours, la suite en screenshots !

Overblog

Mais avant, Overblog en quelques chiffres :

- Création en 2004, 1ère plateforme de blogs depuis décembre 2008
- 8,4 millions de visiteurs uniques par mois (Nielsen Mars 09)
- 13,7 millions d’articles au total
- Plus de 900 000 blogs
- 32 millions de commentaires sur l’ensemble des blogs
- 29 millions d’images
- 1500 nouveaux blogs par jour
- Une équipe totale de 18 passionnés.

Vers un produit plus « quali », sobre et sérieux

Ancienne version d’Overblog
Nouvelle version d’Overblog, by Steaw
Nouvelle version d’Overblog, by Steaw

De nouveaux thèmes graphiques pour les blogs

Un version iPhone (light)

Un grand merci à toute l’équipeUn chantier très agréable, qui s’est déroulé dans la bonne ambiance et par moment sous le soleil de Toulouse. Que demander de plus ? Merci à toute l’équipe et surtout à Julien Romanetto, Frédéric Montagnon et Gilles Moncaubeig, les co-fondateurs, pour la confiance et les barbecues.

Digital Kitchen

digital-kitchen

Après avoir regardé plusieurs épisodes de la série américaine Ghost Whisperer, la chose qui m’a le plus marqué est la qualité et l’originalité de son générique. Très texturé et très coloré, le traitement graphique est impressionnant. J’aime beaucoup. J’aime également cette mise en scène mystique, une succession de symboliques qui nous plonge d’emblée dans l’univers paranormal de la série. Jugez plutôt :

Tout cela m’a donné envie de fouiller un peu et d’en savoir plus sur l’agence à l’origine de ce générique.

Il s’agit de Digital Kitchen, une agence américaine, spécialisée dans le Motion Design. Ils sont présents dans 4 villes, Chicago, Los Angeles, New York et Seattle, et comptent une centaine de collaborateurs.

Leur Leitmotiv est d’effacer la frontière entre le commerce et l’art, comme nous le prouve leur portolio. D’ailleurs, vous connaissez forcément une partie de leurs travaux car ils sont à l’origine du générique de Dexter, de Six Feets Under et du très cynique House.

Je vous ai sélectionné quelques belles références :

Générique de The CompanyL’univers est dans la ligné de celui de Ghost Whisperer, le style graphique est lui plus sombre. Un traitement style crayon graphite sur fond d’explosion nucléaire.

Générique de True BloodOn sort du pictural, l’univers n’en reste pas moins troublant. Religion, sensualité, perversion et sang, le tout dans une Louisiane bien profonde. Une bonne recette pour parler de dents longues…

Générique du Boxing Open, sur HBOOn met de coté l’onirisme, on entre plus dans le concret : une présentation à la hauteur du show, musclée et spectaculaire. (Cliquez sur l’image pour voir la vidéo depuis leur site).

hboboxing

Ad Spot pour finishline.comGrand écart graphique, le style est beaucoup plus « tendance ». Mix vidéo / vecto, Fluos, bubbles et compositing 3D, ça devrait plaire à certains ;) (Cliquez sur l’image pour voir la vidéo depuis leur site).

finishline

Une agréable découverte donc, que j’avais envie de partager avec vous ! L’ensemble de leurs créations sont à découvrir sur leur site, www.d-kitchen.com.

Comme un air de printemps…

Bon, je sais que ça fait longtemps que ce blog n’a pas eu la moindre activité, mais je dirais que c’est pour la bonne cause : Boulot, boulot et boulot !

Mine de rien, ça nous aura pris deux mois pour réorganiser Steaw autour de notre trio. Le plus compliqué a été de bien équilibrer la masse de travail de chacun, et surtout le nombre de projets par personnes. Pour cela, j’ai opté pour la manière forte : on n’acceptait plus de nouvelles commandes et on terminait tous les travaux en cours. Le but était de repartir à 0, ou presque, pour réamorcer la pompe le plus sainement possible, avec le bon équilibre temps / boulot / passion pour chacun de nous. C’est chose faite !

3steaw

Donc nous revoilà avec un peu plus de temps pour communiquer et pour réfléchir. On a quelques projets à mettre sur pied, certains dont je parle depuis trop longtemps déjà, il faut s’y mettre ! Plus de détails dans les prochains mois (j’aurais bien dit « prochain jours » mais je préfère nous laisser un peu de marge ;)).

Niveau commercial ça se passe bien. On reprend tranquillement des commandes, on est très bien dans les objectifs que je m’étais fixé, tout va bien. Malgré tout, un gros problème persiste et commence vraiment à faire peur : le portfolio. On est toujours avec la page temporaire du début, c’est moche, à peine pratique et surtout pas très vendeur. Une bonne douzaine de belles créas réalisées vont être mise en ligne dans les 2 prochains mois, et on ne pourra pas communiquer dessus avec cette page précaire. Bref, vous l’aurez compris, l’opération « Portolio qui défonce » est lancée !

Et tant qu’on y est, donnez nous vos ids twitter !

Wikirank : pour savoir qui est le plus populaire sur Wikipedia

Par le biais de son designer, j’ai appris le lancement de Wikirank, un outil pour comparer la popularité des articles Wikipedia.

Une page d’accueil claire et limpide

Message d’accrocheEn allant sur le site, j’ai tout de suite compris à quoi il servait, tellement la page d’accueil m’a paru d’une clarté évidente :

  • une question courte et précise: « Who’s more popular on Wikipedia », avec tous les mots-clés: « more », « popular » et « Wikipedia »
  • 4 prénoms, dont l’association est très connue
  • 4 couleurs distinctes…
  • … reprises dans le graphique juste en-dessous

Une sidebar synthétique mais explicite

Un rang (6), un sujet (Saint Patrick’s Day), un graphique (avec un pic évident le 17 mars) et un compteur de vues.

Les tendances du moment

Comme un flux d’actualités, les tendances du moment recensent les récentes évolutions positives les plus fortes, avec le taux de variation ainsi qu’un court extrait de la page en question.

Auto-completion de rigueur

La popularité, seule ou comparée

Chaque lien sur un sujet n’amène pas vers Wikipedia mais vers une page Wikirank qui regroupe le graphique, un extrait de l’article Wikipedia et des liens de recherche (Google, Twitter et le NY Times).

Comparer avant tout!Même si l’on peut voir la popularité d’un seul article, le plus intéressant est encore de comparer plusieurs sujets. Tout en restant sur la même page, on obtient un résumé des sujets comparés, le but n’étant pas d’avoir des infos exhaustives sur chaque élément mais plutôt un panorama de l’ensemble des élements.

Une bien belle équipe

Si les graphiques utilisés rappellent Google Analytics, c’est tout à fait normal : le site est réalisé par Small Batch Inc, l’équipe qui avait réalisé Measure Map (racheté par Google pour travailler sur Analytics justement), avec à leur tête Jeffrey Veen (qui a quitté Google l’an dernier).

Le designer n’est autre que Dan Cederholm, du studio de web design Simple Bits.

Prototype de l’interface de Firefox 3.2

firefox-32

Information Architects (les auteurs de l’excellent Web Trend Map) ont réalisé un mockup de ce que pourrait être l’interface d’un prochain Firefox. Ils avaient déjà été consultés en 2000 pour les débuts de Firefox et ils avaient annoncés: « Onglets ». Aujourd’hui, ils disent « Oubliez les onglets! »

« Forget Tabs! »Les indispensables onglets du navigateur (introduits en 2000 par Opera 4) seraient dépassés. A priori, leur utilité décroit à partir de 8 onglets ouverts, notamment à cause de leur hétérogénéité (il y a peu souvent un lien entre deux onglets). L’organisation se ferait par dossiers.

J’avoue être peu enthousiaste à cette disparition des onglets parce que j’ai une forte tendance à en ouvrir beaucoup simultanément. Par exemple, je suis actuellement à 18 onglets et tous me sont utiles. Peut-être pas en même temps, mais sur une période d’une heure, je les visite tous.

Navigateur = Système de fichiers multimédia

Le navigateur est davantage un système d’exploitation qu’une application d’affichage des données.

Le web n’a pas arrêté d’évoluer et aujourd’hui, on y retrouve les mêmes éléments que sur un ordinateur personnel: applications (mail, management, utilitaires, jeux), multimédia (vidéo, photo, musique), documents (word, excel, powerpoint), communication… Je balance un peu en vrac les différents domaines mais vous voyez l’idée. On peut faire énormément en ouvrant uniquement son navigateur. Et si le cloud computing se démocratise, ça ne saurait que se confirmer.

Avec cette idée en tête, Information Architects voit Firefox gérer le web comme iTunes gère la musique. Le logiciel s’occupe de tout organiser et l’internaute n’a plus qu’à trouver facilement ce qu’il cherche, d’une manière ou d’une autre. Le but est d’accéder le plus rapidement possible à ce que l’on veut.

Ceci reste un prototype, une approche radicale qui change totalement l’utilisation d’un navigateur. A tester.

Suivez-nous!

Catégories

Projets

Recherche

Commentaires récents

Blogoliste