Créer une mise en page de site Web propre dans Photoshop – Concevoir une mise en page de site Web ne se limite pas à organiser des images colorées et à remplir du texte dans les cadres de texte. C’est une approche qui en dit long sur l’activité de votre client. Les couleurs et les graphismes du site Web définissent la nature de l’entreprise, tandis que la qualité du design et la facilité de navigation du site Web doivent lier l’utilisateur à l’organisation et en faire un client potentiel.
La conception d’une mise en page de site Web attrayante et facilement accessible est obligatoire pour tout concepteur Web en herbe. Ce tutoriel est destiné à vous guider dans le processus de création d’une mise en page de site 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 en matière de conception Web.
Notez vos besoins avant de concevoir une mise en page du 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 de site Web dont votre client a besoin sur son site Web. Parallèlement à cela, la qualité d’un bon concepteur est de préparer une maquette de l’ensemble du site Web avant de commencer à travailler sur le modèle final.
Commencez Votre Cours de Design Gratuit
Animation 3D, modélisation, simulation, développement de jeux & autres
Diverses sociétés de conception adaptent différents niveaux de stratégies de pré-conception, qui peuvent contenir du cadrage, du prototypage, des maquettes, des versions bêta et bien plus encore. Dans ce tutoriel, nous allons créer une version de maquette avant de lancer la conception du modèle original. J’utilise les nuances de gris, qui permettent d’identifier le bloc de maquette.
Canvas
Des années auparavant, alors qu’il y avait très peu d’OS et de périphériques 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 tout autre. 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. Il n’y a aucune chance que vous puissiez fixer votre page Web à une taille particulière dans cette situation diversifiée. Mais il existe des tailles standard de l’industrie appliquées pour chaque appareil. Vous trouverez lentement votre taille préférée, ou votre client peut vous référer à 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, vous ne pouvez donc pas fixer une hauteur particulière pour votre page Web à moins que vous ne souhaitiez pas que l’utilisateur fasse défiler votre page d’accueil en tant que Google. Mais, il est nécessaire de ne pas faire défiler horizontalement. Limitez donc 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 des images et des pages de plus haute résolution trouvées sur les iPads et quelques tablettes récemment. 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 les uns par rapport aux autres. 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 compléter le cadre en quelques minutes. Cependant, la maquette ne vous aidera qu’à concevoir les cadres. Compléter les éléments de conception avec les détails, la disposition du type et l’alignement prendra plus de temps que de dessiner la mise en page du site Web.
Schéma de couleurs et autres choix
La prochaine chose à faire après avoir préparé votre cadre est de choisir un schéma de couleurs. Mais, il est préférable de préparer vos couleurs avant de commencer à travailler sur le design.
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, devrait être prêt avant de commencer à travailler. L’organisation et la planification de votre travail vous feront gagner plus de temps et se concentreront sur la conception sans obstruction 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. Les clients donnent une idée des nuances qu’ils souhaitent que le logo ou l’arrière-plan soient dans certains cas. En ce qui concerne les 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.
Couleur.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 nuances et assurez-vous que les couleurs jouent un rôle essentiel dans chaque verticale de l’organisation, en particulier 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 dures 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 l’ensemble des blocs et des cadres et commencer à travailler sur les détails dans la deuxième étape, suivie du type et enfin des alignements et des ajustements. Certains aiment terminer 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 & Pied de page
- Ce que nous faisons
- Services
- Formulaire
- Actualités
- Pied de page
En-tête & Pied de page
La règle empirique 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 de hauteur et une hauteur de 550 pixels pour la bannière. La largeur doit correspondre à la taille du document.
Les modèles 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 dégradé sur le dessus de la bannière. Cela donne à la bannière une profondeur qui se transforme lentement d’une nuance à 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 de médias sociaux.
À ce stade, j’ai fini d’ajouter le type dans la partie Bannière de l’en-tête &. 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.
Le texte brut ou trop de type sans fonctionnalités spéciales gâcheront l’apparence de votre page web; la page ennuiera bientôt l’utilisateur, ce qui pourrait lui permettre de quitter rapidement votre site. Découvrez la forme vectorielle que j’ai ajoutée aux liens de services en haut à droite de la bannière. Le style est simple, mais il comble le vide en évitant le look banal.
Choisissez une image appropriée à l’entreprise. Il y a des millions d’images 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 de droits ci-dessous
www..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
- Changez l’opacité de l’image de 40% et changez le mode de fusion en différence.
- Consultez la palette calques de l’image ci-dessus pour comprendre comment les calques sont empilés les uns sur les autres.
Voici à quoi ressemblera votre bannière d’en-tête & 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 en matière de type; ayez une idée de l’apparence de votre site et du texte à aligner avant de le démarrer. À ce niveau, j’ai utilisé deux cadres 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 les différents services de l’entreprise. L’intention derrière l’utilisation du symbole de l’étoile est des 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 espaces égaux entre les éléments de conception. J’ai utilisé de nombreuses directives de mise en page de sites Web pour voir que tous les objets du cadre doivent maintenir des espaces et des distances appropriés, ce qui fait ressortir une bonne quantité d’espaces blancs.
L’étape suivante de notre conception consiste à créer le champ de 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 dégradé au-dessus des deux calques pour obtenir un meilleur aspect. Jouer avec les modes de fusion est toujours essentiel lorsque vous placez 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 de calque.
Jetez un œil à la palette de calques de l’image ci-dessus. Le calque de couleur bleue unie se trouve 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 de conception de notre site Web.
Notre niveau suivant se compose de deux cadres de texte simples. Il ressemble au niveau deux de la page Web, et j’ai utilisé aligné les deux cases similaires au haut. Maintenir la cohérence dans l’alignement est un bon moyen d’utiliser l’espace blanc.
Alors que nous atteignons 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’espaces blancs dans notre conception et ajoutons du texte simple avec des polices minimales. L’intention est de concevoir une page Web propre, ce que nous espérons être réalisé.
Veuillez revoir la conception de la page entière ci-dessous.
