Tendencias Diseño Web 2020, Modo Oscuro «Dark Mode» y Minimalismo

Tendencias Diseño Web 2020, Modo Oscuro «Dark Mode» y Minimalismo

Las tendencias de diseño web están en constante evolución. Las posibilidades técnicas ya no son un obstáculo, lo que invita a experimentar más y encontrar nuevas tendencias. Existen también tendencias que continuarán y que tomarán mayor peso como es el minimalismo y otras que se sumarán a la corriente popular como es el modo oscuro o «dark mode».

MODO OSCURO O DARK MODE

En 2018 tras un estudio, Google reconoce que el modo oscuro aumenta en un porcentaje muy alto el rendimiento de sus baterías, los colores predominantes que muestre nuestra pantalla influyen claramente en el consumo. En concreto, los colores azulados consumen más que los colores rojizos. Esta diferencia se acentúa más en el caso del blanco y el negro, el blanco es un color más brillante, consume mucho más que el negro, que es todo lo contrario.
Este estudio arrojó también que no en todos los móviles se producía el mismo ahorro, mucho más visible en los pixels y menor en los iPhone. En todo caso hablar de ahorro de batería ya es motivo suficiente como para que todas las apps más relevantes sacasen su modo nocturno y que todos corriésemos a instalar actualizaciones para disfrutar de la novedad.
Además al ahorro de batería se le suma el uso habitual de dispositivos de noche, en habitaciones poco o nada iluminadas en las que los blancos llega a hacer daño y el modo oscuro se convierte en un beneficio para la usabilidad.

Los diseños web en modo oscuro no solo se ven ultramodernos, sino que además impactan y son agradables a la vista. Los colores, fotos y elementos de diseño destacan más, usando colores oscuros.

Así pues, esto casi seguro de que una de las principales tendencias de 2020 será el diseño oscuro, centrado seguramente en el diseño de la interfaz de usuario, ofreciendo a los usuarios una opción para habilitar el tema oscuro.

 

DISEÑO MINIMALISTA

El minimalismo, a menudo se subestima o se malinterpreta, no se trata de reducir el diseño a su forma más aburrida, ni tampoco significa usar un fondo blanco, el minimalismo consiste en la simplicidad y énfasis del contenido. Se trata de llegar al usuario con el mínimo peso posible, pero con el suficiente para darle lo que está buscando, a veces será más y otras menos. Nuestro objetivo es darle la mejor experiencia utilizando la menor cantidad de recursos, esa es la esencia del minimalismo.

Evidentemente no es lo mismo diseñar la portada de un periódico digital que una landing para el lanzamiento de un producto, cada caso nos obligará a recurrir a un número diferente de recursos mínimos.

Uno de los beneficios del minimalismo es que crea un diseño elegante y muy atractivo para el usuario. La distracción disminuye y la conversión aumenta.

Los diseños web minimalistas utilizan los elementos de diseños indispensables y lo distribuyen sobre un fondo neutro (espacio negativo) que haga resaltar eso elementos. Debemos crear un equilibrio agradable pero además transmitir el mensaje. La web de Google ya fue hace años un perfecto ejemplo de este minimalismo. En este caso en particular, un espacio blanco que ocupa la mayor parte de la pantalla, hace resaltar lo verdaderamente importante, la caja del buscador. No necesita más, pero tampoco menos. Fijaos como además separa las demás enlaces externos a la búsqueda en los márgenes de la pantalla y en un tamaño de fuente pequeño y con poco peso.

El pantallazo que veis sobre este texto pertenece a boundarysupply.com y hace exactamente lo mismo, tiene los elementos indispensables para su misión, y el mensaje es claro, y si os fijáis el diseñador ha desplazado a la izquierda el texto, de ese modo compensa el peso que provoca la chica (hacia la derecha) sobre fondo casi negro, el resultado es perfecto. Los enlaces salen de la escena principal colocándose en los márgenes de la pantalla, sin demasiado peso pero siendo perfectamente visibles para el usuario.

