Il existe de nombreux outils en ligne pour “jouer” avec les couleurs et trouver des gammes chromatiques ou les bonnes couleurs à accorder avec la couleur de son choix. Parmi ces outils, j’ai découvert ce week-end le très simple et efficace Elvan Online. Il s’agit d’un générateur de thèmes chromatiques. A partir d’une couleur au hasard ou de la couleur de votre choix, l’outil vous fournit les couleurs en harmonie correspondantes et différentes variations. Le genre d’outil pratique pour les designers ou les simples curieux qui cherchent quelles gamme de couleurs utiliser avec une couleur de base. Dans le même genre, je vous avais déjà présenté l’excellent outil d’Adobe : Adobe Kuler.

Vous en connaissez d’autres ?

Vous le constaterez comme moi, ces exemples sont loin d’êtres tous exploitables dans le cas d’un site web classique mais représentent des prototypes ou des concepts, souvent sources d’inspiration. Pour visiter les sites, il vous suffit de cliquer sur les images :)

AgencyNet.com

Pour un site en full-flash, je dois dire que cette webagency y ait allé fort : pour naviguer dans leur site et découvrir qu’ils sont, il suffit de se balader dans leurs locaux virtuels redessinés pour l’occasion…

^{AgencyNet.com}

Red-Issue.com

Dans ce site en full-flash, la navigation se fait au clavier (avec les flèches) ou en traçant à la souris le lieu où vous voulez vous rendre( uen flèche “>” pour aller à gauche par exemple). Original, oui c’est sûr… utile ? franchement non !

Red-Issue.com

TapTapTap.com

Ce site nous propose un design soigné avec une navigation basée sur les différentes icônes d’applis iPhone qu’ils développent. Un placement intéressant d’une barre de menu classique

TapTapTap.com

ericj.se

Ce site d’un designer suédois (qui semble aimer aussi le scooter) m’a clairement fait rire avec sa navigation plus qu’originale sous la forme d’un grand scroll horizontal.. à visiter absolument :)

^ericj.se

JohnnySlack.com

Proposant une interface sur deux niveaux : colonne et ligne, ce site permet de naviguer facilement de contenu en contenu. Cela me fait penser un peu à la Sony PSP (même si je n’en possède pas).. quelqu’un confirme ?

^{JohnnySlack.com}

Mobilux.eu

Ce site a attiré mon attention pour sa galerie photo présentée sous la forme d’une roue (qui tourne :) ). Simple mais plutôt originale…

^Mobilux.eu

Nickad.com

Vous connaîtrez peut-être déjà ce site que l’on a souvent vu cité comme “innovant” : la navigation se fait ici en laissant le clic droit enfoncé ce qui masque la page actuelle pour faire apparaître un menu où l’on navigue ensuite en glissant la souris.

Nickad.com

Ai interactive Media

Plus complexe à appréhender, ce site porpose une navigation basée sur des disques à drag & droper pour naviguer parmi les contenus. Original mais j’ai rapidement passé mon chemin…

Ai interactive Media

JonathanYuen.com

Ce site est aussi très connu et il y a de quoi ! Si vous ne l’avez jamais visité, je vous invite à le faire sans vous en dire plus afin de vous laisser apprécier le moment !

^{JonathanYuen.com}

MatthiasDittrich.com

Voici une navigation encore différente sur la base d’une colonne d’info où chaque ligne peut être dépliée pour accéder au contenu.

^{MatthiasDittrich.com}

Aigahonolulu.org

Ce site est un bon exemple de ce que l’on voit de plus en plus sur le web : une immense zone de contenue avec une vue zoomée et que l’on peut déplacer. Cela donne l’impression d’être sur un immense site Internet où l’on peut se balader…

Aigahonolulu.org

Sugarrhyme.com

Très belle navigation verticale pour ce site présentant des réalisations de graphismes. L’idée est bonne et la réalisation sympa (être graphiste, ça aide, y a pas de secret..)

