4 tendances de mise en page essentielles pour 2015
Le Web a beaucoup changé au cours de la dernière décennie et, en même temps, il n'a pas du tout changé. Si l’on se penche sur 10 ans, on s’aperçoit que le modèle de mise en page est très répandu dans l’ensemble des sites. Ce modèle était composé d'un en-tête, d'un pied de page, d'une barre latérale et d'une zone de contenu. C'était la mise en page attendue pour le web. Dans le même temps, nous avons eu la montée en puissance de Macromedia Flash, qui a cédé la place à une ère de mises en page alternatives. Des mises en page qui ne respectent pas cette formule stricte. Et bien sûr, avec l’implosion de Flash, cette approche s’est estompée un peu… Je dis un peu, car elle est de retour avec une vengeance.
Si vous examinez l'une des nombreuses galeries populaires présentant la conception Web actuelle, vous remarquerez sans doute que la structure fondamentale des pages Web est tout sauf figée. Il peut être flexible et évoluer vers presque tout ce dont il a besoin. Ceci à mon avis est l'un des meilleurs effets secondaires que le web design a produit. La nouvelle norme, pour ainsi dire, est qu’il ne semble pas y avoir de formule fixe du tout.
Cela dit, nous pouvons observer plusieurs tendances de haut niveau dans la conception de la mise en page, qui représentent ce que je considère comme des configurations inhabituelles. Inhabituel car ils ne suivent pas une formule stricte ou un système prédéfini. Mais ce sont des tendances dans la mesure où je peux fournir des dizaines, voire des centaines d’exemples remplissant chacune de ces catégories.
Ce que vous trouvez ici est un mélange intéressant de tendances et de mises en page inhabituelles qui, nous l’espérons, vous inciteront à évaluer les structures fondamentales que vous appliquez à la conception de sites Web. Laissez-vous plonger et jetez un coup d'oeil ...
Écrans divisés
Dans cette catégorie, nous trouvons une sélection de sites qui divisent tous l'écran en utilisant une division verticale. Il y a peut-être plusieurs raisons à cela, et en examinant de nombreux échantillons de ce type, j'ai trouvé deux raisons principales.
Le premier est que parfois, un design peut vraiment avoir deux éléments d’importance égale. Une approche commune à la conception de sites Web consiste à classer les choses par ordre d’importance. Cette importance se reflète ensuite dans la hiérarchie et la structure de la conception. Mais que faire si vous avez deux choses à promouvoir? Cette approche vous permet de les mettre en évidence tous les deux et permet à l'utilisateur de choisir rapidement entre eux.
La deuxième raison que j'ai trouvée pour cette approche est que, parfois, vous devez transmettre une dualité importante. Considérons par exemple le site Web Huit et Quatre. Ici, ils veulent transmettre le fait que leurs forces principales sont leurs racines numériques et leur personnel talentueux. Ce jumelage est ce qui les définit. L'écran partagé est une belle façon de présenter ceci. Et j'aime particulièrement comment l'esperluette unifie les deux côtés.
Pas de chrome!
L'un des principaux éléments utilisés dans la conception de sites Web contient des éléments: des boîtes, des bordures, des formes et des conteneurs de tous types utilisés pour séparer le contenu d'une page. Considérons un en-tête stéréotypé où les éléments sont soigneusement contenus et séparés du contenu. Une tendance commune est maintenant de supprimer tout ce chrome supplémentaire.
Il s’agit d’une approche minimaliste, mais elle va encore plus loin et comporte des rebondissements intéressants.
Dans cet exemple, ils ont éliminé la notion d'en-tête et de pied de page tous ensemble. Cela ressemble plus à un kiosque interactif qu'à la place. La hiérarchie du contenu se fait principalement par une organisation de gauche à droite, ce qui rend la présentation très intuitive. Et le chrome pour séparer la navigation du contenu n'est tout simplement pas nécessaire. Au lieu de cela, les beaux produits brillent.
Ici, nous trouvons que le contenu est fortement souligné en supprimant tout sens d'un en-tête ou d'un pied de page. Au lieu de lire d'abord un en-tête, vous lisez le nom de l'entreprise et une déclaration claire sur ce qu'ils font (et où ils le font). Suivi de la navigation principale. Quelle excellente façon de mettre l'accent sur la marque avant de faire naviguer les gens. Cela donne un flux élégant. Fait intéressant, lorsque vous faites défiler la page, vous obtenez un en-tête et une touche de chrome. Une mise en page belle et efficace qui utilise le motif d'une manière inspirante.
Modulaire ou basé sur la grille
Ensuite, nous avons des dispositions construites sur des structures modulaires ou en forme de grille. Dans ces conceptions, chaque module est conçu pour s'adapter à la taille de l'écran. Ce n'est pas exactement une nouvelle approche, mais l'introduction de la conception Web réactive l'a rendu encore plus utile. Cela fait allusion au type de disposition adaptable que l'on peut créer avec des plug-ins comme Masonry.
Cet exemple illustre parfaitement l'idée. Le design est complètement réactif. À mesure que la taille de l’écran change, chaque module s’adapte et s’adapte à l’espace. En divisant l'espace également, il est plus facile d'adapter le design. Et ils obtiennent des points bonus pour l'introduction d'un élément (à des tailles d'écran plus grandes) qui brise les barrières rigides entre les modules.
Cet exemple est une version plutôt intense du motif. Bien entendu, elle adopte l’approche modulaire, qui leur permet de transférer facilement des contenus au besoin. Mais il y a un élément de conception important à l'œuvre ici, dont l'exemple précédent manquait. La taille des modules varie pour refléter l'ordre d'importance et sa place dans la hiérarchie. Un risque de cette approche modulaire est de faire en sorte que tout soit de la même taille, ce qui signifie que vous n’insistez pas vraiment sur quelque chose. En revanche, cet exemple donne clairement de l’importance à l’élément primaire.
Remplir un seul écran
Enfin, nous avons des sites utilisant une approche où la conception s'adapte pour remplir complètement l'écran. Ceci est un sous-ensemble du design réactif en ce qu’il s’adapte à la taille de l’écran. Mais dans ce créneau, les conceptions s’adaptent de telle manière qu’elles remplissent complètement l’écran et ne produisent pas de barres de défilement. Ce manque de défilement signifie que le contenu doit être extrêmement ciblé et que la hiérarchie du contenu est clairement établie. Je trouve que le focus et la clarté de ces sites sont rafraîchissants.
Conclusion
Bien que j'aie disséqué chacune de ces tendances isolément, la réalité est qu'elles représentent des blocs de construction. Et ces blocs de construction peuvent être assemblés de différentes manières. En fait, bon nombre des échantillons présentés ici pourraient être déplacés dans de nombreuses catégories dont nous avons discuté. La diversité des mises en page sur le Web moderne et le fait qu’elles soient utilisables font du Web un support passionnant avec lequel travailler.