Coordinación con diseño

Es importante que las áreas de diseño y desarrollo estén coordinadas para trabajar de forma eficiente y poder llegar a un buen resultado de la forma más cómoda posible para ambas partes. Cómo compartir el diseño, formatos, tamaños, cuestiones a tener en cuenta al crear una interfaz, adaptación a múltiples dispositivos, posibilidades de maquetación, etc son algunos de los detalles que hay que tener en cuenta.

En este documento recogemos muchos detalles que vienen de experiencias reales, seguramente muchos de ellos te puedan parecer obvios, sobre todo si has diseñado interfaces previamente, pero créenos que si lo mencionamos aquí seguramente es porque haya pasado.

En resumen #

El diseño debe comportarse como una interfaz y tiene que tener en cuenta que los anchos y altos de visualización son variables y necesitarán adaptaciones mayores a distintos dispositivos y modos de interacción.

Necesitamos que el diseño que crees podamos consultarlo sin necesidad de instalar software adicional, para ello hay muchas herramientas de diseño de interfaces que ofrecen formas de compartir el proyecto con desarrolladores o bien puedes enviarnos todos los recursos y descripción de detalles del diseño (espaciados, propiedades de las tipografías, etc).

Los recursos deben poder funcionar en web, por ejemplo las imágenes deben tener formato PNG o JPG, los recursos gráficos SVG o PNG, los vídeos MP4 con el codec H.264 muy comprimido optimizado para web y las tipografías deben estar disponibles en formato WOFF y WOFF2 así como tener licencia de uso como webfont (las tipografías publicadas en Google Fonts cumplen con esto, si están aquí es suficiente con que nos proporciones el nombre de la tipografía).

Sin resumen #

La interfaz #

El diseño debe comportarse como una interfaz, esto quiere decir que cuando esté funcionando habrá usuarios que interaccionen de determinadas formas con los elementos que componen el diseño.

Para esto hay muchos detalles a tener en cuenta, mencionamos algunos que pueden ser útiles:

  • Tener en cuenta que se verá dentro de un navegador y dentro de una ventana: Lo primero que hay que tener en cuenta es la escala a la que trabajamos, hay que tener cuidado con hacer todo proporcionalmente demasiado grande o demasiado pequeño. En los últimos años los sitios web han crecido en escala, antes se solía usar 12 o 14px como tipografía base para el texto y hoy se suele usar 16px. Cómo referencia puedes tener en cuenta cómo se puede visualizar el sitio desde el punto de vista de un usuario que acaba de venir desde google.com ¿se está encontrando con algo que en comparación es mucho más grande o mucho más pequeño?
  • Marcar los enlaces: Cuando hay un enlace dentro de un texto, cómo sucede aquí, necesitamos que el usuario sepa que ahí hay un enlace. Se suele usar el subrayado, pero se pueden usar otras estrategias como el cambio de color así como algún efecto al pasar el ratón por encima. No recomendamos usar estilos de tipografía como negrita o cursiva, porque hará que los enlaces se confundan con otros elementos.
  • Marcar la interacción: Mostrar los elementos con los que se interacciona de modo que se entienda que se puede interaccionar con ellos (y viceversa). Así como determinar qué sucede al interaccionar con ellos.
  • Coherencia visual (y por tanto de maquetación): Una de las primeras cosas que hacemos cuando realizamos una maquetación es factorizar todos los elementos todo lo posible porque lo primero que aplicamos son estilos que se aplican a todo el sitio web, y luego concretamos detalles vista por vista. Así por ejemplo aplicamos estilos globales al primer titular, segundo titular, tercer titular, etc. que serán los que apliquen de base en todas las vistas a menos que determinemos excepciones en sitios concretos. Con esto queremos decir que se tengan en cuenta los propios principios de coherencia visual del diseño porque también serán positivos para la maquetación.

Tamaño base #

El tamaño desde el que partir el diseño principal es totalmente con el que más cómodo se sienta el diseñador teniendo en cuenta cómo se mostrará en las pantallas y distintos dispositivos, no hay un tamaño estandarizado.

Aunque lo más vistoso es partir de un tamaño de escritorio, cada vez hay más diseñadores que parten del formato móvil y es a ese formato al que dedican más esfuerzos, porque en el fondo, a día de hoy, en general hay más visitantes por móvil que por escritorio, es una vista más importante.

  • Para quienes parten de escritorio, la vista que nos pasan normalmente tiene un ancho entre 800 y 1000px para el contenido y entre 1200 y 1400px para el ancho completo del sitio.
  • Para quienes parten de móvil suelen pasar el tamaño del último iPhone, simplemente porque es muy comercializado y durante mucho tiempo ha tenido tamaños de pantalla muy estables (aunque esto ya no es así), un buen ejemplo podría ser el iPhone 13 con 390px de ancho y 844px de alto.

En cualquier caso, sobre esto no hay nada escrito, el diseño es libre y puede que haya una buena idea en la cual el contenido del sitio web se divida en 4 columnas dentro de una vista adaptable de 1800px de ancho.

Adaptación a distintos tamaños y dispositivos #

El diseño debe ser adaptable, los elementos que lo componen tienen que poder cambiar eventualmente de tamaño, disposición, etc.

De cara a esto, no hace falta que todos los cambios y adaptaciones estén reflejados en diseño, las haremos directamente nosotros en maquetación haciendo transformaciones lógicas sobre los elementos. ¿Qué es una transformación lógica? Por ejemplo al reducir el ancho: Un texto simple se ajustará al ancho disponible, un elemento que se encuentre a dos columnas pasará a una columna.

