Diseñando hermosas aplicaciones móviles desde cero

Comencé a aprender diseño gráfico cuando tenía 13 años. Aprendí a diseñar sitios web a partir de cursos en línea y solía jugar con Photoshop y Affinity Designer todo el día. Esa experiencia me enseñó a pensar como un diseñador.

Llevo casi un año diseñando y desarrollando aplicaciones. Asistí a un programa en el MIT donde trabajé con un equipo para desarrollar Universeaty. Hace dos meses, comencé a trabajar en una nueva aplicación, Crypto Price Tracker, que lancé recientemente el 28 de enero.

En esta publicación, compartiré el proceso de diseño paso a paso que sigo junto con ejemplos de la aplicación en la que trabajé. Esto debería ayudar a cualquiera que quiera aprender o mejorar sus habilidades de diseño digital. El diseño no se trata solo de saber cómo usar el software de diseño, y esta publicación no le enseñará cómo usarlo. Hay cientos de tutoriales de buena calidad en línea para aprender. El diseño también se trata de comprender su producto de adentro hacia afuera, sus características y funcionalidades, y el diseño teniendo en cuenta al usuario final. Eso es lo que esta publicación pretende enseñar.

Proceso de diseño:

  1. Cree un diagrama de flujo de usuario para cada pantalla.
  2. Crear / dibujar wireframes.
  3. Elija patrones de diseño y paletas de colores.
  4. Crea maquetas.
  5. Cree un prototipo de aplicación animada y solicite a las personas que lo prueben y den su opinión.
  6. Dé retoques finales a las maquetas para tener las pantallas finales listas para comenzar a codificar.

¡Empecemos!

Diagrama de flujo de usuario

El primer paso es descubrir las características que desea en su aplicación. Una vez que tenga sus ideas, diseñe un diagrama de flujo de usuario. Un diagrama de flujo de usuario es una representación de muy alto nivel del viaje de un usuario a través de su aplicación / sitio web.

Por lo general, un diagrama de flujo de usuario se compone de 3 tipos de formas.

  • Los rectángulos se usan para representar pantallas.
  • Los diamantes se usan para representar decisiones (por ejemplo, tocar el botón de inicio de sesión, deslizar hacia la izquierda, acercar).
  • Las flechas enlazan pantallas y decisiones juntas.

Los diagramas de flujo de usuario son muy útiles porque dan una buena idea lógica de cómo funcionaría la aplicación.

Aquí hay un diagrama de flujo de usuario que dibujé cuando comencé a trabajar en el diseño de mi aplicación.

Diagrama de flujo de usuario para la interfaz principal.

Wireframes

Una vez que haya completado los diagramas de flujo de usuario para cada pantalla y haya diseñado los recorridos de los usuarios, comenzará a trabajar en el enmarcado de todas las pantallas. Los wireframes son esencialmente representaciones de baja fidelidad de cómo se verá su aplicación. Esencialmente, un boceto o un esquema de dónde irán las imágenes, etiquetas, botones y otras cosas, con su diseño y posicionamiento. Un bosquejo de cómo funcionará su aplicación.

Utilizo plantillas impresas de UI Stencils para dibujar los wireframes. Ahorra tiempo y proporciona un bonito lienzo para dibujar y tomar notas.

Aquí hay un ejemplo de estructura metálica.

Estructura metálica para la interfaz principal.

Después de dibujar los wireframes, puede usar una aplicación llamada Pop y tomar una foto de todos sus dibujos usando la aplicación y tener un prototipo al vincular todas las pantallas a través de botones.

Patrones de diseño y paletas de colores

Esta es mi parte favorita Es como mirar escaparates. Muchos patrones de diseño y paletas de colores para elegir. Voy a elegir los que me gustan y experimentar con ellos.

Las mejores plataformas para encontrar patrones de diseño son Mobile Patterns y Pttrns. Y para encontrar buenas paletas de colores, vaya a Color Hunt.

Maquetas

Esto es cuando finalmente pasas a usar el software de diseño. Una maqueta en el sentido del diseño es una representación de alta fidelidad de su diseño. Es casi como si entraste a esta aplicación en el futuro y tomaste algunas capturas de pantalla. Debería verse realista y más o menos como la cosa real.

Hay software de diseño y herramientas para crear maquetas. Yo uso Affinity Designer. La herramienta más utilizada para el diseño de iOS es Sketch.

Aquí hay un ejemplo de algunos de los primeros diseños de mi aplicación.

¡Llevando el dibujo a lápiz a píxeles!

Experimenté más con varias paletas de colores.

Compartí las maquetas iniciales con mis amigos por sus comentarios. A mucha gente parecía gustarle el degradado dorado y el esquema negro.

¡Esté dispuesto a recibir comentarios y experimentar con nuevas sugerencias! Encontrarás ideas sorprendentes de tus usuarios cuando hables con ellos, no cuando te desplaces frenéticamente por Dribbble o Behance.

Así que rediseñé la maqueta y eliminé los gráficos de fondo porque generarlos era un proceso técnicamente lento y reducían la legibilidad. Así es como se veía la maqueta rediseñada.

¡El degradado dorado con negro sorprendentemente se ve bien!

Estaba bastante satisfecho con la combinación de colores, los iconos en la barra de pestañas y el diseño general. Seguí adelante y diseñé el resto de las pantallas siguiendo las mismas pautas de diseño. ¡Fue un proceso largo, pero seguramente divertido!

Una vez que todas mis pantallas estuvieron listas, armé un prototipo en Adobe XD y les pedí a algunos amigos que experimentaran y dieran su opinión.

Después de los toques finales y tal, así es como se ve mi diseño final.

La interfaz principal!

Después de completar todas las pantallas, las importé a Xcode y comencé a codificar la aplicación.

¡Eso es! Espero que esta publicación lo ayude a comenzar con el diseño de la aplicación o lo ayude a convertirse en un mejor diseñador. Y si te gusta mi aplicación, puedes descargarla aquí.

Estoy terminando la publicación con una de mis citas favoritas sobre diseño.

“El diseño no es solo lo que parece y se siente. El diseño es como funciona "
-Steve Jobs