Comment obtenir un aspect professionnel avec la couleur
Qu'est-ce qui fait qu'un design a l'air coordonné, planifié et professionnel? La réponse est: "couleur" .
Tous les projets n'ont pas besoin d'un bleu corporel fade pour avoir l'air professionnel. La couleur de planification consiste à créer un cadre décrivant les couleurs à utiliser et leur utilisation.
La couleur est l'élément de conception le plus glissant. La "bonne" couleur est si étroitement liée à des choses insaisissables telles que les goûts personnels et l'intuition, ainsi que des considérations techniques telles que le contraste et l'étalonnage du moniteur.
Mais la couleur est essentielle au contenu . Si vous considérez un site Web suffisamment important pour passer du temps à l'affiner, les lecteurs le considéreront probablement comme suffisamment important pour passer du temps à lire. De bons choix de couleurs rendent cela possible.
Dans cet article, nous examinerons certaines techniques pour obtenir de belles palettes de couleurs pour vos conceptions Web.
La meilleure façon de rendre un site Web imprévu est de choisir ses couleurs au hasard.
Même lorsque les visiteurs parcourent la page d'accueil d'un site Web pour la première fois, les couleurs influencent leur attitude à l'égard du contenu . Ce site est-il passionnant? Rassurant? Audacieux? Fade? Politique? Formel?
La couleur affecte la façon dont les gens interprètent ce qu'ils voient autant que la typographie.
Trouver les bonnes couleurs n'est pas facile, mais le processus peut être systématique.
Une bonne stratégie de conception implique un schéma de couleurs (c.-à-d. Une gamme de couleurs sélectionnées pour communiquer une humeur ou un message) et un agencement de ce schéma.
Disons que vous avez été invité à concevoir un site Web professionnel. (Et cela pourrait très bien se transformer en un jeu à boire: prenez un cliché chaque fois que le client utilise le mot "professionnel", "propre" ou "moderne". Deux clichés pour "J'aime cet autre site. Copiez-le").
La palette de couleurs dépendra de la nature particulière du site Web. Par exemple, les banques et les fleuristes peuvent avoir des sites Web d'aspect professionnel.
Mais les gens pourraient être moins enclins à acheter des fleurs sur un site Web de couleur bleue et océanique. Et imaginez le site de Bank of America en lilas et en jaune-vert.
Un design «professionnel» indique aux visiteurs qu’ils ont trouvé un site Web qui prend son sujet au sérieux, même si ce sujet est léger. Quelles que soient les teintes et les valeurs, "professionnel" signifie coordonné, planifié et réfléchi .
Aller en niveaux de gris
La meilleure façon de travailler avec les couleurs est de ne commencer par aucune.
Supprimer la couleur d'un dessin révèle des problèmes fondamentaux qui doivent être résolus avant de se demander quelle nuance de chartreuse fonctionne le mieux. Si le design ne semble pas correct en noir et blanc, il est temps de faire des changements.
Chaque page a-t-elle un objectif clair? La conception guide-t-elle les lecteurs à travers le contenu? Le contenu est-il convaincant, inspirant ou informatif? Les titres sont-ils clairs? Les liens sont-ils en contraste avec l'autre texte? La couleur améliore ces effets, mais les problèmes de disposition, de type et d'organisation ne peuvent pas être résolus uniquement par la couleur .
Pour faire une refonte, commencez par sucer la couleur. Le simple fait de vider les primaires saturées montre vraiment où se trouve un site Web. (En fait, vous devriez vraiment commencer une refonte en réévaluant vos objectifs et votre contenu, mais c'est une autre histoire.)
Parfois, la suppression de la couleur est une solution en soi .
Une fois, j'ai travaillé avec une entreprise de conception Web pour repenser leur propre site Web. Les propriétaires étaient personnels sur le projet et désireux de bien faire les choses. Mais si vous pensez que concevoir pour vous-même est difficile, essayez de le faire en comité. À la fin, nous regardions tous les trois une capture d'écran du neuvième projet après les heures de travail sur quelques verres.
Brusquement, j'ai aplati les calques de Photoshop et frappé "Desaturate" en transformant le design vibrant en cuivre et marine en nuances de gris. À la surprise de tous, cela a fonctionné.
À la fin de la semaine, nous avions un design gris "chaud" avec des accents rouges. Nous savions que nous avions un gagnant lorsque des clients précédents les ont complimentés sur le nouveau look et que d’autres clients potentiels ont reçu plus d’appels.
Analysez votre palette de couleurs avec le test "squint" de Photoshop :
- Prenez des captures d'écran d'au moins trois pages de votre site Web. Ouvrez-les dans Photoshop.
- Dupliquez le calque d'arrière-plan dans chaque capture d'écran ( Calque → Calque dupliqué ou Commande + J sur un Mac ou Contrôle + J sous Windows).
- Appliquez un flou gaussien d'environ 10 pixels aux nouveaux calques.
- Aller à Image → Réglages → Postériser . Utilisez 8 à 12 niveaux ou allez dans Filtre → Pixellate → Mosaic . Utilisez 15 à 30 pixels.
Cela montre quelles couleurs sont vraiment dominantes. Plus les couleurs sont dominantes, plus le schéma s'imprime dans l'esprit du visiteur.
Une fois que la mise en page et l'organisation du site fonctionnent sans couleur, il est temps de choisir une palette. Mais lequel? Et combien utiliser?
Alignez vos teintes
La couleur a trois propriétés: teinte, saturation et valeur (parfois appelée légèreté).
La saturation est la richesse d'une teinte: les couleurs néon sont très saturées, tandis que les pastels sont moins saturés.
La valeur indique la luminosité (c'est-à-dire la proximité du noir ou du blanc) d'une couleur.
La teinte désigne la partie de l'arc-en-ciel à laquelle appartient une couleur, telle que le rouge ou le vert; c'est la propriété sur laquelle on se promène.
Rien ne tue une palette de couleurs comme des couleurs qui se heurtent. Un design peut avoir une centaine de nuances d'une teinte, du pastel au néon, et semble toujours prévu. Mais si les teintes se mélangent mal, le système s'effondre.
Un moyen d'éviter les collisions est de les séparer d'une troisième couleur. Un tampon noir, gris ou blanc est le plus sûr, car le niveau de gris est neutre: vous pouvez coordonner n'importe quelle partie de l'arc-en-ciel avec du noir, du blanc et du gris.
Une deuxième solution consiste à utiliser les teintes dans des proportions différentes . Si une palette de couleurs a, par exemple, le violet et le marron, le motif peut avoir de nombreuses nuances de brun avec quelques reflets violacés brillants.
Une autre option consiste à varier les valeurs. Le bleu pur et le cyan vif forment une combinaison assez sobre, mais le contraste entre le bleu foncé (bleu marine) et le cyan clair (bleu ciel) suffit à se différencier. Le rouge et le violet peuvent être assez différents pour ne pas se heurter mais suffisamment proches pour ne pas paraître intentionnels. Le rouge clair (rose) et le violet foncé apportent la distinction.
Malheureusement, éviter une mauvaise combinaison de couleurs n’est pas la même chose que choisir une bonne combinaison. Une combinaison de couleurs réussit non pas lorsque vous êtes satisfait, mais lorsque votre public se sent à l'aise.
Découvrez de grands schémas
D'où viennent les grands schémas de couleurs? Avec des centaines de couleurs et des milliers de combinaisons, comment décidez-vous?
Les concepteurs de petits sites statiques doivent tirer des couleurs du contenu . Cela signifie généralement des photos.
La conception d’un site Web de huit pages que j’ai récemment construit était surmontée d’un échafaudage en métal élaboré sur un ciel indigo. En définissant l'outil Pipette de Photoshop sur une moyenne de 5 × 5, j'ai échantillonné les parties les plus sombres et les plus claires du ciel et j'ai donné à la barre latérale, aux liens, aux en-têtes et au pied ces quelques nuances.
Lorsque le client a demandé comment nous pouvions concevoir un site Web si bien, et si rapidement, notre réponse a été: «C'est ce que nous faisons». Mais la couleur était déjà là. Je devais juste le chercher.
Tandis que les photos de stock fonctionnent pour des sites Web rapides, les concepteurs de sites Web plus grands et plus dynamiques doivent s’inspirer de leur public .
Les vêtements quotidiens constituent un excellent indicateur des couleurs attrayantes pour votre public. Découvrez ce que portent vos visiteurs et vous saurez quelles couleurs les rendent confortables. Si votre site Web porte sur, disons, les sports de ligue, découvrez ce que les gens portent aux jeux, plutôt que leurs tâches quotidiennes.
Si vous avez la chance d’obtenir des photos de votre public cible, regardez-les en masse; vous voulez une moyenne de la foule. Mais si les photos ne sont pas disponibles, allez faire du shopping.
Les créateurs de vêtements capables de rester en affaires ont une excellente perception des couleurs pour chaque humeur et chaque style de vie. Il ne faut pas que ce soit la 5ème avenue haute couture. Une recherche sur Google pour «magasins de camping», «vêtements pour bébés», «ski et maillots de bain» et «vie décontractée» révélera de nombreuses combinaisons de couleurs.
Les gens portent des vêtements en fonction de leurs goûts. Si vous utilisez des couleurs qui leur plaisent, ils se sentiront plus à l'aise sur votre site Web.
Utiliser des textures
De légères variations de teinte, de saturation ou de valeur créent des textures .
Les textures monochromatiques (c.-à-d. Les textures avec une seule teinte) et les motifs fournissent une dimension subtile à la plupart des sites Web sans se heurter.
Les arrière-plans de texture simples, en particulier, sont faciles à construire:
- Prenez une photo d'un mur intérieur, ou quelque chose qui est nu, mais semble rugueux.
- Ouvrez-le dans Photoshop.
- Dupliquer le calque d'arrière-plan et l'appeler "texture 1."
- Remplissez le calque d'arrière-plan avec les couleurs de votre palette de couleurs.
- Réglez le mode de fusion du calque "texture 1" sur "" Soft Light "et son opacité à 30%.
- Essayez-le sur votre site Web. Si cela ne semble pas correct, jouez avec l'opacité du calque.
Le nom de la couche est délibéré. Vous pouvez jouer avec plus d'une photo, mais évitez de donner aux calques des noms tels que "texture de mur" ou "texture de papier". Vous voulez vous concentrer sur l'effet sur votre site Web, pas d'où il vient.
Créer un bon plan
Une bonne palette de couleurs présente certaines caractéristiques. Considérez-le comme un cadre ou un ensemble de lignes directrices pour garder un design cohérent. Le système devrait:
- Énumérez deux à cinq nuances qui fonctionnent bien ensemble,
- Décrivez dans quelle mesure un dessin peut varier de ces teintes,
- Compte pour les nuances de chaque teinte,
- Travaille bien contre le noir et blanc.
Voici un exemple:
Le designer a commencé par choisir surtout des teintes chaudes qui semblaient bien. Il n'y avait pas de logique, juste le vague objectif de "l'automne" et son intuition.
Dans Photoshop, deux calques fournissaient des nuances de noir et de blanc. Le mode de fusion de chaque couche était défini sur "Lumière douce". Le noir pur était trop sombre pour la couleur la plus appropriée, de sorte que l'opacité du calque noir était ajustée.
Pour unifier les couleurs, un nouveau calque a été créé et rempli de rouge pur. Son mode de fusion a été réglé sur "Couleur" et son opacité a été réduite à environ 40%. (Remarque: l'ordre des calques est très important. Les couleurs changent si le calque "Teinte" est défini en dessous des calques noir et blanc.)
Cela a donné au designer 15 couleurs au choix. Elle en a choisi quatre qui avaient une gamme de tons et de teintes. Ici, les couleurs sont opposées au blanc.
Les variations sont importantes, le designer a donc expérimenté. A quoi ressembleraient les couleurs contre le noir? Que se passe-t-il si on les ombrage légèrement?
Et si on les changeait complètement? Utiliser Image → Réglages → Teinte / Saturation sur le calque "Teinte" crée une sensation distinctement automnale, mais les couleurs sont toujours coordonnées. Peut-être que cette palette peut être utilisée pour Pâques.
Le résultat final est un jeu de couleurs: une référence qui fournit des teintes différentes (mais pas trop différentes) et une gamme de nuances qui fonctionnent bien ensemble. Téléchargez le fichier exemple.
Utiliser le cadre
Les graphiques, photos et icônes de demain fonctionneront-ils avec les couleurs actuelles? De quelles images un site Web aura-t-il besoin dans six jours, six semaines ou six mois? C'est difficile à dire, mais le contenu fait partie de votre palette de couleurs .
Vous pouvez résoudre ce problème en faisant en sorte que vos images suivent le schéma de couleurs ou que le schéma de couleurs suive vos images.
L'application de votre schéma de couleurs, même avec des photos, est un excellent moyen d'obtenir une apparence unifiée sur toutes les pages .
La solution la plus simple consiste à trouver des images adaptées à votre schéma. Rappelez-vous qu'un schéma de couleurs permet une marge de manœuvre: tant que les teintes principales d'une image sont ajustées, l'image doit fonctionner. De nombreux sites Web de banque d'images vous permettent de rechercher par couleur (ce qui signifie teinte: généralement les primaires comme le rouge, le vert et le bleu).
Si une image ne correspond pas à votre schéma de couleurs, donnez-lui une teinte:
- Ouvrez l'image dans Photoshop.
- Créez un nouveau calque Définissez son mode de fusion sur "Couleur".
- Remplissez ce calque avec l'une des couleurs de votre palette, de préférence celle qui correspond le mieux à l'image.
- Définissez l'opacité du calque de couleur sur 50%.
- Jouez avec l'opacité jusqu'à obtenir un bon équilibre entre la couleur d'origine de l'image et la palette de couleurs de votre site Web.
- Cette technique fonctionne pour les photos, les illustrations et les icônes-tout ce qui est basé sur les pixels. (Si vous ne possédez pas l’image, assurez-vous d’obtenir une autorisation avant de la modifier. Vous améliorez peut-être son apparence sur votre site Web, mais vous continuez à prendre des libertés avec l’art d’un autre utilisateur.)
Cherche professionnel
Aucun jeu de couleurs ne semble "professionnel" en soi. Au contraire, vous devez suivre un processus pour atteindre une impression coordonnée et planifiée.
Quel que soit le site, le public saura qu'il se prend au sérieux.
Conseils
- Lorsque vous pensez avoir une bonne palette de couleurs, essayez-le pendant au moins une semaine. L'évaluation de la couleur nécessite une intuition qui se construit au fil du temps. Donnez-vous du temps pour absorber pleinement la personnalité du système.
- Lorsque vous pensez que vous avez une bonne palette de couleurs, ne le laissez pas se vider. Les goûts de vos visiteurs, comme les vôtres, changent avec le temps. Faites une note pour revoir les couleurs après quatre mois. Alors demandez, sont-ils toujours appropriés? Si non, qu'est-ce qui a changé? Quels facteurs vont influencer votre ajustement?
- Utilisez des couleurs brillantes avec parcimonie. Une touche irisée attirera les visiteurs, mais s’ils la voient partout, ils erreront sans but.
- Certaines personnes pensent que les schémas de couleurs ont une gamme étroite. Laissez une marge de manœuvre pour donner à vos conceptions une profondeur supplémentaire.
- Évitez les primaires pures telles que le rouge, le vert, le bleu et le jaune. Donnez-leur une teinte pour le vrai caractère: rouge, mais légèrement violet, bleu avec une touche de vert, jaune "chaud" avec une teinte orange.
- Assurez-vous que vos couleurs fonctionnent quand elles sont fanées. Si vous choisissez le rouge, sachez que le rouge clair peut être féminin et que le rouge foncé peut ressembler à de la rouille ou du sang. Le jaune court du soleil fané au brun foncé. Le bleu foncé est mystérieux et le bleu clair est tranquille ou électrique si vous le saturez.
- Utilisateurs Mac, configurez votre écran. Allez dans "Préférences Système" et cliquez sur "Accès universel". Réglez votre écran sur "Utiliser niveaux de gris." Cela est également utile lorsque vous êtes d'humeur pour le film noir.
- Quel que soit votre niveau d'activité, utilisez un arrière-plan neutre. Le noir, le blanc et le gris fonctionnent bien avec presque toutes les teintes.
- Si vous souhaitez que le texte de petite taille (disons 14 points ou moins) corresponde à un grand champ de couleur, rendez le texte plus sombre que la normale. Cela compensera les compteurs de lumière à l'intérieur des caractères.
- Utilisez plus de nuances de moins de teintes.
- Ce qui "semble bon" est intuitif. Mais l'intuition est une bataille entre votre ego, les choix de votre auditoire et l'autorité des personnes qui financent le projet.
- Utilisez des arrière-plans en sourdine pour faire ressortir le contenu:
Écrit exclusivement pour WDD par Ben Gremillion . Il est un web designer indépendant qui a appris que la rigidité des délais est inversement proportionnelle au nombre de fonctionnalités demandées à la dernière minute.
Comment créez-vous des combinaisons de couleurs réussies? Qu'est-ce qui fonctionne et qu'est-ce qui ne fonctionne pas pour vous?