Diseño responsivo II – Mobile First

Diseño responsivo II – Mobile First

Actualmente la conectividad es omnipresente y los usuarios acceden a la web desde una multitud de dispositivos, el diseño web adaptable se ha convertido en una necesidad. Dentro de esta filosofía de diseño, surge un enfoque revolucionario: Mobile First (Primero Móvil), una estrategia que coloca la experiencia del usuario en dispositivos móviles en el centro del proceso de diseño. En este artículo, exploraremos en qué consiste el diseño Mobile First, sus beneficios y cómo implementarlo eficazmente.

¿Qué es el diseño Mobile First?

El diseño Mobile First es una metodología que prioriza la optimización de la experiencia del usuario en dispositivos móviles antes que en ordenadores de escritorio. Esto implica diseñar y desarrollar primero para pantallas pequeñas y luego adaptar el diseño a pantallas más grandes.

Beneficios del enfoque Mobile First:

  1. Mejora la experiencia del usuario (UX): Dado que cada vez más usuarios acceden a la web a través de dispositivos móviles, es crucial ofrecer una experiencia optimizada en estas plataformas. El diseño Mobile First garantiza que la interfaz sea intuitiva, fácil de navegar y rápida de cargar en dispositivos móviles, lo que conduce a una mayor satisfacción del usuario.
  2. Mejora el rendimiento y la velocidad: Al diseñar para dispositivos móviles primero, nos vemos obligados a simplificar el diseño y optimizar el rendimiento del sitio. Esto se traduce en tiempos de carga más rápidos y una experiencia de usuario más fluida, lo que a su vez va a mejorar el posicionamiento en los resultados de búsqueda.
  3. Fomenta un enfoque centrado en el contenido: Al comenzar con el diseño móvil, se hace hincapié en identificar y priorizar el contenido más importante para los usuarios. Esto promueve un enfoque centrado en el usuario, donde el contenido relevante se destaca y se presenta de manera clara y concisa.
  4. Facilita la adaptación a dispositivos más grandes: Diseñar primero para dispositivos móviles hace que sea más fácil adaptar el diseño a pantallas más grandes. Esto permite una transición fluida del diseño en dispositivos móviles a dispositivos de escritorio, sin comprometer la coherencia ni la calidad de la experiencia del usuario.

¿Cómo implementar el diseño Mobile First?

COMPRENDER LAS NECESIDADES DEL USUARIO

Antes de empezar, debemos conocer el comportamiento y las preferencias de los usuarios en dispositivos móviles para identificar las características y funcionalidades clave que deben incluirse en el diseño.

  • 1. Contenido Relevante y Personalizado

    Los usuarios móviles valoran el contenido que es relevante para sus intereses y necesidades. Prefieren experiencias personalizadas que les brinden información o productos que se alineen con sus preferencias y comportamientos anteriores.

  • 2. Diseño Responsivo y Navegación Intuitiva

    La navegación en dispositivos móviles debe ser intuitiva y fácil de usar. Los usuarios aprecian los diseños responsivos que se adaptan a diferentes tamaños de pantalla y dispositivos. Los menús de navegación simples y los botones táctiles grandes son preferidos por los usuarios móviles, ya que facilitan la navegación con los dedos en pantallas táctiles. Además, es crucial optimizar la velocidad de carga del sitio para garantizar una experiencia de navegación fluida y sin interrupciones.

  • 3. Diseño Visual Atractivo

    El diseño visual desempeña un papel importante en la atracción y retención del usuario en dispositivos móviles. Los usuarios prefieren interfaces limpias y atractivas que utilicen imágenes y gráficos de alta calidad para complementar el contenido textual. El uso de una paleta de colores atractiva y una tipografía legible mejora la estética general del sitio y facilita la lectura en pantallas pequeñas.

  • 4. Contenido Multimedia y Experiencias Inmersivas

    Los usuarios móviles disfrutan del contenido multimedia, como imágenes, videos y contenido interactivo, que enriquece la experiencia de usuario y captura su atención de manera efectiva. Las experiencias inmersivas, como los recorridos virtuales y las historias multimedia, son cada vez más populares entre los usuarios móviles que buscan contenido envolvente y entretenido.

  • 5. Facilidad de Compartir y Acceso Social

    La capacidad de compartir contenido fácilmente en redes sociales y plataformas de mensajería es valorada por los usuarios móviles. Los botones de compartir social integrados y las opciones para compartir contenido a través de aplicaciones de mensajería facilitan que los usuarios compartan contenido interesante con sus redes personales. Además, el acceso rápido a comentarios y reseñas sociales puede influir en las decisiones de los usuarios al interactuar con contenido en dispositivos móviles.

