Créer un site d’entreprise de A à  Z 1/3 : Réflexion & Webdesign

Créer un site d’entreprise de A à  Z 1/3 : Réflexion & Webdesign

Programme : Photoshop

Difficulté : Intermédiaire

Temps estimé : 10 heures

Télécharger les fichiers sources
Vous devez être logués ou enregistrés pour télécharger !

Design Spartan (Gaétan Weltzer) vous montre comment créer un site d’entreprise de A à  Z en commençant par la phase de réflexion puis le webdesign.

L’objectif de ce tutoriel assez long est d’offrir un cas pratique avec une réflexion derrière. En situation réelle pour une entreprise, comment se passe la réalisation d’un site Internet de présentation ? Par où commence-t-on et comment finit-on, voici ce que nous allons voir ensemble.


A lire avant de commencer

Plutôt que de faire un simple tutoriel de webdesign, je souhaite vous emmener dans la création d’un site Internet pour une entreprise fictive de A à  Z : de la phase de réflexion jusqu’à  la mise en ligne du site en passant par le webdesign, l’intégration et le développement. Néanmoins pour ce long exercice, nous ne nous pencherons dans la phase de réalisation que sur la page d’accueil étant donné que les autres pages sont simplement déclinées de celle-ci. Ainsi je parlerais des autres pages sans voir en détail le webdesign ou l’intégration.

Pour cet exercice, je vais vous montrer le procédé de création d’un site-vitrine qui est à  peu près le même pour la majorité des entreprises souhaitant présenter leur activité et entrer en contact avec de potentiels clients. Pour tout de même partir dans l’originalité et montrer comment on peut s’adapter au cas par cas (notamment en matière de webdesign), j’ai décidé de réaliser le site d’une entreprise de vente de thé de qualité qui possède plusieurs boutiques en France. Le but de ce tutoriel est de partir de cet exemple précis (que vous ne rencontrerez probablement jamais) pour vous apporter des connaissances, des techniques et une méthodologie propre à  la plupart des sites web, que ce soit en webdesign, en intégration, en développement ou en gestion de projet.



Ce tutoriel est découpé en 3 parties :

- La réflexion puis le webdesign : élaboration de la charte graphique et du design du site Internet

- L’intégration HTML5/CSS3

- La développement PHP/MySQL des front et back office (administration)


La réflexion

La phase de réflexion qui va être décrite correspond grosso modo à  l’élaboration d’un cahier des charges. Cela sert concrètement à  savoir où l’on va mettre les pieds : pour qui est-ce que je réalise ce site ? Qui va le regarder et quel est son but ? Ensuite, qu’est-ce qu’il y aura sur le site ? Quelles sont les contraintes qui en découlent ? Cela fait beaucoup de questions dont les réponses devraient former au final un document permettant de présenter l’entreprise (ici qui vend du thé), de définir son besoin et enfin les contraintes du projet.

La préparation

Nous sommes donc parti sur un site pour une entreprise vendant du thé de qualité. Avant même d’attaquer le design – ou le développement – du site pour cette entreprise, il faut se poser quelques questions essentielles :

- Qui est cette entreprise ? Que fait-elle ? Quelle est sa philosophie ?

- Quel est l’objectif du site ?

- Quelle est la cible ?

- Quel message dois-je faire passer ?

En général on trouve la réponse à  ces questions en discutant et en posant des questions directement au client et en faisant des recherches. Ces quelques « bêtes » questions sont la toute première étape de la création du site web car elles définissent tous les enjeux de celui-ci.

Cela peut paraître logique, mais si on ne traite pas ces questions avec soin, on peut rapidement faire échouer le projet. Par exemple si une entreprise vous contacte pour créer un site d’e-commerce et que vous n’avez pas compris quel est son besoin ni ce qu’elle faisait au juste et que vous réalisez un site-vitrine full Flash au lieu d’un site classique de vente en ligne, vous aurez mal au cul, le client aussi.

Dans notre exemple :

Dans le cas de notre société fictive de vente de thé « Real Tea » nous avons récolté les informations suivantes : il s’agit d’une entreprise familiale spécialisée dans la vente de thé artisanal chinois de haute qualité. Leur philosophie s’inspire directement de celle des maîtres chinois : relaxation, saveur, nature et respect. Rien qu’avec cela, vous devriez être capable de dégager des mots-clé et d’entrevoir l’identité visuelle du site Internet : cela pourrait être quelque chose d’épuré, de clair et reflétant la nature et la saveur du thé, rappelant les origines chinoises du thé avec parcimonie. On oublie donc le feu, le design à  base de métal ou encore le fond étoilé de la Voie lactée.

L’objectif du site est le suivant : le client souhaite pouvoir présenter aux visiteurs son entreprise, son activité et qu’est-ce que ses thés ont de spécial. Suite à  cela il souhaite que les clients potentiels le contactent via son site ou viennent directement dans une de ses 6 boutiques en France.

La cible est telle que le client la présente : l’activité de l’entreprise Real Tea est orienté vers les passionnés et les connaisseurs de thé.

Le message que le site doit faire passer : puisant son origine dans la longue tradition des maîtres de thé chinois, l’entreprise vend un thé de qualité unique et qu’on ne trouve nul part ailleurs. Véritables amoureux du thé, si vous venez dans leur boutique vous pourrez également déguster et recevoir des conseils sur la dégustation du thé.

Normalement, quelques minutes de discussion permettent de dégager ses informations. En revanche les informations seront rarement structurées et présentées de la sorte. Souvent le client va parler de son entreprise, de ce qu’il aimerait comme site Internet et c’est à  vous de définir ensuite, avec lui, l’objectif, la cible et le message qui ressortent de cet échange.


Les contraintes fonctionnelles et budgétaires

Pour la suite, c’est vous le spécialiste. Vous savez de quoi a besoin l’entreprise (ici Real Tea) et c’est à  vous de définir les enjeux techniques, fonctionnels et budgétaires.

Suite à  cela d’autres questions découlent :

- Y a-t-il un logo et une charte graphique existante ? Si oui faut-il la reprendre et dans quelle mesure ? Dans notre cas, Real Tea ne possède pas encore de charte graphique, il faudra partir de zéro.

