Comunicaciones y coordinación

Los proyectos tipo web requieren muy buena comunicación y coordinación con los distintos actores involucrados. En este documento reunimos algunos detalles para facilitar nuestra comunicación.

Comunicación base por email #

Nos comunicamos preferentemente por email, es un medio que permite:

  • Ordenar y establecer prioridades, estado y seguimiento de los asuntos.
  • Tener registro de lo que ya hemos comentado y poder realizar búsquedas sobre ello.
  • Revisar mejor los asuntos antes de dar una respuesta.
  • Comunicarnos en el mejor momento para cada actor involucrado.
  • Incluir elementos multimedia (imágenes, vídeos, archivos) que ayuden a la comprensión del mensaje.

En cualquiera de los casos, es importante que la comunicación por email exponga el asunto de forma clara y concisa (dentro de las posibilidades) para facilitar la lectura y compresión a todas las partes.

Comunicación de nuevas tareas #

Ten en cuenta los siguientes detalles para comunicarnos un cambio que hacer sobre un sitio web.

  1. Indica de forma clara y concisa qué hay ahora y a qué lo quieres cambiar.
  2. Indica detalles, por ejemplo si quieres que tenga algún color en concreto, un cambio sobre la tipografía, etc.
  3. También es útil que indiques el motivo y/o objetivo de este cambio, de este modo podemos hacerlos a la idea de qué se pretende conseguir.

Comunicación de errores o elementos a revisar #

En caso de que detectes un problema, error, algo que no creas que haya funcionado correctamente, te recomendamos seguir estos pasos para comunicarnoslo:

  1. Indica cuál ha sido el problema y cuál sería la situación sin el problema.
  2. Si está involucrado un mensaje de error copialo y pegalo en el email. Procura no transcribir de memoria porque dificultaría encontrar a qué problema se refiere el mensaje.
  3. Indica cómo has llegado hasta el problema.
  4. Siempre copia y pega la URL en la que sucede.
  5. En caso de que pueda ser de ayuda, adjunta capturas de pantalla o vídeos.

Coordinación con diseño #

Cuando nos coordinamos con asuntos de diseño los principales elementos que hay que poner en orden son los formatos, debemos comunicarnos usando formatos de archivo y escalas que ambos podamos usar, para ello hay que tener en cuenta lo siguiente:

Cuestiones base a tener en cuenta #

  • Los colores de un sitio web están en formato RGB (hexadecimal o decimal). Los formatos CMYK o pantone no podemos trasladarlos a web.
  • El tamaño y límites de un sitio web dependen del dispositivo con el que se visualiza, los diseños web no son un formato fijo, son interfaces interactivas adaptables. El diseño tiene que tener esto en cuenta.
  • Si bien la interfaz de un sitio web debe ser adaptable, hacemos adaptaciones visuales mayores en algunos tamaños. Esto es porque asumimos que en esos rangos de tamaño habrá dispositivos con cambios notorios en el modo de visualizar e interaccionar. Los límites entre dispositivos habituales son:
    • Menos de 767px de ancho: Móviles.
    • Entre 768px y 1024px de ancho: Móviles y tablets.
    • Desde 1025px de ancho: Equipos de escritorio.
  • La tipografía base habitualmente se configura en 16px.
  • Por motivos de eficiencia, es ideal que cualquier recurso gráfico esté en su versión vectorial o, en su defecto en una versión de bajo peso. Los formatos de imágenes, por orden de preferencia son:
    • SVG: Formato vectorial, formato límpio sin metadatos.
    • JPG: Formato para fotografías e imágenes que puedan soportar ligeras variaciones en sus píxeles. Formato RGB y calidad entre 8 y 9.
    • PNG: Formato para elementos con fondo transparente y elementos que no soporten variaciones en sus píxeles.
    • No es necesario proporcionar formatos WEBP o AVIF, serán generados por el sitio web en su caso.
    • No proporcionar recursos gráficos en formatos TIFF, PDF, BMP, AI, PSD, GIF, etc.
  • Las tipografías usadas deben estar disponibles para su uso en web. Además, por motivos de eficiencia recomendamos no usar muchas tipografías distintas, así como usar preferentemente tipografías de sistema.

Herramientas de creación de interfaz #

Actualmente, hay algunas herramientas que permiten a los diseñadores realizar una interfaz que pueda ser transmitida de forma fácil a los desarrolladores. Algunas de estas herramientas son:

  • Figma: Muchos trabajan con ella e indican que va genial.
  • InVision: Muy extendida en el mundo web.
  • Zeplin: Aunque sabemos que muchos usuarios de esta se han terminado pasando a Figma.
  • Sketch: Solo para mac.

Y en definitiva cualquiera que permita compartir la maquetación con un desarrollador de modo que pueda descargar de forma individualizada los recursos y leer las propiedades y espaciados de los elementos.

No recomendamos activamente Adobe XD porque Adobe ha cambiado ya varías veces su política para compartir con desarrolladores y desconocemos el estado en el que estará en el momento en que estás leyendo este documento.

En caso de que no uses ninguna de estas herramientas, tendrás que enviarnos los siguientes recursos e información:

  • Un archivo PNG a escala por cada vista del sitio web, con fondo normal y con fondo transparente.
  • Archivos de forma separada con los recursos gráficos incluidos: imágenes, logotipos, iconos, etc.
  • Todas las propiedades de cada estilo de letra usado en el sitio web: tipografía, tamaño en píxeles, color, interlineado, interletrado, peso, etc.
  • Detalles sobre cambios en interacciones (al hacer click, al pasar por encima, al encontrarse activo): Cambios de color, despliegues, etc.
  • Cualquier otro detalle que sea necesario para comprender el diseño, sus cambios e interacciones.