3 principes de conception Web efficaces pour le « non-concepteur »

Bienvenue dans la deuxième partie de notre mini-série « Principes de conception Web efficaces de Divi » où nous explorons des pratiques de conception efficaces pour aider à responsabiliser les nouveaux concepteurs Web et ceux qui s'identifient comme quelqu'un sans « œil pour le design ».

Dans notre article précédent, nous avons couvert la préparation de votre état d'esprit et avons passé en revue certaines façons d'apprendre à développer un meilleur œil pour le design. Dans cet article, nous allons nous concentrer sur quelques principes universels de bonne conception que vous pouvez appliquer immédiatement à vos efforts de conception Web afin de devenir meilleur du côté «conception» de la conception Web.

Allons droit au but !

3 principes de conception Web efficaces pour le « non-concepteur »

Comme mentionné dans la partie 1 de cette série, il n'y a pas de bien ou de mal en matière de design. Ce que nous aborderons dans cet article est largement et universellement accepté comme de bons principes de conception au sein de la communauté de conception Web dans son ensemble. C'est aussi ma ligne directrice personnelle en tant que graphiste/graphiste devenu concepteur de sites Web Divi avec près d'une décennie d'expérience et, plus important encore, des centaines de clients heureux et satisfaits. J'applique ces principes à chaque conception de site Web Divi que je crée et bien qu'il y ait toujours un client qui veut quelque chose d'atroce ou d'extraordinaire, ceux-ci vous serviront bien au moins 9 fois sur 10

1) Règle des tiers

L'une des pratiques les plus courantes dans la conception de sites Web, la conception graphique, la conception d'impression, la photographie et d'autres supports créatifs consiste à suivre une règle simple : la règle des tiers. En bref, la règle des tiers est une question de symétrie et d'équilibre. L'objectif de la règle des tiers est de vous aider à atteindre plus d'équilibre et d'harmonie dans la conception. Et le meilleur, c'est que vous pouvez appliquer la règle des tiers à des graphiques, des images, des mises en page entières de pages Web et plus encore !

Il existe de nombreuses conversations en ligne pour savoir si la règle des tiers est scientifique ou non, mais peu importe, l'opinion populaire montre que si une image ou un design est trop similaire à la fois dans la moitié gauche et la moitié droite ou en haut et en bas, le public pourrait le trouver ennuyeux ou ennuyeux. Si quoi que ce soit, la règle des tiers le rend intéressant et peut conduire à un bon flux que nous aborderons ci-dessous.

Dans notre article précédent sur Conseils de conception pour optimiser votre contenu Web Divi, il est également référencé comme un système de grille, ce qui est un excellent moyen d'y penser visuellement. Imaginez une grille qui ressemble à ceci :

Avec cette grille imaginaire sur votre image, graphique ou mise en page, vous pouvez facilement placer du contenu près d'un ou plusieurs des principaux points d'intersection.

Garder les objets et les points focaux à 1 ou plusieurs des 4 points d'intersection permettra souvent d'obtenir un aspect beaucoup plus équilibré et symétrique par opposition au deuxième exemple où le sujet est en dessous du point d'intersection. Regardez l'image ci-dessous. Le premier exemple ne suit PAS la règle des tiers.

Cet exemple suit la règle des tiers.

Bien que le premier exemple soit toujours une belle image, l'utilisation de la règle des tiers donne une sensation entièrement différente à l'image en coupant le premier plan avec les points d'intersection inférieurs de la règle des tiers. Regardons l'image avec la grille de la règle des tiers.

Regardons maintenant l'image sans aligner les intersections de la règle des tiers.

Vous pouvez voir une grande différence en ce qui concerne la façon dont les conceptions agréables à l'œil s'aligneront souvent avec un ou plusieurs des points d'intersection. Alors que la règle des tiers est le plus souvent évoquée en photographie et en vidéographie, elle est tout aussi importante pour la conception de sites Web. Je vais vous montrer comment j'ai appliqué la règle des tiers à mon site personnel. Voici un aperçu de la conception initiale "au-dessus du pli", qui s'applique à ce que le spectateur voit avant de faire défiler vers le bas.

