Comment apprendre la conception Web (en 9 étapes)

Comprendre les concepts clés de la conception visuelle

Ligne

Chaque lettre, bordure et division d’une mise en page est composée de lignes qui composent leur plus grande structure. Apprendre la conception web signifie comprendre les applications des lignes pour créer de l’ordre et de l’équilibre dans une mise en page.

Formes

Les trois formes de base de la conception visuelle sont des carrés, des cercles et des triangles. Les carrés et les rectangles fonctionnent pour les blocs de contenu, les cercles pour les boutons et les triangles sont souvent utilisés pour les icônes qui accompagnent un message important ou un appel à l’action. Les formes ont aussi un sens de l’émotion, avec des carrés associés à la force, des cercles avec l’harmonie et le confort, et des triangles avec l’importance et l’action.

Texture

Texture réplique quelque chose dans le monde réel. Grâce à la texture, nous avons une idée de si quelque chose est rugueux ou lisse. Les textures peuvent être vues tout au long de la conception Web. Des arrière-plans en papier aux feux follets colorés d’un flou gaussien, soyez conscient des différents types de textures qui peuvent rendre vos créations plus intéressantes et leur donner un sentiment de physicalité.

Couleur

Pour créer des designs qui ne sont pas une fatigue oculaire, vous devez vous renseigner sur la théorie des couleurs. Comprendre la roue chromatique, les couleurs complémentaires, les couleurs contrastées et les émotions auxquelles les différentes couleurs sont liées feront de vous un meilleur concepteur de sites Web.

Grilles

Les grilles ont leurs racines dans les premiers jours de la conception graphique. Ils fonctionnent si bien pour mettre de l’ordre dans les images, les textes et autres éléments d’une conception Web. Apprenez à structurer vos mises en page Web à l’aide de grilles.

Connaître les bases du HTML

Le langage de balisage hypertexte (HTML) fournit des instructions pour l’affichage du contenu, des images, de la navigation et d’autres éléments d’un site Web dans le navigateur Web de quelqu’un. Bien que vous n’ayez pas besoin d’être un expert en HTML, il est toujours utile de vous familiariser avec son fonctionnement, même si vous utilisez une plate-forme de conception visuelle comme Webflow.

Les balises HTML sont les instructions qu’un navigateur utilise pour générer un site Web. Les titres, paragraphes, liens et images sont tous contrôlés par ces balises. Vous voudrez surtout savoir comment les balises d’en-tête telles que les balises H1, H2 et H3 sont utilisées pour la hiérarchie du contenu. En plus d’affecter la structure de la mise en page, les balises d’en-tête sont importantes dans la façon dont les robots d’exploration Web classent une conception et affectent la façon dont elles apparaissent dans les classements de recherche organiques.

Pour en savoir plus sur les concepts de base du HTML (il y a aussi une section sur le CSS), consultez cette leçon que nous avons élaborée dans Webflow University.

Comprendre CSS

CSS (ou feuilles de style en cascade) fournit un style et des instructions supplémentaires sur la façon dont un élément HTML va apparaître. Faire des choses comme appliquer des polices, ajouter un remplissage, définir l’alignement, choisir des couleurs et même créer des grilles sont tous possibles via CSS.

Savoir comment fonctionne CSS vous donnera les compétences nécessaires pour créer des sites Web d’apparence unique et personnaliser les modèles existants. Passons en revue quelques concepts clés du CSS.

Classes CSS

Une classe CSS est une liste d’attributs réunis dans le style d’un élément individuel. Quelque chose comme le corps du texte pourrait avoir la police, la taille et la couleur faisant partie d’une seule classe CSS.

Classes combo CSS

Une classe combo est construite sur une classe de base existante. Il hérite de tous les attributs tels que le dimensionnement, la couleur et l’alignement qui peuvent déjà être en place. Les attributs peuvent ensuite être modifiés. Les classes combinées vous font gagner du temps et vous permettent de configurer des variantes d’une classe que vous pouvez appliquer où vous le souhaitez dans une conception Web.

Savoir comment fonctionne CSS est essentiel lors de l’apprentissage de la conception Web. Comme mentionné dans la section sur le HTML, nous vous recommandons de vous rendre à Webflow University pour en savoir plus sur le fonctionnement du CSS.

Apprenez les fondements de l’UX

L’UX est la magie qui donne vie à un site Web, le transformant d’un arrangement statique d’éléments en quelque chose qui interagit avec les émotions de quelqu’un qui le parcourt.