OPTIMIZAR EL RENDIMIENTO

Optimizar el rendimiento del sitio mediante la compresión de imágenes, la minimización de archivos CSS y JavaScript, y el uso de técnicas de carga progresiva para garantizar tiempos de carga rápidos en dispositivos móviles.  Garantizar una experiencia de usuario rápida y fluida en dispositivos móviles es fundamental para el éxito de tu web. Además la rapidez de carga afecta directamente al posicionamiento en Google.
Las imágenes y los archivos multimedia pueden ralentizar significativamente la velocidad de carga de una página web en dispositivos móviles. Para optimizar el rendimiento, es importante comprimir y optimizar todas las imágenes y archivos multimedia para reducir su tamaño sin comprometer la calidad. Se pueden utilizar herramientas de compresión de imágenes y técnicas de codificación eficientes para minimizar el tamaño de los archivos y mejorar los tiempos de carga en dispositivos móviles.
Utiliza los svg para imágenes planas, es decir, para logos, iconos, y toda clase de imágenes que normalmente guardas como png. Esto hará que además de pesar menos, podrán adaptarse a cualquier tipo de pantalla sin pérdida de resolución.

PRUEBAS Y MONOTOREO CONTINUO:

Es fundamental realizar pruebas exhaustivas en una variedad de dispositivos móviles para identificar y corregir posibles problemas de diseño y usabilidad. Para ello sería conveniente probar tu diseño en diferentes terminales, pero como esto no siempre es posible, existen muchas herramientas que simulan el comportamiento de tu diseño en distintos modelos móviles, no son eficientes 100% pero se acercan mucho.
Además, también es muy importante tener feedback con el usuario , recopilar comentarios de los usuarios y utilizarlos para combprobar y mejorar continuamente el diseño.
El diseño Mobile First es una filosofía de diseño centrada en el usuario que puede mejorar significativamente la experiencia del usuario, el rendimiento del sitio y la capacidad de adaptación a dispositivos móviles. Al adoptar este enfoque desde el principio, los diseñadores y desarrolladores pueden desbloquear todo el potencial de la web moderna y ofrecer experiencias digitales excepcionales en cualquier dispositivo.

Share and Enjoy !

Shares
Diseño de Interfaz de Aplicaciones para Móviles

Diseño de Interfaz de Aplicaciones para Móviles

Un buen diseño de interfaz de usuario (UI) es esencial para el éxito de una aplicación móvil, ha de ser fácil de usar, atractiva y responsive.
En este artículo, compartiré algunos consejos para diseñar una interfaz de usuario para aplicaciones móviles.

1. INVESTIGACIÓN

Antes de empezar a diseñar, es importante realizar una investigación para comprender las necesidades y expectativas de los usuarios. Esto te ayudará a crear una interfaz que sea realmente útil y atractiva para ellos.

2. USABILIDAD

La usabilidad es lo más importante en el diseño de una interfaz de usuario. Una interfaz debe ser fácil de usar, incluso para usuarios que no están familiarizados con ella.

