@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.

En la última reunión de The Melêé tuvimos las agallas de presentar algunas reflexiones sobre la evolución de las interfaces en los últimos tiempos. Se trata de un punto de vista totalmente personal que defiende siempre la relatividad de las soluciones. Aquí os la dejamos. Espero que os guste.

Tuvimos la suerte de compartir cartel con un titán como Daniel Torres Burriel. Nos presentó su UX Punk Manifesto que nos llevaba a reflexionar sobre las bases que todo proyecto debería tener.

Sí, lo sabemos. Somos un desastre en esto de contar cosas en el blog. Pero hoy os queremos contar algo que, francamente, no esperábamos y nos ha hecho una ilusión enorme.

De la mano de Jokin Bereciartu, uno de los miembros de Trourist, nos ha llegado un pequeño tesoro. Hace ya unos meses realizamos el diseño de una Moleskine “edición especial trourista”. Que Moleskine publicara un post para anunciarlo supuso un vuelco al corazón para nosotros. Que ahora hayan publicado un vídeo precioso sobre el proceso de elaboración, nos parece una auténtica pasada.
Y es que en el fondo, ya lo sabéis: detrás de estos dos gruñones se esconden dos sentimentales.

Al verlo, nos han venido muchas cosas a la cabeza. Pero una de ellas es que este vídeo es muy… nosotros. Que nosotros también seguimos un proceso artesanal a la hora de plantear, prototipar, diseñar y maquetar nuestros proyectos. Que las herramientas serán más modernas, pero que el espíritu del hombre que, cincel en mano, talla con tanto mimo hasta el más pequeño detalle, es nuestro espíritu.

Nos gusta sentirnos artesanos. De verdad.

Acudió a nosotros preocupado por lograr una imagen adecuada para su empresa y tratamos de transmitir la filosofía y servicios de la empresa, siempre desde una perspectiva seria y cercana. Tomamos como eje de la comunicación con el usuario el característico maletín de abogado, ubicado en diferentes escenarios para reflejar los conceptos de cada sección. Pretendíamos de esta manera dotar de una personalidad diferenciada a Legisconsulting.

Algunos diseños de Legisconsulting:

¿Cuál es nuestra parte?

• Identidad: huir de la clásica identidad de abogado en la marca, a pesar de que el aire general sea éste.
• Arquitectura de la información: ordenar las ideas y conceptos con los que Legisconsulting se acercó a nosotros. Trasladar al potencial cliente los conceptos en los que puede estar interesado poniendo especial esmero en la redacción de los contenidos.
• Diseño: imagen clásica con una marca de aire moderno en un mismo mix por un lado, y la sobriedad y seriedad de las composiciones en blanco y negro por otro. Reforzamos el nuevo color naranja como color identitario.

Compañeros de viaje:

En la parte de maquetación tuvimos como aliado a Joel Gonçalves.

Lo puedes ver aquí: Legisconsulting

Trourist's Newsletter in Campaign Monitor

Hace ya una semana que la gente de Campaign Monitor destacó en su galería el newsletter que preparamos para los chicos de Trourist.

Y nos alegra enormemente. De esas cosas que te alegran el día.

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.

PD: Por cierto, os animamos a que os paséis por aquí para ver qué maravillas hizo la gente durante el fin de semana Abredatos. ¡Chapó para todos!

Este fin de semana volveremos a Zelai (la casa rural donde estuvimos en la Rails Rumble haciendo Parlio) con nuestros amigos de Linking Paths. Esta vez es para participar en el Desafío Abredatos. ¿Que eso qué es? Pues veamos qué dice su web:

El Desafío AbreDatos 2010 es un concurso de 48 horas para el desarrollo exprés de servicios tecnológicos al ciudadano basados en el uso de datos públicos.

Aún te puedes apuntar con tu equipo y participar. ¿Por qué no?