^{Sugarrhyme.com}

Media5.ru

Même si la navigation de ce site est plutôt classique : un menu tout bête, les actions qui en découlent (animations, changement d’écrans, etc.) valaient le coup que je cite ce site ici, non ?

^Media5.ru

Merixstudio.com

Pour finir sur un site qui n’est pas en Flash (ben oui, on peut faire original, sans flash !), ce site propose un simple scroll horizontal ( un peu à la Apple) mais où j’ai particulièrement apprécié la bonne interaction avec la souris : à tester pour se rendre compte

^{Merixstudio.com}

je vous invite à découvrir ici un article de WebDesignerWall qui y compile une quizaine d'exemples de galeries photos en Flash plutôt bien pensées que ce soit d'un point de vue ergonomique, d'un point de vue graphique ou encore au niveau des animations... du plaisir pour les yeux...

Description du site : At Best Web Gallery, I occasionally come across good Flash sites. In this post, I want to feature the best photographer sites (with amazing photos ...

Voir le site

Vous l’aurez sans doute remarqué : on voit de plus en plus de carrousels sur les sites Internet ou les applications de nos ordinateurs. Ces petits composants qui permettent de naviguer de manière originale et visuelle dans les médias comme les photos apportent une expérience différente aux utilisateurs et repoussent un peu plus loin les limites de l’interaction avec les interfaces.

J’ai trouvé une très très bonne vidéo de SmartExperience qui retrace l’histoire du carrousel (créé par Apple si on en croit leur sources). Vous le découvrirez dans cette vidéo en anglais d’un peu plus de 5 minutes, il existe des dizaines et des dizaines de carrousels différents plus ou moins bien pensés et réalisés.

Le narrateur de la vidéo va plus loin que de simplement présenter divers exemples, il montre aussi ce qu’apporte fonctionnement ce genre de composants et les possibilités qu’ils offrent pour enrichir nos interfaces.

Personnellement, j’ai un avis mitigé sur l’utilisation de ces composants. On peut distinguer deux principales raisons à mettre en place un carrousel sur son site : l’enrichir graphiquement ou fonctionnellement. Graphiquement, le gain est immédiat et très visible. Fonctionnement, c’est plus difficile d’allier l’utile à l’agréable. Tous les sites ou services n’y parviennent pas. Si je ne devais citer qu’un exemple d’une mise en place réussie, je parlerais évidemment de Cooliris qui a très certainement contribué à l’évangelisation de ces tels modules.. En proposant une interface magnifique (et vraiment très fluide) et une utilisation simplifée et intuive, ce carousel reste un des meilleurs exemples.

Et vous, vous les aimez ces fameux carrousels ?

Certains le savent sans doute, j’apprécie particulièrement toutes les interfaces web riches. Je trouve qu’elles apportent une dimension nouvelle dans l’approche d’Internet et dans l’interaction qu’un utilisateur peut avoir avec un site Internet. Bien loin des sites full-flash d’il y a 4 ou 5 ans, ces nouvelles interfaces sont moins lourdes, conçues sur des technos plus robustes (Flex en tête) et permettent une maintenabilité presque supérieure à des technos plus classiques.

En 2007, j’avais consacré un dossier sur le thème des RIA en 3 parties : présentation et définition des RIA, technologie et exemples de RIA, et enfin une partie sur l’avenir des RIA. Aujourd’hui c’est une présentation SlideShare que je souhaite vous faire découvrir. Camille Roux a en effet donné un cours de 2 h en décembre dans une école d’ingénieur de Nice et partage ces quelques 135 slides sur le thème des RIA et de Flex. Merci à lui :)

La présentation se décompose en deux parties :

1. Présentation et définition des clients riches.
2. Présentation de la technologie d’Adobe : Flex / Air.

Voici les slides :

