Fotoilustración: en tierra de nadie

Gracias a las redes sociales en línea de creativos, tematizadas y de índole profesional, se va asentando una nueva Cultura Visual que inunda nuestros fondos de pantallas y enlaces compartidos en Facebook o Twitter. Entre esos nuevos giros o aportes gráficos a la Cultura del Diseño —término en el que otro día nos detendremos— hay una nueva línea gráfica en torno a la fotoilustración (photoillustration) de la que es difícil escapar a sus encantos.

Hay mucho material publicado en torno al flujo creativo que llena la autovía de la fotoilustración, incluso hay miles de tutoriales para conseguir resultados asombrosos a golpe de click, capa a capa en Photoshop. El problema de este huracán de información que encontramos en las redes sociales de creativos en linea es que arrasa con la capacidad de análisis en favor de imitar la forma en el menor tiempo de producción posible. “3 pasos para conseguir fuego en Photoshop“, “5 técnicas para crear un fondo marino en Photoshop“, etc.

Todas esas técnicas y tutoriales están muy bien —me declaro consumidor de esa información— pero… ¿toda fotografía procesada por Photoshop deja de ser fotografía? ¿Cuándo una fotografía es una fotomanipulación? ¿Qué diferencia hay entre una fotomanipulación y una fotoilustración? ¿Donde termina la fotoilustración y empieza la ilustración? Es hora de hacerse las preguntas, aunque no podamos responderlas todas de manera exacta.

“¡Y qué más da, Abel! ¡Qué manía de etiquetarlo todo, qué manía de encasillar!”, dirán algunos. Y es respetable, sin embargo en el caso que nos ocupa es más que necesario por dos motivos:

  • En primer lugar no podemos obviar que es inherente al proceso creativo cuestionarse así mismo constantemente para analizar el mundo en el que se encuentra y situarse en él. Es una actitud que le ha dado nombre y apellido a todos los movimientos pictóricos y fotográficos. Y esta forma de etiquetar la creatividad no debería diluirse en la era digital.
  • El segundo lugar, la definición o etiquetado de una técnica de creación, nos dará un compendio de normas técnicas y estéticas a tener en cuenta. Por lógica estética y formal, habrá prácticas en la producción de una creatividad en formato fotoilustración que nunca funcionarían en una fotografía o en una ilustración.

Definiendo la fotoilustración

Y eso que la fotoilustración no es un invento extraído de las entrañas de la última versión Photoshop. De eso nada. La fotoilustración nace del vientre de la Publicidad (finales del s. XIX) como mecanismo de menor coste (frente a la fotografía) para solventar las necesidades de promoción y posicionamiento de los productos. En el fantástico libro El arte del póster (Editorial Lisma) podemos hacer un seguimiento de su evolución, desde lo estrictamente pictórico o el Collage, pasando por la ilustración con base fotográfica (ej. Gil Elvgren) hasta los días de la era digital.

Este aspecto de la fotoilustración quizás sea el más importante: la conjunción de sus elementos simbólicos generan un mensaje o historia en la mente del receptor, unas veces más abstracto que otro. Es un valor añadido que la fotoilustración hereda de su madre la ilustración. La diferencia entre fotoilustración y fotomanipulación es prácticamente imperceptible visualmente. Quizás a un nivel más filosófico parece que, a diferencia de la fotoilustración, la fotomanipulación no tiene la obligación de incluir un mensaje, funcionando como escaparate de lo estrictamente estético. Con esto llegamos a un punto en que podemos definir la fotoilustración. En el blog Acerca de la fotografía usan estas palabras:

Podemos considerar que es fotoilustración toda imagen fotográfica, sea compuesta de fotografías en collage y fotomontaje, electrónicos o convencionales; o de fotografía combinada con otros elementos gráficos que cumpla con la función clásica de la ilustración. Esta función la podemos resumir como aquella que tiene como finalidad la mejor comprensión de un objeto, de un hecho, de un concepto o de una idea, bien representándola miméticamente o bien interpretando visualmente rasgos esenciales para su comprensión, a través de procedimientos de retórica visual y de simbolización.

La producción de la fotoilustración

Llegados al punto en que hemos definido en la medida de lo posible la fotoilustración, tenemos que plantearnos una cuestión antes de buscar “cómo hacer fuego con Photoshop” o “cómo simular un fondo marino con un par de filtros“: ¿Qué quiero contarle al mundo con esta fotoilustración?.

