3 tendances de conception essentielles, décembre 2017
Les trois tendances essentielles du mois ont trait à la typographie. Et les tendances mettent en avant des méthodes remarquables pour utiliser un beau type afin de créer un engagement de l'utilisateur et de créer une excellente première impression.
Un thème commun parmi ces conceptions est que tous les styles de typographie sont hautement lisibles. Si vous envisagez de travailler avec un élément de texte plus tendance ou funky, choisissez une police que les utilisateurs auront du mal à lire. La technique à la mode est le truc avec ces conceptions, pas la police elle-même.
Voici ce qui est tendance dans la conception ce mois-ci:
1. Tapez juste au-dessus du rouleau
Même si une image de qualité peut aider à attirer les utilisateurs dans un design, les bons mots et l’espace sont parfois les bienvenus.
La clé pour tirer le meilleur parti de cette tendance est d'affiner votre message. Les mots doivent être simples, dire quelque chose de significatif et créer de la valeur pour l'utilisateur.
Alors comment tu le fais?
- Commencez avec une phrase clé. Cela peut être votre mission ou une proposition de valeur pour les utilisateurs. Dites aux utilisateurs ce que vous apportez à la table et pourquoi votre site Web sera important pour eux.
- Choisissez une police de caractères simple qui a la même ambiance que la messagerie pour les blocs de copie plus longs.
- Si le bloc de texte est court, par exemple avec Types de type , envisagez une option de type funkier pour attirer les utilisateurs.
- Profitez de l'espace. Notez que dans chacun des exemples ci-dessous, le texte a beaucoup d'espace pour respirer, ce qui le rend plus facile à lire d'un coup d'œil. L'espace peut également aider à attirer l'attention sur le texte et à équilibrer les éléments de texte si vous ne souhaitez pas les centrer sur l'écran, par exemple: Design Ups .
- Utilisez la couleur pour aider à ajouter un intérêt visuel. Les teintes lumineuses et à la mode peuvent aider les utilisateurs à s’intégrer à la conception. La couleur peut également aider à définir une ambiance en corrélation avec la messagerie.
Lorsque vous travaillez avec une conception lourde, ne forcez pas. Parfois, vous n'avez pas assez de texte pour remplir un "écran" complet. Moins + Plus et Type de type utilise le blocage de couleur pour créer plusieurs panneaux parfaitement dimensionnés pour le contenu du texte.
2. Texte en boîtes blanches
Avec autant d'éléments visuels audacieux dans les projets de conception de sites Web, et tant de points d'arrêt réactifs pour traiter les zones blanches, ils ré-émergent en tant qu'élément conteneur pour le texte. Les cases blanches avec du texte sombre à l'intérieur peuvent assurer la lisibilité en ce qui concerne la messagerie par-dessus les photos, les vidéos ou les illustrations où il existe des variations de couleur.
Et même si cette tendance peut sembler un peu, bien ... bâclée ou paresseuse, elle est en fait très bien si elle est bien faite.
Vous ne pouvez pas simplement taper une boîte n'importe où sur une image et espérer le meilleur. Les boîtes blanches doivent être placées de manière stratégique afin qu'elles ne couvrent pas des parties importantes de l'image et que les utilisateurs les déplacent lorsqu'ils examinent la conception.
Les cases blanches doivent être suffisamment grandes pour contenir une quantité raisonnable de texte et vous devriez avoir un plan pour cet élément sur des écrans plus petits, comme permettre à tout ce qui se trouve dans la zone de texte de tomber sous l'image principale. N'essayez pas de placer une zone de texte sur une image sur des écrans plus petits car vous vous retrouverez avec une boîte de texte trop petite pour être lue ou la boîte couvrira la majeure partie de l'image elle-même.
Si vous utilisez du pot pour le traitement de la boîte blanche, amusez-vous. Chacun des exemples ci-dessous utilise des cases blanches de manières complètement différentes.
Faire de la place coupe une case blanche dans le coin inférieur de l'image pour que la majeure partie de l'image soit visible. La boîte blanche se fond dans l’espace blanc en dessous, ce qui donne l’impression qu’elle ressort du panneau ci-dessous. Cette technique permet de connecter le curseur principal au contenu ci-dessous (et peut même encourager le défilement).
Comment cela utilise des gouttes circulaires afin que les zones de texte blanches correspondent mieux au ton de l'illustration d'arrière-plan. Ce léger changement de forme, de sorte que les boîtes apparaissent plus fluides, aide à relier les éléments pour que les boîtes et le fond aient une sensation cohérente. Vous ne voulez pas que les cases blanches pour le texte donnent l'impression d'être placées de manière aléatoire sur le fond. (Cela ne fonctionne pas et ne contribuera pas à créer une impression de cohésion pour les utilisateurs.)
Macaulay Sinclair a plus de texte que les autres exemples en utilisant une partie d'une grille de panneau d'image pour contenir l'élément de texte. Ici, l'image derrière la case blanche ne fournit aucune valeur d'information. Il a un schéma de couleur et de mouvement qui ressemble à d'autres images et sert principalement à créer une cohésion entre l'élément de texte et le reste du dessin.
3. Découpes typographiques
Personne n’a jamais dit que le texte devait être une série de lettres pleines. De plus en plus de concepteurs optent pour des découpes de typographie comportant un bloc de couleur sur une image, de sorte que l’image passe par un lettrage clair.
Cette technique peut fonctionner avec des images fixes ou animées et avec des superpositions en plein écran, de sorte que seule une petite quantité d'informations passe par des lettres (presque pour créer une texture) ou avec plus d'un style de bloc avec plus de l'image d'arrière-plan. visible.
L'astuce pour faire ce travail est la bonne police de caractères. Les lettres doivent avoir des traits assez épais pour que l'image ou la texture en arrière-plan soit visible. Vous ne pouvez pas faire cela avec une police fine ou condensée avec un succès constant.
Cette technique fonctionne également mieux si le nombre de mots et de lettres est assez limité. S'en tenir à un à trois mots avec 10 lettres ou moins ou utiliser des mots très courants que les utilisateurs sauront en un coup d'œil.
Danbury utilise une découpe de texte brillante comme tirage pour encourager les utilisateurs à participer à l'appel vidéo. La boîte orange entière est juste un bouton géant.
Fusion Winery utilise une vidéo d'arrière-plan d'un vignoble dans le lettrage. Ce qui est génial à propos de cette conception, c’est l’effet triple couche: arrière-plan vidéo sous la coupure du texte blanc sous une image du produit.
Le kaneko utilise une image non identifiable comme remplissage pour les lettres. Si vous optez pour ce style, gardez ce fond simple comme cela a été fait avec ce design. Il y a juste une touche de couleur et de texture qui attire le regard sur le texte sur la toile rigide.
Conclusion
La collection est une source d’inspiration pour les projets qui n’ont peut-être pas une image ou une vidéo de qualité, de sorte que vous pouvez toujours trouver un moyen de créer quelque chose auquel les utilisateurs répondront. N'ayez pas peur d'utiliser du texte comme élément visuel et informatif dans cette conception.
Quelles tendances aimez-vous (ou détestez-vous) en ce moment? J'adorerais voir certains des sites Web qui vous intéressent. Laisse moi un lien sur Twitter ; J'adorerais avoir de vos nouvelles.