Según otro informe de Google, los usuarios de un sitio web tardan 17 milisegundos en formar su opinión. Cuanto más simples son las imágenes, más atraen al usuario. Estas imágenes deben ser llamativas, originales y de alta calidad. Estas imágenes son efectivas utilizándolas como elemento principal o como espacio negativo.

Con menos texto en la página, las imágenes grandes se colocan en primer plano y representan el foco principal de la composición. Veréis que en ocasiones el espacio negativo es un video, pero siempre muy sutil, para que siga cumpliendo su misión de hacer resaltar a la imagen o texto que está en primer plano.

En fin, veremos a ver qué nos depara el futuro, ojalá nos sorprenda gratamente 😉

Share and Enjoy !

0Shares
0 0 0
Diseño de interfaz, menú hamburguesa. Animaciones gratis !!!

Diseño de interfaz, menú hamburguesa. Animaciones gratis !!!

El menú hamburguesa es un botón que suele estar en la parte superior de la web, que muestra o esconde el menú en pantalla.
Lo que en un principio nace para la versión mobile, por la falta de espacio, se ha convertido en un recurso habitual también en los diseños desktop.

Tiene muchos detractores que alegan que ocultar accesos de contenidos perjudica la usabilidad, porque obliga al usuario a hacer un clic más, e incluso que es sólo un capricho de los diseñadores.

Personalmente, no puedo estar más en desacuerdo, os explico por qué.

Hace años quizás podría ser arriesgado, hoy en día cualquier usuario lo tiene perfectamente identificado, todos sabemos que ahí accionamos el menú.

En cuanto al hacer un clic más, creo que hay demasiado «gurú» que se ha aprendido un guión y ha dejado de lado el sentido común. La usabilidad efectivamente se ve favorecida cuantos menos clics necesites para acceder a un contenido, pero creo que tenemos que ver todo en conjunto y no pararnos en pequeños detalles.
En mis diseños siempre tengo en cuenta que el usuario haga los menos clics posibles para llegar al contenido que está buscando, pero tenemos que tener también en cuenta, que esta máxima de la usabilidad viene de cuando para pasar de una vista a otra tenías que cargar una nueva página, con una conexión lenta un solo clic podía suponer varios segundos de espera. Hoy podemos utilizar CSS por ejemplo para mostrar y ocultar ese menú, accediendo de forma instantánea a ese contenido. Así pues, no tengas miedo de lo que dice el «gurú», nadie se marchará de tu web por pulsar en la hamburguesa 😉

En cuanto a que el diseñador busca más la estética que la usabilidad, le pese a quien le pese, el diseño es fundamental sobre todo en la primera impresión, no hay nada más agobiante que una web con una barra repleta de enlaces, iconos de redes, banners,… Los espacios limpios también juegan un papel importantísimo en la usabilidad, una cabecera repleta de enlaces, produce más estrés que el tener que hacer un clic más para llegar a un contenido.
Al tener más espacio para mostrar los enlaces del menú, podemos distribuirlos de un modo que sean más legibles y más grandes que en un menú tradicional, ¿acaso el tamaño de letra no influye en la usabilidad?. Podemos meter textos grandes, acompañados de iconos, …. mil posibilidades que en una barra no es posible. Por supuesto que agradezco encontrarme un menú hamburguesa, incluso porque me apetece ver qué ha pensado el diseñador para sorprenderme.

Una vez acabado este alegato en favor de la hamburguesa, pasamos a animarlo, cosa que seguro que también leeréis por ahí que no es usable…

Aquí podéis ver varias muestras de animación. Simplemente copiad los códigos que necesitéis, es gratis 😉

See the Pen SVG Hamburger Menu Icon Animation Collection by Matthew Main (@matthewmain) on CodePen.dark


Pulsa en los menús para ver la animación.

Si no podéis verlo bien, seguid este enlace.

 

