Diseño de aplicaciones móviles

Diseño de aplicaciones móviles: una guía para principiantes.

Todo lo que necesita saber para comenzar con el diseño de aplicaciones móviles.

Entonces, has decidido probar el diseño de aplicaciones móviles, pero no estás seguro de por dónde empezar. No te preocupes, te tenemos cubierto. En este artículo, describiremos cinco cosas que debe saber para ayudarlo a comenzar en el diseño de aplicaciones móviles.

Esta guía está dirigida a principiantes para el diseño de aplicaciones móviles. Si ya tiene algunas habilidades, eche un vistazo a nuestro resumen de tutoriales que lo guiarán a través de diferentes aspectos de cómo hacer una aplicación , en detalle.

¿Qué es el diseño de aplicaciones móviles?

Para ponerlo en términos muy amplios, los diseñadores de aplicaciones se encargan de hacer que una aplicación se vea bien, mientras que los desarrolladores hacen que funcione correctamente. El diseño de la aplicación móvil abarca tanto la interfaz de usuario (UI) como la experiencia de usuario (UX). Los diseñadores son responsables del estilo general de la aplicación, incluidos elementos como la combinación de colores, la selección de fuentes y los tipos de botones y widgets que utilizará el usuario. Entonces, ¿por dónde empiezas? Al principio.

¿Para qué plataforma debo diseñar?

Android o iOS? [Imagen: Pixabay]

Dependiendo de sus razones para querer diseñar aplicaciones móviles, es posible que ya sepa con qué plataforma desea trabajar y por qué. Pero, si recién estás comenzando y no estás seguro de cuál es el adecuado para ti, obtén el que más te guste.

Si estás usando un teléfono con Android, diseña para Android. Si está utilizando un dispositivo iOS, comience allí. Alternativamente, puede decidir el diseño para ambos, pero es mejor no morder más de lo que puede masticar, al menos no al principio.

¿Qué herramientas debo usar? 

Photoshop, Adobe XD y Sketch son todos contendientes fuertes

Una vez que sepa para qué plataforma está diseñando, el siguiente paso es seleccionar las herramientas de diseño web adecuadas para realizar el trabajo. Cuando se trata de diseñar aplicaciones móviles, la buena noticia es que, independientemente de la plataforma, generalmente puede usar las mismas herramientas para ambas. 

Las opciones populares para el diseño de aplicaciones incluyen Adobe Photoshop, Adobe XD y Sketch. Hay muchos, muchos más, pero estos son los grandes bateadores en la industria. Regístrese en Adobe Creative Cloud aquí .

Podría pensar que Photoshop es su mejor opción para el diseño de aplicaciones móviles, especialmente si lo ha usado para otros tipos de trabajo de diseño. Sin embargo, cuando se trata de diseñar aplicaciones móviles, es mejor que use Adobe XD o Sketch. Dicho esto, Sketch se considera el estándar de facto aquí, aunque Adobe XD está compitiendo con una fuerte competencia, habiendo agregado recientemente sistemas de diseño .

Una de las razones más importantes para usar Adobe XD o Sketch sobre algo como Photoshop es que estas dos herramientas están diseñadas teniendo en cuenta el diseño y la creación de prototipos. Ayudan a agilizar sus flujos de trabajo de diseño y están dirigidos a diseñadores de UI y UX, mientras que Photoshop es más para la manipulación de imágenes. 

Una nota importante aquí: si está planeando un desarrollo o soporte multiplataforma, Adobe XD es el claro ganador aquí ya que Sketch solo está disponible en macOS.

Pautas de diseño del sistema operativo

Antes de comenzar a diseñar, ya que primero debe comprender las cosas que se deben y no se deben hacer de su plataforma. En términos generales, el diseño de aplicaciones móviles comparte algunas similitudes entre los diferentes sistemas operativos, tales como:

  • Diseño orientado a objetivos
  • Mantenlo simple (menos es más)
  • Mantener el flujo
  • La legibilidad es clave
  • Respetar la plataforma

