Pour mener à bien un projet, un graphiste ou une équipe plus généralement doit s'organiser, et ce pour tous les cas de figure. Sans organisation on ne fait pas grand chose, ou alors difficilement. C'est pourquoi je vous propose aujourd'hui un "kit du petit webdesigner" destiné principalement aux gens du web (développeurs, graphistes, etc.). Il regroupera des services cités ici précédemment, mais un petit regroupement ne ferait pas de mal !

Un outil de GTD

Le GTD, comme je l'ai indiqué ici, est un merveilleux système de gestion personnelle. Il sera donc très apprécié dans un projet, afin de s'y retrouver un peu pour soi ou même pour d'autres personnes. Pour cela, des logiciels comme The Hit List et Things (sur mac) ou Nirvana (en ligne) peuvent parfaitement convenir de par leur ergonomie et leur interface magnifique. En savoir plus.

Un outil de prototypage graphique

Afin de présenter un peu les idées ressorties des échanges avec le client, un outil de prototypage graphique n'est pas négligeable, pour éviter les croquis douteux ou encore les e-mails imprécis. Hotgloo ou Mockflow peuvent très bien faire cela. Le premier gère parfaitement la collaboration, parfait pour une équipe constituée de plusieurs graphistes. L'autre est plus spécialisé dans le wireframing pur, ce qui le rend plus puissant. C'est selon vos attentes ! En savoir plus.

Un gestionnaire de projet

Le gestionnaire de projet est devenu un outil presque indispensable pour un projet web. Du moins, il est préférable d'utiliser un outil comme Assembla ou Lighthouse (par exemple) pour gérer l'avancement complet et détaillé du projet, pour ne pas avoir d'imprévus ou d'oublis ! En savoir plus.

Une plateforme de retour client

L'étape clef d'un projet web, c'est quand même l'avis du client. Au lieu de décrire une interface par e-mail en étant pas très clair, pourquoi ne pas utiliser Upshot ? Avec sa fonctionnalité avancée de retour client, il vous permettra de voir exactement ce qui cloche ou qui dérange, et surtout, précisément où. En savoir plus.

Un outil de facturation

Enfin, l'étape qui fâche. Mais comme tout travail mérite salaire, il faut bien un peu d'organisation pour gérer ses factures et ses paiements. Rien de plus catastrophique qu'une comptabilité mal organisée ! Pour cela, il est conseillé d'utiliser un outil de facturation comme The Invoice Machine, Ballpark ou encore Harvest. En savoir plus.

UpShot est un service assez sympathique et pratique pour les webdesigners et graphistes en général. Il vous permettra de la manière la plus simple du monde de proposer à votre client une façon de donner son avis, clairement et sans surprise.Par exemple, au lieu de dire, "en haut à droite sur le lien survolé [...]", il clique sur l'image, sur la zone qu'il souhaite et insère son commentaire, positif ou négatif. Cela semble bête mais ça change la vie !

De plus, la mise en collaboration permet de mettre au courant tous les membres de l'équipe pour prévoir les imprévus, par exemple. Enfin, c'est un service made in France et c'est gratuit (30 UpShots), sinon, ce n'est pas très cher pour le service proposé (9€/mois – 1 personne – 10 go de stockage / 29€/mois – 5 personnes – 100 go de stockage). Pour une équipe de graphistes par exemple une agence de design web, ça peut être parfait. Mieux, il parait même que c'est gratuit pour les étudiants (je vous dis, c'est l'outil idéal !)

Si, dans la vie de geek de tous les jours vous êtes féru de caractères et que vous ne vous souvenez pas de tous les raccourcis les accompagnant, un service nommé CopyPasteCharacter vous permettra de les copier et de les coller le plus simplement du monde. Bon, il ne faut pas se leurrer, il n'y a pas tout. Mais une grande partie de ceux que l'on utilise quotidiennement sont proposés, le tout englobé une interface minimaliste, assez sympathique, au final.

Le système est simple. Vous cliquez sur le caractère que vous souhaitez et automatiquement, ce dernier va se copier gentiment dans votre presse papier. Vous n'aurez donc plus qu'à coller via la commande Ctrl+V ou Cmd+V. Simple non ? Cela marche aussi sur tous les mobiles permettant de copier/coller et d'aller sur un site internet.

Les grilles de mises en page ont été inventées pour faciliter la tâche des designer et des graphistes mais aident aussi à avoir une mise en page cohérente et assez ordonnée voire linéaire. Les utiliser sur logiciel de PAO est une chose, l'appliquer au développement du site en est une autre ! C'est pourquoi Grid System Generator à vu le jour !

