Mi ponencia en WordCamp Marbella 2016: Diseño de Producto Digital con WordPress

Abel Sutilo en Wordcamp Marbella 2016

Pues sí, el pasado 10 de junio tuve la oportunidad de asistir como ponente a la WordCamp Marbella 2016.

En cuanto a mi charla, gracias al trabajo de Tres Pixels —fantástico, como siempre— podéis verla en el siguiente video. Tras el vídeo también encontraréis los slides de la presentación. Los comentarios, dudas, preguntas, o anotaciones son bien recibidos: la caja de comentarios están a tu disposición.

¿Quieres más sobre WordCamp Marbella 2016? En este artículo te cuento todo lo que viví ese día y algunas de mis opiniones sobre el encuentro.

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! 🙂

Diseño de comentarios en Wordpress

Add you comment

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:

comentario_modelo1
comentario_modelo2
comentario_modelo3

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.

Mi coeficiente cromático

Se trata de un simple test en que lo único que hay que hacer es ordenar los colores de cuatro filas según su orden cromático. Parece una tarea fácil, pero cuando empiezan a estar bien distribuidos empiezan las dudas. (Ateneu Popular)

Mi resultado

* Your score: 3
* Gender: Male
* Age range: 20-29
* Best score for your gender and age range: 0
* Highest score for your gender and age range: 1492
*Un 97% de agudeza cromática.

Realizar el test

Mike Mitchell

Mike Mitchell

Hacía un tiempo que no referenciaba ningún portafolio. Así que retomo la colección con otro enlace de lujo. Mike Mitchell es retro, amante de los videos juegos y los cómics, tiene un humor irreverente y, por supuesto, su manejo de la paleta no te va a dejar indiferente (y sin haberlo planeado me ha salido un pareado 🙂