Principes de base de conception de sites Web

Vous savez que vous avez besoin d'un site Web - ou peut-être avez-vous besoin d'une refonte de site Web - mais vous hurlez aux mots HTML, CSS et Java. Ce ne sont pas vraiment des mots anglais, après tout. Ce sont les noms de langues entièrement différentes qui ressemblent à de la soupe à l'alphabet pour les non-initiés. Eh bien, détendez-vous. Parce que les principes de conception de sites Web abordés ici n'ont rien à voir avec le codage.

‌ Ces directives vous aideront à tirer le meilleur parti de l'outil de création de site Web que vous utilisez. Ils vous dirigeront vers les meilleurs modèles, images et règles à retenir.

Cet article couvre :

• Hiérarchie visuelle
• Dispositions Gutenberg, Z et F
• Le nombre d'or
• La règle des tiers
• Théorie des couleurs
• Théorie de la Gestalt
• Espace négatif et minimalisme
• Conception optimisée pour les mobiles

Que vous souhaitiez créer un site Web personnel qui développe votre marque ou que vous souhaitiez une mise à jour sur la conception de sites Web pour les petites entreprises, gardez ces principes à l'esprit.

Hiérarchie visuelle

La hiérarchie visuelle est l'importance relative que le spectateur attribue à un ensemble d'objets visuellement différenciés.

C'est une façon élégante de dire que lorsque vous regardez un tas de choses, vous avez tendance à vous concentrer sur les choses qui se démarquent. Vous accordez plus d'attention aux objets proéminents.

Comment cela se passe-t-il ? Eh bien, si vous affichez un groupe d'images de différentes tailles, vous allez naturellement accorder de l'importance aux grandes images par rapport aux plus petites. Si vous regardez un tas de mots qui sont noirs et un écrit en magenta, vous graviterez vers le mot magenta.

Vous pouvez jouer avec plusieurs éléments différents pour établir une hiérarchie visuelle et attirer l'attention du spectateur là où vous le souhaitez. Ceux-ci inclus:

• Taille et échelle. La taille relative compte, mais l'échelle aussi. Si quelque chose est clairement plus grand ou plus petit qu'il « ne devrait » l'être, vous le remarquerez.
• Se concentrer. Les images et les polices floues semblent plus éloignées que celles dont la mise au point est nette.
• Couleur. Les changements de couleur, de nuance ou d'intensité peuvent tous attirer l'attention.
• Police de caractères. La taille du texte, la police et les effets vous aident à classer les informations sur une page.
• Mouvement. Si une image rebondit sur une page autrement statique, vous remarquerez celle qui bouge, mais soyez prudent. Trop de mouvement peut être désorientant.
• Espace négatif. Vous pouvez isoler les éléments clés pour les faire ressortir des zones plus peuplées de la page.

Vous remarquerez que bon nombre de ces principes de conception de sites Web partent d'un endroit intuitif. Tirez parti de la hiérarchie visuelle en mettant en évidence les informations et éléments visuels importants.

Dispositions Gutenberg, Z et F

L'organisation est une autre façon d'établir une hiérarchie. Vous pouvez puiser dans les habitudes de visionnage naturelles pour placer vos informations et opportunités les plus importantes, telles que les formulaires d'inscription par e-mail essentiels à la stratégie marketing de commerce électronique, là où les navigateurs sont susceptibles de s'arrêter.

Les trois dispositions les plus couramment utilisées sont la disposition Gutenberg, la disposition Z et la disposition F. Chacun utilise des principes de conception de site Web distincts.

La mise en page de Gutenberg

Le plus simple des trois peut être très efficace lorsqu'il est utilisé correctement. La mise en page de Gutenberg divise la page en quatre quadrants. Parce que vous lisez de gauche à droite et de haut en bas, il attribue respectivement une importance relative à chaque quadrant.

‌ Les informations les plus importantes doivent être placées dans les quadrants supérieur gauche et inférieur droit. Le matériel d'importance moyenne appartient au quadrant supérieur droit. Le coin inférieur gauche ne doit contenir que des informations et des images qui peuvent être rapidement numérisées ou complètement ignorées.