Lo último, «respetar la plataforma», es más importante de lo que puedes imaginar. Cuando los usuarios descargan e instalan una aplicación en su dispositivo, esperan que se comporte de una forma que sea familiar e intuitiva para ellos. Basan sus opiniones en lo que saben, por lo que cuando una aplicación va en contra del 90% de las reglas de diseño específicas del sistema operativo, es probable que los usuarios la eliminen.

No solo debe considerar los diferentes patrones de navegación que tienen iOS y Android, sino que también debe pensar en los botones, la selección de fuentes y la ubicación de los objetos de la interfaz de usuario, que varían para cada plataforma. 

La buena noticia es que no necesita adivinar qué es aceptable. Tanto Apple como Android tienen un conjunto de pautas de diseño que puede revisar antes de comenzar (y mientras está diseñando activamente):

Wireframes y flujo de aplicaciones

Use una herramienta de estructura de alambre dedicada, o apéguese al lápiz y al papel [Imagen: Pixabay]

Antes de diseñar la apariencia de una aplicación, es esencial trabajar en su estructura y control de flujo. Aquí es donde entran en juego los wireframes. Los Wireframes te ayudan a entender cómo los usuarios navegarán y usarán una aplicación. Generalmente se simplifican en su diseño, de modo que el enfoque está en el flujo y la facilidad de uso.

Si bien hay muchas herramientas dedicadas de estructura alámbrica , no es raro que los diseñadores simplemente usen un lápiz y papel. Sin embargo, si está buscando algo más de alta tecnología y colaboración (lo que es especialmente importante cuando está trabajando con un equipo remoto), considere la posibilidad de crear sus wireframes en Sketch o Adobe XD. La ventaja de usar estas herramientas para armado de alambre es que puede convertir sus armazones de baja fidelidad en vistas previas de alta fidelidad con relativa facilidad.

Nota: con Adobe XD , incluso puedes conseguir algunos kits gratuitos para ayudarte a comenzar.

Maquetas y prototipos.

Es hora de convertir sus wireframes en productos de trabajo [Imagen: Pixabay]

Una vez que haya trabajado en sus wireframes y los haya compartido con el equipo de desarrollo y / o su cliente para su discusión y aprobación, es hora de hacer algunas maquetas y prototipos.

Mientras está trabajando en el diseño de la aplicación, es un excelente momento para comenzar a construir una biblioteca compartida de activos. Por ejemplo, los botones estándar, los íconos y otros elementos que cree aquí pueden ser útiles en otras aplicaciones que diseñe, así que asegúrese de guardarlos.

Obtenga más información sobre este paso en nuestro artículo: 4 formas diferentes de crear maquetas de sitios web y aplicaciones .

Entregando al desarrollo para el Diseño de aplicaciones móviles .

Este paso realmente no se verá así [Imagen: Pixabay]

Los diseñadores también son responsables de entregar estos elementos y recursos visuales al desarrollador. Cosas como iconos, fondos, logotipos e incluso fuentes, son todas las cosas que un diseñador puede entregar a un desarrollador.

Una vez que el desarrollador tiene todo lo que necesita, es su trabajo tomar ese diseño (y sus diversas partes) y hacerlo funcionar. A veces, sin embargo, un diseñador no entiende las limitaciones a las que se enfrenta un desarrollador. Y cuando eso sucede, todo el infierno se desata.

Como diseñador de aplicaciones móviles, puede ignorar por completo al desarrollador y al proceso de desarrollo, pero es mejor entender los desafíos que enfrenta un desarrollador, ya sea con las herramientas que están usando o las limitaciones del sistema operativo y / o dispositivos en que se ejecutarán sus aplicaciones. Con este conocimiento, puede diseñar aplicaciones móviles de manera más eficiente, con menos rechazo por parte de su desarrollador y, al mismo tiempo, fomentar un entorno más colaborativo. 

Apasionado por la educación, enseñanza y capacitación, dedicado a impartir conocimiento y creando soluciones a emprendedores, las aulas son el mejor espacio para despertar la inquietud en aprender cada vez más. Experto en Diseño Web, Multimedia y Marketing Digital.

www.andresmurciacreativo.com