Siendo así cómo habrá que valorar la calidad del trabajo; promedio de destreza técnica y retórica visual. Ambos lados de la balanza deberán estar compensados. Por otro lado, para diferenciarla aún más de la fotografía y la fotomanipulación, la fotoilustración podría permitirse saltarse las leyes de la física, la perspectiva, la proporción, etc…, en favor de acentuar la retórica o simbolismo gráfico del mensaje o historia que queremos hacer llegar. A pesar de ello, la línea entre la fotoilustración, la fotomanipulación, el diseño gráfico y el arte digital sigue siendo a veces imperceptible.

Creativos de referencia

Sven Prim, Jerico Santander, Peter Jaworowski, Matthew Albanese, Alberto Seveso, Pawel Nolbert, Archan Nair, Roberto Gamito, Marcin Cecko, Mike Campau y Peter PRN es un pequeño extracto de la infinita lista de nombres que componen el campo de la fotoilustración y la fotomanipulación.

Comprobaréis que los orígenes son diversos: unos fotógrafos, otros ilustradores, otros diseñadores gráficos… Absolutamente todos reconvertidos en esta nueva especie de malabaristas de la retórica visual y los filtros de Photoshop.

Trabajando CSS en equipo (I)

El proceso utópico en el desarrollo de un website sigue una serie de pasos tan marcados que podríamos designar grupos de tareas a un perfil profesional específico. Lo utópico es complicado de alcanzar, especialmente cuando las estimaciones de tiempo de producción se acortan en favor de un mejor servicio. Y es ahí donde nacen perfiles mixtos (diseñador de interacción/diseñador web; diseñador web/maquetador; maquetador/desarrollador).

A su vez, estos perfiles mixtos provocan que el desarrollo de una tarea pase por varias manos —en este caso, la creación de la Hoja de Estilos—. ¿Quieres ahorrarte más de un mail o reunión con tus propios compañeros? ¿Quieres hacer el trabajo más fácil a lo demás y obtener ese detalle de vuelta? Os dejo aqui algunas ideas que he experimentado en los últimos años y que harán el trabajo mucho más fluido cuando el código baila de un editor de texto a otro:

Crea un arsenal de estilos genéricos

¿Cuantas veces has tenido que crear una clase nueva porque, en una sección determinada, la caja necesitaba un padding superior de 10 pixels? ¿Cuántas veces has tenido que añadir otra clase para pintar de una manera especial un único texto específico? ¿Cuántas veces has necesitado modificar el alto de un contenedor con la llegada, a última hora, de una caja diferente?

Todo esto provoca ruido en tu Hoja de Estilos y hace que lo que comenzaste creando de manera ordenada se transforme en un gallinero de clases específicas para un sólo elemento. Esa no es la idea: ya sabes que una clase debe aportar valor a un cojunto de elementos similares, sino estaríamos hablando de un identificador. ¿Cómo preverlo? Crea un arsenal de clases con valores genéricos:

/* VALORES GENERICOS */

/* limpiar flotacion */
.clear {clear:both;}

/* flotacion */
.flota-izquierda {float:left;}
.flota-derecha {float:right;}

/* textos */
.alineacion-derecha {text-align:right;}
.alineacion-izquierda {text-align:left;}
.justificado {text-align:justify;}
.centrado {text-align:center;}
.subrayado {text-decoration:underline;}
.tachado {text-decoration:line-through;}

/* disposicion */
.disponer-bloque		{display:block;}
.disponer-linea		{display:inline;}
.oculto			{display:none;}

/* padding 5  (repetir con padding 10, 15, 20, etc...) */
.padding-5 {padding: 5px !important;}
.padding-top-5 {padding-top: 5px !important;}
.padding-right-5 {padding-right: 5px !important;}
.padding-botom-5 {padding-bottom: 5px !important;}
.padding-left-5 {padding-left: 5px !important;}

/* margin 5 (repetir con margin 10, 15, 20, etc...) */
.margin-5 {margin: 5px !important;}
.margin-top-5 {margin-top: 5px !important;}
.margin-right-5 {margin-right: 5px !important;}
.margin-botom-5 {margin-bottom: 5px !important;}
.margin-left-5 {margin-left: 5px !important;}

/* anchos genericos (agregar mas si necesitas) */
.width150 {width:150px !important;}
.width140 {width:140px !important;}
.width130 {width:130px !important;}
.width120 {width:120px !important;}
.width110 {width:110px !important;}
.width100 {width:100px !important;}

/* alturas genericas  (agregar mas si necesitas) */
.height150 {height:150px !important;}
.height140 {height:140px !important;}
.height130 {height:130px !important;}
.height120 {height:120px !important;}
.height110 {height:110px !important;}

Justificando el uso de !important;

