Tendance de conception: texte et typographie en tranches
Les puristes disent qu'il ne faut jamais modifier la typographie. Le lettrage doit apparaître comme prévu par le concepteur de type, ou vous devez sélectionner une police complètement différente. Bien que cela soit principalement vrai, l'exception est dans la tendance du texte en tranches.
L'effet astucieux donne aux éléments de type l'impression d'avoir été coupés avec un outil de précision et peut ajouter un intérêt visuel aux logotypes, titres et blocs de texte simples. Les effets de texte en tranches peuvent varier de très subtils (comme une petite lettre manquante) à des parties principales de mots manquants.
La chose à garder à l'esprit lors de l'utilisation de texte découpé en tranches est que les mots doivent toujours être lisibles - à quoi bon autrement? - et vous devez faire très attention afin que les combinaisons de lettres ou les mots non intentionnels n'apparaissent pas en raison du découpage. Voici un aperçu de la façon de le faire fonctionner pour vous avec quelques exemples de conceptions qui le font bien.
Explorez Envato Elements
Tranche «traditionnelle»
Le texte découpé comprend un aspect presque en couches avec un élément de texte, tel qu'un mot ou un petit groupe de mots, qui est coupé et superposé sur deux plans. Cet effet crée de la profondeur et peut rendre un simple ensemble de caractères visuellement intéressant.
Resoluut utilise cet effet en combinaison avec une esperluette pour attirer les utilisateurs au centre de la conception. Le texte découpé reflète le message ci-dessous selon lequel la société se concentre sur le «design numérique avec attitude», car le texte découpé transmet une certaine ambiance plus pointue que le lettrage direct.
Cette technique fonctionne mieux lorsque les jeux de caractères sont simples (pensez d'abord aux polices sans empattement) et que les mots ont un point de rupture naturel où ils peuvent être coupés et maintenir la lisibilité.
Découper du texte et des photos
L'effet de superposition n'est pas limité à une combinaison de police et d'espace. Les concepteurs peuvent également utiliser des images et du texte pour créer un effet de tranche cool, comme l'exemple ci-dessus de The Shift.
Les combinaisons de tranches inclinées d'une seule image (également découpée) avec des lettres attirent l'utilisateur dans la conception.
Bien que certains des mots soient un peu plus difficiles à discerner au début, il y a suffisamment de temps entre les animations pour comprendre le message avec facilité.
Cette tendance fonctionne bien pour les agences numériques et les sites de portefeuille en tant que moyen de présenter un look and feel moderne ainsi que de mettre en avant des côtelettes créatives.
Tranche avec animation
L'effet de texte en tranches peut également être combiné avec d'autres éléments de conception à la mode. Mélanger le découpage et l'animation peut donner un bel élément visuel.
Dans l'exemple ci-dessus, chacun des éléments de texte découpés est en fait de la navigation. Les utilisateurs peuvent cliquer sur l'un ou l'autre élément, mais ce qui est plus impressionnant est l'action de survol, qui rassemble le texte découpé.
Pour les logotypes
Le texte en tranches peut être une façon amusante de créer un logo lorsque les seuls éléments avec lesquels vous devez travailler sont du texte. Un logo amusant peut être plus qu'une marque de reconnaissance de marque; il peut également être un élément hautement graphique pour de multiples utilisations, comme la conception de chemise, ci-dessus.
Lorsque vous travaillez avec du texte découpé, recherchez une forme et une pente naturelles pour le découpage afin qu'il soit intéressant de les regarder tout en conservant la facilité de lecture.
Faites attention à la façon dont le découpage crée un espace blanc. La conception ci-dessus utilise une large tranche d'informations supplémentaires à l'intérieur. L'utilisation la plus courante du découpage est souvent une ligne mince, mais les approches (comme vous pouvez le voir dans les exemples de ce post) peuvent varier considérablement.
Créer l'interactivité
Autorisez les utilisateurs à découper leur propre texte avec une combinaison interactive de texte et de pinceau, comme dans l'exemple ci-dessus. Bien que le texte ne soit pas exactement tranché en soi, l'effet est créé dans le processus de création artistique.
Tous les outils qui permettent aux utilisateurs de modifier la conception peuvent entraîner des temps plus longs sur le site en raison du composant interactif.
Coups verticaux tranchés
Les tranches verticales ont tendance à être plus courtes car chaque coupe fait partie d'une seule lettre. Alors que la plupart des concepteurs semblent utiliser la tendance de la même manière avec une tranche plus horizontale, les coupes peuvent également être verticales.
Les tranches verticales ont tendance à être plus courtes car chaque coupe fait partie d'une seule lettre. L'astuce pour faire fonctionner les tranches verticales est la cohérence. La façon dont les coupes sont faites doit se imiter afin que les lettres semblent aller ensemble. Cette méthode de découpage devrait ressembler à presque une partie prévue de la police de caractères. (Pas dans l'exemple ci-dessus, les tranches ont la même largeur d'une lettre à l'autre et les mêmes lettres ont les mêmes tranches.)
Établir un flux visuel
Les coupures créent presque un sentiment d'urgence de lecture de sorte que vous zippez sur les lettres et sur le visuel principal à l'écran. Une conséquence du texte découpé - voulu ou non - est qu'il crée un flux visuel. L'œil d'un utilisateur suivra la direction de la tranche et de l'espace blanc qui l'entoure.
Regardez le logotype dans l'exemple ci-dessus. Avec des tranches dans les R et o dans Robocath (plus la partie manquante normale du c), il y a une traction directionnelle évidente à travers l'écran de gauche à droite.
La traction est plus forte que ce que vous associez à une lecture normale (également de gauche à droite) car les tranches vous font rapidement traverser les caractères. Les coupures créent presque un sentiment d'urgence de lecture de sorte que vous zippez sur les lettres et sur le visuel principal à l'écran.
Mettez l'accent sur le lettrage
La dernière raison - et peut-être la plus convaincante - pour utiliser la tendance de conception de texte en tranches est de mettre l'accent sur le lettrage ou le message. Le découpage peut être à peu près n'importe quelle altération de lettres où une partie d'un caractère manque dans la conception.
MJND, ci-dessus, utilise davantage un effet de superposition pour masquer ou découper des formes de lettres pour aider à mettre l'accent sur le message. L'image pourrait facilement faire toutes les communications ici, mais cet effet permet de ramener l'utilisateur à la messagerie principale. La combinaison est simple, efficace et visuellement intéressante.
Ressources d'apprentissage
Il existe plusieurs façons de créer des effets de texte en tranches pour les projets, en fonction de ce que vous essayez de créer. Les options les plus populaires incluent la création de l'effet de texte à la main à l'aide d'un logiciel d'édition ou à l'aide de CSS pour créer l'effet pour les projets Web.
Voici des didacticiels pour chacune de ces options afin que vous puissiez essayer de créer un effet de texte en tranches à la mode:
- Vidéo: comment créer du texte en tranches dans Adobe Illustrator
- Couper l'extrait d'effet de texte à l'aide de CSS
Conclusion
L'utilisation de la tendance du texte en tranches peut être un peu délicate car elle implique de modifier les éléments de type. Il est important que la lisibilité ne soit pas perdue ou vous pourriez perdre des utilisateurs avec cet effet.
Les effets de texte en tranches, cependant, peuvent être une solution amusante et aider à générer un point focal. L'ajout d'une touche d'animation peut également aider à passer au niveau suivant. (La plupart des exemples inclus dans ce post font exactement cela; assurez-vous de visiter ces sites Web et de cliquer.)
