Share
Typekit a récemment repensé sa page d'accueil avec quelques nouveaux services à l'esprit. Lorsque Typekit a rejoint Adobe, ils ont décidé de nous proposer un nouveau moyen de gérer les polices sur le Web. Non seulement ils ont créé un moyen assez simple d’incorporer des polices sur le Web, mais ils ont maintenant officiellement lancé une option de synchronisation de bureau, qui permet aux abonnés de Creative Cloud de synchroniser les polices sur leur ordinateur directement à partir de Typekit. Cela existe depuis un certain temps déjà en version bêta et offre un chemin beaucoup plus facile vers les polices locales que de les trouver ailleurs!
Avertissement: cet article n'a en aucun cas été approuvé par Adobe ou les membres de l'équipe Typekit (nous espérons toujours qu'ils l'aimeront bien).
Cet article va parler exclusivement de la nouvelle page d'accueil Typekit et vous donner quelques détails sur l'implémentation utilisée pour créer les éléments marketing..
Comme c'est le cas dans notre série Comment ils l'ont fait, nous commenterons également les décisions artistiques et technologiques et ouvrirons la discussion à une conversation critique constructive..
Nous allons aussi essayer d'éviter toute allitération.
Typekit existe depuis un certain temps et était assez en retard pour un rafraîchissement. Voici à quoi cela ressemblait auparavant:
Bien que ce soit une page d'accueil parfaitement bien, il était légèrement daté. Avec cette nouvelle conception, Typekit utilise un contexte centré graphiquement pour afficher les polices aux côtés des personnes et des entreprises utilisant le service. À l'aide de requêtes multimédias, la page de destination conserve en grande partie la plupart de ses éléments de conception et de contenu principaux jusqu'au mobile. Voici à quoi ça ressemble maintenant.
Quelques décisions de conception importantes caractérisent la version de bureau de cette conception. L'effet résultant donne aux visiteurs le sentiment que le design est littéralement prêt à l'emploi. Nous en voyons la preuve sur tout le site.
Tout d'abord, nous voyons les captures d'écran de l'application dans l'en-tête de la page, sous le titre "Chaque police dont vous avez besoin. Partout où vous en avez besoin." (En passant, nous en reparlerons plus tard.) Les pnng de cercle nous donnent trois arguments marketing directement liés au service: "Des milliers de polices", "Fournies par Creative Cloud", "Choisissez votre support". Ces trois idées sont immédiatement accessibles à la plupart des concepteurs, car la plupart des concepteurs sont désormais familiarisés avec Creative Cloud et que tous les concepteurs connaissent bien les polices et les périphériques..
Le choix des cercles établit immédiatement l’évitement d’une interface carrée. La taille des cercles augmente de gauche à droite, donnant une impression de mouvement et de progrès. Aucun des cercles ne peut être utilisé. Il convient également de noter que c’est également la seule présence de cercles sous forme graphique sur la page..
Il existe de nombreuses tendances à surveiller au cours de cette année, et l’utilisation des panels en est une. Nous avons assisté à la montée en puissance de cette interface lorsque des plugins tels que jQuery Masonry sont entrés en scène et que Pinterest les a popularisés en tant qu'élément interactif principal. Typekit utilise des panneaux dans six "groupes" distincts sur la page, chaque groupe ayant son propre contenu..
Le premier cluster montre les polices de caractères elles-mêmes et le second cluster montre les clients qui utilisent Typekit:
Le troisième cluster montre quels types de travail vous pouvez utiliser avec Typekit maintenant que vous pouvez synchroniser avec votre bureau local.
Le quatrième cluster explique les prix de Typekit.
Le cinquième groupe contient en fait une sélection FAQ de panneaux n'utilisant pas de couleur d'arrière-plan mais utilisant uniquement la typographie et l'iconographie..
Enfin, le sixième groupe constitue le "pied de page" du site Web. Il contient des informations sur le droit d'auteur et des liens vers des destinations communes liées à Typekit..
Ces groupes constituent les principaux éléments d'intérêt de la mise en page. Ils présentent un alignement décalé unique qui apporte clarté et séparation, tout en favorisant la rupture avec une mise en page plus courante composée d'éléments naturellement alignés verticalement. Tous les panneaux ayant un arrière-plan sont décalés de la moitié de la hauteur d’un panneau, en utilisant une symétrie prévisible. (La seule exception à cet étonnant est le groupe de prix, qui forme une forme +). Cette prévisibilité permet à ces blocs de former une forme; par exemple, le premier ensemble de blocs forme un losange, tandis que le troisième ensemble forme une ligne diagonale du haut à gauche au bas à droite.
Voyons comment cet effet est obtenu.
Voici le balisage pour le premier cluster:
LES MEILLEURS SONT SUR TYPEKIT
Superbes caractères de fonderies de qualité. Inspirant à parcourir et facile à utiliser.
Parcourir toutes les polices
AW conquérant sculpté
Typofonderie
Disponible en plusieurs styles, notamment en ligne et «Carved», AW Conqueror est une face titrante aux multiples talents dont les composants chromatiques répondent puissamment aux superpositions..
Voir: Superposition de polices Web chromatiques
Proxima Nova
Mark Simonson Studio
Combinant des caractéristiques géométriques avec des proportions humanistes, Proxima Nova fonctionne dans de nombreux contextes différents grâce à sa variété de poids et de largeurs..
Nouvelles Gothic Std
Adobe
Un classique des titres de journaux, de la publicité et de l'emballage, le News Gothic original a été conçu en 1908 et s'habille parfaitement sur le Web aujourd'hui..
Voir: Ombrage avec CSS
LES MEILLEURS SONT SUR TYPEKIT
Ne vous souciez jamais de la qualité des caractères, des sources et des licences. La police que vous voulez, n'importe où, n'importe quand.
Parcourir toutes les polices
Futura PT
ParaType
Futura, le sans géométrique par excellence, a inspiré des générations de concepteurs grâce à ses fonctionnalités audacieuses et a été préparé de manière experte pour le Web par ParaType..
Brandon Grotesque
Polices HVD
Brandon Grotesque est élégant et chaleureux, avec de longues descendantes et des fins de course arrondies. Idéal pour les affichages de grande taille ou pour une copie accrocheuse..
Kulturista Web
Type de valise Fonderie
Kulturista Web est un serif de dalle robuste approprié pour les titres, les sous-titres et la navigation, disponible en cinq poids avec italique.
Minion Pro
Adobe
Minion est une police Adobe Originals inspirée des conceptions classiques de la fin de la Renaissance, une période élégante, belle et hautement lisible..
Voir: Liste: Bon pour longform
FF Meta Serif Web Pro
FontFont
FF Meta Serif est mince et lisible, avec un excellent équilibre et de charmantes idiosyncrasies. Il se met bien seul ou avec une variété d'autres caractères.
Voir: Association de caractères
Klavika
Type de processus Fonderie
Disponible directement auprès de Process Type Foundry, Klavika fait preuve d'une flexibilité infinie et d'un mélange d'influences humanistes et géométriques..
Voir: Apportez votre propre licence
Outre les URL masquées de la bibliothèque d'actifs (générées par le pipeline d'actifs Ruby on Rails), le balisage est relativement simple. Voici un exemple condensé:
L'élément d'en-tête n'apparaît qu'en dessous de 980px. En utilisant une largeur de conteneur de 940 px, les blocs sont des carrés de 300 x 300 px. En utilisant éléments pour les blocs, le décalage est accompli en ajoutant un sommet de la marge au
.blocs> ul.offset-half margin-top: 150px; .blocks> ul.offset-full margin-top: 300px; .blocks> ul.offset-trois-moitiés margin-top: 450px;
Il existe également quelques classes de décalage qui tirent les colonnes du bord de la grille..
.blocs> ul.overflow-left position: absolute; à gauche: -280px;
L’exception à cette règle est la FAQ, qui comporte quatre colonnes au lieu de trois..
Sur beaucoup de panneaux eux-mêmes, nous voyons l'utilisation d'un "rideau". En survolant l'élément, un rideau se déplace ou apparaît, révélant un contenu pertinent pour le panneau lui-même. Il en résulte une interface qui invite à l'exploration et à la recherche. Ces interactions reposent sur des transitions CSS déclenchées par le survol et des éléments parfaitement positionnés à l'intérieur d'éléments relativement positionnés..
Regardons comment nous pourrions y arriver.
Nous avons deux types de rideaux de base: le rideau superposé et le rideau à glissière.
Nous voyons le balisage suivant pour un seul panneau de chaque type.
Voir: Liste: Bon pour longform
Les concepteurs de Paravel s'attachent à apporter une qualité de conception sensible aux sites Web de leurs clients avec un code solide, une attention particulière portée aux détails visuels et un excellent type..
Nous allons ensuite configurer nos différentes transitions en vol stationnaire.
/ * Rideau à glissière * / #who li.paravel background-image: url (/assets/newhome/who/paravel-ce782f6791c64eee5bf74b72986bceb9.jpg); #who li div height: 220px; text-align: left; couleur de fond: rgba (0,0,0,0,8); filtre: progid: DXImageTransform.Microsoft.Alpha (Opacity = 0); opacité: 0; -webkit-transition: opacité, 15s linéaire; -moz-transition: opacité, linéaire, 15s; -o-transition: opacité 0,15 s linéaire; transition: opacité, 15 s linéaire; rembourrage: 40px; #who li: hover div filtre: variable: DXImageTransform.Microsoft.Alpha (Opacité = 100); opacité: 1; / * Rideau de fondu * / #best li position: relative; couleur de fond: # 323232; débordement caché; text-align: left; #best li img left: 0; position: absolue; z-index: 1; -webkit-transition: à gauche .1s cubic-bezier (0,0,0,4,1); -moz-transition: gauche .1s cubic-bezier (0,0,0,4,1); -o-transition: gauche .1s cubic-bezier (0,0,0,4,1); transition: gauche .1s cubes-bezier (0,0,0,4,1); #best li: survoler img left: -280px;
Les survols sur les éléments du panneau li déclenchent les transitions sur les éléments enfants du li lui-même.
À la taille du mobile, la disposition change de manière significative. Nous voyons un léger changement dans le système de navigation, ramenant le badge Adobe vers le haut et déposant les principaux éléments sur la seconde barre pour leur permettre de se déplacer sous le logo Typekit. Nous perdons les cercles dans l'en-tête et nous nous retrouvons avec les trois points marketing comme sous-en-tête. Nous voyons ensuite notre contenu divisé en six sections distinctes, y compris le pied de page. Un en-tête vert est attaché à ces sections, suivi de ce qui était auparavant nos panneaux. Les panneaux ont maintenant été déplacés dans une liste à défilement horizontal. Bien entendu, cela signifie que l'effet décalé n'apparaît pas sur le mobile.
Ensuite, nous verrons comment le CSS est écrit pour les panneaux à défilement horizontal, par opposition aux panneaux décalés..
N'oubliez pas que nous montrons l'en-tête sur le mobile et que les panneaux eux-mêmes doivent défiler horizontalement. Nous y parvenons avec seulement quelques lignes de CSS:
@media (max-width: 979px) section # best .blocks width: 2700px; en-tête de section display: block; section .container .blocks> ul float: left; marge supérieure: 0! important; largeur: auto; section .container .blocks> ul> li float: left;
Ce motif aligne essentiellement tous les panneaux de blocs horizontalement, avec une largeur totale de 2700px pour cette section..
Nous définissons également l'élément conteneur (#contenu) déborder caché.
#content overflow: hidden;
Cela permet à la .des blocs l’élément doit être plus large que l’écran sans que le corps du document ne s’étende au-delà de la largeur naturelle de 100%, ce qui rend le défilement horizontal discret à partir du reste de la page.
Sur les mobiles et aux largeurs de tablette, nous voyons également un pied de page plus traditionnel prenant la place du pied de page piloté par le panneau..
Il est intéressant de noter que pratiquement aucun JavaScript n’est exécuté sur la page. Le gros de l’exécution de JavaScript est lié aux polices Typekit utilisées sur la page..
S’appuyant sur un nombre impressionnant de pages marketing apparues au cours des dernières années, Typekit a choisi de ne pas utiliser le défilement pour les déclencheurs d’animation ni pour les déclenchements de type parallaxe. Bien que nous ne puissions pas dire précisément pourquoi cette décision a été prise, cela pourrait signaler un retour à une interaction moins chargée basée sur le pointage direct de la souris et un basculement vers une nouvelle tendance..
Le choix de la police de titre. Les polices de titre semblent être un choix étrange, étant donné le choix des polices de caractères sur le reste de la page. Les polices dactylographiées et cursives possèdent une quantité considérable de caractéristiques d’affichage que l’on pourrait s’attendre à trouver dans un éditorial interactif ou un site de promotion de films..
Les placer au sommet de Typekit n’est acceptable qu’en raison de la nature du produit offert par Typekit. Pourtant, cela semble être l'élément de conception le plus discutable.
Problèmes de rétine. Bien qu'une grande partie des images paraisse nette, les PNG de cercle situés dans l'en-tête sont très clairement pixellisés sur les écrans de la rétine. Cela confère au produit une sensation moins raffinée que celle attendue d'un produit Adobe. Il rappelle également l'adoption récente par Adobe des graphiques de rétine pour Photoshop et leurs autres applications de bureau. Les icônes de la section FAQ constituent une autre occasion manquée d’utiliser Vector, bien que cela soit beaucoup moins perceptible..
Dans l’ensemble, la nouvelle page de renvoi de Typekit est une exécution unique et raffinée d’un rafraîchissement de la présence sur le Web qui accompagne un changement dans les offres de produits. Avec un flux de contenu convaincant et une direction artistique bien exécutée, la simplicité des interactions pour ce site améliore l'efficacité du discours de vente..
Qu'avez-vous trouvé particulièrement convaincant avec cette page? Quelles parties du projet souhaiteriez-vous en savoir plus? Discutons-en dans les commentaires!
Accentsconagua