Es cierto que se abusa en esta propuesta del valor !important;. La idea es anteponer estos valores a cualquier otro indicado a un elemento HTML. Teniendo presente que estos valores genéricos se deberían situar al principio de nuestra Hoja de Estilos, la propiedad !important lo que hará es luchar contra la herencia provocada por la cascada.

Modo de empleo

De esta manera si tuviéramos que modificar valores en una caja ya creada, del tipo:

Lorem ipsum dolor sit amet

Podríamos hacerlo cómodamente con los valores de nuestro “arsenal”:

Lorem ipsum dolor sit amet

Notas

  • La idea es nombrar las clases con la propiedad que contienen para comunicar al compañero los últimos cambios aportados al elemento a través de la maquetación . Leyendo el código podemos averiguar qué modificaciones se han realizado
  • Insisto: el motivo de crear el arsenal es agilizar las correcciones de última hora o indicar salvedades en cajas y otros elementos. Aunque podríamos construir una página completa con un buen arsenal de estilos, no lo aconsejo. Para maquetar normalmente se ha de seguir los conceptos generales en el desarrollo de las Hojas de Estilo (cascada y herencia).

El el siguiente artículo veremos otras metodologías que nos facilitarán el trabajo y desarrollo en equipo de las Hojas de Estilo.

Parece que el plugin Syntax Highlighter provoca algunos fallos de presentación en el código CSS propuesto. Si quieres copiarlo, utiliza la vista de texto plano por favor. Disculpa las molestias.

Por qué sí puedes usar Garamond en la web

Garamond

David Kadavy escribió hace unos días un interesante artículo donde explicaba las complicaciones de usar una tipografía tan conocida como Garamond en nuestro diseños web. Extrapolando el mensaje de su artículo, se reformula la pregunta: ¿es recomendable usar tipografías con serifa en la Web?

El motivo que me anima a escribir este artículo es intentar completar el artículo de Kadavy con algunos detalles sobre metodología de trabajo. Si bien es cierto que existen una serie de normas que todos debemos acatar independientemente del medio, un diseñador web no debería trabajar la tipografía tal y como lo hace un diseñador gráfico.

Cuando un diseñador gráfico elabora un diseño para la imprenta se enfrenta a una serie de problemas que están íntimamente relacionados con la labor física y mecánica de la imprenta. Sin embargo, un diseñador web no debería entender la tipografía como algo estático, fijo, ni siquiera físico. Un diseñador web debe considerar la tipografía como un elemento dinámico en cuerpo y forma que depende del dispositivo del usuario. Esta es la diferencia, por lo tanto, entre un diseñador gráfico y un diseñador web que trabajan con la tipografía:

  • El diseñador gráfico entenderá la elección tipográfica como un ideal inamovible y procurará que ésta llegue al usuario, intentando solventar todos los inconvenientes técnicos sin dejar de vigilar la legibilidad de la misma.
  • El diseñador web debería entender la elección tipográfica como un conjunto de posibilidades condicionado por el dispositivo con el que navega el usuario.

Por ello, la cuestión de la tipografía en la web no se ha de reducir a serifa sí, serifa no. La cuestión es tomar como epicentro del diseño al mismo usuario, que condicionará el resultado gráfico final:

  1. Las tipografías deberán tener tamaño porcentuales en relación al tamaño de la pantalla y así mismas (%, em, small, medium, large, etc)
  2. Podemos forzar la elección de un juego tipográfico (Google Font Directory, @font-face), pero ser flexibles con los cambios en nuestro diseño, según el dispositivo de navegación, nos asegurará una audencia mayor
  3. La elección no se ha de limitar a un único juego tipográfico. Podemos agrupar posibilidades dependiendo de las tipografías con las que cuente el usuario en su dispositivo
  4. Las hojas de estilos deberán detectar el dispositivo y ofrecer una alternativas tipográfica en relación al medio utilizado.

En relación a este último punto, podemos ayudar a usuarios cuyo dispositivo tenga una pantalla de menor tamaño (dispositivo móvil, principalmente) —donde leer un texto con serifa es, obviamente, una dificultad—. Para ello debemos detectar los medios a través de los que accede un usuario a nuestro sitio:


Y en la Hoja de Estilos de dicho medio ofrecer las alternativas tipográficas (u otros valores relacionados con el diseño):

p {font-family: sans-serif;}

Además de todo esto, actualmente el diseñador web cuenta con el apoyo de un gran soporte de la regla @font-face, así como una colección de navegadores para distintos dispositivos que apuestan por un suavizado (antialiasing) a la hora de renderizar CSS.

