Share
Prêt pour la dose de génialité typographique du web design de ce mois-ci? Je parie que vous l'êtes! Max prend son mois, mais il nous a donné une liste de 15 sites qui présentent certaines des meilleures typographies à consulter. Creusons!
Il est bon de parler des règles techniques d’une typographie appropriée… mais c’est le bon moment de commencer à regarder des exemples de typographie en action et à analyser pourquoi elle fonctionne. Un des aspects les plus intéressants de la typographie est que, tout comme les langues dans lesquelles nous communiquons, la façon dont vous utilisez le type dans un dessin lui donne une voix. Vous pouvez crier et crier ou vous pouvez murmurer doucement… tout dépend de vous et de la manière dont vous voulez que votre message soit entendu.
Chaque mois, nous examinerons entre 10 et 20 exemples d'excellente typographie en conception de sites Web… mais plus important encore., nous analyserons également pourquoi la typographie fonctionne. Nous allons plonger dans l'offre de ce mois-ci:
C'est beaucoup trop rare que je rencontre des sites comme celui-ci… honnêtement. C'est une approche que vous avez tendance à voir beaucoup dans la conception imprimée, mais rarement introduite sur le Web. Quels sont les composants?
Regardez à quel point le design est simple… il n'y a pas un seul élément qu'un étudiant en design de première année ne peut pas créer… mais à quel point il est élégant et sophistiqué ressentir sur l'écran? C’est ce dont nous parlons lorsque nous discutons d’une typographie inspirante. En utilisant une mise en page simple et bien structurée, le concepteur parvient à exprimer un sentiment de confiance et de professionnalisme avant même que le visiteur ne lise le texte..
Parfois, une conception nécessite quelque chose d'extraordinaire pour capter l'attention du visiteur. C'est ce que le site d'Amazee Labs fait si bien. Amazee a choisi non seulement de ne pas utiliser les polices Web standard, mais également de combiner les types de jeu HTML aux types basés sur des images pour offrir un niveau élevé de créativité et d’enthousiasme. À bien des égards, Amazee enfreint les règles… mais c'est la façon dont ils le font qui le fait briller:
Tout cela aide à préserver le sens de l’ordre, même lorsque la sélection du type est omniprésente sur la carte..
Le site Finch est étonnamment minimal dans son utilisation. Ne vous fiez pas à l’énorme logo de la page de couverture… tout dans cette conception est sobre (dans le bon sens).
La chose à propos de l'utilisation du texte sur une page vierge est que, lorsqu'elle est faite correctement, la page donne l'impression qu'il y a beaucoup plus de choses qui se passent que du texte..
Nous avons mentionné Image Mechanics dans notre article Yearly Web Design Trends, mais il est bon de le rappeler car il est génial. La conception s'écarte du paradigme standard de navigation de l'interface utilisateur en faisant des blocs de texte réels la navigation (par opposition aux mots ou boutons simples). Cela attire le visiteur, en lui rappelant qu'il existe des idées réelles derrière chaque lien. Le contenu réel du corps de la conception est également remarquablement bien conçu: il ressemble presque à un magazine, avec un texte en-tête large et gras, des illustrations bien appariées et de subtils changements de couleur (un peu comme les tons directs dans un zine imprimé). J'aime aussi l'énorme logo sur leur page "Meet the Makers"!
Très bien, je vous avouerai que je suis immédiatement séduit par l'énorme illustration sexy avec une roue de couleurs très sexy… à tel point que la typographie pourrait même être horrible sans elle (ce n'est pas le cas) et que je ne l'aurais probablement pas remarqué. Ce que j'essaie de dire avec celui-ci est qu’une bonne association entre l’image et le type (par la taille, le style, la couleur, etc.) peut faire des merveilles pour créer un design de site mémorable. Vous voulez faire une impression durable? Prenez des notes sur l'approche audacieuse de Kaléidoscope.
Le site Fe.rocious est un exemple où chaque partie du site se sent "conçue". C’est-à-dire que rien n’a été laissé au style par défaut pour les paramètres du navigateur… Cela peut souvent être une mauvaise chose si ce n’est pas bien fait, mais entre les mains des concepteurs de Fe.rocious, il est élégant et stylé.
Je ne vais pas en dire trop sur ce design parce que je pense qu'il parle assez bien pour lui-même. L'utilisation de la présentation et des types est assez ordinaire, mais ce qui devient intéressant se trouve dans les grandes images utilisées dans le curseur. Rappelez-vous que la typographie Web peut également exister dans les images… la création d'un style visuel distinct pour une typographie basée sur une image peut apporter beaucoup à une mise en page ordinaire..
Je serai le premier à admettre que j'adore les polices de caractères condensés sans serif… mais elles peuvent aller si mal si elles ne sont pas utilisées correctement. Ici, ils occupent le devant de la scène, à la croisée d’un titre et d’une police d’accentuation. Le résultat: juste la bonne quantité de cris. L'intégration de la police de script fantaisie aide également à apporter un peu de style aux formes rigides du visage Gothique de la Ligue. Remarquez comment les deux polices s'équilibrent. Bien? Oui c'est génial.
La structure du site Infinvision est simple et modérée… ce qui permet de souligner et d’attirer l’attention sur les fantastiques petites illustrations typographiques qu’ils utilisent pour présenter leur entreprise. L'espace blanc fonctionne étonnamment bien ici - dit Nuff.
King Size est le seul modèle de cette liste. Ce qui me plait dans la typographie, c’est qu’il n’est pas du tout un thème WordPress. Le grand ruban, combiné au laurier, confère à cette impression une esthétique à la fois sévère et romaine… ce que l’on ne voit pas souvent (voire pas du tout) dans les modèles qui semblent généralement rigides et prévisibles.
Le logo de Devin's Heaven est génial, mais ce que j’aime vraiment beaucoup sur ce site, c’est la manière dont il est présenté pour les billets de blog. Le paragraphe d'introduction a la largeur totale et le reste des articles reprennent l'approche standard du contenu / barre latérale à 2 colonnes. C'est si simple… mais ce paragraphe d'introduction de largeur totale donne l'impression que toute la page est dédiée à cet article. Là où d'autres mises en page de blog se sentent comme des modèles dans lesquels les articles s'intègrent facilement, celui-ci sent qu'il s'agit d'abord et avant tout de l'article.
Le site de la Greater Dunnellon Historical Society est simplement amusant. Considérons d’abord le but du site: préserver l’histoire de Dennelon pour la communauté. En tant que telle, la typographie du site reproduit une grande partie des caractéristiques de la société qu’elles préservent. Il n’ya rien de sauvage et de fou… mais tout, de la copie de corps inspirée par un journal aux multi-colonnes aux boutons, donne l’impression que l’histoire soit authentique (avec quelques mises à jour modernes). Les moulures, les illustrations fantaisistes et les étagères ajoutent la profondeur nécessaire pour que ce site devienne vraiment une mini-capsule temporelle pour cette communauté..
La présentation du site de Stuart Hobday est une véritable bouffée d’air pur après avoir examiné certains de ces sites extrêmement illustratifs. Son approche minimaliste sévère semble simple et sans prétention. Tout est placé logiquement et sans fioritures… ce qu'un designer peut faire parfois Moins en dit beaucoup plus sur sa maturité et sa discipline. Dans un monde de portefeuilles extravagants et de concurrence féroce, il faut beaucoup de confiance en soi et de vision pour réussir un design aussi discret que celui-ci..
Nous avons couvert le nouveau site de Ryan dans notre article de 2011 sur les tendances Web, mais honnêtement, il est assez génial pour le mentionner à nouveau. Ryan combine parfaitement le texte et l’illustration dans un magnifique site de défilement vertical. L'effet combiné en est un qui crée un sens de l'aventure et de l'exploration créative… qui fonctionne parfaitement comme méthode de promotion pour lui-même auprès de clients potentiels..
Le site de Pat Dryburgh contraste avec celui de Ryan Scherf… mais pas dans le mauvais sens. Pat utilise une structure structurelle rigide et bien conçue, une sélection de caractères sophistiquée et un mélange intéressant d'espaces positifs et négatifs pour créer une esthétique globale confiante et professionnelle. J'aime particulièrement les grandes colonnes d'espaces blancs situées à gauche des grandes zones de texte (sous l'image principale). Aurait-il pu remplir cet espace avec quelque chose? Bien sûr… mais ce qu'il a décidé de laisser en dehors de la conception en dit long sur sa contrainte en tant que designer.
Eh bien, c'est encore l'heure du poste. Nous avons eu des éclats de rire, des cris, mais ensemble, nous sommes parvenus à la conclusion et je dois vous quitter. Comme je l'ai mentionné ci-dessus, si je n'ai pas frappé votre préféré ce mois-ci, assurez-vous de le partager ci-dessous dans la section commentaires! Je vais être sûr de vérifier pour le post le mois prochain!
Pour en savoir plus sur la typographie Web, consultez mon article sur Choisir la bonne police: Guide pratique de la typographie sur le Web.!
Nous avons également commencé une excellente liste d'articles dans la catégorie Web Typographie… alors consultez-les aussi!
Accentsconagua