Êtes-vous fatigué de créer des sites Web de construction utilisant les mêmes anciennes dispositions basées sur une grille pour chaque projet? Avez-vous eu envie de rompre avec la norme et d'essayer quelque chose d'un peu plus organique?
Aujourd'hui, nous allons jeter un coup d'œil sur quelques sites qui l'ont fait pour savoir ce que nous pouvons apprendre sur les méthodes de présentation alternatives et sur la manière de les implémenter avec succès.
Dispositions de grille
La mise en page basée sur la grille est la pierre angulaire de la conception Web moderne. À une époque où les designs épurés et minimalistes sont considérés comme l’idéal ultime (une réponse directe aux styles de design désordonnés des années 80 et 90), la définition même du «bon design»? mentionnera sans aucun doute des alignements simples et solides.
En fin de compte c'est une bonne chose. Les mises en page basées sur une grille offrent une structure, un équilibre et une organisation inégalés. Ils apportent un rythme prévisible et un sens de familiarité à la conception et laissent le contenu ressortir de son propre chef.
La disposition des grilles est incroyablement conviviale. Nous lisons instinctivement une page de gauche à droite et de haut en bas et les grilles ont tendance à renforcer plutôt qu'à défier cette tendance. Avec un design basé sur une grille, le contenu correspond exactement à l'attente du spectateur, aucun effort extraordinaire n'est requis.
Nous avons des galeries de conception entières, comme celle présentée ci-dessus, dédiées aux conceptions basées sur une grille. Il existe d'innombrables frameworks CSS et modèles Photoshop dédiés à nous aider à obtenir des dispositions de grille rapides avec un minimum d'effort. Si le design est une religion, les grilles sont les saintes écritures auxquelles nous attribuons la vérité.
Si nous allons encore plus loin avec cette métaphore débordante, le sujet d'aujourd'hui n'est rien de moins qu'un "blasphème". Explorons comment nous pouvons introduire un peu plus de variété dans nos mises en page en abandonnant la grille, au moins partiellement, au profit de mises en page et de graphiques plus organiques. En fait, il existe de nombreuses façons de structurer l’information, mais ne le dites pas aux dieux du design.
Trouver d'autres moyens d'attirer l'attention
Notre premier exemple de mise en page alternative provient de We Are Empire, une agence de design numérique. Voici une capture d'écran de la page d'accueil de leur site web.
Comme vous pouvez le constater, cela ne représente certainement pas votre présentation de page Web typique. Il y a plusieurs choses à noter ici. Premièrement, les objets principaux sur la page sont des cercles. Tout site Web normal basé sur une grille est d'habitude composé principalement d'objets rectangulaires. Les grilles sont constituées de rectangles pour que les objets à quatre arêtes et au moins les coins les moins difficiles fonctionnent assez bien.
En revanche, presque toutes les mises en page organiques que vous rencontrerez utilisent fortement les cercles. Les cercles se sentent plus organiques et semblent mieux correspondre à ce style de mise en page. En outre, ils offrent aux concepteurs rebelles un autre moyen de s’écarter de la norme.
La manière dont ils sont connectés est encore plus importante que les formes des objets. Une fois encore, les schémas de grille peuvent être lus très naturellement, mais les schémas organiques laissent l'œil vagabonder dans la confusion à la recherche de ce qu'il faut regarder ensuite.
En créant un chemin rudimentaire, le concepteur a créé un flux d’informations clair à suivre. En regardant cette page, vous ne pouvez presque pas vous empêcher de suivre le chemin avec vos yeux; une astuce simple et extrêmement efficace pour contrôler l'expérience utilisateur.
Moins d'objets
Le chemin aide, mais n'est pas une nécessité absolue. Cela est particulièrement vrai lorsqu'il y a vraiment quelques objets dans la mise en page. Par exemple, consultez la page de Michael Wong ci-dessous, qui utilise une présentation similaire.
Le site de Wong utilise une autre technique populaire pour ces types de mises en page: l'animation contrôlée par la souris. Lorsque vous déplacez votre souris sur l'écran, les objets de la disposition se déplacent dans un effet de parallaxe simulant une interface 3D.
La structure est toujours présente
Une chose très importante à garder à l'esprit lorsque vous vous écartez des dispositions basées sur une grille est qu'il n'est pas nécessaire d'abandonner complètement la structure. Comme l'illustre la disposition Melonfree ci-dessous, votre conception peut toujours être très logique.
Ici, en faveur d'une grille simple, nous trouvons une utilisation importante de la symétrie arrondie. Le design est assez attrayant et bien équilibré. Lire dans un cercle n’est certes pas la chose la plus facile au monde, mais le résultat final est rafraîchissant.
Points focaux
Lorsque vous travaillez avec une mise en page alternative, essayez toujours de rester parfaitement conscient de l'endroit où vous créez des points focaux. La mise en page ci-dessus a intentionnellement un tirage important vers le centre où vous trouverez un grand graphique d'un melon, qui représente le nom de la société.
Dans vos mises en page, utilisez la taille, la couleur et le placement des objets pour créer des points focaux spécifiques et analysez leur efficacité par rapport au chemin visuel que vous essayez de créer (à partir du dessus).
Construire une scène
Une méthode de présentation alternative très différente mais toujours très populaire consiste à créer une scène qui sert d’interface pour votre site. Je mets généralement en garde contre cela, car il finit généralement par aller vers un site de type fast-food basé sur Flash, dans lequel vous ne trouvez rien.
Cependant, cette méthode peut conduire à des sites attrayants et bien conçus. Considérez le site iCodeLabs ci-dessous, qui utilise une très belle scène illustrée sur laquelle vous pouvez naviguer, vous l’avez deviné, en déplaçant la souris.
Une caractéristique clé ici est que le site iCode réserve la scène exploratoire en tant qu’élément amusant optionnel du site. La navigation principale est une interface de barre plus familière au bas de la page. Pas de chasse aux liens ici!
Les grilles: cachées mais rarement disparues
Le grand secret de toute cette discussion sur l'abandon des mises en page basées sur une grille est qu'elles sont rarement totalement absentes d'une conception Web donnée. En fait, si vous visitez les sites indiqués ci-dessus, vous constaterez qu'il existe toujours une structure de grille globale pour de nombreuses pages.Les méthodes de disposition alternatives existent dans les zones dans la plus grande structure.
La leçon à tirer est qu’il n’est pas nécessaire, et souvent ne veut pas, d’abandonner complètement la sécurité grâce à des dispositions claires, simples et logiques pour obtenir un résultat unique.
Grilles inclinées
Un moyen astucieux de masquer votre disposition basée sur une grille consiste à utiliser fortement les lignes diagonales au lieu des lignes verticales et / ou horizontales. Les mêmes conventions exactes que celles utilisées dans les grilles normales peuvent être appliquées, le résultat semble simplement plus incisif.
Comme vous pouvez le constater, Estilo DLT a l'apparence d'une mise en page organique, mais en réalité, il est conforme à des principes de mise en page très stricts.
Conclusion
Rompre avec la norme peut être une expérience remarquablement rafraîchissante. Cela vous aide à penser différemment et à voir le design comme jamais auparavant. L'exploration d'autres idées de mise en page est un excellent moyen de vous familiariser avec cette arène. Utilisez les exemples et les informations ci-dessus pour vous mettre dans la bonne direction.
N'oubliez pas que les schémas de grille sont souvent brisés, mais rarement abandonnés complètement et que même lorsque vous n'utilisez pas de grille, votre structure peut toujours présenter une structure très logique. Laissez un commentaire ci-dessous avec un lien vers les mises en page non traditionnelles que vous avez rencontrées. Indiquez-nous également si vous êtes un grand amateur de grilles ou si vous êtes enclin à sortir des sentiers battus avec vos présentations.