Por lo tanto, un diseñador gráfico y un diseñador web comparten la raiz de los problemas tipográficos, pero no la metodología de trabajo, ni mucho menos las soluciones, por las condiciones de cada medio.

Cantidad de bocetos para un diseño web

Charlando con Juanj0 vía Twitter, hemos intercambiado una breve experiencia común entre todos los diseñadores web: qué cantidad de bocetos presentar a un cliente para el diseño de una web y cómo guiarlo en las elecciones. El tema es complejo, asi que comparto con vosotros una serie de ideas basadas en mi experiencia.

Tu método de trabajo

Lo primero que debes valorar es el método de trabajo propio. Si estás dentro de un equipo de trabajo y se te exije presentar más de un boceto, irremediablemente no tienes escapatoria y tendrás que pensar en varias versiones. Si por contra eres profesional autónomo ó tienes las riendas de la dirección de arte y puedes elegir el número de bocetos a entregar, tendrás la opción de presentar un único boceto (siempre supeditado a otras variables en la labor).

El cliente

Variables como por ejemplo el tipo de cliente. Quizás tu cliente esté muy perdido a nivel gráfico de sus necesidades (a priori te contrata por eso). Es indiscutible que el que más sabe de su negocio es el cliente, pero no todos los cientes tienen claro los conceptos gráficos que deben servir como caballo de batalla para la presentación de su negocio/producto en la red.

Como véis tenemos una serie de posibles combinaciones que, además, pueden alterarse según tu metodología de trabajo o los conocimientos y/o requerimentos (caprichos también, todo hay que decirlo) de tu cliente. A continuación una guía rápida de premisas a tener en cuenta en ambos casos.

Cuando vayas a presentar un único boceto

En el caso de que optes por ofrecer a tu cliente con un único boceto, ten en cuenta lo siguiente:

  • Pide referencias a tu cliente.
    Por ejemplo: su identidad corporativa (siempre), sitios webs que le gusten, que visite con asiduidad, los sitios webs de la competencia, etc.
  • Tómate mucho más tiempo en analizar el sector para el que diseñas.
    Tienes sólo una tirada para dar en la diana. Aunque a posteriori cuentes con corrrecciones, prevee y minimízalas analizando fríamente la disposición, forma, contenido y trabajos tipográficos de otras webs del sector de tu cliente y sus competidores.
  • Respeta y adapta la identidad corporativa de tu cliente.
    Tienes razón, quizás ese logo de tu cliente no encaje bien del todo en la cabecera de tu fantástico sitio 2.0. No te agobies. Intenta respetarlo y cuenta con las opciones del manual de identidad corporativa (negativos, calados, etc). Si aún así, al poner ese logotipo en la cabecera de tu boceto no puedes conciliar el sueño por las noches, plantea humildemente el rediseño de la identidad ofreciéndole un análisis riguroso de por qué no funciona (no vale simplemente “que no te guste”, ya que desconoces quién/cómo/cuándo/por cuánto otro compañero ha realizado ése trabajo). Esto supone mayor costo al cliente, quizás no previsto, asi que mentalizate para una negativa y tener que lidiar (como comentaba antes) con dicha identidad.
  • No diseñes sólo para ti.
    Quizás si te piden un único o boceto es porque el cliente confía en tu estilo. Sin embargo esto no es excusa para que diseñes sólo para satisfacer tu portafolio. No tomes tu único boceto como “una web de diseño”: céntrate para el sector que estás diseñando y adapta todos tus conocimientos.
  • Sé flexible con las correcciones.
    Insisto: aunque la entrega de un único boceto significa que el cliente confia en tu criterio, no descartes correcciones a posteriori, porque siempre las hay por pequeñas que sean.
  • Defiénde tu boceto.
    Que tengas como respuesta correcciones no significa que tengas que acatarlas todas. Actúa profesionalmente y argumenta el boceto y guía a tu cliente. Quizás muchos de los cambios que te piden son inviables y tu cliente no sepa que a posteriori en una labor de maquetación puedan suponer algún problema de visualización (diseño en layouts fluidos, contenido administrable, etc). Prevee estos problemas desde el boceto.

Cuando vayas a presentar varios bocetos

