Por qué reviso la resolución de mi pantalla antes de cada revisión de diseño
Aprobé un diseño que se veía impecable en mi monitor de 27 pulgadas. El cliente lo vio en un portátil de 13 pulgadas y lo odió. Ahora reviso tres resoluciones antes de dar cualquier opinión.
He estado en ambos lados de esto y todavía me estremezco. Estaba revisando el diseño de un sitio web en mi monitor 5K de 27 pulgadas — nítido, aireado, perfectamente espaciado. Firmé con una aprobación brillante. El cliente lo abrió en su MacBook Air de 13 pulgadas y su reacción inmediata fue que todo se veía "demasiado grande y apretado." La sección principal de la que me enamoré requería desplazamiento antes de ver el titular. El diseño de tres columnas cuidadosamente dispuesto que les encantaba en mi pantalla se convirtió en un desorden.
Ahí fue cuando empecé a revisar la resolución de mi pantalla antes de cada revisión de diseño.
El problema es que la mayoría de los diseñadores tenemos buenos monitores. Trabajamos en pantallas grandes con altas resoluciones porque necesitamos el espacio. Pero nuestros usuarios están viendo el mismo diseño en un portátil de 15 pulgadas, una tableta de 10 pulgadas, un teléfono de 6 pulgadas y, ocasionalmente, un ultraancho de 32 pulgadas. Si solo revisamos en nuestra propia configuración, estamos diseñando en una burbuja.
Mi proceso actual es mecánico ahora. Antes de compartir cualquier diseño para recibir comentarios, alterno entre tres ajustes preestablecidos de resolución. Primero, 1920x1080, que sigue siendo la resolución de escritorio más común en todo el mundo. Segundo, 1440x900, que cubre la mayoría de las pantallas de MacBook. Tercero, 1366x768, que es sorprendentemente común en portátiles con Windows y es la resolución donde los diseños tienden a desmoronarse primero.
También miro el diseño al 100% de zoom. Es tentador alejarse para ver el diseño completo, pero así no es como los usuarios lo ven. Si tienes que desplazarte para encontrar el botón de llamada a la acción en una pantalla de portátil estándar, necesitas arreglar el diseño, no el nivel de zoom.
Las verdaderas sorpresas siempre aparecen en los extremos. A 1366x768, el padding que se sentía generoso en mi pantalla 5K se convierte en espacio desperdiciado. A 1920x1080, las columnas que parecían equilibradas de repente hacen que el contenido se sienta estirado. He detectado barras de navegación rompiéndose en anchos que nunca habría pensado en comprobar.
También miro el chrome del navegador — la barra de marcadores, la barra de pestañas, el panel de herramientas de desarrollador. Tus usuarios tienen eso. Tu vista previa a pantalla completa no. Un diseño que se ve perfecto en pantalla completa puede tener su botón principal empujado debajo del pliegue cuando el chrome del navegador ocupa su parte de los píxeles.
Los niveles de zoom también importan. Reviso al 100%, 125% y 150%. Algunos usuarios aumentan su zoom predeterminado porque prefieren texto más grande, y eso cambia todo sobre cómo se lee un diseño. Si tu diseño se rompe al 125% de zoom, tienes un problema.
Hoy en día mi lista de verificación de revisión de diseño comienza con la resolución, no con la estética. Primero el diseño, segundo los colores, tercero la tipografía. Me ha salvado de lanzamientos embarazosos más veces de las que puedo contar.
Y ese cliente con el MacBook de 13 pulgadas? La segunda versión que les envié se ajustaba perfectamente a su pantalla. Lo aprobaron en diez minutos.