Erreurs courantes en matière de conception de sites web

Il est plus facile pour les utilisateurs d'assimiler les informations si elles sont regroupées en blocs logiques. Réglez l'espacement entre 120 et 80 pixels et séparez les blocs de texte en utilisant des arrière-plans de couleur.

Les blocs logiques doivent être entourés d'espaces de même taille. Dans le cas contraire, votre page sera désordonnée et les utilisateurs risquent de ne pas accorder la même attention à chaque section.

Pour éviter que les parties logiques ne se confondent, séparez-les et insérez un grand espace (au moins 120 pixels) entre elles.

Le contraste entre le texte et l'arrière-plan doit être suffisant. Pour faire ressortir le texte, placez un filtre contrasté sur l'image. Le noir est une couleur populaire, mais vous pouvez également utiliser des couleurs vives et les mélanger.

Une autre option consiste à utiliser une image contrastée dès le départ et à placer le texte au-dessus d'une partie sombre d'une photographie.

Trop de styles typographiques et graphiques sur une même page lui donnent un aspect peu professionnel et difficile à lire. Pour éviter cela, limitez-vous à une seule police de caractères et à deux options de graisse. Par exemple, normal et gras.

Évitez d'accentuer les éléments étroits de la page avec de la couleur. Ce n'est pas très esthétique. Par exemple, les titres sont déjà bien marqués, grâce à leur taille, à la graisse de la police et aux intercalaires. Vous souhaitez mettre en valeur un point particulier de la page ? Utilisez un arrière-plan de couleur pour l'ensemble du bloc, y compris pour le titre et le texte qui s'y rapportent.

Il est difficile de lire du texte en colonnes étroites, car les visiteurs du site web doivent sauter d'une ligne à l'autre. De plus, ce n'est pas très esthétique ! Il est préférable de réduire le nombre de colonnes et de raccourcir le texte. Sinon, personne ne le lira.

Centrer le texte sur la page fonctionne bien lorsqu'il y a peu de texte, sinon il est difficile pour les utilisateurs de naviguer efficacement. Parallèlement, augmentez la taille de la police à partir de 24 pixels.

Si vous devez inclure beaucoup de texte, utilisez les blocs comportant une copie de texte repliable (sur Tilda, utilisez les blocs TX12, TX16N, ou le bouton BF703).

Évitez de couvrir les parties significatives ou les petits détails d'une image avec du texte. De cette façon, vous masquerez l'image et rendrez le texte illisible. Essayez différentes positions pour les lignes de texte, telles que centrée, alignée à gauche ou même verticale.

Pour que la hiérarchie des informations soit clairement visible sur une page, le titre de la couverture doit être plus grand que le reste des rubriques ou au moins de la même taille. Cela est d'autant plus vrai si le titre est long, par exemple.

Le même principe s'applique à la hiérarchie visuelle au sein d'un bloc logique. Le titre doit être l'élément graphique le plus important de la page, suivi d'un sous-titre plus petit et moins visible. Ensuite, les titres des éléments qui suivent doivent être sensiblement plus petits que le titre et avoir le même poids. Les polices de caractères les plus petites doivent être utilisées pour les descriptions des caractéristiques.

Cela aidera les visiteurs du site web à distinguer les informations les plus importantes de celles qui le sont moins.

Une image ou une galerie en plein écran qui suit un texte ressemble à un bloc séparé et indépendant. Si vous ajoutez de l'espace autour de la galerie, le texte et les images auront l'air d'un ensemble logique, grâce à un arrière-plan commun.

Une police très grande convient parfaitement à une phrase courte. Si le titre est long, utilisez une police plus petite. Cela facilitera la lecture et laissera beaucoup d'espace pour tous les autres éléments graphiques de la page.

Les bordures sont nécessaires lorsqu'un bouton est transparent. L'ajout d'une bordure pour un bouton de couleur n'a pas de sens. Il s'agit d'un autre élément de conception inutile qui surcharge la page et rend sa lecture difficile.

L'utilisation d'un trop grand nombre de couleurs sur une page est source de confusion. En outre, les éléments les plus importants ne sont pas clairs. Une ou deux couleurs suffisent pour donner du poids visuel à ce qui est vraiment important.

