Conception Web à écran partagé: la tendance qui ne cesse de croître


La conception de sites Web avec une esthétique d’écran partagé est une tendance qui ne cesse d’évoluer et de croître. Une conception à écran partagé peut être bonne pour plusieurs raisons, notamment la compatibilité mobile et la convivialité. De plus, bon nombre de ces modèles ont fière allure!

Les changements de tendance montrent qu’il existe tellement de façons différentes de créer un design d’écran partagé efficace que les utilisateurs vont adorer. Considérez ceci comme votre introduction à la conception d’écran partagé à l’ère nouvelle et améliorée!

Avantages de la conception d’écran divisé

conception web écran partagé
conception web écran partagé

Ils fonctionnent bien lorsqu’il y a deux bits de contenu que l’utilisateur doit voir immédiatement.

Les conceptions d’écran partagé continuent de gagner en popularité car elles peuvent être très efficaces. Ils fonctionnent bien lorsqu’il y a deux bits de contenu que l’utilisateur doit voir immédiatement. Cette même idée s’applique au contenu qui nécessite que l’utilisateur fasse un choix pour continuer, comme choisir un chemin de contenu.

Les concepteurs utilisent la conception à écran partagé car ils sont efficaces. Les principales raisons d’utiliser une conception d’écran divisé sont les suivantes:

  • Encouragez l’utilisateur à faire un choix – choisissez ceci ou cela
  • Mettez une image verticale en surbrillance
  • Créez une expérience commune sur les ordinateurs de bureau et les appareils mobiles
  • Établir un flux visuel distinct (vers un appel à l’action)
  • Établir un modèle de conception qui fonctionne avec d’autres techniques et tendances de conception
  • Créez un visuel qui se démarque de tant de pages d’accueil de héros plein écran ou différenciez les types de contenu d’un site Web

La grande chose au sujet des conceptions à écran partagé est qu’elles fonctionnent parfaitement avec le format réactif. Vous obtenez un double contenu sur le bureau et un contenu empilé sur les écrans mobiles. Quel que soit l’appareil, l’utilisateur n’a pas l’impression d’avoir raté quoi que ce soit en modifiant le type d’appareil.

Conception d’écran partagé «classique»

conception web écran partagé

Il est peut-être un peu tôt pour appeler l’esthétique du design à écran partagé «classique», mais compte tenu de la vitesse à laquelle les tendances de la conception Web évoluent, ce n’est pas pour rien.

Nous écrivons ici sur le design d’écran partagé depuis 2015. Il a été présenté comme une tendance de design haut de 2017 et une tendance que vous devez essayer en 2018. Alors qu’attendez-vous?

Voici pourquoi nous l’avons aimé à l’époque (et maintenant):

  • La conception à écran partagé peut être un bon choix pour les cadres réactifs. Sur les écrans plus grands, le design est divisé, mais lorsqu’il s’agit d’écrans plus petits, les panneaux peuvent être empilés.
  • Il est facile de travailler dans l’animation et les effets qui encouragent les clics en fonction du contenu fourni.
  • Deux panneaux symétriques facilitent la création d’un contour modulaire pour la conception complète du site et l’organisation du contenu dans les blocs.

Divisions de l’écran large inégales

conception web écran partagé
conception web écran partagé

Une conception à écran partagé ne se contente pas de prendre un format d’écran large et de le couper en deux; de nombreux concepteurs expérimentent des fentes asymétriques qui ajoutent un peu de poids supplémentaire d’un côté ou de l’autre.

Cela peut être assez évident, comme les exemples ci-dessus de DSX Global, ou présenter une division plus subtile, mais toujours asymétrique, comme Project Shift. Les deux sont tout aussi puissants.

Pourquoi le passage à des divisions inégales? Un équilibre asymétrique peut aider à attirer l’attention sur le contenu de manière distincte. Cela peut aider à fournir une concentration visuelle et à attirer les utilisateurs vers le contenu clé en premier.