- Les fonctionnalités nécessaires du futur site ? Ici, Real Tea souhaite pouvoir changer le contenu de ses pages s’il le souhaite et pourra afficher des actualités qu’il mettra à  jour lui-même. Pour finir, il faudra mettre en place un formulaire de contact ainsi qu’un module de statistiques. Cela implique donc d’avoir un petit CMS avec une administration pour le client qui lui permettra de changer le contenu.

- La hiérarchisation de l’information : Sur le site Internet, quelles informations et actions vont figurer ? Dans quel ordre et comment les présenter ? Nous verrons cela plus en détail durant l’étape du webdesign.

- La conversion du site : Quelle sera la conversion du site ? Il s’agit en quelque sorte de savoir si l’objectif est atteint. Ici il s’agit soit de recevoir des clients à  la boutique ou qui contactent l’entreprise depuis le site Internet. Dans le cas d’un site d’e-commerce, la conversion serait le nombre de commandes effectuées en ligne.

- La technologie utilisée : On définit dans notre exemple qu’il s’agira d’un site-vitrine en HTML/CSS.

- Définir le budget ainsi que le temps nécessaire

Ces informations sont très importantes comme vous pouvez le voir. C’est à  ce moment précis que vous pouvez déterminer s’il s’agira d’un site en HTML/CSS, en Flash, s’il tournera sur un CMS ou non. Il s’agit aussi d’imaginer dès le début le site final : quelles sont les informations à  mettre en avant, que chercheront les amoureux de thé qui visiteront votre site, etc… Enfin, vous définissez le budget (ce que vous allez être payé pour ce site) et établissez les délais.

Avec toutes ces données, vous aurez toutes les informations dont vous avez besoin pour commencer sans risquer de faire une erreur monumentale par la suite. Vous avez notamment certaines choses à  garder en tête dès l’étape du webdesign comme le fait que le site sera dynamique (donc le contenu pourra être modifié par Real Tea), etc…

Seconde étape : le webdesign !


Le webdesign

Ici, plutôt que de juste vous passer les différentes étapes de réalisation du design sous Photoshop, je vais essayer de vous inculquer certaines notions et d’expliquer mes choix graphiques et ergonomiques dans le cas de Real Tea.

Ce qu’il faut garder tout le long à  l’esprit

Reprenons depuis notre précédent brief où nous avons reçu toutes les informations nécessaires à  la création de l’identité visuelle et des besoins en matière d’information à  présenter. On sait de plus que le site est principalement destiné aux connaisseurs de thé et qu’il a de nombreuses valeurs à  faire passer : l’amour du thé de qualité et de ses origines, de la Chine, la relaxation et le raffinement.


Il faut donc pour commencer que le design soit en concordance avec l’image de la marque et le message qu’elle souhaite faire passer. Il faut ensuite hiérarchiser les informations de façon à  mettre en avant celles qui sont primordiales et de guider le visiteur à  travers la page d’accueil. Mais le webdesigner ne s’arrête pas là  ! On doit aussi penser à  l’ergonomie pour que le site soit agréable à  utiliser et même à  la future intégration. Ainsi il ne faut pas imaginer des situations impossibles ou trop lourdes à  intégrer. Ainsi le mieux est d’avoir tout de suite à  l’esprit le design fonctionnel et notamment le découpage des images en tête. Cela permet de gagner du temps et d’éviter des erreurs.

Une autre contrainte à  ce stade du projet est de penser au développement du site derrière. Le fait que certaines données soient statiques et d’autres dynamiques – et donc variables - peuvent énormément influencer le design et encore plus son intégration HTML/CSS comme nous allons le voir dans l’exemple qui suit.

Webdesign de site corporate

Résultat final du tutoriel


Etape 1 : Créer le document et préparer le PSD

Note : Durant les premières étapes j’ai surtout cherché à  trouver l’atmosphère et le style du design, sans payer attention au contenu ou à  la mise en page.

Conseil : Quelques fois, que l’on soit professionnel ou non, l’inspiration ne vient pas tout de suite ou les premières idées sont moyennes. Mais en persévérant et en travaillant sur un design à  différents moments (selon le jour, l’humeur, la fatigue, etc), on arrive toujours à  créer quelque chose de satisfaisant, du moins cela marche pour moi. ;)

Je crée un nouveau document sur Photoshop en 72 dpi de 1920 px de large (la hauteur importe peu pour le moment, prévoyez simplement suffisamment de place).

Pour ce webdesign et comme pour tous les autres ou presque, je suis parti d’une grille de mise en page, aussi appelée « grille CSS ». Depuis la grille 960 Grid System, j’ai crée ma propre grille en l’étirant à  970px de large. Pourquoi donc ? Tout simplement car il faut penser tout de suite à  l’intégration et au site terminé : la largeur maximale utilisable pour que le site s’affiche en entier et sans scrollbar horizontale sur une résolution de 1024px de large est de 1000 px. J’ai donc placé mes repères extérieurs de manière à  obtenir un espace de 1000 px de large. Enfin, à  l’intérieur des blocs il y aura une marge de 15 px sur les côtés du site pour ne pas coller le texte aux bords du site. Calculons : 1000 – 2(15) = 970. Tiens cela correspond exactement à  la zone de contenu sans les marges, soit à  ma grille précédemment réalisée.

Tutoriel Living Tuts webdesign : créer et préparer le PSD

Tout est prêt pour se lancer dans ce nouveau design !


Etape 2 : Le logo

« Un tutoriel qui commence avec des maths, c’est mal parti ! » N’ayez crainte… je m’arrête ici pour les calculs savants. La partie suivante consiste à  définir le style et l’atmosphère du design. Pour créer l’identité visuelle de Real Tea, je commence par le logo après avoir passé le calque de fond en un gris très clair de valeur #e7e9e6.

Je voulais un logo textuel simple rappelant légèrement les origines orientales du thé.


