Idées de conception de sites Web: Conseils, outils et ressources à essayer

Website design ideasConçu par Freepik

Trouver constamment de bonnes idées pour la conception de sites Web est un travail difficile. Lorsque vous ne pouvez pas obtenir le sens de la créativité qui coule à la demande, il est facile de se sentir bloqué et frustré.

Si c’est ce que vous ressentez maintenant (ou parfois), cet article est là pour vous aider. Dans ce qui suit, nous souhaitons vous fournir des moyens de surmonter les difficultés lorsque les idées ne coulent pas.

La première partie vous fournira des astuces de conception Web qui peuvent ouvrir de nouvelles perspectives et susciter des changements. Après cela, vous trouverez quelques outils qui faciliteront vos efforts de conception. Dans la dernière partie, nous énumérerons un certain nombre de sites Web que vous pourrez visiter pour trouver l’inspiration pour de nouvelles idées de conception de sites Web.

Si tout cela ne vous aide pas à retrouver votre créativité, je ne suis pas sûr que rien ne le fera!

9 conseils de conception Web pour se sentir coincé

Pour vous aider à trouver de bonnes idées, nous commençons par des conseils de conception de sites Web que vous pouvez utiliser immédiatement pour améliorer vos travaux.

1. Utilisez Pinterest Mood Boards

Pinterest est un excellent outil pour créer des tableaux d’humeur. Vous pouvez collecter du matériel visuel qui, selon vous, pourrait être utile à votre projet ou vous guidera. Il peut s’agir d’images, de couleurs, de mises en page, de sites Web existants, etc.

Pinterest mood boards

Le mood board agira comme une plaque tournante centrale pour votre inspiration de conception. Vous pouvez également le partager avec des clients ou des collaborateurs afin qu’ils puissent contribuer avec leur propre matériel.

2. Créer un plan

Making a planVous savez ce qu’ils disent: ne pas planifier, c’est planifier son échec. Cela est également vrai dans la conception Web. Si les idées de conception de site Web ne parviennent pas à vous, c’est peut-être parce que vous n’avez pas encore traité des principes fondamentaux. Ce n’est que lorsque les bases sont en place que vous serez en mesure de mettre des touches créatives sur le dessus. Voici à quoi peut ressembler la planification:

Définissez l’objectif du site Web – Vous devez savoir ce que le site est réellement censé accomplir. Si tu ne le fais pas, vers quoi diable vises-tu? Les bons objectifs sont SMART: spécifiques, mesurables, réalisables, pertinents et opportuns. Plus à ce sujet ici. Esquissez le parcours de l’acheteur – Outre l’objectif général, vous devez également déterminer quelle route vous souhaitez que les visiteurs empruntent. À partir du moment où ils ont visité votre site jusqu’à l’objectif que vous avez en tête. De cette façon, vous pouvez créer une structure pour les guider tout au long du processus. Hubspot a un excellent article à ce sujet. Élaborez un guide de style – Créer un guide de style vous aidera à rester cohérent dans votre conception. Il définit les polices, les couleurs et les autres éléments de conception. L’utilisation de l’un favorise l’uniformité, en particulier lorsque vous travaillez avec d’autres. Google est un bon exemple. Planifiez votre référencement – La planification est également importante pour le référencement. Créez une carte de site Web pour comprendre comment structurer vos informations à la fois pour les visiteurs et les moteurs de recherche.

3. Focus sur la structure d’abord

Tout comme pour l’élaboration d’un plan, vous concentrer d’abord sur la structure de votre site Web vous aide à sortir du processus et à obtenir une vue d’ensemble.

Il peut être utile de travailler avec un autre média que votre ordinateur. Par exemple, en faisant des croquis sur papier avec un seul stylo, vous pouvez oublier les couleurs et autres détails pour le moment. Si vous utilisez des tableaux à feuilles mobiles ou un tableau blanc, vous pouvez même rendre le tout collaboratif.

Un bon exercice peut également consister à dessiner le site Web sur un post-it. Cela vous obligera à respecter l’essentiel. Une variante de ceci est de créer votre conception dans les tons pour le gris en premier et d’ajouter de la couleur plus tard. De cette façon, vous êtes obligé d’établir une hiérarchie visuelle sans faire appel à la couleur.

Start with grayscaleLaura Elizabeth / Smashing Magazine

Si vous souhaitez vraiment utiliser votre ordinateur pour la conception, vous pouvez utiliser le «test du plissement». Cela signifie s’éloigner de l’écran et plisser les yeux. L’image floue vous montrera ce qui est le plus évident sur votre site et ce que les visiteurs pour la première fois remarqueront probablement en premier.