Une autre chose à noter avec ces deux exemples est que le petit côté de l’écran partagé utilise une photo qui implique un mouvement vers le côté le plus lourd du design. Combinez cela avec le poids des côtés divisés et vous obtenez un mouvement pas si subtil qui vous dirige vers un contenu spécifique à l’écran.

Faux Splits

conception web écran partagé
conception web écran partagé

L’esthétique du design à écran partagé est si populaire que certains sites Web la simulent. L’un des concepts clés de cette tendance de conception est le jeu de choix: les utilisateurs peuvent saisir la conception en utilisant l’une des deux options à l’écran.

Cela passe à une variation purement esthétique de la tendance qui ne fournit vraiment qu’un seul choix avec le contenu, mais utilise toujours le piquant visuel qui accompagne ce design.

Vous pourriez penser que c’est une mauvaise idée au début, mais les conceptions résultantes sont si étonnantes que cela fonctionne même sans l’élément fonctionnel de choix. Les projets sont tout aussi étonnants avec des variations empilées sur mobile également.

Les exemples ci-dessus accomplissent cela de différentes manières. Brain Bakery le fait avec une superposition de couleurs cool (vous pourriez dire que ce n’est pas du tout une division), tandis que Mad Brussels utilise un combo photo / espaces blancs pour créer une division.

Écrans divisés en couches

conception web écran partagé
conception web écran partagé

Vous pouvez utiliser des conceptions à écran partagé avec une autre grande tendance de conception de sites Web – la superposition.

Bien que cette technique comporte une mise en garde car elle peut devenir désordonnée si elle n’est pas bien organisée, lorsqu’elle est bien faite, elle peut être très engageante et amusante à regarder.

Lorsque vous travaillez avec des calques et des écrans divisés, il est important de penser à la fonction. Comment l’esthétique et la superposition divisées fonctionnent-elles ensemble? Les utilisez-vous pour créer des fonctionnalités supplémentaires pour les utilisateurs? (La réponse à cette dernière devrait être oui.)

Lorsque vous rapprochez le design, il peut être préférable d’utiliser des calques d’arrière-plan avec des couleurs contrastées pour la séparation et d’autres éléments en haut pour une interaction plus élevée. C’est à l’origine du design de Dotcom Design.

L’Ecole Ducasse fait les choses différemment avec des objets qui s’étendent à mi-chemin à travers l’écran (une image et un cadre de texte) qui se croisent ensuite dans les plans les uns des autres. L’approche la plus minimale est facile à comprendre et maintient tout clairement organisé. De plus, la conception à écran partagé se poursuit sous le défilement avec un look plus traditionnel.

Écrans divisés avec plusieurs zones de clic

conception web écran partagé

L’un des plus grands changements dans la tendance de conception d’écran partagé est qu’il existe plusieurs zones de clic dans certaines des nouvelles conceptions. Là où à l’origine les écrans divisés avaient deux CTA par écran, ces fractionnements contiennent souvent d’autres informations – et des zones cliquables.

L’exemple ci-dessus montre un écran partagé avec une image forte et des messages associés à des liens de commerce électronique. Il a fière allure sur les ordinateurs de bureau – avec la grande image pour vous attirer et empile juste une belle sur mobile, ce qui rend une expérience de magasinage plus agréable.

Écrans divisés pas si évidents

conception web écran partagé

Tous les modèles d’écran partagé ne sont pas super évidents. (Considérez qu’il s’agit autant d’une tendance de l’expérience utilisateur que d’une tendance visuelle.)

Dans les contours de conception minimale, un écran divisé peut être établi à l’aide d’une grille, mais sans couleur ni images, les «écrans» en ont l’air. Owl Studios, ci-dessus, le fait bien. Au-dessus du défilement, il ressemble à une conception à écran unique, en dessous du défilement et sur mobile, la division devient plus évidente.