Maintenant, plaçons la grille de la règle des tiers sur la section principale et voyons à quoi elle ressemble. Dans ce cas, je vais me concentrer sur le contenu sous le menu principal où j'ai implémenté la règle des tiers.

Dans cet exemple, il y a 4 éléments principaux qui sont sur ou à proximité des points d'intersection. Bref, je voulais accentuer ce qui suit :

1. Une brève description de qui je suis et de quoi parle ce site.
2. Une image qui permet aux nouveaux utilisateurs de se sentir plus à l'aise et de faire confiance en voyant de qui ils vont entendre.
3. Un graphique de mon dernier e-book donnant aux gens une raison de s'inscrire.
4. Enfin, un e-mail d'appel à l'action s'inscrit dans les 2 dernières images, là où l'œil de l'utilisateur se terminera.

Avec la règle des tiers, il n'est généralement pas recommandé d'avoir quelque chose à chaque point d'intersection (en particulier en photographie), mais je suis souvent cette disposition dans la création de mon site Web. Et en passant : puisque nous lisons de gauche à droite, j'ai souvent des appels à l'action au milieu ou à droite de l'écran puisque c'est là que notre œil se termine. Nous aborderons l'appel à l'action plus en détail dans le dernier article de cette série, mais c'est un bon exemple de la façon dont j'ai mis en œuvre la règle des tiers dans ma conception.

Donc, si vous ne savez pas comment mettre en page une page Web ou si vous avez du mal à mélanger des images, du texte et peut-être un appel à l'action, essayez de suivre la règle des tiers et laissez-vous guider.

2) Disposition et flux

Lorsqu'il s'agit de mettre en page et de concevoir une page Web, il n'y a pas non plus de bon ou de mauvais style. Cela dépend souvent du projet, des souhaits de votre client, de votre style de conception et souvent du marché que vous ciblez. Le plus souvent, dans le numérique ou les services comme les agences de conception Web, la mode et la photographie, des designs plus modernes et tendance avec un look et une sensation minimalistes. Avec un design moderne, il y a souvent plus d'espace ouvert, moins de contenu textuel, plus d'images et peut-être plus de défilement. (Certains de mes clients à l'ancienne ont juste frissonné !)

Dans les marchés commerciaux plus traditionnels tels que la fabrication, les cabinets d'avocats, les industries des cols bleus, etc., vous trouverez probablement des sites Web avec un contenu plus textuel, moins d'espace ouvert et sans aucun doute avec des images et des éléments de conception moins… attrayants. Et pour une raison quelconque, la majorité de mes clients dans ces industries sont fermement opposés à trop de défilement. Il est donc essentiel de savoir comment concevoir une mise en page avec une bonne fluidité ! J'ai souvent constaté que je dois essayer d'équilibrer MON style de conception créatif avec ce qui fonctionne dans l'industrie de mon client, la démographie cible et les désirs et besoins de mon client. Cela dit, il existe des principes de base de mise en page et de flux qui peuvent être appliqués, peu importe avec qui vous travaillez ou dans quel secteur ils se trouvent.

En repensant au post précédent mentionné ci-dessus, une directive très importante à suivre est un modèle de conception en z. Vous le trouverez fréquemment avec de nombreux nouveaux kits de mise en page Divi professionnels fournis chaque semaine.

Voyons ce que je veux dire.

Dans le premier exemple à gauche, il y a une image à gauche, du texte à droite avec un joli bouton d'appel à l'action puis votre œil lit en bas et à gauche une autre section de texte/CTA puis avec une autre image à droite et répétez. Vis versa, sur l'image de droite, un motif inversé est là. Du texte à l'image à l'image au texte, etc. Suivre ce modèle de style z est un excellent moyen de garder les lecteurs intéressés et constitue un excellent moyen d'équilibrer le texte et les images.

