Share
¿Listo para la dosis de este mes de diseño tipográfico web impresionante? Apuesto que eres! Max se está tomando el mes libre, pero nos ha dado una lista de 15 sitios que muestran algunas de las mejores tipografías para que las vean. Vamos a profundizar en!
Hablar sobre las reglas técnicas de una tipografía adecuada es genial ... pero donde el problema realmente se pone en marcha 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 ti y de cómo quieres que se escuche tu mensaje.
Cada mes, veremos entre 10 y 20 ejemplos de tipografía excelente en diseño web ... pero lo más importante, También analizaremos por qué funciona la tipografía.. Vamos a sumergirnos en la oferta de este mes:
Es demasiado raro que me encuentre con sitios como este ... honestamente. Es un enfoque que tiende a ver mucho en diseño impreso, pero que rara vez se lleva a la web. Cuales son los componentes?
Fíjese en lo sencillo que es el diseño ... no hay un solo elemento que un estudiante de primer año no pueda crear ... pero lo elegante y sofisticado que lo hace. sensación ¿en la pantalla? De esto es de lo que hablamos cuando hablamos de tipografía inspiradora. Al utilizar un diseño simple y bien estructurado, el diseñador logra expresar un sentido, confianza y profesionalidad incluso antes de que el visitante lea el texto..
A veces, un diseño requiere algo fuera de lo común para captar la atención del visitante. Esto es lo que hace tan bien el sitio de Amazee Labs. Amazee no solo opta por no usar fuentes web estándar, sino que también combina el tipo de conjunto HTML junto con el tipo basado en imágenes para ofrecer un alto nivel de creatividad y emoción. En muchos sentidos, Amazee está rompiendo las reglas ... pero es cómo lo hacen lo que hace que brille:
Todo esto ayuda a preservar el sentido del orden, incluso cuando la selección de tipo está en todo el mapa.
El sitio de Finch es sorprendentemente mínimo en su uso tipográfico. No se deje engañar por el enorme logotipo en la portada ... todo en este diseño es sencillo (de buena manera).
Lo que pasa con el uso del tipo en una página en blanco es que, cuando se realiza correctamente, la página parece que tiene mucho más en juego que solo texto..
Mencionamos Image Mechanics en nuestra publicación anual de tendencias de diseño web, pero vale la pena mencionarlo nuevamente porque es increíble. El diseño se desvía del paradigma de navegación de la interfaz de usuario estándar al hacer que los bloques de texto reales sean la navegación (en lugar de palabras o botones simples). Esto atrae al visitante, recordándoles que hay ideas reales detrás de cada enlace. El contenido del cuerpo real dentro del diseño también está muy bien diseñado: se siente casi como una revista, con un encabezado grande y en negrita, ilustraciones bien emparejadas y cambios de color sutiles (como los colores planos en una revista impresa). También me encanta el enorme logotipo en su página "Meet the Makers"!
Bien, admitiré que me atrae de inmediato la enorme y atractiva ilustración en color de la rueda de color ... tanto que la tipografía podría ser horrible sin ella (no lo es), y probablemente no lo notaría. El punto que trato de señalar con este es que unir correctamente la imagen con el tipo (a través del tamaño, estilo, color, etc.) puede hacer maravillas para crear un diseño de sitio memorable. ¿Quieres hacer una impresión duradera? Tome algunas notas sobre el enfoque audaz de Kaleidoscope.
El sitio Fe.rocious es una instancia en la que todas y cada una de las partes del sitio se sienten "diseñadas". Es decir, no se ha dejado nada a la configuración predeterminada del navegador para el estilo ... Esto a menudo puede ser malo cuando no se hace correctamente, pero en manos de los diseñadores de Fe.rocious, se siente elegante y con estilo..
No voy a decir demasiado sobre este diseño porque creo que habla bastante bien por sí mismo. El diseño y el uso de tipos es bastante común, pero lo interesante es las imágenes grandes que se utilizan en el control deslizante. Recuerde, la tipografía web también puede existir en imágenes ... la creación de un estilo visual distinto para la tipografía basada en imágenes puede aportar mucho a un diseño normal..
Seré el primero en admitir que me encantan los tipos de letra Condensed Sans-Serif ... pero pueden ir muy mal si no se usan correctamente. Aquí, toman el centro del escenario como un cruce entre un título y una fuente de acento. El resultado: la cantidad justa de gritos. La integración de la fuente de script de lujo también ayuda a aportar un poco de estilo a las formas rígidas de la cara de League Gothic. Observe cómo las dos fuentes se equilibran entre sí. ¿Bueno? Sí, es grandioso.
La estructura del sitio Infinvision es simple y tenue ... lo que ayuda a enfatizar y llamar la atención sobre las fantásticas ilustraciones de tipo pequeño que utilizan para presentar su empresa. El espacio en blanco funciona sorprendentemente bien aquí - nuff dijo.
King Size es la única plantilla en esta lista. Lo que me gusta tipográficamente es que no se parece en nada a un tema de WordPress. La gran cinta, combinada con el diseño de laurel hace que se sienta rígido y romano en estética ... algo que no se ve a menudo (en todo caso) en diseños de plantillas que generalmente se sienten rígidos y predecibles.
El logo de Devin's Heaven es genial, pero lo que realmente me gusta de este sitio es cómo está diseñado el tipo para las publicaciones del blog. El párrafo de introducción es de ancho completo, y el resto de las publicaciones vuelven al enfoque estándar de contenido / barra lateral de 2 columnas. Es tan simple ... pero ese párrafo de introducción de ancho completo te hace sentir como si toda la página estuviera dedicada a ese único artículo. Donde otros diseños de blogs se sienten como las plantillas en las que los artículos encajan, este se siente como si todo fuera un artículo primordial.
El sitio de Greater Dunnellon Historical Society se siente divertido. Considere primero el propósito del sitio: preservar la historia de Dennelon para la comunidad. Como tal, la tipografía dentro del sitio imita gran parte de las características de la sociedad que están preservando. No hay nada salvaje ni loco ... pero todo, desde las múltiples columnas, la copia del cuerpo inspirada en los papeles nuevos hasta los botones se siente auténtico para la historia (con algunas actualizaciones modernas). La moldura de la corona, las ilustraciones caprichosas y las estanterías agregan la profundidad adecuada para hacer que este sitio se sienta como una mini cápsula para esta comunidad..
El diseño del sitio de Stuart Hobday es una bocanada de aire fresco después de observar algunos de estos sitios altamente ilustrativos. Su enfoque minimalista se siente simple y sin pretensiones. Todo se coloca de forma lógica y sin adornos ... a veces lo que un diseñador puede hacer con Menos Dice mucho más sobre hasta qué punto su madurez y disciplina. En un mundo de carteras extravagantes y una dura competencia, se necesita mucha confianza y visión para lograr un diseño tan discreto como este.
Hemos cubierto el nuevo sitio de Ryan en nuestro artículo de Tendencias Web 2011, pero honestamente es lo suficientemente bueno como para mencionarlo nuevamente. Ryan combina el tipo y la ilustración a la perfección en un hermoso sitio de desplazamiento vertical. El efecto combinado es uno que crea un sentido de aventura y exploración creativa ... que funciona perfectamente como un método para promocionarse ante posibles clientes..
El sitio de Pat Dryburgh contrasta con el de Ryan Scherf ... pero no de una mala manera. Pat utiliza un diseño estructural rígido y bien diseñado, una selección de tipo de letra sofisticada y una interesante combinación de espacio positivo y negativo para crear una estética general que se sienta segura y profesional. Me gustan especialmente las grandes columnas de espacios en blanco que quedan en el lado izquierdo de las grandes áreas de tipo (debajo de la imagen principal). ¿Podría haber llenado ese espacio con algo? Claro ... pero lo que ha decidido dejar fuera del diseño dice mucho a su restricción como diseñador.
Bueno, es ese momento del post de nuevo. Hemos tenido algunas risas, algunos gritos, pero juntos hemos llegado a la conclusión, y aquí tengo que dejarlos. Como mencioné arriba, Si no puse tu favorito este mes, asegúrate de compartirlo más abajo en la sección de comentarios.! Me aseguraré de comprobarlo para el post el próximo mes.!
Lea más sobre la tipografía web en mi publicación sobre Elegir la fuente correcta: una guía práctica para la tipografía en la web!
También hemos comenzado una gran lista de artículos en la categoría de tipografía web ... así que échales un vistazo también!
Accentsconagua