Share and Enjoy !

0Shares
0 0 0
¿Cómo hacer un sprite con CSS?. Animaciones para web, apps, juegos…

¿Cómo hacer un sprite con CSS?. Animaciones para web, apps, juegos…

Un sprite es el resultado de juntar varios fotogramas para crear una animación.

En este ejemplo lo que hacemos es crear la animación con una única imagen.

He cogido una imagen de 400x400 px y la he dividido en 4 columnas y 4 filas de 100x100 px. En cada una de las celdas he colocado un frame de la animación, el orden, de izquierda a derecha y de arriba a abajo.

Esta es la imagen utilizada, con medidas 400x400px

Con la CSS, lo que hacemos es marcar un área visible, coincidente con el tamaño de cada frame (100x100px) e ir sustituyendo lo que aparece en ese área moviendo la imagen grande. El resultado es una animación perfecta.

Aquí puedes ver el resultado, copiar el código HTML y el CSS

See the Pen oxWwRV by Omar Benyakhlef Domnguez (@gloobs) on CodePen.dark

Pulsa en 0.25x para ver bien la imagen

El código moveSpritesheet 1s indica el tiempo en el que se tiene que desarrollar el loop, es decir a más tiempo la animación será más lenta y viceversa.

Como podéis ver, el código es mínimo, por lo tanto poco peso y carga rápida, lo ideal !!!

Share and Enjoy !

0Shares
0 0 0
Introducción al dibujo con SVG

Introducción al dibujo con SVG

Los SVG (del inglés Scalable Vector Graphics), son formatos gráficos vectoriales muy útiles por su flexibilidad y la capacidad de mostrar imágenes en web, sin perder calidad al cambiar de resolución.

Los SVG se definen en formato XML. Esto nos permite, además de dibujarlos, realizar acciones y animaciones sin necesidad de cargar la página. Es muy parecido al funcionamiento del HTML. Se definen diferentes elementos geométricos que se pueden ir alterando mediante órdenes.

Ventajas de utilizar SVG

Si los comparamos con los gif, png o jpg, las ventajas son:

  • Podemos crearlo y editarlo en cualquier editor de texto, no hace falta tener un photoshop o un illustrator por ejemplo.
  • Es escalable, esto significa que no tendremos problemas de calidad sea cual sea la resolución de pantalla y dispositivo, incluso podemos imprimirlos en alta calidad.
  • Podemos hacer animaciones como las que hacíamos con flash, pero en este caso, con permiso de la W3C.

 

Crear imágenes SVG con Adobe Illustrator

Existen numerosos programas para generar archivos SVG, incluso crearlos desde cero con código (soy diseñador y no llego a tanto), así que los creo con Illustrator. El procedimiento es el siguiente:

  1. Una vez creado el gráfico, salvamos como SVGZ comprimido.
  2. Opciones de guardado
    1. Perfiles SVG –  Deja la opción que viene por defecto.
    2. Fuentes – En la opción de texto, te da la opción de trazarlo desde nuestro SVG o convertirlo en contorno.
    3. Opciones – Podemos incrustar la imagen en el archivo SVG (aumentando el tamaño),  o enlazar, que incluirá una etiqueta image que vinculará la imagen a nuestro SVG. Yo utilizo esta última.
    4. Opciones Avanzadas – Selecciono elementos de estilo Illustrator que lo que hace es crear unos estilos CSS que gestionan el color de relleno y del borde. Para que el archivo pese menos, en decimales, dejo marcado 1 decimal
    5. Flexible hará que los archivos se adapten al tamaño de la web (responsive) .
    6. Código SVG  abre el editor de texto y nos muestra el código generado por nuestro SVG.

Crear SVG en código

El mismo código que nos genera el Illustrator, podemos escribirlo nosotros directamente. En este ejemplo vemos cómo se pinta un círculo rojo con borde negro y situado en una posición determinada (coordenadas cx y cy) y con un radio r

