Le web design est une composante cruciale du processus de développement.
Si vous êtes nouveau dans le web design, la partie la plus difficile est de savoir sur quoi vous concentrer d'abord. Ces conseils de web design pour débutants couvrent les briques de base qui rendent un site soigné : planifier autour de contenu réel, une navigation claire, les bases de l'UX et de l'UI, et quelques principes de design que vous pouvez réutiliser sur chaque page.
Vous n'avez pas besoin d'un goût parfait le premier jour, vous avez besoin d'un processus reproductible et de quelques vérifications fiables.
Checklist de conseils de web design pour débutants
Cette checklist rapide condense le reste du guide en sept étapes que vous pouvez appliquer à chaque nouveau projet. Survolez-la maintenant, et revenez à chaque point en concevant.
- Définissez le but du site, l'audience, et une seule mesure de succès.
- Collectez ou rédigez du contenu réel avant d'ouvrir votre outil de design.
- Cartographiez une hiérarchie de page simple et créez un wireframe des parcours utilisateurs principaux.
- Commencez avec un modèle propre et responsive comme base structurelle.
- Limitez la palette de couleurs à deux ou trois teintes accessibles avec un contraste suffisant.
- Choisissez deux familles de police lisibles et appliquez des échelles typographiques cohérentes.
- Testez sur plusieurs appareils, ajoutez un texte alt descriptif, et recueillez des retours d'au moins cinq utilisateurs.
Choisissez quelque chose de basique pour votre premier design de site
Cela semble évident, non ? Mais parfois nous pouvons devenir trop ambitieux et finir découragés. Pour votre premier projet, c'est une bonne idée de choisir quelque chose de simple et amusant. Un site e-commerce est plus compliqué et serait mieux à aborder une fois que vous avez plus d'expérience.
Un blog est un excellent point de départ. Ce sera un bon exercice de design et vous apprendrez comment fonctionne un système de gestion de contenu (CMS), ce qui sera important à savoir pour de futurs designs de site. Le mieux, c'est que vous n'avez pas à partir de zéro. Il existe de nombreux modèles de blog qui facilitent la mise en place.
Les modèles sont un outil d'apprentissage précieux. Observer comment les éléments HTML, CSS, et JavaScript sont stylés et se combinent vous donnera un aperçu plus profond de ce qui rend un design efficace. Vous pouvez utiliser des modèles comme fondation pour faire des changements et personnalisations.
Peut-être ne voulez-vous pas démarrer un blog, essayez de puiser dans vos passions créatives ou passe-temps. Que diriez-vous de construire une vitrine pour vos compétences en photographie ou votre collection de nouvelles ? Créer un design pour mettre en avant une de vos passions fait un premier projet agréable.
Trouvez de l'inspiration auprès d'autres designers
Vous avez sans doute rencontré des sites web qui vous ont épatés avec leur design magnifique.
Créez un document d'inspiration avec des liens vers des sites que vous aimez, ou mettez-les en favoris au fil de vos découvertes. Pinterest est un excellent endroit pour trouver de superbes designs de site, vous pouvez trouver et épingler illustrations, couvertures de livres, affiches, blogs, et d'autres types de travaux de design en référence. Les designers utilisent le terme « mood board » pour ces collections. Les mood boards sont une ressource de référence rapide si vous vous retrouvez bloqué. Ce qui arrivera.
En dehors des découvertes que vous faites vous-même, il existe des collections curées à consulter.
- Awwwards a toujours de nouveaux travaux frais et une variété de collections thématiques
- Behance est une compilation fantastique de travaux de design de site, où l'accent est mis sur la qualité et la créativité
- Dribbble se concentre sur les designers individuels, offrant un forum pour obtenir des retours et communiquer avec d'autres sur leur travail
Et bien sûr, rendez-vous sur Made in Webflow pour voir la variété de façons dont les gens utilisent notre plateforme de design. Il y a tant de choses cool à découvrir et tant de modèles disponibles à cloner comme les vôtres.
Cherchez des sources d'inspiration en dehors du web
Le web design s'inspire d'un langage visuel qu'on peut trouver partout, comme la couverture d'un roman graphique ou le kiosque numérique de votre banque. Développez un œil pour reconnaître un bon design et commencez à analyser pourquoi quelque chose fonctionne ou pas, quel que soit le média.
Faites attention à la typographie
Nous lisons souvent sans même être conscients des polices. Faites attention à l'effet que la police a alors que vous consommez du contenu. Cette police sur le menu est-elle lisible ? Qu'est-ce qui fait que ce panneau écrit à la main pour l'entreprise locale fonctionne si bien ? Les lettres sont partout. Notez les bonnes et mauvaises utilisations de typographie.
Typewolf est une excellente ressource pour suivre les polices populaires. Il a de nombreuses listes à explorer, un site du jour en vedette, et des lookbooks avec des combinaisons de polices spectaculaires. C'est utile de voir de vrais exemples de typographie utilisés, et des sites comme Typewolf sont un excellent endroit pour voir leurs applications pratiques. Se familiariser avec différentes polices vous aidera à choisir la bonne police pour votre premier design de site.
Laissez-vous influencer par les beaux-arts
Oh, avons-nous mentionné qu'il y a toute une histoire de l'art dont s'inspirer ? Tant de mouvements et artistes façonnent encore le travail des créatifs d'aujourd'hui, en particulier les web designers. Faites un tour dans notre article sur l'histoire du web design et de l'art pour découvrir de nombreuses réalisations artistiques monumentales. Non seulement il est plein d'informations précieuses, c'est aussi un excellent exemple de comment le contenu et l'art peuvent se combiner pour raconter une histoire.
Explorez différents types de design
Il y a tant de disciplines de design à connaître. Une connaissance du design produit, de l'illustration, et même de l'image de marque peut développer davantage vos sens créatifs.
Pour de l'inspiration qui va au-delà du web design, Abduzeedo offre de brillants exemples. Que ce soit de l'art d'affiche, des bagages, ou du mobilier, vous verrez de fantastiques exemples de design bien fait. Soyez ouvert à différents types de design et cherchez activement de l'inspiration. Plus vous avez de connaissances, plus il sera facile de concevoir votre premier site web. L'éducation informe l'intuition.
Ayez du contenu prêt avant de commencer
Mettre le contenu en premier signifie avoir du contenu prêt à utiliser avant de commencer à concevoir votre premier site web.
Il ne doit pas être parfait. Vous pouvez toujours l'éditer et l'optimiser pour le SEO Google (optimisation pour les moteurs de recherche) plus tard. Mais avoir au moins un brouillon de ce qui sera mis en ligne aidera à s'assurer que le design est agencé pour l'accueillir. Concevoir avec du contenu réel vous donne une meilleure représentation de comment le site aura l'air et fonctionnera. Cela vous donne aussi l'opportunité de faire des changements plus tôt dans le processus de design.
Pour les blogs, vous aurez besoin d'avoir un article prêt à tester dans le CMS. Avoir quelques articles écrits avant de lancer vous évitera de vous précipiter pour écrire quelque chose après coup.
Gardez votre design simple et intuitif
Que ce soit l'écriture, la navigation, ou les CTA, personne ne veut lutter avec votre design.
Votre approche de design devrait être enracinée dans la simplicité et l'ordre. La logique devrait guider quelqu'un à travers le site avec facilité. Et puisque nous parlons des personnes qui interagiront avec ce que vous avez créé, c'est un bon endroit pour introduire l'UX.
Comprenez les bases de l'expérience utilisateur (UX)
Un site web est plus qu'un simple texte flottant dans l'espace. Le schéma de couleurs, le contenu, la typographie, la mise en page, et l'imagerie se combinent tous pour servir votre audience et susciter des émotions. Quelqu'un se promenant dans l'espace numérique que vous avez créé devrait avoir un chemin clair libre d'obstacles.
L'UX se concentre sur la compréhension de votre audience. Que recherchent-ils, et comment votre design rendra-t-il cela facile à trouver ? L'UX consiste à entrer dans la tête de votre audience et à voir votre design à travers leurs yeux.
En construisant votre premier site web, gardez ces principes directeurs UX à l'esprit :
- Rendez les choses simples et intuitives
- Communiquez les concepts dans une succession logique
- Répondez aux besoins de votre audience et résistez à la tentation d'exhiber vos compétences aux dépens de l'utilisabilité
Apprendre à propos de votre audience vous aidera à créer un design adapté à leurs désirs et besoins. Consultez notre guide du débutant sur la recherche utilisateur pour plus d'insights sur comment faire cela.
Comprenez les bases de l'interface utilisateur (UI)
Si vous êtes nouveau dans le web design, vous pourriez être confus par la différence entre UI et UX. La plupart de nous l'étions. Sachez ceci, ce sont deux concepts distincts.
Alors que l'UX s'occupe du ressenti global d'un design, l'UI concerne les détails spécifiques. Si vous étiez dans un ascenseur, l'UI serait la taille et l'agencement des boutons d'étage, tandis que l'UX englobera les couleurs, textures, et autres choix de design intérieur de l'espace de l'ascenseur. L'UI consiste à donner à quelqu'un les outils dont il a besoin pour vivre votre site sans complications.
En construisant votre premier site web, gardez ces principes UI à l'esprit :
- La fonctionnalité des éléments interactifs devrait être évidente
- L'uniformité doit guider l'utilisabilité, les actions devraient suivre des schémas logiques
- Les choix de design devraient être faits avec un but clair
Consultez nos conseils essentiels de design UI pour approfondir l'UI.
Concevez pour le mobile et l'accessibilité
Plus de la moitié du trafic web vient maintenant des téléphones, et l'accessibilité n'est pas optionnelle. Intégrez ces deux préoccupations dans votre processus dès le premier jour afin que chaque visiteur ait une expérience utilisable et agréable.
Habitudes de mise en page responsive
Commencez avec une grille fluide, ajoutez des breakpoints logiques, et prévisualisez les designs sur de vrais appareils. Flexbox, CSS grid, et les largeurs basées sur les pourcentages gardent le contenu fluide à mesure que les écrans rétrécissent ou s'agrandissent.
Police lisible & fort contraste
Utilisez une taille de police de base d'au moins 16 px. Associez cela avec des combinaisons de couleurs qui passent le contraste WCAG AA (4,5 : 1 pour le texte de corps) afin que le texte reste lisible en plein soleil, en mode sombre, et partout entre les deux.
Texte alt utile
Décrivez ce que chaque image montre et pourquoi c'est important pour le contenu environnant. Un bon texte alt aide les utilisateurs de lecteurs d'écran à comprendre le contexte et améliore le SEO en donnant plus d'indices aux moteurs de recherche.
Principes de design pour débutants
Un design efficace est guidé par certaines règles, et il est important de comprendre les principes essentiels du web design avant de commencer. Il existe des pratiques standard qui simplifieront le processus et donneront un produit final plus raffiné.
Mise en page
Si vous voulez concevoir et construire des sites web, comprendre une bonne mise en page est essentiel. Nous suggérons de garder les choses minimales et de travailler avec seulement quelques éléments pour vous concentrer sur le placement parfait.
Quand vous commencez à concevoir, pensez aux grilles. Les grilles alignent des éléments, comme des blocs div et des images sur une page web, d'une manière qui crée de l'ordre.
La structure d'une mise en page devrait suivre une hiérarchie visuelle. Quelles sont les idées importantes que vous voulez que les gens voient et dans quel ordre ? La hiérarchie visuelle doit suivre les motifs communs que les gens utilisent en lisant. Il y a deux chemins que les yeux des gens suivent généralement sur le web : le motif de balayage en forme de F et le motif en Z. Se familiariser avec le fonctionnement de ces motifs vous aidera à organiser votre propre contenu.
Le motif en F est plus commun pour les designs avec des blocs de contenu dense. Les yeux des gens balayent vers le bas du côté gauche d'une mise en page jusqu'à ce que quelque chose attire leur attention, puis lisent de gauche à droite. Imaginez regarder le menu d'un restaurant, vous pourriez sauter les noms de plats en gras alignés à gauche jusqu'à tomber sur quelque chose qui vous accroche, ce qui vous incitera à lire les détails d'accompagnement expliquant ce plat spécifique.
La plupart des gens liront quelque chose comme un article de blog selon ce motif en F. Avec un texte aligné à gauche et des phrases à puces, Nelson Abalos tire parti de cette technique de design, rendant ses articles faciles à naviguer et à suivre.
Le motif en Z est associé à des designs moins chargés en texte. De nombreuses pages d'atterrissage se conforment à ce motif. Tous les éléments majeurs sur le site Conservation Guide adhèrent au motif en Z. Si vous êtes un web designer débutant, c'est une astuce de mise en page simple pour aider l'utilisabilité.
Couleur
Vous avez à votre disposition les couleurs de l'arc-en-ciel et au-delà. Utilisez le sélecteur de couleurs pour aider à restreindre les options les plus adaptées à votre marque.
Voici quelques approches simples pour choisir un schéma de couleurs pour votre premier site web.
Monochrome
Utilisez une seule couleur comme base, variez le degré de saturation, incluez des tons clairs et sombres, et jouez avec diverses nuances pour un schéma de couleurs uniforme. Quelle que soit votre niche, un site monochrome est un choix de design intelligent. Et n'oubliez pas, quelle que soit la couleur que vous choisissez pour le texte, assurez-vous d'être attentif à la lisibilité.
Dans cet exemple de Unique, chaque section est délimitée par un schéma de couleurs monochromatique. Vous n'avez pas besoin d'être aussi élaboré dans vos designs de débutant, mais c'est agréable de voir leur utilisation de différentes variations de couleur monochromatiques. Remarquez comment chaque section est faite de couleurs liées aux sacs présentés ? C'est une astuce de design sympa qui donne un schéma de couleurs harmonieux.
Complémentaire
Prenez des couleurs qui sont opposées sur la roue chromatique et combinez-les. Assez facile, non ?
Utilisez les couleurs complémentaires avec précaution. Dans ce design ci-dessous du site Ignisis, le designer a utilisé le bleu et l'orange dans différentes combinaisons avec du blanc et des gris pour une mise en page qui ne fatigue jamais les yeux. Le contraste est net et rafraîchissant.
Bases de la typographie
La typographie est une architecture bidimensionnelle, basée sur l'expérience et l'imagination, et guidée par des règles et la lisibilité.
- Hermann Zapf
Alors quelles sont les règles que vous, designer novice, devez connaître ?
La typographie informe le ton
Pensez à une invitation de mariage ou une annonce de funérailles. Les deux sont des événements de vie profonds, l'un une célébration joyeuse et l'autre typiquement plus sombre. Là où une police fleurie ornée fonctionne bien pour un mariage, elle n'est pas bien adaptée pour des funérailles.
En concevant votre premier site web, gardez le ton à l'esprit. Si vous visez une ambiance légère, comme un blog culinaire, entrelacer des polices ludiques a du sens. Mais si vous créez un site web pour un cabinet d'avocats, tenez-vous à des polices plus professionnelles.
Serif versus sans serif
Une erreur commune des nouveaux designers est de confondre les polices serif et sans serif. Vous pouvez les distinguer parce que les extrémités des lettres serif ont une ligne ou un trait supplémentaire ajouté verticalement ou horizontalement.
Découvrez les différences entre PT Serif et PT Sans (sans la serif).
Voici PT Serif :
Et voici PT Sans :
Les serifs sont un artefact de l'époque des presses à imprimer quand la plupart des mots que nous lisions étaient imprimés à l'encre sur papier. Les serifs ancraient les mots sur la page et les rendaient plus faciles à lire. Dans les premiers jours du web, les serifs étaient évitées par les web designers car les résolutions d'écran plus basses les brouillaient. Maintenant que les écrans sont mieux optimisés pour la typographie avec serifs, elles ont fait un retour.
Ces petites lignes font une énorme différence. Vous remarquerez que la police PT Serif ci-dessus semble plus formelle et que la version sans serif semble plus légère et détendue.
Puisque les polices serif sont plus compliquées, elles sont mieux utilisées avec modération. Les titres sont un endroit idéal pour les polices serif, et les plus grands blocs de contenu bénéficient d'une police plus simplifiée sans serifs.
Ornementation versus praticité
Les boucles et volutes d'une police fleurie ajouteront de la personnalité et de l'élégance à un design, mais n'abusez pas des polices décoratives. Un site web consiste à communiquer avec une audience via le contenu. Comme l'a dit Hermann Zapf, la lisibilité est une des caractéristiques les plus importantes d'une police.
Détails techniques de la typographie
Il y a beaucoup à apprendre sur la typographie. À mesure que vous progressez comme designer, vous devrez savoir comment utiliser la hauteur de ligne, le crénage, et différents poids dans votre typographie. Mais ne vous perdez pas trop dans le peaufinage de toutes les subtilités pour votre premier site. Concentrez-vous sur le fait de vous assurer que tout est lisible, vous pourrez expérimenter le peaufinage des détails plus tard.
Commencez à concevoir
Les tutoriels et la recherche sont inestimables pour votre apprentissage, mais vous devrez éventuellement simplement vous y plonger et commencer à concevoir. Même si vous créez quelque chose que personne ne verra jamais, c'est toujours un exercice de résolution de problème et d'application de ce que vous avez appris. Ne vous inquiétez pas si ce n'est pas incroyable. Mais soyez fier d'avoir franchi ce seuil de designer aspirant à designer réel, vous êtes sur la bonne voie !
Obtenez des retours
Vous avez terminé votre premier design, félicitations ! Vous avez travaillé dur et vous êtes prêt à le montrer au monde. Mais avant de publier, obtenez une perspective extérieure sur ce que vous avez fait. Les tests d'utilisabilité n'ont pas besoin d'être chers, tester avec juste cinq utilisateurs peut révéler la majorité des problèmes.
Recevoir des critiques constructives peut être inconfortable. Créer quelque chose, que ce soit un essai, une peinture, ou un site web, est un acte de vulnérabilité. Les choses que vous mettez dans le monde sont une extension de qui vous êtes et de ce dont vous êtes capable. Être dit que ce que vous avez créé pourrait être meilleur ou est erroné peut sembler comme une attaque personnelle.
En web design, les retours sont une partie normale et nécessaire du processus. Apprenez à mettre votre ego de côté et à séparer les retours de votre estime de soi. À mesure que vous gagnez de l'expérience, vous serez capable d'identifier et de mettre en œuvre des retours pratiques et utiles et de laisser aller le reste. Vous découvrirez que les designers plus expérimentés savent ce que c'est d'être débutant, ils sont ravis de voir les designers moins expérimentés réussir.
Si vous concevez avec Webflow, partagez votre travail dans la vitrine Webflow ou demandez de l'aide sur le forum de design Webflow. À mesure que vous progressez, vous voudrez soumettre à des endroits comme Dribbble et Behance pour obtenir plus de visibilité sur votre travail. Vous obtiendrez non seulement des critiques constructives, vous obtiendrez aussi des retours sur ce que vous faites bien, ce qui fait toujours du bien.
Construisez votre premier site avec Webflow
Le canevas visuel de Webflow transforme HTML, CSS, et JavaScript en contrôles intuitifs de glisser-déposer. Vous pouvez expérimenter librement, sachant que la plateforme produit du code propre et prêt pour la production tandis que vous vous concentrez sur la mise en page, les interactions, et le contenu.
Créez un compte gratuit, choisissez un modèle de démarrage responsive, et publiez sur une URL de staging Webflow en quelques minutes. Quand vous êtes prêt pour un domaine personnalisé, l'hébergement rapide et le SSL intégré ne sont qu'à un clic, afin que vous puissiez continuer à itérer sur le design sans vous soucier des pipelines de déploiement.
