7 étapes pour créer efficacement

Lors de mes débuts comme designer web, j’étais tellement impatient de pouvoir sauter dans le vif du sujet que je débutais directement à l’étape du design. Sans trop savoir par où commencer, je perdais un temps fou devant une page blanche ou a créé des éléments graphiques inappropriés. Donc, la préparation d’un projet est primordiale!

Voici la solution d’un processus créatif efficace en 7 étapes faciles…

1 – Brief créatif

Un brief créatif est avant tout un résumé des besoins du client pour obtenir toutes les réponses aux questions qui nous seront nécessaires pour orienter la création du site web. Vous pourrez éclaircir certains points avec le client et discuter en détail de sa clientèle cible, du positionnement de sa marque, de ses objectifs, etc. De cette façon, au retour de votre rencontre vous pourrez mettre au claire ces informations et définir le ton créatif nécessaire pour ce design web (brainstorming). Pour simplifier et accélérer cette étape, vous pouvez envoyer un document Word avec toutes les questions nécessaires au client avant de débuter le mandat.

Comment rédiger un brief créatif sur le Blogue de Pixenjoy

2 – Debriefing et Brainstorm

Ce que j’aime bien faire au retour d’une rencontre c’est de facturer le client! Non, sérieusement il est bien de faire un debriefing au retour d’une rencontre et mettre au propre immédiatement vos notes. Personnellement, je préfère envoyer un courriel au client résumant la rencontre et qui donne un aperçu des stratégies qui seront mises en place pour résoudre leurs problèmes ou atteindre leurs objectifs.

Par la suite la partie intéressante de la création débute avec le brainstorm. Trouver une ambiance confortable et gardez-vous du temps de libre sans téléphone, ni courriel et avant tout sans stress. Un peu de musique lounge ou ambiante peu aider. Si vous n’aimez pas ces styles musicaux, privilégier plutôt une musique calme et peu rythmée qui ne troublera pas votre concentration.

Musique ambiante et lounge :

• Mountain Chill
• LaWebRadio.com
• Live365

3 – Prototype et Wireframe

Cette étape est essentielle surtout pour un site de plus grande envergure. Vous sauverez un temps fou de production dans Photoshop puisqu’un montage wireframe est ultra rapide et vous permettra d’essayer plusieurs dispositions d’interface utilisateur et de mise en page.

Surtout si vous utilisez des applications en ligne, il vous sera vraiment simple de partager vos wireframes avec vos collègues ou clients.

Applications en ligne pour créer des prototypes de site web :

• MockingBird
• Balsamiq
• Protoshare

4 – Recherche de palettes de couleurs

La recherche de palettes de couleurs donnera le ton et l’atmosphère à votre design web. En cas de manque d’inspiration ou pour ceux que le choix de couleurs n’est pas leur dada, plusieurs applications en ligne vous aideront.

Applications en ligne pour la recherche de couleurs :

• Kuler
• Colour Lovers

5 – Recherche photos

Cette étape pourrait aussi se nommer shooting photo, mais vu le budget souvent limité de certains clients, on doit se rabattre la plupart du temps sur des banques d’images libres de droit. En créant un lightbox (dossier d’images) vous pouvez réunir toutes vos photos pour un client en particulier. Si vous utilisez des sites web dans le genre de istockphoto.com, vous pouvez aussi rechercher les lightbox d’autres utilisateurs. Si par chance vous trouvez un lightbox de designer graphique qui avait un sujet semblable au vôtre, vous pourrez sauver du temps de recherche considérable.

Collections de photos libres de droit en ligne :

• iStockphoto
• Getty Images
• Dreamstime

6 – Production graphique

Ah voilà l’étape tant attendue! La magie s’opère lorsqu’on fait l’amalgame du brainstorm, du wireframe, des couleurs et des photos. La justesse et le bon dosage de tous ces éléments constitueront enfin un design web efficace. J’adore utiliser Photoshop pour le montage d’un design web, mais d’autres préféreront utiliser Fireworks, mais ça, c’est un autre débat!

Le fabuleux réseau d’Envato vous offre des tutoriels bien ficellé avec PSD Tuts et Web Tuts. Mais pour ceux qui préfère la langue de Molière il y a AlsaCréations et d’autres que vous pourrez surement partager avec nous, puisqu’à première vu la liste de tutoriels en Français dédiés uniquement au design web semble plutôt limité.

7 – Programmation & intégration web

À l’occasion la qualité à tendance à baisser à cette étape du projet, pour diverses raisons. Surtout si l’intégration web et/ou la programmation sont effectuées par un programmeur qui n’a aucune notion de design web. Si c’est le cas, il faudra appliquer une direction artistique plus accrue.

Tutoriels français sur la programmation et l’intégration web XHTML et CSS

• Babylon Design
• Alsacréations

Voilà! Selon moi ce sont les 7 étapes requises pour créer un design web efficacement.

Et vous, prenez-vous le temps de bien préparer vos créations web? Est-ce que vous auriez d’autres étapes de production qui pourraient aider au processus de création?