Abel Sutilo - Creatividad Interactiva

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

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:

• la “Entrevista a Flapa” por Comando Alt Suprimir,
• la “Charla Blogs de humor” para el IV Maratón PodcastBlog 2009, dirijida por flapa, y
• la charla “Humor en los podcast” en (de nuevo) Comando Alt Suprimir,

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.

Gráfico de La Ignorancia me mata

Si no fuera por desarrolladores que crean y mejoran Wordpress; si no fuera por diseñadores web que distribuyen gratuitamente sus plantillas; si no fuera por todo esto, insisto, la mayoría de la gente que escribe sólo serían meros lectores y comentaristas. Éste es un artículo destinado a los profesionales de algún campo que desean participar en la blogosfera .

El profesional llega a la red

Al igual que usted, muchos profesionales de diferentes campos (abogados, médicos, escritores, periodistas, actores, etc) se aventuran a aprovechar las bondades de un sistema de gestión de contenidos como Wordpress y contratan un dominio y un alojamiento para crear su propio web con formato de bitácora, enriqueciendo así los contenidos de la llamada blogosfera en castellano. Esto es realmente genial. El primer paso, una vez el sistema de gestión está en funcionamiento, es buscar una plantilla gratuita aparente sobre la que comenzar a publicar el discurso profesional.

Sobre lo que no se insiste mucho en la blogosfera, y a mi particularmente me gustaría recordarle, es sobre los inconvenientes a la hora de tener una de estas plantillas. Obtener un diseño gratuito tiene un precio que el profesional a veces no se para pensar: su web se puede parecer a la de cientos, miles o cientos de miles. Y eso alejará de sus lectores la idea de que se trata de alguien únic@, diferente e, incluso peor, la profesionalidad de su discurso. Para bien o para mal vivimos en un mundo que se mueve en parte por la estética, donde las primeras impresiones son vitales.

Valor al contenido y al contenedor

Cuando usted vaya de paseo por la red no percibirá importancia en este discurso que acabo de anotar. Principalmente leerá que lo importante es el contenido que aportará al mundo. Sin duda, esto es una máxima realmente cierta, aunque incompleta.

• El contenido lo pone usted, por lo que damos por solventada esta faceta de su bitácora.
• Ahora bien, por un lado lo atractivo, lo exclusivo y lo bello tiene el mismo peso e importancia que el contenido. Hasta el punto que un producto puede justificar su precio (o disimularlo) sólo porque es bonito.
• Por otro, no debe olvidar que el diseño de su bitácora debe tener más allá de la estética, una funcionalidad concreta y específica cuya fórmula sólo podrá hallar con un estudio detallado de sus necesidades de diseño.

El profesional confiando en el profesional

No se sienta ofendido si alguien le recomienda un lavado de cara de esa plantilla gratuita de su bitácora profesional. El diseño de un blog no consiste únicamente en tener más o menos gusto al elegir una paleta de color. Al igual que otros profesionales confían en el criterio que usted dispone en su campo, podrá devolver esa sinergia haciendo contacto con profesionales independientes (freelances) del diseño y desarrollo web.

Ahora como cliente que, además, conoce en mayor o menor medida el medio en el que se va a disponer, déjese aconsejar sobre los principales puntos que definirán la estética de su sitio que cualquier profesional con suficiente experiencia sabrá solventar:

• Target o público al que se dirije,
• Estudio del listado de opciones tipográficas,
• Creación de una mínima identidad corporativa como algún logotipo identificativo,
• Estudio de la navegación y usabilidad de su sitio,
• Accesibilidad en la medida que el proyecto lo requiera,
• Optimización de sus hojas de estilos y estructura xHTML de los archivos de su plantilla
• Etc.

Las mejores plantillas para Wordpress

En definitiva, lamento decirle que las mejores plantillas para Wordpress no las encontrará en ningún listado de descargas. Porque su caso, como profesional que quiere crear discurso en la red, es único e irrepetible.

Mi consejo más sincero basándome en mi experiencia profesional es que elija una plantilla gratuita con licencias Creative Commons que le permitan modificarla (esto puede ahorrarle algunos costes ) y de inmediato busque a través de las diferentes redes sociales que se le disponen para ello, a un profesional independiente cualificado que le ayude a solventar su necesidad. Para solventar temores, considere que podrá rentabilizar su inversión y la actual situación económica posiblemente jugará a su favor.

