Créer une mise en page de site Web propre dans Photoshop - Concevoir une mise en page de site Web est plus que d'organiser des images colorées et de remplir du texte dans les blocs de texte. C'est une approche qui en dit long sur les affaires de votre client. Les couleurs et les graphiques du site Web définissent la nature de l'entreprise, tandis que la qualité du design et la fluidité de navigation du site Web devraient lier l'utilisateur à l'organisation et le transformer en client potentiel.
Concevoir un site Web attrayant et facilement accessible est obligatoire pour tout concepteur Web en herbe. Ce didacticiel est destiné à vous guider tout au long du processus de création d'une mise en page Web simple et propre, à partir de zéro. Au cours du processus, vous apprendrez des points importants qui vous aideront à acquérir davantage de connaissances sur la conception Web. 
Notez vos besoins avant de concevoir une mise en page de site Web
Avant de commencer à concevoir une mise en page de site Web, vous devez savoir à quoi ressemblera votre site Web et quels sont les sujets que vous devez inclure dans le site Web. Il est crucial de faire une liste des éléments de mise en page du site Web dont votre client a besoin sur son site Web. Parallèlement à cela, la qualité d'un bon designer est de préparer une maquette de l'ensemble du site Web avant de commencer à travailler sur le modèle final.
Diverses entreprises de conception adaptent différents niveaux de stratégies de préconception, qui peuvent contenir des cadres de câblage, des prototypes, des maquettes, des versions bêta et bien plus encore. Dans ce didacticiel, nous allons créer une version maquette avant de lancer la conception du modèle d'origine. J'utilise les nuances de gris qui permettent d'identifier le bloc maquette
Toile
Des années auparavant, alors qu'il y avait très peu de systèmes d'exploitation et d'appareils limités pour accéder aux sites Web, les dimensions de la page étaient fixées à une ou deux tailles. Aujourd'hui, le scénario est entièrement différent. Les utilisateurs finaux accèdent à des sites sur des ordinateurs de bureau de différentes tailles, des téléphones mobiles, des iPads et des tablettes. Dans cette situation diversifiée, il n'y a aucune chance que vous puissiez fixer votre page Web à une taille particulière. Mais il existe certaines tailles standard de l'industrie appliquées à chaque appareil. Vous trouverez lentement votre taille préférée ou votre client peut vous recommander un site Web pour imiter les tailles.
Dans ce cas, nous travaillons sur les dimensions suivantes. Ne vous inquiétez pas de la hauteur car elle va changer avec le temps. Plus vous ajoutez de contenu à votre site Web, plus la hauteur sera élevée.
N'oubliez pas qu'il est courant de faire défiler la page verticalement, de sorte que vous ne pouvez pas fixer une hauteur particulière pour votre page Web, sauf si vous ne voulez pas que l'utilisateur défile sur votre page d'accueil en tant que Google. Mais, il faut ne pas faire défiler horizontalement. Donc, limitez votre largeur selon les normes de l'industrie et ne soyez pas créatif avec le défilement horizontal.
Pour le Web, la résolution est limitée à 72. Il y a récemment des images et des pages de plus haute résolution sur les iPad et quelques tablettes. Mais c'est une occasion rare, et il vaut mieux s'en tenir à 72 compte tenu de la vitesse d'Internet à travers le monde.
Sélectionnez les fichiers à l'aide de la commande Ctrl + A et dessinez des guides de manière égale dans tout le modèle. Un site Web doit être soigneusement organisé, chaque élément étant organisé de manière cohérente. Et les directives de mise en page du site Web vous aident à l'obtenir facilement.
Préparez votre maquette
Placer votre fichier de maquette sur votre modèle d'origine vous permet de gagner beaucoup de temps. La conception de votre site Web devient si facile que vous finirez par terminer le cadre en quelques minutes. Cependant, la maquette ne vous aidera qu'à concevoir les cadres. Compléter les éléments de conception avec des détails, la disposition des types et l'alignement prendra plus de temps que de dessiner la mise en page du site Web.
Palette de couleurs et autres choix
La prochaine chose après avoir préparé votre cadre est de choisir un jeu de couleurs. Mais, il est préférable de préparer vos couleurs avant de commencer à travailler sur la conception.
Le tout se résume au message suivant: préparez vos armes avant de commencer la conception. Tout, y compris les icônes, les images et les choix de couleurs, doit être prêt avant de commencer à travailler. Organiser et planifier votre travail vous fera gagner plus de temps et se concentrera sur la conception sans obstacle entre les deux.
Le choix des couleurs peut être le choix du concepteur si l'entreprise est nouvelle et n'a pas d'identité d'entreprise auparavant. Dans certains cas, les clients donnent une idée des nuances qu'ils souhaitent que le logo ou l'arrière-plan soient. Dans le cas des entreprises existantes où vous devrez peut-être repenser un site Web entier, vous devrez peut-être choisir les mêmes couleurs selon les besoins du client.
Il existe de nombreux sites Web qui peuvent vous aider à choisir des millions de couleurs dans les archives. Essayez les sites Web suivants pour profiter d'un large choix de combinaisons de couleurs.
Color.adobe.com
Colourlovers.com
Ici, j'ai choisi quelques nuances de bleu à utiliser pour le site Web. L'ensemble du site Web sera planifié dans le schéma de couleurs suivant. N'oubliez pas de choisir trois ou quatre combinaisons de couleurs différentes, car nous ne savons pas quelle couleur le client préférera. Une fois que le client a finalisé un schéma de couleurs, enregistrez les valeurs de nuance et assurez-vous que les couleurs jouent un rôle vital dans chaque vertical de l'organisation. Surtout dans l'identité d'entreprise.
Processus de conception
Il existe de nombreuses façons de poursuivre vos concepteurs. Il n'y a pas de règles de mise en page de site Web strictes et rapides pour définir ou suivre le processus de conception, c'est principalement un processus que le concepteur choisira à sa convenance.
Certains concepteurs veulent construire les blocs et les cadres entiers et commencer à travailler sur les détails dans la deuxième étape, puis sur le type et enfin les alignements et les ajustements. Certains aiment finir une partie de la page à la fois et passer à la partie suivante. Nous suivons le deuxième style.
Nous terminerons le site Web dans les étapes suivantes
- En-tête et pied de page
- Ce que nous faisons
- Prestations de service
- Forme
- Nouvelles
- Bas de page
En-tête et pied de page
La règle d'or pour définir les dimensions de votre en-tête ou bannière est laissée à votre créativité. Selon les dernières tendances, les sites Web apparaissent avec une image énorme qui couvre tout l'écran de votre ordinateur. Le style est appelé image de héros, qui est devenu très populaire récemment.
Dans ce cas, nous avons commencé avec un en-tête de 120 pixels et une hauteur de 550 pixels pour la bannière. La largeur doit correspondre à la taille du document.
Les dessins de couleur unie ont un aspect plat qui ne va pas bien avec des cadres ou des images plus grands. Pour éviter l'aspect plat, j'ai appliqué un calque de superposition de dégradé sur le dessus de la bannière. Il donne à la bannière une profondeur qui se transforme lentement d'une teinte à l'autre.
Ensuite, nous avons commencé à importer le logo et à le placer dans le coin supérieur gauche de l'en-tête et un autre logo plus grand au centre de la bannière. Vous pouvez également observer les formes vectorielles de mise en page du site Web dans le coin supérieur droit, qui sont utilisées pour partager les liens des médias sociaux.
À ce stade, j'ai terminé d'ajouter le type dans la partie En-tête et bannière. Le nom de l'entreprise, le message de la marque, avec des liens et des services, sont ajoutés dans le texte. Vous pouvez également observer un bouton transparent sur la bannière.
Un texte brut ou trop de caractères sans caractéristiques spéciales gâchera l'apparence de votre page Web; la page va bientôt ennuyer l'utilisateur, ce qui peut lui permettre de quitter rapidement votre site. Découvrez la forme vectorielle que j'ai ajoutée aux liens des services en haut à droite de la bannière. Le style est simple, mais il remplit le vide en évitant le look banal.
Choisissez une image appropriée à l'entreprise. Il existe des millions d'images d'archives disponibles sur le Web, et il ne faudra pas trop de temps pour trouver une image qui correspond à vos besoins.
Dans mon cas, j'ai trouvé une image de haute qualité qui, je pense, ira bien avec mon site Web. Je n'ai pas de thème commercial pour le site Web, je suis donc libre de choisir n'importe quelle image qui semble bonne sur le message de la bannière.
Essayez de télécharger des images HD à partir des sites d'images libres ci-dessous
www.pixabay.com
Le mélange est un art que vous devez maîtriser pour produire de belles bannières. Ici, j'ai mélangé trois couches pour obtenir l'effet montré dans l'image ci-dessus. Voici ce que j'ai fait
- Placez le calque d'image au-dessus de la bannière de couleur bleue
- Placez la superposition de dégradé au-dessus de l'image
- Modifiez l'opacité de l'image à 40% et changez le mode de fusion en différence.
- Consultez la palette des calques dans l'image ci-dessus pour comprendre comment les calques sont empilés les uns sur les autres.
Voici à quoi ressemblera votre en-tête et bannière alors que nous venons de terminer de travailler dessus. Nous travaillons sur une partie à la fois, et il est temps de passer au niveau suivant.
L'alignement est crucial quand il s'agit de taper; avoir une idée de l'apparence de votre site et du texte doit être aligné avant de le démarrer. À ce niveau, j'ai utilisé deux blocs de texte différents, tous deux alignés à gauche.
L'étape suivante consiste à concevoir la partie services de la page Web. J'ai conçu une étoile métallique dans des tons gris pour mettre en valeur divers services de l'entreprise. L'intention derrière l'utilisation du symbole étoile est les services 5 étoiles.
Lorsqu'il s'agit d'aligner le texte, les guides sont vos meilleurs amis. La cohérence au sein du type et des objets peut être obtenue en faisant bon usage de l'espace blanc et des écarts égaux entre les éléments de conception. J'ai utilisé de nombreuses directives de mise en page de site Web pour voir que tous les objets dans le cadre doivent maintenir des espaces et des distances appropriés qui font ressortir une bonne quantité d'espace blanc.
La prochaine étape de notre conception consiste à créer le champ Formulaire. Dans ce cas, je travaille à l'opposé de la méthode que nous avons utilisée pour concevoir la bannière. Nous placerons le calque d'image sous le calque de couleur unie et appliquerons un calque de dégradé au-dessus des deux calques pour obtenir un meilleur aspect. Jouer avec les modes de fusion est toujours essentiel tout en plaçant des images plus grandes.
Le choix des images pour ce site n'a pas de thème spécifique lié à celui-ci. Je pense que cette image aidera le site à mieux paraître.
Placez l'image sous le calque d'arrière-plan coloré. Pour fixer l'image exactement à la taille du calque coloré, utilisez les options de masquage des calques.
Jetez un œil à la palette des calques dans l'image ci-dessus. Le calque de couleur bleu uni est en haut de l'image, le mode de fusion est converti en superposition et l'opacité est réduite à 65%.
J'ai utilisé la carte de dégradé au-dessus des deux couches. Le mode de fusion est changé en teinte et l'opacité reste la même.
La boîte de formulaire est prête, ce qui nous amène à la fin du quatrième niveau dans la conception de notre site Web.
Notre niveau suivant se compose de deux blocs de texte simples. Il ressemble au niveau deux de la page Web et j'ai utilisé aligné les deux cases similaires au haut. Le maintien de la cohérence dans l'alignement est un bon moyen d'utiliser l'espace blanc.
Alors que nous arrivons à la dernière partie de la page, il est temps de revoir les dimensions du pied de page. Le concepteur doit planifier la hauteur du pied de page en fonction des liens qu'il doit y utiliser. Dans ce cas, j'ai donné une hauteur de 170 pixels à mon pied de page. La largeur reste la même que celle du site Web.
Placez les liens et les images selon vos besoins.
Avec cela, nous avons conclu la partie conception de notre site Web. Les combinaisons de couleurs que nous avons utilisées sont minimales, nous utilisons beaucoup d'espace blanc dans notre conception et ajoutons du texte simple avec des polices minimales. L'intention est de concevoir une page Web propre, qui, nous l'espérons, sera satisfaite.
Veuillez revoir la conception de la page entière ci-dessous