4. S’en tenir aux normes

Il est dans la nature des concepteurs de vouloir être créatifs. C’est généralement une bonne chose. N’oubliez pas qu’il est nécessaire de définir des limites pour être créatif.

Par exemple, dans la conception Web, il existe un certain nombre de normes établies. Les visiteurs sont habitués à certains tropes de design et à certains éléments de sites Web. Lorsque vous enfreignez trop ces règles, vous risquez de les confondre et de les désactiver.

En fait, les recherches de Google ont montré que moins un site Web respecte les normes du prototype, moins il est perçu par les utilisateurs comme étant beau. Pour cette raison, s’en tenir aux règles établies est une bonne idée.

Parmi ces normes établies figurent:

Cohérence de la marque et du design sur toutes les pages Logo du site Web dans le coin supérieur gauche Informations de contact en haut à droite ou au centre Navigation principale en haut de l’écran Titre principal / proposition de valeur et incitation à l’action en haut sur la page d’accueil Fonction de recherche dans l’en-tête Icônes de médias sociaux dans le pied de page du site

Je suis sûr qu’en tant qu’utilisateur avide d’Internet, vous connaissez déjà de plus en plus de sites Web conformes aux normes. Sinon, vous pouvez en trouver plus ici.

5. Pensez à ce que vous pouvez éliminer

Lorsque vous connaissez l’objectif de votre site et de vos pages, cela vous permet également de vous débarrasser de tout ce qui ne sert pas cet objectif. Cela rationalise votre conception et le rend plus agréable à regarder.

Encore une fois, il y a des recherches pour le confirmer. Dans la même étude mentionnée ci-dessus, Google a constaté une corrélation négative entre la complexité visuelle et l’attrait d’un site Web. En bref, les gens ne veulent pas être submergés! Simplifier votre conception est utile pour d’autres fonctionnalités, telles que la vitesse du site Web.

Voici quelques éléments que vous pouvez éliminer en toute sécurité:

Éléments de menu – Bien sûr, vous souhaitez que les autres utilisateurs explorent davantage votre site. Cependant, un menu surchargé peut être très déroutant et avoir des effets négatifs. Encore une fois – tenez-vous en à l’essentiel! Barres latérales – De plus en plus de sites Web suppriment progressivement la barre latérale. Qu’avez-vous dans votre sidebar? Est-ce vraiment important? Jargon boueux – La même chose qui va pour les photos de stock va pour la langue. Des phrases surutilisées, des clichés et des mots creux permettent aux gens de se déconnecter Arrêtez de les utiliser, donnez de la personnalité à votre écriture, apprenez des mots puissants et apprenez le copywriting.

6. Commencez avec mobile

Les appareils mobiles ont pris d’assaut le monde. À l’heure actuelle, plus de personnes naviguent sur le Web via des téléphones et des tablettes que sur des ordinateurs de bureau.

Statcounter mobile vs. tablet vs. desktop use in June 2018

De plus, Google a annoncé le déploiement de son nouvel index Mobile First. Cela signifie que, lorsqu’il sera pleinement opérationnel, le moteur de recherche jugera d’abord chaque site Web en fonction de sa présence mobile. Si cela ne fait pas son travail correctement, vous aurez un coup dans le classement de recherche.

Pour cette raison, lors de la conception d’un site Web, il serait judicieux de commencer par la présence mobile. À partir de maintenant, les utilisateurs mobiles seront vos principaux clients. Par conséquent, vous feriez mieux de vous assurer qu’ils se sentent pris en charge.

Dans le même temps, c’est une bonne pratique pour proposer des idées de conception de sites Web. Encore une fois, commencer avec mobile vous oblige à vous concentrer sur l’essentiel et à réfléchir au but de votre conception. Vous pouvez ensuite déplier et ajouter des éléments à mesure que la taille de l’écran augmente.

7. Faites attention à la mise en forme du contenu

Le formatage du contenu est un outil sous-estimé pour les concepteurs Web. Le contenu est l’élément le plus important de votre site, que ce soit sous la forme de billets de blog ou d’une copie de vente. En fin de compte, c’est ce que vous voulez que les visiteurs consomment. Le but de votre conception est de la présenter comme ils le font.

Malheureusement, à présent, les gens sont tellement saturés que peu d’entre eux lisent tout ce qui se trouve sur votre page. Au lieu de cela, la plupart des visiteurs numérisent. En outre, ils ont tendance à le faire dans un motif en forme de F.