Para mejorar la usabilidad, utiliza los siguientes principios:

  • Simplifica: La interfaz debe ser lo más simple posible. No utilices elementos innecesarios o confusos.
  • Evita la sobrecarga de información: No presentes demasiados datos a la vez.
  • Utiliza un diseño consistente: Utiliza los mismos elementos y patrones en toda la interfaz.
  • Proporciona retroalimentación: Informa a los usuarios de lo que está sucediendo.

3. INTERFAZ ATRACTIVA

Una interfaz atractiva puede ayudar a captar la atención de los usuarios y hacer que tu aplicación sea más memorable.

4. SÉ RESPONSIVE

Las pantallas de los dispositivos móviles varían en tamaño y resolución. Por ello, tu interfaz debe ser responsive para que se adapte a diferentes tamaños de pantalla.

5. PRUEBA TU DISEÑO CON USUARIOS REALES

Una vez que tengas un prototipo de tu diseño, es importante probarlo con usuarios reales. Esto te ayudará a identificar posibles problemas y mejorar la experiencia del usuario.

Conclusiones

Siguiendo estos consejos, podrás crear una interfaz de usuario para aplicaciones móviles que sea fácil de usar, atractiva y responsive.

Tendencias en el diseño de interfaces para móviles

El diseño de UI para móviles está en constante evolución. A continuación, se presentan algunas tendencias que están ganando popularidad:

1. Diseño Neomórfico

El diseño neomórfico es una tendencia que se ha popularizado en el último tiempo. Se caracteriza por imitar la apariencia de objetos físicos en la interfaz digital, utilizando sombras suaves y realismo para crear un aspecto tridimensional. Este enfoque busca generar una experiencia más táctil y realista para los usuarios. Un ejemplo es la aplicación de Apple Music en iOS, que ha adoptado algunos elementos del diseño neomórfico, especialmente en su uso de sombras suaves y efectos de luz que crean un aspecto tridimensional para los elementos de la interfaz. Por lo general, si andáis perdidos, fijaros en qué está haciendo Apple, porque sus diseños siempre son vanguardia y tendencia.

2. Diseño con Espacios en Blanco y Minimalismo

El minimalismo sigue siendo una tendencia fuerte en el diseño de interfaces móviles. El uso de espacios en blanco, colores suaves y tipografías legibles se enfoca en la simplicidad y la elegancia. Esta estética no solo mejora la estética de la interfaz, sino que también permite a los usuarios concentrarse en el contenido esencial.

3. Diseño Oscuro (Dark Mode)

El modo oscuro ha ganado popularidad en aplicaciones móviles debido a su apariencia atractiva y a su capacidad para reducir la fatiga visual, especialmente en entornos con poca luz. Ofrece un contraste más bajo, lo que puede disminuir el consumo de energía en pantallas OLED, contribuyendo así a una mejor eficiencia energética.

4. Diseño Orientado al Usuario (User-Centric Design)

El enfoque centrado en el usuario implica diseñar la interfaz en función de las necesidades, preferencias y comportamientos reales de los usuarios. Esto se logra a través de la investigación en profundidad y la comprensión completa del usuario final, permitiendo la creación de interfaces más personalizadas y relevantes.

5. Interactividad y Animaciones Significativas

Las animaciones y la interactividad bien diseñadas añaden un elemento de dinamismo y atractivo a la interfaz. Estas no solo hacen que la experiencia sea más agradable, sino que también ayudan a guiar al usuario, proporcionar retroalimentación y comunicar información de manera efectiva.

6. Integración de Tecnologías Emergentes

El uso de tecnologías emergentes como la realidad aumentada (AR) y la realidad virtual (VR) en las interfaces móviles está en aumento. Estas tecnologías ofrecen experiencias inmersivas y altamente interactivas, transformando la forma en que los usuarios interactúan con las aplicaciones.

7. Interfaces de Usuario Basadas en Gestos

