Sauver le monde ! Telle est votre mission si vous l’acceptez bien sûr…Choisissez votre arme secrète et découvrez l’issue finale du film…

Un début d’article plein de suspense pour vos présenter la nouvelle campagne virale de la SNCF. Étant partenaire du 37ème Festival du Film Américain de Deauville, la SNCF joue la carte du concret avec ce film interactif pour promouvoir la ligne Paris-Deauville. Le concept du site est simple : à vous de jouer, en entrant le nom l’objet qui servira à sauver le monde.

À la clé, 500 pass journée et 15 pass VIP sont à gagner.

J’ai testé avec un marteau, mais pour sauver la Terre, ce n’est pas le bon outil…

Au final :

Un dispositif déjà utilisé dans d’autres campagnes, avec l’intégration de données Facebook par exemple. Mais ici Google Image change la donne avec des intégrations superbement bien réalisées. Une campagne par TBWA Paris

www.missionparisdeauville.com

AIDES, l’association de lutte contre le SIDA, connue pour ses campagnes créative, revient avec un nouveau concept web qui vous fera jouer du doigt…

La campagne et le site Flash dédié « Sexy Fingers » met en avant un des moyens les plus simple et rapide pour se faire dépister. Souvent méconnu, il est possible de se faire dépister en se faisant prélever une goutte de sang sur le bout du doigt.

Réalisée par l’agence JWT, le site Flash « Les doigts sexy » permet de capter l’attention des internautes, avec un univers électro et très interactif. Une réalisation sans faille, osée mais surtout fun.

Amusez-vous à créer vos propres rythmes dans les minis-jeux ou tentez le jeu « Sexy Fingers »

La mosaïque associe clairement mini-jeux et informations sur le dépistage.

Un doigt pour se faire dépister, représente au final une campagne qui commence bien, avec un concept fun et un message clair. À noté également l’application Android dédiée sur l’Android Market

Sexy Fingers c’est par ici.

On ne présente plus Ultra Noir, excellant dans le design interactif. Nouveau site oblige, un arrêt sur image s’impose pour découvrir la nouvelle vitrine de l’agence web française.

Fluide, clair et technologique sont les premiers mots qui me viennent à la bouche lors de la découverte de nouveau site web d’Ultra Noir. « Vivez la nouvelle expérience HTML 5« , telle est la promesse d’introduction du site. Effectivement l’expérience et l’immersion utilisateur sont au rendez-vous. Avec un savant mélange de vidéos, de sons, d’images et un design plein écran, les non-initiés pourraient très bien se croire sur un site Flash.

L’accueil du site est conçu sous forme de slides mettant en avant divers projets de l’agence. Une vision peut-être classique certes, mais l’ajout de vidéos (avec un player Flash cette fois-ci)  apporte clairement une valeur ajoutée. À noter les transitions entre chaque pages sont quant à elles bien gérées.

La sélection du mode d’affichage sur la page projet peut-être vue comme un gadget, mais il faut avouer que la fonction est bien pensée et pratique pour voir plus de projet en un clin d’oeil.

Le blog de l’agence avec sa mise en page de type journal appui le style global du site.

Pour finir

Un site d’agence bien réalisé, qui donne un large aperçu des compétences d’Ultra Noir.

http://www.ultranoir.com/fr/

Décrocher un award en webdesign est une excellente façon de faire reconnaître un travail créatif de qualité. Petit tour d’horizon des principales récompenses du domaine.

Les meilleures réalisations créatives et/ou techniques sont récompensées dans le webdesign par des awards reconnus qui sont pour la plupart présent sur le web depuis quelques années.

Design Licks

Le site Design Licks récompense depuis 1996 les réalisations les plus créatives du web à travers le monde.

The Fwa

Je ne présente plus The Favourite Website Awards, qui compte une collection énorme de site Flash récompensés. Une référence de poids dans le domaine. Depuis peu The Fwa c’est ouvert au réalisations HTML5 / CSS3 / Jquery.

Best Webdesign Award

Comme son nom l’indique Best Webdesign Award récompense les webdesigns qui envoient du gros !

Css Design Awards

