Share
Ce que vous allez créerDans ce tutoriel, nous allons créer une mise en page pour un magasin d'articles artisanaux. Je ne parlerai pas trop des tailles de police ou des codes de couleur spécifiques, mais je m'attacherai plutôt à expliquer les choix de police, les couleurs, les proportions, etc..
Afin de suivre, vous aurez besoin de certains actifs (disponibles gratuitement):
Avant de commencer à concevoir votre mise en page, vous devez d’abord définir les objectifs commerciaux de cet exercice. La priorité absolue est-elle d'accroître la notoriété de la marque? S'agit-il de vendre des produits à de nouveaux clients ou de leur fournir d'abord de la valeur, d'obtenir leurs coordonnées puis de les vendre plus tard? Vous devez penser au marketing, aux objectifs commerciaux et aux besoins de vos utilisateurs afin de concevoir une présentation qui persuade votre public cible de prendre les mesures que vous souhaitez..
Commencez par poser ces questions:
Pour ce tutoriel, j'ai décidé de mettre l'accent sur des images fortes et une utilisation généreuse de l'espace négatif afin de créer un sentiment de liberté et de clarté. Je veux que le design soit élégant et attrayant pour les personnes soucieuses de leur image.
Avant de vous lancer dans Adobe Photoshop et d’obtenir des effets visuels, définissons certaines variables telles que les couleurs, le style et la direction générale.
Commencez à collecter des images que vous aimez pour votre moodboard et votre palette de couleurs. J'utilise habituellement Pinterest, mais gomoodboard.com est très utile et a été conçu uniquement pour créer des moodboards..
gomoodboard.com est un outil de moodboarding simple et facile à utiliser.Ensuite, formons un jeu de couleurs pour votre conception; un qui est pertinent pour votre marque et fera appel à votre public cible. Il est souvent recommandé d’utiliser un générateur de palette de couleurs tel que Adobe Color CC (anciennement Kuler), qui peut vous faire gagner du temps lors de la sélection des couleurs..
Téléchargez une image de votre moodboard et voyez quelles couleurs sont générées. Ajustez la palette en fonction de vos besoins et enregistrez les couleurs pour référence future.
Adobe Color CC vous permet de créer une palette de couleurs à partir d'une image..Inspirés par certains des éléments de notre moodboard, nous allons avec la famille de caractères Source Pro, y compris les versions sans et serif de la police. Un mélange des deux ajoutera une sensation équilibrée et des titres forts.
Avant d’être créatifs dans Adobe Photoshop, réglons certaines tâches administratives, telles que la création d’un nouveau document et la définition de certaines règles..
Ouvrez Adobe Photoshop et créez un nouveau document CMD + N. Définissez ses dimensions en fonction de vos besoins en matière de conception. Dans mon cas, c’est 1400x3564px.
Après cela, définissez des guides afin que notre mise en page dispose de suffisamment d’espace et ait un aspect équilibré. L'établissement de certaines lignes directrices assurera la propreté et aidera à définir la largeur de notre site Web aux fins de cette conception. Aller à Voir> Nouveau guide… et définir des lignes directrices. Je choisis généralement 1000px comme point de départ et j'ajoute quelques lignes directrices aux coins afin qu'il y ait de l'espace pour respirer.
Remarque: Instructions utilisées dans ce didacticiel: verticales à 200px, 500px, 550px, 700px, 850px, 900px et 1200px.
Pointe: Vous pouvez également utiliser le plugin GuideGuide Photoshop pour rendre ce processus encore plus rapide..
Nous allons commencer la conception de notre boutique en créant une zone supérieure attrayante visuellement pour capter l'attention du visiteur et envoyer un message instantané de ce que le site représente..
Créez un nouveau groupe appelé «Navigation» et définissez une nouvelle directive horizontale à 130px. C'est ici que réside notre logo, les liens de navigation et la recherche. Placez votre logo sur la gauche. Si vous n'en avez pas, créez un rectangle et placez le texte dessus.
Placez maintenant vos éléments de navigation sous forme de texte pur. Dès la phase de planification, vous devez déjà savoir ce que vous devez inclure dans votre navigation pour que votre client potentiel le trouve utile. Utilisez le Outil de type horizontal (T) pour écrire les titres de vos liens et les placer à côté de votre logo en laissant un espace suffisant.
La recherche est une fonction extrêmement importante en matière de commerce électronique. Rendez votre champ de recherche visible et accessible en le plaçant à droite de la barre de navigation supérieure. Pour le créer, utilisez le Outil Rectangle (U) et le Outil de type horizontal (T). Remarquez comment les couleurs sont inspirées de l'image que nous avons utilisée avec Adobe Color CC..
Il est maintenant temps de placer une image frappante qui constituera le point central de tout le site Web une fois que le visiteur l'aura vue pour la première fois. Comme vous le constaterez assez couramment sur le Web ces jours-ci, nous choisirons une image de haute qualité avec un objectif clair et net, ce qui permettra de superposer du texte et des éléments d'interface utilisateur..
En utilisant Outil Rectangle (T) dessine un 1400x700px (n'importe quelle couleur) rectangle et placez-le juste en dessous de la barre de navigation supérieure (rappelez-vous la ligne directrice horizontale de 130 pixels? C'est pour cette forme). Ensuite, faites glisser une image de votre choix et placez son calque au-dessus du calque de forme rectangulaire.
Après cela maintenez la Alt et placez la souris sur le calque de l'image jusqu'à voir une petite flèche pointant vers le bas, puis relâchez la souris pour créer un Masque d'écrêtage de sorte que l'image n'est visible que dans la zone du rectangle.
Frappé CMD + T pour redimensionner la photo, en vous assurant de maintenir le Décalage clé de sorte que vous redimensionnez proportionnellement.
Pour que notre image attire davantage l’attention sur le centre horizontal, ajoutons un dégradé qui va du transparent au noir en bas. Ramasse le Outil de dégradé (G) et le personnaliser pour aller du noir # 000000 à transparent. Après cela maintenez Décalage touchez-la et faites glisser votre souris du bas de l'image vers le milieu pour créer un dégradé. Puis en faire un Masque d'écrêtage et réduire ses Opacité à 50% donc ce n'est pas aussi intense. Renommez le calque en "Shadow" pour qu'il soit facile à identifier.
Il est maintenant temps d'utiliser un titre puissant qui attire l'œil de vos visiteurs et les encourage à en savoir plus. Utilisez Source Sans Pro, gros et gras, et rédigez un titre abrégé. J'ai utilisé Source Sans Pro (Noir) 70px taille et 160 pour lettre suivi.
Vous avez attiré l’attention de l’utilisateur, vous fournissez maintenant un message secondaire et, plus important encore, un appel à l’action (également appelé CTA.) J'ai utilisé 28px Taille Source Serif Pro (Régulier) pour le sous-titre et ré-utilisé le bouton de recherche pour garder l'interface utilisateur cohérente.
Remarquez l'espacement que j'utilise. Laissez toujours suffisamment d’espace autour des éléments pour qu’ils soient perçus plus rapidement et plus structurés. De plus, si vous regardez de plus près, vous verrez que les calques de texte sont plus proches les uns des autres. Ceci est dû à la loi de proximité de Gestalt.
"Selon la loi de la proximité, les choses proches les unes des autres semblent être regroupées."
Et nous en avons terminé avec la zone «accueil de nouveaux clients» ou en-tête. Après avoir attiré l'attention et l'intérêt des visiteurs, il est temps de leur montrer quelques avantages supplémentaires offerts par notre boutique..
Comme nous avons minimisé la partie supérieure de notre site Web, nous adoptons une esthétique simple et nette pour le reste de la mise en page..
Placez un titre qui pourrait intéresser vos visiteurs et une courte description qui les encouragera encore plus. J'ai utilisé Source Sans Pro (Semibold) 24px et un gris foncé # 282723. Assurez-vous de laisser beaucoup d'espace au-dessus du titre pour qu'il soit cohérent avec la zone supérieure..
Pour la description, utilisez quelque chose de plus brillant, visuellement plus léger et immédiatement perçu comme d'importance secondaire. J'ai utilisé 16px Source Serif Pro (Régulier) et la couleur est grise #adadad.
Un moyen efficace de créer un climat de confiance consiste à utiliser des images attrayantes de haute qualité qui déclenchent le cerveau et créent le désir. Assurez-vous de consacrer du temps à prendre de superbes photos de vos produits ou à faire appel à un photographe professionnel. Pour ce tutoriel, j'utiliserai des produits fictifs afin de ne pas avoir à prendre des photos moi-même, mais plutôt à partir d'Unsplash et de Stock Up..
Choisissez le Outil Rectangle (U) et dessinez une forme de rectangle. Après cela, faites glisser la photo de votre produit dans Photoshop, placez-la sur le rectangle et créez un Masque d'écrêtage. Redimensionnez l'image si nécessaire en appuyant sur CMD + T.
Placez votre rectangle entre le premier et le deuxième repère vertical, car nous avons défini des zones égales pour les images de produit au début..Pour que les choses restent simples, nous ne fournirons que des informations de base sur le produit, notamment le titre et le prix (ce qui pourrait inciter les utilisateurs à en savoir plus)..
Choisissez le même Source Serif Pro police et entrez le titre en utilisant le gris plus foncé utilisé pour le titre de la section. Après cela, utilisez un gris plus clair pour le prix, car il s’agit d’une information secondaire qui ne nécessite pas trop de force visuelle. Une autre chose à garder à l’esprit est que nos éléments de magasin tels que les titres, les boutons d’appel à l’action et les blocs de description sont centrés..
Maintenant, placez toutes les couches de produits dans un groupe et dupliquez-les en appuyant sur CMD + J, placez-les entre les repères verticaux définis précédemment, en laissant des espaces entre.
Nous en avons terminé avec une section «Tendances» comprenant trois produits. Selon Paul Seys, trois options constituent le nombre optimal pour rendre votre offre plus convaincante..
«L'une de ces techniques est connue sous le nom d '« effet Goldilocks »(ou« Goldilocks Pricing »). Le terme dérive du récit des frères Grimm dans lequel Goldilocks mange trois bols de porridge; le premier étant trop chaud, le suivant trop froid, mais le dernier "juste ce qu'il faut". "
Maintenant, mettons un petit séparateur pour séparer la mise en page en sections. J'ai utilisé le Outil Ligne (U) 1px gris clair # e6e6e6 il est donc visible, mais pas trop fort.
Pointe: Maintenez Décalage clé pour tracer facilement une ligne parfaitement horizontale.
Maintenant, créons une autre section montrant plus de produits et appelons-la «populaire». Les gens sont toujours à la recherche de validation et présentent des produits populaires que d'autres aiment, ce qui leur donne une preuve sociale que ces produits en ont pour leur argent.
Dupliquer CMD + J et personnalisez le titre, la description et les produits de la section «Tendances». Dupliquez plus de produits et faites une grille de 3x2 de vos meilleurs produits.
Après avoir exposé la plupart des éléments visuels pour susciter l'intérêt et le désir, il est temps de capturer les informations des visiteurs au cas où ils n'auraient pas envie d'acheter maintenant, pour que vous puissiez contacter plus tard..
Nous allons inclure une simple section de blog utilisant le même format de titre et de description, ainsi que des extraits de billets de blog pour rediriger les utilisateurs vers des contenus susceptibles de les intéresser..
Choisissez le Outil Rectangle (U) et dessinez un rectangle énorme qui servira d’arrière-plan à cette nouvelle section. Utilisez un gris clair discret pour créer une légère séparation des produits. J'ai utilisé #fbfafa. Maintenant, dupliquez le titre et la description de la section précédente et placez-les au-dessus du nouveau fond..
Maintenant, choisissez le Outil de type horizontal (T) et entrez le titre, la date et le court extrait de votre article de blog. J'ai encore une fois utilisé Source Serif Pro pour le titre et la description et Source Sans Pro pour la date.
Même dans ce bloc de blog, vous remarquerez une hiérarchie visuelle claire, le titre étant le plus sombre et le plus grand et les autres éléments plus petits et de couleur plus claire. Utilisez toujours une hiérarchie visuelle pour obtenir un flux logique. Pour maintenir la cohérence, rendez les articles de blog aussi gros que les blocs de produit..
Maintenant, placez tous les calques de publication de blog dans un groupe et dupliquez-le deux fois en appuyant sur CMD + J, placez-le entre les repères verticaux en laissant les espaces entre eux comme avec les produits.
Après avoir présenté des produits intéressants et de précieux articles de blog, il est temps de pousser un peu vos visiteurs et de fournir un formulaire avec un appel clair à l'action pour vous abonner..
Encore une fois saisir le Outil Rectangle (U), choisissez une couleur plus foncée, comme # 282723 et dessinez un fond pour notre formulaire d’abonnement. En utilisant un arrière-plan sensiblement plus sombre, vous créerez un contraste qui attirera automatiquement l'attention des spectateurs..
Maintenant, rédigez un court texte expliquant pourquoi les gens devraient s’abonner; Express avantages plus de fonctionnalités. Après avoir navigué dans la navigation de notre conception et dupliqué le champ de recherche, y compris le bouton, nous le réutiliserons pour le formulaire d’abonnement..
Faites glisser les calques dupliqués et placez-les sur le nouvel arrière-plan créé, puis personnalisez les champs de saisie et le bouton d'appel à l'action..
Enfin, chaque modèle doit avoir un pied de page avec des liens inclus pour que les personnes puissent faire défiler et trouver les pages de navigation clés, telles que le support client, les informations de contact, les réseaux sociaux, etc..
Encore une fois, dupliquez les couches de texte de publication de blog et personnalisez-les pour afficher les liens de votre choix. Divisez différents groupes de liens et formez des colonnes équidistantes dans une ligne..
Dernière touche: ajouter une ligne de copyright au bas de la mise en page.
C'est tout! Nous en avons enfin terminé avec la conception du thème de notre magasin utilisant Shopify. À présent, passez en revue vos couches de documents, supprimez celles qui ne sont pas nécessaires et remettez-les à votre développeur, ou mieux, codez-les vous-même.!
Accentsconagua