Cómo lo hicieron la nueva página de Typekit

Typekit recientemente rediseñó su página de inicio con algunos nuevos servicios en mente. Cuando Typekit se unió a Adobe, se propusieron traernos una nueva forma de manejar las fuentes en la web. No solo crearon una forma bastante sencilla de incrustar fuentes en la web, sino que ahora han lanzado oficialmente una opción de sincronización de escritorio, que permite a los suscriptores de Creative Cloud sincronizar las fuentes a su computadora directamente desde Typekit. Esto ha estado en forma beta por un tiempo, y proporciona una ruta mucho más fácil a las fuentes locales que encontrarlas en otro lugar.!

Renuncia: Este artículo no fue respaldado de ninguna manera por Adobe o los miembros del equipo de Typekit (aún esperamos que les guste).

Este artículo hablará exclusivamente sobre la nueva página de inicio de Typekit y le brindará algunos detalles de la implementación utilizada para crear los elementos de marketing..

Como corresponde al curso de nuestra serie Cómo lo hicieron, también proporcionaremos algunos comentarios sobre las decisiones artísticas y tecnológicas, y abriremos la conversación para una conversación crítica constructiva..

También intentaremos evitar cualquier aliteración..


Contexto del sitio

Typekit ha existido por un tiempo, y era bastante tarde para una actualización. Esto es lo que parecía antes:


Si bien esta es una página de inicio perfectamente bien, fue un poco anticuada. Con el nuevo diseño, Typekit emplea un contexto centrado gráficamente para mostrar las fuentes junto con las personas y las empresas que utilizan el servicio. Al utilizar consultas de medios, la página de destino conserva en gran parte la mayoría de su diseño principal y elementos de contenido hasta el móvil. Esto es lo que parece ahora.



Escritorio: Círculos, paneles, escalonamientos y cortinas

Algunas decisiones de diseño importantes caracterizan la versión de escritorio de este diseño. El efecto resultante ofrece a los visitantes la sensación de que el diseño está, literalmente, fuera de la caja. Vemos evidencia de esto en todo el sitio..

Círculos

Primero, vemos las capturas de pantalla de la aplicación en el encabezado de la página, debajo del título "Cada fuente que necesita. En cualquier lugar que la necesite". (Por cierto, hablaremos de ese titular más adelante). Los pngs del círculo nos dan tres puntos de marketing que están directamente relacionados con el servicio: "Miles de fuentes", "Entregado por Creative Cloud", "Elige tu medio". Estas tres ideas son accesibles de inmediato para la mayoría de los diseñadores, ya que la mayoría de los diseñadores ya están familiarizados con Creative Cloud y, ciertamente, todos los diseñadores están familiarizados con las fuentes y los dispositivos..

La elección de los círculos establece inmediatamente la evitación de una interfaz cuadrada. Los círculos aumentan de tamaño de izquierda a derecha, dando una sensación de movimiento y progreso. Ninguno de los círculos es accionable. También se debe tener en cuenta que esta es también la única presencia de círculos como forma gráfica en la página..

Paneles escalonados

Hay muchas tendencias para monitorear durante este año, y el uso de paneles es una de ellas. Vimos el surgimiento de esta interfaz cuando los complementos como jQuery Masonry llegaron a la escena, y cuando Pinterest los popularizó como un elemento interactivo principal. Typekit usa paneles en seis "grupos" distintos en la página, cada grupo tiene su propio propósito de contenido.

El primer clúster muestra los tipos de letra y el segundo clúster muestra a los clientes que usan Typekit:


El tercer clúster muestra con qué tipos de trabajo puede usar Typekit ahora que puede sincronizar con su escritorio local.


El cuarto cluster explica el precio de Typekit..


El quinto grupo en realidad contiene una selección de paneles de preguntas frecuentes que no usan un color de fondo, y en su lugar solo emplean tipografía e iconografía.


Finalmente, el sexto grupo actúa como el "pie de página" del sitio web, con información de derechos de autor y enlaces a destinos comunes relacionados con Typekit..