Content formatting

Cela signifie que vous devez adapter votre contenu à ses habitudes de consommation pour le rendre plus impactant.

Voici comment faire cela:

Inclure les en-têtes – Les en-têtes sont un excellent moyen de diviser le contenu. De nombreux lecteurs les utilisent également comme points d’ancrage pour la numérisation et ne lisent que les parties sous des en-têtes qui leur semblent intéressantes. Par conséquent, veillez à utiliser les en-têtes et à les rendre descriptifs. Utilisez des paragraphes et des listes – Personne ne veut lire un gros bloc de texte. Les paragraphes divisent le contenu en petits morceaux. Ouvrez-en un nouveau chaque fois que vous ouvrez un nouveau point. Les listes ont une fonction similaire et rendent l’information plus accessible. Utilisez-les aussi. Ne lésinez pas sur les médias et les éléments visuels – Les informations visuelles sont beaucoup plus accessibles pour le cerveau humain que les textes. Pour cette raison, il est judicieux d’utiliser des images et d’autres supports pour souligner les points soulevés dans votre copie. C’est aussi, encore une fois, un excellent moyen de séparer des morceaux de texte plus longs. Optimisez vos polices – Votre utilisation des polices a également une grande influence sur la lisibilité. Les outils les plus importants que vous avez ici sont la taille et la hauteur de ligne. Optez pour au moins 16px (moyen a 22px!) Et assurez-vous d’ajouter plus de hauteur de ligne plus la police que vous utilisez.

Si vous étudiez cet article, vous pouvez voir tout ce qui précède en vigueur.

8. Essayez la conception d’une page

À l’époque, la conception du site Web était entièrement axée sur le repliement. Tout ce qui importait devait être au-dessus de la limite à partir de laquelle les utilisateurs pouvaient commencer à faire défiler. Il y a encore quelque chose à dire à ce sujet, car c’est là que les utilisateurs passent le plus clair de leur temps.

Visitor viewing time - the fold

Cela ne signifie pas que le pli est le but ultime de votre page. Les gens vont effectivement défiler. En fait, ils feront défiler toute votre page si vous leur en donnez la raison.

Crazy Egg a essayé cela en remplaçant sa page de vente d’origine par une page 20 fois plus longue.

One page design

Résultat: le taux de conversion a augmenté de 30%! Si le parcours de votre acheteur actuel s’étend sur plusieurs pages, envisagez plutôt de les regrouper au même endroit. Cela pourrait être une de ces idées de conception de sites Web qui fait toute la différence.

N’enterrez pas le contenu dans des diaporamas / manèges ou des onglets / accordéons, ils ne fonctionnent pas!

9. Employer les tests A / B

Parfois, lors de l’évaluation de différentes idées de conception de sites Web, il peut être difficile de décider quelle est la bonne façon de procéder. Vous réfléchissez, vous faites des ajustements tout en restant incertain de votre décision. À un moment donné, penser ne suffira plus. Vous devrez laisser les utilisateurs décider.

Les tests A / B peuvent être un excellent moyen de voir ce qui améliore votre site Web. Cela signifie servir différentes versions de votre conception aux visiteurs au hasard, puis vérifier leur réaction. Vous pouvez prendre des décisions en fonction des résultats.

Vous pouvez tester à peu près n’importe quoi. De la conception de pages entières aux changements de couleur, des appels à l’action aux images, aux titres d’articles et aux polices. Tous ces éléments peuvent faire une énorme différence dans les performances d’une page. Pourtant, si vous ne le testez pas, vous ne saurez jamais!

Ces outils et plugins vous aideront à faire les tests.

19 outils qui permettent de concrétiser vos idées de conception de sites Web

Une fois que vous avez acquis suffisamment d’idées pour la conception de sites Web, vous devez trouver des moyens de les mettre en pratique. Les outils de conception Web ci-dessous vous aideront à le faire.

WordPress

Wordpress.org homepage

Quand vous avez fini de rassembler vos idées, vous avez besoin d’un endroit pour les mettre en œuvre. WordPress est un excellent outil pour le faire. Nous en sommes de grands fans. Ce site Web est construit avec WordPress et nous vous conseillons également de l’utiliser dans notre guide pour créer votre propre site Web.

La plate-forme est libre d’utilisation et vous permet de modifier la conception de votre site en appuyant simplement sur un bouton via des thèmes. Vous pouvez ajouter une multitude de fonctionnalités avec les plugins WordPress. En même temps, il convient aux débutants, est sécurisé, testé et mature. En bref, la base idéale pour concrétiser vos idées de conception de sites Web.