Il vous permettra, après insertion des informations nécessaires (nombre de colonnes, taille du site, marges & gouttières, ect.) de vous générer un fichier css type selon la librairie css que vous utiliserez pour vos grilles de mise en page. Sont disponibles 960.gs (la plus connue et utilisée), Golden Grid, 1kb grid et Simple Grid System. Vous n'aurez ensuite qu'à télécharger les fichiers générés, ainsi que d'appliquer les styles à votre structure html et le tour est joué !

Si vous avez (ou que vous allez avoir) un site web à référencer avant de le lancer et que vous souhaitez tenir vos utilisateurs au courant, les services suivants seront faits pour vous. Ils vous permettrons de créer une simple page d'attente comportant un court texte d'information, un abonnement à une newsletter, mais rien ne vous empêchera d'y insérer votre propre code html pour un widget twitter ou un petit slideshow.

LaunchSplash répond très bien à la demande et vous permettra de réaliser votre page d'attente de manière très simple et surtout gratuitement en insérant vos informations ainsi qu'en téléchargeant les fichiers générés. Un aperçu est disponible pour se faire une idée où bien entendu, le design peut être personnalisé à souhait par vos soins.

WebResources Launch Page est beaucoup moins beau mais proposera pas mal d'options entre autre une newsletter en ajax, une compatibilité entre les navigateurs et une gestion des e-mails récupérés via un fichier .txt. C'est gratuit, en anglais, simple et plutôt abordable pour des connaissances réduites dans les langages de programmation.

LaunchSoon est lui payant mais proposera une grande quantité d'options. Je trouve ça plutôt pas mal mais pour une simple page d'attente, faire payer me semble assez absurde. Cependant, une interface complète en ajax sécurisée et munie de vérifications multiples sera proposée. Avis aux riches…