Les gens visitent des sites web pour trouver des solutions à leurs problèmes, aidez-les ! Utilisez le menu pour aider les visiteurs à naviguer sur le site et à trouver rapidement et facilement ce dont ils ont besoin. Ne les surchargez pas d'informations. Il suffit de 5 à 7 rubriques de menu.

Un mur de texte rend la lecture difficile à comprendre. Pour faciliter la navigation, divisez-le en paragraphes ou introduisez des pauses telles que des phrases d'impact, des citations ou des images.

Un titre ne doit pas "pendre" entre les chapitres à une distance similaire parce qu'il appartient au paragraphe qui suit. L'espace au-dessus d'un titre doit être 2 à 3 fois plus grand que l'espace au-dessous. Simultanément, la distance sous un titre doit être à peu près la même que l'espace entre les paragraphes ou légèrement plus grande. De cette manière, le titre renvoie visuellement au texte suivant.

En typographie, le contraste est utilisé pour diviser visuellement les différents niveaux de texte et établir une hiérarchie stricte. Les titres principaux doivent être les plus visibles sur la page ; les sous-titres doivent être beaucoup plus petits, mais toujours bien visibles.

Si les blocs ont le même poids, ils doivent avoir le même aspect et la même sensation et être placés à une distance égale les uns des autres.

D'une part, l'illustration et sa légende forment un tout, mais il s'agit de deux éléments distincts, et les légendes ne doivent pas interférer avec l'image.

Le sous-titre et le texte qui le suit vont de pair, mais si l'espace entre les paragraphes d'un article est supérieur à l'espace entre le sous-titre et le paragraphe suivant, l'article semble décousu.

Les éléments utilisés pour mettre l'accent, tels que les phrases clés ou les citations, sont des objets indépendants. Pour qu'ils ressortent vraiment, placez-les à 75-120 pixels de la copie principale.

Si vous souhaitez mettre l'accent sur une certaine phrase, faire preuve d'audace, faites en sorte que la phrase clé soit plus grande que le texte principal de 10 à 15 pixels. Faites en sorte que la phrase clé se détache vraiment du reste du texte.

Si vous souhaitez mettre en évidence une petite section de la page, telle que des informations sur l'auteur, il vous suffit de l'entourer d'un espace suffisant pour créer une impression d'espace. Ne placez pas cette section sur un fond coloré, elle ne serait pas à sa place.

Lorsque vous utilisez plusieurs images plein écran dans une séquence, évitez de laisser un espace entre elles. La bordure sera toujours visible et il n'est pas nécessaire d'ajouter un élément supplémentaire. Cela n'apporte rien, cela n'a pas de sens.

Les accents graphiques (comme les caractères gras ici) fonctionnent bien lorsqu'ils sont peu nombreux. S'ils sont trop nombreux, ils gêneront la lecture de la page.

La conception ne doit pas nuire à la lisibilité. Moins il y a de styles typographiques, mieux les éléments importants sont visibles. Il suffit de mettre l'accent sur les titres et les sous-titres et d'utiliser des contrastes pour les phrases clés.

Le centrage est généralement appliqué aux titres et aux citations pour les distinguer du reste du texte. Un long texte centré est difficile à lire.

Un titre est un élément de conception individuel. Il ne doit pas être placé trop près d'une image qui le suit. Pour une combinaison gagnante, fixez un espacement d'au moins 60 pixels et ajoutez un sous-titre : il dépliera le contenu de la page et mettra l'accent là où il le faut.

L'italique est utilisé pour mettre l'accent sur un mot ou une courte phrase dans le texte. Il n'est pas aussi visible que les caractères gras, mais il permet de mettre l'accent là où c'est nécessaire.

N'utilisez pas l'italique pour le corps du texte et les titres. Et si des polices sans empattement sont utilisées dans le texte, évitez complètement l'italique.

Vous pouvez repérer cette erreur ennuyeuse vous-même si vous faites une petite pause après avoir modifié votre page (en changeant la taille de la police, les alignements ou l'espacement) et que vous regardez le résultat d'un œil neuf.