Ce n'est pas la seule option pour la mise en page en flux dans une bonne conception de page, mais c'est une bonne pratique que nous prenions le contenu de gauche à droite puis vers le bas. Puis de gauche à droite puis en bas et ainsi de suite. Donc, en cas de doute, essayez de suivre le modèle de style z pour vous aider à organiser le flux du contenu de votre page. Et une dernière remarque sur le défilement - j'ai tendance à garder mes sites dans les 3 à 5 défilements. Le plus souvent, plus vous devez faire défiler la page, plus la page sera grande et plus elle se chargera lentement. Encore une fois, il n'y a pas de bien ou de mal en ce qui concerne le défilement, mais si vous n'avez pas encore travaillé avec des clients d'un état d'esprit plus ancien, vous êtes assuré de rencontrer une certaine opposition. J'essaie de réaffirmer à ces clients que le défilement n'est pas à craindre. Les médias sociaux nous ont entraînés à faire défiler constamment et à assimiler le contenu rapidement.

3) Hiérarchie visuelle

Le dernier grand principe que je voudrais souligner ici est la hiérarchie visuelle. En bref, la hiérarchie aide l'utilisateur à savoir quelles sont les informations les plus importantes et lui fournit une direction très claire de l'endroit où son regard doit aller dans votre conception. La hiérarchie est souvent référencée avec la typographie (que nous aborderons dans notre troisième article) mais elle peut aussi être très importante dans les éléments graphiques, les images et la conception globale du site.

Je ne vais pas signaler intentionnellement les sites qui me manquent dans le département « bon design », mais je suis sûr que vous avez rencontré de nombreux sites qui contiennent un assortiment de textes et d'images de la même taille sans appel à l'action, non ? C'est ce que nous voulons éviter. L'utilisation d'une bonne hiérarchie est le meilleur moyen de guider l'utilisateur de votre site Web à savoir sur quoi il doit cliquer ou faire ensuite.

Voici un exemple d'un design récent que j'ai créé en gardant à l'esprit la hiérarchie :

Alors que le logo et le numéro de téléphone en haut à droite sont clairement grands et visibles, le contenu le plus grand et la couleur la plus vive au-dessus du pli est l'appel à l'action pour cliquer sur le bouton.

Mon client voulait spécifiquement que les gens demandent facilement une inspection dès leur arrivée sur le site. J'ai donc utilisé cette idée de hiérarchie visuelle pour, espérons-le, y parvenir ! Un autre exemple de la façon dont j'ai utilisé la hiérarchie récemment est le design au-dessus du pli de ce site :

Dans ce cas, le principal appel à l'action du client consiste soit à faire des achats en ligne, soit à les contacter directement. Le logo, une brève description et même le numéro de téléphone sont répandus, mais le Divi Double Button est l'élément le plus important que vous voyez initialement dans l'espoir d'amener les utilisateurs à cliquer sur ce qu'ils recherchent s'ils ne font pas défiler plus loin.

Encore une fois, bien que ce ne soient que quelques exemples de hiérarchie visuelle, cela peut être une méthode très puissante pour inciter les utilisateurs de votre site Web à faire ce que vous voulez qu'ils fassent ou à aller où vous voulez qu'ils aillent ! En passant, je vous recommande vivement de consulter notre article précédent sur les erreurs courantes de conception de sites Web à éviter.

En clôture

J'espère que ces principes de conception efficaces vous ont aidé dans vos efforts de conception, que vous soyez nouveau dans la conception de sites Web ou que vous cherchiez à vous améliorer en conception ! Encore une fois, il existe de nombreux principes que nous pourrions revoir, mais ce sont les 3 premiers que j'essaie de mettre en œuvre dans toutes mes conceptions de sites Web.

Si vous souhaitez partager d'autres principes de conception, faites-le nous savoir dans les commentaires ci-dessous !

Demain : 3 domaines de conception importants sur lesquels se concentrer pour chaque création de site Web

Maintenant que nous avons couvert la préparation de notre état d'esprit, comment apprendre à avoir un meilleur œil pour la conception et avoir passé en revue certains principes de conception de base, notre dernier article va explorer quelques-uns des aspects les plus importants de la conception Web sur lesquels se concentrer pour chaque création de site Web. Jusque là!

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !