32
Tuto photoshop : Créer un formulaire parfait
Voici un tutorial photoshop pour créer la maquette d’un formulaire pour l’ajout de commentaire sur un site Internet. Je fais également un recensement des mauvais points à éviter obligatoirement lors de la création d’un tel formulaire !
Nous allons donc tenter de créer LE formulaire, un formulaire qui rassemble tous les bons points cités ci-dessus, en veillant évidemment à ne pas répéter les erreurs. Bien entendu, je vais appliquer tous ces conseils pour créer une maquette et l’appliquer à Wks.fr
Vous pourrez ensuite utiliser ce tutoriel pour créer vous-même un formulaire parfait pour votre site Internet.
Avant toute chose, je vais maintenant faire un récapitulatif des points à mettre en place pour ce futur formulaire parfait.
Le formulaire doit être identifiable par un gros titre « Ajouter un commentaire » (ajouter une icône pour agrémenter ce titre est tout à fait envisageable voir souhaitable).
Vous devez ensuite créer un formulaire lisible facilement du haut vers le bas. Ainsi veillez à aligner chacun des éléments sur la gauche (l’erreur la plus répandus est l’alignement du bouton de soumission à droite, veillez donc à bien l’aligner sur la ligne de lecteur).
Vous devez également simplifier au maximum le formulaire, dans le but d’y parvenir vous pouvez par exemple optimiser l’espace (en ne perdant pas d’espace vide, comme c’est souvent le cas à droite des champs) et en affichant les libellés directement dans les champs du formulaire.
Vous devez également apporter votre touche design et adapter le formulaire à la charte graphique de votre site Internet, celui-ci se trouvant en bas de page il permettra de rappeler à l’internaute que vous vous trouvez toujours sur le même site 
Pour vérifier cette étape demandez-vous s’il serait possible d’identifier votre site en ne regardant que ce formulaire ?
Afficher un bouton facilement identifiable et cliquable, pour permettre au lecteur de valider son formulaire rapidement.
Pour conclure, plus un formulaire aura été réfléchis plus il donnera l’envie au lecteur de le remplir et donc de poster un commentaire. Sur certaine site le formulaire est un telle corvée que beaucoup regrette d’avoir voulus participer au site. Rendre cette participation agréable fera progresser votre taux de participation de façon incroyable ! Faite le test.
Dans le but d’y parvenir je vous propose maintenant un tutorial pour créer un formulaire parfait, tant au niveau du placement que du design.
Je ne décrirais pas ici le coté programmation et mise en page, je survolerais simplement les étapes nécessaires à la création de la maquette via Photoshop.
ETAPE 1
J’ouvre le logiciel Photoshop puis je crée un nouveau document de la largeur de ma page Internet, dans mon exemple je vais créer la maquette pour wks.fr, je vais donc créer une maquette de 600 pixels de large.
Je place tout en haut le titre de mon formulaire.
ETAPE 2
Puis j’utilise l’outil rectangle arrondie pour créer la base de mon formulaire. Ce rectangle permettra de contenir l’ensemble du formulaire, l’identification se fera ainsi plus rapidement et permettra de bien se rendre compte ou commence et ou se termine le formulaire.
ETAPE 3
Pour créer le premier champ de mon formulaire, j’utilise simplement ce même outil rectangle arrondie et l’outil texte pour simuler le libellé placé à l’intérieur.
ETAPE 4
Je crée un second champ qui symbolise l’état « sélectionné » en effet pour simplifier la saisie du formulaire nous allons modifier le design du champ sélectionnée.
ETAPE 5
Je crée ensuite tous les autres champs du formulaire.
ETAPE 6
J’ajoute en bas de page un bouton de publication qui permet à l’utilisateur de publier son commentaire. Je le crée suffisamment voyant et sexy pour inciter et faciliter l’action de soumission.
ETAPE 7
Je prépare dors et déjà un second bouton pour l’état hover. Pour une optimisation de l’action je choisis le vert qui symbolise la validation.
ETAPE 8
Je vais maintenant ajouter une petite aide à mon formulaire. Ces textes viendront compléter le formulaire et permettront à l’utilisateur de ne jamais se perdre dans son action.
Remarque dans mon exemple j’utilise un style « fait à la main » (handwriter style) qui renforce le coté aide personnalisé.
J’ajoute donc une flèche et un commentaire à la droite de mon premier champs.
Pour information j’ai utilisé ici la police de caractère : « Max’s Handwritin font » téléchargeable sur cette adresse : http://simplythebest.net/fonts/fonts/maxs_handwritin.html
Et le pack de brush :
http://thinkdesignblog.com/120-handdrawn-vector-arrows.htm
http://qbrushes.com/photoshop-abstract-brushes/creative-doodles-photoshop-brushes/
ETAPE 9
Je fais la même chose pour tous les autres champs.
Et voila mon formulaire est maintenant terminé, à la publication de cet article le nouveau formulaire de soumission des commentaires de wks.fr devrait être mis à jour, n’hésité pas à le tester et à poser vos question si vous en avez.
Merci à tous d’avoir lus ce nouveau tutorial sur wks.fr !
Je rappel que cet article est en deux partie, voici le lien pour vous rendre sur la première partie : Les meilleurs conseils par l’exemple pour optimiser son formulaire de soumission de commentaire.
Article publié par Wonka
Vous aimez cet article? Partagez le !
Je suis très humblement le webmaster et le créateur de ce site, vous êtes en ce moment sur ma fiche membre, vous avez la possibilité de m’’envoyer des messages, pour toutes questions n’hésitez pas une seule seconde !
La galerie des membres
Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !
Questions et commentaires, Il y a 26 messages de forum.
Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.
-
23 avril 2009 19:13, par Harry
Bon j’avoue j’écrit juste pour tester ^^’ Mais c’est pas mal ! Merci
Répondre -
23 avril 2009 19:52, par Asti
Merci pour ce tuto !! Mais pourquoi ne pas faire une 2e partie pour coder ce formulaire ?? Ehh oui je galère un peu pour mettre du texte dans les champs directement etc.. (enfin quelques petites techniques qu’il me manque)
Bye !!
Répondre-
25 avril 2009 13:14, par Boon
Pour reproduire ce que fait wonka il a beaucoup de manière mais si tu veut respecter les standards W3C ... Il faut faire :
Bien sur à toi de remplir les class, name et id
Bonne journée
Edit : Bon ben Spip apparemment interprète directement mon code (dangereux !) Si tu es sous Mozilla Firefox surligne en bleu mon champ et fait clic droit : « code source de la sélection » tu aura le code
Sinon sous internet Explorer, il me semble que tu peut afficher le code source aussi ( si c’est le cas fait CTRL + F et recherche exactement :« Le-message-que-tu-veut »)J’espère que tu as compris xD
Voir en ligne : Google :D
Répondre-
25 avril 2009 20:55, par Wonka
Oui je vais peut être créer un article sur la création de formulaire en HTML CSS
Répondre
-
-
-
23 avril 2009 22:12, par athlon64
Franchement trop bidon, y a plein d’espace vide sur la droite et après ça critique à fond les espaces vides dans l’article précédent...
Répondre-
25 avril 2009 20:56, par Wonka
Qui correspond à la sidebar, donc aucun rapport... allez la porte.
Répondre
-
-
23 avril 2009 22:47, par zirkan
Merci pour l’article, il y a de réels bons conseils. Cependant je n’aime pas trop le formulaire du tuto :
- l’écriture à la main apporte un effet sympa d’aide personnalisée mais là il y en à trop et au final ca donne une impression de gribouillage
- le textarea est trop large
- la taille du texte du bouton pour soumettre le formulaire est trop petite comparée à la taille du bouton lui-même
- il aurait été possible de personnalisé un peu plus. Comme mettre un icône avec le titre (surtout que tu dis que c’est « tout à fait envisageable voir souhaitable ») ou encore donner un reflet au champ du formulaire.
Personnellement je trouve le formulaire sur lequel je suis en train d’écrire en ce moment 10X mieux que celui du tuto. Il est vraiment beau et si tu remarques tous les points négatifs ci-dessus sont corrigés.
Sinon premier message sur ce site, j’en profite pour dire que ca fait un moment maintenant que je viens régulièrement et j’accroche vraiment, continue. Et si possible essaye de faire plus de tuto niveau avancé... même si c’est plus dur c’est tellement agréable de voir le résultat une fois terminé.
Répondre-
25 avril 2009 20:58, par Wonka
Et oui je pense tout pareil ! Et oui j’ai corrigé tous ces problèmes pour publier un nouveau formulaire tout beau
Mais vous pouvez vous en inspirer pour créer le votre !Merci en tout cas pour ce commentaire fort intéressant !
Répondre
-
25 avril 2009 09:48, par Valbuena72
Hello, peut etre que ça fait gribbouli mais n’empèche il est pas mal au pire les aide vous les mettez en rollover quand l’utilisateur rentre dans un champ par exemple merci wonka
Répondre -
26 avril 2009 16:42, par MØG
Salut,
Répondre
Un article sur le codage HTML/CSS serais bien venu. Sinon dans le même genre il peut y avoir : Créer un formulaire de contact mail. -
12 mai 2009 05:13, par Riad Marrakech
Sur le pseudonyme, email et site essai de le rendre plus complet genre : onfocus=« if(this.value==’Votre pseudonyme’) this.value=’’ ; » pour ne pas réécrire tout mon nom en cas de faute de frappe :D
le CSS hover sur IE6 malheureusement ne marche que sur des balise donc faut passer par javascript onmousehover.
Si non le design est parfait bravo
Répondre -
9 novembre 2009 18:19, par Riad marrakech
Merci pour le formulaire il est simple et j’ai bien aimé l’écriture à la main.
voir en ligne :
Répondre -
18 novembre 2009 11:34, par crea-fr
La personnalisation des formulaires a malheureusement certaines limites avec du HTML et CSS, surtout que l’aspect diffère par défaut selon les navigateurs !!! Un petit lien que je pense très utile (utilisation de javascript pour certaines personnalisations) : http://j-willette.developpez.com/tutoriels/javascript-css/formulaire/. Sinon même si je ne suis pas fan de « l’écriture à la main », je reconnais que l’idée est originale.
Répondre -
27 novembre 2009 19:28, par ZeЯoW
Salut, C’est mon premier message alors que cela fait bien longtemps que je viens sur ce joli site, je l’admet ^^ J’en profite donc pour (moi aussi vu que j’en ai vu d’autres) te féliciter et t’encourager pacque tu donne, je pense, beaucoup d’inspiration aux gens
Ce tutoriel j’en ai besoin car je vais postuler pour une école d’informatique et pour mon dossier j’ai fais deux sites dont l’un ou je voudrais mettre ce joli formulaire de commentaire que je viens de créer grâce à ce tuto ! =]
Un petit cours sur le code HTML serait le bien venu vu que moi je galère pour l’enregistrement des commentaires.. ><
Sur ce, bonne continuation !
Cordialement, ZeЯoW.
Répondre-
27 novembre 2009 19:41, par Wonka
Oui mais le problème c’est que ce n’est pas vraiment le but de ce site, le HTML
je pense à faire un second site pour l’apprentissage du HTML, mais d’une façon ou d’une autre se site serait payant ... !En tout cas merci pour ce premier commentaire, et j’espère que ce ne sera pas le dernier.
Répondre-
27 novembre 2009 20:59, par ZeЯoW
Oui je comprend mais ca serait un plus le HTML effectivement ^^
Payant... humm.. moue ! :s
Et encore merci
Répondre -
13 août 2011 19:50, par Albino
Payant.. En starpass pour les jeun’s :D ?! Sinon je serais ravi d’apprendre l’HTML ! Merci a toi pour tous ces tutos
Répondre
-
-
-
9 janvier 2010 02:45, par Evy
Au vu de certains commentaires que j’ai lu ici plus haut je pense que certain ne se rendent pas compte de la masse de travail que c’est que de mettre des tuto de ce style ! Pour un des messages plus haut de zirka qui trouve le formulaire « pas beau » et bien qu’il fasse son propre tuto avec un « beau » formulaire ! car evidemment qu’il ne faut pas faire un copier coller ! mais plutot s’inspirer de ces tutos en apportant sa propre touche finale !ou encore quand il ecrit que tu aurait dut mettre une icone avec le titre ou un reflet au champ du formulaire, puisque tu as dit que c’etait tout a fait envisageable, je crois qu’il n’a pas bien compris que tu ne vas pas tout macher ! que c’est a nous de le rajouter si on le souhaite et de mettre tout ceci a notre « sauce » !Ou encore de sortir qu’il serait bien de faire des tuto plus « avances ».. et bien qu’il les fasse « lui meme les tutos »avances" peut etre comprendra t’il la masse de boulot que c’est ! vraiment certain me scotch ! tu t’embete a faire des tutos juste pour apporter ton aide GRATUITEMENT et certain trouvent le moyen de critiquer sans meme chercher a comprendre. Quand tu dis que tu feras peut etre un autre site avec code HTML et qu’il sera payant, je comprend. Enfin voila j’ai dit ce que j’avais a dire car le manque de respect de certain ca ne passe pas ! merci pour tout tes tutos qui m’aide beaucoup me donnant des idees dans mes realisations.
Répondre -
13 septembre 2010 14:26, par sni_p
je me demande comment insérer ce formulaire dans une page
Répondre -
30 août 2011 15:27, par roberts
Bonjour,
Je ne comprends pas : ce qui est décrit ici est la realisation graphique d’une image style formulaire. Comment à partir de cette image obtient-on le HTML et les script du formulaire pour les ajouter sur une page web J’ai du zapper une étape.
Roberts
Répondre-
31 août 2011 09:55, par Wonka
La réalisation d’un formulaire sous Photoshop n’est qu’une maquette permettant d’aider le travail de l’intégrateur. Il faut couper et intégrer ce formulaire en utilisant le langage informatique HTML / CSS.
Répondre
-
