Il y a toujours ce moment au début d'un projet de conception de site Web où vous pensez "par où commencer". Vous allez combattre le désir de créer quelque chose de totalement différent et nouveau par rapport à quelque chose de testé et de fiable.
De manière réaliste, il y a quelques mises en page qui ne vieillissent jamais. Ces modèles sont généralement acceptés par les utilisateurs, faciles à comprendre et constituent un cadre solide pour pratiquement tous les types de conception et de contenu. Ici, nous allons regarder ces cinq? Intemporel? les mises en page de sites Web et comment en tirer le meilleur parti pour votre prochain projet.
1. Image de héros empilée sur une grille simple
Quelle que soit la taille de l'écran, ce format offre à l'utilisateur quelque chose à regarder, à parcourir et à digérer. Bien que les spécifications de cette forme puissent varier en fonction du type de périphérique ou du choix d'une image large ou peu profonde, l'esquisse est à peu près la même.
- La navigation
- Image de héros avec superposition de texte
- 2 à 4 colonnes avec de petits éléments d'information avec ou sans icônes
- Zone du corps principal
- Bas de page
La conception est propre, offre une forte présence visuelle et a tendance à bien fonctionner avec des cadres réactifs, quel que soit le point de rupture. Certaines applications alternatives de ce format consistent à basculer un en-tête de héros statique en un en-tête de curseur ou vidéo.
Pourquoi ça marche: Chaque élément a une place et il y a un flux logique pour suivre le contenu. L'image principale est la première impression qui devrait attirer les utilisateurs dans la conception et les éléments secondaires devraient inciter les utilisateurs à vouloir cliquer.
Incorporer une tendance: Ajoutez des icônes ou des zones de couleur vive aux éléments d'information basés sur des colonnes ou utilisez un style plat pour les éléments de l'interface utilisateur tout au long de la conception.
2. Une page, une colonne
La mise en page unique est l’une des meilleures solutions pour les sites Web avec un contenu minimal et un seul objectif ou message. Lorsque le message est simple, il n'est pas nécessaire de devenir fou avec la forme de la mise en page. Une mise en page sur une colonne peut être la solution parfaite.
- La navigation
- Zone du corps principal avec images et texte
- Bas de page
Lorsque vous utilisez ce modèle, l’espace est un élément essentiel de la conception. Assurez-vous que les éléments ont suffisamment d'espace entre eux et envisagez d'utiliser un espacement exagéré sur les bords extérieurs de la conception. Le risque avec un site Web d'une page est qu'il peut se sentir à l'étroit ou désorganisé si l'espacement est mal ajusté.
Pourquoi ça marche: La formule d'une page est la mieux adaptée aux petits sites Web. Le manque de contenu sur une page d'introduction ou un simple portefeuille peut sembler plus lourd qu'il ne l'est réellement. Le format fonctionne également bien pour les blogs simples ou les plans de contenu qui s'en tiennent à un seul format.
Incorporer une tendance: Ajoutez le défilement parallaxe pour rendre la page plus attrayante lorsque les utilisateurs font défiler. Ces effets simples peuvent donner à une conception simple une page une apparence plus profonde et plus robuste (et comme si elle avait en réalité plusieurs pages à chaque coup de souris).
3. Grille définie
Des rangées et des colonnes de contenu soigneusement empilées ne se démodent jamais. Que la grille soit construite avec beaucoup de petites pièces ou juste un arrangement quatre par quatre, une grille propre dit à votre utilisateur quelque chose sur vous dès le début. Ce contenu est organisé, bien géré et commandé pour vous.
Les grilles sont incroyablement populaires parmi les concepteurs pour leurs propres sites Web. Ce qui est bien avec une grille d’images, c’est que vous pouvez présenter beaucoup de contenu visuel sans avoir à vous moquer de rien. Cet effet de galerie peut avoir beaucoup d'impact.
Les grilles peuvent également se présenter sous la forme de cases colorées ou de conteneurs pour organiser le texte. Les lignes de la grille peuvent être visibles ou invisibles. Il y a tellement d'options à choisir. N'oubliez pas de faire particulièrement attention à la largeur et à la profondeur des colonnes et des rangées, ainsi qu'à leur espacement. Ces petits détails peuvent faire ou défaire toute la conception.
Pourquoi ça marche: L'organisation créée par la grille est difficile à battre. Une belle grille permet aux utilisateurs de trouver et d'interagir facilement avec le contenu tout en créant une harmonie visuelle.
Incorporer une tendance: Utilisez de simples éléments d’animation pour une grille en mosaïque de manière à faire passer le curseur de la souris sur les clics? un bloc de grille pour afficher des informations supplémentaires. Vous voulez une autre option? Envisagez de transformer la grille en un jeu de cartes présentant un style Material Design.
4. Le modèle F classique
Des recherches sur la façon dont les gens regardent les sites Web ont mis au jour un flux particulier appelé modèle F. Le modèle de lecture a montré que les utilisateurs commencent en haut d’un site Web et lisent de gauche à droite sur l’écran. Puis ils descendent et lisent à nouveau. Enfin, ils parcourent le bas de la page en ligne droite.
La conception de contenu dans ce motif F est un moyen d'aider à placer le contenu qui importe le plus là où les utilisateurs se tournent. Ce concept se traduit par un schéma de conception commun.
- En-tête et navigation
- Large colonne de gauche en tant que zone de contenu principale
- Mince colonne de droite (barre latérale) pour les liens et les informations connexes qui ne vont pas au bas de la page
- Bas de page
Pourquoi ça marche: Les gens sont des créatures d'habitude et c'est un modèle testé qui montre la façon dont les gens pensent, regardent et lisent les sites Web. Il est confortable et commun, ce qui facilite la compréhension et l’interaction entre les utilisateurs.
Incorporer une tendance: Retournez l'emplacement de la barre latérale ou tournez-la dans la zone de navigation, ou utilisez une image de héros au-dessus du motif en forme de F.
5. Superposition minimale
Il y a juste quelque chose à propos d'un grand design minimal. L'espace ouvert permet à l'utilisateur de se sentir à l'aise avec un focus dirigé. Ensuite, il y a la juxtaposition de couches dans cet espace, qui sont plus complexes et détaillées.
C’est cette combinaison de simplicité et d’intérêt qui rend ce style de conception réalisable et modifiable pour un certain nombre de types de projets. C'est également quelque chose auquel les utilisateurs sont habitués grâce à l'utilisation courante par Apple sur leur site Web.
Pourquoi ça marche: La superposition peut attirer l’œil exactement à l’endroit où il importe le plus dans la conception. Particulièrement de concert avec une conception globale simple, c’est l’élément qui interpelle les utilisateurs. Superposer un contour minimal est un excellent moyen de présenter ou de mettre en valeur un contenu particulier ou un appel à l'action.
Incorporer une tendance: Utilisez des dégradés ou des ombres subtils pour définir des éléments dans différentes couches. Bien que ces techniques de conception aient disparu de la mode pendant un certain temps, la différenciation à peine lointaine fait un retour important, grâce à Material Design et à un recentrage sur la création de quelque chose de tactile dans l'espace bidimensionnel.
Conclusion
En cas de doute sur un type de design, la meilleure chose à faire est de revenir aux sources de la théorie du design. Utilisez des idées et des principes classiques pour guider votre prise de décision.
Dans la plupart des cas, cela donnera un résultat net, facile à lire et conforme au style conventionnel. Une fois que vous avez terminé ce cadre de base, vous pouvez ajouter un élément à la mode pour garder la mise en page fraîche. L'utilisation de cette philosophie de mise en page vous aidera à créer un site Web qui résistera mieux à l'épreuve du temps sans paraître démodé. (Maintenant que vous y réfléchissez, vous remarquerez probablement combien de sites Web utilisent réellement l'un de ces concepts.)