<svg width="800" height="100">
<circle cx="500" cy="50" r="40" stroke="black" stroke-width="4" fill="red" />
Sorry, your browser does not support inline SVG.
</svg>
  • Formas:  Rectangle <rect> / Circle <circle> / Ellipse <ellipse> / Line <line> / Polyline <polyline> / Polygon <polygon> / Path <path>

Tenéis toda la información para dibujar formas, atributos, etc…  en W3Schools.com

Una de las reglas fundamentales y que tenemos que tener siempre en cuenta, es que los elementos que estén en una línea posterior, se pintarán por encima, es decir, si queremos hacer un gráfico en el que la base es un cuadrado rojo, encima hay un círculo negro y este a su vez contienen un texto, el código sería así:

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="red" />
  <circle cx="150" cy="100" r="80" fill="black" />
  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>

EJEMPLO:

 

SVG

Elemento <path>

Se usa para pintar líneas, curvas, arcos, …

Para empezar a pintar, tenemos que hablar del parámetro «d» cuya misión es definir la forma de un elemento. Este atributo contiene una serie de comandos que a su vez utilizan más parámetros.

Comencemos por un punto, el x,y (10,10). El comando «Mover a» se llama con la letra M. Cuando se empieza a leer el código  llegamos a esa letra acompañada de dos coordenadas, sabemos que vamos a movernos a ese punto, es decir para pasar al punto (10, 10) escribiríamos «M 10 10«.

Todos los comandos tienen dos variantes, cuando los escribimos en mayúscula los referimos a coordenadas absolutas y en minúscula coordenadas relativas. Si estamos en el punto (20,20) y aplicamos M 10 10, le estamos diciendo que desde el punto en el que está se mueva hasta el punto 10, 10, si por el contrario escribimos m 10 10, le estamos diciendo que tome como referencia el punto en el que está, para desde ahí, desplazarse 10 en horizontal y 10 en vertical, es decir, en este caso acabaría en el punto 20,20

Comandos de línea

Hay cinco comandos de línea para <path>.

  • M (mover a), se necesitan dos parámetros para moverse, las coordenadas, x,y. Este comando no pinta, lo que hace es desplazar el cursor donde lo definamos.
    En el siguiente código puedes ver cómo  primero  colocamos el cursor en el punto 10,10 para una vez ahí, pintar un círculo con coordenadas 10,10 (las hacemos coincidir con nuestro cursor) con un radio 2 y de color rojo
  • L (línea), dibuja una línea recta desde la posición actual a la siguiente que definimos. Se escribe L x y (or l dx dy) siendo dx dy los desplazamientos en horizontal y vertical. Este desplazamiento se puede también escribir definiendo cada desplazamiento por separado:
    H x (or h dx)
    V y (or v dy)

    <path d="M 10 10 H 90 V 90 H 10 L 10 10"/> en este código se combinan las dos, primero definimos el cursor en el punto 10,10, luego hacemos un desplazamiento en horizontal de 90 (H 90), otro vertical de 90 (V 90) y luego mediante con el comando L le decimos que regrese en horizontal a la coordenada 10 10. Acabamos de dibujar un cuadrado negro
    También podemos utilizar el parámetro Z para cerrar el dibujo (volver al origen definido con M), de este modo el código sería:

    <path d="M 10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>

    La ruta se moverá al punto (10,10) y luego se moverá horizontalmente 80 puntos hacia la derecha, luego 80 puntos hacia abajo, luego 80 puntos hacia la izquierda y luego de regreso al inicio. Fill define el color de relleno y stroke el borde.

Comandos de curva

Son bastante más complejos, para empezar tenemos tres comandos diferentes que pueden definir curvas. Dos de ellas están basadas en Bezier y la tercera en arcos de círculo.

Curvas Bezier

