<?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>Banal Blog d&#039;un webmaster à Rouen. &#187; webdesign</title>
	<atom:link href="http://banal-blog.fr/category/webdesign/feed/" rel="self" type="application/rss+xml" />
	<link>http://banal-blog.fr</link>
	<description></description>
	<lastBuildDate>Tue, 01 Dec 2009 10:31:21 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Dossier #1 &#8211; (3) Le design du site.</title>
		<link>http://banal-blog.fr/dossier-1-3-le-design-du-site/</link>
		<comments>http://banal-blog.fr/dossier-1-3-le-design-du-site/#comments</comments>
		<pubDate>Tue, 02 Sep 2008 19:03:27 +0000</pubDate>
		<dc:creator>Al</dc:creator>
				<category><![CDATA[Boîte à outils]]></category>
		<category><![CDATA[Dossiers]]></category>
		<category><![CDATA[webdesign]]></category>
		<category><![CDATA[méthodologie]]></category>

		<guid isPermaLink="false">http://banal-blog.fr/?p=153</guid>
		<description><![CDATA[Le but de cet article n&#8217;est pas de vous donner une méthodologie pour vous apprendre à &#171;&#160;designer&#160;&#187;. Il s&#8217;agit surtout de montrer les éléments importants à ne pas &#171;&#160;zapper&#160;&#187; pour que votre site soit un minimum efficace. 1. Les éléments basiques d&#8217;un site : header, menu, contenu, footer. La plupart des sites à succès ont [...]]]></description>
			<content:encoded><![CDATA[<p>Le but de cet article n&#8217;est pas de vous donner une méthodologie pour vous apprendre à &laquo;&nbsp;designer&nbsp;&raquo;. Il s&#8217;agit surtout de montrer les éléments importants à ne pas &laquo;&nbsp;zapper&nbsp;&raquo; pour que votre site soit un minimum efficace.</p>
<p><strong>1. Les éléments basiques d&#8217;un site : header, menu, contenu, footer.</strong></p>
<p>La plupart des sites à succès ont en commun une structure assez similaire qui se décline ainsi :<br />
- Le <strong>Header </strong>: contient généralement le logo, la baseline, ce qui marque l&#8217;identité visuelle du site.<br />
- Le <strong>Menu </strong>: parfois au sein même du header, on peut le retrouver au dessus ou en dessous de ce dernier, verticalement ou horizontalement. Il n&#8217;y a pas vraiment de &laquo;&nbsp;meilleure place&nbsp;&raquo; pour un menu, tout dépend de l&#8217;ergonomie générale du site, et de la façon de le mettre en avant.<br />
- Le <strong>Corps de la page</strong> : le &laquo;&nbsp;plat principal&nbsp;&raquo; du site; on y retrouve les informations qui font du site ce qu&#8217;il est, l&#8217;information principale ainsi que les formations qui poussent les gens à revenir !<br />
- Le <strong>Footer </strong>: contient généralement les informations relatives au copyright, des liens vers les rubriques principales du site, et/ou des liens vers des sites partenaires.</p>
<p><strong>2. Logo et représentation.</strong></p>
<p>Avoir un logo unique et facile à retenir vous permettra d&#8217;être plus facilement reconnaissable sur la toile. Si les gens se souviennent de vous en ne voyant ne serait-ce que votre favicon, vous avez tout gagné ! Un exemple : si je vous montre ce logo <a href="http://banal-blog.fr/wp-content/uploads/2008/08/delicious.jpg" rel="lightbox[153]"><img class="alignnone size-medium wp-image-154" title="delicious" src="http://banal-blog.fr/wp-content/uploads/2008/08/delicious.jpg" alt="méthodologie logo" width="12" height="12" border="0" /></a> , à quoi pensez vous ? <img src='http://banal-blog.fr/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
<p><strong>3. Un design attractif.</strong></p>
<p>Pourquoi prendre soin du design de son site ? Comme on dit, &laquo;&nbsp;l&#8217;habit ne fait pas le moine&nbsp;&raquo; &#8230; Cependant, sur le net, le dicton est loin d&#8217;être vérifié&#8230; en effet, les utilisateurs sont sensibles au design d&#8217;un site, et  fondent majoritairement leur premier jugement sur la forme, et non le fond. Pire encore, d&#8217;un simple coup d&#8217;oeil, on jugera votre activité comme &laquo;&nbsp;non professionnelle&nbsp;&raquo;, relevant de l&#8217;amateurisme, et ça ne pardonne pas&#8230; Prenez donc le temps et/ou dépensez l&#8217;argent nécessaire à la création du design de votre site ; faites appel à des professionnels de la communication, spécialisés dans l&#8217;ergonomie et le design web.</p>
<p><strong>4. Eviter le trop-plein d&#8217;informations</strong></p>
<p>Une des raisons pour lesquelles le site ne pourrait pas marcher peut provenir du fait qu&#8217;il y ait trop d&#8217;éléments sur une seule page ; ce problème risque de semer la confusion chez vos utilisateurs et leur empêcher d&#8217;accéder à l&#8217;information principale du site. Le mieux à faire est d&#8217;épurer les contenus, et de les organiser soigneusement en &laquo;&nbsp;rangeant&nbsp;&raquo; le site selon les priorités du contenu ( ne mettez pas vos partenaires plus en avant que vos produits/services !).</p>
<p>Pour bien faire passer l&#8217;info, le mieux à faire est de créer une &laquo;&nbsp;zone attractive&nbsp;&raquo;, qui attire l&#8217;oeil, et qui permet de délivrer l&#8217;information sans avoir à la chercher ; pour être efficace, cette zone doit  respecter certains paramètres :</p>
<p>- Elle prend généralement le plus de place sur la page<br />
- Se distingue souvent par l&#8217;utilisation de la couleur, la taille de la police, ou une autre technique de mise en page<br />
- Doit se situer à un endroit qui capte l&#8217; attention du visiteur</p>
<p><strong>5. Utiliser des couleurs harmonisées<br />
</strong></p>
<p>Il existe de nombreux outils sur internet pour vous aider à trouver votre palette de couleurs ; quelques liens vers les plus efficaces : <a href="http://kuler.adobe.com/">Kuler</a>, <a href="http://www.colorschemer.com/">ColorShemer</a>, <a href="http://www.wellstyled.com/tools/colorscheme2/index-en.html">Color Sheme Generator</a>, <a href="http://pourpre.com/outils/chromafiltre.php">Pourpre</a>, <a href="http://www.colorsontheweb.com/colorwizard.asp">Color Wizard</a>.</p>
<p><strong>6. Faire attention à la taille de vos polices d&#8217;écriture</strong></p>
<p>Pour que vos textes soient lisibles, il est recommandé d&#8217;utiliser une police d&#8217;une taille supérieure à 11px; de nos jours, de plus en plus de sites utilisent une police de 13px ;</p>
<p><strong>7. Une page d&#8217;accueil percutante </strong></p>
<p>Le but d&#8217;une page d&#8217;accueil est de montrer clairement ce que contient le site ; si vous n&#8217;arrivez pas à capter l&#8217;attention de votre visiteur dès la première page, alors celui-ci risque fort de rebondir et de passer à un autre site web !</p>
<p>Quelques éléments pour une bonne page d&#8217;accueil :</p>
<p>- Donner de l&#8217;info &laquo;&nbsp;efficace&nbsp;&raquo; à vos visiteurs (n&#8217;y mettre que des élément intéressants)</p>
<p>- Etre synthétique et agréable ( Utiliser des listes à puces, utiliser une mise en pages en colonnes &#8211; pas plus de 3, ça risque de faire trop après &#8211; faire des paragraphes courts, et de façon générale organiser la page de manière à bien distinguer chaque partie de la page)</p>
<p>- Indiquer à vos visiteurs où aller sur le site (moteur de recherche, navigation accessible, un &laquo;&nbsp;plan du site&nbsp;&raquo; dans le footer&#8230;)</p>
<p>- Gagner la confiance de vos visiteurs ( mettez vos coordonnées en avant &#8211; telephone, e-mail, adresse&#8230; &#8211; , présentez-vous ou présentez votre société, &#8230;  )</p>
<p>- Ne faire aucune faute d&#8217;orthographe sur toute la page, ne laissez trainer aucun bug relatif au développement, bref, soyez clean de chez clean !</p>
<p><strong>Quelques liens pour illustrer l&#8217;article sur le design du site :</strong></p>
<p><a href="http://www.coolsitecollection.com">Une collection de sites avec des designs qui fonctionnent</a></p>
<p>Dans le même esprit : <a href="http://www.beautifully-webdesign.net/">beautifully webdesign</a></p>
<p><a href="http://www.webcreme.com/">De la crème de webdesign</a></p>
<p><a href="http://www.thedesignedtree.com/">The designed Tree</a></p>
<p>Un petit <a href="http://h-master.net/web2.0/">générateur de logo web 2.0</a></p>
<p>Et de façon plus générale, <a href="http://www.forwebdesigners.com/"></a><a href="http://www.forwebdesigners.com/">la bible  ultime </a>du webdesigner (attention, nombreux liens inside^^)</p>
]]></content:encoded>
			<wfw:commentRss>http://banal-blog.fr/dossier-1-3-le-design-du-site/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
