http://www.google.com/notebook/feeds/01789810031119710067/notebooks/BDQFPQwoQ9MKGkogi/NDQcDQwoQsa-Qj5Ai2007-02-27T06:29:57.297Z2007-02-27T06:30:29.699Z► Le petit guide du graphiste web 2.0<blockquote class="gn_bq"><table><tbody><tr><td><h2><a href="http://www.outil-referencement.com/blog/index.php/349-graphiste">Le petit guide du graphiste web 2.0</a>
</h2>
</td>
<td><a href="http://www.outil-referencement.com/blog/index.php/210-aurelien-bardon"><img src="http://www.outil-referencement.com/notebook/img?src=http%3A%2F%2Fwww.outil-referencement.com%2Fblog%2Fimages%2Fcatimage%2Fkarak56-avatar.png&ct=11101e417b1" height="48" width="48"></a></td>
</tr></tbody></table>
<p>26 février 2007</p> <div><table><tbody><tr><td><a href="http://www.outil-referencement.com/blog/index.php/349-graphiste"><img src="http://www.outil-referencement.com/notebook/img?src=http%3A%2F%2Fwww.outil-referencement.com%2Fblog%2Fimages%2Fguide-graphisme-web.jpg&ct=11101e417b1" height="116" width="150"></a></td><td>Il est facile d'identifier en quelques secondes un site appartenant à la "mouvance du web 2.0" grâce à des couleurs, des styles et des formes assez caractéristiques. Voici un petit guide dédié aux graphistes du "web 2.0".</td></tr></tbody></table></div> <div>
<hr><p>Par Aurélien Bardon : <u>Le petit guide du graphiste web 2.0</u></p>
<p>Nous vous parlons souvent sur ce blog de <a href="http://www.outil-referencement.com/blog/index.php/346-pagerank">pageRank</a>, de <a href="http://www.outil-referencement.com/blog/index.php/Referencement">référencement</a> et autres <a href="http://www.outil-referencement.com/blog/index.php/Google">originalités googleliennes</a>. Voici donc un billet qui sera susceptible d'intéresser un peu plus les graphistes et web designers.</p>
<p>Dans un précédent billet intitulé <a href="http://www.outil-referencement.com/blog/index.php/312-icones-gratuites-photo-libre-droit">Icônes gratuites, photos libres de droit et kits graphiques pour site Web</a>, je vous proposais une liste de ressources pour illustrer vos sites web. J'ouvre donc une nouvelle fois mes marques pages, pour cette fois-ci partager une série de liens vers des sites divers et variés en rapport avec le webdesign.</p>
<ul>
<li><a href="http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without">53 techniques CSS sans lesquelles vous ne pouvez vivre.</a> : Un excellent article qui présente un grand nombre de techniques.</li>
<li><a href="http://wiki.media-box.net/documentation/css">L'ensemble des propriétés CSS</a> : Toujours très pratique d'avoir ce lien sous la main en cas de doute ou d'une petite panne de mémoire.</li>
<li><a href="http://www.cleancss.com/">Optimiser votre code CSS</a> : Condensez votre code CSS automatiquement.</li>
<li><a href="http://blog.html.it/layoutgala/">Template Full CSS</a> et<a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS"> gabarits CSS</a> prêts à l'emploi. Utile pour ne pas avoir à refaire systématiquement la structure globale d'un site.</li>
<li><a href="http://www.wikistuce.info/doku.php/favicon">Générateurs de favicons ici</a> et <a href="http://www.html-kit.com/favicon/test/">là (en anglais)</a> : Créez un favicon à partir d'une image en quelques secondes.</li>
<li><a href="http://www.ressourceweb.com/">Tutoriaux photoshop</a> et <a href="http://tutmarks.com/">tutoriaux divers pour graphistes</a> : Développez vos compétences ou trouvez le moyen de réaliser par vous même un élément graphique.</li>
<li><a href="http://css.alsacreations.com/">Tutoriaux CSS</a> : Parfait pour débuter en CSS. Les tutoriaux sont très bien écrits et très compréhensibles.</li>
<li><a href="http://jigsaw.w3.org/css-validator/">Validateur CSS</a> : Votre CSS respecte-t-il les recommandations du W3C ?</li>
<li><a href="http://www.lipsum.com/">Lorem Ipsum</a> : Générer du texte automatiquement pour remplir votre design et mieux imaginer le rendu final de vos réalisations.</li>
<li>Les Boutons : <a href="http://www.toprankresults.com/tools/RSS-buttons.php">Générateur de boutons RSS</a>, participez à la promotion du code propre et valide en affichant les <a href="http://www.net-pratique.fr/ressources/iconvalid.html">boutons de type "Valide"</a>, ou créez automatiquement vos propres boutons aux mêmes formats sur <a href="http://www.lucazappa.com/brilliantMaker/buttonImage.php">lucazappa</a> ou <a href="http://www.kalsey.com/tools/buttonmaker/">kalsey</a>.</li>
<li>En manque d'inspiration ? Cette page propose des <a href="http://www.fontshop.com/fontfeed/archives/web-20-logos.cfm">logos de sites connus très web 2.0</a></li>
<li><a href="http://webdesignfromscratch.com/web-2.0-design-style-guide.cfm">Le guide du design 2.0</a> : Quels sont les éléments caractéristiques d'un design web 2.0 ?</li>
<li>Blogs dédiés au design : Le fabuleux <a href="http://www.emob.fr/dotclear/">Emob</a> et l'excellent <a href="http://www.sqliagency.com/blogs/ecreativegarden/">ecreativegarden</a>. A lire sans modération.</li>
<li>Quelles sont les <a href="http://kuler.adobe.com/">couleurs du web 2.0</a> ? Voici une autre <a href="http://www.modernlifeisrubbish.co.uk/article/web-2.0-colour-palette">palette de couleurs 2.0</a></li>
<li>Comment <a href="http://www.webmaster-hub.com/outils/color.html">harmoniser les couleurs</a> entre elles ? Quelles sont les <a href="http://www.smartpixel.net/chromoweb/uks/a2gb.html">combinaisons de couleurs idéales</a> ?</li>
</ul>
<p>Difficile de faire un article ayant pour thème le web design et le web 2.0 sans parler des sites de référence. A vos marques pages !</p>
<ul>
<li>Le prestigieux <a href="http://www.csszengarden.com/tr/francais/">CssZenGarden</a>, véritable terrain de jeu et de démonstration pour les professionnels du CSS.</li>
<li>Le site <a href="http://www.alsacreations.com/">Alsacreations</a> qui prône le respect des standards du web.</li>
<li>Une <a href="http://forum.alsacreations.com/">communauté de graphistes et professionnels du web</a> pour répondre à toutes vos questions.</li>
<li>Si il n'y a qu'un lien à retenir pour les amoureux du Flash, il s'agit certainement du <a href="http://www.flashxpress.net/">portail FlashXpress</a></li>
<li>La bible française des <a href="http://pompage.net/">articles consacrés au web design et au CSS</a> : Pompage.net</li>
<li>Le site de référence sur <a href="http://openweb.eu.org/">les standards et l'accessibilité du web</a> : Open Web</li>
<li>Une monstrueuse liste de ressources : <a href="http://www.alvit.de/handbook/">Web Developer's Handbook</a>.</li>
<li><a href="http://alistapart.com/topics/design/">117 articles consacrés au Web Design</a> sur alistapart.com</li>
</ul>
<p>Bonne lecture et n'hésitez pas à laisser dans vos commentaires des liens vers vos ressources préférées.</p>
<p>Un <a href="http://www.outil-referencement.com/blog/index.php/349-graphiste">article</a> du <a href="http://www.outil-referencement.com/blog/index.php">Blog Outil Référencement</a></p> <div>
<p><a href="http://www.outil-referencement.com/blog/index.php/210-aurelien-bardon"><b>Aurélien Bardon</b></a></p></div></div></blockquote>Henri