02/03/2016

El creciente uso de texto inclinado en diseño web

El creciente uso de texto inclinado en diseño web

El uso de texto inclinado —es decir, texto cuyas líneas no son horizontales sino diagonales— puede parecer una idea peligrosa para la legibilidad. Sin embargo, es bastante común en notas de revistas, portadas de libros o discos, posters de películas y otras piezas gráficas. Y en los últimos años, gracias a la aparición de nuevas técnicas, empezó a popularizarse en el diseño web. En general, la norma es inclinar el texto en sentido antihorario, y solo en elementos particulares (especialmente títulos y logos) que contengan pocas palabras. La calidad de la tipografía también es un factor a considerar, ya que la inclinación del texto implica una deformación sobre los caracteres originales (que puede generar efectos no deseados, como pixelación). Además, el efecto será implementado de forma diferente por cada browser o programa de edición gráfica.

Sin embargo, cuando superamos estos obstáculos, el texto inclinado puede aportarle a nuestro sitio web una pequeña ventaja, ya que el usuario, acostumbrado a escanear el texto de arriba abajo con la mirada, se verá obligado a hacer un esfuerzo ligeramente mayor para entenderlo. De esta manera, pondrá más atención en la página y será menos propenso a abandonarla en los primeros segundos de navegación.

A continuación compartimos algunos sitios web que comprendieron bien estos principios.

Tennent Brown

El sitio web de este estudio de arquitectura puede no tener un diseño perfecto (el uso del espacio en blanco es algo caótico), pero se destaca por combinar texto inclinado con un efecto visual que se activa cuando nos desplazamos verticalmente, donde las palabras suben o bajan como si fueran sombras proyectadas sobre una escalera. El usuario, al menos, siente la tentación de recorrer la página hasta el final para jugar con esta animación.

The Enterprise Foundation

En este sitio, el texto inclinado se integra con un layout totalmente irregular, donde las secciones se apilan desprolijamente entre sí como si fueran restos de una implosión. Curiosamente, el resultado no solo es muy atractivo (la elección de tipografías y colores ayuda) sino también funcional. En una Web donde casi todas las páginas siguen una orientación horizontal, este ejemplo resulta memorable.

Shiny Demos

Este sitio web recopila demostraciones sorprendentes de efectos visuales y/o interactivos implementados con tecnologías Web experimentales. Para agregar más impacto, elige presentar las categorías de las demos a través de texto inclinado. El recurso es interesante, además, porque permite «llenar» horizontal y verticalmente la pantalla con poco contenido: si ese mismo texto estuviera dispuesto de manera tradicional, el espacio vacío parecería más grande a simple vista.

Dw Rent

Este sitio web de alquiler de transportes refleja la estética de los comics de superhéroes. Por eso, para algunos elementos (como la frase que abre la página de inicio y los precios) imita el texto inclinado de las onomatopeyas e interjecciones que se suelen ver en las historietas. Otro logro es haber podido combinar de manera armoniosa ese estilo visual con el flat design.

So Actif Play

Juego de preguntas y respuestas, altamente interactivo y animado, sobre los desafíos cotidianos que enfrentan los profesionales jóvenes. No solo es llamativo el uso de texto inclinado, sino también la interacción de los caracteres con los bailarines que ilustran cada pregunta. Una experiencia multimedia interesante, aunque demasiado corta considerando lo que tarda la carga inicial.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce