Diseñando aplicaciones móviles hermosas 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 Universeat y. 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 al revés, sus características y funcionalidad, y el diseño teniendo en cuenta al usuario final. Eso es lo que esta publicación debe enseñar.

Proceso de diseño :

  1. Crea un diagrama de flujo de usuario para cada pantalla.
  2. Crear / dibujar wireframes.
  3. Elija patrones de diseño y paletas de colores.
  4. Crear maquetas.
  5. Cree un prototipo de aplicación animada y solicite a las personas que lo prueben y proporcionen comentarios.
  6. Da 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 funciones 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 utilizan para representar pantallas.
  • Los diamantes se utilizan para representar decisiones (por ejemplo, tocar el botón de inicio de sesión, deslizar hacia la izquierda, acercar).
  • Las flechas unen pantallas y decisiones juntas.

Los diagramas de flujo de usuarios son muy útiles porque brindan 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 los viajes de usuario diseñados, comenzará a trabajar en el armado de todas las pantallas. Los wireframes son esencialmente representaciones de baja fidelidad de cómo se verá tu aplicación. Esencialmente un boceto o un esquema de dónde irán las imágenes, etiquetas, botones y demás, con su diseño y ubicación. Un boceto de cómo funcionará tu aplicación.

Utilizo plantillas impresas de plantillas UI para dibujar las tramas. Ahorra tiempo y ofrece un bonito lienzo para dibujar y tomar notas.

Aquí hay un wireframe de ejemplo.

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 enlazar todas las pantallas con los botones.

Patrones de diseño y paletas de colores

Esta es mi parte favorita Es como comprar una ventana. Un montón de patrones de diseño y paletas de colores para elegir. Escojo los que me gustan y experimento 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 al uso de 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 en esta aplicación en el futuro y tomaste algunas capturas de pantalla. Debería verse realista y bastante parecido a lo real.

Hay software de diseño y herramientas para crear maquetas. Yo uso el diseñador de afinidad. 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.

¡Trayendo el dibujo del lápiz a los píxeles!

Experimenté más con varias paletas de colores.

Compartí las maquetas iniciales con mis amigos para 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 increíbles de parte de tus usuarios cuando hables con ellos, no cuando pases frenéticamente por Dribbble o Behance.

Así que rediseñé la maqueta y eliminé los gráficos de fondo porque generarlos era un proceso que requería mucho tiempo y redujeron la legibilidad. Así es como se veía la maqueta rediseñada.

Gradiente de oro con negro sorprendentemente se ve bien!

Estaba bastante satisfecho con el esquema de colores, los íconos 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 seguro divertido!

Una vez que todas mis pantallas estuvieron listas, armé un prototipo en Adobe XD y pedí a algunos amigos que experimentaran y dieran sus opiniones.

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

La interfaz principal!

Después de que todas las pantallas se completaron, 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 ayudarle 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