Comencé a aprender diseño gráfico cuando tenía 13 años. Aprendí a diseñar sitios web con cursos en línea y solía jugar con Photoshop y Affinity Designer todo el día. Esa experiencia me enseñó a pensar como diseñador.
He estado diseñando y desarrollando aplicaciones durante casi un año. 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 funcionalidad, y diseñar teniendo en cuenta al usuario final. Eso es lo que esta publicación pretende enseñar.
Proceso de diseño :
- Cree un diagrama de flujo de usuarios para cada pantalla.
- Crea / dibuja estructuras alámbricas.
- Elija patrones de diseño y paletas de colores.
- Crea maquetas.
- Cree un prototipo de aplicación animada y pida a las personas que lo prueben y brinden comentarios.
- Dé los 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 usuarios. Un diagrama de flujo de usuarios 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 el dedo hacia la izquierda, hacer zoom).
- Las flechas unen pantallas y decisiones.
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 usuarios que dibujé cuando comencé a trabajar en el diseño de mi aplicación.
Wireframes
Una vez que haya completado los diagramas de flujo de usuarios para cada pantalla y haya diseñado los recorridos de los usuarios, comenzará a trabajar en el wireframing 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 cosas, con su diseño y posicionamiento. Un esbozo 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 alámbrica.
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 uniendo 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. 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
Aquí es cuando finalmente pasa a usar 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 hubiera entrado en esta aplicación en el futuro y hubiera tomado algunas capturas de pantalla. Debería verse realista y muy parecido a la realidad.
Hay software de diseño y herramientas para crear maquetas. Yo uso el diseñador de Affinity. 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.
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! Descubrirá que las ideas asombrosas provienen de sus usuarios cuando habla con ellos, no cuando se desplaza 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.
Estaba bastante satisfecho con la combinación de colores, los iconos de 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 demás, así es como se ve mi diseño final.
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 te ayude a comenzar con el diseño de aplicaciones o te ayude a convertirte en un mejor diseñador. Y si te gusta mi aplicación, puedes descargarla aquí.
Termino el post con una de mis citas favoritas sobre diseño.
“El diseño no es solo lo que parece y lo que se siente. El diseño es como funciona "-Steve Jobs