por .

Tips a tomar en cuenta al diseñar para móviles si eres un web designer (Parte 1)

Como todos hemos podido observar, no es lo mismo utilizar una página web convencional a una aplicación móvil. Existen grandes diferencias entre ambas; esto se debe a que se debe optimizar el diseño según el dispositivo a usar.

Por este motivo les dejare algunos tips que debemos tomar en cuenta al diseñar para móvil con experiencia previa en el diseño web.

Tip # 1 : Leer sobre las interfaces de los dispositivos móviles

Como diseñadores web, todos nuestros diseños se han limitado a una ventana de un navegador. Por el contrario, al diseñar para móviles, tenemos distintos dispositivos que consumir en nuestra aplicación: cada uno de una forma de usarse (la cual es esperada por el usuario) totalmente distinta.

Para nuestra suerte, los dos grandes del mercado: Apple (iOS) y Google (Android), han dedicado mucho esfuerzo en documentar ciertos estándares para esto.

Android: User Interface Guidelines

Diseñar en Android se nos puede volver algo tedioso. Debemos tomar en cuenta que la aplicación será vista desde una amplia gama de dispositivos y que no nos estaremos enfocando en sólo dos. Igualmente, los dispositivos son totalmente diferentes entre si: hay dispositivos de alta gama como los hay dispositivos de baja gama.

Android cuenta con una gran cantidad de dispositivos y por lo tanto de pantallas, por lo cual debemos tomar en cuenta lo siguiente:

Diseño flexible que se fije a diferentes dimensiones (ancho y alto)

Optimizar nuestro diseño, debemos aprovechar al máximo el espacio en la pantalla, creando un ambiente fluido y de fácil navegación.

Algo muy importante es considerar los DPI para de este modo asegurar que la aplicación se vea bien desde cualquier dispositivo. Los DPI (Dots Per Inches) podríamos describirlos como la cantidad de pixeles dentro de una pulgada.

Lo que se logra realmente es agregar un mayor número de pixeles a nuestra imagen para mejorar la resolución de la mismas, así a la hora de incrementar o disminuir su tamaño la misma no se verá distorsionada.

Todo esto nos deja con la gran interrogante, que es un dolor de cabeza para muchos: Entonces si existen tanta variedad de dispositivos ¿cómo trabajar el diseño?.

Para esto el guideline de Android nos recomienda trabajar en un tamaño estándar (medium size MDPI). Lo que se recomienda es comenzar con el dispositivo de mayor resolución hacia el más pequeño.

Temas

Android ofrece una variedad de temas para las aplicaciones, cada estilo posee propiedades diferentes de como presentar la información al usuario, diversos componentes como el color, alturas, iconos. Esto se hace para manejar un estándar dentro de la plataforma.

Aquí están los temas que nos ofrece Ice Cream Sandwich:

Lo ideal es adaptar el tema a las necesidades de nuestra aplicación, fijar muchos los detalles y el público a quién va dirigida, pero más importante aún: mantener una uniformidad dentro de la aplicación. Si nuestra aplicación utiliza un tipo de textura para los botones y barras, mantener estos dentro de toda la aplicación y no jugar con varios a la vez.

Medida y resolución

Como sabemos, existe una gran variedad de dispositivos, estos no solo varian en tamaño sino tambien en resolución. Para ayudarnos a trabajar con tanta gama de especificaciones y productos Android en su guideline, nos muestra un rango de tamaños (Size Bucket) estandares tanto para sus teléfonos (600dp) como tabletas (mayor de 600dp). Podemos tener un apoyo visual en la imagen que se presentara a continuación.

Se trabaja con un conjunto de cuatro medidas generalizadas o rangos que serian los siguientes: pequeña (LDPI), normal (MDPI), grande (HDPI) y extra grande (XHDPI). Estas densidades son

Tipografías

Usar una tipografía clara es de suma importancia tanto para diseño web, pero aún más para móvil.

La idea es crear un diseño ordenado y comprensible para esto la plataforma nos brinda una escala de tipografía clara en la que podemos mencionar Roboto.

En cuanto a tamaños se le ofrece al usuario escoger entre una escala determinada, esto se hace con el fin de darle al usuario la libertad de adaptarse a la aplicación según sus necesidades.

Colores y texturas

Cada aplicación tiene su personalidad ligada un color o colores que la representan. Es importante crear un contraste entre todos los elementos que conforman nuestra aplicación. Tomar en concideración los detalles, es algo que siempre nos recomiendan a la hora de diseñar los chicos de Google.

Podemos dedicar un tiempo a ver los detalles de diversas aplicaciones que realmente son una obra de arte en cuanto a colores y texturas, esto es un ejercicio que recomiendo a la hora tomar ideas para el diseño de la aplicación. Unas de las aplicaciones que te puedo recomendar son: Skype e Instagram; claro esto dependera a que esta orientada tu aplicación.

