Un écran divisé en deux. C’est peut-être l’une des grandes tendances en matière de design qui se dégage actuellement. De plus en plus de sites Web utilisent des modèles de conception comprenant deux panneaux verticaux ou carrés placés côte à côte.
Et c'est une belle esthétique. Le look est convivial, peut être adapté à une variété de besoins et aide à guider la navigation. C'est une tendance que nous verrons probablement davantage - et concevoir - dans les mois à venir. Nous examinons aujourd’hui quelques exemples intéressants de conception d’écrans partagés avec de mini-études de cas et cherchons à tirer le meilleur parti de cette tendance en matière de conception.
3 cas pour la conception d'écran divisé
Alors, pourquoi dans le monde voudriez-vous diviser votre dessin en deux? Si vous venez de poser la question sans voir les résultats, j'aurais peut-être aussi posé la question. Mais il y a de bonnes raisons d'essayer un concept d'écran partagé.
- C'est un bon choix pour les frameworks responsive. Sur les écrans plus grands, le design est divisé, mais s’agissant 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. Regardez le modèle de gamification utilisé pour le? Chekhow is Alive? site ci-dessus. La conception vous prie de cliquer pour trouver votre personnage. (Et c'est très difficile de ne pas se laisser entraîner.)
- Deux panneaux symétriques facilitent la création d'un contour modulaire pour la conception du site de remplissage et l'organisation du contenu au sein des blocs. C'est presque une extension surdimensionnée des modèles de design de style carte qui gagnent en popularité.
Soyez audacieux avec la couleur et la typographie
La couleur et la typographie sont de grands moteurs de tendance, grâce à une attention accrue portée au design plat et matériel. Combinez les deux et vous obtenez une esthétique simple, intéressante et attrayante.
Baesman l'a fait avec brio avec la conception d'écran divisé. Deux panneaux de couleurs vives et audacieuses constituent la première introduction pour cet utilisateur. États de vol stationnaire cool? la messagerie de chaque panneau oblige presque les utilisateurs à cliquer davantage. Le choix de la police de caractères est simple, mais comporte juste assez de contours pour vous faire paraître.
Cliquez sur le site et vous verrez facilement que ce concept d'écran divisé est utilisé pour créer une impression de flux et d'organisation. Bien que le reste du design ne soit pas divisé aussi parfaitement que la page d'accueil, le contenu est organisé en panneaux tout au long du design et les couleurs vives transparaissent.
Créer un espace pour la messagerie
Un écran partagé est une excellente option pour créer un thème visuel pouvant fonctionner avec du contenu ou des images complexes, ou tout simplement si vous souhaitez créer un point focal plus grand pour les appels à l'action. Le truc pour créer ce travail est beaucoup d’espace, une typographie nette et un style scindé (dans le cas de l’exemple présenté ici, une superposition de couleurs) complète l’image.
BAO utilise une image de héros en plein écran derrière un bloc de couleurs avec du texte, une navigation et un appel à l'action. Le design est intéressant à plusieurs égards, car il se démarque de certains des modèles auxquels nous sommes habitués, mais sans confusion. Par exemple, la navigation (menu hamburger) est proche du centre de l'écran et l'image du héros ne comprend qu'une touche d'animation avec survol.
Ces choses aident à attirer les utilisateurs à l'appel à l'action sur la taille de gauche de l'écran. Ce qui est particulièrement agréable à propos de cette conception est que chaque écran prend une page presque personnelle de son propre toucher, de sorte que chaque élément de contenu est pondéré de manière égale. (Ce type de traitement ne convient pas à tous les projets, mais fonctionne particulièrement bien pour mettre en valeur le portefeuille ou le travail du client.)
Focus sur une action
Une conception de site Web en écran partagé peut également faire penser à une impression. Cela fonctionne particulièrement bien avec un cadre minimaliste qui inclut un appel à l'action distinct pour les utilisateurs.
Dans le cas de Tree That Gives, le but du site est d'encourager les dons avec le simple bouton coloré situé dans le panneau inférieur droit. L'image sert uniquement de point d'atterrissage pour les utilisateurs qui accèdent à la page, mais tout le contenu et toutes les informations importants se trouvent dans l'autre panneau. (Cette moitié du site Web pourrait vivre seul en termes de contenu, mais ne serait pas aussi intéressant visuellement.)
Créer? Cartes?
La conception d'écran divisé est vraiment un modèle dérivé de la popularité des cartes. Un grand nombre de ces sites incluent des interactions contenues dans un côté ou l'autre de l'écran, en suivant le principe du conteneur, la philosophie du clic, caractéristique des interfaces de type carte.
Envisagez d'étendre l'écran partagé en plusieurs conteneurs pour offrir encore plus de possibilités de la part de chaque utilisateur. Si le Soleil utilise un écran partagé sur l’ensemble du site; la grande différence est que le panneau de gauche est une? carte ,? tandis que les panneaux de droite contiennent une paire de cartes. De simples effets de survol indiquent à l'utilisateur que chacun de ces éléments est cliquable et entraînera une autre action. La conception est propre, bien organisée et conçue pour garder les utilisateurs en cliquant.
Changer le haut
Bien que de nombreuses conceptions que nous avons examinées jusqu'ici se soient concentrées sur une division distincte gauche-droite avec une ligne de démarcation nette entre les éléments, ce n'est pas toujours le cas. Un écran peut également être divisé visuellement à l'aide d'autres éléments.
Le site de Warsaw Rising le fait avec simplicité et beauté. Un bloc de texte est la ligne de démarcation? entre les panneaux. Chaque face présente un visage rogné de la même manière sur l'écran et parfaitement espacé. Le défilement modifie le texte du milieu sans enlever le style du panneau. Le style presque inverse de l’écran partagé, des images en noir et blanc et des touches de jaune fait ressortir l’écran. La conception générale est dramatique sans être difficile à naviguer ou à prendre en compte.
Conclusion
La conception d’écrans fractionnés est une chose que nous verrons beaucoup dans les mois à venir. Le modèle est simple, utilisable et fonctionne pour un certain nombre de types de sites différents, comme nous l'avons examiné ici.
Le truc pour le faire fonctionner - et ne pas rester coincé dans une? Utilisation excessive? design - consiste à ajouter des touches qui en font le vôtre. Si vous aimez la couleur, utilisez-la; Pensez à empiler des éléments ou à un contact décent. Mais surtout amusez-vous!