La palette de couleurs, le contenu, la typographie, la mise en page et les visuels sont tous réunis pour servir votre public. La conception de l’expérience utilisateur est une question de précision et d’évocation de sentiments. Il offre à quelqu’un non seulement un voyage en douceur, mais une expérience qui le relie à l’entité ou à la marque derrière la conception Web.

Voici quelques principes UX que vous devrez connaître.

User personas

La conception Web signifie comprendre les utilisateurs finaux. Vous devriez apprendre à faire des recherches sur les utilisateurs et à créer des personas utilisateur. De plus, vous devrez savoir comment utiliser ces informations pour créer un design optimisé pour leurs besoins.

Architecture de l’information

Sans organisation claire, les gens seront confus et rebondiront. L’architecture de l’information et la cartographie du contenu fournissent un modèle pour la façon dont le site Web et chaque section travailleront ensemble pour fournir un parcours client clair.

Flux d’utilisateurs

La construction de flux d’utilisateurs peut entrer en jeu lorsque vous vous frayez un chemin vers des projets de conception plus étendus, mais vous serez mieux à l’avenir si vous commencez à y penser et à les construire pour vos premières conceptions. Les flux d’utilisateurs communiquent comment les gens vont se déplacer à travers une conception. Ils vous aident à hiérarchiser les sections les plus importantes et à vous assurer que les gens peuvent y accéder.

Wireframes

Les wireframes indiquent où sur une page Web les titres, le texte, les visuels, les formulaires et d’autres éléments vont être placés. Même si vous créez une conception Web simple d’une page, la cartographie d’un wireframe vous donnera un guide solide à partir duquel travailler. Au fur et à mesure que vous passez à des sites Web plus compliqués, les wireframes sont essentiels pour créer une expérience cohérente, structurer les mises en page et ne rien manquer de ce qui doit être inclus.

Prototypage

Les prototypes peuvent avoir différents niveaux de fidélité mais agissent comme une représentation d’une conception fonctionnelle. Les images, les interactions, le contenu et d’autres éléments importants sont tous en place et reproduisent le design du monde réel. Les prototypes sont utilisés pour obtenir des commentaires et affiner un design tout au long du processus.

Familiarisez-vous avec l’interface utilisateur

Une interface utilisateur est un mécanisme qui met en action une technologie. Une poignée de porte est une interface utilisateur. Le contrôle du volume de votre autoradio avec lequel votre proche n’arrêtera pas de jouer est une interface utilisateur. Et le clavier dans lequel vous entrez votre code PIN dans un guichet automatique est une interface utilisateur. Tout comme les boutons et autres mécanismes dans le monde réel permettent à quelqu’un d’interagir avec des machines, les éléments de l’interface utilisateur d’un site Web permettent à quelqu’un de mettre en mouvement des actions.

Passons en revue deux principes clés de l’interface utilisateur : la conception intuitive et la simplicité.

Comment créer des interfaces intuitives

Interagir et interagir avec un site Web doit être cohérent et suivre des modèles reproductibles. Les personnes qui atterrissent sur un site Web doivent immédiatement comprendre les systèmes en place pour y naviguer.

Simplifiez l’interface utilisateur

L’interface utilisateur existe pour optimiser la convivialité. Cela signifie rendre les commandes faciles à utiliser et évidentes dans leur fonctionnalité. Que vous minimisiez le nombre d’options de navigation, que vous accélériez le processus de paiement ou que vous intégriez d’autres éléments interactifs qui augmentent l’accessibilité, comprendre l’interface utilisateur vous aidera à rationaliser l’expérience d’une personne lors de l’interaction avec un site Web.

Bien sûr, l’interface utilisateur est un vaste sujet qui ne peut pas être capturé en quelques paragraphes. Nous vous suggérons de consulter le billet de blog « 10 conseils de conception essentiels de l’interface utilisateur (interface utilisateur) » comme introduction à l’interface utilisateur.

Lectures connexes: UX vs UI: différences clés que chaque concepteur devrait connaître

Comprendre les bases de la création de mises en page

Nos yeux s’accrochent automatiquement à certains modèles de conception, ce qui facilite la navigation dans une conception Web. Nous savons intuitivement où chercher parce que nous avons vu ces mêmes modèles encore et encore que nous avons consommé des médias tout au long de notre vie. Connaître les modèles de conception vous aidera à créer des sites Web qui ont un flux fluide vers le contenu et les visuels. Deux modèles de mise en page Web courants que vous devez connaître sont les modèles en Z et les modèles en F.

Z-pattern

Pour les mises en page avec une économie de mots et d’images et de généreuses quantités d’espace négatif, le Z-pattern constitue un moyen efficace de parcourir un site Web. Lorsque vous commencez à faire attention à l’endroit où vos yeux traversent une conception, vous reconnaîtrez tout de suite lorsqu’un motif en Z est en place.

F-pattern

Les conceptions lourdes de texte, comme pour une publication en ligne ou un blog, suivent souvent un F-pattern distinct. Sur le côté gauche de l’écran, vous verrez une liste d’articles ou de publications, et dans le corps principal de la page, vous verrez des lignes d’informations connexes. Ce modèle est optimisé pour donner aux gens toutes les informations dont ils ont besoin, même s’ils les parcourent rapidement.

Lectures connexes: Mise en page Web: anatomie du site web chaque concepteur doit apprendre

En savoir plus sur la typographie

Les polices peuvent donner des tons ou des émotions différents et affecter la lisibilité. Si vous apprenez à concevoir des sites Web, il est essentiel de savoir utiliser la typographie.

La typographie sert à plusieurs fins dans la conception de sites Web. Premièrement, il sert l’objectif utilitaire de rendre le contenu lisible. Mais il peut également servir de décoration, et l’utilisation de bon goût de la typographie stylisée peut ajouter à l’esthétique globale.

Voici trois concepts typographiques de base que vous devez connaître.

Empattement

Les caractères à empattement ont des lignes minuscules appelées empattement qui ornent chaque lettre. Ce style typographique peut être retracé à l’impression.

Sans serif

Comme son nom l’indique, les polices sans serif n’ont pas les lignes d’identification des polices avec serif. Ces typesfaces se trouvent dans le domaine numérique des sites Web et des applications.

Affichage

Les polices d’affichage sont souvent utilisées pour les titres et peuvent être soit grandes et percutantes, soit constituées de lignes fines et nettes. Ils ont généralement des formulaires de lettres sophistiqués et sont destinés à attirer l’attention de quelqu’un.

Lectures connexes: Conception typographique: styles de police et ressources pour les concepteurs

Mettez vos connaissances en action et créez quelque chose

Vous pouvez regarder des tutoriels, lire des articles de blog, vous inscrire à des cours en ligne et absorber toute la théorie et les informations que vous pouvez sur la conception Web, mais la seule façon de devenir un concepteur Web est de commencer la conception Web.

Commencez par un projet simple. Peut-être que quelqu’un que vous connaissez a besoin d’aide pour créer un portefeuille ou a une agitation latérale qui manque de présence sur le Web. Proposez de leur concevoir quelque chose gratuitement.

Un blog est aussi un autre grand projet de débutant. Cela vous donnera une expérience de conception pratique pour apprendre à utiliser des choses comme un CMS, ainsi qu’une vitrine pour vos compétences en écriture.

Créer un site Web pour une fausse entreprise ou entreprise est un autre exercice créatif amusant pour développer vos côtelettes de design. De plus, vous pouvez l’ajouter à votre portefeuille.

Obtenez un mentor

Les mentors sont précieux parce qu’ils ont été là où vous êtes — au tout début — et ont le désir de vous aider à travers les leçons durement acquises qu’ils ont apprises. Ils ont un puits profond d’expertise et de connaissances. Ils sont une excellente ressource pour obtenir des commentaires sur votre travail et trouver ce que vous faites correctement et ce qui doit être amélioré.

En recherchant le mentor approprié, assurez-vous de trouver quelqu’un qui fait le type de design que vous admirez et qui se spécialise dans ce que vous voulez apprendre. Les mentors peuvent vous donner un chemin clair après des années passées sur le terrain afin que vous n’ayez pas à trébucher dans l’apprentissage de la conception Web.

Aucun code n’offre une entrée facile dans la conception Web

Il fut un temps, il n’y a pas si longtemps, où il fallait avoir une compréhension approfondie du HTML et du CSS pour écrire manuellement le code derrière une conception Web. Aujourd’hui, sans outils de code comme Webflow, il est possible de créer un site Web et de le lancer en peu de temps. Ce qui a pris des jours ou des semaines peut maintenant se produire en quelques heures.

Bien sûr, il faut beaucoup pour créer un bon design Web. Apprendre les bases de la conception visuelle, les bases de l’interface utilisateur et de l’expérience utilisateur, et savoir comment les fonctions front-end et back-end feront de vous un concepteur plus complet.

Que vous soyez débutant ou expert, Webflow offre une plate-forme visuelle intuitive pour vous permettre de réaliser votre créativité. En plus d’un moyen facile à utiliser de lancer des sites Web, Webflow dispose d’une communauté entière pour vous donner des conseils et vous aider à améliorer vos compétences. Nous sommes impatients de vous voir travailler dans notre vitrine.