Con la eliminación de botones físicos en muchos dispositivos, los gestos se han convertido en un método popular de navegación. Los usuarios pueden deslizar, pellizcar, tocar y hacer gestos para interactuar con la aplicación, lo que permite una experiencia más fluida y centrada en el contenido.

Conclusión

El diseño de interfaces para aplicaciones móviles está en constante evolución, impulsado por avances tecnológicos y cambiantes expectativas de los usuarios. Adoptar estas tendencias puede ayudar a crear interfaces atractivas, intuitivas y altamente funcionales que satisfagan las necesidades de los usuarios y brinden una experiencia móvil excepcional. Sin embargo, es fundamental recordar que cada aplicación es única y debe adaptarse a su audiencia y contexto específico.

Share and Enjoy !

Shares
Comprueba tu sitio web en varios dispositivos. Herramientas Gratis !!

Comprueba tu sitio web en varios dispositivos. Herramientas Gratis !!

Cuando creamos un sitio web, es fundamental recordar que tendrá que verse en todo tipo de dispositivos, con un amplio abanico de distintas resoluciones. Llevar a cabo un buen diseño y maquetación que se adapte a todos estos dispositivos, es muy importante, no sólo por ofrecer una buena experiencia de navegación al usuario, también desde el punto de vista del SEO y la penalización que conlleva no ofrecer un buen responsive.

Por lo tanto es muy importante verificar cómo se ve nuestro site y cómo se comporta en esos distintos dispositivos.

What is my screen resolution

Hoy os dejo What is my screen resolution. Se trata de una intuitiva herramienta excelente para probar cómo se verá su sitio en diferentes dispositivos. Escribes la URL y eliges entre escritorio, móvil, tableta y televisión e incluso la orientación. Verás que al pulsar sobre desktop, mobile, tablet o televisión, te saldrán unas resoluciones por defecto, pero si luego quieres probar una resolución en concreto, puedes introducirla y comprobar la visibilidad del site. Muy interesante y además GRATIS !!!

COMPROBAR RESOLUCIONES

 

 

Share and Enjoy !

Shares
Template PSD GRATIS de Instagram

Template PSD GRATIS de Instagram

Como diseñadores, en numerosas ocasiones debemos realizar propuestas para clientes relacionadas con las redes sociales, entre ellas Instagram es una de las más activas a la hora de proponer nuevas ideas de negocio, a través de sus stories o publicaciones. En el caso de los stories no hace falta ningún tipo de template, pero si para las publicaciones, cuando queremos enseñar al cliente cómo quedará su post.

En esta ocasión he preparado un PSD que podréis descargar de modo gratuito, en resolución grande, con un tamaño de 1125x2436px. Todo guardado en capas para que podáis editar vuestros contenidos, con todos los elementos necesarios. Espero que os sea útil.

Veréis que en el ejemplo he utilizado mi perfil de Instagram, si os gustan mis post, podéis seguirme en Instagram @designgloobs

 

 

Instagram Template PSD

Instagram Template PSD

SÍGUEME EN INSTAGRAM      DESCARGAR PSD GRATIS

Share and Enjoy !

Shares
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 !

Shares
Densidad de píxeles. Diseñando para móviles.

Densidad de píxeles. Diseñando para móviles.

Una de las especificaciones técnicas que tenemos en cuanta al analizar un teléfono es la densidad de pí­xeles de su pantalla. La densidad de pí­xeles es una unidad que se mide en pí­xeles por pulgada ppp o ppi en inglés (pixels per inch), nos indica la calidad de una pantalla y es fundamental a la hora de realizar un diseño para móviles.

Las pantallas de alta densidad tienen más píxeles por pulgada que las de baja densidad. Esto provoca que los elementos de una interfaz de usuario de las mismas dimensiones de píxeles, aparecen más grandes en las pantallas de baja densidad y más pequeños en las pantallas de alta densidad.

(más…)

Share and Enjoy !

Shares