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.

Definición de CSS (meme)

Acid2 Test

Hace una semana que Pedro de CSS Blog inició un meme que consiste en definir en un frase (muy ingeniosa y creativa) el significado de CSS. El mensaje ha ido saltando a los blogs de amigos y conocidos, como Cristian Eslava, Andrés Nieto entre otros… Ángeles Portillo es la que me hace llegar el testigo. No es la primera vez que escribo de CSS en otro tono, sobre todo con un poco de humor.

Creo que es imposible escapar del conjunto diseño-funcionalidad. No sólo debemos ser exquisitos diseñando, también debemos ofrecer el producto o información de manera accesible, usable, sencilla. La base debe ser transparente y sin maquillaje, sino el diálogo resultará estrictamente superficial, centrado sólo en lo estético. En definitiva, queremos hacer bonitas faldas, sobre todo, para piernas que sostengan un mensaje auténtico ;-) He aquí, por tanto, la definición:

CSS es la falda que tu sitio ha de llevar para que el usuario adivine unas piernas que lo enamoren.

Reenvio el testigo memero a @dcalderon, @gruncho y @proyecto con idea de que lo continúen, sea vía blog, twitter, Facebook o cualquier otro, a gusto del consumidor :)

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! :)

Leo Burnett

Leo Burnett

Big ideas come out og big pencils

Así lo explica con palabras la agencia Leo Burnett, cuyo sitio web es una gran pieza que nos demuestra que, más allá de la blogocosa, determinadas marcas o proyectos siguen precisando de una herramienta como Flash, cada vez más potente, para promocionar sus productos o servicios.

Gracias a Javer Úbeda por este regalo a la vista ;)