Diseño de móviles & tablets: las diferentes densidades

Publicado el 28 jun, 2012 | 36 Comments

Me apasiona diseñar Apps para los smartphone y tablets pero cuando pasamos a la siguiente fase: adaptar ese diseño a todos los dispositivos, es como si me tirasen un jarro de agua fría. Es un trabajo mecánico por el que tenemos que pasar y cuanto más eficiente lo hagamos, mejor.

Para que una simple App pueda estar disponible para todos los tipos de smartphone y tablets de iOS y Android, tiene que diseñarse para iPhone, iPhone con pantalla retina, Android ldpi, Android mdpi, Android hdpi, Android xhdpi, iPad 2, iPad 3,…
… eso sin incluir Symbian, BlackBerry y Windows 8. (os pongo las guías de estilo de estos SSOO)

Aquí vemos lo que os estaba diciendo:

- Conversión entre las diferentes densidades.
- Tamaños de las diferentes pantallas.
- Tamaños de los iconos.

Densidades de iOS y Android

Acceder a toda esta información de un solo vistazo puede causarte sensación de agobio, pero vamos a resumirlo para que resulte más fácil.

Os explico mi forma de trabajar, después de probar varios métodos me parece el más rápido y organizado:

Comienzo el diseño siempre en una resolución/densidad que me resulte cómoda y tenga una buena percepción de las proporciones de los elementos y que también desde Android y Apple recomiendan, denominándola “BASELINE“.

Android: 160 mdpi – Pantalla: 320×480 px    /    iPhone: No retina – Pantalla:320×480 px  

Después de tener todo esto preparado, empiezo a hacer todo el DISEÑO de la app, con todas las pantallas que lo necesiten (aconsejo trabajar en VECTOR y AJUSTADO AL PIXEL, ya que luego nos será más fácil para manipular los elementos) y una vez que tengo todo el diseño hecho y aprobado finalmente, me preparo para adaptar los elementos o los diseños a las demás densidades. 

Os pongo un pequeño truco para que os resulte más cómodo esto de ajustar al pixel:

Ajustado al pixel

Preparar una buena GUÍA DE ELEMENTOS es esencial, nos ahorrará mucho tiempo y esfuerzo a la hora de recortar los elementos. Teniendo todos los elementos en la guía, juntos, bien medidos, y organizados, solo nos queda crear los sectores.

Una vez hechos los SECTORES, podremos exportar fácilmente todos los elementos desde Guardar para Web y dispositivos con un solo clic.

sectores

Tener la guía de elementos hecha en 160 mdpi, nos permitirá convertirlo todo para las diferentes densidades, multiplicando por los siguientes valores:

Workflow

Esto se hace desde Photoshop>Imagen>Tamaño de imagen:

Vemos que en la dimensión en píxeles pone 100 de porcentaje y ahí es donde tenemos que poner el porcentaje de conversión que tiene cada densidad con respecto a la 160 mdpi.

Por ejemplo: para aumentar de 160 mdpi a 240 hdpi, tendríamos que cambiar el 100% por un 150% y si lo que queremos es reducir a 120 ldpi, tendríamos que poner en vez de 100% un 75%.

NOTA: acordaos siempre de tener activados los checkboxes de Cambiar escala de estilos, Restringir proporciones y Remuestrear la imagen: Por aproximación (recomendado)

Ya que en Android, los valores no son números enteros, el ajustado al píxel de los elementos puede verse afectado, así que deberíais revisarlo y ajustarlos al píxel de nuevo (es la cruz que nos ha caído con Android), pienso que de aquí viene nuestra fama de fanáticos de Apple ;).

Espero que toda esta información os sirva para facilitar vuestro trabajo como diseñadores de Apps y/o aclararos un poco más sobre esto de las diferentes densidades de pantallas.

Aquí os dejo unos links donde viene toda la información:

Android: Guía de estilo

Apple: Guía de estilo

