Comment créer un site Web ou un blog en 2020 - Guide gratuit et facile pour créer un site Web

8 grands exemples d’utilisation de blocs de texte empil√©s dans la conception Web

Il est tr√®s excitant d’examiner les conceptions de sites Web modernes et de tomber sur de petites choses que les d√©veloppeurs trouvent adorables. “Les petits d√©tails font la diff√©rence” – nous en entendons beaucoup parler ces jours-ci.

En fait, c’est vrai. Ces petites solutions et astuces uniques font ressortir les projets de la foule. Ils font des exp√©riences originales et rendent les interfaces utilisateur passionnantes et inoubliables. De nos jours, les petites tendances pr√©valent sur les grandes.

Les d√©veloppeurs ne s’arr√™tent pas √† une grosse affaire; ils exp√©rimentent de nombreuses petites id√©es. Par cons√©quent, nous pouvons assister √† des solutions microscopiques impressionnantes qui rendent le Web diversifi√©. L’une de ces petites tendances est les blocs de texte empil√©s sur une page d’accueil.

Plus que de simples mots

Les blocs de texte empil√©s peuvent √™tre vus partout. Mais, le probl√®me avec eux, c’est que parfois les concepteurs peuvent se laisser emporter et inclure beaucoup d’informations, r√©sultant en TL; contenu similaire √† DR. Personne ne veut lire √ßa. Cependant, avec deux lignes, c’est une histoire diff√©rente. La bri√®vet√© est l’√Ęme de l’ing√©niosit√©. Cela fonctionne toujours. Choisissez simplement vos mots-cl√©s, composez un slogan accrocheur et le tour est jou√©, vous √™tes pr√™t √† s√©duire les clients. C’est tellement √©l√©gant, simple et efficace. Il n’est pas √©tonnant que de nombreux designers craquent pour cette astuce.

Cependant, les artistes ne se contentent pas de phrases intelligentes. Ils jouent avec son apparence, l’enrichissant de fonctionnalit√©s int√©ressantes et le soulignant discr√®tement avec des r√©glages intelligents. Diff√©rentes techniques sont mises en jeu, par exemple:

  • Diff√©rentes polices de caract√®res;
  • Diff√©rentes couleurs pour chaque ligne;
  • Couleur contrastant avec l’arri√®re-plan ou tout autre contenu;
  • Grandes tailles de police presque √©crasantes;
  • Caract√®res gras;
  • Diff√©rents styles de police;
  • Oeuvres d’art bas√©es sur des polices de caract√®res;
  • Texte enti√®rement en surbrillance;
  • Et m√™me le soulignement √©prouv√© et inattendu n’est pas aussi ennuyeux qu’on pourrait le penser.

Nous allons examiner toutes ces options, afin que vous puissiez voir le potentiel de chacune et choisir la meilleure option pour votre cas particulier.

Denton Design

Commen√ßons par l’un des repr√©sentants les plus brillants de cela dans le courant dominant: la conception Denton de Nathan Denton. Cr√©√© par Ren√© Hern√°ndez et Ryan Haskell-Glatz, c’est un v√©ritable chef-d’Ňďuvre qui fascine par son originalit√© et son √©tranget√©.

¬ęDirecteur de cr√©ation¬Ľ sont les deux mots que l’on retrouve avec le public, marquant le d√©but du dialogue. Toutes les lettres sont en majuscule et ont une taille de police relativement grande. Ils sont peints en deux couleurs primaires: blanc et rouge rubis. Ici, le bloc empil√© √† deux lignes n’est pas seulement un message d’accueil. Il fait partie int√©grante du design qui compl√®te l’ensemble et crie l’occupation de Nathan.

Denton Design

Multistampa

L’√©quipe derri√®re Multistampa opte pour les majuscules, les grandes tailles et les couleurs neutres qui contrastent avec l’arri√®re-plan. En cons√©quence, l’expression ¬ęvie d’impression¬Ľ est un accent naturel ici qui se fond parfaitement avec une esth√©tique inspir√©e de la g√©om√©trie.

Multistampa

Spotify enveloppé

C’est le grand nom de notre collection. Spotify est c√©l√®bre pour ses solutions pionni√®res, preuve qu’il est un pionnier dans le domaine du Web. Ce dernier exemple montre que le bichromie et les couleurs vives excitent toujours l’esprit de votre service cr√©atif.