Una pequeña broma para finalizar. Si usted como profesional se aventura a realizar esta búsqueda, yo como profesional del diseño me comprometo a no hacer periodismo ni operar a nadie :)

Screenshot de premassagar

Aunque parezca extraño, una de las cosas que más me ha costado diseñar en este sitio personal han sido los comentarios. Muchas son las preguntas que debes hacerte antes de ponerte manos a la obra.

Lo bueno de un sistema de gestión de contenidos como Wordpress es que te facilita muchísimo esta labor. Ya sabes que la mayoría de las plantillas (templates) que están a tu disposición cuentan con la integración de comentarios con avatares (leídos desde Gravatar) o el cebreado de color para los mismos (comentarios par, comentarios impar y comentarios del autor). Solventados estos problemas las principales cuestiones que has de plantearte a la hora de diseñar tus comentarios son:

Uso y tamaño de los avatares

Aunque por defecto los avatares se presentan en la mayoría de los sitios con unas medidas “estándar” (unos 48×48 pixel), nunca descartes la posibilidad de presentarlos a un tamaño mayor o, incluso, no presentarlos. Por ejemplo:

• En un sitio web dedicado al diseño pueden participar diseñadores que tendrán, supongamos, bonitos avatares. Si aumentas el tamaño se verán más atractivos y complementarán el diseño de tu sitio con toques de diseño, color y creatividad.
• Sin embargo, en un sitio web con formato blog que genere comentarios largos (debates), los avatares podrían robarle mucho espacio al principal protagonista de tu sitio: el texto. En casos extremos no es descabellado prescindir de ellos.

Estructura visual del comentario

En resumen, los comentarios de tu sitio contienen tres partes:

• Autor (nick, sitio web y avatar)
• Metadatos (enlace, hora y fecha de la publicación)
• Comentario (el comentario en sí)

No necesariamente los metadatos tienen que presentarse junto al nombre del autor. Recuerda que tu intención es maquetar con la ayuda de tu hoja de estilos una presentación mejorada y usable de los comentarios. Concibe los datos a presentar como las capas que dispones para crear en tu modelo y juega un poco con ellas. Te propongo algunos ejemplos de wireframes para comentarios:

Seguro que con un poco de imaginación puedes sacar decenas de modelos.

Diseño gráfico de los comentarios

Una vez decidas el boceto (wireframe) de tus comentarios, te será mucho más fácil diseñarlos y posteriormente maquetarlos. Para la labor de diseño debes empaparte de los blogs que más te gustan para anotar acabados y tener en cuenta varios factores además de todo lo señalado:

• Tipografía
  
  Si sueles obtener comentarios cortos, considera la opción de ofrecer una tipografía de mayor tamaño para que luzca mejor. Si sueles obtener comentarios extensos, trabaja las propiedades de interlineado (line-height) y espacio entre letras (letter-spacing) para que la lectura no resulte agotadora. En cualquier caso siempre procura que sean legibles y que la tipografía contraste lo suficiente con el color de fondo.
• Formato
  
  Procura que tu formulario de comentario permita el uso de etiquetas HTML para enriquecer los textos: los usuarios con más experiencia sabrán valorarlo. Testea y prepara todas estas etiquetas desde tu hoja de estilos para evitar sorpresas posteriores.
• Mensajes
  
  Enriquece la estructura de tus mensajes en los comentarios (error, moderación) con hoja de estilos.

Este es un tutorial muy específico y fácil (para el usuario medio y principiante de Photoshop) que me han pedido algunos amigos en relación a la fotografía que uso en la mayoría de los perfiles que tengo por estos mundos de Internet. Se trata, sin más dilación, de mejorar la fotografía de nuestros perfiles dándole un poco de gracia a una fotografía (plano medio) en blanco y negro. Yo he elegido para la muestra la fotografía de dos de mis amigos de flapa.

De color a blanco y negro

Lo primero que vamos a hacer es abrir nuestra fotografía en photoshop tal y como la hemos tomado con nuestra cámara de fotos (digital, supongo y espero :-):

