() translation by (you can also view the original English article)
¿Listos para la dosis mensual de genialidad tipográfica en diseño web? ¡Estoy seguro que sí! Max se está tomando un descanso este mes, pero nos ha dado una lista de 15 páginas web que muestran algo de la mejor tipografía para que ustedes le den una mirada. ¡Comencemos!
Sobre la serie de tipografía web
Hablar sobre las reglas técnicas que rigen la tipografía es fantástico... pero la hora de la verdad llega cuando podemos comenzar a mirar ejemplos de tipografía en acción y analizar por qué esta funciona. Algo hermoso de la tipografía es que, tal como los idiomas que usamos para comunicarnos unos con otros, la manera en la que usamos las fuentes en un diseño le confiere a este voz. Se puede gritar o susurrar... todo depende de uno y cómo uno quiera que se escuche su mensaje.
Cada mes estaremos viendo entre 10 y 20 ejemplos de excelente tipografía en diseño web... pero lo más importante: también analizaremos por qué funciona su tipografía. Veamos lo que tiene para ofrecer este mes:
01: Thrive Solo
Es extremadamente raro que me encuentre con sitios como este... de verdad. Se trata de un enfoque que se tiende a ver mucho en diseño impreso, pero que rara vez se lleva a la web. ¿Cuáles son los componentes?
- Una fuente grande, en negrita (colocada en una jerarquía simple de arriba hacia abajo)
- Composición estructurada en una cuadrícula (con interrupciones inteligentes en la cuadrícula)
- Colores llamativos (solo tres colores: anaranjado, blanco y negro)
- Textura simple (suficiente para darle algo de fuerza)
Miren qué simple es el diseño... no hay un solo elemento que un estudiante de primer año de diseño no pueda crear... ¿pero qué elegante y sofisticado se siente en la pantalla, verdad? Esto es a lo que nos referimos cuando hablamos de tipografía inspiradora. Al usar una composición simple, bien estructurada, el diseñador consigue articular un sentido de confianza y profesionalismo incluso antes de que el visitante lea el texto.
02: Amazee Labs
A veces un diseño requiere algo fuera de lo común para atrapar la atención del visitante. Eso es lo que la página de Amazee Labs hace tan bien. Amazee no solo optó por no usar las fuentes web estándar, sino que también combinó fuentes HTML con fuentes basadas en imágenes para transmitir un alto nivel de creatividad y emoción. De muchas maneras, Amazee está rompiendo las reglas... pero cómo las rompen es lo que le hace brillar.
- Un diseño consistente para elementos similares (como los bloques informativos abajo)
- Bloques de texto e imágenes bien alineadas unas con otras.
- Uso consistente del color - todo encaja en la gama de colores de la marca.
- Selección consistente de fuentes funcionales - es probable que haya unos 20 tipos de letra diferentes nada más en la página de inicio, pero cuando es necesario (título 1, título 2, título 3, párrafo, enlaces, etc.), las fuentes usadas son consistentes.
Todo esto ayuda a conservar el sentido de orden, incluso cuando hay fuentes de todo tipo.
03: Finch
La página de Finch es sorprendentemente minimalista en su uso de la tipografía. No se dejen engañar por el enorme logo en la página principal... en este diseño, todo guarda un perfil bajo (en el buen sentido).
El asunto al usar letras en una página en blanco es que cuando se hace bien, pareciera que en la página hay mucho más que solo texto.
04: Image Mechanics
Mencionamos a Image Mechanics en nuestro artículo sobre Tendencias del año en diseño gráfico, pero vale la pena hablar de esto otra vez porque está buenísimo. El diseño se desvía del paradigma estándar de navegación IU al hacer que la navegación sea a través de bloques de texto (en lugar de palabras aisladas o botones). Esto atrae al visitante y le recuerda de que en realidad hay ideas detrás de cada enlace. Asímismo, el cuerpo del contenido en sí dentro del diseño está notablemente bien diseñado - parece casi una revista, con texto grande y en negrita para los títulos, ilustraciones acordes y cambios de color sutiles (tipo colores directos en una publicación escrita). ¡También me encanta el logotipo gigante en su página de "Conoce a los creadores"!
05: Kaleidoscope
Está bien, admito que me siento inmediatamente atraído por la ilustración: gigante, sexy, con un círculo cromático fantástico... tanto así que la tipografía sería horrible sin ella (no lo es) y yo probablemente no lo notaría. Lo que estoy tratando de demostrar con esto es que la combinación apropiada de imagen y fuente (según el tamaño, estilo, color, etc.) puede hacer maravillas para crear una página web memorable. ¿Quieres crear una impresión duradera? Toma nota del enfoque audaz de Kaleidoscope.
06: Fe.rocious
La página de Fe.rocious es un ejemplo en el que todas y cada una de las partes del sitio se siente "diseñada". Lo que quiere decir que nada ha sido dejado al estilo de la configuración por defecto del navegador... Con frecuencia esto puede terminar mal si no se hace bien, pero en las manos de los diseñadores de Fe.rocius, se siente inteligente y de buen gusto.
07: RGA
No diré mucho sobre este diseño porque creo que habla bastante bien por sí mismo. El uso del diseño y de la fuente es bastante ordinario, pero se pone interesante gracias a las imágenes grandes del slider. Recuerden: la tipografía web también puede existir en imágenes... Crear un estilo visual distintivo para una tipografía basada en imágenes puede aportar muchísimo a un diseño que de lo contrario resultaría ordinario.
08: Ghost Horses
Seré el primero en admitir que me encantan las fuentes Sans-Serif, pero pueden quedar muy mal si no se usan correctamente. Aquí, ellas toman el rol protagónico como un cruce entre un titular y una fuente de énfasis. El resultado: justo la cantidad correcta de atractivo. Además, integrar la elegante fuente script ayuda a darle un poco de estilo a las formas rígidas de la letra League Gothic. Observen cómo las dos fuentes se equilibran la una a la otra. ¿Se ve bien? Sí, está genial.
09: Infinvision
La estructura de la página de Infinvision es simple y sutil... lo que ayuda a enfatizar y llamar la atención sobre las fantásticas pequeñas ilustraciones de inspiración tipográfica que usan para presentar su compañía. Aquí, el espacio en blanco funciona sorprendentemente bien - no se diga más.
10: King Size (plantilla de WordPress)
King Size is la única plantilla en esta lista - Lo que me gusta de ella tipográficamente hablando es que no se siente para nada como una plantilla de WordPress. La cinta grande combinada con el diseño de laurel hace que se sienta austero y romano en su estética... algo que no se ve muy seguido (si es que se ve) en diseños de plantillas que usualmente se sienten rígidos y predecibles.
11: Devin's Heaven
El logo de Devin's Heaven es genial, pero lo que realmente me gusta del sitio es cómo se dispone el texto para las publicaciones del blog. El párrafo introductorio se encuentra a todo lo ancho, mientras que el resto de las publicaciones vuelven a la distribución estándar de dos columnas y barra lateral. Es tan simple... pero ese párrafo introductorio de extremo a extremo te hace sentir como que toda la página está dedicada a ese único artículo. Mientras otros diseños para blogs parecen plantillas en las que los artículos simplemente encajan, en este se siente que el artículo es la prioridad.
12: Greater Dunnellon Historical Society
La página de Greater Dunnellon Historical Society se ve simplemente divertida. Hay que considerar primero el propósito del sitio: conservar la historia de Dunnellon para la comunidad. Como tal, la tipografía en el sitio imita muchas de las coracterísticas de la sociedad que está conservando. No hay nada extremo ni loco... pero todo, desde las múltiples columnas y el cuerpo inspirado en un periódico, hasta los botones, se sienten auténticos respecto a la historia (con algunas pocas actualizaciones). El título en forma de corona, las ilustraciones fantasiosas y la organización como estantería añaden el nivel de profundidad adecuado para hacer que esta página se sienta como una minicápsula del tiempo para esta comunidad.
13: Stuart Hobday
El diseño de la página web de Sturat Hobday es una brisa de aire fresco después de ver algunos de estos ejemplos altamente ilustrativos. Su aspecto austero y minimalista se ve simple y sin pretensiones. Todo está ubicado lógicamente y sin adornos... a veces lo que un diseñador puede hacer con menos dice mucho más sobre cuánta madurez y disciplina ha desarrollado. En un mundo de portafolios extravagantes y dura competencia, se requiere de gran confianza y visión para sacar adelante un diseño de perfil bajo como este.
14: Ryan Scherf
Hablamos de la nueva página de Ryan en nuestro artículo Tendencias web del 2011, pero, honestamente, es lo suficientemente genial para mencionarlo ota vez. Ryan combina armoniosoamente tipografía e ilustración en una hermosa página de desplazamiento vertical. El efecto en conjunto crea un sentido de aventura y exploración creativa... que funciona perfectamente como un método para promocionarse a sí mismo ante clientes potenciales.
15: Pat Dryburgh
La página de Pat Dryburgh destaca en contraste con la de Ryan Scherf... pero no en un mal sentido. Pat emplea una composición estructural rígida, bien diseñada, una selección de fuentes sofisticada y una combinación interesante de espacio positivo y espacio negativo para crear una estética general que inspira confianza y profesionalidad. A mí me gustan especialmente las columnas amplias de espacio en blanco al lado izquierdo de las áreas de texto (bajo la imagen principal). ¿Podría Pat haber llenado ese espacio con algo? Seguro, pero lo que decidió dejar fuera del diseño revela mucho sobre su dominio como diseñador.
Conclusión
Bueno, una vez más llegamos al final de un artículo. Hemos reído, hemos llorado, pero juntos hemos llegado hasta la conclusión y aquí los tengo que dejar. Tal como mencioné líneas arriba, si no he incluido su página favorita este mes, ¡compártanla abajo en la sección de comentarios! ¡Me aseguraré de revisarla para la publicación del próximo mes!
Lean más sobre tipografía web en mi artículo Eligiendo la fuente correcta: una guía práctica para la tipografía en la web.
También hemos empezado una lista de artículos en la categoría de Tipografia Web.... ¡así que revísenlos también!
