Certains sites Web ont fière allure, même s’ils défient les idées reçues ou les principes de la théorie du design. Une nouvelle tendance de conception met en valeur cette idée même avec des éléments qui couvrent ou obstruer 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’il soit lisible pour pouvoir 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 ont un impact si elles sont bien faites. Voici un aperçu de la tendance et des idées pour l’essayer vous-même.
Simple obstruction
Si le texte est couvert dans un dessin, tout le reste doit être super simple visuellement pour que l'utilisateur ne se perde pas dans trop d'effets.
A chaque point de rupture sensible, le texte n’est pas plus obscurci qu’aucun autre.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 recouvre une partie du lettrage surdimensionné. Le truc ici est que, même si certaines lettres sont obstruées, il n’ya aucun doute sur le mot affiché à l’écran. Les lettres sont toujours lisibles en raison de la taille, de la simplicité de la police de caractères et du positionnement de l'élément obstructif.
L’équipe de conception a pris un soin particulier à l’obstruction du texte afin de préserver l’intégrité de? ROOT ,? qui est la marque de ce site particulier. A chaque point de rupture sensible, le texte n’est pas plus obscurci qu’aucun autre. (C’est là que nombre de ces conceptions sont insuffisantes. Elles ont fière allure sur les résolutions de bureau, mais le texte est trop encombré pour être lisible sur des écrans plus petits.)
Couches tridimensionnelles
L'ajout d'un effet de calque tridimensionnel peut aider les éléments à sortir de l'écran, ce qui permet aux utilisateurs de se sentir presque capables de les toucher et de 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 mot (ou les mots). Et il est toujours essentiel de veiller à ce 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. Cela fonctionne principalement à cause de la combinaison d'un lettrage surdimensionné qui utilise des mots communs dans une police de caractères audacieuse et d'un élément supérieur pas vraiment volumineux et qui contient exactement les mêmes mots masqués par l'élément candy.
Ce traitement rend les grandes lettres en arrière-plan plus un élément graphique qu'un élément lisible, créant un contraste frais 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 recouvrent pas les lettres mais empiètent sur leur espace.
C’est l’une de ces règles que North Street impose sans que le design ne soit encombré ou décousu. La description de la société se heurte à la règle verticale centrale de l'écran (le reste de la conception utilise ce séparateur pour une esthétique d'écran partagé.)
Si quelqu'un disait qu'il allait utiliser ce traitement, vous essaieriez probablement de le convaincre du contraire, mais ici cela fonctionne. La composition visuelle est si claire - grâce à beaucoup d'espace blanc - et les choix de police de caractères 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 en outre le texte dans la navigation, mais la plupart des utilisateurs ne remarqueront probablement même pas l’obstruction.
Pour gros caractères seulement
En regardant tous les exemples ici, vous remarquerez probablement un thème commun. Tous les caractères masqués sont assez volumineux et utilisent des polices simples.
Les lettres minuscules ne vous donneront généralement pas assez de place pour couvrir une partie du texte d'une manière qui semble avoir un sens. Si vous envisagez de concevoir avec une obstruction de texte, cela doit être intentionnel et avoir un sens.
Les scripts compliqués des styles de nouveauté sont tout simplement trop difficiles à lire avec un élément au-dessus d'eux.Couvrir de petits caractères est extrêmement difficile, en termes de conception et de lisibilité. C'est pourquoi la technique est associée à une typographie surdimensionnée.
Ces polices de caractères de grande taille, souvent sans empattement, sont faciles à lire en un coup d’œil et ont souvent une largeur de trait moyenne ainsi que des cuvettes et des comptoirs larges qui rendent les éléments de superposition plus pratiques. Pour que ce concept fonctionne, vous avez besoin de lettres avec des formes qui se prêtent à ce concept. Les styles de type mince ou condensé 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 à mettre en œuvre efficacement. Le texte existe naturellement pour être lu. Un manque de contraste peut rendre cela difficile.
Lorsqu'ils sont associés à un texte très lisible, les éléments de texte à faible contraste constituent des rappels subtils à l'écran. Ces éléments seront lus après d'autres éléments de contraste plus élevé.
Dans la conception d'Anew, ci-dessus, la description de l'entreprise est plus importante que la marque. C'est ce que la conception indique aux utilisateurs en raison du type de traitement. Ils mots clés? Sur le toit + test cuisine? sont faciles à voir et à lire. Le nom? Anew? apparaît à un endroit peu contrasté sous la marque. L'œil est toujours attiré par le grand logo, mais ce n'est pas le principal centre 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 lumineuses. Il se sent frais, différent et attrayant.
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 à s'inquiéter des points de rupture réactifs.)
Veillez simplement à créer quelque chose avec du texte qui n'est pas entièrement visible. Assurez-vous que les mots disent toujours (et signifient) ce que vous souhaitez. 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.