Guía de handoff para un diseño pixel perfect. Parte II
Retícula
Mientras diseñas, ten en cuenta cómo se comportan los sistemas de retícula CSS. Echa un vistazo a Bootstrap Grid: es un framework CSS muy popular que cubre todos los casos habituales y que un desarrollador configura en un momento. Lo principal que debes entender es que las columnas de las retículas CSS tienen un ancho relativo y un padding interior fijo. Bootstrap Grid tiene 12 columnas y 15px de padding interior por defecto, aunque puedes personalizarlo. Podrías objetar que en Sketch no tienes valores relativos para las columnas, y tendrías razón, porque no los necesitas.
Cuando diseñas una interfaz, siempre muestras una imagen estática y, por supuesto, con un contenedor de tamaño fijo. Así, por ejemplo, si tienes una mesa de trabajo de 1920px y un contenedor de 960px, cada columna medirá 80px, con 15px de padding interior y un espacio útil de 50px. Lee este artículo para aprender a construir una retícula fluida correcta en Sketch.
Cuando diseñas una interfaz basada en un sistema de retícula como Bootstrap, no tienes que indicar al desarrollador el tamaño de cada columna; basta con mostrarle la superposición de columnas. El desarrollador sabrá qué clases CSS debe usar: .col-sm-2 o .col-sm-6, por ejemplo.
Muchos generadores de retículas tienen su propia forma de construirlas: un único tamaño de medianil entre columnas y un margen para el contenedor. Para entenderlo mejor, sigue esa guía o lee la sección de Bootstrap Grid.
Diseño responsive
Tu objetivo principal es mostrar al desarrollador cómo se verá cada elemento en distintas resoluciones y cómo será la transición entre ellas. Piensa en valores relativos, no fijos. Preparar un diseño en varias resoluciones, como 320x568, 1024x768 y 1920x1080, no significa que hayas terminado. Aún tienes que mostrar y explicar las transiciones.
- ¿Qué pasará con las columnas y con su contenido en cada breakpoint?
- ¿Cómo cambiará el tamaño del contenedor en cada resolución (y te has asegurado de que las columnas tienen valores relativos)?
- ¿Cómo afectarán estos cambios a las imágenes? ¿Las has preparado también para ese comportamiento? Un ejemplo: tienes una imagen de 200x200 en la versión de escritorio y decides que ocupe el 100 % del ancho en un dispositivo de 375x667. En ese caso, necesitarás una imagen de más de 750px de ancho (alta densidad de píxeles) para que no se vea borrosa en móviles.
Otro error típico de los diseñadores es olvidarse de la altura y mostrar solo cómo se comportan los elementos cuando cambia el ancho del contenedor. A veces también hay elementos con altura relativa, y tendrás que explicar al desarrollador cómo se comportan. Debes fijar la altura mínima o máxima y la posición de los elementos que contienen.
Usa algunos breakpoints básicos: 320x568, 375x667, 768x1024, 1024x768, 1280x768, 1366x768 y 1920x1080. Y, por supuesto, no te olvides de probar el diseño en móvil en horizontal.
Aquí tienes un ejemplo de texto en columnas que queda bien en escritorio, pero que da problemas en responsive. Tienes que definir cómo vas a resolverlo.
No reinventes la rueda
Si no tienes tiempo o no estás seguro de poder crear desde cero componentes pequeños (como un desplegable), pregunta a tu desarrollador qué librería recomienda y pule una versión ya hecha. Un caso típico es reinventar el selector de fechas. Mucha gente cree que basta con dibujar un calendario con números, pero también hay que pensar en:
- Si vas a marcar los días del mes anterior o del siguiente.
- Qué efecto hover tendrá cada fecha.
- Cómo marcarás la fecha actual.
- Cómo marcarás la fecha seleccionada.
- Cómo se cambiará de año o de mes.
Vivimos en un mundo en el que todo el mundo intenta montar su propia startup. A veces, al cliente le conviene más llegar al MVP que perder tiempo y dinero con un diseñador empeñado en ser creativo. Los diseñadores deben entender que pueden usar librerías de componentes existentes y pulirlas para proyectos distintos. Así se reducen los costes, a menudo desproporcionados, del trabajo de desarrollo, incluso cuando hace falta crear soluciones a medida.
Animaciones y prototipos interactivos
En lugar de escribir notas explicando cómo deben verse o comportarse tus animaciones, muéstralas. Es poco probable que tu descripción de la animación sea tan buena como la que tienes en la cabeza. Usa InVision o Axure para prototipar los recorridos de usuario, y Principle, Framer o Adobe After Effects para las animaciones. Te ahorrarás malentendidos y quebraderos de cabeza con desarrolladores y clientes. También te ayudará a validar tus hipótesis antes de la implementación. Las animaciones y los prototipos lucen mucho en las presentaciones a clientes y hacen que tus diseños parezcan todavía más especiales.
Parte 1: software, nomenclatura, optimización de imágenes, sprites, SVG y favicon
