7 décisions de conception uniques
Je suis toujours à la recherche d'inspiration, pour un design de qualité qui défie la convention. Ce post concerne les solutions de mise en page uniques; Cela signifie que je parlerai de huit sites Web différents qui présentent quelque chose de typique, d'une manière unique. Nous passerons en revue des solutions de mise en page uniques, allant de la présentation de produits à l’intégration d’éléments personnels et humains dans un site Web.
1. Harvard réinvente le tristement célèbre carrousel
École de design de Harvard Le site Web a une façon unique d’aborder la navigation. Lorsque vous arrivez pour la première fois sur la page d'accueil, il y a un affichage visuel de la navigation. Bien entendu, chaque lien n’est pas représenté ici, juste quelques clés. De nombreux sites Web ont adopté des liens vers les pages les plus importantes de l'en-tête de la page d'accueil. c'est ce qui nous a amené des carrousels par exemple. Mais je n'ai pas encore vu un autre site Web le présenter de cette manière. La navigation est peut-être petite mais elle est au centre. Plus important encore, il semble y avoir sa place. Il est exécuté exceptionnellement.
Les images de gauche se chevauchent mais vous pouvez toujours voir combien y en a. Il y a une relation claire entre l'image et les titres du côté gauche. Les images pivotent par rapport aux éléments de gauche. Cependant, à tout moment, vous savez quelles informations sont disponibles pour vous. C'est comme si la Harvard's School of Design avait créé une version améliorée de ce que le carrousel aurait dû être en premier lieu. Non seulement la convivialité est-elle prise au sérieux dans cette solution de conception, mais la disposition est également unique. Ces deux facteurs combinés créent un design visuel fantastique.
2. Tra quitte la grille
Il est évident que Tra Le site Web utilise une mise en page non traditionnelle. Le site Web est, dans l'ensemble, minimal. Ils utilisent également un jeu de couleurs inversé où le fond est noir et le texte blanc. Le schéma de couleurs lui donne certainement un facteur wow. Cependant, il s'agit de la mise en page du site Web de Tra. Commençons par la page d'accueil: il y a quelques morceaux de texte sur la page d'accueil, dont la majeure partie recouvre au moins un peu l'image d'arrière-plan, à l'exception de la copie de paragraphe sous la section "Nous connaissons des gens". La copie est alignée spécifiquement pour être hors de l'image. C'est différent, c'est unique, c'est perceptible.
Sur la page à propos, il y a un peu plus d'ordre et d'utilisation d'une grille. Mais la grille est toujours irrégulière. Il semble que chaque section de la page à propos ait sa propre grille. La chose qui m'a le plus captivé dans cette page est l'image coupée en haut à gauche de la page Web. Cela ne correspond tout simplement pas à quoi que ce soit. Naturellement, cela me rend curieux. Il s'avère que l'image est une galerie, il faut cliquer dessus pour ouvrir les images. C'est une manière assez intelligente de tirer parti d'une mise en page. Les personnes soucieuses d'enquêter sont récompensées par un tas d'images. Les personnes qui ne s'en soucient pas ne perdent pas autant. C'est un oeuf de Pâques amusant.
3. Photos de chaussures à défiler dans une page fixe
Cet exemple de solution de mise en page unique tourne autour d'un détaillant de chaussures en ligne. Feit La page de ce produit est tout simplement géniale. Tout d'abord, le design utilise toute la largeur et la hauteur de l'écran. Cela signifie que chaque zone de l'écran a été désignée avec un objectif spécifique. Deuxièmement, le site Web est simple, minimal et propre. Cela signifie que même si le design utilise le plein écran, ce n'est pas compliqué. C'est une très bonne chose, car de nombreux designs reposent sur des espaces pour un site Web propre et léger.
Ce qui m'a le plus impressionné dans cette page de produit spécifique, c'est la façon dont la mise en page est divisée. La page est spécifiquement divisée en trois sections différentes. Tout d'abord, il y a la navigation sur le côté gauche. C'est assez standard et rien de trop spécial. Ensuite, il y a le côté droit avec les détails du produit. La navigation du côté gauche et la section des détails sont fixées à l'écran. Mais, la dernière section, la section photo du milieu, est remplie de photos défilantes. Je pense que c'est une solution brillante car ce n'est pas la solution la plus courante.
Souvent, s'il y a une grande liste de photographies de produits, les informations à ce sujet restent. Ici, quand je défile vers le bas, je vois toujours la description et le nom du produit, je vois toujours les différentes couleurs qui entrent et je peux accéder à plus d’informations telles que des détails sur le matériel, sans avoir à faire défiler. Dans l'ensemble, il s'agit d'une expérience transparente pour un client potentiel.
4. Montrer les différents côtés d'un produit en un seul coup d'œil
Ici, nous avons une autre page de produit et une autre façon d'afficher un produit. Ok, bien, nous avons aussi un autre exemple de chaussure aussi! Afura Le site Web a également une méthode d'affichage unique. Cette fois, les chaussures sont montrées sur plusieurs plans différents au sommet de la page. Il fait en fait partie d'un élément d'interface utilisateur de carrousel. Cependant, la facilité d'utilisation n'est pas un gros problème. Pour commencer, trois images sont affichées par défaut sur un ordinateur de bureau ou un ordinateur portable. Les images par défaut ont toutes le même arrière-plan, ce qui en fait un affichage agréable et transparent. Si un utilisateur ne se rend pas compte que les images font partie d’un carrousel, elles verront au moins trois images différentes du produit sur leur ordinateur. Pour les écrans plus petits, tels que les tablettes, l'affichage par défaut consiste à afficher deux images à la fois. c'est quand même pas mal. Dans l'ensemble, l'affichage des produits de chaussures est une solution de conception unique.
5. Opendoor montre ses humains
Pour ma part, je crois que la toile est un lieu impersonnel où nous ne voyons généralement pas l'être humain; les vraies personnes derrière les applications, les produits, les entreprises, etc. Je me suis toujours efforcé d'inclure un élément humain dans mes créations. je peux voir ça Porte ouverte veut faire exactement la même chose. Sur leur page d’accueil, à mi-chemin, se trouve une section intitulée «Nous avons le dos». Elle est censée expliquer qu’il ya de vrais êtres humains derrière la société Opendoor qui sont là pour aider leurs clients à chaque étape. Maintenant, Opendoor aurait pu le laisser là, mais au lieu de cela, ils ont placé une grande photo de l'un de leurs employés.
Cette section a très peu de texte. Au lieu de cela, la photo et le visage sont la plus grande partie de la section. Je dirais même que la photo domine la section de manière positive à 100%. Si la photo avait été une vignette ou un avatar, l'effet n'existerait même pas. Si la photo était un carré de taille moyenne (disons au moins 300 pixels sur 300 pixels) juste à côté de la copie, l'effet ne serait pas le même. Le choix d'utiliser une si grande image du visage amical de Mark était un bon appel; Non seulement cette décision de conception fournit un élément de design humain et personnalisé, mais elle est également créative. Sans cette photo, il n'y aurait pas d'impact personnel sur l'utilisateur. Sans cette disposition spécifique, cette section aurait un effet émotionnel totalement différent.
6. UX Flow montre une petite animation qui peut aller loin
Cet exemple suivant de solution de mise en page unique concerne l’animation. Si vous regardez la page d'accueil de Flux UX et faites défiler un peu l’un des arrière-plans de la section. C’est franchement rien de spécial, mais c’est unique. Les arrière-plans ne sont pas faciles lorsque vous faites défiler une page Web. En fait, au cours des dernières années, nous avons vu différents éléments de la section voler ou défiler lorsque vous faites défiler. Mais, je n'ai pas semblé que beaucoup d'animations de fond en dehors de la parallaxe. La raison pour laquelle cela est important est qu'un arrière-plan définit une section. Et, bien que ce ne soit pas une animation folle, elle est toujours impressionnante.
Tout ne doit pas être audacieux, bruyant et désagréable pour être impressionnant. Parfois, les petites subtilités, comme une animation simple et rapide, suffisent à produire une expérience unique pour un utilisateur. C'est certainement l'un de ces moments. Une autre chose importante à noter est que les sections entre lesquelles se produit l’animation n’ont pas de disposition unique. C'est bon; la transition est perceptible lorsque vous passez d’une section à l’autre, elle fait toujours partie de la mise en page, même si ce n’est pas la mise en page finale de l’animation.
7. Ted Todd carte intégrée
La conception visuelle et l'expérience utilisateur globale de Ted Todd Le site web est bien conçu. Pour les besoins de cet article, je voudrais parler de la manière dont Ted Todd utilise la section «localisation et carte» de son site Web. Au bas de leur page d'accueil, il y a une section désignée pour les différents bureaux que la société a en Floride. Il y a plusieurs raisons pour lesquelles cette section est incroyable. Tout d'abord, la section utilise la mise en page d'une manière unique pour fournir une solution de conception stellaire. La chose la plus remarquable de cette section est la forme légère de la Floride à droite. Le visuel de la Floride avec ses nombreux points est un moyen fantastique de montrer la portée de l'entreprise. Ils ne se contentent pas de dire qu'ils sont en Floride, le design vous montre exactement où. C'est un visuel facile à digérer et il est exécuté de manière fantastique aussi.
La prochaine chose importante à propos de cette section sont les points. Ils sont réellement interactifs. Lorsque vous les survolez, vous obtenez le nom de la ville dans laquelle se trouve le bureau d’assurance de Ted Todd. Mais si vous cliquez dessus, toute la section se déplace vers la gauche pour faire de la place au bureau spécifique. Vous obtenez le numéro de téléphone, l'adresse et les heures d'ouverture du bureau en plus d'une liste d'employés. J'aime cette solution de conception car elle permet à un utilisateur de naviguer rapidement vers un emplacement proche d’eux. C'est visuellement une représentation beaucoup plus intéressante et unique que si les informations étaient empilées les unes sur les autres dans un titre intitulé "Nos bureaux en Floride", vous ne trouvez pas?