Cette conception d’écran partagé est magnifique et hautement utilisable sur tous les appareils. C’est exactement ce que vous devriez essayer d’accomplir avec cette tendance de conception de site Web.

Écrans divisés en évolution

conception web écran partagé
conception web écran partagé

On passe à des écrans partagés plus minimalistes.

Alors que les premières conceptions d’écran partagé étaient assez simples – et symétriques – ce n’est plus l’histoire complète. Les concepteurs utilisent toujours certaines des divisions à poids égal, mais travaillent également dans des divisions qui ne sont pas au milieu de l’écran.

Certains présentent plus de motifs en zig-zag, des répartitions basées sur la grille (pensez aux écrans aux trois quarts et au quart) et aux écrans avec des poids de contenu inégaux. Il y a également une transition vers des écrans partagés plus conçus de manière minimale.

À l’origine, les écrans divisés avaient tendance à être un peu lourds car ils étaient conçus pour emmener l’utilisateur à travers un canal de contenu approprié et le contenu devait l’aider à y arriver. Maintenant, ce choix est encore plus rationalisé.

Un mot d’avertissement

conception web écran partagé

Bien que travailler avec des écrans divisés verticaux puisse créer des expériences utilisateur incroyables, vous devez vous méfier des séparations horizontales. Ceux-ci peuvent devenir gênants et se déchaîner rapidement!

La plupart des utilisateurs attendent le même site Web sur tous les appareils.

L’exemple ci-dessus est en fait un joli site Web et utilise des principes d’écran partagé bien en dessous du défilement, mais les deux premiers «écrans» sont insuffisants. Il y a presque trop d’espace blanc et pas assez de messages pour encourager le défilement et l’UX mobile fait défaut. La conception fonctionnerait mieux avec un écran partagé vertical ici, en maintenant l’espace blanc et les CTA avec la vidéo à côté.

Un écran partagé horizontal vous laisse souvent des images avec une large zone d’image qui n’est pas grande. Il s’agit d’un rapport d’aspect difficile à faire fonctionner sur les écrans mobiles. Bien que vous puissiez le faire fonctionner avec un plan solide et différents ensembles de cultures, cela peut conduire à deux expériences utilisateur différentes.

La plupart des utilisateurs attendent le même site Web sur tous les appareils. Si vous prévoyez de créer différentes expériences – même uniquement en images ou en texte – discutez-en avec votre équipe et assurez-vous que c’est le meilleur choix de conception pour le projet.

12 conceptions d’écran partagé que nous aimons

UFC Staredown

conception web écran partagé

Local Hero Studio

conception web écran partagé

C’est au-delà

conception web écran partagé

Creasenso

conception web écran partagé

De Staat Van Creatie

conception web écran partagé

Haerfest

conception web écran partagé

Atteindre le numérique

conception web écran partagé

Paradise Pad

conception web écran partagé

Nikos Pandazaras

conception web écran partagé

Weima

conception web écran partagé

Dr. Roebuck’s

conception web écran partagé

Conclusion

La meilleure chose à propos d’un design à écran partagé est qu’il s’agit d’une option très polyvalente et moderne. Il est intéressant de penser que nous parlons et observons cette tendance de conception de site Web depuis un certain temps maintenant et qu’elle continue d’évoluer.

Lorsque l’on pense aux écrans divisés, la fonctionnalité est souvent le pilote. Cela commence à être un peu moins vrai avec des écrans divisés plus purement esthétiques. Quelle que soit votre logique de choix de conception, n’oubliez pas de la tester avec les utilisateurs pour vous assurer qu’ils comprennent les actions et interactions qu’ils sont censés entreprendre avec la conception.

Enfin, bien que la tendance de conception d’écran partagé soit plus visible sur les moniteurs de bureau à écran large, la façon dont ces éléments «tombent» et s’empilent sur les mobiles est vitale. N’oubliez pas de traduire cette expérience de manière appropriée sur des appareils plus petits et plus orientés verticalement.

Close Menu