La mayoría de las premisas anteriormente citadas son necesarias en la entrega de uno o varios bocetos. Cuando entregues varios bocetos, debes tener en cuenta lo siguiente:

  • Tu tercer punto de vista.
    Si trabajas con 2 bocetos te costará menos. En el caso de que sean 3 puede ser más dificil, ya que has hecho las que quizás consideres “versiones antagónicas”. Intenta escapar de ti mismo, analiza otros estilos con los que te sientas cómodos y que aún no has probado por dinámica de trabajo (y solucionen la gráfica del cliente, por supuesto) y hallarás ese tercer punto de vista.
  • No flaquees en ninguna versión.
    Si haces 3 bocetos —uno muy elaborado, tu “preferido”; y otros dos más “flojos”— pensando que escogerán el que a ti te gusta porque se ve “claramente” que es el mejor, quizás el tiro te salga por la culata. Es posible que tu cliente escoja lo que más le gusta de cada uno, así que si no quieres acabar maquetando una web que “odias” cuando tú mismo la has diseñado, no flaquees en ninguna versión.
  • Prevee la mezcla.
    Lo idea es que se escoja una única solución, pero como comentaba más arriba la mezcla nunca está descartada. Prevéela y trabaja en Photoshop organizando todas tu capas por grupos de carpetas (nombrarlas, agrupalas unas dentro de otras) con la idea de que puedas posteriormente unir todo a golpe de click en un solo archivo .psd.
  • Una versión no es un cambio de color.
    Dependiendo siempre de lo estipulado con tu cliente, procura que una versión no signifique un cambio en la gama cromática. ¿Estás seguro que sólo hay un layout posible? ¿El menu principal realmente debe estar ahí? ¿Seguro que ése es el único juego tipográfico para titular, para textos, etc? ¿Ése tamaño de las imágenes es el correcto? En cada nueva versión vuelve a replantear los conceptos.
  • Una corrección no es versión.
    Sé profesional y no sumes a la cuenta de tu cliente las correcciones como nuevas versiones. A su vez, defiende tus argumentos indicándo al cliente que un rediseño total de una versión elegida no es una corrección, sino un nuevo boceto.

Como véis, lamentablemente no hay una regla mágica que especifique el numero de bocetos a entregar. Lo que si espero es que esta pequeña guía os sirva en el futuro. Suerte ¡y a diseñar! :)

Podcasting

Headphones

Fotografía de aloshbennett en Flickr

A raiz de las participaciones que el proyecto flapa —ya sabéis, humor irreverente (+18)— ha hecho en el sector de la podcastfera, como:

tanto mi colega Daniel Calderón (aka Astracán) como yo mismo nos hemos puestos a investigar en pararelo cómo funciona este sector de la blogocosa dedicado a la creación de contenido propio cuyo soporte final es un archivo de audio.

Cómo crear un podcast

Los podcasteros son generosos y comparten en varios sitios los recursos y conocimientos necesarios para que podamos crear nuestro propio podcast de manera sencilla en pocos pasos. Además de estos recursos que os señalo, podéis encontrar mucha más información en sitios como SlideShare, donde existen presentaciones que nos detallan todos los trucos paso-a-paso para la creación:

Y no sólo presentaciones del estilo HowTo podéis encontrar en SlideShare. También otros expertos del medio nos ofrecen presentaciones de serios análisis sobre el mundo del podcast.

Contenidos de la podcastfera

Llevo poco tiempo escuchando podcast. Aún así creo que es el tiempo suficiente como para poder lanzar un par de opiniones y/o valoraciones desde dos perspectivas diferentes: como consumidor de contenidos y como creador de contenidos.

  • Como consumidor de contenido debo decir que en general me gustan todos los podcast con los que me voy encontrando. Noto que en la mayoría de los podcast de entretenimiento, quizás podríamos decir “generalistas“, hay una cierta herencia del formato de radio que prodigaba Pablo Motos con su “No somos nadie“. Salvando las diferencias técnicas y profesionales, estos podcast funcionan realmente bien. Y es muy posible que sean una mejor alternativa a la lecturas de infinitos post en horario de oficina.
  • Como creador de contenidos veo claramente que el formato está, en parte, por explotar. Es cierto que además de los podcast generalistas, también abundan podcast que tratan temas concretos (política, periodismo, deportes). El directorio es amplio. Aún así a nivel creativo el formato podría ser explotado con otras grandes ideas, tratando también más temáticas dentro de la ficción en audio. Y no soy el primero que se lo cuestiona, por supuesto. Supongo que poco a poco irán floreciendo nuevas temáticas —mejor o peor trabajadas, según los recursos y la habilidad de cada cual—, en las que los podcasteros puedan desarrollar su creatividad.

Yo y los podcast

La mejor forma de exponer estas ideas no consiste únicamente en redactar ester artículo. Como el movimiento se muestra andando, en el núcleo creativo de flapa estamos estudiando algunas ideas para llevarlas al formato podcast. De dicho estudio extraigo esta documentación que me ha parecido importante compartir con vosotros.