<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>rollover.fr &#187; Rich media</title>
	<atom:link href="http://www.rollover.fr/tag/rich-media/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.rollover.fr</link>
	<description>Design interactif</description>
	<lastBuildDate>Tue, 02 Aug 2011 17:44:03 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Le design en mosaïque</title>
		<link>http://www.rollover.fr/2009/10/le-design-en-mosaique/</link>
		<comments>http://www.rollover.fr/2009/10/le-design-en-mosaique/#comments</comments>
		<pubDate>Sun, 18 Oct 2009 21:25:47 +0000</pubDate>
		<dc:creator>véro</dc:creator>
				<category><![CDATA[Ergonomie web]]></category>
		<category><![CDATA[Pub]]></category>
		<category><![CDATA[Webdesign]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[featured]]></category>
		<category><![CDATA[Rich media]]></category>
		<category><![CDATA[Webdesigners]]></category>

		<guid isPermaLink="false">http://www.rollover.fr/?p=499</guid>
		<description><![CDATA[Les interfaces en mosaïque apparaissent très souvent sur nos écrans : portfolios, blogs, sites d'informations, e-commerce… Simple effet de mode ou vraie évolution ?
L'apogée de ce mode de lecture est sans doute facilité par une évolution de l'utilisation du web : les utilisateurs se prêtent plus facilement au jeu de la navigation libre et du "survol" de l'information, ce qui finalement est de bonne guerre face à l'énorme masse de contenus que supporte la toile… et que nous devons digérer.]]></description>
			<content:encoded><![CDATA[<p><strong>Les interfaces en mosaïque apparaissent très souvent sur nos écrans : portfolios, blogs, sites d&#8217;informations, e-commerce… Simple effet de mode ou vraie évolution ?</strong><br />
 L&#8217;apogée de ce mode de lecture est sans doute facilité par une évolution de l&#8217;utilisation du web : les utilisateurs se prêtent plus facilement au jeu de la navigation libre et du &laquo;&nbsp;survol&nbsp;&raquo; de l&#8217;information, ce qui finalement est de bonne guerre face à l&#8217;énorme masse de contenus que supporte la toile… et que nous devons digérer.</p>
<p><span id="more-499"></span></p>
<p>Juxtaposition de visuels ou juxtaposition d&#8217;infos, la mosaïque incite-t-elle ou au contraire, empêche-t-elle une navigation en profondeur ?<br />
 Elle convient en tout cas aux internautes qui vont sur un site sans besoin de recherche précise, donc sans besoin de réelle hiérarchisation de contenu.</p>
<p><strong>Dans le cadre d&#8217;un portfolio</strong>, où le but est de faire entrer les visiteurs par les visuels, la mosaïque permet de mettre en avant, d&#8217;un seul coup d&#8217;œil, la multitude des projets traités, et en même temps l&#8217;esprit global de ce qui est présenté.</p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<div id="attachment_501" class="wp-caption alignleft" style="width: 224px"><a href="http://www.45royale.com/work/" target="_blank" onclick="javascript:urchinTracker ('/outbound/article/www.45royale.com');"><img class="size-full wp-image-501  " title="45royale" src="http://www.rollover.fr/wp-content/uploads/2009/10/45royale.jpg" alt="45royale" width="214" height="132" /></a>
<p class="wp-caption-text">Présentation du studio 45 Royale</p>
</div>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<div id="attachment_505" class="wp-caption alignleft" style="width: 224px"><a href="http://55eleven.com/" target="_blank" onclick="javascript:urchinTracker ('/outbound/article/55eleven.com');"><img class="size-full wp-image-505  " title="puckett" src="http://www.rollover.fr/wp-content/uploads/2009/10/puckett.jpg" alt="55eleven, le portfolio de Josh Puckett" width="214" height="142" /></a>
<p class="wp-caption-text">55eleven, le portfolio de Josh Puckett</p>
</div>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<div id="attachment_507" class="wp-caption alignleft" style="width: 224px"><a href="http://www.hellomonday.net/" target="_blank" onclick="javascript:urchinTracker ('/outbound/article/www.hellomonday.net');"><img class="size-full wp-image-507  " title="hellomonday" src="http://www.rollover.fr/wp-content/uploads/2009/10/hellomonday.jpg" alt="Hellomonday, site full flash" width="214" height="128" /></a>
<p class="wp-caption-text">Hellomonday, site full flash</p>
</div>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><strong>Pour la présentation de marques</strong> (Adidas, le Coq Sportif, Uniqlo), la mosaïque offre de façon immédiate une bonne diversité de contenus (photos, vidéos, textes). Dans le cas d&#8217;Adidas, la home nous montre aussi les différentes facettes de la marque (Performance, Originals, Style).</p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<div id="attachment_509" class="wp-caption alignleft" style="width: 315px"><a href="http://www.adidas.com/fr/homepage.asp" target="_blank" onclick="javascript:urchinTracker ('/outbound/article/www.adidas.com');"><img class="size-full wp-image-509 " title="adidas" src="http://www.rollover.fr/wp-content/uploads/2009/10/adidas.jpg" alt="Le site adidas.com" width="305" height="111" /></a>
<p class="wp-caption-text">Le site adidas.com</p>
</div>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><strong>Dans le cas des sites d&#8217;information</strong>, on est en rupture avec les schémas classiques. Dans l&#8217;exemple de l&#8217;&nbsp;&raquo;article skimmer&nbsp;&raquo; du NY Times, le lecteur est libre de &laquo;&nbsp;piocher&nbsp;&raquo; dans les articles présentés, selon ses propres priorités.</p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<div id="attachment_510" class="wp-caption alignleft" style="width: 315px"><a href="http://prototype.nytimes.com/gst/articleSkimmer/" target="_blank" onclick="javascript:urchinTracker ('/outbound/article/prototype.nytimes.com');"><img class="size-full wp-image-510 " title="nytimes" src="http://www.rollover.fr/wp-content/uploads/2009/10/nytimes.jpg" alt="Article skimmer, du New York Times" width="305" height="113" /></a>
<p class="wp-caption-text">Article skimmer, du New York Times</p>
</div>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><strong>J&#8217;en profite d&#8217;ailleurs pour présenter un petit coup de cœur :</strong> enfin un vrai site d&#8217;infos !</p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<div id="attachment_512" class="wp-caption alignleft" style="width: 315px"><a href="http://www.learnsomethingeveryday.co.uk/" target="_blank" onclick="javascript:urchinTracker ('/outbound/article/www.learnsomethingeveryday.co.uk');"><img class="size-full wp-image-512 " title="learn" src="http://www.rollover.fr/wp-content/uploads/2009/10/learn.jpg" alt="Learn Something Every Day" width="305" height="167" /></a>
<p class="wp-caption-text">Learn Something Every Day</p>
</div>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><strong>Autre subtilité, vue sur plusieurs blogs </strong>: certains thèmes WordPress (utilisant les fluid css grids) offrent une interface qui s&#8217;adapte à la taille de la fenêtre du navigateur de façon dynamique.</p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<div id="attachment_513" class="wp-caption alignleft" style="width: 315px"><a href="http://www.sixsixsix-berlin.de/" target="_blank" onclick="javascript:urchinTracker ('/outbound/article/www.sixsixsix-berlin.de');"><img class="size-full wp-image-513 " title="666berlin" src="http://www.rollover.fr/wp-content/uploads/2009/10/666berlin.jpg" alt="Six Six Six Berlin" width="305" height="147" /></a>
<p class="wp-caption-text">Six Six Six Berlin</p>
</div>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<div id="attachment_514" class="wp-caption alignleft" style="width: 315px"><a href="http://thisalso.com/" target="_blank" onclick="javascript:urchinTracker ('/outbound/article/thisalso.com');"><img class="size-full wp-image-514 " title="thisalso" src="http://www.rollover.fr/wp-content/uploads/2009/10/thisalso.jpg" alt="This Also" width="305" height="168" /></a>
<p class="wp-caption-text">This Also</p>
</div>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><em>Articles de référence :</em><br />
 Hebiflux.com, <a href="http://www.hebiflux.com/blog/2009/06/19/la-mosaique-limage-et-linformation-une-question-dequilibre/" target="_blank" onclick="javascript:urchinTracker ('/outbound/article/www.hebiflux.com');">La mosaïque, l&#8217;image et l&#8217;information, une question d&#8217;équilibre.</a><br />
 Benoît Drouillat, <a href="http://www.drouillat.com/2009/09/08/nouvelle-formule-de-liberation-une-forme-mosaiquee/" target="_blank" onclick="javascript:urchinTracker ('/outbound/article/www.drouillat.com');">Nouvelle formule de Libération, une forme mosaïquée.</a><br />
 Benoît Drouillat, <a href="http://www.drouillat.com/2009/04/27/renouveller-les-parcours-de-lecture-dans-la-presse-en-ligne/" target="_blank" onclick="javascript:urchinTracker ('/outbound/article/www.drouillat.com');">Renouveler les parcours de lecture dans la presse en ligne.</a><br />
 RichCommerce, <a href="http://www.richcommerce.fr/2009/02/09/vers-une-recherche-plus-visuelle-avec-zappos-explore/" target="_blank" onclick="javascript:urchinTracker ('/outbound/article/www.richcommerce.fr');">Vers une recherche plus visuelle avec Zappos Explore.</a><br />
 Interfaces Riches, <a href="http://www.interfacesriches.fr/2009/04/26/est-ce-la-mode-des-mosaiques-dactualites/" target="_blank" onclick="javascript:urchinTracker ('/outbound/article/www.interfacesriches.fr');">Est-ce la mode des mosaïques d&#8217;actualité ?</a><br />
 Cédric Deniaud, <a href="http://cdeniaud.canalblog.com/archives/2009/06/16/13993479.html" target="_blank" onclick="javascript:urchinTracker ('/outbound/article/cdeniaud.canalblog.com');">Présentation des contenus sous format mosaïque.</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.rollover.fr/2009/10/le-design-en-mosaique/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Tournez petits bolides</title>
		<link>http://www.rollover.fr/2009/03/tournez-petits-bolides/</link>
		<comments>http://www.rollover.fr/2009/03/tournez-petits-bolides/#comments</comments>
		<pubDate>Sun, 22 Mar 2009 18:23:09 +0000</pubDate>
		<dc:creator>véro</dc:creator>
				<category><![CDATA[Ergonomie web]]></category>
		<category><![CDATA[Webdesign]]></category>
		<category><![CDATA[3D]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Rich media]]></category>
		<category><![CDATA[Vue 360°]]></category>

		<guid isPermaLink="false">http://www.rollover.fr/?p=101</guid>
		<description><![CDATA[Les vues 360° sur les sites automobile Quel est le meilleur moyen de montrer un objet ? La vue 360° par exemple… Ce système est très souvent utilisé sur de nombreux sites automobiles. Voici un aperçu de quelques belles réalisations. Sur click and drag, long à charger et pas des plus fluides… Mais assez élégant.]]></description>
			<content:encoded><![CDATA[<p><strong>Les vues 360° sur les sites automobile</strong></p>
<p>Quel est le meilleur moyen de montrer un objet ? La vue 360° par exemple… Ce système est très souvent utilisé sur de nombreux sites automobiles. Voici un aperçu de quelques belles réalisations.</p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<div id="attachment_103" class="wp-caption alignleft" style="width: 445px"><a href="http://www.renault.fr/gamme-renault/vehicules-particuliers/clio-III/accueil-clio-III/index.jsp" onclick="javascript:urchinTracker ('/outbound/article/www.renault.fr');"><img class="size-full wp-image-103" title="clio" src="http://www.rollover.fr/wp-content/uploads/2009/03/clio.jpg" alt="clio" width="435" height="299" /></a>
<p class="wp-caption-text">Une vue 360° dès l&#39;accueil</p>
</div>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><span id="more-101"></span></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<div id="attachment_110" class="wp-caption alignleft" style="width: 445px"><a href="http://www.rollover.fr/2009/03/tournez-petits-bolides/twingo/"rel="attachment wp-att-110"  ><img class="size-full wp-image-110" title="twingo" src="http://www.rollover.fr/wp-content/uploads/2009/03/twingo.jpg" alt="L'idée consiste à &quot;fabriquer&quot; un visage, à partir duquel on vous propose une twingo sensée correspondre à votre personnalité. Le 360° est fait avec papervision, pas très fluide." width="435" height="253" /></a>
<p class="wp-caption-text">L&#39;idée consiste à &quot;fabriquer&quot; un visage, à partir duquel on vous propose une twingo sensée correspondre à votre personnalité. Le 360° est fait avec papervision, pas très fluide.</p>
</div>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><a href="http://www.pilotrussia.ru/flash/" onclick="javascript:urchinTracker ('/outbound/article/www.pilotrussia.ru');"><img class="size-full wp-image-117" title="honda-pilot-russia" src="http://www.rollover.fr/wp-content/uploads/2009/03/honda-pilot-russia.jpg" alt="Sur click and drag, long à charger et pas des plus fluides… Mais assez élégant." width="435" height="351" /></a></p>
<div class="mceTemp">
<dl id="attachment_117" class="wp-caption alignleft" style="width: 445px;">
<dd class="wp-caption-dd">Sur click and drag, long à charger et pas des plus fluides… Mais assez élégant.</dd>
</dl>
</div>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<div id="attachment_164" class="wp-caption alignleft" style="width: 445px"><a href="http://www.c3picasso.com/" onclick="javascript:urchinTracker ('/outbound/article/www.c3picasso.com');"><img class="size-full wp-image-164" title="c3" src="http://www.rollover.fr/wp-content/uploads/2009/03/c3.jpg" alt="Une vue 360 (section &quot;design&quot;) animée au survol, des plus simples, mais suffisante pour apprécier le design. Une vue 360 classique, qui peut néanmoins être remplacée par… La réalité augmentée ! Ici avec un très beau rendu… à condition que vous soyez sur PC." width="435" height="255" /></a>
<p class="wp-caption-text">Une vue 360 (section &quot;design&quot;) animée au survol, des plus simples, mais suffisante pour apprécier le design. Une vue 360 classique, qui peut néanmoins être remplacée par… La réalité augmentée ! Ici avec un très beau rendu… à condition que vous soyez sur PC.</p>
</div>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><strong><br />
 </strong></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<div id="attachment_176" class="wp-caption alignleft" style="width: 445px"><a href="http://www.dodge.com" onclick="javascript:urchinTracker ('/outbound/article/www.dodge.com');"><img class="size-full wp-image-176" title="dodge" src="http://www.rollover.fr/wp-content/uploads/2009/03/dodge.jpg" alt="360° extérieur et intérieur pour quelques modèles (Journey et Challenger - pas la Viper, dommage), les voitures sont mises en scène dans un environnement moins froid que d'habitude (par exemple, présence d'un conducteur)." width="435" height="305" /></a>
<p class="wp-caption-text">360° extérieur et intérieur pour quelques modèles (Journey et Challenger &#8211; pas la Viper, dommage), les voitures sont mises en scène dans un environnement moins froid que d&#39;habitude (par exemple, présence d&#39;un conducteur).</p>
</div>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
<p><br class="spacer_" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.rollover.fr/2009/03/tournez-petits-bolides/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