Disposition en Z

La mise en page Z fonctionne mieux pour les pages minimalistes qui n'ont pas besoin de présenter une tonne d'informations. Il tire parti des mêmes pratiques générales de lecture, mais dessine un schéma différent à travers elles.

Le visualiseur balaye horizontalement (de gauche à droite) le long du haut de la page, coupe en diagonale du haut à droite vers le bas à gauche, puis se déplace horizontalement vers le bas à droite.

Dans la disposition en Z, vous placez le matériau à chacun des quatre coins et au centre de la diagonale.

Disposition F

La mise en page F fonctionne mieux lorsque vous souhaitez en inclure plus - plus de tout, mais surtout plus de texte.

Lorsque vous numérisez une page plus longue et plus peuplée, vous numérisez de gauche à droite et de haut en bas. Les informations doivent être organisées de manière symétrique, le long de lignes horizontales.

Le nombre d'or

De bons principes de conception de sites Web peuvent également vous aider à déterminer les proportions de chaque section d'une page Web. Le nombre d'or - parfois appelé les proportions divines ou désigné par la lettre grecque phi - fait référence à un rapport que les gens trouvent naturellement attrayant ou même beau.

Cela se produit lorsque vous avez un segment de ligne divisé en deux fragments de tailles différentes. Le rapport du plus grand fragment au tout est égal au rapport du plus petit fragment au plus grand.