Pour des alternatives, vous pouvez également regarder dans Joomla et Drupal.

Constructeurs de sites Web

Bien que WordPress soit une excellente option pour beaucoup de gens, il ne convient pas à tout le monde. Des personnalisations plus avancées nécessitent des connaissances en HTML, CSS, PHP et / ou JavaScript. Cela peut être trop technique pour certaines personnes.

Pour eux, les constructeurs de sites Web peuvent constituer une alternative valable, même s’ils sont généralement payés et n’offrent pas la même souplesse que WordPress. Si ce sujet vous intéresse, nous avons plusieurs articles sur ce sujet pour vous:

Ce qui précède vous présente certains des constructeurs de sites Web les plus populaires et vous donne également une meilleure compréhension de ce que vous pouvez en faire.

Dreamweaver

Adobe Dreamweaver logo

Si vous recherchez un moyen de créer un site Web sans CMS ni constructeur de site Web, Dreamweaver est une alternative valable.

L’application d’Adobe vous aide à concevoir et à coder des sites Web à l’aide d’une interface visuelle. De cette façon, vous pouvez créer très rapidement une structure de base de site Web sans codage.

Dans le même temps, vous avez la possibilité d’écrire du code personnalisé. Dreamweaver dispose de toutes les fonctionnalités nécessaires pour en faire un jeu d’enfant.

Pour plus d’informations, consultez notre didacticiel détaillé sur Dreamweaver. Pour une alternative, vous pouvez également regarder dans Webflow.

Esquisser

Sketch web design tool

Sketch est un outil de conception d’interfaces Web que beaucoup considèrent comme la meilleure alternative à Photoshop. Il est basé sur les vecteurs, ce qui signifie que les fichiers sont beaucoup plus petits et que le programme fonctionne très rapidement.

Les utilisateurs apprécient également l’interface utilisateur épurée et la convivialité pour les débutants, ce qui ne peut pas toujours être dit à propos de Photoshop. Sketch vient également avec une charge de plugins pour améliorer le flux de travail. Vérifiez-le!

A propos, Adobe a publié un outil similaire appelé Adobe XD que vous voudrez peut-être aussi jeter un coup d’œil.

Canva

Canva design tool logoCanva est un outil de conception gratuit que vous pouvez utiliser dans votre navigateur et sur les appareils mobiles. Il dispose d’une interface glisser-déposer qui facilite la création de prototypes de sites Web, d’éléments graphiques, d’infographies et de contenus de médias sociaux.

Le programme fournit des milliers de modèles gratuits afin que vous puissiez commencer rapidement. Il contient également des outils utiles, tels qu’un générateur de palette de couleurs à partir d’images et un outil vous permettant de trouver les bonnes combinaisons de polices.

Il existe une option «gratuite pour toujours», mais un certain nombre de fonctionnalités essentielles sont réservées à la version payante.

Paletton

Un des outils que je recommande est Paletton. Il vous permet de saisir une couleur de base et vous aidera à trouver d’autres nuances qui s’harmonisent avec elle. C’est super utile, surtout pour les moins doués dans le département de la couleur (je parle de moi-même).

Paletton - a tool for creating website design ideas

Il existe également des alternatives telles que Adobe Color Wheel et l’outil précité de Canva. Le poste mentionné à propos de Canva contient encore plus d’alternatives!

Google Fonts

Outre les couleurs, les polices constituent un autre élément important de la conception Web. Heureusement, ces jours-ci, vous avez beaucoup de sources de polices gratuites de haute qualité. La plus grande bibliothèque: Google Fonts. Il propose plus de 850 polices de caractères gratuites que vous pouvez implémenter sur votre site ou télécharger pour utiliser hors ligne vos idées de conception de sites Web.

Foogle Fonts

Nous avons un article complet sur l’utilisation des polices personnalisées dans WordPress. Vous trouverez toutes les informations dont vous avez besoin. Il existe également Typekit, qui est une autre excellente option pour trouver des polices de caractères pour votre site.

Polices en cours d’utilisation

Fonts In Use

L’un des problèmes les plus difficiles lors de l’utilisation de polices est de les associer à d’autres polices. Si vous avez besoin d’aide dans ce département, il existe des polices en cours d’utilisation.