Cependant, si vous avez quelques connaissances en webdesign avec Photoshop, vous pourrez créer une page d'attente très rapidement et l'intégrer ensuite sans trop connaissances poussées (juste du css/xhtml voire un peu d'ajax pour quelques effets).

Lorsque l'on réalise ou que l'on finalise son projet (web, design ou autres), une étape clef n'est pas à rater, il s'agit des avis, des retours, couramment appelés feedbacks. On pourrait le faire via e-mail ou bouche à oreille, mais il existe aussi des méthodes plus larges proposant de donner son avis. C'est pratique, efficace, souvent gratuit, bénéficiaire, mais cela permet surtout de connaître les manques ou de retravailler les superflus.

Cette phase peut se dérouler en court terme pour une dernière phase de tests (par exemple) ou a long terme en laissant les avis ouverts à n'importe quel moment du projet. Pour répondre à ces problématiques, plusieurs services ont vu le jour sur la toile.

GetSatisfaction vous permettra de répondre à cette demande de manière très simple : vous créez votre page projet, vous partagez le lien et les avis peuvent être donnés ! C'est une plateforme très complète et plutôt efficace car elle proposera à l'utilisateur de poser une question, de reporter un problème, de proposer une idée ou simplement d'encourager voire même de féliciter le projet ou la société.

UserVoice proposera aussi une gestion des feedbacks mais d'une manière différente : l'utilisateur pose sa question, puis l'administrateur et les autres utilisateurs approuvent ou déclinent la proposition. Un classement par top des idées, populaires, nouvelles, acceptées, complétées et refusées est mit en place pour une meilleure vision et un choix dans les propositions.

CrowdSound réagit semblablement à UserVoice, à une exception prêt : un widget est disponible et insérable sur un site, proposant aux utilisateurs de voter pour les avis afin de les mettre en valeur ou de dénoncer leur inutilité. Une quantité de fonctionnalités alléchantes sont disponibles pour mieux procéder à cette étape assez importante.

fivesecondtest est déjà un peu plus ciblé car il proposera aux designers de tester leurs interfaces en situation idéale : les testeurs auront 5 secondes pour cliquer sur les zones les plus importantes et les plus visibles selon eux, ce qui définira si la maquette est efficace ou non. L'expérience est à faire et peut rapporter gros, de par la simplicité et le concret du test.

Dans la même lignée que Doctype, jQueryExchange propose, comme son nom l'indique, des échanges entre les utilisateurs novices et plus expérimentés. Vous pourrez poser une question purement technique ou plutôt à titre d'information, en général une réponse claire et précise sera proposée. La communauté et le partage des connaissances fera ici de jQueryExchange un lieu d'aide rêvé pour les codeur jQuery.

N'hésitez pas à poser votre question, je pense que c'est avec plaisir que les autres utilisateurs répondront ! Cependant, petite précision… étant donné que le site en totalement anglophone, il est plutôt conseillé de poser votre question en anglais, sous peine de ne pas vous faire comprendre. Petit inconvénient pour ceux qui ne sont pas à l'aide avec cette langue, tout de même.

Avoir un bel outil clair et intuitif pour gérer ses factures et la comptabilité de son projet, c'est une chose qui devait être pensée depuis des années, depuis le début d'ailleurs. Qui aime trainer et chercher dans les milliers de papiers pour retrouver un petit devis ou une petite facture ? A mon avis personne, à moins d'avoir une gestion un minimum organisée, ce qui n'est a priori pas le cas de tout le monde…

Pour remédier un peu à ce soucis, des outils ont germés sur la toile, dans le but de gérer de manière claire et simplifiée sa comptabilité, du moins, de son entreprise ou de son projet.

The Invoice Machine est (très) utile uniquement si, comme son nom l'indique, vous souhaitez générer des factures pour vos clients. Le grand intérêt est d'intégrer à sa facture les tâches effectués, qui déterminent le prix total de la prestation, à un montant équivalent au nombres d'heures passées, le tout en détails. Le service est clair, de qualité et surtout très complet. Je vous invite à tester la version gratuite pour vous faire une idée.

Ballpark propose un service similaire à The Invoice Machine, mais y ajoute des options en plus comme la communication entre des membres d'un projet et le(s) client(s) ainsi qu'un envoi d'estimations, un peu comme un devis : vous y détaillerez vos tâches puis le nombre d'heures estimées. C'est mieux qu'un pdf fait en vitesse à envoyer par mail (sans oublier de l'ajouter en pièce jointe) !

Pour le coup plus gai dans l'interface mais un peu moins développé dans les fonctionnalités de génération de factures, Blinksale remplira cependant bien son rôle : vous y insérez vos tâches et leurs prix, les taxes s'il y en a et vous envoyez tout ça ! Mieux, vous pourrez l'intégrer à l'outil de gestion de projet Basecamp. Enfin, les factures seront personnalisables en CSS, de quoi parfaire votre identité visuelle.

Trouver un job dans le web n'est pas une chose très facile, surtout quand on a un but et des attentes très précises. Je vous propose 2 services qui pourront vous aider dans cette tâche assez lassante.

L'un est plutôt reconnu et assez réputé, il s'agit de la recherche d'emploi créée par Alsacréation. Que vous soyez développeur, intégrateur, chef de projet, webdesigner ou encore commercial, cet outil vous permettra de consulter des offres d'emplois dispatchées dans toute la France, que vous cherchiez un stage, un CDD, un CDI ou des missions.
L'autre est moins connu étant donné qu'il est sorti il y a quelques semaines de là, j'ai nommé Jobs-graphistes. Il regroupera une tripotée d'offres d'emplois concernant les graphistes. Toutes les facettes de la réalisation graphique d'un site web sera proposée ici, comme l'intégration, le webdesign, l'illustration, le flash ou plus globalement, la direction artistique.

J'espère que ces services vous aideront à trouver un travail dans ce domaine assez intéressant ! Pour ma part j'ai trouvé de nombreuses offres de stages répondant à mes attentes, pourquoi pas pour vous ?

Les expressions régulières appelées plus couramment regex ne sont pas très simple à manier. Pour remédier un peu à ce problème, un service très pratique est disponible : HiFi Regex Tester. Il vous fera découvrir un tas d'astuces et d'options disponibles à la conception d'une expression régulière, mais il vous permettra surtout de tester ce fameux bout de code en direct ! Vous tapez votre expression et au fur et à mesure de son avancement, le texte proposé (ou que vous insérez) plus bas réagit en fonction.

C'est d'une ultime praticité, c'est gratuit, c'est simple, c'est génial. J'en sais désormais un peu plus sur ces affreuses options et lignes de code (sans le gérer à fond pour autant) mais ça aide.
C'est en anglais mais comme on dit, la programmation est universelle, du moins dans le concret, pour les explications il va falloir faire un petit effort…

Pour combler le tout je vous propose une vidéo de l'ami Grafikart qui explique de manière beaucoup plus claire et surtout dans un langage que l'on comprends, les expressions régulières. C'est très clair, et le tout embelli d'un "bel accent du sud". Vous comprendre maintenant ce que veut dire des trucs bizarres comme [-!"#$%&'()*+,./:;<=>?@\[\\\]_`{|}~].

Les deux services que je vous présente aujourd'hui ne viennent pas de sortir mais collent bien ensemble. En effet, ColorSuckr vous propose de chercher une image ayant la même palette chromatique que votre photo et TinyEye, lui, vous donnera la possibilité de trouver une photo identique (ou très très similaire) à la votre.

Les utilisations sont multiples, par exemple chercher une photo ayant la même ambiance colorée afin d'illustrer un livre ou une mise en page, un site, ce que vous voulez, en fait. Ainsi que pour TinyEye, traquer si de vilaines personnes ne vous on pas pillé vos images sans vous en demander votre droit ? Ne voyons pas le mal partout voyons, mais non.

En tout cas, ces deux services proposent une similarité très commode selon les cas de figure et pourront aider dans vos tâches les plus pénibles…

Dans la lignée des services permettant de réaliser de manière très simple un prototype de site web, voici HotGloo. Il vous permettra tout comme Mockflow ou encore LovelyCharts de créer un avant-goût d'une interface web afin de proposer des idées en termes de fonctionnalités et d'éléments présents. Son interface très bien réalisée vous proposera tout un tas d'éléments à placer sur votre maquettes mais aussi ceux de votre choix ; vous pourrez en créer vous même.

HotGloo est un outil vraiment bien développé pour le wireframing (qui je le rappelle est une technique non négligeable qui peut largement aider dans un projet de design de site web) car il possède une gestion des maquettes par projets afin de mieux se repérer, ainsi qu'une gestion des pages… Vous allez me dire que c'est banal mais ce n'est pas présent dans tous les outils de ce genre ! Cela facilite grandement la tâche et vous permettra de prototyper plus qu'une page d'accueil par exemple. Pour combler le tout, une gestion de collaboration est aussi possible avec la possibilité de discuter avec les membres d'une équipe qui verront en temps réel les modifications apportées à l'esquisse. Mieux, le client pourra déposer une note sur un élément qui le dérange ou qu'il désirerait changer.

Je n'en n'ai pas eu l'occasion de l'utiliser sur un projet réel mais ce ne serait pas une mauvaise expérience ! Avis aux amateurs

MooShell est un outil très pratique car il vous permettra d'éditer du code Mootools en ligne, donc sur une seule et même plateforme. Eh oui, je ne suis pas septique aux autres librairies javascript, même si je n'y suis pas très familier. Il peut-être très pratique pour tester un code directement sans passer par les tâches habituelles de ce genre de pratiques comme le développement du code, la sauvegarde, la mise en ligne et le rafraichissement de la page. Ici vous n'aurez qu'à insérer votre code HTML suivi du code CSS pour la mise en page rapide (ou pas), ainsi que du code Mootools, le tout englobé par une zone où le résultat final sera présenté et dans une interface simplissime et plutôt claire.

Une solution semblable à celle-ci est disponible aussi pour jQuery mais de manière logicielle et uniquement sur Windows. Il s'agit de jQueryPad qui est gratuit et qui facilitera grandement le développement en jQuery. A quand une version pour Mac voire même en ligne ? Je trouve que ce genre d'outils sont de plus en plus pratiques et devraient se penser un peu plus, pour réduire les actions et simplifier de plus en plus la tâche des développeurs.

Si vous connaissez des éditeurs en ligne de ce type, pour le HTML, CSS, PHP ou autre, ce n'est pas de refus !

Dans le même genre que Mockflow, voici LovelyCharts, une application pratique et efficace pour créer simplement des organigrammes afin de hiérarchiser des idées ou pour modéliser une interface web, par exemple. Des multitudes de thèmes et de formes personnalisées seront proposées pour un maximum de choix histoire de rendre votre proposition la plus claire possible. Tout comme son concurrent Mockflow, il embarque un outil de Wireframing (moins complet cependant, on excelle pas partout), idéal pour présenter une maquette de site web.

Maaiiiss… le service ne s'arrête pas à ça. Vous pourrez créer un organigramme de réseau ou de personnes (hiérarchie dans un projet ou une entreprise ?), un sitemap ou comment représenter la concordance des pages d'un site internet sous forme graphique… Enfin, un tas de belles choses en gros.

C'est bien évidemment gratuit, avec une option payante tout de même afin d'élargir encore plus les possibilités. Un bien bel outil réalisé entièrement en flash, pour un maximum de maniabilité.

Après une semaine chargée en jQuery, retour à la normale dirons-nous. C'est l'occasion de vous présenter Mockflow, un outil plutôt intéressant car il vous permettra de réaliser des maquettes (c'est le cas de le dire) de votre futur projet de site web. Vous pourrez "créer" une esquisse du design ou de l'architecture de votre projet et ce, avec une grande quantité de ressources fournies très simples de maniabilité.

Bon, il n'est pas à cacher que faire un croquis sur une feuille de papier revient au même, mais par un soucis de clarté, souvent, il est plus agréable de montrer nos idées au client, ce qu'il veut clairement, et réciproquement. Et puis, vous n'êtes pas tout le temps muni d'un scanner et d'un client devant vous, aussi.

Pour combler le tout, c'est gratuit. Alors pourquoi ne pas en profiter dès maintenant, hein ?