Los dispositivos que la gente utiliza para acceder a sitios web, aplicaciones y otros productos digitales son un aspecto importante a la hora de diseñar grandes experiencias de usuario. Entender cómo cada uno crea un tipo de interacción diferente para el usuario permite a los diseñadores crear UIs óptimas.
El primer paso para entender los dispositivos es comprender la terminología que los rodea. ¿Qué es un dispositivo? ¿Y qué pasa con todos los términos que rodean a los diferentes tipos de diseño? Móvil, adaptativo, responsive: ¿cuál es la diferencia? El conocimiento de los tipos de dispositivos y sus limitaciones ayuda a los diseñadores a crear la mejor experiencia posible para todos los usuarios, independientemente de cómo accedan a un producto.
Dispositivo #
Probablemente, hayas oído hablar mucho del término «dispositivo», pero ¿qué significa realmente en el contexto del diseño? Los dispositivos son el equipo que utilizas para acceder a un producto digital: smartphones, ordenadores de sobremesa, tablets, portátiles, smartwatches e incluso cosas como electrodomésticos inteligentes.
Píxel #
Un píxel es un pequeño punto o cuadrado iluminado que, al combinarse, constituye la imagen producida por una pantalla digital. La densidad de los píxeles de una pantalla (combinada con el tamaño de la misma) determina su resolución. Una mayor densidad de píxeles crea una imagen más clara y nítida, mientras que una baja densidad de píxeles crea imágenes borrosas y menos nítidas (creando una imagen «pixelada» en los casos más extremos, donde los píxeles individuales parecen ser visibles).
En el diseño, los píxeles pueden utilizarse como unidad de medida en CSS (aunque algunos elementos se dimensionan ahora con unidades em). También se suelen emplear al establecer la resolución de una imagen o composición digital.
PPI #
PPI se refiere a píxeles por pulgada, es decir, a la densidad de píxeles de un dispositivo electrónico de imagen. El PPI se calcula a partir de la relación entre la diagonal de la pantalla y su resolución. Un PPI más alto da lugar a una visualización más clara y nítida.
Por ejemplo, un gráfico con una resolución Full HD de 1920×1080 se visualizará bien en un monitor de 20″ (96 PPI). Sin embargo, si decides imprimirlo como una pancarta a 48″ en horizontal, la salida tendrá solo 40 píxeles por pulgada, y la misma imagen se verá borrosa[1].
La mayoría de las pantallas digitales modernas tienen un PPI de 300 o más. Por el contrario, las pantallas más antiguas tienen un PPI inferior, lo que hace que las imágenes parezcan más borrosas en comparación.
Retina #
Las pantallas Retina son pantallas de alta resolución que utilizan una densidad de píxeles superior a la que puede detectar el ojo humano (generalmente 300 o más píxeles por pulgada)[2], lo que crea imágenes más realistas en las pantallas digitales. El término «pantalla Retina» fue acuñado originalmente por Apple para describir sus pantallas de alta resolución y apareció por primera vez en el iPhone 4 y 4S.
Diseño móvil #
Los sitios web y los productos digitales deben diseñarse teniendo en cuenta tanto los dispositivos de escritorio como los móviles. Teniendo en cuenta que más de 4.200 millones de personas acceden a Internet a través de un dispositivo móvil, es fundamental que los sitios web sean aptos para móviles. El diseño móvil tiene en cuenta estos variados dispositivos (desde los smartphones hasta las tablets, e incluso los wearables se consideran a veces «móviles») y crea una experiencia de usuario adaptada a pantallas más pequeñas e interfaces táctiles.
Diseño adaptativo #
El diseño adaptativo es una metodología de maquetación que hace que los elementos de la interfaz de usuario se adapten a diferentes tamaños de pantalla. Consiste en múltiples disposiciones fijas basadas en los tamaños estáticos de los dispositivos de los usuarios: puede ser un teléfono, una tablet, un ordenador o cualquier cosa intermedia. Un diseño adaptativo suele manejar los 6 anchos de pantalla más comunes 320 px, 480 px, 760 px, 960 px, 1200 px o 1600 px.
Diseño responsive #
Ya en 2010, el diseñador web Ethan Marcotte acuñó el término diseño responsivo para referirse a una técnica que implica el uso de consultas de medios CSS para crear diferentes diseños y configuraciones de la misma página en función del tamaño de la pantalla del dispositivo en el que se estaba mostrando[3]. En lugar de servir páginas completamente diferentes para dispositivos móviles y de escritorio, se utilizó una única página para que se reconfigurara automáticamente en función del tamaño de la pantalla en la que el usuario la estaba viendo.
Desde entonces, el diseño responsivo se ha utilizado ampliamente para crear sitios web aptos para móviles que son muy fáciles de usar y se ven bien en una variedad de dispositivos. Aunque el diseño responsivo tiene sus límites, todavía se emplea comúnmente hoy en día.
