Hola y bienvenidos a otro post de UX / UI, especialmente dirigido a quienes quieran comenzar a diseñar y crear nuevos productos digitales, pero también para quienes ya tienen los conocimientos pero quieren estar siempre al día.
Hoy hablaremos de un concepto muy importante actualmente y que en inglés se denomina “mobil first” (móvil primero). Este concepto se refiere a un nuevo punto de vista que se toma en el proceso de diseño, y que nos dice que primero debemos diseñar para pantallas de móviles y de ahí ampliar el diseño al formato y dimensiones de la pantalla de un ordenador, y no al revés, como se ha estado haciendo hasta ahora.
El proceso de trabajo que siempre se ha llevado a cabo era hacer primero el diseño en pantallas grandes y ya después ir acomodando elementos en el formato móvil, intentando respetar, por supuesto, el diseño original. Pero trabajar de este modo lo único que nos trae son problemas, ya que algunos elementos no encajan y otros empiezan a complicarnos la vida.Así que está claro que debemos de empezar a estructurar de otra forma la manera de pensar para que el proceso no se haga tan pesado y evitemos baches en el camino. Y para ello debemos plantear primero el caso más complicado y restrictivo, en lo referente a espacio, y de ahí ir adaptándolo a los formatos más grandes.
Primero que nada, antes de ponernos a diseñar, es importante tener claro cuales son los elementos o secciones que se deben mostrar una pantalla. Teniendo esto claro establecemos un orden jerárquico de bloques que debe ir apareciendo a medida que el visitante vaya pasando por el contenido. Tener un orden es primordial porque nos ayudará a ahorrar horas sentados frente al ordenador.Un consejo, que nosotros mismos ponemos en práctica, es imprimir unas hojas en las que ya previamente se ha puesto una ilustración muy básica de la pantalla de un teléfono con unas dimensiones de 357 x 667 px (el tamaño de la mayoría de los móviles actualmente) y que ayudarán a poder establecer un marco o límite a nuestros diseños. De estas pantallas imprimimos varias y más tarde nos disponemos a estructurar a mano el contenido, a modo de wireframes.
Es bueno al principio tener o buscar referencias de diseños que ya existan y que hayan resuelto con éxito diferentes problemáticas. Primero porque nunca debemos pretender inventar la rueda y luego porque es muy importante estar al tanto de lo que hacen los demás para poder diferenciarnos y no repetir lo que han hecho otros.Ya empezando con la parte gráfica de la interfaz podemos ir estableciendo ciertas medidas de los contenidos. Por ejemplo en una pantalla de móvil con un ancho de 357 px puedo establecer que ese ancho equivale a ¼ de columna de una pantalla de ancho de 1423 px. Con estas medidas se pueden ya determinar elementos, como botones, a los que no será necesario cambiar el tamaño ni ajustarlos, ya que sí se adaptan al teléfono móvil y se pueden ver de la misma manera en la pantalla de un ordenador.¿Entonces esto en que nos ayudará? Está claro, en poder primero establecer una serie de estilos para los elementos y después poder trasladarlos a las diferentes dimensiones de pantalla, teniendo que hacer sólo pequeños cambios, ya que está claro que caber, caben.Si utilizas Adobe XD el procedimiento es muy fácil. El programa te permite trabajar sobre una pantalla de móvil, teniendo todo el tiempo al lado una pantalla de ordenador. Sólo hay que estar atento a una cosa, hasta que no hayas resuelto el diseño dentro de la pantalla de móvil, no te puedes pasar a la de ordenador. Ya verás que con esto, los cambios que debas hacer son mínimos.
Podemos poner un ejemplo. Al diseñar elementos gráficos como iconos, que ayudan a la comprensión de la información, es importante establecer el tamaño que les vamos a dar, el grosor de las líneas, y siempre probar su legibilidad. Un elemento pequeño debe tener la menor cantidad de partes para que se entienda lo que quiere comunicar. Entonces podríamos establecer que el icono mida, por ejemplo, entre 40 px de ancho y 40 px de alto para teléfonos, y lo mismo para pantallas de ordenador. De esta forma estandarizamos tamaños y elementos de la página, que nos ayudarán más tarde en la producción del diseño.
Entonces, qué ventajas tiene diseñar primero para teléfonos móviles?
Para terminar sólo una cosa. Hay que tener siempre en cuenta, que la mayoría de los diseños que tienen buena aceptación por la comunidad son aquellos que integran la parte gráfica y emocional y saben transmitir el objetivo de la aplicación además de que su usabilidad sea perfecta.Con esto ya podemos tener claro que es bueno empezar diseñando para teléfonos móviles, adaptándolo a la propia metodología de trabajo, para llevarlo a cabo en todos los proyectos.Esperamos que os sirva todo lo que hemos hablado, y no olvidéis que si tenéis alguna pregunta o consulta nos podéis contactar ahello@markos-esther.com
