Tendance de conception: texte obstrué

Certains sites Web ont fière allure, même s'ils défient la sagesse conventionnelle ou les principes de la théorie du design. Une nouvelle tendance de conception présente cette idée même avec des éléments qui couvrent ou obstruent une partie du texte dans la conception.

C'est une tendance intéressante car elle va à l'encontre de tout ce dont nous parlons couramment avec le design - qu'elle doit être lisible pour se connecter rapidement aux utilisateurs.

Inutile de dire que cela peut être une technique délicate pour réussir efficacement, mais les conceptions sont frappantes et percutantes lorsqu'elles sont bien faites. Voici une ventilation de la tendance et quelques idées sur la façon de l'essayer vous-même.

Explorez les ressources de conception

Obstruction simple

Si le texte est couvert dans un design, tout le reste doit être super simple visuellement afin que l'utilisateur ne se perde pas dans trop d'effets.

À chaque point d'arrêt réactif, le texte n'est pas plus obscurci que les autres.

Root Studio fait un excellent travail avec une première impression qui attire l'attention avec la couleur et la simple girafe animée qui couvre une partie du lettrage surdimensionné. L'astuce ici est que même si certaines lettres sont obstruées, il n'y a aucun doute sur le mot à l'écran. Les lettres sont toujours lisibles, en raison de la taille, de la simplicité de la police et du placement de l'élément obstructif.

L'équipe de conception a apporté un soin particulier à l'obstruction du texte pour maintenir l'intégrité de «ROOT», qui est la marque de ce site Web particulier. À chaque point d'arrêt réactif, le texte n'est pas plus obscurci que les autres. (C'est là que bon nombre de ces conceptions échouent. Elles ont fière allure sur les résolutions de bureau, mais le texte est trop obstrué pour être lisible sur des écrans plus petits.)

Couches tridimensionnelles

L'ajout d'un effet en couches en trois dimensions peut aider les éléments à sauter de l'écran afin que les utilisateurs aient presque l'impression de pouvoir les toucher et les toucher. Le texte peut servir d'élément d'arrière-plan dans certains cas.

Assurez-vous simplement que le calque au-dessus du texte ne couvre pas trop le ou les mots. Et il est toujours essentiel de s'assurer que les obstructions de texte n'entraînent pas de mots indésirables en raison du placement d'autres éléments.

Simply Chocolate utilise bien cet effet de superposition. Il fonctionne principalement en raison de la combinaison de lettres surdimensionnées qui utilisent des mots courants dans une police en gras et un élément supérieur qui n'est pas vraiment grand et contient exactement les mêmes mots qui sont masqués par l'élément candy.

Ce traitement rend les grosses lettres en arrière-plan plus d'un élément graphique que lisible, créant un peu de contraste et un superbe effet de superposition. (Vous pourriez vous retrouver à faire défiler toutes les différentes saveurs de bonbons pour voir comment elles créent l'effet de différentes manières.)

Oubliez les règles de l'espace

Parfois, les obstructions de texte ne couvrent pas réellement les lettres mais empiètent sur leur espace.

C'est l'une de ces règles que North Street enfreint sans que le design ne soit encombré ou disjoint. La description de la société se heurte à la règle verticale centrale de l'écran (le reste de la conception utilise ce diviseur pour une esthétique d'écran partagé.)

Si quelqu'un a dit qu'il allait utiliser ce traitement, vous devriez probablement essayer de le convaincre du contraire, mais ici ça marche. La composition visuelle est si légère - grâce à beaucoup d'espace blanc - et les choix de police sont suffisamment audacieux pour que la ligne grise légère tombe presque à l'arrière-plan même si elle pénètre dans l'espace qui devrait être réservé au texte.

Une deuxième ligne grise divise davantage le texte dans la navigation, mais la plupart des utilisateurs ne remarqueront probablement même pas l'obstruction.

Pour les gros caractères uniquement

En regardant tous les exemples ici, vous remarquerez probablement un thème commun. Tous les caractères obstrués sont assez volumineux et utilisent des polices de caractères simples.

Les petits caractères ne vous donneront généralement pas assez d'espace pour couvrir une partie du texte d'une manière qui semble utile. Si vous prévoyez de concevoir avec une obstruction de texte, elle doit être intentionnelle et avoir un sens.

Les scripts compliqués de styles de nouveauté sont tout simplement trop difficiles à lire avec un élément au-dessus d'eux.

Couvrir de petits caractères est incroyablement difficile, en termes de conception et de lisibilité. C'est pourquoi la technique est associée à une typographie surdimensionnée.

Ces grandes polices, souvent sans empattement, sont faciles à lire en un coup d'œil et ont souvent des largeurs de trait moyennes et de grands bols et compteurs qui rendent les éléments de superposition plus pratiques. Pour que ce concept fonctionne, vous avez besoin de lettres dont les formes se prêtent à ce concept. Les styles de type fins ou condensés ne fonctionnent pas souvent, et les scripts compliqués de styles de nouveauté sont tout simplement trop difficiles à lire avec un élément au-dessus d'eux.

Éléments avec peu de contraste

Parfois, l'obstruction du texte n'est pas un élément au-dessus du texte; c'est la relation entre l'élément de texte et ce qui l'entoure. Un manque de contraste entre le texte et les éléments d'arrière-plan peut également entraîner une obstruction du texte.

Encore une fois, cela peut être un concept difficile à réaliser efficacement. Le texte existe naturellement pour être lu. Un manque de contraste peut rendre cela difficile.

Lorsqu'ils sont associés à du texte très lisible, les éléments de texte à faible contraste sont des rappels subtils à l'écran. Ces éléments seront lus après d'autres éléments à contraste plus élevé.

Dans la conception d'Anew, ci-dessus, la description de l'entreprise est plus importante que la marque du nom. C'est ce que le design dit aux utilisateurs en raison du type de traitement. Les mots clés «rooftop + test kitchen» sont faciles à voir et à lire. Le nom «Anew» apparaît dans un endroit à faible contraste sous la marque. L'œil est toujours attiré par le grand logo, mais ce n'est pas le principal point focal en matière de lecture et de collecte d'informations.

Une partie de la raison pour laquelle ce traitement fonctionne dans cet espace est due au contenu de la conception. Pensez à la symbiose entre le mot «Anew» et les assiettes blanches éclatantes. Il se sent frais, différent et séduisant.

Conclusion

Les conceptions de texte obstruées deviennent de plus en plus populaires. Il n'y a pas si longtemps, vous auriez eu du mal à trouver quoi que ce soit avec ce style en ligne. (Les conceptions d'impression l'ont utilisé de manière plus cohérente car les concepteurs n'avaient pas à se soucier des points d'arrêt réactifs.)

Prenez juste soin de créer quelque chose avec du texte qui n'est pas entièrement visible. Assurez-vous que les mots disent (et signifient) toujours ce que vous voulez. Si vous avez un doute sur la façon dont un dessin sera perçu ou lu lors de l'utilisation de texte obstrué, envisagez une autre option. Vous ne voulez jamais rendre votre conception difficile à comprendre pour les utilisateurs.