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..
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.
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..
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..
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
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.
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.
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
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..
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..
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.
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
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
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
elemento. Pero no queremos agregar el mismo margen a todas las columnas; en su lugar, esto se logra a través de algunas clases de compensación.
.bloques> ul.offset-half margin-top: 150px; .blocks> ul.offset-full margin-top: 300px; .blocks> ul.offset-three-half margin-top: 450px;
También hay algunas clases de desplazamiento que sacan las columnas del borde de la cuadrícula.
.bloques> ul.overflow-left posición: absoluta; izquierda: -280px;
La excepción a esto es el FAQ, que tiene cuatro columnas en lugar de tres.
En muchos de los paneles reales, vemos el uso de una "cortina". Cuando se desplaza sobre el elemento, una cortina se mueve o aparece, revelando contenido relevante para el propio panel. Esto da lugar a una interfaz que invita a la exploración y la investigación. Estas interacciones se basan en las transiciones CSS activadas por elementos flotantes y posicionados absolutamente dentro de elementos relativamente posicionados.
Veamos cómo podemos lograr esto..
Tenemos dos tipos básicos de cortinas: la cortina superpuesta y la cortina deslizable..
Vemos el siguiente marcado para un solo panel de cada tipo..
Ver: Lista: Bueno para forma larga
Los diseñadores de Paravel se enfocan en brindar un diseño de calidad y respuesta a los sitios web de sus clientes con código sólido, atención profunda a los detalles visuales y excelente tipo.
A continuación, vamos a configurar nuestras diferentes transiciones en el hover.
/ * Slide Curtain * / #who li.paravel background-image: url (/assets/newhome/who/paravel-ce782f6791c64eee5bf74b72986bceb9.jpg); #who li div altura: 220 px; alineación de texto: izquierda; color de fondo: rgba (0,0,0,0.8); filtro: progid: DXImageTransform.Microsoft.Alpha (Opacidad = 0); opacidad: 0; -webkit-transición: opacidad .15s lineal; -moz-transición: opacidad .15s lineal; -o-transición: opacidad .15s lineales; transición: opacidad .15s lineal; relleno: 40px; #who li: hover div filter: progid: DXImageTransform.Microsoft.Alpha (Opacity = 100); opacidad: 1; / * Fade Curtain * / #best li position: relative; color de fondo: # 323232; desbordamiento: oculto; alineación de texto: izquierda; #best li img left: 0; posición: absoluta; índice z: 1; -webkit-transición: izquierda .1s cubic-bezier (0,0,0.4,1); -moz-transición: izquierda .1s cubic-bezier (0,0,0.4,1); -o-transición: izquierda .1s cubic-bezier (0,0,0.4,1); transición: izquierda .1s cubic-bezier (0,0,0.4,1); #best li: hover img left: -280px;
Los elementos situados en el panel de li activan las transiciones en los elementos hijos del propio li.
En tamaño móvil, el diseño cambia significativamente. Vemos un ligero cambio en la navegación, que lleva la insignia de Adobe hacia arriba y coloca los elementos primarios en la segunda barra para permitir que se muevan debajo del logotipo de Typekit. Perdemos los círculos en el encabezado y, en cambio, nos quedamos con los tres puntos de marketing como subtítulo. Luego vemos nuestro contenido dividido en seis secciones separadas, incluido el pie de página. Cada una de estas secciones tiene un encabezado verde adjunto, seguido de lo que anteriormente eran nuestros paneles. Los paneles ahora se han cambiado a una lista de desplazamiento lateral. Esto, por supuesto, significa que el efecto escalonado no aparece en el móvil..
A continuación, veremos cómo se escribe el CSS para los paneles de desplazamiento lateral, en contraste con los paneles escalonados..
Recuerde, estamos mostrando el encabezado en el dispositivo móvil, y los paneles deben desplazarse horizontalmente. Esto lo logramos con unas pocas líneas de CSS:
@media (max-width: 979px) section # best .blocks width: 2700px; encabezado de sección pantalla: bloque; sección .container .blocks> ul float: left; margen superior: 0! importante; ancho: auto; sección .container .blocks> ul> li float: left;
Este patrón esencialmente alinea todos los paneles de bloques horizontalmente, con un ancho total de 2700px para esta sección.
También configuramos el elemento que contiene (#contenido
) para desbordar oculto.
#content desbordamiento: oculto;
Esto permite la .bloques
El elemento es más ancho que la pantalla sin que el cuerpo del documento se expanda más allá del 100% del ancho natural de la pantalla, lo que hace que el desplazamiento horizontal ocurra discretamente desde el resto de la página..
En dispositivos móviles y en anchos de tableta, también vemos un pie de página más tradicional que toma el lugar del pie de página de unidad de panel..
Es interesante notar que casi no hay JavaScript ejecutándose en la página. La mayor parte de la ejecución de JavaScript está relacionada con las fuentes Typekit utilizadas en la página.
Rompiendo con un número masivo de páginas de marketing que han aparecido en los últimos años, Typekit optó por no usar el desplazamiento para los activadores de animación o los activadores de tipo paralaje. Si bien no podemos decir específicamente por qué se tomó esta decisión, podría indicar un retorno a una interacción menos ocupada basada en el puntero del mouse directo, y un cambio hacia una nueva tendencia..
La elección de la fuente titular. Las fuentes de los titulares parecen ser una opción extraña, dada la elección de los tipos de letra en el resto de la página. Las tipografías de losa y cursiva están imbuidas de una cantidad considerable de características de visualización que uno podría esperar encontrar en un editor interactivo o en un sitio promocional de películas..
Tenerlos en la parte superior de Typekit solo es aceptable debido a la naturaleza del producto que ofrece Typekit. Aún así, este parece ser el elemento de diseño más cuestionable..
Problemas de retina. Aunque muchas de las imágenes parecen nítidas, las PNG circulares en el encabezado están muy claramente pixeladas en las pantallas de retina. Esto hace que el producto se sienta menos refinado de lo que se esperaría de un producto de Adobe, y es un recordatorio de la adopción tardía en el juego de los gráficos de retina para Photoshop y sus otras aplicaciones de escritorio. Los íconos en la sección de preguntas frecuentes son otra oportunidad perdida para usar vector, aunque esto es mucho menos notable.
En definitiva, la nueva página de inicio de Typekit es una ejecución pulida y única de una actualización en presencia web que acompaña a un cambio en las ofertas de productos. Con un flujo de contenido convincente y una dirección artística bien ejecutada, la simplicidad de las interacciones para este sitio mejora la efectividad del argumento de venta..
¿Qué encontraste para ser particularmente atractivo con esta página? ¿Sobre qué partes del proyecto te gustaría saber más? Vamos a discutirlo en los comentarios.!