Pour les curieux, n’hésitez pas à faire un retour sur le catalogue d’exemples d’applications Flex !

Retrouvez les URL de tous les services montrés dans cette vidéo dans l’article de Galdric.

Un peu d’histoire

Google essaye depuis de nombreuses années de “lire” ce que contient les fichiers Flash (SWF) présents sur certains sites. La méthode qu’il utilise pour cela est assez mystérieuse et nécessite normalement la décompression du fichier pour pouvoir le parser ensuite et tenter de trouver du texte et donc des mots-clés pertinents.

Ce qui changerait

Adobe propose depuis pas mal de temps déjà un SDK disponible pour les moteurs de recherche. Celui permet de mieux décompresser les fichiers SWF et de pouvoir ainsi interpréter correctement leurs contenus. Néanmois aucun moteur de recherche n’avait jusuq’à alors affirmé utiliser ce SDK proposé par Adobe. L’actualité de ce début de semaine tourne autour de la demi-annonce faite par Matt Cutts dans une interview. Il indique “penser” que Google avait changer de méthode et utiliser maintenant le SDK d’Adobe. Par ailleurs, ce SDk est disponible librement ce qui permet à n’importe quel développeur Flash/Flex de le tester afin d’optimiser le contenu de son travail pour le référencement.

En conclusion

Voilà donc un pas en avant supplémentaire dans la démocratisation des interfaces riches. Même si ce SDK ne propose pas encore une indexation aussi propre que du HTML classique, cette news montre la prise de conscience de Google de l’importance grandissante de ces interfaces et de la nécessité de ne pas freiner les développeurs avec des problèmes de référencement.

Un rapide article pour vous présenter un petit site fort sympathique. Faveup.com est une simple galerie en ligne proposant des logos, des cartes de visites (il faut que je refasse les miennes d’ailleurs), des sites en Flash et des sites en CSS. Rien de bien original, j’en conviens, mais le site a un design léché, va à l’essentiel et les contenus sont vraiment intéressants pour quiconque aime se perde à regarder les réalisations de quelques graphistes talentueux.

Le site propose un système de vote sans inscription et permet de présenter les réalisations par classement ou par date.

Bref, Faveup.com est un site agréable à visiter, une belle source d’inspiration et donc à bookmarker pour un moment de flânerie graphique…

Vous en connaissez d’autres dans le même style ? Moi j’adore !

Un blog entièrement accessible en Flex

J’ai découvert via l’excellent Riapedia.com, le site Parleys.com qui est une sorte de blog dédié à l’univers Java et essayant de rassembler sur son site l’ensemble des vidéos et des slides des différentes conférences sur Java dans le monde. Ils viennent de lancer une nouvelle version de leur site web réalisée entièrement en Flex, une technologie Adobe permettant de réaliser des applications riches en ligne (voir mon dossier sur les technologies des RIA pour en savoir plus). Le résultat est accessible à tous (après une rapide inscription) et je dois dire que le résultat est assez bluffant. L’expérience utilisateur créée est sans commune mesure avec nos habitudes de navigations sur des blogs classiques. Tous les ingrédients d’un blog sont là (tags, commentaires, notations) et le contenu du blog (essentiellement des vidéos) trouve ici une interactivité inédite. Testez l’application, les transitions entre page, le passage en mode mosaïque, le lancement d’une vidéo avec les slides atenantes : tout est fluide et agréable.

Mais un blog aussi accessible sur le bureau

Les fondateurs de Parleys.com ont poussé le concept jusqu’au bout en sortant également une version Desktop de leur site (téléchargeable ici). On parle alors de RDA (Riche Desktop Application). Cette application est réalisée en Adobe AIR. Là encore le résultat est sans appel ! On retrouve exactement la même interface que sur le site en ligne avec la possibilité en plus de télécharger les vidéos directement sur le bureau. Impressionnant !

Nos blogs en RIA demain ?

