{"id":71031,"date":"2021-11-01T02:55:06","date_gmt":"2021-11-01T02:55:06","guid":{"rendered":"https:\/\/blogging-techies.com\/fr\/8-excellents-exemples-dutilisation-de-blocs-de-texte-empiles-dans-la-conception-web\/"},"modified":"2021-11-01T02:55:06","modified_gmt":"2021-11-01T02:55:06","slug":"8-excellents-exemples-dutilisation-de-blocs-de-texte-empiles-dans-la-conception-web","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/fr\/8-excellents-exemples-dutilisation-de-blocs-de-texte-empiles-dans-la-conception-web\/","title":{"rendered":"8 excellents exemples d’utilisation de blocs de texte empil\u00e9s dans la conception Web"},"content":{"rendered":"

C’est tr\u00e8s excitant de regarder les conceptions de sites Web modernes et de d\u00e9couvrir de petites choses que les d\u00e9veloppeurs trouvent adorables. \u00ab Les petits d\u00e9tails font la diff\u00e9rence \u00bb \u2013 on en entend beaucoup parler ces jours-ci.<\/p>\n

En fait, c’est vrai. Ces petites solutions et astuces uniques permettent aux projets de se d\u00e9marquer de la foule. Ils cr\u00e9ent des exp\u00e9riences originales et rendent les interfaces utilisateur passionnantes et inoubliables. Actuellement, les petites tendances l’emportent sur les grandes.<\/p>\n

Les d\u00e9veloppeurs ne s’arr\u00eatent pas trop ; ils essaient de nombreuses petites id\u00e9es. Ainsi, nous pouvons assister \u00e0 des solutions microscopiques impressionnantes qui rendent le Web diversifi\u00e9. L’une de ces petites tendances est les blocs de texte empil\u00e9s sur une page d’accueil.<\/p>\n

<\/span>plus que des mots<\/span><\/h2>\n

Les blocs de texte empil\u00e9s peuvent \u00eatre vus n’importe o\u00f9. Mais le probl\u00e8me avec eux est que parfois les concepteurs peuvent s’emballer et inclure trop d’informations, ce qui entra\u00eene un TL\u00a0; contenu similaire \u00e0 DR. Personne ne veut lire ceci. Cependant, avec deux lignes, c’est une autre histoire. La bri\u00e8vet\u00e9 est l’\u00e2me de l’ing\u00e9niosit\u00e9. Cela fonctionne toujours : il suffit de choisir des mots-cl\u00e9s, d’\u00e9crire un slogan accrocheur et d’\u00eatre pr\u00eat \u00e0 gagner des clients. C’est tellement \u00e9l\u00e9gant, simple et efficace. Pas \u00e9tonnant que de nombreux designers craquent pour cette astuce.<\/p>\n

Cependant, les artistes ne s’appuient pas uniquement sur des phrases intelligentes. Ils jouent avec votre apparence, l’enrichissent de fonctionnalit\u00e9s int\u00e9ressantes et la soulignent discr\u00e8tement avec des ajustements intelligents. Plusieurs techniques sont mises en pratique, par exemple :<\/p>\n

  • Diff\u00e9rentes polices;<\/li>\n
  • Diff\u00e9rentes couleurs pour chaque ligne;<\/li>\n
  • Couleur qui contraste avec l’arri\u00e8re-plan ou un autre contenu\u00a0;<\/li>\n
  • Grandes tailles de polices presque impressionnantes\u00a0;<\/li>\n
  • Polices en gras\u00a0;<\/li>\n
  • Diff\u00e9rents styles de police ;<\/li>\n
  • Oeuvre bas\u00e9e sur des caract\u00e8res typographiques\u00a0;<\/li>\n
  • Texte enti\u00e8rement surlign\u00e9\u00a0;<\/li>\n
  • Et m\u00eame le soulignement \u00e9prouv\u00e9 et inattendu n’est pas aussi ennuyeux qu’on pourrait le penser.<\/li>\n

    Examinons toutes ces options afin que vous puissiez voir le potentiel de chacune et choisir la meilleure option pour votre cas particulier.<\/p>\n

    <\/span>Conception de Denton<\/span><\/h2>\n

    Commen\u00e7ons par l’un des repr\u00e9sentants les plus brillants de cela dans le courant dominant : le design Denton de Nathan Denton. Cr\u00e9\u00e9 par Rene Hern\u00e1ndez et Ryan Haskell-Glatz, c’est un v\u00e9ritable chef-d’\u0153uvre qui fascine par son originalit\u00e9 et son \u00e9tranget\u00e9.<\/p>\n

    \u00ab Creative Director \u00bb sont les deux mots trouv\u00e9s avec le public, marquant le d\u00e9but du dialogue. Toutes les lettres sont en majuscules et ont une taille de police relativement grande. Ils sont peints en deux couleurs primaires : blanc et rouge rubis. Ici, le bloc empil\u00e9 de deux lignes n’est pas seulement une salutation. C’est une partie int\u00e9grante du design qui compl\u00e8te l’ensemble et crie l’occupation de Nathan.<\/p>\n

    \"Conception<\/p>\n

    <\/span>Multi-impression<\/span><\/h2>\n

    L’\u00e9quipe derri\u00e8re Multistamp opte pour des majuscules, des grands formats et des couleurs neutres qui contrastent avec le fond. En cons\u00e9quence, l’expression \u00ab\u00a0Imprimer la vie\u00a0\u00bb est ici un objectif naturel qui se fond parfaitement dans l’esth\u00e9tique inspir\u00e9e de la g\u00e9om\u00e9trie.<\/p>\n

    \"Multi-impression\"<\/p>\n

    <\/span>Spotify envelopp\u00e9<\/span><\/h2>\n

    C’est le grand nom de notre collection. Spotify est r\u00e9put\u00e9 pour ses solutions pionni\u00e8res, preuve qu’il est pr\u00e9curseur dans le domaine du web. Ce dernier exemple montre que le bichromie et les couleurs vives excitent toujours les esprits de votre d\u00e9partement cr\u00e9atif.<\/p>\n

    Encore une fois, nous pouvons voir un bloc de texte empil\u00e9 de deux lignes sur votre site Web. Il y a deux blocs plac\u00e9s l’un sur l’autre. Le premier est grand et pro\u00e9minent, tandis que le second est petit. mais impressionnant. Le beau jaune se marie bien avec l’orchid\u00e9e Pantone utilis\u00e9e comme couleur de fond. La devise est douce et, en m\u00eame temps, audacieuse.<\/p>\n

    \"Spotify<\/p>\n

    <\/span>iFly KLM 360 degr\u00e9s<\/span><\/h2>\n

    L’\u00e9quipe derri\u00e8re la conception \u00e0 360 degr\u00e9s d’iFly KLM utilise la beaut\u00e9 des centres de table typographiques qui sont malheureusement rares de nos jours. \u00ab Le tour du monde avec Kiran Jethwa \u00bb attire instantan\u00e9ment notre attention. Cette version artistique du texte empil\u00e9 sur deux lignes est tout simplement incroyable. Les lignes fines et \u00e9l\u00e9gantes des formes de lettres, la grande taille et le jeu de mots complexe font de la phrase un gagnant absolu \u00e0 nos yeux.<\/p>\n

    \"iFly<\/p>\n

    <\/span>Claudia Noronha<\/span><\/h2>\n

    Si vous n’avez pas d’artistes de police, Claudia Noronha propose une alternative valable : utilisez une belle police. Son caract\u00e8re \u00e9l\u00e9gant, lisse et l\u00e9g\u00e8rement gras interagit tr\u00e8s bien avec le reste du contenu. En m\u00eame temps, il reste fid\u00e8le \u00e0 l’aura f\u00e9minine de l’interface utilisateur, qui contribue tr\u00e8s bien \u00e0 l’atmosph\u00e8re f\u00e9minine globale. Simple, beau et efficace.<\/p>\n

    \"Claudia<\/p>\n

    <\/span>Laboratoires Heartbeat<\/span><\/h2>\n

    L’\u00e9quipe de Heartbeat Labs opte pour une solution \u00e0 l’ancienne qui consiste \u00e0 souligner les mots. Cela fonctionne tr\u00e8s bien ici. Bien que la taille de la police soit petite, la ligne \u00e9paisse et brillante qui brille sur un arri\u00e8re-plan bleu fonc\u00e9, monochrome et propre met la phrase \u00e0 l’honneur.<\/p>\n

    \"Laboratoires<\/p>\n

    <\/span>Monsieur Marie<\/span><\/h2>\n

    SiR MaRy pr\u00e9sente un autre classique absolu dans notre collection. Ici, les phrases cl\u00e9s sont mises en \u00e9vidence par des lignes noires en gras. Bien que cela puisse sembler un peu brutal et grossier par rapport aux exemples pr\u00e9sent\u00e9s ci-dessus, l’astuce donne tout de m\u00eame une base solide au slogan en le d\u00e9limitant efficacement.<\/p>\n

    \"Monsieur<\/p>\n

    <\/span>\u00e9lastine<\/span><\/h2>\n

    L’\u00e9quipe derri\u00e8re Elastos nous montre comment utiliser un bloc de texte empil\u00e9 de deux lignes lorsque vous avez un arri\u00e8re-plan \u00e9l\u00e9gant. Bien que la phrase soit d\u00e9finie dans une police ultra-fine, elle se d\u00e9marque toujours. Il y a plusieurs raisons \u00e0 cela.<\/p>\n

    Premi\u00e8rement, la taille de la police augmente son importance. Deuxi\u00e8mement, l’arri\u00e8re-plan \u00e9pur\u00e9 et l’espace blanc c\u00e8dent la place \u00e0 tout ce qui est au premier plan. Troisi\u00e8mement, la phrase est plac\u00e9e \u00e0 gauche, exactement l\u00e0 o\u00f9 nous avons commenc\u00e9 \u00e0 lire naturellement. Enfin, les graphiques eux-m\u00eames pointent litt\u00e9ralement vers le texte.<\/p>\n

    \"\u00e9lastine\"<\/p>\n

    <\/span>Andr\u00e9s Soler<\/span><\/h2>\n

    Andres Soler, artiste multidisciplinaire, divise son nom en deux lignes. Le concept \u00e0 deux lignes reste \u00e9galement sur l’\u00e9cran des appareils plus petits, donc la premi\u00e8re chose que vous lisez sur votre t\u00e9l\u00e9phone est \u00ab Andres Soler \u00bb. Ici, la phrase semble \u00eatre une d\u00e9claration audacieuse qui ne n\u00e9cessite pas de \u00ab\u00a0support\u00a0\u00bb ou d’environnement visuel suppl\u00e9mentaire.<\/p>\n

    \"Andr\u00e9s<\/p>\n

    <\/span>quand deux valent mieux qu’un<\/span><\/h2>\n

    Si vous pensez que les tendances n’affectent que les \u00e9l\u00e9ments de conception essentiels, d\u00e9trompez-vous. Tous les composants de la conception Web (petits ou grands) sont soumis aux tendances. Vous devez regarder attentivement, en faisant attention aux moindres d\u00e9tails.<\/p>\n

    M\u00eame quelque chose d’ennuyeux, comme un bloc de texte, subira des modifications et des am\u00e9liorations concernant la conception et l’exp\u00e9rience utilisateur. Aujourd’hui, nous assistons \u00e0 une tendance \u00e0 utiliser des slogans superpos\u00e9s sur deux lignes, qui sont magnifiquement mis en valeur.<\/p>\n

    Ils atteignent directement l’objectif et am\u00e9liorent l’esth\u00e9tique globale. Plus important encore, ils correspondent \u00e0 la pr\u00e9f\u00e9rence d’un utilisateur de num\u00e9riser du texte sur un site Web plut\u00f4t que de le lire. C’est une tendance qui allie pragmatisme et cr\u00e9ativit\u00e9.<\/p>\n

    \n
    \n

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