[Confirmé] Créer sa maquette pour le web

Bonjour !

J'ai choisi le niveau Intermédiaire car je vais manipuler pas mal d'outils et je ne vais pas vous expliquer en détail comment faire pour chacun d'entre eux. Je pars du principe que vous les connaissez d'où le choix de ce niveau.

Je vous enjoins également à jeter un oeil au tuto Personnaliser Photoshop
Car pour être efficace en création on va avoir une main sur la souris et une main sur le clavier et les deux vont s'activer. Donc tout le long je vous mettrai les raccourcis des manipulations en vert.
Ce serait vraiment un plus pour vous de les retenir !


1. Papier et stylo :

Je sais c'est paradoxal pour une création de maquette sur Photoshop, mais une maquette sous entend que vous avez un plan d'attaque.
Ce n'est pas au moment où vous ouvrez votre document que vous devez réfléchir à ce que vous allez mettre dedans !

Donc les pré requis sont :
- plan détaillé des rubriques et catégories proposées
- des images : du moins une présélection
- la structure de votre site : où sera le menu, comment seront organisées les choses au niveau de l'espace de votre site.
- une idées de l'ambiance, ce qui vous aidera à déterminer une charte graphique.
- les effets que vous désirez utiliser : slider, menu déroulant, etc...

Je ne vous demande pas de créer un cahier des charges puisque ce tuto est conçu dans la perspective d'un site personnel.

Je ne suis pas partie sur la refonte de mon site, ça fait plus d'1 mois qui j'y songe et je n'ai toujours pas fini ma phase préparatoire. Donc mon exemple est un site fictif d'autant qu'il s'agit d'une boutique (cas très particulier) !

Mes impératifs pour cet exemple