Encore une fois, nous pouvons voir un bloc de texte empil√© de deux lignes sur votre site Web. Il y a deux blocs plac√©s l’un sur l’autre. Le premier est grand et pro√©minent, tandis que le second est petit. mais frappant. Le beau jaune se marie bien avec l’orchid√©e Pantone utilis√©e comme couleur de fond. La devise est douce et audacieuse.

Spotify enveloppé

iFly KLM 360 degrés

L’√©quipe derri√®re la conception iFly KLM 360 degr√©s utilise la beaut√© des pi√®ces ma√ģtresses typographiques qui sont malheureusement rares de nos jours. “Autour du monde avec Kiran Jethwa” attire notre attention instantan√©ment. Cette version artistique du texte empil√© sur deux lignes est tout simplement incroyable. Les lignes fines et √©l√©gantes des formes des lettres, la grande taille et le jeu complexe des mots font de la phrase un gagnant absolu √† nos yeux.

iFly KLM 360 degrés

Claudia Noronha

Si vous n’avez pas d’artistes de police de caract√®res √† votre disposition, Claudia Noronha vous propose une alternative valable: utilisez une belle police de caract√®res. Son caract√®re √©l√©gant, lisse et l√©g√®rement gras interagit tr√®s bien avec le reste du contenu. En m√™me temps, il reste fid√®le √† l’aura f√©minine de l’interface utilisateur, qui contribue tr√®s bien √† l’atmosph√®re f√©minine globale. Simple, beau et efficace.

Claudia Noronha

Heartbeat Labs

L’√©quipe de Heartbeat Labs opte pour une ancienne solution qui consiste √† souligner les mots. Cela fonctionne tr√®s bien ici. Bien que la taille de la police soit petite, la ligne √©paisse et brillante qui brille sur un arri√®re-plan propre, monochrome et bleu fonc√© met la phrase √† l’honneur.

Heartbeat Labs

SiR MaRy

SiR MaRy pr√©sente un autre classique absolu dans notre collection. Ici, les phrases cl√©s sont mises en √©vidence par des lignes noires en gras. Bien qu’il puisse sembler un peu brutal et grossier par rapport aux exemples pr√©sent√©s ci-dessus, l’astuce donne n√©anmoins au slogan une base solide, le d√©limitant efficacement.

SiR MaRy

Elasts

L’√©quipe derri√®re Elastos nous montre comment utiliser un bloc de texte empil√© √† deux lignes lorsque vous avez un arri√®re-plan √©l√©gant. Bien que l’expression soit d√©finie en caract√®res ultra-√©troits, elle se d√©marque toujours. Il y a plusieurs raisons √† cela.

Tout d’abord, la taille de la police ajoute √† son importance. Deuxi√®mement, l’arri√®re-plan propre et l’espace blanc c√®dent la place √† tout ce qui est au premier plan. Troisi√®mement, la phrase est plac√©e √† gauche, l√† o√Ļ nous commen√ßons naturellement √† lire. Enfin, les graphiques eux-m√™mes pointent litt√©ralement vers le texte.

Elasts

Andres Soler

Andres Soler, artiste multidisciplinaire, divise son nom en deux lignes. Le concept de deux lignes reste √©galement sur les √©crans des petits appareils, donc la premi√®re chose que vous lisez sur votre t√©l√©phone portable est “Andres Soler”. Ici, l’expression ressemble √† une d√©claration audacieuse qui ne n√©cessite aucun ¬ęsupport¬Ľ visuel ou environnement suppl√©mentaire.

Andres Soler

Quand deux vaut mieux qu’un

Si vous pensez que les tendances n’affectent que les √©l√©ments de conception essentiels, d√©trompez-vous. Tous les composants de la conception Web (petits ou grands) sont sujets aux tendances. Vous devez regarder attentivement, en faisant attention aux moindres d√©tails.

M√™me quelque chose d’ennuyeux, comme un bloc de texte, subira des changements et des am√©liorations en ce qui concerne la conception et l’exp√©rience utilisateur. Aujourd’hui, nous avons assist√© √† une tendance √† utiliser des slogans empil√©s sur deux lignes qui sont magnifiquement mis en valeur.

Ils frappent directement au point et ajoutent √† l’esth√©tique globale. Plus important encore, ils correspondent √† la pr√©f√©rence de l’utilisateur de num√©riser du texte sur un site Web au lieu de le lire. C’est une tendance qui allie pragmatisme et cr√©ativit√©.