{"id":8925,"date":"2020-05-04T14:26:21","date_gmt":"2020-05-04T14:26:21","guid":{"rendered":"https:\/\/blogging-techies.com\/fr\/en-remontant-lettres-verticales-dans-la-conception-web\/"},"modified":"2020-05-04T14:26:21","modified_gmt":"2020-05-04T14:26:21","slug":"en-remontant-lettres-verticales-dans-la-conception-web","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/fr\/en-remontant-lettres-verticales-dans-la-conception-web\/","title":{"rendered":"En remontant: lettres verticales dans la conception web"},"content":{"rendered":"

Il est facile de s'ennuyer du commun: aspirer \u00e0 quelque chose d'original et d'unique. C'est pourquoi les zones de h\u00e9ros communes regorgent d'id\u00e9es excentriques. Son objectif n'est pas seulement d'impressionner, mais aussi de satisfaire le d\u00e9sir de cr\u00e9ativit\u00e9 et d'originalit\u00e9 de l'utilisateur.<\/p>\n

Cependant, de grandes animations et solutions ne sont pas les seules choses qui peuvent faire l'affaire. Sortir de l'ordinaire avec m\u00eame les choses les plus triviales peut avoir le m\u00eame effet. Et les lettres verticales en sont une preuve \u00e9clatante. Devenu assez populaire de nos jours, c'est devenu une petite tendance avec quelques as dans le trou.<\/p>\n

Nous ne voyons pas beaucoup d'utilisation de l'orientation portrait dans la conception Web. Traditionnellement, c'est un endroit o\u00f9 le rythme horizontal r\u00e8gne sur le poulailler, bien que cela ne signifie pas que tout doit tourner autour de lui. En r\u00e8gle g\u00e9n\u00e9rale, les d\u00e9veloppeurs s'en tiennent aux mod\u00e8les traditionnels. Cependant, la diversit\u00e9 et la d\u00e9viation du flux de lecture habituel peuvent \u00eatre b\u00e9n\u00e9fiques. De plus, vous n'avez pas besoin de prendre des mesures extr\u00eames. De petites doses d'orientation verticale sont plus que suffisantes pour produire un impact ad\u00e9quat.<\/p>\n

<\/span>Archi Graphi <\/span><\/h2>\n

Ici, l'\u00e9quipe cr\u00e9ative a tordu la navigation de base en la faisant pivoter de 90 degr\u00e9s et en la r\u00e9fl\u00e9chissant horizontalement. Vous devriez le lire de bas en haut, c'est assez inhabituel, mais intrigant. En cons\u00e9quence, l'\u00e9cran de d\u00e9marrage est bourdonnant sans toutes ces pi\u00e8ces ma\u00eetresses \u00e9crasantes. Notez \u00e9galement l'en-t\u00eate sup\u00e9rieur – il se sent incroyablement spacieux, et le logo attire l'attention g\u00e9n\u00e9rale en \u00e9tant visible sans trop d'effort. C'est une approche intelligente.<\/p>\n

\"Archi<\/p>\n

<\/span>Lydia Amaruch <\/span><\/h2>\n

Il y a quelques autres exemples exceptionnels o\u00f9 les lettres verticales sont comme la cerise sur le g\u00e2teau. Consid\u00e9rez Lydia Amaruch et son portefeuille en ligne.<\/p>\n

Comme dans le cas d'Archi Graphi, l'utilisation du rythme vertical est ici \u00e9pisodique mais bien pens\u00e9e. Il existe une navigation horizontale simplifi\u00e9e traditionnelle, mais elle ne comprend que l'essentiel. Tout le reste a \u00e9t\u00e9 litt\u00e9ralement mis de c\u00f4t\u00e9. Ils r\u00e9sonnent avec des rayures verticales \u00e0 l'arri\u00e8re, cr\u00e9ant une esth\u00e9tique harmonieuse.<\/p>\n

\"Lydia<\/p>\n

<\/span>Moi: ha <\/span><\/h2>\n

Moi: Vous avez adopt\u00e9 la m\u00eame approche. Alors que la navigation principale est cach\u00e9e derri\u00e8re le bouton hamburger, les liens vers la page d'accueil et les m\u00e9dias sociaux restent \u00e0 la surface. Encore une fois, regardez le th\u00e8me g\u00e9n\u00e9ral. Ici, le rythme vertical peut \u00eatre vu dans divers d\u00e9tails, tels que le curseur divis\u00e9 en trois panneaux semi-transparents et des symboles allong\u00e9s. La coh\u00e9rence marque la conception de ce site Web.<\/p>\n

\"Moi:<\/p>\n

<\/span>Ivan Ibanez \/ Gothamsiti
\n<\/span><\/h2>\n

Ivan Ib\u00e1\u00f1ez et l'\u00e9quipe derri\u00e8re Gothamsiti nous montrent comment appliquer l'orientation verticale \u00e0 toute la navigation. Il s'av\u00e8re utile \u00e0 utiliser, sans parler de son aspect saisissant. Veuillez noter que ces deux exemples ont des th\u00e8mes, des humeurs et des atmosph\u00e8res diff\u00e9rents. Mais, la navigation verticale tient comme un gant dans les deux cas.<\/p>\n

Le portfolio personnel d'Ivan Ib\u00e1\u00f1ez a une atmosph\u00e8re carr\u00e9e. Il y a des blocs creux, une conception divis\u00e9e, des lignes ultrafines et beaucoup d'espace blanc. La navigation verticale compl\u00e8te magnifiquement le design.<\/p>\n

\"Ivan<\/p>\n

Les cr\u00e9ateurs derri\u00e8re la conception de Gothamsiti ont plac\u00e9 des liens autour du p\u00e9rim\u00e8tre de la zone des h\u00e9ros, mettant chacun dans un coin. De cette fa\u00e7on, rien ne d\u00e9tourne l'attention de l'\u00e9cran de d\u00e9marrage effrayant et myst\u00e9rieux. Dans le m\u00eame temps, toutes les passerelles sont expos\u00e9es, ce qui rend les utilisateurs \u00e0 l'aise.<\/p>\n

\"Gothamsiti\"<\/p>\n

<\/span>Sessions Prime Park <\/span><\/h2>\n

\u00c9loignons-nous de la navigation et explorons des exemples de lettres verticales qui font partie du contenu.<\/p>\n

\u00c9tant donn\u00e9 que l'orientation portrait semble un peu \u00e9trange pour la plupart d'entre nous, elle peut \u00eatre utilis\u00e9e pour mettre davantage l'accent sur des choses cruciales comme un slogan, par exemple. L'id\u00e9e peut \u00eatre vue lors de Prime Park Sessions. Ici, la plaque signal\u00e9tique de l'agence est orient\u00e9e vers la gauche, l\u00e0 o\u00f9 nous commen\u00e7ons g\u00e9n\u00e9ralement \u00e0 lire. Il refl\u00e8te \u00e9galement la navigation verticale sur la droite. En cons\u00e9quence, la conception est compl\u00e8te et visuellement int\u00e9ressante.<\/p>\n

\"Sessions<\/p>\n

<\/span>Villas de luxe <\/span><\/h2>\n

L'\u00e9quipe derri\u00e8re la conception des villas de luxe utilise une orientation verticale pour afficher le slogan. Ce dernier dispose \u00e9galement d'un fond relativement large pour le faire ressembler \u00e0 une barre lat\u00e9rale. Bien que ce ne soit pas seulement une barre lat\u00e9rale ordinaire, c'est une barre lat\u00e9rale enthousiaste. C'est intelligent.<\/p>\n

\"Villas<\/p>\n

\n<\/h2>\n

Kitamura Makura \/ Canatal<\/p>\n

Une autre fa\u00e7on de profiter de la tendance est de l'utiliser pour les titres. Consid\u00e9rez Kitamura Makura et Canatal.<\/p>\n

Quand il s'agit de raconter une histoire, les deux \u00e9quipes pr\u00e9f\u00e8rent concentrer l'attention des utilisateurs sur des choses vitales comme le contenu plut\u00f4t que sur les sous-titres. Par cons\u00e9quent, les titres se sont d\u00e9plac\u00e9s vers la droite et ont \u00e9t\u00e9 pivot\u00e9s de 90 degr\u00e9s, ce qui a naturellement laiss\u00e9 la place au texte.<\/p>\n

Dans le cas de Kitamura Makura, le sous-titre a \u00e9t\u00e9 pouss\u00e9 vers le bord droit, lui donnant l'impression de faire partie de la navigation. Avec Canatal, cependant, le titre fait toujours partie du bloc et de la conception globale.<\/p>\n

\"Kitamura<\/p>\n

\"Canatal\"<\/p>\n

\n<\/h2>\n

Protec \/ Construire l'avenir<\/p>\n

Protec et Building the Future ont rendu les choses un peu plus int\u00e9ressantes en int\u00e9grant le texte vertical \u00e0 l'environnement.<\/p>\n

Protec propose d'\u00e9normes sous-titres qui s'\u00e9tendent de haut en bas. Ils sont soigneusement mis de c\u00f4t\u00e9 et affich\u00e9s sur le c\u00f4t\u00e9 gauche, donnant au contenu la plus haute priorit\u00e9.<\/p>\n

\"Protec\"<\/p>\n

Dans le cas de Building the Future, les lettres verticales sont encore plus grosses. Cependant, ici, il joue un r\u00f4le purement d\u00e9coratif, renfor\u00e7ant le titre traditionnel pr\u00e9sent\u00e9 en haut du bloc de texte.<\/p>\n

En ce qui concerne le r\u00e9f\u00e9rencement, ce n'est pas une bonne pratique car les titres doivent faire partie de la hi\u00e9rarchie des documents et \u00eatre inclus dans les balises correspondantes. Cependant, parfois, vous pouvez sortir de l'ordinaire et gagner des clients avec un design au lieu d'un classement de recherche.<\/p>\n

\"Construire<\/p>\n

<\/span>Kwok Yin Mak <\/span><\/h2>\n

Alors que pour le monde occidental, le rythme vertical ressemble \u00e0 quelque chose d'extraordinaire et une astuce viable pour ajouter de l'excitation aux conceptions conventionnelles, pour nos amis de l'Est, cela vient naturellement. Jetons un coup d'\u0153il \u00e0 Kwok Yin Mak.<\/p>\n

Le design a l'air rafra\u00eechissant. Le sch\u00e9ma de couleurs noir et blanc traditionnel, beaucoup d'espace blanc, les logos et bien s\u00fbr l'orientation portrait rendent cette interface si sp\u00e9ciale. La tendance se sent comme \u00e0 la maison. Cependant, alors que nous esp\u00e9rons qu'il est l\u00e0, l'\u00e9quipe derri\u00e8re le site Web a r\u00e9ussi \u00e0 l'emp\u00eacher de para\u00eetre trivial.<\/p>\n

\"Kwok<\/p>\n

<\/span>Une agr\u00e9able surprise<\/span><\/h2>\n

Les lettres verticales sont un invit\u00e9 rare, mais bienvenue. Il est s\u00fbr de dire que dans l'univers de tout horizontal, c'est une petite lumi\u00e8re qui nous fait sourire. R\u00e9galez vos yeux d'une torsion inattendue dans le flux de lecture et concentrez-vous sans effort sur l'essentiel.<\/p>\n

C'est un moyen simple de faire des choses cool sans r\u00e9inventer la roue et aller plus loin.<\/p>\n

\n
\n

Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n