Le site est principalement une galerie d’inspiration graphique mais récompense aussi les sites web réussis. Les critères à respecter son d’avoir un haut niveau de créativité, un CSS professionnel, un site 100% fonctionnel et encore mieux que le site respecte les standards du W3C.

The Webby Awards

Un des poids lourd du domaine, le Webby Awards récompense les très excellentes réalisations du web. Aussi bien sur le concept, que sur le design, le niveau technique, etc.

Awwwards

Pour faire parti des heureux titulaires d’un awards pour le design, la créativité et l’innovation sur Internet, il va d’abord falloir payer pour soumettre votre site. Pour 15€ cela vaut peut-être le coup, si votre site est sélectionné, il sera également publié dans le livre « The 365 best css websites around the world »

Annual Design Awards

La récompense annuelle étend son champ d’action plus loin que le webdesign en récompensant de nombreux domaines de la communication visuelle.

The Web Font Awards

Uniquement réservé au sites utilisant des polices web, The Web Font Awards récompense les utilisations les plus créatives des Web Fonts.

Dope Awards

Dope offre une reconnaissance ou meilleures réalisation Flash, mais aussi au-delà du webdesign avec des récompenses 3D, animations et photographie.

Cette liste n’est bien sûr pas exhaustive, n’hésitez-pas à partager vos liens !

Nouveau numéro de l’agence du jour, avec aujourd’hui à la une, l’agence de publicité interactive française Chewing Com.

C’est le site et les réalisations originales de l’agence basée à Courbevoie en région Parisienne qui ont retenu mon attention. On découvre d’emblée l’univers de l’agence avec un chargement original avant l’affichage du site Flash.

Avec une animation légère et aussi bien pensée, le chargement est limite trop court, on en redemanderai presque…

Une fois passé cette étape, on découvre d’un clin d’œil un large panel des réalisations de l’agence, sous forme d’un mur basé sur Flash avec un effet 3D.

Le visiteur peux à sa guise cliquer sur les vignettes pour accéder directement au contenu, ou bien se servir du menu de gauche pour mettre en surbrillance un domaine d’activité de l’agence.

Le mot de la fin :

Les murs Flash 3D sont utilisés sur de nombreux sites, notamment pour mettre en avant des photographies par exemple. Chewing Com l’a ici bien exploité pour un immersion complète, surtout en fullscreen.

www.chewing-com.com

Nouvelle série d’articles, l’agence du jour permet de mettre en lumière les sites d’agences web. Après une petite explication du principe, découvrez dans ce premier post, le créatif Mini Gorille.

Pourquoi choisir des sites d’agences et de créatifs du web ?

Par mettre en valeur leurs créations, et surtout se vendre online, les agences mettent souvent le packet dans leur site. Rien de tel pour suivre les dernières tendances du web avec des réalisations de qualité.

Quels sont les critères de choix ?

Pas de critères particuliers, je sélectionne simplement des sites originaux, mettant bien en valeur le travail de l’agence (ou du créatif indépendant !) Soit par un webdesign ou une ergonomie réussie, une navigation hors du commun, une réalisation technique époustouflante, ou bien simplement un coup de cœur ! Le tout bien sûr pour pouvoir assouvir votre soif d’inspiration et de nouveautés !

Premier site du jour : Mini Gorille

Mini Gorille n’est pas une agence web à proprement parler. Mais le site full Flash du créatif Lysandre Follet à retenu toute mon attention. Laissez vous embarquer dans son univers avec un site full screen, mélangeant à la fois photos et vidéos en fond.

Les créations du designer sont présentées sous forme d’une timeline horizontale (qui plus est répondant très bien au survol de la souris.)

Au clic, la création vient prendre tout l’écran de l’utilisateur, pour tout voir en détail.

Au final, une réalisation propre, claire, facile à prendre en main qui met en valeur le travail du créatif en toute simplicité.

www.minigorille.com

La technologie Flash n’est pas morte et bien au contraire. Les designers Flash nous offrent très régulièrement de sublimes réalisations parfois oubliée des galeries de design « traditionnelles » axées HTML/CSS. Petit tour d’horizon de quelques superbes sites réalisés au cours de ses derniers mois.

