Direction du contenu visuel Ce que vous devez savoir
le direction visuelle du contenu est un aspect moins largement discuté, mais crucial de la conception de sites Web à haute conversion. Chaque visiteur "absorbe" un nouveau site lors du chargement de la première page - qu'il le fasse consciemment ou non.
L’esthétique joue un rôle, mais c’est plus la sensation générale du design. Ce sentiment peut être affecté par les espaces, la typographie, la symétrie, mais surtout des relations entre les éléments de la page.
Les designers veulent que les visiteurs rester sur la page et poursuivre le défilement en capturant leur attention et en les gardant intéressés par le site. Les principes de conception doivent toujours se concentrer en fonction avant la forme. Cela signifie que le design devrait compléter le contenu, pas enfoncer après coup.
Dans cet article, je voudrais vous montrer quelques conseils pour vous aider. améliorez vos mises en page et vos flux de contenu visuel sur votre site.
Focus sur la composition
Chaque pièce d'un site Web construit sur la disposition générale. Cette disposition générale crée une composition qui suit les règles de la théorie Gestalt qui stipule que le tout est toujours plus grand que la somme des parties.
Les zones individuelles d’une page se rejoignent pour former un tout. Les éléments de conception doivent construire un attraction gravitationnelle sur le contenu; tout sur la page devrait guidez naturellement les visiteurs vers le bas jusqu'à ce qu'ils atteignent le bas de la page.
C’est pourquoi la conception des relations entre différentes parties du contenu (éléments visuels, texte, boutons, etc.) est si importante..
Votre objectif devrait être encourager les gens pour parcourir le site de leur propre inclination. C'est plus facile à dire qu'à faire, mais vous pouvez apprendre beaucoup en étudier des exemples réels.
La page d’accueil de Monkop est un excellent exemple de hiérarchie visuelle avec le texte et les visuels. De nombreux espaces sont utilisés entre les éléments et la typographie complète les illustrations vectorielles de la marque..
Comme vous faites défiler, vous remarquerez blocs de page horizontaux droits divisé par couleurs, bordures et graphiques. Ceux-ci sont construits avec modèles de conception dans l'esprit de cohérence de l'offre tout au long de la page.
Vers le bas, vous trouverez un division en deux colonnes avec des images d'un côté, du texte de l'autre. Les images aussi échanger des côtés dans un schéma de droite-gauche-droite-gauche. Cela attire l'attention, et brise la monotonie de la page typique tout en restant garder un flux naturel dans le contenu.
UNE esthétique similaire peut être trouvé sur le site Web de Picjumbo, une page de renvoi pour un addon photo pour les utilisateurs de Photoshop et Sketch.
Les emplacements de la page d'accueil se concentrent sur le logo et la vidéo d'aperçu. Lorsque vous faites défiler, vous remarquerez des animations personnalisées qui se déplacent sur la page. Cette animation vraiment capte l'attention, et obtient le spectateur intéressé à continuer à faire défiler.
Dans l'ensemble, la page se sent ouvrir et facile à parcourir. Le contenu est divisé en blocs horizontaux avec une typographie nette et des icônes propres.
Considérez la façon dont différents éléments de page équilibre ensemble, l'espace entre les éléments, le contraste entre les couleurs et les formes différentes. Toutes ces choses jouent un rôle dans la composition globale. Chaque site tire naturellement un certain poids sur le contenu.
Il n'y a pas de réponse absolue parce que c'est différent pour chaque site. Par exemple, certains liens de navigation ont meilleure apparence quand ils sont gros et surdimensionnés. D'autres vont mieux quand ils sont petit avec des lettres majuscules.
Je vous suggère d'étudier d'autres sites Web dans votre créneau. Vraiment analyser comment ils sont mis ensemble. Essayez même de reconstruire les mises en page pour voir quels éléments font finalement la conception "se réunir".
Type Design Matters
La façon dont vous concevez votre typographie affecter la direction du contenu sur votre site. Cela a à voir avec la hiérarchie des types et la styles de conception de différents éléments de page comme des paragraphes, des en-têtes, des listes à puces, des citations et des éléments de mise en page spéciaux tels que des colonnes ou des tableaux.
Visuels peut affecter la mise en page aussi, c'est donc une bonne idée de concevoir du contenu avec une progression naturelle. Ecrire le contenu de manière à coule en bas de la page, et continue à lire à travers chaque paragraphe.
Le meilleur outil à votre disposition est votre oeil pour le design. Apprenez à reconnaître les différences entre les éléments typographiques et leur lien avec les autres éléments de la page. Créez des relations entre les sections de page pour distinguer les zones de contenu.
Certaines choses que vous pourriez envisager:
- Taille du texte
- Famille de polices
- Contraste de couleur
- Relations de section de page
- Hauteur de ligne et marges de paragraphe
- Espacement des lettres et majuscules / minuscules
Par exemple, consultez la page d'accueil de Campaign Monitor. Les liens de navigation supérieurs utilisent des majuscules avec une petite lettre. Autres en-têtes sur la page suivez cette même conception tout en majuscules lequel crée un sentiment d'uniformité.
Les autres en-têtes plus importants sur le site sont beaucoup plus important, et ils sautent vraiment de la page. En regardant simplement une conception d’en-tête, il devrait être facile de faire la différence entre un en-tête et sa copie de corps appariée.
Les styles de conception typographique sur Campaign Monitor sont exquis, et ils se fondre naturellement dans la mise en page. Il faut de la pratique pour obtenir un résultat comme celui-ci, mais plus vous essayez, plus cela vous sera facile..
Pour en savoir un peu plus, je vous recommande vivement les liens suivants:
- Principes de conception: poids visuel et direction
- Travailler avec le poids visuel dans vos conceptions
- 19 facteurs qui influent sur l'équilibre de la composition
Contenu de guidage
Comprendre que différents types de sites Web avoir différentes méthodes pour guider les visiteurs à travers le site. Par exemple, les pages de destination veulent guider les visiteurs avec brèves informations, petites icônes, captures d'écran, et témoignages.
D’autres sites, tels que les blogs, ne font généralement pas apparaître les personnes sur la page d’accueil en une fois. La plupart des gens atterrir sur une page d'article, donc mises en page de blogs sont destinés à mettre en évidence le titre, et attirer les gens plus loin dans le contenu. C’est là que les rédactions de qualité entrent en jeu parce que vous voulez que les lecteurs soient suspendus à chaque mot.
Les réseaux sociaux et les applications Web ont besoin expérience utilisateur de qualité, de sorte que c'est un sujet légèrement différent, mais considérons comment le flux de Facebook est conçu pour encourager le défilement et l'interaction de l'utilisateur.
Les méthodes de conception que vous employez pour que les gens continuent de naviguer sur le site change avec le temps. Mais généralement, votre objectif est de guider les visiteurs avec une direction de contenu visuel.
Regardons un page de destination et un conception de blog repérer les différences.
Cactus est un générateur de site statique pour OS X. Leur page d'accueil suit de près le style de design d'Apple - beaucoup d'espaces et de minces polices sans empattement.
Le contenu est organisé en colonnes, blocs et morceaux de texte avec des graphiques simples. Ces mêmes esthétiques sont commun avec les produits Apple, afin que les utilisateurs de Mac apprécieront ce style de design.
Les informations sur le produit - y compris les fonctionnalités et la configuration - sont répertoriées directement sur la page d'accueil. La page elle-même encourage le défilement par un contenu unique, des icônes de base et un motif de colonnes alternant des blocs de contenu gauche / droit.
Le but ici est de fournir des informations aux utilisateurs existants, et vendre nouveaux utilisateurs l'idée de cactus.
Maintenant, comparez ce design à la page d'accueil de The Next Web. Le contenu est beaucoup plus sporadique sur une page d'accueil du blog, car il y a beaucoup de sujets différents post.
Les rectangles créent un système de grille qui encapsule plusieurs publications dans une seule mise en page. Le but ici est de amener les utilisateurs à lire le contenu sur le site. Peu importe que les visiteurs téléchargent quoi que ce soit, mais peu importe s'ils rester pour lire quelque chose.
Le moyen de faire lire les gens est avec bonnes photos et titres accrocheurs. TNW fait un excellent travail dans ce domaine, et leur présentation est construit pour garder les gens parcourant avec des miniatures de publication associées dans la barre latérale et dans la zone de post-contenu.
Guider les visiteurs vers une action particulière est différent sur chaque site. Mais vous pouvez en apprendre beaucoup en étudiant ce que font d’autres sites performants et en apprenant à copier..
Faites confiance à vos yeux
Les propriétés de conception individuelles peuvent être expliquées de manière analytique, mais l'implémentation change pour chaque site. Une image de héros avec un lien "Faire défiler plus loin" n'effectue pas la même chose sur tous les sites.
Apprendre à concevoir est vraiment un processus visuel. Votre oeil pour le design est l'aspect le plus important. Tu dois voir les choses correctement pour identifier ceci hiérarchie visuelle. Si vous pouvez le voir sur d'autres sites Web, vous pourrez le répliquer sur vos propres sites..
Le meilleur conseil que j'ai est de fais juste confiance à tes yeux. Créez une liste de vos sites Web préférés et passez 5 minutes à les parcourir. Notez vos éléments préférés sur la page et leur incidence sur la conception. Cela vous aidera internaliser ces concepts dans une perspective UI / UX, plutôt que la perspective d'un utilisateur.
Aussi, n'ayez pas peur d'essayer des trucs! Personne n'est bon en design juste en lisant des articles sur le design. Oui, ils aident - ils peuvent réellement aider beaucoup. Mais toi avoir besoin à créer des choses à partir de zéro pour savoir quoi travaux et quoi ne pas.
Entraînez votre œil en étudiant les présentations de sites Web que vous aimez et en les recréant. Au fil du temps, vous construirez dans votre esprit une bibliothèque de modèles qui facilitera grandement la conception de nouveaux sites..
Emballer
J'espère que ces conseils vous aideront à démarrer et vous donneront une feuille de route de base à suivre. Il n’est pas facile de devenir concepteur de sites Web, mais le monde a besoin de talent et il n’a jamais été aussi simple de vous enseigner ces concepts fondamentaux..
Étude les meilleurs exemples de sites Web avec des éléments de page que vous aimez. Train votre œil pour reconnaître les relations, et vous allez rapidement développer les compétences nécessaires pour reproduire ces relations dans votre propre travail.
