@karinai @glorialangreo Yo paso más tiempo creando contenido que diseñando. Y no me pagan por ello :S El content strategy no ha llegado aquí

Y es que el hecho de que te pidan diseñar con textos Lorem Ipsum es algo atroz. ¿Diseñar el qué? ¿Lo indefinido sin mensaje ni objetivo? ¿Qué formato le doy si ni siquiera tiene un sentido, un tono, un énfasis…?

Mira que algunos han intentado simular algo más cercano a lo que podría considerarse una imitación de la realidad (Fillerati, Malevole, Telescopic Text, Adhesiontext, etc.), pero… seamos sinceros. En algún estadio del proyecto suele tener que afrontarse el trabajo de definición de esos contenidos, y ya sabemos que lo que no se hace en un primer momento se hará (si se hace) malamente.

Estamos hablando del diseño de la información desde el punto de vista de la estrategia de contenido y también desde un punto de vista ‘microscópico’: de sus negritas, sus itálicas, sus entradillas y sus entresacas,… ¿Acaso el diseño de la información no es algo visual? ¿No es parte del diseño?

El texto tiene ritmos, pausas, énfasis, llamadas a la acción… y eso se merece un traje (formateo visual) acorde mediante el uso de recursos variopintos: color, tamaño, contraste, familia tipográfica, espacios negativos, etc. Pero para ello se necesita diseñar el texto como algo prioritario. Ni qué decir tiene que el formateo de código correspondiente está intimamente relacionado con el lado semántico del propio texto y que también desde el lado del SEO se trata de diseñar porque resulta vital. Pero eso ya es otro tema en el que no quiero bifurcarme ahora.

Text first

Sospecho que a veces se nos olvida el respeto que debemos a la redacción de los contenidos y el diseño de la información. Si te sumerges en el diseño de una interfaz inmediatamente te das cuenta de la relevancia que adquieren los pequeños detalles que hemos ido introduciendo de cara a un óptimo escaneo gradual del contenido. Desde los bloques más grandes hasta esa negrita que resalta una palabra. Sin un contenido real, ni un ritmo, no hay camino a trazar. En los sucesivos niveles o estadios de lectura hemos tenido que tratar de optimizar y cuidar la que deseamos sea una experiencia de lectura satisfactoria/eficaz/sugerente/whatever por parte del usuario. Por tanto, considero vital contar con contenido real antes de proseguir con la definición de cualquier otra parte del proceso de diseño.

Excepciones

En algún caso puede servirnos el maldecido ‘lorem ipsum’. Por ejemplo, a la hora de diseñar los estilos de los elementos que vayan en un post (encabezados, listas, enlaces, citas, negritas e itálicas, tablas, etc.), pero incluso en este caso creo que convendría acercarse a la realidad y jugar con un post ficticio que podamos obtener de un blog de temática similar para ello.

Diseño en el navegador

La importancia del diseño con textos reales se hace más patente aún cuando arremetes por la vía del HTML(link)/CSS. Algunos tendemos a diseñar cada vez más directamente en el navegador y una de las primera labores tras una mínima definición del layout, resets, etc. es justamente la de formatear visualmente el contenido. Me resulta francamente complicado imaginar a alguien saltarse esta labor y zambullirse en otros aspectos del diseño. Y es que el diseño del texto es de las primeras capas visuales en ser aplicadas, aunque a algunos les parezca algo subyaciente o secunadrio.

Probablemente sea porque suele haber otros elementos visuales (imágenes impactantes, caramelos gráficos, etc.) que a veces acaparan la atención del que evalúa “el diseño” haciéndole creer que no es relevante si va un texto u otro.

Quizá sea cuestión de valores

Sí, ya sabemos que en una sociedad donde la imagen y la apariencia están por encima de todo, que las curvas de una señorita despampanante cobran más relevacia que lo que ésta pueda contar. Quizá esa serie de valores hacen complicado transmitir la vital necesidad de un contenido real. De todos modos, creo que en los últimos tiempos hay gente que a base de ser evangelizada por nuestro sector ha ganado en sensibilidad y conocimiento en estas áreas.

El texto como mancha

Esto no va de diseñar obras gráficas donde los textos suponen un elemento más de la composición. Ni deben tratarse como bloques gráficos compuestos por familias de hormiguitas en nuestro obra artística. El texto es de facto en muchos casos es el punto final (ejemplo: sitio web de artículos sobre salud), es un vehículo para un objetivo (ejemplo: vehículo: textos sugerentes + call to actions / objetivo: venta de producto), etc.

Dependerá de nosotros el lograr diseñar correctamente esos textos de cara al objetivo. Todo ello sin que el usuario se aburra, conduciéndolo de modo fluido, logrando una digestión paulatina y amena, convenciendo, emocionando, etc.

Y para ello se necesita dar forma a textos concretos, o al menos deben ser lo más cercanos al resultado final. Claro que todo es variable en el tiempo, claro que la editabilidad nos permite hacerlo (esa frase de cliente “pero después podré cambiarlo, ¿no?”) pero debemos obligarlos a trabajar los elementos textuales a conciencia.

Lo haremos con mayor o menor acierto, pero en estos tiempos en que nuestra capacidad de concentración, retentiva y paciencia son algo en declive sigue resultando crucial. Es clave en la experiencia del usuario, un individuo muy sensible con lo que consume.

El texto ‘volquete’ sin adaptar

La falta de tiempo, el desconocimiento de los hábitos y motivaciones hacia la lectura de los usuarios en medios digitales y otras razones variopintas provocan que hagamos en ocasiones un volquete de unos contenidos que fueron concebidos para papel. A veces irremediablemente, otras inconscientemente. Muchas veces con un estilo de redacción muy académico, o burocrático o… infumable. Tan infumable que resulta imposible diseñar algo con ello y en ocasiones uno ha de verse desmenuzando el contenido en píldoras algo más digeribles en aras de conseguir algo que sea mínimamente pasable. Ahí entra probablemente en juego lo que se denomina como “Content strategy” pero es francamente complicado ya que se puede entender que va implícito en otras labores. Todo depende de la experiencia del cliente, del proveedor a la hora de plantearlo y cómo no, del presupuesto.

Definición de una estrategia de contenidos de cara al ‘responsive web design’

Está de moda, se está discutiendo mucho al respecto y me encanta este modo de afrontar el diseño del contenido adaptado a cualquier dispositivo (sí, otra vez enlazamos al mítico artículo) independientemente de sus características. Pero todavía hace más patente la necesidad de tener esa estrategia de contenidos que citábamos previamente. Teniedo en cuenta el comportamiento del cotenido en sitios creados con responsive design,  ¿cómo vamos a trabajar el diseño visual de la información de modo genérico con un lorem ipsum? Necesitamos saber el tratamiento que éste ha de tener y darle una forma y jerarquía adecuada en cada dispositivo. No me vengas con que “irá algo así”.

Responsive ad copywriting

Con el responsive design también se abre una nueva e interesante vía para tener en cuenta el comportamiento de la publicidad dependiente del viewport del dispositivo. Estamos acostumbrados a trabajar los banner (u otros formatos) en una serie de dimensiones ya predefinidas, pero no hemos pensado quizá tanto en cómo se adapta esa publicidad. Si el copy ha de ajustarse algo o no, si el impacto del banner es diferente porque el contenido circundante o los gráficos que contiene han adoptado otra forma, en si en un dispositivo móvil tenemos una versión meramente textual de ese banner, etc.

‘Lorem ipsum’ gráficos

Trabajar sobre lo indefinido hará que nuestras interfaces parezcan siempre algo más insulsas, sin carácter y menos creíbles. De todos modos, no todo lo ‘Loremipsumiano’ es malo. A veces surgen recursos interesantes como Placekitten, Lorem Pixum, Flickr Bomb o Flickr Holder para suplir necesidades gráficas que resultan útiles en determinados casos. Eso sí, corremos el peligro consiguiente de que algunas imágenes vayan en la versión final. Creo que al igual que en el texto, podemos hablar de “lo específico” en el entorno de la fotografía. La historia se repite.

Lectura interesante

Quisiera destacar un artículo de Joshua Porter titulado “Interface Design is Copywriting” que resume muy bien lo que quería expresar. Veréis que hace referencia a la presentación “The language of interfaces” de Des Traynor, la cuál merece la pena ver si os interesa este tema.

Y ya me callo con la berborrea caótica que me he pegado. Chinpún.

orain: teaser from debolex films on Vimeo.

Sí, ya lo han citado tanto LoveOf74 como el propio Miguel García en sus respectivos blogs. Y nosotros también diremos alto y claro que necesitamos trabajos bellos y potentes como Orain en nuestra tele. Hay muchas razones para pedirlo. Entre otras podríamos citar:

• Porque seguir por esta vía permite sacar a la luz la rica y variopinta escena local a detalle.
• Porque le da aunque sea un breve espacio a todos aquellos que en este pequeño pueblo hacen algo en el mundo del arte, la música, la creatividad o mueve el culo con algo de fundamento. De este modo, les ofrece la posibilidad de dar a conocer sus puntos de vista y actividad.
• Porque con un poquito más de esfuerzo se puede convertir en el formato idóndeo como altavoz al mundo si, por ejemplo, se traducen al inglés las entrevistas con simples subtítulos (CC-closed captions).
• Porque demuestra una vez más que no se requiere de grandes presupuestos para crear un contenido digno y cercano.
• Porque ya a estas alturas y en muy poco tiempo han preparado una serie de vídeos considerable demotrando rapidez de ejecución. Y porque el resultado es ligero, ágil y fácil de consumir.
• Porque es un formato que corretea rápido por la red gracias a las redes sociales, entre otras cosas. Tenemos otro claro ejemplo de esto: Nickdutnik. Los amigos de Factoría Crossmedia lo están bordando con este último programa, al igual que Debolex lo está haciendo con Orain.