La curva cúbica, C, se crea mediante Beziers cúbicos con dos puntos de control para cada punto. Por lo tanto, para crear un Bezier cúbico, debemos especificar tres coordenadas. C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
Las últimas coordenadas (x, y) definen dónde queremos que termine la línea. Los otros dos son puntos de control. (x1, y1) es el punto de control para el inicio de su curva, y (x2, y2) es el punto de control para el final.
Los puntos de control describen esencialmente la pendiente de su línea que comienza en cada punto.
Es un poco complejo, vamos a ver si puedo explicarlo con un gráfico.

Pongamos el siguiente ejemplo:  <path d=»M 10 10 C 20 20, 40 20, 50 10″ stroke=»black» fill=»transparent»/>
Os pongo aquí la explicación de cómo pinta, relacionando cada punto con sus coordenadas en el mismo color.

Para unir varias curvas de Bezier, podemos utilizar el comando S o s, lo que hace es prolongar la pendiente última que hemos creado, utilizarla como otra pendiente y desde ahí seguir dibujando. Vemos el ejemplo a continuación, en el que vemos que el proceso es el mismo que el anterior, pero después del cuarto punto hay una S y lo que ha hecho ha sido prolongar la recta pendiente (la que baja y no acaba en un punto, para luego seguir con la pendiente creada por los puntos 150,150 y 180,80

Otro tipo de curva de Bezier es la curva cuadrática Q, que es bastante más simple que la cúbica.
Mediante un punto controla la pendiente de la curva tanto en el punto inicial como en el punto final. Y al igual que con la curva de Bezier cúbica, podemos unir múltiples Beziers cuadráticos, en este caso, con el parámetro T.

 

Os recomiendo si os interesa este tema, que acudáis al Developer de Mozilla, ahí podréis encontrar toda la documentación necesaria para controlar los SVG.

Una utilidad muy útil que tiene el SVG es que se puede animar, seguramente hayáis visto logotipos que se van creando en una animación. Podéis ver varios ejemplos en SVGATOR, que además es una web donde podéis animar online vuestros SVG.

Share and Enjoy !

0Shares
0 0 0
UI – Guía de tamaños de fuente

UI – Guía de tamaños de fuente

Cuando hablamos de diseñar para web o app, una de las preguntas que me suelen hacer es ¿cuál es el tamaño correcto que debo usar?.

La proliferación de pantallas HD lleva tiempo dándonos dolor de cabeza a los diseñadores. Lo que en un principio sólo era un simple «Pixel (px)» ahora se ha convertido en  «puntos (pt)», «píxeles escalables (sp)» o «píxeles independientes de la densidad (dp)» como para no preocuparse !!
En este post no nos vamos a meter en temas de programación, vamos a enfocarlo sólo desde el punto de vista del diseñador, si se te escapan estos términos o la densidad de pantalla, o los factores de escala, lee este post de Densidad de pixel, tamaño de diseños para HTML, Android e iOS

Pues bien, para definir el tamaño correcto de fuentes, como es evidente, habrá que diferenciar si se trata de web, de web-mobile, de iOS o de Android, vamos a ello:

NOTA: Todas estas pautas están definidas por Google y Apple developer.

Pautas de tipografía de iPhone

Títulos de página, títulos modales  (el mayor tamaño para título será de 34pt) 17pt
Texto de párrafo, enlaces 17pt
Texto secundario 15pt
Texto terciario, subtítulos, botones segmentados 13pt
Botones, entradas de texto 17pt
Barra de acciones (leyenda de iconos de acción) 10pt

Pautas de tipografía de Android

En este caso tomamos como referencia la fuente roboto

Títulos de página 20sp
Texto de párrafo, enlaces 14sp
Lista de títulos 14sp
Lista de títulos de elementos, fragmentos de texto importantes 16sp
Texto secundario, subtítulos 14sp
Botones, pestañas 14sp
Entradas de texto 16sp

Pautas de tipografía para Web

Títulos de página 20px –
Texto de entrada 16px
Tamaño de cuerpo 16px
Texto secundario 13 – 14px

Los títulos a partir de 20px, luego ya queda a criterio del diseñador si quiere usar títulos extra grandes.

Equivalencias entre pt, px, em, %, sp

 

Para ver la equivalencia de sp o dp con px, accede aquí: Equivalencias px dp

Pt Px Em Porcentaje
6pt 8px 0.5em 50%
7pt 9px 0.55em 55%
7.5pt 10px 0.625em 62.5%
8pt 11px 0.7em 70%
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
10.5pt 14px 0.875em 87.5%
11pt 15px 0.95em 95%
12pt 16px 1em 100%
13pt 17px 1.05em 105%
13.5pt 18px 1.125em 112.5%
14pt 19px 1.2em 120%
14.5pt 20px 1.25em 125%
15pt 21px 1.3em 130%
16pt 22px 1.4em 140%
17pt 23px 1.45em 145%
18pt 24px 1.5em 150%
20pt 26px 1.6em 160%
22pt 29px 1.8em 180%
24pt 32px 2em 200%
26pt 35px 2.2em 220%
27pt 36px 2.25em 225%
28pt 37px 2.3em 230%
29pt 38px 2.35em 235%
30pt 40px 2.45em 245%
32pt 42px 2.55em 255%
34pt 45px 2.75em 275%
36pt 48px 3em 300%

 

Nielsen sugería un tamaño mínimo de 10 puntos correspondiente a 13px o bien 12 puntos que corresponde a 16 px si el público objetivo eran personas mayores.

Si nos fijamos en alguno de los sitios más visitados, Twitter, Amazon o Wikipedia, utilizan 14px y Google 13px

Todas estas tablas y medidas significan más tiempo a la hora de desarrollar un trabajo, pero son indispensables si queremos que el resultado de nuestros diseños sea perfecto en cualquier pantalla. Pero además de los tamaños de fuente, hay otros factores que son muy importantes y que ayudan a que la usabilidad sea mejor, un ejemplo es el interlineado, de nada sirve utilizar buenos tamaños si luego hacemos denso el texto. Como norma general se usa un mínimo del 120% del tamaño de la fuente para el interlineado, siendo 1.5em, 150% lo ideal- Tenemos que hacer que la lectura sea fluida, que no cueste diferenciar el renglón, pero que tampoco haya que pegar grandes saltos de una línea a otra.

Otra de las recomendaciones, se refiere a la cantidad de texto por línea. El ancho óptimo va de los 45 a 75 caracteres, estableciéndose que una línea de 66 caracteres se puede considerar ideal para obtener una buena experiencia de lectura.

Si lo que te preocupa es el contraste, hay una herramienta muy útil que nos indica si es o no correcta la elección que hemos designado a nuestro fondo y tipografía. Contraste fondo-tipografía

Más abajo tienes más artículos que te pueden ayudar también a la hora de elegir la fuente correcta.

Share and Enjoy !

0Shares
0 0 0
Densidad de pixel, tamaño de diseños para HTML, Android e iOS

Densidad de pixel, tamaño de diseños para HTML, Android e iOS

A la hora de diseñar para múltiples dispositivos, tanto en dispositivos iOS como Android, corremos el peligro de no tener en cuenta las a veces enormes diferencias entre estos y que lo que en un dispositivo se ve bien, en otro aparezca muy pequeño o muy grande. En este artículo, intento abordar de una manera global el diseño tanto en apps como en html para dispositivos móviles, dado que en ambos casos tenemos que tener en cuenta varios aspectos para que la experiencia usuario sea óptima. Para ello es fundamental conocer varios conceptos que vamos a tratar a continuación.

Para empezar, sabemos que un pixel es un punto que emite un único color o escala de grises en una pantalla. Es obvio que cuanto mayor sea el número de pixels, más detalle y nitidez tendrá la imagen que estemos viendo, aquí es donde entra en juego la densidad de pixel.

Las pantallas se miden en pulgadas (1 pulgada = 2,54 centímetros), y cuando damos la medida de una pantalla, lo hacemos tomando como referencia su diagonal, cuando nos dicen que una pantalla es de 25 pulgadas, nos están diciendo que su diagonal mide 25 pulgadas, es decir, 25×2,54 cm

La densidad de píxeles es la cantidad de pixels que hay en una pulgada de una pantalla. Cuanto mayor sea este número, más nítida será la imagen y con más detalle. Esta cantidad de pixels que hay en una pulgada, se mide en pixels por pulgada ppp o en ppi (pixels per inch) o dpi  (Dots per Inch). Con lo cual una pantalla de alta densidad será aquella que más ppp tenga, esto significa que si hablamos de tamaños, cuando hacemos un botón por ejemplo de 100x60px, se verá más grande en una pantalla de baja densidad que en una de alta densidad.
Para calcular la densidad de una pantalla; densidad de pantalla = anchura de la pantalla en pixels / anchura de la pantalla en pulgadas

En el siguiente gráfico, podéis ver dos botones, los dos con las mismas dimensiones, 10 x 4px. El de la izquierda sería el resultado de mostrarlo en una pantalla de más densidad que el de la derecha, concrétamente 4 veces más pixels por pulgada que la de la derecha.

DP, pixeles de densidad independiente para Android

Para evitar este problema y que cualquier gráfico o imagen se pueda ver igual en cualquier pantalla, tenemos los DP, pixels de densidad independiente.

Los píxeles de densidad independiente son una unidad de píxeles virtual, que nos permiten definir las dimensiones de disposición o posición, de una manera independiente a la densidad de pantalla.

Un pixel independiente equivale a un pixel en una pantalla de 160 ppp.

  • px = dp * (dpi / 160)
  • dp = (ancho en píxeles * 160) / densidad de la pantalla

Se toma una pantalla de densidad «media» 160 ppp. En tiempo de ejecución, el sistema escala las unidades dp, según sea necesario, en función de la densidad real de la pantalla en la que se esté mostrando el contenido.

  • Para una pantalla de 160 dpi, 1 dp equivale a 1 px
  • Para una pantalla de 240 dpi, 1 db equivale a 1,5 px  — px=dp * (240/160); dp=px/(240/160); dp= 1,5px
  • 320 dpi, 1db=2px
  • 480 dpi, 1db=3px

En esta imagen podemos ver cómo si queremos mantener el aspecto de un botón en la pantalla, deberemos de hacer varios tamaños aplicando el factor que acabamos de ver, de ese modo siempre se verá en igual proporción dentro de las distintas pantallas. La escala no es real, pero si nos creemos que el botón que he dibujado en la resolución de 160dpi mide 10x10px, este botón habrá que guardarlo en 15×15, 20×20, ….

@1x, @2x, @3x, factores de escala para iOS

Cuando se trata de un iphone, los múltiplos que utilizamos son @1x, @2x y @3x que corresponden a las siguientes resoluciones:

Dispositivo Factor de escala
iPhone XS Max (1242x2688px)  – 458 dpi @3x
iPhone XS (1125 x 2436px)  – 458 dpi @3x
iPhone XR (828x1792px)  – 326 dpi @2x
iPhone X (375x812px) @3x
iPhone 7 Plus (414x736px) – 401 dpi @3x
iPhone 7 (375x667px) – 326 dpi @2x
iPhone 6s Plus, 8 Plus (414x736px) – 401 dpi @3x
iPhone 6s, 8 (375x667px) – 326 dpi @2x
iPhone SE (320x568px) – 326 dpi @2x
iPhone 4 (320x480px) – 326 dpi @1x

 

Tamaños mínimos

Teniendo en cuenta que deberemos adaptar nuestras imágenes a los distintos, o al menos, a las pantallas más habituales, otro factor a tener en cuenta es el tamaño mínimo que debe tener un elemento en pantalla, con el que el usuario vaya a interactuar, como por ejemplo un botón.

Cuando colocamos un enlace en un texto, el interlineado e incluso el tamaño del texto, hace en ocasiones muy difícil accionarlo, lo más aconsejable siempre es colocar botones, y estos botones también deben ser lo suficientemente grandes como para que cualquier usuario pueda accionarlo sin dificultad con el dedo. Para ello se establece que todo botón debe al menos ser 42 px y no más de 72px. Diversos estudios han dado como resultado, que el tamaño preferido por los usuarios es de 60px

Cuando tenemos varios botones en una página, en ocasiones hay que priorizar o dar más importancia entre unos y otros, esta prioridad se establece también con estos tres tamaños, baja prioridad para un 42x42px, prioridad media para un 60x60px y alta prioridad para un 72x72px.

NOTA: Estas medidas son aplicables a botones rectangulares, siendo estas medias la altura mínima de dichos botones.

Los espacios entre botones, también están estandarizados, se ha comprobado que cuando los botones estaban demasiado separados, los usuarios se movían al objetivo táctil mucho más lentamente, y cuando los botones estaban demasiado juntos, los usuarios tenían menor precisión a la hora de pulsarlos, así pues se establece o se recomienda, que el espacio entre botones sea el siguiente:

  • Separación entre botones de 42px: entre 36 y 48px
  • Separación entre botones de 60px: entre 24 y 36px
  • Separación entre botones de 72px: entre 12 y 24px

Encontraréis varias referencias y opiniones en cuanto a los tamaños, después de consultar varios estudios, creo que estos son los más aceptados, Android por ejemplo, recomienda que los objetivos táctiles sean al menos 48 x 48dp, con al menos 8dp (o más) entre ellos.

¿Cómo establecer en tu CSS las distintas imágenes-tamaño según la resolución de pantalla?

No voy a entrar en programación iOS y Android, porque no tengo ni idea 😉 Pero si os dejo a continuación el cómo abordar este tema en HTML. Lo que hacemos, es indicarle al navegador, mediante nuestra CSS que muestre una u otra imágen según sea la pantalla del dispositivo en el que se está mostrando nuestro diseño. Para ello usamos los llamados breakpoints o puntos de corte.

Según densidad:

@media
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
.miclase {}
}