Iconografía

Llegamos uno de los puntos claves del diseño de la aplicación. El icono que nos brindará una presencia dentro del dispositivo. Debemos asegurarnos de crear una imagen que sea simple y fácil de distinguir.

Icono de la aplicación

Tamaños y escalas: esta deberá ser de 48x48dp (Full Assets) . Para la visualización desde Google deberá ser de 512x512dp

Barra de Acciones (Action Bar)

Estos son el grupo de iconos que nos permiten llevar a cabo una acción dentro de nuestra aplicación. Cada uno de ellos deben representar una única acción determinada.

Aún más importante: los íconos utilizados deberán representar fácilmente su funcionalidad ligada.

Por ejemplo, los botones de actualizar y compartir. La plataforma nos brinda un set de estos iconos para adecuarlos a las acciones dentro de nuestra aplicación. Un ejemplo es en la aplicacion de mensajeria Whatsapp, donde podemos observar el action bar de sus diferentes secciones como chat, donde vemos los iconos de: busqueda y escribir.

Estos iconos los podemos descargar desde la misma página de Guía de Android.

La escala de estos iconos será en general de 32x32dp (Full Asset) y 24x24dp (Optical Square)

Iconos pequeños

Estos iconos van dentro del contexto, por ejemplo aquellos iconos que acompañan la aplicación de correo de email.

  • Su escala es 16x16dp (full asset) y 12x12px (optical square)
  • Se recomienda el uso de colores no neutros para los mismos, colores que puedan resaltar del fondo.

Iconos de notificación

  • Estos iconos deberán ser completamente blancos y planos
  • Su escala es 24x24dp (full asset) y 22x22dp (optical square)
  • Es importante mantener un estilo plano y sencillo

Nota: A la hora de trabajar en la aplicación debemos tomar en cuenta a la comunidad de desarrolladores, esto con el fin de saber lo que se puede o no a la hora de manejar el flujo y proceso de los elementos.

Botones

Los botones consisten en una imagen (o un texto con un área seleccionable a su alrededor) que contiene un texto que nos idica una acción a seguir. En android podemos utilizar dos tipos de botones, como lo son el básico y el sin bordes, ambos pueden contener ademas de textos, imagenes descriptivas de la acción.

Esto es la base de la interacción con nuestros dispositivos, hacer botones que diversas iluminaciones que se activen al tacto, que indiquen al usuario cuando una opción está escogida es la respuesta visual que ellos esperan.

Ejemplo de botón basico:

Ejemplo de botón sin bordes:

Próximas partes

En la siguientes partes de esta serie de artículos atacaremos otros puntos que son muy importantes a tomar en cuenta a la hora de diseñar aplicaciones móviles, al tener una experiencia en el diseño web.

Esperamos que este artículo haya sido de su agrado y recuerden compartirlo si les ha parecido así.

Susan es la Arquitecta de Soluciones y co-fundadora de Pixmat. Susan se Ingeniera Electrónica y Telecomunicaciones.


Comentarios

Nosotros

Pixmat Studios es una agencia de diseño y desarrollo de soluciones tecnológicas basado en Ciudad de Panamá.


Twitter

Continuemos la conversación en las redes sociales. ¡Síguenos en Twitter!



Artículos Recientes


Tags


Notice: Array to string conversion in /var/www/pixmatstudios.com/htdocs/site/plugins/tagcloud.php on line 38

Fatal error: Uncaught Error: Function name must be a string in /var/www/pixmatstudios.com/htdocs/site/plugins/tagcloud.php:38 Stack trace: #0 /var/www/pixmatstudios.com/htdocs/site/snippets/blog_sidebar.php(42): tagcloud(Object(page)) #1 /var/www/pixmatstudios.com/htdocs/kirby/lib/template.php(36): require('/var/www/pixmat...') #2 /var/www/pixmatstudios.com/htdocs/kirby/lib/helpers.php(66): tpl::loadFile('/var/www/pixmat...', Array, false) #3 /var/www/pixmatstudios.com/htdocs/site/templates/article.php(73): snippet('blog_sidebar') #4 /var/www/pixmatstudios.com/htdocs/kirby/lib/template.php(36): require('/var/www/pixmat...') #5 /var/www/pixmatstudios.com/htdocs/kirby/lib/template.php(25): tpl::loadFile('/var/www/pixmat...', Array, true) #6 /var/www/pixmatstudios.com/htdocs/kirby/lib/site.php(206): tpl::load('article', Array, true) #7 /var/www/pixmatstudios.com/htdocs/kirby/system.php(65): site->load() #8 /var/www/pixmatstudios.com/htdocs/index.php(71): require_once('/var/www/pixmat...') #9 {main} thrown in /var/www/pixmatstudios.com/htdocs/site/plugins/tagcloud.php on line 38