J’entends parfois dire ici et là que HTML5, le Javascript et ses nombreuses librairies comme Jquery surpassent sur de bien nombreux points le Flash. Mais attention ! Mélangeant 3D, animations poussées, vidéo, son, interactions en tout genre, Flash offre une infinité de possibilités (ou presque). Depuis son apparition, il a également bien évolué, suivant la tendance du web. Avec l’augmentation de la vitesse de connexion,  les sites Flash deviennent très facilement immersifs ce qui nous permet de souvent y passer beaucoup plus de temps que sur un site traditionnel HTML/CSS. Non, Flash n’est pas mort, au vu du nombre de sites récompensés et de grosse campagnes de marketing utilisant cette technologie.

Sites Full Flash

Premier exemple avec le site Nespresso Variation.

Cette superbe réalisation de l’agence française Soleil Noir mélange de la vidéo, avec un design sublime, du son bien dosé et une interactivé prenante. On y passerai des dizaines de minutes, sans hésiter à revenir ! Comment obtenir un tel résultat sans Flash ? En appliquant uniquement de la vidéo me direz-vous, mais le niveau d’interactivité ne serai pas comparable avec simplement du Javascript.

Second exemple avec le manoir de Perrier, avec son égérie Dita Von Teese.

Ici encore un site marketing par excellence qui sait très bien susciter le désir des chauds buveurs de Perrier grâce à de la vidéo immersive et interactive. Certes le temps de chargement initial est plutôt conséquent, mais une fois à l’intérieur du manoir, c’est le bonheur total.

Encore un exemple de taille, avec le site full Flash Lego Star Wars sur Wii.

Bien plus qu’un site, c’est tout un monde interactif qui s’offre à vous. Dès votre arrivée dans le vaisseau à l’ouverture du site, vous vous trouvez avec de nombreux autres internautes Stormtrooper tout comme vous. Allez y faire un tour pour voir de quoi je parle…Ici aussi le site tire son énorme valeur ajoutée grâce à l’interaction rendue possible par la technologie Flash.

Et les autres…

Je pourrai vous présenter des dizaines d’autres exemples semblable pour arriver au final à la même conclusion. Les sites 100 % Flash regorgent d’innovation et repoussent toujours plus loin l’immersion de l’utilisateur.

Pourquoi utiliser du Flash ?

Les campagnes marketing à gros budget utilisent fréquemment la technologie Flash car se sont des campagnes à gros budget justement…Investir dans un site qui tiendra l’internaute en haleine est en quelque sorte une valeur sûre. Je pense par exemple aux grosses campagnes Doritos, qui misent gros sur les sites Flash.

Grosses campagnes mise à part, les sites de marques de luxe tel que Hermès, Rolex ou encore Chopard misent sur le Flash pour créer un univers particulier. Cet univers doit retranscrire à merveille la philosophie de la marque pour littéralement conquérir l’internaute. Comme ici, se prendre une Rolex en pleine face en plein écran, avouez que c’est la classe.

Mais cela ne s’arrête pas là, le choix du Flash est aussi une question de préférence technologique, de stratégie (site avec un fort besoin de référencement ou non), de budget, etc…

Les concepteurs web tentent de plus en plus à s’éloigner de Flash lorsqu’il agit de réaliser des animations simples comme des sliders, des galeries d’images, des menus interactifs etc. C’est sur ce point que les technologies telles que Jquery s’imposent largement et se sont largement démocratisée durant ses deux dernières annnées.

Trouvez votre vocation, devenez Flasheur !

L’industrie du web manque de développeurs et de designers Flash, au vue des nombreuses annonces sur les sites spécialisés. Un Flasheur est en général quelqu’un de polyvalent, qui possède à la fois des compétences en création graphique et en développement. Il doit maîtriser l’ActionScript qui gère les objets, les applications XML, les sockets, la vidéo…De plus le Flasheur est généralement bien mieux payé qu’un simple webdesigner.

Pour conclure

Flash, la technologie propriétaire par Adobe a d’après moi encore de beaux jours devant elle. Même si les librairies Javascript gagnent du terrain et offrent de plus en plus de réalisations hallucinantes, Flash sait tirer son épingle du jeu. Il faut bien sûr que son utilisation soit justifiée, soit pour de grosses campagnes marketing, pour des sites de luxe, ou encore pour des sites évènementiels. Utiliser Flash pour faire un menu animé dans un site HTML/CSS n’a aujourd’hui plus aucune raison d’être.