Lo siguiente que vamos a hacer es corregir los niveles (Imagen > Ajustes > Niveles) de nuestra fotografía. Este es un paso básico que recomiendo siempre al empezar cualquier retoque fotográfico. Nosotros vamos a constrastar un poquito la imagen, acercando levemente las flechitas de los extremos hacia la mitad:

Para no estropear la fotografía original, vamos a trabajar sobre una capa duplicada (por si tenemos que volver a rescatar la original). Seleccionamos la capa actual en el panel de capas y con el botón secundario del ratón hacemos click sobre ella seleccionando “Duplicar capa” en el menú emergente.

Finalmente, para pasar a blanco y negro nuestra fotografía, hacemos click sobre la nueva capa duplicada para seleccionarla y nos vamos a Imagen > Ajustes > Desaturar. Inmediatamente la imagen se volverá blanco y negro (pero en un gráfico RGB, por lo que podremos añadir color). A continuación duplicaremos de nuevo ésta capa para trabajar sobre una tercera.

Un paso alto

Lo siguiente que queremos hacer es darle fuerza al retrato. Para ello vamos a marcar o máximo posible los rasgos del rostro y el cuerpo sin perder luz en la fotografía. Comprobando que tenemos la tercera capa seleccionada, nos vamos a Filtros > Otros > Paso alto. En el cuadro de diálogo emergente podréis configurar el radio del filtro. Como veréis el filtro crea un negativo de la imagen con halos en los bordes externos de la figura. La nitidos de dichos halos es lo que nos interesa en este caso. Yo marqué un radio de 9,7. Vosotros probad según la fotografía que uséis.

Aplicado dicho filtro sobre la capa lo siguiente que debéis hacer es desplegar el menú de opciones de fusión de capas y seleccionar Luz linear. Comprobaréis que la fotografía ha cobrado mucha más fuerza. A continuación seleccionamos la dos capas en blanco y negro y las acoplamos para convertirlas en una sola imagen.

Recortando la figura

Para finalizar, vamos a recortar la figura. Muchos usuarios de nivel básico usan Photoshop únicamente para esta tarea, pero sin conocer realmente que existen muchas opciones para realizarla. Aqui os muestro la más segura, de tal manera que si os equivocáis recortando, por muchos pasos que déis siempre podréis recuperar la figura original.

Pulsando el icono de nueva capa en la parte inferior del panel de capas, creamos una nueva capa vacía entre las dos capas que tenemos actualmente:

Desactivamos la visibilidad de la capa superior para ver la nueva capa que hemos creado. Como está vacía, la rellenamos con un color o un degradado:

Usamos de nuevo el menú de opciones que están al pie del panel de capas y, con la capa de nuestra foto retocada, seleccionamos “Añadir máscara de capa“. Se creará en la capa un marco blanco que es nuestra máscara.

Importante: La máscara de capa nos vale para ocultar ó mostrar zonas de la capa sin dañar la foto original. Selecionando la goma de borrar podremos ocultar zonas de la capa cuando el color de fondo es negro y podremos mostrar partes de la capa cuando el color de fondo es blanco. Si en algún momento nos arrepentimos de todo el proceso, sólo tendremos que arrastrar el cuadro blanco de la máscara de capa a la pequeña papelera que tenemos debajo y eliminar la máscara. En seguida recuperaremos la fotografía enmascarada.

Dicho esto, seleccionamos un pincel adecuado para nuestra goma de borrar y nos disponemos a ocultar a través de la máscara de capa las zonas que correspondan. Usa el zoom y reduce el pincel de la goma de borrar para los pequeños detalles.

Componiendo

Finalmente vamos a realizar la composición. Duplicamos por seguridad la capa recortada y la reescalamos (Edición > Transformar).

Creamos una máscara de capa en la nueva capa que hemos reescalado y degradamos la parte inferior de la figura. Con esto conseguimos disimular el corte inferior.

Hacemos doble click en la capa que estamos trabajando y se nos abrirá el Panel de estilos de capa. Seleccionamos la primera opción de “Sombra exterior” y configuramos los ajustes para crear una sombra al rededor de la figura.

Y eso es todo!

Repitiendo toda la operación en varias fotografías puedes crear una foto para perfiles de grupo. Espero que o resulte de utilidad estos trucos de iniciación con Photoshop.