Lorsque l’on a l’habitude de créer de beaux design en HMTL / CSS, coder un e-mail en tableau fait une drôle d’impression… Pour vous aider, voici une liste de ressources avec les bonnes pratiques et des galeries pour votre inspiration.

Une chose importante à prendre en compte lors de l’intégration d’un e-mail, 99% de votre CSS ne sera pas pris en compte par les différentes webmail. Alors on oublie les background-images ou encore la mise en page en div… Bienvenu sont les balise <table>, <tr>, <td> pour mettre en forme vos e-mail. Bien avant d’intégrer le design, il convient de créer le message adéquat pour votre  campagne de newsletter. Cet article : faire une newsletter, vous donnera quelques conseils de base. Pour aller un peu plus loin Smashing Magazine propose un petit guide et des exemples.

Une fois les bonnes pratiques saisies, il ne reste plus qu’à créer la maquette idéale pour votre projet. Pour vous aider, il existe bien évidemment de nombreuses galeries comme celle-ci :

Maintenant votre e-mail est tout beau tout chaud dans un fichier .psd. Reste encore à le coder…Pour aller plus vite pourquoi pas se baser sur des templates déjà fait ? Utilisez par exemple ceux de sites spécialisés :

Pour les plus pressés, offrez vous un template sur ThemeForest :

L’écriture pour le web constitue la base de tout contenu de site qui se respecte. De très nombreuses fois traité, il en reste pas moins un des points essentiel dans la vie et dans l’évolution du site web. Je vous propose des ressources pour créer un contenu adapté à vos internautes.

Que ce soit vos lecteurs, votre cible, vos clients, n’oubliez jamais : « Content is King« ; Le contenu est roi, aussi il faut savoir que les internautes ne lisent pas sur le web tant qu’ils n’ont pas trouvé ce qu’ils cherchent…Hélas je ne vous apprend rien mais il est tout de même intéressant de faire le point pour garder quelques principes de base en tête.

Les internautes ciblent les mots clés en scannant simplement la page. Pour faciliter la lecture, rien de tel que du texte en gras, des titres bien lisibles et des parties bien segmentées. Malheureusement il n’y a pas que ça pour répondre aux problématiques de lecture et d’écriture sur le web. Comment améliorer la lisibilité et l’accès au contenu ? Pour résumer la situation de manière claire, concise et lisible sur le web, je vous propose de découvrir très bon diaporama réalisé par Luc Legay formateur de community manager sur Paris :

Des ressources incontournables (en anglais et français) :

• Une référence dans la stratégie éditoriale : www.ecrirepourleweb.com
• Useit.com
• Business Garden : bonnes pratiques pour écrire pour le web
• Instant Shift : 20 conseils pour gérer un blog de graphisme
• RichWork : Comment bien écrire un article de design
• Tutorial 9 : A quelle fréquence devez vous poster des articles ?
• Six Revision : Comment écrit un incroyable article ?

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

On a souvent besoin d’un coup de pouce pour trouver une idée lors du développement d’un site. Pour vous donner des astuces, je vous propose une sélection de tutoriels et de ressources orientés développement, webdesign et notament Jquery. A tester et à garder sous le coude !

1. Codez votre premier plug-in Jquery :

2. Une infobulle Jquery pour vos images :

3. Des boutons animés à l’aide de sprites et Jquery (partie 1 : Photoshop) :

4. Des boutons animés à l’aide de sprites et Jquery (partie 2 : Code)

5. Comment faire une montre en CSS et Javascript :

6. Faire son propre slider Jquery et XML :

7. Faire un beau formulaire à l’aide de CSS3 :

8. Comment coder un site en XHTML à partir d’un PSD :

9. Ressource : un agrégateur RSS en PHP :

10. Ressource : une galerie d’images avec Jquery :

Apprendre à créer son propre webdesign à l’aide de tutoriels, c’est super ! Mais il n’est pas toujours facile de trouver d’en trouver de qualité… Je vous concocte une fraîche sélection de 9 nouveaux tutoriels de webdesign sous Photoshop !

