La densidad de pixel es el número de pixeles encajados en una cantidad física de espacio ( a menudo una pulgada).
La tecnología de las pantallas sigue evolucionando rápidamente. En el 2010 Apple presento la primera pantalla de retina que duplicaba la cantidad de pixeles por pulgada. El resultado es que cada vez los gráficos son más nítidos.
1-densidad-de-pixeles-pixel-density
Nota la diferencia de los Iconos y la claridad de las etiquetas de texto.
La cantidad de pixeles por pulgada ha aumentado en las pantallas de retina. O sea en una resolución que haya duplicado a la original o sea «2x» un botón de altura 44px ahora será de 88 píxeles. Los diseñadores necesitamos adaptarnos a los diferentes dispositivos para crear buenos gráficos (como iconos) en las diferentes escalas «1x» «2x» «3x» etc .
A causa de la diferencia de resoluciones se ha creado un nuevo problema, ya no podemos hablar en pixeles ya que en diferentes dispositivos la relación visual entre tamaño y píxeles varía. La solución en los dispositivos Apple ha sido crear el sistema de medida basado en «puntos» o «PT». Un punto equivale a un pixel en resolución de 1x, a dos pixeles en resolucion de 2x y así sucesivamente. Google ha definido su propia unidad independiente que en vez de «puntos o PT» se llaman «píxeles independientes de la densidad o DP». No son exactamente equivalentes a los «PT» de IOS pero se basan en el mismo principio.
En los primeros días de los dispositivos móviles de alta resolución la densidad de píxeles fue 1x o 2x. En estos momentos hay muchas desidades de píxel diferentes. Android es un ejemplo perfecto, en el momento que escribí este artículo había seis densidades de pixel estandar en todos los diferentes fabricantes de dispositivos. Esto significa, por ejemplo, que un icono o gráfico lo tendrás que crear en seis tamaños diferentes para poder progamarlo en Android o en dos o tres tamaños diferentes en el caso de Apple.
Esto nos hace darnos cuenta de la importancia de diseñar vectorialmente siempre que exista la posibilidad. Así podremos escalar nuestros gráficos sin miedo a perder calidad. Por suerte hay programas como Sketch que facilitan mucho la exportación de estas interfaces y gráficos en diferentes tamaños.
Aquí dejo una tabla con la Resolución de los Dispositivos y Especificaciones para Apple :
Recursos y más información
Google Device Metrics: Lista de especificaciones para los dispositivos de todo tipo (Android, iOS, Mac, Windows, etc.).
Bjango App Icon Templates: Plantillas de diseño (disponible para todos los principales software de diseño).
Designer’s Guide to DPI: Extensa guía de Sebastien Gabriel con más detalles
Este artículo es una adaptación de Sketch Master