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

Bai, badakigu. Desastre hutsa gara blogari bezala. Baina gaur zerbait kontatu nahi dizuegu. Espero ez genuen eta benetan sekulako ilusioa egin digun zerbait.

Jokin Bereciartu, Trouristeko kideetako bati esker izandu dugu altxor txiki honen berri. Duela hilabete batzuk diseinatu genuen Moleskine koadernoen “trourista edizio berezi bat”. Moleskinek berria emateko post bat idatzi izanak harritu egin gintuen. Baina orain koaderno horiek nola egin ziren erakusten digun bideo eder honek, hitzik gabe utzi gaitu.
Badakizue nolakoak garen: marmarti pare honen atzean, sentimental pare bat dago.

Ikusterakoan hainbat gauza etorri zaigu burura. Eta horietariko bat bideo hori oso… gu dela izan da. Guk ere prozesu artisau bat jarraitzen dugulako webgune bat planteatu, prototipatu, diseinatu eta maketatzen dugunean. Tresnak modernoagoak izan daitezke, baina deitale txikiena ere kontu handiz zizelaz lantzen duen gizonaren izpiritua, gure izpiritua da ere.

Artisau sentitzea gustatzen zaigu. Benetan.

Legisconsultingen zenbait diseinu:

Zein izan da gure lana?

• Nortasuna
• Informazioaren arkitektura
• Diseinua

Bidailaguna:

Maketazioan Joel Gonçalves izan genuen aliatua

Hemen ikus dezakezu: Legisconsulting

Trouristen buletina Campaign Monitor-en galerian

Bada dagoeneko aste bat Campaign Monitor-ekoek beraien galerian Trouristeko mutilentzat prestatu genuen buletina bereziki aipatu zutela.

Eta asko pozten gara. Eguna pozten dizuten gauz txiki horietako bat.

orain: teaser from debolex films on Vimeo.

Bai, dagoeneko esan dute LoveOf74-k ta baita Miguel García berak ere beraien blogetan. Ta guk ere argi eta ozen esango dugu Orain bezalako lan eder eta mardulak nahi ditugula geure telebistan. Arrazoi asko daude tarteko. Horien arten bat edo beste eman genitzake:

• Bide horretatik joateak gure bertako eskena aberats eta anitza azaleratzen laguntzen duelako.
• Artea, musika, diseinua, sormena eta orokorrean herri txiki honetan zerbait egiten duen orori tartea ematen diolako bere ikuspegi eta ihardueraren berri emateko.
• Esfortzu pixka batekin ingelesa bezalako hizkuntza batetara itzuli ezkero azpititulu bidez kanpoan hemengo berri jakiteko formatu egokia bilakatu litekeelako.
• Aurrekontu izugarriren beharrik ez dela behar erakusten duelako edukin duin eta gertukoa egiteko.
• Dagoeneko denbora oso urrian bideo sorta galanta prestatu dutelako. Formatu arina eta atsegina suertatzen da.
• Online ere txukun mugitzen den formatua delako. Badugu beste antzeko adibide garbi bat: Nickdutnik. Factoría Crossmedia-ko lagunak ere bikain ari dira, Orain-ekin Debolex ari den bezala.

Beste behin Debolex egiten ari den lan polit hau eskertzeko aprobetxatuko dugu. Bejondeizuela eta segi ezazue horrela.

Era berean eskaera argia egiten diogu ETB-ri: segi aurrera Orain proiektuarekin. Gaur, hemen eta Orain.

Zelan orain arte gure markagailuetan jasotako loturak jaso, konpartitu eta ez bakarrik CSS3a, HTML5a ere probatzera behartzen badiogu geure buruari…

Ziurrenik zuetako askok lotura hauek jasoak izango dituzue nonbait. Eguneroko kontsultarako direnak aukeratu eta horiek gordetzeko balio dit niri. Zuentzat ere baliogarria izatea espero dut.

Tutorialak:

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

Cheatsheet-ak:

• Woork-ek Antonio Lupetti-ren cheatsheeta (eta beste bat berarena)
• HTML5 Canvas Cheatsheet
• HTML5 Pocket Book
• Smashing Magazine (PDF, 76 kbytes.)

Glosarioak:

• HTML5 Glossary

Demoak:

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

Balioztatzaileak:

• W3C Markup Validation Service (betikoa)
• HTML5 Validator
• HTML5 & CSS3 browser support

Nabigatzaileen soportea:

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

ID eta klaseen nomenklatura CSSan:

• HTML5 id/class names
• HTML5erako prestatzen Jon Tan-en klase semantikoei esker

Denetarik:

• HTML5 Reset Stylesheet
• 52Framework, HTML5 eta CSS3 erabiltzen duen framework bat

HTML5ekin egindako webguneen galeriak:

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

OHARRA: Post hau aldatzen joango da bestelako baliabide interesgarriak topatzen noan arabera.

Asteburu honetan Zelai landetxera itzuliko gara Linking Paths gure lagunekin. Bertan izan ginen Rails Rumble-ean parte hartzen, eta Parlio) egin genuen elkarrekin. Oraingoan, Desafío Abredatos-ean parte hartzeko izango gara bertan. Zer den hori? Ikus dezagun zer esaten duten beraien webgunean:

Desafío AbreDatos 2010 48 datu publikoetan oinarrituriko zerbitzuak modu azkar batean garatzeko 48 orduko lehiaketa bat da.

Zure taldearekin izen eman eta parte hartu dezakezu oraindik. Zergatik ez?