Estos grupos conforman los elementos de interés del diseño principal, y tienen una alineación escalonada única que proporciona claridad y separación entre ellos, al tiempo que fomenta la separación de un diseño más común que consiste en elementos que, naturalmente, están alineados verticalmente. Todos los paneles que tienen un fondo están escalonados por la mitad de la altura de un panel, utilizando una simetría predecible. (La única excepción a este escalonamiento es el conjunto de precios, que forma una forma +). Esta previsibilidad funciona para permitir que estos bloques formen una forma; por ejemplo, el primer conjunto de bloques forma un diamante, mientras que el tercer conjunto forma una línea diagonal desde la parte superior izquierda hasta la parte inferior derecha.

Veamos cómo se logra este efecto particular.

Aquí está el marcado para el primer grupo:

LOS MEJORES SON EN TYPEKIT

Impresionantes tipografías de fundiciones de calidad. Inspirador para navegar, y fácil de usar.
Examinar todas las fuentes

  • Espécimen-a

    Conquistador AW tallado

    Tipofonderie

    Disponible en múltiples estilos, incluidos en línea y "tallados", AW Conqueror es una cara de titulación con múltiples talentos cuyos componentes cromáticos responden poderosamente a las capas.

    Ver: Acodado de fuentes web cromáticas.

  • Espécimen-qb4

    Proxima nova

    Estudio Mark Simonson

    Al combinar características geométricas con proporciones humanistas, Proxima Nova funciona en muchos contextos diferentes gracias a su variedad de pesos y anchos.

  • Espécimen-h

    Noticias Gothic Std

    Adobe

    Un clásico para titulares de periódicos, publicidad y empaquetado, el News Gothic original fue diseñado en 1908 y se viste perfectamente en la web hoy en día..

    Ver: Sombreado con CSS

  • LOS MEJORES SON EN TYPEKIT

    Nunca te preocupes por la calidad de los tipos de letra, las fuentes, las licencias. La fuente que quieras, en cualquier lugar, en cualquier momento..

    Examinar todas las fuentes

  • Espécimen-mo

    Futura PT

    ParaTipo

    Para el futuro, los sans geométricos por excelencia, ha inspirado a generaciones de diseñadores con sus características audaces, y ahora ha sido preparado por expertos para la web por ParaType..

  • Espécimen-tldr

    Brandon grotesco

    Fuentes HVD

    Brandon Grotesque es elegante y cálido, con descendientes largos y finales de trazo redondeados, un gran actor en tamaños de pantalla o para una copia llamativa..

  • Espécimen-re

    Web kulturista

    Tipo de Maleta Fundicion

    Kulturista Web es un serif robusto de losa adecuado para encabezados, subtítulos y navegación, disponible en cinco pesos con cursiva.

  • Espécimen deus

    Minion Pro

    Adobe

    Minion es un tipo de letra de Adobe Originals inspirado en los diseños clásicos de finales del Renacimiento, un período elegante, hermoso y de fácil lectura..

    Ver: Lista: Bueno para forma larga

  • Espécimen topo

    FF Meta Serif Web Pro

    FontFont

    FF Meta Serif es delgado y legible, con excelente equilibrio e idiosincrasias encantadoras. Se ajusta muy bien solo, o con una variedad de otros tipos de letra.

    Ver: emparejar tipografías

  • Espécimen-88

    Klavika

    Tipo de proceso de fundición

    Disponible directamente desde Process Type Foundry, Klavika demuestra una flexibilidad infinita y una mezcla de influencias humanistas y geométricas..

    Ver: Trae tu propia licencia.

Aparte de los URL ocultos de la biblioteca de activos (generados por el canal de activos de Ruby on Rails), el marcado es bastante sencillo. Aquí hay un ejemplo condensado:

El elemento de encabezado solo se muestra debajo de 980px. Usando un ancho de contenedor de 940px, los bloques son cuadrados de 300x300 px. Utilizando

  • Para los bloques, el desplazamiento se logra agregando un margen superior a la