Pero si que necesitaremos al menos una vista para ver cómo se resuelven en diseño distintos elementos que inevitablemente son distintos en móvil, como pueden ser: La cabecera, el menú, un elemento que tiene una frase encima, un cambio significativo de tipografía, etc.

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 que solemos usar son:

  • Menos de 600px de ancho: Móviles en formato vertical.
  • Entre 768px y 1024px de ancho: Móviles y tablets.
  • Desde 1025px de ancho: Equipos de escritorio.

Hay que tener en cuenta que en general las diferentes versiones usan los mismos contenidos pero aplicándoles transformaciones visuales. Con esto me refiero a que no ponemos elementos distintos pero si los disponemos de un modo distinto. Puede haber excepciones en las que se algunos elementos cambien, pero esto es algo que intentamos evitar para facilitar la edición de contenidos a quienes gestionen a posteriori el sitio web.

Adaptación a retina #

Retina es una tecnología introducida por Apple que aumenta la densidad de píxeles en la pantalla, lo cual provoca que muestre contenidos a una resolución mayor.

Para que el diseño web funcione con retina no hay que hacer absolutamente ningún cambio a: la resolución del diseño, las tipografías, los tamaños de los elementos, imágenes vectoriales, etc.

Lo único que hay que tener en cuenta es tener al doble de resolución las imágenes no vectoriales (GIF, PNG, JPG, WebP) y los vídeos en su caso (MP4, WebM). Y en muchos casos, por motivos de eficiencia, ni siquiera recomendamos la resolución al doble sino que podríamos recomendar una resolución intermedia.

Esto es debido a que este aumento de resolución ocurre de forma transparente, lo hace el equipo, en ningún momento nosotros tenemos que trabajar con otra resolución en el sitio web. De modo que todos los elementos que pueden aumentar su resolución sin perder calidad simplemente funcionarán, y lo único que hay que tener en cuenta son las imágenes no vectoriales.

Animaciones y transiciones #

Se pueden hacer animaciones y transiciones en las maquetaciones de sitios web, aunque es recomendable hacerlo con moderación y en cosas en las que realmente aporten a la comunicación del mensaje o a la interacción del usuario.  

El motivo por el cual se pide moderación es porque las animaciones y transiciones hacen un consumo alto de recursos en los dispositivos en los que se visualiza el sitio web, y esto es algo que puede ser especialmente problemático en móviles, haciendo que el sitio web tenga una carga o una interacción que se note lenta por parte del usuario. 

Y curiosamente, algunas de estas animaciones y transiciones (las que funcionan sin responder a una interacción) también afectarían negativamente al SEO, porque Google analiza esto dentro del análisis de eficiencia que hace dentro de los sitios web a través de los usuarios, donde perjudicaría a los resultados de este análisis y terminaría penalizando en el buscador si estas animaciones perjudican a la carga. 

Si bien muchas transiciones y animaciones son necesarias, muchas para dar sentido y ayudar a comprender la interfaz, por ejemplo al desplegar un menú por la derecha ponemos una transición en la que se ve cómo el menú sale desde la derecha (en lugar de aparecer de golpe) y al ocultarlo se ve cómo se introduce por el mismo sitio. También es muy común pequeños cambios en elementos al pasar el ratón por encima cuando son clickable (cambio de opacidad, color, etc).

Recursos #

Imágenes, iconos y gráficos #

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. Debe contener un elemento vectorial, no embeber un elemento no vectorial.
  • 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.

Vídeos #

Los vídeos deben estar en formato MP4 con codec H.264 exportado en formato para web.

Si el uso que se espera del vídeo es una autoreproducción en la carga de la página, el vídeo no debe tener audio y debe estar muy muy muy comprimido, lo ideal es que el tamaño del vídeo en ningún caso supere 1Mb.

Tipografías #

Las tipografías usadas deben estar disponibles para su uso en web. Todas las tipografías disponibles en Google Fonts cumplen con esto y se pueden usar libremente.

Si optas por otras tipografías, éstas deben tener licencia para uso como Webfont y debes enviarnos sus formatos WOFF y WOFF2 que son los formatos específicos para web.

Ten en cuenta que hay muchas tipografías que se usan en los programas de edición (por ejemplo muchas de las tipografías de Adobe) que requieren una suscripción para su uso en sitios web. Si se usa alguna de estas tipografías será necesario informar al cliente para que adquiera su licencia y la mantenga.

Por motivos de eficiencia recomendamos no usar muchas tipografías distintas, así como usar preferentemente tipografías de sistema.

Por motivos de usabilidad las tipografías no deben tener un tamaño inferior a 12px.

Otros detalles #

  • Los colores de un sitio web están en formato RGB. Los formatos CMYK o pantone no podemos trasladarlos a web.

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.

Al respecto de Adobe Photoshop, fue una herramienta útil para esto en el pasado pero, dicho por los propios diseñadores, ya no parece la mejor opción.

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

  • Dos archivos PNG a escala por cada vista del sitio web. Uno de ellos con fondo normal y otro con fondo transparente.
  • Archivos con cada uno de los recursos gráficos (un recurso gráfico por cada archivo) que se usan en el sitio web: imágenes, logotipos, iconos, etc.
  • Todas las propiedades de cada estilo de texto 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.