Sur le site, vous pouvez voir les polices de caractères utilisées dans la vie réelle sur de nombreux types de supports. Le site Web affiche également et nomme les autres polices avec lesquelles ils apparaissent. De cette façon, vous pouvez trouver des paires de travail que vous pouvez voler pour votre propre projet.

Une alternative est la paire de polices. Les gens publient leurs combinaisons de polices préférées en ligne. Si vous ne savez pas quoi associer votre police, il vous suffit de la rechercher et de trouver quelque chose qui fonctionne instantanément. Ou utilisez l’option gratuite Canva mentionnée ci-dessus.

WhatTheFont!

À propos, si vous avez une police que vous aimez mais que vous n’êtes pas sûr de sa nature, ce service peut vous aider. Soumettez simplement une image de la police de caractères en question et de WhatTheFont! va essayer de vous dire ce que c’est. Si cela ne fonctionne pas, vous pouvez toujours soumettre votre demande au forum, qui fait également partie du site.

Outils d’optimisation d’image

Les images sont une partie importante de la conception Web. Avec l’avènement des appareils mobiles, il est devenu de plus en plus important de les optimiser pour les performances en les compressant. C’est l’un des meilleurs moyens d’améliorer la vitesse du site.

Plusieurs outils en ligne peuvent le faire pour vous, tels que TinyPNG. Il existe également des plugins WordPress comme Smush Image Compression and Optimization et EWWW Image Optimizer. Une alternative de bureau est RIOT.

Si ce qui précède ne suffit pas et que vous recherchez des outils supplémentaires pour concrétiser vos idées de conception de sites Web, vous pouvez consulter notre article sur les logiciels de conception Web.

Sites Web inspirants pour générer de nouvelles idées de conception de sites Web

Si, à ce stade, vous vous sentez toujours bloqué, nous aborderons dans cette dernière partie un certain nombre de sites Web remplis d’inspiration pour la conception de sites Web.

Awwwards

Awwwards

Ce site Web attribue des récompenses aux concepteurs, aux développeurs et aux agences Web du monde entier. Ils ont une énorme archive consultable d’exemples de conception Web. En outre, il existe un blog où ils présentent les dessins en détail et une section où vous pouvez voter sur le site du nom des candidats du mois. Tout est de haute qualité et vraiment inspirant!

Inspiration Web Design

Website Design Inspiration

C’est une galerie de projets de conception Web finis. Vous pouvez le filtrer de différentes manières pour trouver ce que vous recherchez – par exemple, par industrie, type, palette de couleurs ou style. Leurs archives sont si volumineuses que c’est souvent la seule page dont vous avez besoin pour proposer vos propres idées de conception de sites Web.

siteInspire

siteInspire

Ce site Web présente à la fois la conception Web et interactive. Comme dans l’exemple précédent, vous pouvez filtrer les entrées de différentes manières: style, type, sujet et même plate-forme. Si vous créez un compte, vous pouvez également configurer des collections de vos conceptions préférées.

One Page Love

One Page Love

Cet exemple est un site d’inspiration pour la conception Web spécialement conçu pour les conceptions d’une page. Nous avons mentionné l’idée plus tôt dans l’article. Vous pouvez parcourir la galerie ou rechercher spécifiquement les éléments que vous recherchez. Assurez-vous de naviguer lorsque vous créez votre propre site d’une page.

Dribbble

dribbble for website design ideas inspiration

Chez Dribbble, les designers montrent leur travail. Cela peut être n’importe quoi, des applications aux icônes, illustrations et autres exemples. Vous pouvez l’utiliser comme source d’inspiration générale ou utiliser les balises pour trouver ce qui vous intéresse le plus, comme le design Web.

Behance

Behance

Un site très similaire à Dribbble. C’est également un endroit où les concepteurs peuvent se connecter et montrer leur portefeuille. Vous avez beaucoup d’exemples de conception Web et pouvez utiliser la fonction de recherche pour les rechercher.

Emballer

Les idées de conception Web ne poussent pas sur les arbres. Parfois, vous avez besoin d’un peu d’aide pour trouver quelque chose de bien. Heureusement, il existe des publications comme celles-ci pour vous aider à revenir sur la bonne voie!

Espérons que les conseils, outils et ressources de conception Web mentionnés dans l’article ci-dessus vous ont fait revenir dans la créativité. De toute évidence, il y a beaucoup de choses plus utiles là-bas, c’est pourquoi nous voulons avoir de vos nouvelles!

Connaissez-vous des astuces, des outils ou une inspiration supplémentaires pour générer des idées de conception Web? Si oui, s’il vous plaît partager dans la section commentaires ci-dessous!