De plus, le domaine du Flash recrute et offre des formations bien poussées sur son utilisation. À vous de jouer à présent !

Et vous quel est votre avis sur la question ?

Premier « guest post » sur Webdesigner Trends : Gaétan de Design Spartan a rédigé pour vous un article sur un sujet très actuel dans le webdesign, les sliders.

Depuis maintenant un moment déjà, nous voyons les pages de nombreux sites agrémentées de javascript pour des effets de rollover, de menus déroulant, de lightbox ou encore de sliders. Nous nous intéressons dans cet article aux sliders et à leur emploi dans le webdesign.

Qu’est-ce qu’un slider ?

Un slider est un élément présentant du contenu de façon ergonomique, souvent sous forme de diaporama avec une navigation. On les retrouve sous le nom de slideshows (= diaporamas) ou encore de carousels.

Ils peuvent ainsi présenter du contenu de tout type de manière à ne pas prendre trop de place à l’écran et sans rechargement de page intempestif.

Ils sont souvent utilisés pour afficher :

- des images : c’est le cas dans beaucoup de portfolios ou de sites en rapport avec l’image (photographie, graphisme). Il agit ainsi comme un petit diaporama pouvant ensuite renvoyer vers une page au travers de liens.

- des informations : souvent vu dans le cas de sites souhaitant présenter leur produit ou service innovant, on voit beaucoup de sliders présentant de façon claire et concise le fonctionnement du service ou du produit, ou encore ses avantages, etc… Cela est particulièrement utile pour ne pas avoir soit à charger une page de beaucoup d’informations, soit justement de naviguer entre plusieurs pages.

- mettre en avant un contenu spécifique : particulièrement apprécié par les blogs pour mettre en avant leurs articles « stars » ou les plus récents. Plus que pour des blogs, lorsqu’il est bien utilisé, un slider peut mettre en avant de façon intuitive presque n’importe quel contenu.

De plus en plus, on voit des sliders remplacer totalement la zone de contenu du site (généralement entre le header et le footer) dans le cas de sites ayant relativement peu de contenu. Cela signifie que le menu de navigation principal renvoie, après un clic, non pas sur une nouvelle page mais fait en général « coulisser » le contenu jusqu’à la page demandée.

Comment bien utiliser un slider ?

Aussi amusants qu’ils puissent paraître, les sliders ont leur limite et mal les utiliser peut être un échec. Mais avec ces quelques conseils, vous ne devriez pas faire d’erreur :

Ne surchargez pas en contenu

L’intérêt d’un slider est de pouvoir montrer plus de contenu de façon intelligente et pratique. De ce fait il va de soi que surcharger chaque slide de contenu alourdira la page. De même, il vaut mieux ne pas avoir trop de slides. Par exemple avec une vingtaine de slides, il perd totalement son utilité car il y aurait trop de contenu et retrouver l’information deviendrait vite une galère terrible. On voit en général plutôt entre 4 et 7 slides, voire un peu plus lorsqu’il ne s’agit que d’image. Il faut donc garder à l’esprit que l’objectif d’un slider est de présenter et trouver rapidement un contenu (image, texte, vidéo, etc…).

N’oubliez pas la navigation

Dans le cas d’un diaporama d’images notamment, on peut être tenté de ne mettre aucun lien ni aucun bouton et de juste laisser le timer faire défiler automatiquement les images les unes après les autres. C’est une erreur. Comme dans toute interface utilisateur, il faut que l’utilisateur ait le contrôle. Ainsi, il faut qu’il puisse passer d’un slide à l’autre quand il le souhaite via des liens ou boutons (des petits boutons pour chaque slide ou encore flèches précédent / suivant, les idées ne manquent pas !).

Montrez le nombre de slides

Quelque chose qui est souvent oublié en ergonomie, est que de ne pas savoir où est le commencement et où est la fin peut être frustrant ! Cela rejoint en partie le point précédent sur la navigation, il faut que d’une façon ou d’une autre, l’utilisateur soit conscient du nombre de slides et de là où il se trouve (par exemple 4/7).