Je commence en écrivant le nom de la société « Real Tea » assez grand avec la police gratuite Sakkal Majalla puis je pixellise le texte. J’ajoute à  ce calque un dégradé de vert (de #9ab300 à  #347a24) et j’y ajoute une légère ombre portée comme sur l’image ci-dessous.

Avec le Pinceau (Raccourci B) je modifie légèrement quelques lettres, notamment les deux majuscules afin de les styliser un peu. Laissez ici libre court à  votre imagination. Vous pouvez également le faire à  la plume si vous n’êtes pas à  l’aise avec le pinceau.

Tutoriel Living Tuts webdesign : créer et préparer le PSD


A partir de cette base, je vais détailler le logo pour lui donner un aspect plus raffiné en accord avec la qualité des thés de Real Tea. Pour cela sur un nouveau calque en mode Incrustation je rajoute des traits de 1 px de large de couleur blanche et à  faible opacité au milieu de certaines lettres. Je n’hésite pas à  gommer les bords pour obtenir un joli fondu. Pour terminer, je récupère la sélection du logo (Ctrl+Clic sur la vignette du calque) et je dilate la sélection d’un pixel (Sélection > Modifier > Dilater). Sur un nouveau calque placé sous le logo, je remplis la sélection en blanc et je baisse l’opacité du calque. J’ai ainsi ajouté un léger contour aux lettres du logo.

Notre logo est terminé !


Etape 3 : Le fond du header

Le fond du header est un élément primordial dans ce design. Je voulais plonger le visiteur au milieu d’un magnifique champ de thé tant en l’incrustant avec finesse et originalité dans le design.

Je commence par placer une texture de papier sur tout le fond gris du site. Je glisse une photo de papier que je déssature (Ctrl+Maj+U) et dont l’opacité est grandement diminué. Sur ce fond je crée un groupe « photo header » afin de rester ordonné. Dans celui-ci je glisse la photo du champ de thé provenant de Thinkstock.com (photographies payantes) et je la redimensionne pour qu’elle se place dans le haut du site.

Le plus gros du travail réside maintenant dans l’application du masque d’opacité sur ce calque (clic sur « Ajouter un masque de fusion » au bas de la palette des calques). Je ne garde en blanc sur le masque d’opacité que ce que je souhaite laisser visible, et le reste en noir. A l’aide du pinceau, j’efface ainsi rapidement les bords de la photographie et la partie inutile du bas puis je commence à  simuler des coups de pinceau pour mêler la photographie et la texture de papier en peignant en noir des « traces de pinceau ».

Tutoriel Living Tuts webdesign : créer et préparer le PSD


Etape 4

Mon effet n’est pas encore terminé. Je duplique mon calque du paysage et je le passe en niveaux de gris (Ctrl+Maj+U). Toujours avec le masque d’opacité, je vais effacer certaines parties de ce calque pour ne laisser visible que les bords de la photographie à  la limite du papier. Cela adoucit un peu la transition.

Pour détailler et apporter un côté plus « graphique », je peins ensuite sur un nouveau calque des tracés en gris foncé. Je les place avec précision pour simuler un croquis sous la peinture, ainsi je prolonge les lignes des montagnes, des routes, des arbres et de quelques sillons du champ de thé.

Tutoriel Living Tuts webdesign : créer et préparer le PSD


Etape 5 : Le fond du contenu

Pour faire ressortir le contenu du site du fond grisâtre, je crée un nouveau groupe de calques nommé « BG contenu du haut ». Je rajoute sur un nouveau calque un fond blanc entre mes repères de 1000 px de large et je le gomme en haut pour avoir un fondu très doux entre le header et la zone de contenu blanche.

Sur un autre calque, je rajoute ensuite au pinceau à  dureté 0% des ombres à  ce bloc sur les côtés et en-dessous. Je passe ce calque à  faible opacité (environ 20%) et je rajoute au bas une ligne de 1 px de hauteur grise pour marquer l’ombre.

Pour mêler ce bloc blanc au header et jouer avec le style graphique, sur un nouveau calque j’ai ajouté un peu de détails à  ma photo incrustée dans le header. A l’aide du pinceau toujours, je prolonge mon bloc blanc sur les côtés et le mélange à  la photo du haut (l’image sera plus parlante !).

Tutoriel Living Tuts webdesign : créer et préparer le PSD

A ce stade, l’atmosphère et le style du site sont posés. Une étape importante s’achève et une autre prend la relève : agencer le contenu et travailler l’ergonomie, tout en restant esthétique.

Voici l’organisation des calques à  ce stade :

Tutoriel Living Tuts webdesign : créer et préparer le PSD


Etape 6 : Le contenu le plus important

Je souhaite rester dans quelque de chose d’épuré afin de toujours souligner la finesse et la qualité des thés que vend Real Tea. Je décide de laisser la place la plus importante au message et à  la philosophie du client fictif avec une photo de tasses de thés remplies (montrant directement le thé prêt à  être dégusté) et un texte percutant « Des thés rares et exceptionnels récoltés au bout du monde ».

Cela a pour but de vanter la qualité des produits tout en montrant avec évidence qu’il s’agit bien d’un site où l’on parle de thé, et même, pas de n’importe quel thé puisqu’il semble rare et lointain.

Je glisse la photo des tasses de thé détourées trouvée sur sxc.hu et je rajoute sur un nouveau calque les petites feuilles de thé posées contre la tasse. Elles proviennent d’une autre photo (aussi de sxc.hu) que j’ai détourée puis réduite et enfin incrustée correctement.

Tutoriel Living Tuts webdesign : créer et préparer le PSD

Pas de fioriture inutile, il suffit ensuite de remplir ce grand espace avec le message : il est grand, simple et percutant. Il ne manquera pas de marquer les esprits. Je l’ai écrit sur 2 lignes avec la très belle typographie Melbourne que vous pouvez télécharger à  travers ce lien. La police est en taille 40 et la couleur est #595959. J’ai ensuite rajouté un très léger dégradé vers le blanc sur le haut des lettres d’une opacité de 22%.

Il ne reste plus qu’à  ajouter un petit lien pour inviter l’utilisateur à  découvrir ces thés d’exception sur une autre page du site. La police est Arial en taille 13 et de couleur #517317. A l’aide de l’outil Lasso (raccourci L), j’ai rapidement crée la petite flèche devant le lien sur un nouveau calque. Cela aide à  suggérer à  l’internaute qu’il s’agit d’un lien cliquable.

Tutoriel Living Tuts webdesign : créer et préparer le PSD

Conseil : A partir de là , pour rester cohérent et éviter les erreurs d’ergonomie, tous les liens du site sur fond blanc ou gris clair seront en police Arial et de la même couleur verte. Si le visiteur rencontre une fois un lien de cette couleur, il saura instinctivement que les autres textes similaires sont aussi des liens.



Etape 7

Plus de contenu ! Il s’agit avant tout d’un site de présentation, donc il faut agrémenter un peu de contenu la page d’accueil et présenter de façon claire et sans trop de texte ce qu’est Real Tea et en quoi ses thés sont supers.

Je décide de placer 3 colonnes en suivant ma grille de 970 px de large pour les placer correctement et de largeur égale.

Tutoriel Living Tuts webdesign : créer et préparer le PSD

Etape relativement facile, j’écris à  chaque fois un titre avec la police Melbourne en taille 28 et de couleur #595959. En-dessous j’écris un paragraphe de texte fictif en lorem ipsum. Ce texte pourra bien entendu être changé plus tard par le client.


Pour habiller un peu plus ces blocs, je rajoute une fine ligne verte de 1 px de haut sous chaque titre. Je gomme avec une forme à  dureté 0% la partie droite de la ligne de manière à  obtenir ce dégradé.

Conseil : Lorsque vous avez des éléments comme des colonnes qui sont identiques, réalisez d’abord un des éléments (ici une seule colonne en entier) puis après dupliquez-le autant de fois que nécessaires plutôt que de recommencer à  chaque fois !


La dernière partie est la plus amusante. Il s’agit de créer les 3 petites icônes devant les titres. Ces icônes sont bien sûr en lien direct avec la signification du titre. Je ne vais pas les expliquer une par une car le processus est toujours le même : à  partir d’une photo, je détoure l’élément qui m’intéresse (une feuille de thé, une lampe chinoise, des cailloux empilés) et je le réduis. Après il convient de l’adapter si besoin pour que l’icône remplisse son rôle.

Tutoriel Living Tuts webdesign : créer et préparer le PSD


Etape 8 : Le menu de navigation

Huitième étape, et pas des moindres : le menu de navigation.

Elément très important d’un site Internet, il faut apporter un soin particulier à  cet élément de navigation. Placé dans mon cas tout en haut du site, il guidera les visiteurs entre les différentes sections du site. Pour le détacher du reste du site, je commence par créer une barre de navigation verte à  60% tout en haut du site et sur toute la largeur. Je rends cette barre plus foncée et un peu plus opaque (opacité légèrement augmentée) au niveau de la photo car sinon les liens par-dessus ne seront pas assez lisibles.

Tutoriel Living Tuts webdesign : créer et préparer le PSD

A droite, au-dessus de la photo, je rajoute mes liens de couleur blanche avec la police advent en Bold à  15 px. Ces liens qui utilisent une police non habituelle (tout comme Melbourne) seront par la suite transformés en image, je peux donc me permettre de modifier le texte si besoin. Je leur rajoute ensuite une ombre portée comme il suit :

Tutoriel Living Tuts webdesign : créer et préparer le PSD

Enfin, j’imagine le site terminé et pour naviguer correctement dans ce menu il faut à  ses liens un état actif ou de survol (ce sera ici le même). Dans un nouveau groupe au-dessus du lien actif « Accueil », je place judicieusement 4 petites feuilles préalablement détourées. Je met à  certaines une petite ombre portée et le tour est joué, mon menu est terminé !

Tutoriel Living Tuts webdesign : créer et préparer le PSD


Etape 9 : Le bloc d’actualités

Ce bloc est assez important et doit se différencier du reste du contenu de la page car c’est normalement le seul qui va régulièrement être mis à  jour. Le fait de changer le style de bloc permet aussi de rendre le design moins monotone et apporte un intérêt supérieur au site. Connaissant le projet, je sais que les clients pourront eux-même changer les actualités qui défilent depuis leur interface d’administration du site. Cela impliquera notamment des contraintes durant l’intégration et le développement comme nous le verront dans la suite du tutoriel…


Je commence donc par créer un groupe nommé « Actualités ». Je glisse ensuite le calque d’une photo de texture de papier ancien pouvant ressembler à  du papyrus. A partir de cette texture, je forme un bloc suivant toujours ma grille réalisée à  l’étape 1 avec une largeur de 557 px (= largeur de 7 traits sur 12). Pour cela, je lui rajoute juste un masque d’opacité et à  l’aide de l’outil Rectangle arrondi (Raccourci U) avec un arrondi entre 3 et 5 px, je trace avec soin mon rectangle que je remplis sur le masque d’opacité.

Tutoriel Living Tuts webdesign : créer et préparer le PSD

La texture étant trop prononcée et pouvant empêcher la lecture correcte du texte, je crée par-dessus un calque que je passe en masque d’écrêtage (Alt+clic entre les deux calques) . Je le remplis de la même couleur assez claire de la texture et passe son opacité à  70%.

Pour ajouter un peu de détails au bloc en papier, j’assombris d’abord son contour. Ensuite, je rajoute sur un autre calque une ligne de 1 px de large parcourant tout le bord du bloc.

Tutoriel Living Tuts webdesign : créer et préparer le PSD


Etape 10

Des bambous pardi ! Des bambous !

Je ne vais pas m’arrêter là  et rajoute plus d’éléments graphiques et de détails à  mon bloc d’actualités. Je veux ainsi renforcer l’esprit de parchemin chinois.

Pour cela je trace à  la plume quelques bambous : d’abord le tronc puis à  chaque fois sur un autre calque chaque feuille de la tige. Je remplis chaque sélection faite à  la plume en noir et je passe les calques en mode Incrustation, ainsi il se fond parfaitement avec la texture de papier. L’opacité de ces calques de bambous a été baissé pour que le dessin des bambous soit discret.

Tutoriel Living Tuts webdesign : créer et préparer le PSD


Et quelques glyphes chinois

Pour parfaire mon bloc, je décide en utilisant le même procédé que pour les bambous d’ajouter quelques discrets glyphes chinois sur la papier. Avec l’outil Texte (T) et la police GoJuOn en taille 41, j’écris de façon verticale 2 colonnes de signes en noir. Je réduis l’opacité à  30% et c’est terminé.

Tutoriel Living Tuts webdesign : créer et préparer le PSD


Etape 11 : Contenu du bloc d’actualités

Maintenant que mon espace d’actualités est prêt, je m’occupe du contenu en commençant par le titre. Avec la même police que le logo (Sakkaj Majala) j’écris les mots DERNIERES ACTUALITES en taille 36 et de couleur noire. Je passe ensuite le calque de texte en mode Incrustation.

Je définis le nombre d’actualités sur la page d’accueil à  3 et ainsi pour chacune d’entre elles sont affichés un titre, un résumé et un lien pour lire la suite. Ici je pense immédiatement au développement du site car je sais que le client (Real Tea) ne fera pas forcément attention à  ce que le résumé ne dépasse pas les 2 lignes sur la page d’accueil. Je garde cette information de côté afin de plus tard limiter dynamiquement la longueur du résumé sur la page d’accueil.

Tous ces textes sont écrits avec la police Arial comme vous pouvez le voir sur l’image.

Tutoriel Living Tuts webdesign : créer et préparer le PSD


Le bloc de date

Pour que le bloc colle plus à  l’esprit raffiné qui se dégage du reste du design et pour apporter de l’originalité, je crée de petits blocs pour la date. Ceux-ci sont très simples à  réaliser :

- sur un nouveau calque, je crée un rectangle que je remplis de la couleur suivante : #e2cdab. Puis avec le lasso polygonal (L), je sélectionne et supprime les coins de gauche.

- sur un calque par-dessus, je récupère la sélection de mon rectangle tronqué et après avoir contracté la sélection d’1 px, je réalise une ligne dorée à  l’intérieur du rectangle.

- sur un calque par-dessus, j’ajoute l’ombre portée sur le rectangle. Je sélectionne la zone et je passe un bête coup de pinceau à  dureté 0%, n’hésitez pas à  rajouter du flou gaussien si nécessaire (Filtres > Atténuation > Flou gaussien).

- les textes : pour le numéro, j’utilise la typographie Ginko (15 pt) de couleur #5c1100. Cela ajoute indéniablement une touche orientale à  cet espace. Pour le mois, je ne marque que les trois premières lettres du mois en Arial.


Notre bloc est enfin terminé !


Etape 12 : « Trouvez nos espaces thé »

Conseil : A noter que chaque bloc principal possède un groupe distinct afin d’avoir toujours des calques ordonnés (Actualités – Trouvez nos espaces – Newsletter – etc…).

Il ne faut pas oublier dans tout cela que l’objectif ultime du site est de faire connaître et visiter ses boutiques. Cet espace permettant aux gens de trouver un « espace thé Real Tea » près de chez eux est donc crucial.

Toujours en suivant ma grille pour la largeur du bloc, je place les textes clairement et sans superflu pour donner aux gens envie de lire et de trouver rapidement leur ville. Cette étape est très facile, j’ai repris le titre, la ligne sous le titre ainsi que le paragraphe du contenu précédemment crée sous le header. Cela permet de rester cohérent et simple.

La chose très importante à  noter ici est la présence bien visible et ordonnée en liste des 6 villes où se trouvent Real Tea. La couleur verte (#3c580c) du texte fait comprendre aux gens qu’il s’agit de liens cliquables. J’ai simplement rajouter une petite feuille de thé en guise de puce pour ma liste.

Tutoriel Living Tuts webdesign : créer et préparer le PSD


Etape 13 : La newsletter

Le titre ainsi que le texte sont repris du groupe « Trouvez nos espaces thé » pour gagner du temps. Dessous je rajoute un champ de saisie de texte invitant les gens à  directement rentrer leur adresse email afin de recevoir la newsletter de la société.

Je crée sur un nouveau calque un rectangle blanc auquel j’ajoute une ombre interne qui met en valeur le champ de saisie. A l’intérieur j’écris explicitement « mon adresse email » en Arial (13 pt) de couleur grise claire #595959.

Juste en-dessous je rajoute un bouton qui va de pair avec le champ de saisie. Sa couleur rouge n’a pas été choisie au hasard car ainsi le bouton attire l’oeil et excite le spectateur (ne vous méprenez pas sur le sens de la phrase ! :p), l’invitant fortement à  réagir, à  cliquer.

Tutoriel Living Tuts webdesign : créer et préparer le PSD

- je crée un rectangle auquel je tronque les coins comme pour le bloc de la date.

- une fois rempli, je lui rajoute un dégradé de couleur en double-cliquant sur son calque. Je vais de la couleur #911816 à  #c34019.

- j’ajoute ensuite un contour extérieur blanc d’1 px.

- sur un nouveau calque comme pour le bloc de la date, je rajoute une ligne dorée de 1 px à  l’intérieur du bouton.

- je rajoute ensuite un deuxième contour fait en pointillets pour ajouter des détails et de la finesse.

- pour finir, j’écris le texte « je m’inscris » en blanc avec une légère ombre portée rouge foncée.

Mon bouton est terminé !


Etape 14

Pour ajouter un nouvel élément au design et agrémenter cette page d’accueil, comme si c’était pour la finir en beauté, je rajoute un élément photo.

Je choisis alors une photo d’une jolie boîte de thé comportant des motifs chinois. Je la détoure, la redimensionne et sur un nouveau calque en-dessous de la photo, je peins au pinceau son ombre pour mieux l’incruster.

Tutoriel Living Tuts webdesign : créer et préparer le PSD


Etape 15 : Le footer

Le footer (ou « pied de page ») est souvent négligé et limité à  un simple texte centré tout en bas. Je dis « Non ! ». Prenez vos armes et battez-vous pour réaliser un footer qui ne semble pas avoir été un ajout bâclé après l’avoir oublié ! Du genre :

« Ca y est ! Site en ligne !

- Hé il manque pas un truc ?J’ai l’impression qu’il manque quelque chose d’important…

- Non je crois pas… quoi que, il faut pas un truc en bas du site

- Ah oui ! Bon c’est pas grave, comme tout le monde on rajoute le texte d’une ligne vite fait, personne le verra… »


Pendez-les par les pieds ! Nous allons donc réaliser un footer simple, sans beaucoup d’informations mais présentant clairement et joliment le contenu. Real Tea est présent sur Facebook et Twitter et aimerait se servir de son site pour obtenir de nouveaux fidèles.

J’écris donc à  gauche « Retrouvez-nous sur : » suivi des 2 icônes des réseaux sociaux Facebook et Twitter. Les icônes proviennent de l’incontournable site iconfinder.com. Aligné à  droite et avec un gris très léger, j’écris les informations légales, concernant dans notre exemple fictif le tutoriel pour Living Tuts.

footer


Etape 16 : Fignolez moi ce footer !

Ce pied de page manque d’originalité, il n’y a rien de graphique et c’est assez pauvre. Pour y remédier, sur un nouveau calque je rajoute une ombre portée sur toute la largeur du contenu du site.

La zone importante du footer est celle contenant les réseaux sociaux, c’est donc ce que nous allons mettre en avant avec une photo d’une tige contenant plusieurs feuilles de thé détourées et placée à  gauche du texte.

Sur un calque en-dessous de ces feuilles, je peins au pinceau une zone blanche qui va « décoller » les feuilles de thé du fond et les faire ressortir un peu plus. Je sélectionne ensuite la partie du bas de ma zone blanche (sous le texte) et je la supprime. Pour créer un peu de relief, j’ajoute au pinceau sur un nouveau calque une légère ombre portée sous la zone blanche et la plante.

footer


Fin du tutoriel

Webdesign de site corporate

Résultat final du tutoriel


Ce tutoriel touche à  sa fin jusqu’à  sa deuxième grande partie concernant l’intégration.

86 Comments to “Créer un site d’entreprise de A à  Z 1/3 : Réflexion & Webdesign”

  • Oui les bases sont la ! Je vais approfondir çà un peu plus tard. Je n’ai pas encore essayer de me créer mon site de A à Z. Je suis obliger de suivre la mise en forme de mon thème et tricher avec cela.

    Voyez plutôt : http://www.cs4.fr

    Ps : Vivement la suite…
    Merci Gaétan Weltzer

  • Je te remercie pour ce tuto, mon premier client m’a contacté il y a peu de temps, et je ne savais pas vraiment lui expliqué de manière claire ce qu’il me fallait avant de commencer la réalisation de son site internet.

    Encore une fois merci ;)

  • Encore une fois super tuto ré adaptable à pleins de situations !! merci

  • Merci beaucoup, ce tuto est vraiment utile !

  • Tuto très intéressant. Par contre il aurait été encore plus intéressant de partir d’une charte graphique près existante, ce qui doit représenter 2/3 des projets, et des fois la charte graphique a reprendre est une vrai catastrophe, et là c’est un vrai challenge. Sinon je confirme le cahiers des charges est un vrai impératif.

    • Justement tu le dis toi-même, reprendre une charte graphique pré-existante peut être une plaie. Dans le cadre d’un tutoriel ce n’est pas facile à mettre en place sans atteindre une entité existante et risquer des problèmes.
      Merci pour ton commentaire, j’espère que ce tutoriel te sera tout de même utile.

      • Oui pas de problème, c’est un très bon tutoriel, très complet. Ce n’était qu’une petite remarque.

  • Bonjour,
    Je l’attendais et tu l’as fait !
    Je te tire mon chapeau, bravo pour ce super résultat, un grand grand merci.
    J’ai pas encore tout lu, mais rien que de l’avoir fait, c’est déjà énorme.

    Tout simplement bravo et merci Gaétan.

    Vivement l’intégration.

  • Merci à vous pour ces commentaires ! Je suis content qu’il vous satisfasse.
    Pour info, je rajoute ce soir le PSD du webdesign en téléchargement dans ce tutoriel !

  • J’ai parcouru l’article mais je le garde de côté ! Très intéressant.
    Dommage que le site soit fictif, il aurait été super. J’aime beaucoup ! :)

  • C’est vraiment bien comme tutoriel! Bravo Spartan. Et, je suis content que tu ai prit compte de mes remarques à propos du menu du haut. ^^

  • Merci pour vos commentaires. Le PSD est en ligne et téléchargeable en haut de cet article.

  • J’avoue avoir laché la lecture à partir de Photoshop mais le point que j’ai trouvé extrêmement intéressant était au tout début : le fameux « Quel est l’objectif de ce site ? » que je pose obligatoirement à tous les prospects que je rencontre et qui permet de savoir si la personne en face a vraiment réfléchi à son projet ou pas. Parfois, notre interlocuteur ne comprend pas pourquoi on lui pose cette question et plus rarement hélas, j’obtiens une vraie réponse construite.

  • C’est la premier fois que je lit un tuto comme celui-ci et il est vraiment genial, je voit pas d’autre mot , merci spartan, je vais le faire tournée un peu partout tu peut me faire confiance

  • Cela tombe tellement au bon moment, c’est assez incroyable,d’autant plus que la qualité est au rendez vous et que ce type de démarche est très rare.
    Je pense que ce sera une aide précieuse pour me lancer, un grand merci.

  • Moyen moyen quand même le chinois à l’envers :)

    • Bah quoi ! Faut se dire que c’est un effet miroir ! haha :)

  • Un tuto que j’attendais

    merci

  • Vivement la partie 2 car c’est là que j’ai le plus de lacunes :)

    Ceci dit, rien a redire sur cette première partie plutôt complète bien qu’un approfondissement sur la 960 grid system aurait été bien pour les novices. Mais bon là c’est vraiment pour trouver un défaut ;)

    Sur ce, bonne continuation ou plutôt bon courage !

    jojo

  • j’attend avec impatience la suite !!! viiiiiiiiiiiiiiite lol j’plaisante biensur prend ton temps et fait nous quelque chose de merveilleux comme ce tuto, je l’ai appliquer a la lettre et et le rendu je le trouve magnifique !! merci merci

  • super cool ce tutoriel super bien expliquer je vais peut être enfin arrivé à réaliser mon propre design je vais attendre la suite avec impatience merci encore pour ce tutoriel Après de mois et des semaines impossible de réaliser mon site gros souci de compréhension du css a très bientôt donc…

  • Web-design vraiment très beau, qui va a l’essentiel tout comme le tutoriel. Bravo à toi et merci ! :)

  • Joli travail Gaétan tu gères !

  • Merci à tous pour vos commentaires. La 2è partie du tutoriel devrait bientôt arriver ! ;)

  • Allez courage ^^

  • Keep it that way comme on dit ! =D

    That’s all, Folks !

  • Super tutoriel vivement la suite…

    Classos

  • Bonjour et merci pour ce tutoriel, très utile pour hiérarchiser efficacement son travail, afin de gagner du temps dans la préparation du projet avec le client.

    Bonne continuation !

    Fabien H.

  • Bravo pour ton tutoriel, il est vraiment de grande qualité ! Vivement la suite.

  • Je te remerci beaucoup pour ce tuto car j’en avais vraiment besoin par ce que je suis entrain de suivre une autoformation pour la création de site web.
    vivement pour la suite
    et encore mer

    Boli

  • Je te remercie beaucoup pour ce tuto car j’en avais vraiment besoin par ce que je suis entrain de suivre une auto formation pour la création de site web.
    vivement pour la suite
    et encore mer

    Boli

  • super tuto, merci. Je commence à peine le web en formation et vos informations me sont d’une grande utilité.

  • J’avoue que je passe 1x par semaine en espérant voir la suite ^^
    Trop impatient !

  • Cool,
    Mais t’inquiète pas on est paaa ss stré stréssé duu tout :p
    Tu fais comme tu peux !
    Mais j’ai vraiment hâte de voir la suite, pour m’entrainer.

  • Moi qui cherchais à me relancer sérieusement dans photoshop en utilisant des méthodes plus « professionnelles », je suis comblé par ce tutoriel magnifiquement construit ! Je vais mettre tout ça en application dès ce soir ! Pour autant j’attends surtout la partie 2, la découpe du design étant (en ce qui me concerne) la partie la plus complexe, ainsi que la mise en page en CSS !

    Vivement donc cette deuxième partie ! Merci à l’auteur pour ce très bon tuto ! ;)

    Ps: Serais ce possible d’expliquer plus en approfondi comment mettre en place et utiliser « 960 Grid » ? Ce serait super, merci !

    Zne

    • Merci. :)
      Pour 960 Grid, il n’y a rien de plus compliqué que ce que j’ai expliqué. ll suffit de le télécharger et de glisser le calque dans ton PSD. Pour arriver à une largeur de site supérieure (980 ou même 1000 px), il suffit bêtement de faire une transformation manuelle en l’étirant.
      Après cela permet d’aligner parfaitement et de bien diviser la largeur (si par exemple on veut placer 3 colonnes de largeur et d’espacement égaux).
      J’espère avoir été clair. :)

  • INFO :
    Après deux semaines de dur labeur, la page est 100% intégrée et j’ai rédigé 30% du tutoriel. Si je me débrouille bien, je peux finir cette partie demain.
    Autant dire que le boulot est énorme pour ce tutoriel.
    Merci pour votre patience !

  • Super tuto très instructif, bien pensé, et très bien réalisé.
    Merci beaucoup.

  • [...] de l’année qui m’a occupé un nombre colossale d’heures intitulé « Comment créer un site d’entreprise de A à Z » découpé en 3 parties : webdesign, intégration puis développement. Pour conclure, [...]

  • Un tutoriel comme le web en attendait depuis longtemps!

    Je croyais pouvoir me débrouiller pour cette partie mais suivre le tuto a été très instructif : je n’ai que très peu de bases en développement donc je n’avais pas en tête quand je faisais des design sous photoshop le travail qui devait suivre. Ceci rendait la tâche qui suivait assez ardue pour un débutant… J’irai approfondir mes bases avant de m’attaquer aux parties 2 et 3.

    J’ai un professeur d’éco qui a un blog un peu basique et je me suis dit que ça pouvait être un bon exercice que de tenter de développer ce blog avec une tête un peu plus potable et plus de possibilités. D’autant plus que ça se prêtait plutôt bien au cadre du tuto (un blog, c’est un site avec des actualités qu’on veut mettre à jour).

    Je voudrais donc l’avis sincère des internautes (qui ont le temps) sur ce que j’ai fait en suivant le tuto, ainsi que des critiques et des commentaires notamment sur le découpage et l’intégration future du design (que voici : http://www.hebergementimages.com/image-8f627f796306ec37efecc3ad6523798d_template.jpg.html )

    N.B : J’ai prévu un menu déroulant dans la barre de menu; mais je pense la modifier (resserrer le texte). J’ai également prévu de modifier et/ou étoffer la partie « Quelques statistiques ».
    Je n’ai pas beaucoup innové dans ce design et il est clair que j’ai suivi le tuto, mais c’est le but: la rigueur !

    Merci pour le tuto
    Merci pour les commentaires

  • [...] Real Tea (Tutorial em Francês) [...]

  • Merci pour ce tuto, et pour la série comlète

  • bjr je voudrais savoir si je peu l’utiliser ce template?

    • Salut didier, malheureusement non, ce template est présent ici pour servir d’exemple et ne doit en aucun cas être utilisé à des fins personnelles.

  • Salut :-)

    Super ce tuto.
    Good Job !
    Bien expliqué, clair, et le design bien fait.

    Maintenant, soit, j’ai raté quelque chose, soit,non. Mais je ne trouve pas la deuxième partie… l’intégration! aye ! :-)

  • Très sympa cet article! C’est toujours utile de voir comment font les autres ! ^^ Surtout que je n’ai aucune méthode précise (en meme temps ce n’est pas mon métier :p )

    Mais une question me tourne tout de même dans la tête : Quelle largeur donner à son site aujourd’hui étant donné la variété de résolution d’écran… ?
    L’idéal serait un design qui se réorganise tout seul mais ce n’est pas à la portée de n’importe quel pékin (moi en l’occurrence ! ^_^ )
    Vous préconisez 970 de large pour les écran 1024, pourquoi cette valeur ? quid des résolutions plus petites ?
    ++

    • En général, sur un site pour desktop (ordinateur) on peut aller jusqu’à 1000px de large, voire 1200px. Cela bien sûr pour la zone de contenu, le fond pouvant dépasser.
      Pour les tablettes et mobiles il faut dans l’idéal viser des résolution plus basses mais il en existe tellement qu’il n’y en a pas de précise… L’idéal reste un site en responsive si c’est un objectif primordial pour le site.

  • Excellente démonstration de clarté de maîtrise et de simplicité, je dis BRAVO.

  • [...] Créer un site d’entreprise de A à  Z 1/3 : Réflexion & Webdesign « Living Tuts : Tutoriel… Photoshop [...]

  • [...] Créer un site d’entreprise de A à  Z 1/3 : Réflexion & Webdesign « Living Tuts : Tutoriel… Inspiration [...]

  • [...] Inspiration Créer un site d’entreprise de A à  Z 1/3 : Réflexion & Webdesign « Living Tuts : Tutoriel… [...]

  • BRAVO, tutoriel magnifique et d’une simplicité à couper le souffle.

  • Ce qui serais cool pour un tuto aussi bien réussi est de l’avoir en format PDF afin de pouvoir le consulter sans connexion internet :p

    En tout cas super tutoriel !

  • Super tutoriel…continue sue cette voix, tu fais le bonheur de nouvel apprenant …Mais ça serait vraiment super d’avoir ce tutoriel au format PDF.
    J’ai eu le temps de parcourir aussi l’intégration HTML / CSS3 …Le tuto est clair et assez accessible mais pas pour tous…enfin je ne sais pas pour les autres mais je fais mes débuts en intégration HTML ça va mais par contre le CSS3 « c’est la mer a boire » comme le dirait mon prof …lol.
    Pour dire simplement sur tu pouvais nous fournir un petit plus quand à la base de l’intégration ça serait vraiment génial et complet.
    Merci

    • Merci beaucoup pour ton commentaire, je suis content que le tuto te plaise.
      Concernant les bases de l’intégration, justement ce tutoriel comme la majorité sur ce site ne sont pas orientés pour les débutants mais généralement plus vers les intermédiaires/confirmés voire les experts même quelque fois. C’est donc normal si la difficulté peut être un peu déroutante quelque fois.
      Tout simplement l’apprentissage complet du CSS depuis les bases seraient beaucoup trop long à expliquer et surtout de nombreuses personnes l’ont déjà fait avant moi. :)
      A bientôt !

  • Salut Design Spartan,

    super tuto, j’ai beaucoup apprécié la partie « gestion » du projet qui semble plus qu’indispensable pour que tout se passe dans de bonnes conditions avec le client.

    Il ne manque qu’une chose à mon avis, c’est la partie facturation. Il aura été intéressant de simuler jusqu’au bout le projet et de proposer une facturation réaliste.

    Merci pour ce tuto !

    • Merci, content qu’il t’ait plus !

      La facturation est une idée intéressante mais c’est toujours une partie très délicate car beaucoup de facteurs entrent en compte comme le statut, le choix du prix qui est lui-même à faire en fonction de beaucoup de choses, etc… Je ne pense pas qu’un tutoriel sur le sujet soit réalisable. Mais en revanche des articles de blogs donnant des conseils pour en faire et deviser correctement un projet existent. Tu en trouveras notamment en cherchant un peu sur mon site designspartan.com.

      A bientôt !

      • Ok, merci pour ces infos et à bientôt.

  • Bravo,

    Tuto bien structuré, et surtout allant à l’essentiel.

    Je te remercie.

  • Excellent Tuto, mais alors franchement j’arrive pas a trouver la forme de pinceau que tu utilises pour le Head et avoir ce rendu.. :(

    • Pour le brush, tout bêtement c’est le rond de base ! J’ai utilisé une tablette graphique afin de gérer l’opacité en fonction de la pression.

  • Salut,

    Ton tutoriel est très beau. Cependant, c’est la première fois que j’utilise CS6 et je suis bloqué au début de ton tuto. Je ne sais pas du tout comment afficher les grilles 960 grid System. Si tu pouvais m’indiquer les différentes étapes.

    J’ai pu télécharger sur le lien que tu présentes. J’ai mis en place l’extension en double cliquant sur le « .mxp ». Mais ensuite … je ne sais quoi faire pour arriver au capture d’écran que tu présentes :).

    Cordialement ,
    Cdo

    • Salut Cdric, je vais te simplifier la vie dans ce cas. Normalement dans le zip que tu as téléchargé, il y a un PSD. Ouvre tout bêtement ce PSD (tu y verras les repères placés comme il faut) et travaille à partir d’une copie de ce PSD. C’est comme ça que j’avais fait. ;)

  • [...] Voici un excellent tutoriel pour fabriquer son design avec Photoshop : http://fr.livingtuts.com/photoshop/creer-un-site-dentreprise-de-a-a-z-13-reflexion-webdesign/ [...]

  • trop cool ce cool

  • j’an rêvais, un grand merci a l’auteur

  • Absolument parfait! Superbe boulot.
    Maintenant il faut que je m’y mette….

  • Très bon tuto. Merci.

  • Merci pour se tuto vraiment clair et complet, j’ai hâte de voir la 2nde partie !

  • Slt !
    excellent tuto ! merci beaucoup d’avoir pris le temps de le réaliser. J’ai juste une question : ou definit-on le mot de passe et l’identifiant dans la page connexion.php… je suis debutante…. et je ne vois pas ou je peux l’insérer…

    Merci d’avance pour vos réponses !

  • Merci pour ce tutoriel complet. Je ne connais rien en photoshop et je veux savoir si je peux passer cette partie pour entamer la partie 2 et 3 car au moins j’ai quelques bases en programmation (HTML, CSS, PHP, MYSQL). Puis, je vais revenir à cette première partie pour la maîtriser parfaitement.

  • Bonjour,

    Je trouve que c’est un excellent tutoriel, et en plus, il est trés complet. Je suis caller en HTML et CSS…mais je suis mauvais en PHP et MYSQL…
    C’est pas grave! c’est ma passion et j’y arriverai.

  • juste pour savoir jai commencer a fr montage psd mais je n’arrive pas a trouver comment faire les ligne jai telecharger 960 GRIDSYSTOM mais jarrive pas a fr les ligne pouvez vous m’aider sil vous plai merci

  • thank you very much for sharing all that with us, really thank you^__^

  • Le psd n’est plus disponible? :(

  • très bien fait et j’ai pris le temps de le lire entièrement ,je le mets en pratique même si la partie sur photoshop m’a un peu douché

  • Un très grand merci pour ce tuto très complet et très agréable à lire. Pour ma part il me sera très utile.BRAVO!

  • Vraiment merci
    Franchement, ce tuto est trop bien fait et très bien expliqué, et en plus en français, merci beaucoup mon ami

  • Bravo.Bien expliqué.

Laisser un commentaire