Je suis une Simsette qui a décidé d'ouvrir son site pour proposer l'achat d'objet en rapport avec l'enfance (j'étais à fond dans mon jeu de rôle, vous n'aurez qu'à être vous même)
1. Le public : parents de Sims allant de nouveau-né à enfant
2. Le type de site : vente en ligne (donc un panier)
3. Les rubriques de vente seront présentées dans un menu horizontal avec une navigation simple (on verra plus tard quand ma boutique sera devenue numéro 1)
4. Ambiance : Sims -> vert (ouais j'étais inspirée) avec quelques touches de couleurs vives car on est dans le monde de l'enfance.
5. Structure de la page :
-> En tête avec personnage, nom boutique et phrase d'accroche
-> Un slider ou animation Flash (à voir) pour présenter les objets préférés
-> Présentation des dossiers
-> Présentation des nouveautés

Phase préparatoire terminée.

Quand on réalise une maquette on réalise 3 pages au minimum (plus si on a des design différents pour les pages) :
-> Accueil
-> Page Intérieure
-> Contact

Pour la démo je vais juste faire la page accueil.

Quand on crée sa maquette on doit toujours avoir à l'esprit que l'on va devoir faire une intégration HTML/CSS de celle-ci (vous ou quelqu'un d'autre). En gros cela veut dire que les choses doivent être "carrée".
C'est pas la fête avec des éléments qui se baladent dans tous les sens où rien n'est aligné. Je vous demande juste de me faire confiance pour l'instant. Je consacrerai prochainement un tuto à la transposition d'une maquette en code HTML/CSS ( devinez laquelle).

En tout cas le calage est primordial et vous allez vous en rendre compte avec la présence des repères et ma manière de positionner les éléments.

Nous allons d'ailleurs commencer de suite avec la "démonstration"

2. Préparer sa copie :

A. Quelle taille de document :

Nous allons donc ouvrir un nouveau document. Photoshop propose des formats web.
Le format qui va nous intéresser et que j'adopte systématiquement est 1280px X 1024px.
Sachant qu'au final c'est la largeur qui importe, vous qui êtes utilisateurs d'Internet savez parfaitement que ce qui importe c'est la largeur. Pour descendre au sein d'un document il y a l'ascenseur vertical et le scroll de la souris. Par contre un ascenseur horizontal pour voir le contenu c'est rédhibitoire !

La taille des écrans a évolué cependant on reste sur un format de création de 1280px. En fait notre site internet occupera seulement 900px (je parle de site à largeur fixe), les marges latérales vont nous permettre de visualiser le rendu général sur des écrans supérieur à 900px.

Pourquoi seulement 900px de largeur quand on a à présent des écrans de plus de 1680px ? Et bien car tout le monde n'a pas d'immense écran et qu'il faut également penser aux personnes qui utilisent des ordinateurs portables. Le but est de concevoir un site agréable à visiter pour tout le monde.

Donc nouveau document (CTRL +N)


B. Placer les repères :

Affichage > Nouveau repère...


Le raccourci que vous voyez sur la droite m'est "personnel" je l'ai ajouté en paramétrant Photoshop. Libre à vous bien sûr de l'adopter.


Voici donc ma feuille avec mes différents repères :

En rouge : En bas vous voyez un cadre c'est ce qui représente les 900px, donc la largeur absolue de mon site (c'est ce que représentera cette expression le cadre rouge).
Ensuite c'est juste une question de calcul -> 1280-900 = 380 ->380/2 = 190
Donc le premier repère se place à 190px et le second repère se place à 1090px

En bleu : j'ai choisi pour mon design d'avoir mon site en deux colonnes égales soit un repère à 450px de la largeur absolue.
Pour placer le repère faîtes le calcul : 450+190

En vert : ce sont mes marges intérieures qui vont permettre de caler les éléments. Mes marges pour ma part sont de 15px (sortez vos calculatrices), je vous déconseille d'aller en dessous de 10px.
Ces marges vont me permettre de caler le texte par rapport aux bords.
Je reste constante dans l'utilisation de mes marges sur tout mon site. Cela permet d'une part d'avoir un ensemble harmonieux et d'autre part c'est plus facile à mémoriser pour le codage

C. Être organisé :

Photoshop offre non seulement la possibilité de créer des groupes (CTRL + G) mais également celle de leur attribuer des couleurs (clic droit sur l'oeil). Autant en profiter !

Vu que j'ai travaillé mon site sur papier au préalable, je connais déjà sa structure je vais donc dés le départ créer des groupes et leur assigner des couleurs. Les avantages ?
- Je travaille sur un élément à la fois donc je réduis les autres groupes et ne vois que les calques qui m'intéressent.
- Si je travaille sur plusieurs groupes, grâce à la couleur je sais en un clin d'œil ce qui m'intéresse
- En sélectionnant un groupe j'agis sur tous les éléments qui le composent en une fois !

Donc voici mon organisation pour cette maquette :

3. Arrière plan :

Au niveau des arrières plan, les possibilités sont infinies :
- fond uni
- dégradé
- motif
- image

Les possibilités sont infinies mais sont à combiner intelligemment au niveau du codage avec les répétitions (ou non répétition) les arrières plans fixes ou non.

Pour la démo, j'ai fait simple et je vais donc opter pour un dégradé, histoire d'utiliser l'option de Photoshop.


Donc dans un premier temps, je vais choisir mes couleurs. Je pars d'un dégradé existant, je double clique sur la représentation du dégradé pour aller changer les teintes.

A noter le cadre entouré de rouge qui sont les différentes possibilités de dégradé. Dans le cadre du web, à moins que vous n'optiez pour un arrière plan fixe, laissez tomber les effets. Restez concentrés sur les dégradés verticaux.

En bleu l'option Inverser si comme moi à chaque fois que vous effectuez un dégradé il est dans le sens contraire de ce que vous désiriez...


En cliquant sur les les curseurs entourés en bleu vous allez pouvoir changer la couleur. En faisant glisser le losange entouré en rouge vous allez faire évoluer la répartition du dégradé


On peut combiner un dégradé avec une couleur de fond, on peut donc jouer avec la transparence de celui-ci.
C'est ce que je fais ici, les curseurs entourés en bleu vont me permettre de jouer sur la transparence. Le losange entouré de rouge comme tout à l'heure influe sur la répartition.

Je pars donc d'un blanc à 100% pour terminer par un vert à 60% d'opacité.

Petite astuce au cas où, lorsque vous créez un dégradé maintenez la touche MAJ enfoncé vous obtiendrez ainsi une direction "droite". C'est ce dont vous aurez besoin pour récupérer ensuite votre fond (on verra ça dans le tuto de découpe).

4. Menu de navigation :

A. Le cadre :

Sur cette image, un petit exemple (bon moche là c'est sûr) de ce que l'on peut faire au niveau des menus de navigation si vous voulez être fantaisiste...


Grâce à l'outil sélection (M) vous pouvez créée des formes. Par défaut une fois votre forme créer, toute sélection faite sera ajoutée à la vôtre. Si vous voulez soustraire alors cliquez sur les icônes dans le menu contextuel encadré en rouge ou alors maintenez la touche ALT enfoncée
Il ne vous reste plus qu'à le remplir avec votre couleur de premier plan (ALT + Retour) ou de second plan (CTRL + Retour)
Si vous sélection ne vous satisfait pas, pour tout dé-sélectionner : CTRL +D


J'attire votre attention sur le nuancier. C'est un outil extrêmement pratique lorsque l'on crée une maquette. Lorsque vous déterminez une couleur qui va enrichir votre charte graphique, pensez à l'ajouter au nuancier.
Ainsi à l'avenir lorsque je voudrai utiliser une couleur plutôt que taper le code hexadécimal ou récupérer la couleur avec ma pipette et ensuite l'utiliser, j'utiliserai le nuancier.

Sur la capture d'écran, je suis en mode sélection de couleur, je vais donc ouvrir mon nuancier, ma souris se transforme d'elle même en pipette et je récupère ma couleur.


Bon revenons au classique. Un menu fantaisiste ça peut être sympa mais c'est plus pénible à coder
J'opte donc pour un menu simple soit un cadre avec une bordure et un effet de transparence.
Pour cela je vais jouer avec l'opacité.
J'attire votre attention sur Opacité et sur Fond qui nous permettent de jouer sur la transparence.
Opacité: joue sur la transparence de tout le calque
Fond : joue sur la transparence des éléments mais pas sur le style du calque.

J'utilise fond qui me permet d'avoir une transparence sur le fond du cadre ce qui laisse le contour à 100% d'opacité.

B. Les liens :

A présent nous allons caler les mots choisis pour le menu de navigation, qui seront les liens vers les différentes rubriques.
Au départ je place pèle mêle tous mes mots. Pour chaque mot un nouveau calque car nous allons les placer précisément.

Et pour cela on va encore placer ses repères. Ce coup ci à la main en faisant glisser le repère depuis la règle (CTRL+R). Je place donc mon repère sous mon mot de référence que j'ai placé soigneusement, il s'agit d'accueil.


Voici la manière dont on va procéder. La flèche bleu désigne une sélection (M), ici en l'occurrence cela me sert seulement à mesurer l'espace qui sépare mes deux mots. Pour cela j'utilise l'icône information, entouré par le cadre vert, vous voyez les mesures de ma sélection. J'ai un décalage d'un pixel entre ma sélection et la fin de la lettre accueil, donc au final l'espacement retenu sera de 20px.

Je laisse ma sélection en place et je vais faire glisser un repère jusqu'à sa bordure droite.


Ici vous pouvez voir mon repère placé. Je me sers donc de ces deux repères pour caler mon texte.
C'est un réflexe à prendre car sachez que l'œil va détecter un manque d'alignement et même s'il s'agit d'1 pixel.

Pour déplacer mon mot, je replace mon outil en mode déplacement (V). Pour déplacer mon mot je dois sélectionner mon calque, idem pour gagner en rapidité je le sélectionne directement en cliquant sur le mot en maintenant la touche CTRL enfoncée (CTRL + Clic sur l'élément)
Si cela vous sélectionne tout le groupe, pensez au niveau du menu contextuel à choisir dans le menu déroulant Sélection automatique : calque

Ensuite je peux déplacer mon mot à la souris afin d'être plus précise, je vais utiliser les flèches du clavier :
- haut, bas, gauche, droite : déplace l'élément d'un pixel
- MAJ + haut, bas, gauche, droite : déplace l'élément de 10 pixels


Comme vous pouvez le voir on va répéter la manipulation à chaque fois.
Au niveau du menu contextuel, pour gagner en rapidité avec l'outil sélection, je lui donne une taille fixe via le menu déroulant Style, qui correspond au besoin de mon espacement.

Une fois que vous avez fini regardez la répartition de votre menu et corrigez le en fonction. Pour se faire je sélectionne tous mes groupes sauf le premier et les déplace disons de 10px, puis je dé-sélectionne le second pour déplacer de 10px et ainsi de suite. En procédant ainsi vous ne perdez jamais votre calage et la proportion d'espacement.


Une fois mon menu bien calé, il nous reste à nous projeter sur la dynamique de celui-ci.
Mon menu a en fait 3 valeurs graphiques :
- Lien normal : en noir
- Lien au survol : en chocolat
- Page en cours : en rose et gras avec un indicateur de position.

Pour préparer cela je vais créer des nouveaux calques et deux groupes pour l'exemple. Je préfère cette solution car dans une maquette on réalise plusieurs pages. Lorsque je réaliserai la page Contact, je n'aurai qu'à cacher les calques qui ne correspondent pas à la situation. L'indicateur de position est également sur un calque séparé car je peux ainsi le dupliquer rapidement.
Cela n'a l'air de rien comme ça mais cela fait gagner en rapidité et pour une visualisation c'est bien plus pratique !

5. Slider :

Quelque soit l'animation choisie, il faut penser à lui réserver un emplacement et visualiser le rendu pour ensuite indiquer la taille et la largeur. J'ai représenté un slider par un cadre blanc avec une bordure sur ma maquette.
Je ne vais pas m'amuser à simuler les flèches de navigation ou autre.
Si bien sûr vous comptez créer votre slider fait maison alors soyez précis dans la création car vous aurez besoin de récupérer les images.


Comme vous pouvez le voir j'ai créer mes calques dans mon dossier et surtout je les ai renommés. Savoir de quel calque il s'agit fait gagner un temps fou !
Si je n'ai pas fait d'effort pour le slider, je vais en revanche être précise pour mes images. Car le travail effectué sur elle nous sera utile. Ces images je les utiliserai dans mon slider, j'ai donc besoin de les redimensionner et les caler les unes par rapport aux autres.

Les flèches rouges, vous indiquent les marges intérieures de mon slider, le message subliminal est pensez à mettre vos repères !
Ensuite je vais sélectionner mon objet pour le redimensionner. A la main c'est CTRL sur l'image du calque puis clic droit sur la sélection et vous choisissez transformation manuelle ou alors sélection du calque et CTRL + T.

Utilisez les poignées entourées en bleu pour redimensionner votre objet. Et pour conserver les proportions pensez à maintenir la touche MAJ enfoncée.

Voilà, même principe que pour le menu de navigation, recommencez pour chaque élément jusqu'à ce que cela vous semble calé.
Si vous comptez proposer des éléments très différents, dans votre visualisation choisissez des représentations de chaque catégorie. Cela vous donnera une idée sur la manière de les réduire pour garder un ensemble harmonieux !

6. Les cadres de texte et de contenu :

A. Des cadres identiques et net :


Cette fois ci pour créer mes cadres, je ne vais pas utiliser l'outil sélection. Je vais utiliser l'outil forme (U) et qui plus est en mode tracé. Le tracé permet d'obtenir une forme vectorielle, sans aucun effet de pixelisation ou de contour progressif non voulu.
L'intérêt de cette forme vectorielle est qu'elle peut être manipulée et réutilisée...

Sur l'image, j'ai juste mon tracé, pour l'instant la forme n'existe pas, pensez d'ailleurs à créer un nouveau calque (MAJ + CTRL +N).


Nous utilisons donc l'onglet tracé.
Vous pouvez voir un calque qui représente ma forme. En bas vous voyez un menu contextuel (en passant votre souris dessus vous verrez leurs usages).
Nous utilisons le raccourci entouré en bleu qui va remplir le fond du tracé avec la couleur du premier plan, donc pensez à bien choisir votre couleur de premier plan.

Un raccourci utilisé pour intervertir le premier plan et le second plan (X),afin pour revenir au couleurs par défaut (noir et blanc) c'est (D)


Je viens de créer mon premier cadre, mon tracé est toujours en place. Je sélectionne l'outil sélection de tracé (A) la flèche noire !
Je déplace alors mon cadre latéralement, et pour être sûre de ne pas trembler et que le déplacement soit une parfaite translation horizontale, je maintiens la MAJ enfoncée.

A présent on utilise la fléche blanche, c'est toujours le même outil.
Pour obtenir la flèche blanche cliquez sur l'icône et maintenez la touche enfoncée pour ouvrir le menu de l'icône. Ou alors maintenez la touche CTRL enfoncée quand vous effectuez vos manipulations.

On a notre cadre qui est trop grand pour le coup car je veux un espacement entre les deux. On va réduire sa taille en sélectionnant les deux balises latérales droites. Pour sélectionner plusieurs balises soit vous les ajoutez en appuyant sur MAJ soit vous effectuez une sélection en maintenant la touche de votre souris enfoncée et dessinant un cadre.
Il ne vous reste plus qu'à effectuer la manipulation précédente pour ce qui est du fond.

Je souhaite ajouter à mes cadres la même bordure que celle utilisée pour le slider.
Dans ce cas il est inutile de répéter la même manipulation plusieurs fois.
Je sélectionne le calque du slider, au niveau de la dénomination du calque un clic droit et Copier le style de calque.
Je fais une sélection multiple des calques qui contiennent les cadres, clic droit et Coller le style de calque

B. Mise en page du texte :

Il y a un élément important à savoir dans la mise en page du texte, lié à des études sur l'ergonomie, le confort de lecture et les usages des utilisateurs.
Un cadre de texte ne doit pas être supérieur à 450px.
Voilà après vous faîtes ce que vous voulez...

Afin de pouvoir visualiser ce à quoi ressemblera votre site avec du texte, au cas où vos textes ne seraient pas fini, utilisez ce que l'on appelle du "faux texte".
Le site Lorem Ipsum propose un texte fictif conçu pour ne pas choquer votre œil qui aura le sentiment qu'il peut lire les choses.


En rouge l'icône correspondant à l'affichage de Paragraphe.
C'est ici que vous choisissez un texte paginéà droite, à gauche ou justifié

Ce qui nous intéresse surtout c'est césure qui est coché et que l'on va décocher. Car un mot coupé pour moi c'est hors de question, autant revenir à la ligne suivante !


Ensuite on passe à l'icône correspondant à l'affichage de Caractère.
Je vous détaille les éléments auxquels j'ai assigné un numéro:
1- Choix de la police.
Gardez à l'esprit qu'il y a seulement quelques polices que l'on peut utiliser en tant que texte pour le web. Toute autre police sera à utiliser comme image
2- Le style: normal, gras, italic
3- Taille de la police
4- Interlignage
5- Couleur
6- Ces éléments là, à ne surtout pas utiliser, pour votre maquette utilisez seulement le style proposé dans le menu déroulant.

Pour ce qui est de la couleur, n'oubliez pas d'utiliser le nuancier ce sera bien plus pratique.

Comme pour le menu de navigation pensez à créer dans votre texte des exemples de différents style ou éléments à savoir:
- les différents types de titre
- texte en gras
- les liens de navigation

7. La pied de page :

Le pied de page est un élément important qui va finaliser votre page.

Lorsque votre utilisateur aura scrollé jusqu'en bas de votre page, il est possible que la navigation ne soit plus visible, donc pensez à mettre dans le pied de page les liens importants.
C'est aussi là que vous allez mettre un lien vers votre page des Mentions légales, qui est un élément obligatoire. Si vos mentions sont courtes et que vous ne désirez pas créer une page pour elles, alors vous pouvez les écrire directement dans le pied de page.
Si vous avez également des crédits photos ou image vous pouvez y mettre le lien.

On peut aussi mettre dans le pied de page un rappel du logo de votre site.


Au niveau de l'organisation de mon pied de page c'est seulement deux calques.
Un pour le fond et un pour le texte correspondant à mes onglets.

Les liens de navigations sont généralement centrés et mis côte à côte donc inutile de créer un calque par mot.
Pensez tout de même dans votre maquette à anticiper l'aspect de votre lien lorsque la souris passera au dessus !

8. Vue d'ensemble :

Bien il est temps de voir ce à quoi ressemble votre site pour voir s'il y a des oublis ou si l'on a des petites modifications à faire !

A cet étape ce n'est absolument pas le moment de tout changer.


Pour voir mon site en grand et en enlevant les menus latéraux appuyez plusieurs fois sur (F)

A ce stade plusieurs remarques :
1. J'ai oublié le lien vers contact dans ma barre de navigation
2. Ici la modif est faite à l'image car mon menu était un peu fade alors j'ai augmenté l'opacité
3. J'ai changé le code couleur des liens de la barre de navigation
3. Tout est trop serré alors je vais aérer tout ça en augmentant les espacements entre les différents blocs


Comme je l'avais évoqué précédemment, j'utilise mes groupes pour déplacer les éléments. Cela me parlait de les caler les uns par rapport aux autres sans changer l'organisation interne des calques.


Une fois que je suis satisfaite de la répartition des éléments je vais retailler mon site pour me débarrasser de la hauteur superflue.
Comme j'utilise un dégradé, je vais au préalable redimensionner ce calque.

A présent je le retaille en utilisant l'outil recadrage entouré en rouge sur l'image (C).
J'utilise les poignées entourées en bleu sur l'image pour régler précisément le recadrage.
Attention si votre recadrage est supérieur à la taille d'origine en hauteur ou en largeur alors la dimension finale de votre document sera supérieure à la dimension d'origine.
Soignez le recadrage, puis double cliquez sur votre sélection.

En spoiler, voici l'image de ma maquette en taille réelle (1280px) :

Spoiler:

Punaise, j'y crois pas. Tu l'a fait. My god, que de travail abattu. Merci!

J'ai une question débile: Tu numéroteras tes tutos pour savoir par lequel il faut commencer quand on veut faire un site une fois qu'ils seront mélangés? Ou un mini-guide avec liens des tutos direct?

Ah oui bonne idée je ferai ça.

Oui merci Fu pour tous ces tutos (va falloir que je refasse mon site avec tout ça, je me rencontre qu'il est tout pourri...).
Et c'est une bonne idée le post qu'Idjya propose, un petit récap des tutos quand on veut créer son site et l'ordre dans lequel il faudrait les voir!

J'adore comme tu as présenté ton tuto . Merci beaucoup

Je viens de voir ton tuto, il est vraiment génial!

Oh mon dieu, je viens de (re)voir le tuto !

C'est un travail monstrueux que tu as abattu là ! Oo
Merci infiniment pour les astuces que tu donnes. Ça rend un travail de qualité et parfaitement organisé !

Ah bein comme ça ce tuto a une deuxième vie
Merci à vous deux

Petite précision pour les repères. Quand on a fait apparaître les règles (Ctrl + R) en cliquant sur la règle et en glissant vers la zone de travail on fait apparaître un repère :
- horizontal en cliquant sur la règle du haut
- vertical en cliquant sur la règle à gauche

Merci beaucoup pour ce tuto !

Merci beaucoup Fu' pour tout ces tutos sur les maquettes des sites ! Ça va beaucoup me servir !

Merci beaucoup Fu pour ce tuto super intéressant et détaillé.

Quand j'ai vu le titre du tuto, ça m'a fait sourire. Je viens de finir la refonte d'un site et nous sommes sur la correction finale (le prof donne son avis sur les truc qui passent et ceux qui ne passent pas pour une acceptation client). C'est coton quand on n'a pas de base pour démarrer.

Ceci dit, très bien ton tuto. Bien expliqué.

Une refonte est plus facile que de partir de zéro car cela donne une idée de départ mais en effet quand on fait pour la première fois ce n'est pas évident. il faut beaucoup regarder ce qui se fait pour se faire un oeil. Là en voyant mon design d'exemple je me marre.
Mais il a le mérite de montrer quelque chose de carré qui serait cohérent avec les technologies actuelles ui rendent un site responsive donc il serait en l'état intégrable

Oui, ce sera plus simple la prochaine fois car je sais maintenant, ce qu'il ne faut pas faire (du moins en parti) d'où une correction sur grand écran pour les 20 refontes (oui ! on est 20 stagiaires ) on peu aussi apprendre des erreurs des autres. En plus, comme on s'entend tous bien, on s'entraide, on se concerte, un travail d'équipe quoi ! Tous en faisant chacun notre projet personnel. On a dû faire du brainstorming et des recherches sur le web avant de se lancer.
J'ai ainsi découvert que la mode web actuelle est l'octogone, ce que j'ai utilisé. Je sens que mon site sims va avoir un relooking d'ici quelques mois !