36 Comentarios

  1. Carlos
    23 agosto, 2012

    Está genial el post! Me ha ayudado mucho, ahora estoy empezando con esto de las apps y no hay mucha info específica por internet. Gracias!

    Contestar
    • UnTipoDigital
      23 agosto, 2012

      Me alegro de que te haya servido ;)

      Contestar
  2. CR_Design
    27 agosto, 2012

    Muchas gracias por compartir la información. Voy a intentar hacer, como bien dices, todo el diseño en vector. Saludos!

    Contestar
  3. Just Indómita
    31 agosto, 2012

    Mil gracias por la info.
    Realmente genial :)
    Me gustaría estar en contacto contigo.

    V.

    Contestar
    • UnTipoDigital
      7 septiembre, 2012

      Gracias! Me alegro de que te sirva.

      Contestar
  4. Alex
    31 agosto, 2012

    Muchas por tu información, es de mucha ayuda para quienes iniciamos a diseñar App para los dispositivos móviles.

    Solo tengo una pregunta:
    Cuando creas un nuevo documento en Photoshop y que sera tu BASELINE, por ejemplo, si tomo las dimensiones de pantalla 320x480px para 160mdpi, el 160 corresponde a la resolución que debere ponerle al nuevo documento que en este caso seria 160dpi??

    Saludos,

    Contestar
    • UnTipoDigital
      7 septiembre, 2012

      Me alegro de que te haya servido ;)

      La resolución en tus documentos debe de ser 72ppp. No hace falta que cambies esa resolución porque para eso cambiamos el tamaño (320×480 px). Esos valores están relacionados, así que si mantienes el mismo tamaño pero aumentas la resolución es lo mismo que mantener la resolución y aumentar el tamaño

      Contestar
      • Alex
        4 octubre, 2012

        Hola. gracias por tu respuesta.
        Perdona que te de las gracias hasta ahora pero me habia ausentado por unos días.

        Se te agradece por tu información que me ha servido de mucho, no sabes cuanto.
        Donde he tenido un poco de mas trabajo ha sido con las densidades de los BlackBerry, pero al final termine haciendo 5 densidadades, pero si tu sabes de algún metodo que me pueda servir no dudes en mencionarlo.

        Cuidate mucho, saludos.

        Contestar
  5. Gillbert
    13 febrero, 2013

    Muchas gracias!

    Esta genial!

    Contestar
    • UnTipoDigital
      22 febrero, 2013

      De nada! ;)

      Contestar
  6. Genevieve
    22 febrero, 2013

    I blog too and I am writing something very
    close to this specific article, “Un Tipo Digital – Diseñador visual de interfaces digitales

    Contestar
    • UnTipoDigital
      22 febrero, 2013

      Great!

      Contestar
  7. cristina
    2 marzo, 2013

    Muchas gracias por tus consejos!! me han sido de gran utilidad.
    Solo me queda una duda; dices que hay que diseñar a 72 dpi? al ser así,y teniendo en cuenta que un iphone tiene 326 dpi, no saldría pixelado o desenfocado?
    He leído en algún otro foro que lo ideal es diseñar (en photoshop) a 200 dpi…

    Gracias de nuevo!!!

    Contestar
    • UnTipoDigital
      5 marzo, 2013

      Me alegro de que te haya servido.
      El tamaño en píxeles y la resolución son proporcionales, de modo que la pantalla del iphone 3 y la del 4 tienen el mismo tamaño de pantalla (3,5″) por lo que el tamaño en píxeles sería el mismo 320x480px pero aquí entra la densidad de píxeles (en el mismo espacio, la pantalla retina tiene el doble de píxeles que la normal).
      A ver si te aclara este ejemplo: Un papel con tamaño A2 podríamos dividirlo en 2 A3, pero con mayor densidad, un A2 podríamos dividirlo en 4 A4. Es el mismo tamaño pero tiene más partes y más pequeñas.
      Pues igual pasa con las pantallas: 320×480 a 72ppp = 640×960 a 72ppp = 320×480 a 144ppp

      Diseñando en base a tamaños en píxeles, lo que ganamos es que en nuestra pantalla del monitor al ser de 72ppp vamos a ver exactamente toda la app y sus detalles visuales tal y como van a quedar, ya que si diseñamos en densidad a 144ppp por ejemplo una linea de 1px en nuestro monitor serán 2px en la pantalla retina. Así tenemos unos tamaños y proporciones reales, que por lo menos a mí me ayudan bastante.
      Espero que te haya aclarado, si no, no dudes en preguntarme ;)

      Contestar
    • Alex
      31 mayo, 2013

      Hola Cristina, con respecto a tu pregunta, yo trabajo el diseño de la App tal como lo explican aca, que es a 72dpi, a esta resolución cortas todas las partes y la programas en en xcode.

      La resolución que comentas del iphone de 326dpi la utilizo si el cliente de un inicio me pide una imagen grande de la App para publicidad impresa.

      Saludos, y suertes con tus diseños de App.

      Gracias UnTipoDigital por el espacio para las consultas.

      Contestar
  8. david
    1 abril, 2013

    Bastante útil tu información amigo, una pregunta más? Recomiendas los fondos obscuros texto blanco para la lectura? o tienes algún estudio sobre esto para ver repercusiones o que tan viable pueda ser esto?

    Saludos y gracias!

    Contestar
    • UnTipoDigital
      19 agosto, 2013

      Gracias David! Pues sobre ese tema hay mucha información por internet, una pequeña muestra es este artículo http://blog.tatham.oddie.com.au/2008/10/13/why-light-text-on-dark-background-is-a-bad-idea/
      Además hay que tener en cuenta que los dispositivos móviles se usan en exterior y por efectos de la luz, reflejos, sombras… puede no tener suficiente contraste como para leerlo cómodamente. Para leer alguna frase o 2-3 lineas de texto se podría utilizar el fondo oscuro y texto blanco pero para leer más cantidad de texto creo que sería muy arriesgado.

      Contestar
  9. Eduardo
    30 julio, 2013

    Entiendo tu planteamiento de partir de esa resolucion/densidad (Baseline) .
    Es cómodo para escalar los elementos basados en vectores.
    Pero si tienes por fondo una imagen que ocupa toda la pantalla y empiezas el diseño a 320×480 (72ppp) al escalarla al 150% o 200%. ¿No se pixeliza o pierde calidad la imagen? ¿Cómo solucionas esto?¿Cúal es tu forma de trabajar para las imágenes de fondo?

    Contestar
    • UnTipoDigital
      19 agosto, 2013

      Para las imágenes de fondo es conveniente hacer algo revés, de mayor tamaño a menor. Cualquier imagen (que no sea vector) pierde calidad si la tienes en pequeño y la haces grande, pero al contrario no. Entonces en este caso, coges la imagen de fondo, la pones sobre tu resolución mayor y de ahí vas escalando a menos. En la imagen del post tienes los porcentajes para hacer a la inversa, útiles en estos casos. Espero que te haya aclarado la duda.

      Contestar
  10. José
    7 agosto, 2013

    Una gran publicación, gracias.

    Solo me queda la misma duda que han planteado otros lectores de que al trabajar de menos a mas resolución puede verse afectada la nitidez de los elementos.

    Contestar
    • UnTipoDigital
      19 agosto, 2013

      Gracias José! La nitidez no se ve afectada porque trabajamos con vectores. Un vector puedes hacerlo de pequeño a gigante y siempre va a estar nítido. No funciona con píxeles, si no con formulas matemáticas que calculan lineas y curvas. Aquí puedes ver un ejemplo. http://www.xaraxone.com/webxealot/xealot30/bitmap_01.gif Puedes buscar más información sobre Vector Vs. Bitmap. Espero que te haya ayudado la aclaración.

      Contestar
  11. Ruben
    11 octubre, 2013

    Gracias, muy util!!,.
    Mi duda es si no sería más funcional guardar solo las imagenes xxhdpi y que en programación estas se ajusten automáticamente a los demás tamaños, siendo menos engorroso al tener solamente un archivo de cada y menos pesada la app. Hablo desde la inexperiencia, sería una buena opción?

    Contestar
    • UnTipoDigital
      11 octubre, 2013

      Pues según tengo entendido, sí que se puede hacer pero no siempre va a quedar bien ya que la proporción de las pantallas los móviles es diferente y además, al reducirse por programación, puede que las imágenes no se ajusten al pixel y no se vean nítidos y definidos. Te puedes arriesgar, pero desde luego si quieres hacer una app bien hecha, deberías asegurarte de que en todos los dispositivos se ve perfecto y no hay ningún fallo.

      Contestar
      • Ruben
        12 octubre, 2013

        Gracias, realizaré alguna prueba para ver que tal se ajusta automaticamente, pero para que quede profesional como bien dices es mejor asegurarte de que todo se ajusta ala perfección. Un saludo.

        Contestar
  12. miq
    4 diciembre, 2013

    Muy buen post, enhorabuena!

    Contestar
  13. JorgeGL
    10 enero, 2014

    Muy bien explicado, me has ahorrado un buen rato planeando una rutina para hacer todo eso.

    Contestar
  14. carles
    23 enero, 2014

    Buenos días,

    Tengo un problema con los sectores, al aumentar por escala la guía de elementos, los sectores no hacen el mismo escalada y tengo que ir modificando los secotres manualmente. ¿Me podrías decir que hago mal?

    Muchas gracias!

    Contestar
  15. Evelyn Cardona
    15 junio, 2014

    Hola! Gracias, me ha quedado bastante más claro contigo, explicado por humanos para humanos.

    Tengo duda si para las imágenes de fondo es también igual que para los íconos: 72ppp de resolución. Lo otro es q veo q utilizaste centímetros como unidad de medida ¿Por qué?

    Gracias, ahora te sigo en Tw

    Contestar
    • Karcy
      29 agosto, 2014

      I’m not quite sure how to say this; you made it extmerely easy for me!

      Contestar
  16. inpc
    10 agosto, 2014

    This is really interesting, You are a very skilled blogger.

    I’ve joined your feed and look forward to seeking more of your wonderful
    post. Also, I’ve shared your web site in my social networks!

    Contestar
  17. andrea
    27 abril, 2015

    Hola!
    Gracias por tu ayuda lo primero. Soy un poco nueva en esto y el programador de una app que estoy haciendo me pide el diseño de las pantallas como las quiero. Se lo tengo que dar ya en el aspect ratio de cada tablet? o valdría que le hiciera un diseño genérico y el que lo adecue?
    gracias

    Contestar
  18. Livier Méndez
    23 octubre, 2015

    Sería bueno una nueva explicación con photoshop cc :)

    Contestar
  19. UnTipoDigital
    7 diciembre, 2015

    Buenas Livier y a todos los demás.

    Siento haber estado ausente, he estado bastante liado con trabajo, pero vuelvo a estar disponible para ayudaros en las dudas.

    Como bien dices, sería buena una explicación con CC, espero tener algo de tiempo y poder hacerla en breve.

    Gracias y un saludo!

    Contestar
  20. https://www.facebook.com/cachdangky3gmobifone/
    14 octubre, 2016

    A fascinating discussion is definitely worth comment.

    I believe that you should write more about this topic, it
    might not be a taboo matter but generally folks
    don’t discuss these subjects. To the next! All the best!!

    Contestar
  21. Santiago
    19 octubre, 2016

    Gracias amigo, fue de gran ayuda esta publicación. :)

    Contestar

Dejar un comentario