Según ancho de pantalla:

@media 
only screen and (min-width: 320px) {  
.miclase {} 
}

Podemos ser incluso más específicos a la hora de determinar un punto corte en la CSS. En este caso, definimos ancho tanto mínimo como máximo, densidad e incluso orientación del dispositivo:

@media 
only screen and (min-device-width: 375px) 
and (max-device-width: 667px) 
and (-webkit-min-device-pixel-ratio: 2) 
and (orientation: portrait) { 
.miclase {}
}

Los breakpoints más comunes son:

  • @media all and (min-width:1200px){ … }
  • @media all and (min-width: 960px) and (max-width: 1199px) { … }
  • @media all and (min-width: 768px) and (max-width: 959px) { … }
  • @media all and (min-width: 480px) and (max-width: 767px){ … }
  • @media all and (max-width: 479px) { … }

Salvar nuestro diseño en distintos tamaños lleva tiempo, además del tiempo de programación, por eso, antes de volverse loco y empezar a hacer todo tipo de versiones, lo recomendable es considerar nuestro proyecto, incluso si se trata de una actualización de un diseño viejo, consultar Analytics y ver qué especificaciones de pantalla son las  más habituales entre nuestros usuarios, y en función de eso, determinar qué puntos de corte tenemos en cuenta.

Hoy en día ya es imposible pensar en un diseño online y no tener en cuenta que será visto en dispositivos móviles, tablets, etc. Los diseñadores debemos estar preparados para asumir este desafío y seguir siempre las innovaciones, pero siempre teniendo en cuenta la usabilidad de nuestros diseños. ¡Innova con sentido común!

Share and Enjoy !

0Shares
0 0 0