Cette réalisation est un excellent exemple des possibilités qu’offrent les RIA ou RDA en terme d’ergonomie, d’interface utilisateur et d’expérience utilisateur. De là à imaginer que demain nos bon vieux blogs (si si ils commencent à vieillir quand même !) seront tous construits sur ce modèle, je suis réservé. En effet, l’implémentation d’une telle technologie requiert encore de grandes compétence techniques et graphiques. Néanmoins, l’idée qu’une société sente cette vague d’applications riches arriver et l’anticipe en créant une plateforme de blogs sur ce modèle avec un jeu de template de base assez diversifiés ne me parait pas si inconcevable… A suivre !

Ça vous dirait de transformer votre blog selon ce modèle ?

 

Des ergonomies impossibles autrement

Les efforts de nouvelles ergonomies qui sont fait par les créateurs sont certainement ce qui me plait le plus dans ces sites. Avec la puissance de Flash (qui ne cesse de s’améliorer au fil de ses versions) et l’inventivité des « flasheurs », de nouvelles ergonomies parfois osées et souvent pertinentes apparaissent tous les mois… En effet, l’un des gros avantages du Flash par rapport au DHTML classique est sans contexte sa capacité à s’affranchir des limites structurelles de l’HTML et de pouvoir laisse pleine liberté à la conception de sites tout à fait originaux.
 

Une expérience utilisateur unique

Un autre point fort du Flash est sa capacité à immerger l’utilisateur dans un univers complet. Ayant la maîtrise de tout les éléments de la page (cinématique, vidéos, sons/musiques, etc.), l’expérience utilisateur créée alors est très loin de ce que l’on peut produire avec un site classique. Dès lors il serait plus logique de parler de « créateur Flash» que de « développeurs Flash » tant la frontière entre code (ActionScript) et graphisme (Vectorielle) est de plus en plus fine.
 

Des interfaces en 3D qui en mettent plein la vue

La 3D est de plus en plus exploitée par les développeurs Flash afin de réaliser des sites ultra dynamique, dans l’idée permanente de marquer le plus le visiteur, de lui en mettre « plein la vue ». Bien que cela ne soit pas toujours réalisé de manière pertinente, souvent le résultat est à couper le souffle à tel point qu’on se souvient plus du site pour sa réalisation ou ses « effets spéciaux » que pour le produit qu’il présente en lui-même…La rançon du succès…
 

Le Flash n’est plus ce qu’il était

Les vieux clichés associés aux sites en Flash n’ont pour la plupart lieu d’être. Les temps de chargement trop long sont une idée bien révolue depuis l’avènement de l’ADSL. Le Flash est maintenant exploité intelligemment et pleinement du fait de l’excellente connaissance des développeurs Flash et de la communauté qui s’est créée autour. Le référencement de son côté reste surement le point faible du Flash malgré les efforts des moteurs de recherche qui commencent petit à petit à mieux les référencés ou les possibilités de faire de l’url rewriting.
 

Pour découvrir les meilleurs exemples, un seul site : TheFWA.com

TheFWA.com est très connu des amateurs de sites Flash parce qu’il regroupe les meilleurs réalisations du genre. Chaque site présenté (double cliquez sur une preview pour lancer le site) est à chaque fois une petite merveille à découvrir. Mélange des genres et des domaines, on trouve beaucoup de choses sur ce site mais on peut facilement y passer des heures…

 

En conclusion

Fan de webdesign en général et de nouvelles interfaces/ergonomie en particulier, j’aime beaucoup les sites en full-flash, je les découvre avec engouement tous les jours et vous en propose quelque uns sur Webilus.com. Je ne dis pas que tous les sites devraient être ou sauront un jour en full-flash, loin de là, mais je pense qu’il représente un domaine bien particulier qui ne cesse de progresser, d’évoluer peut être même plus vite que les sites plus classiques… sans parler des Rich Internet Application qui arrivent sont déjà là !