Avez-vous déjà ouvert un site Web et immédiatement cliqué dessus, bien entendu. Lorsque la conception d'un site est désagréable, vous êtes sur le marché plus rapidement que Cersei ne boit le vin EU. Dans un monde où tout le monde se bat pour des yeux, des sites mal conçus se préparent à l'échec.
Ne crains rien, je t'ai GOT. En tant que graphiste, j'ai déjà renommé des sites pour les clients qui utilisent Squarespace (ma plate-forme préférée) pour les aider à optimiser la conception de leur site pour leur marque et leur entreprise. J'ai résumé mes meilleurs conseils pour créer un site magnifique et fonctionnel que tout débutant peut suivre. De plus, nous offrons à nos lecteurs 10% de réduction sur votre premier achat avec Squarespace avec le code promotionnel EVERYGIRL18. But. Alors prenez votre cahier (ou votre clavier) et faisons ceci.
Commencez avec un moodboard
La première chose que je fais lorsque je commence un nouveau projet de design graphique est de créer un moodboard - un schéma directeur indiquant où je veux que le design aille. Pour référence, voici un exemple de moodboard que j'ai créé pour un projet l'année dernière. Les Moodboards sont un outil essentiel pour définir l’esthétique de votre marque: le look que vous souhaitez obtenir, le sentiment que vous souhaitez évoquer, les éléments spécifiques qui vous interpellent. Avez-vous déjà découpé des photos dans un magazine et sauvegardez-les en piles comme des albums de souvenirs * Sigh * Oh, comme le monde du moodboarding analogique me manque.
Si vous n'êtes pas un graphiste, vous pouvez toujours créer rapidement et facilement des moodboards à l'aide de Pinterest. Les tableaux secrets sont un outil fantastique pour créer des images. Commencez par épingler tout ce qui attire votre regard. Ensuite, parcourez votre nouveau tableau et commencez à éliminer les problèmes qui ne sont pas tout à fait corrects. Ne vous sentez pas obligé de vous limiter à des images contenant des polices ou des éléments de marque. Épinglez tout ce qui attire votre regard! Pensez à ce que les images vous font ressentir. Que voulez-vous que votre marque parler à vos clients ou à votre public Une fois que vous avez choisi votre forum, il vous restera un guide de référence pour l’image de votre marque que vous pourrez revisiter et rediffuser tout en configurant votre site Web..
Choisissez Complémentairement + couleurs et éditez vous-même si nécessaire
Les polices
Je sais qu’il peut être tentant de jouer avec BEAUCOUP de polices (Squarespace vous permet de choisir) lorsque vous configurez votre site, mais éloignez-vous du clavier et écoutez aяsec. Trop de polices ou de polices de conception similaire seront source de confusion pour les yeux et rendront stressant ou désagréable pour les clients ou les clients qui souhaitent consulter votre site. Les clients stressés et les clients ne sont pas idéaux lorsque vous pensez au taux de rebond, au retour des téléspectateurs et aux yeux que vous souhaitez rester sur votre site assez longtemps pour acheter quelque chose (au moins)..
En tant que designer, il s’agit de l’une des erreurs les plus courantes que je constate sur des sites Web ou des supports de marque collatéraux (cartes de visite, papier à en-tête, etc.), mais la bonne nouvelle est qu’il est facile de se souvenir de ces conseils:
- Choisissez trois polices au maximum. Edit, les gens! Heureusement, Squarespace facilite cette tâche en créant des polices cohérentes sur l'ensemble de votre site. Choisissez des polices pour Titre 1, Titre 2, Titre 3, Paragraphe (corps du texte) et Squarespace rempliront automatiquement ces polices lorsque vous utiliserez des titres ou du corps sur votre site. GAGNER.
- Essayez de choisir un serif (une police de caractères fleurie à la fin des lettres, comme Times New Roman) et une san serif (un caractère sans fioritures comme Open Sans) qui sont complémentaires. Ou bien, optez pour deux empreintes de san ou deux empreintes suffisamment différentes pour que l’œil puisse les distinguer. En utilisant deux styles de polices différents comme titres et sous-titres, vous obtiendrez une juxtaposition agréable sur votre site, ce qui en facilitera la lecture et lui donnera un aspect professionnel. Ci-dessous, je vous ai concocté ce guide pratique de certaines de mes combinaisons préférées, toutes disponibles sur Squarespace, pour vous aider à démarrer. Vous êtes les bienvenus. (Assurez-vous de l'épingler pour plus tard!)
- Soyez prudent avec les polices de script. Il est TRÈS facile de les utiliser trop souvent - un peu va très loin.
- Ne jamais utiliser Comic Sans. Tu es meilleur que ça.
Couleur
La prochaine étape est les couleurs - la partie amusante! Jetez un coup d'œil sur votre table d'ambiance (vous aviez dit qu'il serait utile) et sortez les couleurs qui se répètent encore et encore. Une fois que vous avez ces couleurs, considérez la psychologie des couleurs - J'aime ce guide de Spruce Rd. Quelles couleurs correspondent aux mots-clés que vous associez à votre marque? Si votre marque est axée sur l'harmonie et la confiance, considérez les nuances de bleu. Si vous préférez l’énergie et la positivité, essayez les jaunes. Affinez vos nuances jusqu'à trouver un groupe - je dirais cinq ou six au maximum - que vous aimez. Assurez-vous de conserver les couleurs spécifiques pour une utilisation future - voici un excellent outil pour trouver le code hexadécimal d'une couleur à partir d'une image si vous ne disposez d'aucun logiciel de conception comme Photoshop ou Illustrator..
Vous pouvez facilement copier un code hexadécimal dans Squarespace pour utiliser cette couleur exacte sur votre site. Voici comment:
Comprendre la hiérarchie + l'équilibre
Rappelez-vous que les infâmes Oscars snafu Tout cela aurait pu être évité avec la hiérarchie - voilà comment ~ critique ~ peut être une conception.
Source: bonne
La création d'une hiérarchie au sein de votre site donne la priorité au texte que vos téléspectateurs verront en premier - pensez à des appels audacieux à l'action, à des titres de produits, etc. L'utilisation de la hiérarchie hiérarchise votre contenu et crée un chemin sur lequel l'œil du spectateur se déplace - pour qu'il puisse suivre l'histoire de votre site tel que vous le souhaitez. Voici un exemple de la création de la hiérarchie sur l’un de mes sites Squarespace:
L’équilibre est tout aussi important que la hiérarchie, car il ancre votre site et le rend plus agréable à regarder, ce qui est essentiel pour fidéliser les visiteurs. Chaque élément de votre page a un certain poids qui doit être équilibré. Les couleurs sombres et les lignes plus épaisses sont plus lourdes, les couleurs plus claires et les lignes plus pâles sont plus claires. Voici un exemple de la création de l’équilibre sur l’un de mes sites Squarespace:
Soyez stratégique avec un espace blanc
J'AIME L'ESPACE BLANC. Chaque fois que quelqu'un me demande de donner mon avis de conception sur quelque chose qu'il a créé lui-même, mon conseil inévitable est davantage d'espace blanc! La première chose à noter est que par espace blanc, les concepteurs veulent dire espace négatif ou absence d'éléments de conception, de texte ou d'images. L'espace ne doit pas nécessairement être blanc pour être admissible.
Considérez-le comme donnant à vos éléments la place de respirer. Tout comme vous ne voudriez pas utiliser une photo avec la moitié du haut de votre tête coupée, vous ne voulez pas ajouter de texte et d’images à votre site quand ils sont trop rapprochés - cela vous semblera trop étroit et inconfortable pour la œil. Plus d'espace blanc, un design plus propre et plus moderne. J'aime l'outil d'espacement de Squarespace pour créer facilement un espace blanc autour de vos éléments lorsque vous en avez besoin. Voici un exemple:
Créer des graphiques cohérents
La cohérence est essentielle pour créer un site qui se déroule sans à-coups élément par élément, page par page. L'utilisation des mêmes polices, couleurs et images sur l'ensemble de votre site Web créera un design simplifié et sera plus facile à produire à long terme. Gagner, gagner.
Lors de la création de votre site ou une fois celui-ci terminé, vous devrez peut-être créer des graphiques, tels que des images de publication de blog, des listes de contrôle téléchargeables, des publications Instagram, etc., afin de les intégrer de manière transparente à la conception de votre site Web. La création de modèles pour ces graphiques accélérera votre flux de travail quotidien et garantira que votre site et vos réseaux sociaux ont toujours un aspect professionnel. Si vous n’avez pas accès à Photoshop ou Illustrator, je vous recommande d’utiliser Powerpoint ou Canva pour créer vos graphiques, qui vous permettent tous deux d’enregistrer des modèles..
Voici un bon modèle de départ pour un graphique de publication de blog pouvant être associé:
Et voici un bon modèle de départ pour un texte graphique Instagram:
Enfin, simple ne veut pas dire simpliste
N'oubliez pas qu'un site magnifique ne doit pas nécessairement être rempli d'éléments. En fait, très peu de sites magnifiques le sont aujourd'hui. Les sites minimaux sont agréables à regarder et souvent plus rapides / plus faciles à produire pour les débutants. Squarespace vous facilite la tâche avec de nombreux modèles prédéfinis qui sont à la fois minimes et fonctionnels. Bing bang boum fait.
N'oubliez pas d'utiliser le code promo TOUT LE MONDE18 pour 10% de réduction sur votre achat en premier lieu!
Avez-vous des questions sur la conception de votre site? Partagez dans les commentaires ci-dessous et notre graphiste fournira ses commentaires!
Ce poste était en partenariat avec la société Squarespace, mais toutes les opinions exprimées ici sont celles du comité de rédaction..