Sur le site de Sprinkle Penny, chaque slide met en avant une caractéristique du service avec peu de contenu ce qui met en valeur celui présent. A noter la place importante de la navigation du slideshow qui permet à la fois de naviguer entre les slides, mais aussi de montrer sur laquelle on se trouve.

Intégrer graphiquement le slider

Des slideshow tout faits, il en existe des dizaines téléchargeables gratuitement. Quelque fois les thèmes graphiques sont agréables à regarder et quelque fois non. Dans tous les cas, gardez à l’esprit que l’intégrer dans le design général du site est nécessaire et cela peut même devenir un élément-clé unique du design, comme nous verrons dans les exemples plus bas.

Radium offre ici un très bon exemple d’intégration du slider dans le design. Cela devient à la fois beau, interactif et surtout unique. Les éléments de navigation sont particulièrement bien intégrés, de même que le contenu des slides.

Les transitions

En général, si on aime bien les sliders, c’est parce qu’ils permettent de mettre du contenu en avant intelligemment, mais aussi et surtout pour leurs transitions ! A vous de réfléchir aux transitions, sachez qu’il en existe aujourd’hui pour tous les goûts, style diaporama, fondu, effet 3D, etc…

Un peu d’inspiration avec des exemples de sliders

Quelques liens et ressources pour aller plus loin sur le sujet :

http://www.1stwebdesigner.com/resources/57-free-image-gallery-slideshow-and-lightbox-solutions/

http://www.1stwebdesigner.com/inspiration/great-slideshows-web-design/

http://webdesignledger.com/inspiration/55-inspiring-examples-of-slideshows-in-web-design

http://www.smashingmagazine.com/2009/03/09/slideshows-in-web-design-when-and-how-to-use-them/

J’espère que cet article vous aura plu et appris ou rappelé certains principes dans l’emploi de sliders en webdesign.

À propos de l’auteur :

Gaétan Weltzer aka Design Spartan est littéralement dépendant au graphisme, à l’illustration et au multimédia. Autodidacte et polyvalent, il adore partager et développer ses connaissances, comme en témoigne son désormais célèbre blog Design Spartan ! Il est également graphiste freelance dans le domaine du webdesign, de la création de sites internet, de l’illustration, de Flash (animations et sites interactifs) et de l’identité visuelle. N’hésitez-pas à le contacter pour vos projets, il mettra son expertise à votre service.

Nouveau site web pour une édition limité du café Nespresson Tanzaru. Un voyage à travers un monde de saveurs surprenante, où l’internaute est invité à composer sa propre harmonie d’images et de sons…

Un site sur fond de jungle dé-saturée, avec un effet de 3D réagissant par rapport à la position de votre souris. Tanzaru vous promène dans cette jungle en Tanzanie et Perou, où toute la vie du café y est illustrée et animée.

Fait sauter les impalas  ! Au passage de la souris, un son en accord avec la musique de fond se fait entendre.

Pour conclure, un site avec une expérience sympathique, même si l’utilisateur pourrai être d’autant plus impliqué dans le déroulement de l’histoire. Il n’en reste pas moins une belle réalisation signée Soleil Noir.

Voir le site Nespresso Tanzaru

Une ressource intéressante pour aujourd’hui, un slider Flash 3D 100% configurable via XML. Une belle réalisation qui vaut vraiment le détour !

Si vous suivez le blog depuis le début, cela vous rappellera surement doute Cu3er, dont c’est inspiré Björn Crüger le créateur de The Piecemarker. Il ne vous faudra que quelques minutes pour prendre en main la galerie d’image gratuite. Chargez vous photos au format .jpg, .gif, .png via le fichier XML, configurer vos transitions, installez-le sur votre serveur et le tour et joué !

Un moyen facile et rapide d’avoir une galerie Flash vraiment classe. Pour les flasheurs d’entre vous, qui désirent plus de personnalisation, le fichier .fla est disponible dans l’archive de la galerie au téléchargement. Un bon moyen aussi pour voir et essayer de comprendre le code qui se cache derrière une telle application Flash.

À voir et à télécharger sur Active Tuts

Le site officiel de The Piecemarker