Les tutoriels proposé sont en anglais…Au cas la langue poserai problème, je vous conseille cette liste de traduction des outils de Photoshop.

1. Comment créer un design pro :

2. Comment créer un design audacieux et vibrant :

3. Comment créer un design propre et professionnel :

4. Design de portfolio noir et blanc :

5. Comment créer un design propre [Très détaillé !] :

6. Comment créer un portfolio propre et minimaliste :

7. Faire un design de portfolio :

8. Créer un design bleu et épuré :

9. Créer une interface web pour un jeu de PS3 :

En bonus, un tutoriel pour créer un template de site en utilisant HTML5 et CSS 3 :

N’hésitez pas à partager vos liens pour compléter la liste !

Aujourd’hui je vous propose une sélection de 10 tutoriels pour vous perfectionner sur le logiciel vectoriel d’Adobe.

1. Comment créer une icône « premiers secours » :

2. Créer une « surface pointillée »  :

3.Créer un style pour une police :

4. Créer une illustration de fraise chocolatée :

5. Comment dessiner une mascotte de koala :

6. Comment créer un dessin d’ours pour un tee-shirt :

7. Créer une illustration de toaster :

8. Créer le logo d’Abduzeedo 2010 :

9. Créer un vaisseau vectoriel :

10. Créer une illustration rétro Space Invaders

Allez au boulot ! Et bonne chance ;-)

Pour avoir de l’inspiration, apprendre un peu de technique ou tout simplement ne pas perdre de temps sur un projet, un fichier .PSD est souvent bienvenu. Je vous propose une liste de sites de qualité pour trouver de bons fichiers Photoshop gratuit.

Il existe des centaines de sites sur le web où mettre la main sur des .PSD. Les fichiers de qualités deviennent de plus en plus payant (via un compte Prenium sur le site en question). Voici une liste non-exhaustive de sites qui offrent régulièrement des fichiers .PSD.

PSD Galaxy :

Deviant Art :

Bonne référence, avec en cherchant bien sous quelque perles graphiques pour vos projet et de nombreux fichiers utiles.

PSD Tuts :

Une référence qu’on ne présente plus. Tutoriels et PSD.

Officials PSDS :

Download PSD :

Free PSD Files :

PSD Graphics :

PSD List :

Aujourd’hui sur Webdesigner Trends, une sélection de 10 nouveaux tutoriels du web pour créer un webdesign sous Photoshop !

On commence tout de suite avec un tutoriel de webdesign d’hôtel/restaurant, élégant et rustique :

1. Créer un webdesign d’hôtel/restaurant :

2. Créer un webdesign de portfolio :

3. Créer un webdesign d’architecte ou de vendeur de bien immobilier :

4. Créer un webdesign minimal et brillant :

5. Créer un webdesign grungy et translucide :

6. Comment créer un webdesign de portfolio :

7. Apprenez à créer un webdesign dans un style 3D :

8. Créer un webdesign de portfolio élégant :

9. Créer un webdesign de portfolio sur un fond bois :

10. Créer un thème Wordpress complet :

Mention spéciale pour ce tutoriel vidéo de chez Grafikart, vraiment complet et bien réalisé ! En plus en français, alors régalez vous !

Depuis cet été, les tutoriels sur le CSS 3 se font de plus en plus nombreux. Découvrez un tuto proposé par Tutorialzine pour créer une galerie avec CSS3, PHP et Jquery.

Je ferai prochainement un article pour vous apporter des éléments de réponses sur le développement de CSS 3 et son utilisation à l’heure actuelle en terme de webdesign. En attendant, je vous invite à découvrir le tutoriel de Tutorialzine (en anglais…) et à mettre les mains dans le code !

Je vous propose aujourd’hui une compilation de 10 tutoriels de qualité pour créer un design de site sous Photoshop !

Design pour un site de groupe de musique

Design simple et moderne

Créer un élégant portfolio

Créer un design de site graveleux

Créer un design de site nuageux

Créer un design de site vintage

Créer un design de site inspiré d’Apple

Créer un design de site professionnel

Créer un design de site coloré

Créer un design pour Wordpress