Aprovecharemos una vez más para agradecer este bonito trabajo que está desarrollando Debolex junto con ETB. Aupa zuek!.

Del mismo modo, le hacemos una clara petición a ETB: continuad con el proyecto Orain. Aquí y ahora, Orain.

Qué tal si simplemente recopilamos lo que ya se lleva guardando en nuestros marcadores en los últimos tiempos y lo compartimos para ver si así al menos nos obligamos a probar no sólo el CSS3 sino también el HTML5…

A buen seguro muchos de vosotros ya tenéis los recursos que citaré. A mí al menos me viene bien quedarme con una pequeña selección de ellos que son de consulta común. Espero que os sirva.

Tutoriales:

• Coding A HTML(link) 5 Layout From Scratch
• Yes, You Can Use HTML(link) 5 Today! de Sitepoint
• Dive into HTML5
• HTML5 Tutorial
• HTML5 Doctor

Cheatsheets:

• Cheatsheet de Antonio Lupetti de Woork (y otra suya)
• HTML5 Canvas Cheatsheet
• HTML5 Pocket Book
• Smashing Magazine (PDF, 76 kbytes.)

Glosario:

• HTML5 Glossary

Demos:

• HTML5 Demos
• HTML5* Web Development to the next level

Validadores:

• W3C Markuk Validation Service (el de siempre)
• HTML5 Validator
• HTML5 & CSS3 browser support

Soporte de navegadores:

• Modernizr
• iks-html5: Fixes the display and behavior of browsers when served HTML(link) 5
• HTML5 enabling script

Nomenclatura de ID y clases en CSS:

• HTML5 id/class names
• Preparándote para HTML5 mediante clases semánticas de Jon Tan

Varios:

• HTML5 Reset Stylesheet
• 52Framework, un framework que usa HTML5 y CSS3

Galería de sitios web realizados con HTML5:

• HTML5 Gallery | A showcase of sites using HTML5 markup
• HTML5 Sites
• 101 Best HTML5 Sites

NOTA: Este post puede irse reeditando según vaya encontrando artículos interesantes.

@font-face ya en marcha

Hasta ahora empleábamos técnicas como sIFR, Cufón (últimamente) u otras similares para representar tipografías que no eran del sistema operativo. Todas con su ‘puntito’ de complejidad y alguna de ellas llena de bugs de todo tipo.

Pero ahora algunos diseñadores han comenzado a aprovechar la propiedad @font-face de CSS3. Craig Mood y la gente de Nice Web Type son un buen ejemplo de esto. Firefox 3.5 ha sido. Se acaba de abrir una puerta muy interesante, una vez más, cuando previamente ya se han hecho varias intentonas.

Y como ejemplo, las interesantes demos que han creado la gente de Nice Web Type con las fuentes Museo y Graublau. Echadle un ojo, si no lo habéis hecho ya.

¿Y qué más hay sobre @font-face?

Han surgido varias iniciativas relacionadas con las posibilidades qu ofrece @font-face. Veamos:

• Typekit: un sistema que te facilita y aloja fuentes que soportan @font-face.
  
  • Simple. Ellos alojan las fuentes que soportan @font-face, las enlazas y ¡alehop!. Están acordando las licencias con las fundiciones tipográficas.
  • Este sistema es uno de los que más ruido ha sacado en la red, pero hay otros que también están en desarrollo: Typotheque, Fontdeck (creado por Clearleft), Kernest, etc.
  • Están preparando el sistema y por ahora podemos seguir sus devenires mediante su blog o su cuenta de Twitter.
• Open Font Library: es una librería de fuentes gratuitas y que soportan @font-face.
  
  • Puedes enlazar las fuentes directamente mediante @font-face (como en el anterior caso) o bajarlas en formato .otf (Open Type). ¿La diferencia? Que son gratuitas.
  • Emplean la licencia Open Font License.
  • Puedes descargar, compartir o remezclar las fuentes como si fueras un DJ Tipográfico. ¿Interesante, no?
  • Pocas fuentes por el momento, pero parece interesante.
• Webfonts: licencias, formatos, historia y noticias sobre las ‘web fonts’.
  • ¿Podemos colgar en nuestro servidor fuentes comerciales para usarlas con @font-face? ¿A disposición de cualquiera? ¿Qué dicen los tipógrafos y fundiciones a este respecto? Muchas preguntas ante este nuevo panorama. Este es el mejor lugar para resover tales preguntas.
  • Listado de tipografías que pueden usarse sin problemas ahora mismo mediante @font-face. (fijaros en la diversa cantidad de licencias)
  • Fundiciones tipográficas que permiten emplear fuentes usando @font-face.
  • Soporte de @font-face por parte de los navegadores
  • Ejemplos
  • etc.

Ya nos iremos sumergiendo en charletas sobre estos temas.

Bienvenidos a nuestro hogar. ¡Buen provecho!