Mais il n'est pas nécessaire d'essayer de récupérer ce dont vous vous souvenez des équations quadratiques de la septième année. Tout ce dont vous avez besoin de vous souvenir est le nombre 1.618 (et vraiment, 1.6 fera l'affaire).

Si vous avez une surface totale X et que vous voulez connaître la taille de votre plus grande moitié, divisez simplement X par 1,618. Très facile.

Conseil rapide : si vous essayez de déterminer la taille d'une image, vous pouvez cliquer dessus avec le bouton droit de la souris (Windows) ou effectuer un contrôle-clic (Mac) et sélectionner "Inspecter". À droite de la page, vous pouvez obtenir de nombreuses informations sur l'image, y compris sa taille en pixels sous « Calculé ».

La règle des tiers

Il est temps d'examiner les principes de conception de sites Web pour les images elles-mêmes. Vous avez déjà appris où les mettre et quelle taille ils doivent avoir. La règle des tiers est une règle simple pour la composition des photos.

Si vous divisez votre image en trois sections égales verticalement et trois sections égales horizontalement, vous créez une grille. Selon la règle des tiers, vous voudriez placer des stimuli visuels le long de ces lignes et/ou à leurs points d'intersection.

Tout comme vous êtes programmé pour trouver le nombre d'or magnifique, vous êtes programmé pour trouver des images qui utilisent la règle des tiers dynamiques et intéressantes.

Théorie des couleurs

La théorie des couleurs peut être écrasante car il existe de nombreuses façons de bien faire les choses - d'avoir un schéma de couleurs cohérent qui donne la bonne impression. C'est l'un de ces sujets que vous pouvez explorer beaucoup plus en profondeur.

Pour cet aperçu du débutant, vous voudrez peut-être avoir une roue chromatique à portée de main.

Voici quatre façons différentes de choisir des couleurs de marque et de site Web qui s'harmonisent :

1. Optez pour le monochromatique. Il n'a pas à être ennuyeux. Utilisez une variété de nuances et de teintes pour créer un contraste.
2. Aller complémentaire. Faites correspondre votre couleur primaire avec un accent tiré de son opposé polaire sur la roue chromatique - violet et jaune, par exemple.
3. Allez analogue. Choisissez trois couleurs côte à côte sur la roue chromatique.
4. Allez triadique. Dessinez un triangle équilatéral - un avec trois côtés égaux - dans votre roue chromatique et utilisez les couleurs que vous trouvez aux trois points.

Lorsque vous choisissez des couleurs, vous devez également penser à leur chaleur. Les couleurs froides contiennent plus de bleu – elles peuvent sembler austères ou tristes, mais elles sont également apaisantes. Les couleurs chaudes ont plus de rouge et de jaune – elles peuvent sembler passionnées et excitantes, mais peuvent également sembler agressives dans certaines utilisations.

Théorie de la Gestalt

La théorie de la Gestalt a en fait été développée par des psychologues comme cadre pour comprendre le traitement cognitif.

‌ À la base, la théorie de la gestalt dit que lorsque vous regardez un ensemble complexe de visuels, vous faites l'une des deux choses suivantes :

• Voir d'abord un tout cohérent, puis voir ses parties
• Voyez d'abord un ensemble déroutant, puis essayez de le décomposer en parties ou en groupes plus simples

Il existe sept principes de conception de sites Web tirés de cette théorie de base :

1. La loi de similitude. Regroupez les choses par ressemblance. Des choses similaires vont ensemble.
2. La loi de proximité. Regroupez les choses selon des régions communes ou la distance relative entre elles. Les choses qui sont proches vont ensemble.
3. La loi de la simplicité. Les gens voient les objets ambigus dans les termes les plus simples possibles. Par exemple, vous percevrez les cercles qui se chevauchent comme cela, plutôt que comme une collection d'arcs.
4. La loi de la continuité. Les gens sont plus susceptibles de voir les choses comme continues que comme séparées. Vous suivrez des objets le long de chemins ou de courbes.
5. La loi de la perception. Les gens voient des chiffres - ou des points focaux - et des arrière-plans. Les choses sont en relation avec d'autres choses.
6. La loi de fermeture. Les gens remplissent les informations manquantes pour donner un sens aux choses. Une ligne brisée reste une ligne.
7. La loi de symétrie. Les gens voient les choses symétriques comme étant liées.

Utilisez ces principes pour aider vos téléspectateurs à interpréter les informations que vous leur donnez.

Espace négatif et minimalisme

Ces deux éléments vont de pair car ils sont tous deux des principes de conception de sites Web anti-encombrement.

L'espace négatif est tout l'espace blanc - ou autrement vide - qui donne à votre site Web une apparence propre et élégante. Ne submergez pas le spectateur avec des stimuli visuels. Assurez-vous d'avoir beaucoup de blanc pour espacer les choses.

Vous ne voulez pas non plus submerger le spectateur avec trop d'informations ou trop de choix. Moins c'est définitivement plus - adoptez le minimalisme.

Lorsque vous donnez trop d'informations, les éléments importants se perdent. Lorsque vous donnez trop de commandes ou d'options, le visiteur est moins susceptible d'en choisir une, rebondissant plutôt loin de votre site.

Conception optimisée pour les mobiles

L'un des principes de conception de site Web les plus importants est de s'assurer que votre site est attrayant et convivial sur tous les appareils.

N'obligez pas les visiteurs à essayer de se déplacer sur la même page statique qu'ils obtiendraient sur leur bureau. Utilisez des outils qui adaptent facilement les sites Web aux utilisateurs mobiles avec des interfaces faciles à faire défiler.

‌ Non seulement cela évite la frustration des visiteurs, mais c'est aussi un facteur important d'optimisation des moteurs de recherche (SEO). L'algorithme de Google prend définitivement en compte l'optimisation mobile.

‌ Si vous cherchez à atteindre de nouveaux clients de manière organique, vous avez besoin d'une solide stratégie de référencement. Faites donc attention aux principes de conception de sites Web qui vous mettront sur la bonne voie.

Principes de conception de sites Web - vous pouvez le faire!

En fait, une fois que vous y êtes, c'est très amusant. C'est le mariage parfait d'une stratégie commerciale intelligente et d'un temps de jeu d'art et d'artisanat.

Vous disposez de nombreux principes de conception de sites Web utiles pour vous aider à créer le site parfait, mais les points les plus importants sont les suivants :

1. La hiérarchie visuelle vous aide à attirer l'attention du spectateur là où vous le souhaitez.
2. Moins est plus.
3. Mobile-friendly ne suffit plus. Vous devez être optimisé pour le mobile.

Alors foncez ! Plus de protestations que vous n'êtes pas un concepteur de site Web. Vous le pouvez et le serez bientôt. Commencez tout simplement.