Share
Prêt pour la dose de génialité typographique du web design de ce mois-ci? Je parie que vous l'êtes! Connor prend les devants ce mois-ci avec Brandon faisant quelques vérifications de sauvegarde - et nous avons une liste de 17 sites qui présentent certaines des meilleures typographies que vous pouvez vérifier. Ce mois-ci, nous avons même une section spéciale dédiée à de nouveaux outils de mise en page et de typographie Web (ish) pour vous simplifier la vie. Creusons!
Parler des règles techniques d'une bonne typographie, c'est bien? Mais le bon moment est bien choisi pour commencer à regarder des exemples de typographie en action et à analyser pourquoi cela 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? à vous de décider comment 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:
SquareSpace a en fait une histoire de typographie bien conçue sur leurs sites, mais ils ont tout mis en œuvre pour l’événement SXSW de cette année. Le contenu du site est entièrement consacré aux personnes postant des photos dingues de l'événement, mais jetez un autre regard sur la qualité de sa présentation. Magnifiquement mis les gros titres? beaucoup de variété dans la mise en page? et des images / textures d’arrière-plan subtiles qui font référence à la typographie ancienne. L'illustration du crâne ultra moderne et branchée ne fait pas mal non plus.
Le site n’est pas énorme, certains SS ont bien fait de garder les choses fraîches et intéressantes lorsque vous faites défiler la page. Si vous y prêtez attention, il n'y a pas vraiment de standard établi pour la typographie (au-delà des mêmes familles de polices) - les tailles sont partout et le placement également? Mais c’est parfaitement acceptable dans ce cas car chaque section (celle visible sur un écran au même point) fonctionne en harmonie avec elle-même. Les couleurs sont toutes de la même palette générale, et tout se sent comme si il était articulé sur une grille, même si vous ne pouvez pas tout à fait le clouer..
Grip Limited est l'un de ces sites que vous visitez de temps en temps et qui est tellement incroyable qu'il vous suffit de vous asseoir et de le regarder pendant une minute ou deux. J'ai l'impression étrange que le simple fait de regarder cela fait de moi un meilleur typographe. La variété typographique est si diversifiée que sans la palette monochrome unificatrice, le site serait probablement difficile à regarder. Zut, la plupart des experts en ergonomie pourraient dire que c'est une saleté totale, même dans son état actuel, mais je dirai que ce genre d'approche amusante et "à la fusée" est exactement ce à quoi les concepteurs Web doivent se livrer de temps à autre.
Serez-vous recycler cette mise en page à plusieurs reprises pour des projets d'entreprise ou d'entreprise? Bien sûr que non, mais prendre un peu de texte sur ce site ferait des merveilles pour pimenter un projet ordinaire sur lequel vous pourriez travailler. Par exemple?
Burton est un peu à l’opposé du site Grip Limited. Il est hautement organisé, installé dans un agencement de bloc rigide et facile à utiliser. Regardez de plus près et vous pouvez probablement voir ce que j'ai placé ces deux sites ensemble dans cette liste. Bien que la structure elle-même soit assez bien verrouillée en termes de structure, la typographie actuelle sur le site est loin de ce que vous voyez normalement sur le Web - et ressemble beaucoup à ce que vous pourriez voir dans un magazine ou un catalogue de snowboard. Le type est défini entre des cercles et d’autres formes Web inhabituelles afin de donner à chaque page un intérêt visuel suffisant. Ils ont également dispersé des informations graphiques et autres illustrations simplifiées dans des blocs de grille ordinaires pour rompre la monotonie et le rythme de chaque page..
Cette version du site Burton existe depuis un moment? et pourtant, il se sent toujours neuf et frais à chaque fois que je vérifie. En échangeant simplement les photos et les couleurs principales, ils peuvent obtenir beaucoup plus de kilométrage du site à chaque nouvelle saison.
Impact Media utilise différentes polices, couleurs et tailles dans son curseur principal et sur son site Web. Comme la police - Impact - le choix de la typographie sur ce site est audacieux, les grandes polices contrastent beaucoup avec leurs arrière-plans..
J'adore le style actuel de polices de script en gras sur le Web et Impact Media l'utilise dans sa deuxième ligne pour générer un effet charmant et accueillant..
Gaz Battersby est un graphiste basé à Leeds, au Royaume-Uni, dont le site minimaliste fait office de portefeuille. Le site utilise une police empattée dans toute sa conception, mais ne contraste que par le changement de style de police (en italique) et non par une nouvelle police. Cela se traduit par un schéma de typographie plus simple et plus propre.
Le site de Battersby utilise également la couleur pour créer une héritage, ses titres étant entourés de cercles turquoises pour attirer l'attention de l'utilisateur..
Je ne parlerai pas beaucoup de SURROUND car, eh bien, il n’ya pas grand chose à dire. Cela rappelle que parfois, une approche simple de la mise en page et de la typographie fonctionne parfaitement. Pas de fioritures inutiles, rien entre le visiteur et le contenu. Juste des techniques de fonctionnement simples qui transmettent un message.
Invisible Creature est en fait l'un de mes studios préférés dans le monde? remonter au moment où ils ont été associés à Asterik Studio. Longue histoire courte: ils créent des affiches impressionnantes, des illustrations d'albums et d'autres objets amusants. Ce que j'aime sur ce site, c'est le contrôle et la discipline. En tant que studio "rock / métal" de premier plan, ils pourraient tout aussi bien concevoir un site adapté à cet aspect de leur travail: sauvage, abrasif, chaotique. Au lieu de cela, ils ont opté pour des lignes épurées, des couleurs simples et des polices sans empattement, ce qui permet finalement à leur travail de parler de lui-même..
Feed Me est une conception Web d'une page qui utilise la typographie pour créer un jeu de couleurs net sur toute la page. Le contraste entre sa police standard et une police plus audacieuse, de style pinceau, crée une héritage simple qui met l’accent sur les termes clés..
Feed Me a ses propres mérites en tant que conception de site Web et la typographie est un ingrédient essentiel de son succès. Les polices vertes incurvées sont en harmonie avec le thème de la conception de sites Web que j'aime beaucoup..
Il est difficile de déterminer la raison exacte de l'effet généré par le site de ce graphiste, mais je sais que c'est un excellent!
Obtenez mon patron à North Cape est un site intéressant. Une société belge de conception de sites Web, à savoir Inventis, essaie de tirer parti d’un cycle impressionnant de 545 km afin d’obtenir quelques ajouts similaires à ceux de Facebook. Le site Web lui-même utilise une gamme intéressante de typographies et utilise la couleur pour souligner les parties les plus importantes de chaque énoncé (par exemple, "5 000 mentions J'aime" et "vélo 545 km")..
La couleur du texte sur cette page correspond au fond sur lequel il se trouve, comme indiqué dans le texte marron utilisé sur la signalisation du titre. Inventis utilise également l'ombrage interne pour distinguer le texte de son arrière-plan dans les cas où cela est nécessaire, mais pas là où il ne l'est pas (comme les jalons sur la piste cyclable)..
À l'instar du site de Gaz Battersby, Wes Bos utilise peu de polices de caractères différentes dans sa conception et opte plutôt pour l'utilisation d'un fond de ruban sur ses éditeurs pour créer sa hiérarchie. Très simplement, j'aime le contraste entre la police de script et la police serif et l'accent mis sur les majuscules sur ses titres d'emploi..
Bien qu'il ne s'agisse pas d'un nouveau site, le logo HTML5 du W3C reste un excellent exemple de bonne typographie en jeu, et ce pour plusieurs raisons, notamment l'utilisation d'une belle police de caractères gras et condensés dans les titres qui correspond à celui de la page..
Les paragraphes sur la page sont également espacés de manière appropriée pour une lecture plus facile pour l'utilisateur final.
Comme vous pouvez probablement le deviner à partir de la capture d'écran, ce n'est pas un nouveau site. Cependant, il a continué à apparaître à une si grande fréquence dans les rafles de typographie, je le considérerais comme une omission flagrante si je choisissais de ne pas l'inclure. Chrip était la conférence officielle des développeurs de Twitter qui s'est déroulée à peu près à la même époque l'année dernière.
Une fois, j’ai appris une règle de base en matière de typographie: n’utilisez pas plus de trois polices. Tandis que Chrip dégage une impression d’activité (quelque chose que vous voulez vraiment créer pour une conférence), je ne compte que trois polices différentes utilisées si l’on ignore le logo..
J'aime particulièrement le titre dans le portefeuille de Jeremy Church. L'accent mis sur "le" a l'air génial mais attire plus l'attention sur un objectif principal de "réduire le bruit". En plus de ses titres audacieux et ombrés, le reste du dessin utilise une police sans empattement très simpliste qui attire davantage l’attention sur le contraste principal..
Black Ant Media utilise une gamme de visages très lisses qui ont l’air incroyable, mais il est difficile de comprendre pourquoi. Black Ant Media choisit d'utiliser la même police au lieu de plusieurs et ne fait varier que la taille, la couleur et le poids afin de distinguer les protubérances des différents éléments..
Comme certains exemples, Black Ant Media utilise également des arrière-plans colorés au lieu d’être redimensionnés pour redimensionner les titres dans sa hiérarchie visuelle..
Premium Pixels est un thème WordPress qui fait la liste en raison de sa pertinence par rapport aux normes de typographie actuelles abordées dans le récent article de Brandon sur la typographie. L'arrière-plan bruyant contraste avec le texte de la page grâce à une ombre de texte blanche qui lui donne une impression de profondeur. Chaque publication de la page est également intitulée avec une police de caractères compacte et en gras..
Chacun des articles de ce thème WordPress comporte un grand interligne, ce qui rend la lecture beaucoup plus facile et l'éthique du remplissage est évidente pour tous les éléments de la page..
Subtilement, il y a aussi un visage empatté jeté entre les méta-données de chaque poste.
À noter que la nouvelle refonte du site Web d’Orman Clark mérite également d’être mentionnée sur cette liste, car elle illustre certains grands principes de mise en page typographiques. Propre, simple et bien organisé. voici quelques captures d'écran:
Les concepteurs Web parlent beaucoup de recréer "l'esthétique de l'impression" sur le Web? mais généralement, les concepteurs pensent que cela signifie simplement utiliser des textures riches, des schémas whacky non structurés et de nombreuses ombres de coin ou trompe l'oeil effets. Les concepteurs se rappellent rarement que la typographie imprimée est souvent aussi structurée que le type sur le Web. Pelicanfly fusionne le meilleur des deux mondes (à mon avis) en utilisant des structures de colonnes simples, des symboles typographiques et des effets CSS contemporains pour créer un site mémorable. Je suppose que cela a également été conçu pour les tablettes, car dans certains cas, vous devrez retourner votre écran pour lire.
Outil gratuit: C'est un outil assez nouveau que j'ai rencontré l'autre jour. Cela vous permet essentiellement de bricoler la typographie de base d'un projet jusqu'à ce que tout soit parfait - puis de cracher le CSS (3) qui génère le style que vous avez créé. Je suis sûr qu'il existe une poignée d'applications Web similaires, mais celle-ci m'a semblé être l'une des plus précieuses simplement en raison de la quantité énorme de bricolage que vous pouvez faire et de sa facilité d'utilisation.
Accentsconagua