Share
¿Listo para la dosis de este mes de diseño tipográfico web impresionante? Apuesto que eres! Connor está tomando la iniciativa este mes y Brandon está haciendo una curación de respaldo, y tenemos una lista de 17 sitios que muestran algunas de las mejores tipografías para que las vean. Este mes incluso tenemos una sección especial dedicada a algunas nuevas (ish) tipografías basadas en web y herramientas de diseño para hacer su vida un poco más fácil. Vamos a profundizar en!
¿Hablar de las reglas técnicas de tipografía adecuada es genial? pero donde el caucho realmente sale a la carretera es cuando podemos comenzar a ver ejemplos de tipografía en acción y analizar por qué funciona. Una de las cosas hermosas de la tipografía es que, al igual que los idiomas que usamos para comunicarnos entre nosotros, la forma en que se usa el tipo en un diseño le da voz. ¿Puedes gritar y gritar o puedes susurrar en voz baja? Todo depende de usted y de cómo desea que se escuche su mensaje..
Cada mes, veremos entre 10 y 20 ejemplos de tipografía excelente en diseño web. pero lo que es más importante, también analizaremos por qué funciona la tipografía. Vamos a sumergirnos en la oferta de este mes:
SquareSpace en realidad tiene un historial de tipografías bien diseñadas en sus sitios, pero sacaron todas las paradas para el evento SXSW de este año. El contenido del sitio se trata de personas que publican fotos extravagantes del evento, pero eche un vistazo a lo bien que se presenta. Hermosos titulares establecidos? Mucha variedad en el diseño? y sutiles imágenes de fondo / texturas que hacen referencia a tipografías antiguas. La ilustración moderna y ultra moderna del cráneo tampoco hace daño a las cosas..
El sitio no es enorme, algunas SS lo han hecho bien para mantener las cosas frescas e interesantes a medida que se desplaza por la página. Si presta atención, realmente no existe un estándar establecido para la tipografía (más allá de las mismas familias de fuentes): los tamaños están por todas partes y, por lo tanto, ¿la ubicación? Pero eso es perfectamente aceptable en este caso porque cada sección individual (la que es visible en una pantalla en el mismo punto) funciona en armonía consigo misma. Los colores son todos de la misma paleta general, y todo se siente como si estuviera en una cuadrícula, incluso si no puedes clavarlo..
Grip Limited es uno de esos sitios con los que te encuentras de vez en cuando que es tan increíblemente fuera de la caja que simplemente tienes que sentarte y tomarlo por un minuto o dos. Tengo la extraña sensación de que con solo mirarlo me hace un mejor tipógrafo. La variedad de tipos es tan diversa que sin la paleta monocroma unificadora, el sitio probablemente sería difícil de ver. Demonios, la mayoría de los expertos en usabilidad podrían decir que esto es una completa basura incluso en su estado actual, pero argumentaré que este tipo de diversión, el enfoque de "escopeta" al tipo es exactamente lo que los diseñadores web necesitan para disfrutar de vez en cuando..
¿Reciclará este diseño una y otra vez para proyectos empresariales o corporativos? Por supuesto que no, pero solo tomar un pequeño trozo de texto de este sitio haría maravillas para darle vida a un proyecto normal en el que podrías estar trabajando. Por ejemplo?
Burton es un poco / sorta en el espectro opuesto como el sitio Grip Limited. Es altamente organizado, está ubicado en un diseño de bloque rígido y es muy fácil de usar. Sin embargo, eche un vistazo de cerca y probablemente pueda ver lo que he colocado en estos dos sitios en esta lista. Si bien el diseño en sí está bastante bien cerrado en términos de estructura, la tipografía real en todo el sitio está lejos de lo que normalmente se ve en la web, y mucho más como lo que se puede ver en una revista o catálogo de snowboard. El tipo se configura en círculos y otras formas de web poco comunes para dar a cada página la cantidad correcta de interés visual. También se han dispersado en gráficos de información y otras ilustraciones simplificadas en algunos de los bloques de cuadrícula ordinarios para romper la monotonía y el ritmo de cada página.
¿Esta versión del sitio de Burton ha existido por un tiempo? y sin embargo, siempre se siente nuevo y fresco cada vez que lo miro. Simplemente cambiando las fotos y los colores clave, pueden obtener mucho más kilometraje del sitio para cada nueva temporada.
Impact Media utiliza diferentes fuentes, colores y tamaños en su control deslizante principal y en todo su sitio web. Al igual que la fuente - Impacto - la elección de la tipografía en este sitio en particular es negrita, fuentes grandes que contrastan mucho con sus fondos.
Me encanta el estilo actual de las fuentes de script en negrita en la web en este momento e Impact Media lo usa en su segunda línea para generar un efecto encantador y acogedor.
Gaz Battersby es un diseñador gráfico con sede en Leeds, Reino Unido, cuyo sitio minimalista actúa como su cartera. El sitio utiliza una fuente serif en todo su diseño, pero contrasta los elementos solo al cambiar el estilo de la fuente (en cursiva) en lugar de una fuente completamente nueva. Esto da como resultado un esquema de tipografía más simple y limpio..
El sitio de Battersby también utiliza el color para construir una fiesta de la herencia con sus encabezados encerrados en círculos turquesas para captar la atención del usuario..
No diré mucho sobre SURROUND porque, bueno, no hay mucho que decir. Es un recordatorio de que a veces, un enfoque simple para el diseño y la tipografía funciona perfectamente bien. Sin lujos innecesarios, nada entre el visitante y el contenido. Simplemente técnicas de funcionamiento simples que entregan un mensaje..
¿Invisible Creature es en realidad uno de mis estudios favoritos en el mundo? yendo de vuelta a cuando se unieron como Asterik Studio. Larga historia corta: crean pósters de kickass, ilustraciones del álbum y otras cosas divertidas. Lo que me gusta de este sitio es su control y disciplina. Como estudio líder de "rock / metal", podrían diseñar un sitio que se adapte a ese lado de su trabajo: salvaje, abrasivo, caótico. En su lugar, optaron por usar líneas limpias, colores simples y fuentes sans-serif, que en última instancia permiten que su trabajo hable por sí solo..
Feed Me es un diseño web de una página que utiliza tipografía para crear un esquema de color limpio en toda la página. El contraste entre su fuente estándar y un estilo de pincel más audaz crea una simple herencia que pone énfasis en los términos clave..
Feed Me tiene sus propios méritos como un diseño web completo y la tipografía es un ingrediente clave para su éxito. Las fuentes verdes curvadas se coordinan con el tema de la naturaleza del diseño web que amo.
Es difícil señalar la razón exacta del efecto generado por el sitio de este diseñador gráfico, pero sé que es excelente.!
Get My Boss a North Cape Es un sitio web interesante. Una empresa belga de diseño web, es decir, Inventis, está tratando de aprovechar un ciclo de 545 km para obtener algunos "me gusta" de Facebook. El sitio web en sí utiliza una interesante variedad de tipografías y utiliza el color para resaltar las partes más importantes de cada declaración (por ejemplo, "5000 me gusta" y "bicicleta 545 km").
El color del texto en esta página se coordina con el fondo en el que reside tal como se ve en el texto marrón utilizado en la señalización del título. Inventis también utiliza el sombreado interno para distinguir el texto de su fondo en los casos en que esto es necesario, pero no donde no lo es (como los hitos en la pista de ciclismo).
Al igual que el sitio de Gaz Battersby, Wes Bos usa pocas fuentes diferentes en su diseño y en su lugar opta por usar un fondo de cinta en sus editores para crear su jerarquía. En pocas palabras, me encanta el contraste de la fuente del guión con la de serif y el énfasis en los títulos de sus trabajos..
Aunque no es un sitio nuevo, el sitio del logotipo HTML5 de W3C sigue siendo un gran ejemplo de buena tipografía en juego por varias razones, incluido el uso de una hermosa fuente en negrita y condensada en los títulos para que coincida con la del homónimo de la página..
Los gráficos en la página también están espaciados apropiadamente para facilitar la lectura para el usuario final.
Como probablemente pueda adivinar por la captura de pantalla, este no es un sitio nuevo. Sin embargo, siguió apareciendo en otros rodeos de tipografía con una frecuencia tan grande, pensaría en ello como una omisión evidente si eligiera no incluirla. Chrip fue la conferencia de desarrolladores oficial de Twitter que sucedió en esta ocasión el año pasado..
Una vez aprendí una regla de oro sobre tipografía: no use más de tres tipos de letra. Aunque Chrip da la impresión de mucha actividad (algo que realmente quieres crear para una conferencia), solo puedo contar tres fuentes diferentes usadas si una ignora el logotipo..
Especialmente me encanta el título en la cartera de Jeremy Church. El énfasis en el "el" se ve impresionante, pero atrae más atención a un objetivo principal de "reducir el ruido". Además de sus títulos en negrita y sombreados, el resto del diseño utiliza una fuente sans-serif muy simplista que llama más la atención sobre su contraste principal.
Black Ant Media utiliza una gama de caras muy suaves que se ven increíbles, pero es difícil señalar por qué. Black Ant Media opta por usar la misma fuente en lugar de muchas, y solo varía el tamaño, el color y el peso para distinguir las prominencias de los diferentes elementos..
Al igual que algunos de los otros ejemplos de esto, Black Ant Media también usa fondos de colores en lugar de escalar para aumentar los títulos hasta su jerarquía visual.
Premium Pixels es un tema de WordPress que hace la lista gracias a su relevancia para algunos de los estándares de tipografía actuales discutidos en el reciente artículo de Brandon sobre Tipografía. El fondo ruidoso contrasta con el texto de la página gracias a una sombra de texto blanco que le ofrece una sensación de profundidad. Cada publicación en la página también se titula con una fuente compacta y en negrita.
Cada una de las publicaciones en este tema de WordPress tiene un gran espacio entre líneas, por lo que es mucho más fácil de leer y la ética del relleno grande es evidente en cada elemento de la página..
Sutilmente, también hay una cara de serifa entre los metadatos de cada publicación..
Como nota al margen, el nuevo diseño del sitio web de Orman Clark también es digno de mención en esta lista, ya que ejemplifica algunos de los grandes principios de diseño tipográfico. Limpio, sencillo y bien organizado. Aquí hay algunas capturas de pantalla:
¿Los diseñadores web hablan mucho sobre la recreación de la "estética de impresión" en la web? pero generalmente los diseñadores consideran que usar simplemente texturas ricas, diseños no estructurados extravagantes y muchas sombras de esquina o trompe l'oeil efectos Rara vez los diseñadores recuerdan realmente que la tipografía impresa es a menudo tan estructurada como el tipo en la web. Pelicanfly combina lo mejor de ambos mundos (en mi opinión), mediante el uso de estructuras de columnas simples, símbolos tipográficos y efectos de CSS contemporáneos para crear un sitio memorable. Voy a adivinar que también ha sido diseñado teniendo en cuenta las tabletas, porque hay un par de casos en los que tendrías que voltear tu pantalla para leer..
Herramienta gratuita: Esta es una herramienta bastante nueva que encontré el otro día. Básicamente, le permite jugar con la tipografía básica de un proyecto hasta que obtenga todo perfecto, luego escupe el CSS (3) que genera el estilo que creó. Estoy seguro de que hay un puñado de aplicaciones web similares por ahí, pero esta me pareció una de las más valiosas simplemente por la enorme cantidad de retoques que puedes hacer y es fácil de usar..
Accentsconagua