Diseñador y su rol en el desarrollo de aplicaciones móviles.
Todos sabemos que el diseño juega un papel muy importante en el diseño y desarrollo de aplicaciones móviles. Cada diseñador tiene su propio enfoque, métodos y herramientas para trabajar en aplicaciones. El ritmo de desarrollo adicional depende de en qué plataformas trabajará el diseñador y cómo presentará el material terminado al equipo del proyecto.
No es ningún secreto que los equipos de proyecto cambian con frecuencia. Hoy uno está trabajando en el proyecto, y mañana una persona completamente diferente ya está trabajando. Por lo tanto, el diseño de una aplicación móvil no es solo imágenes bien dibujadas, sino también material transmitido de alta calidad, que muestra a otras personas cómo debería funcionar la aplicación.
En este artículo quiero hablar sobre la interacción del desarrollador con el diseñador, basada en mi propia experiencia en el desarrollo de una aplicación móvil, sobre mis expectativas del proyecto y la brutal realidad. Espero que este artículo haga que muchos nuevos diseñadores piensen en su trabajo, así como que ayude a los desarrolladores a enfrentar algunas situaciones difíciles.
¿Cómo puede un diseñador facilitarle la vida a un desarrollador?
Entonces, el diseñador, independientemente de su perfil y enfoque, hay muchas herramientas con las que puede dibujar lo que se requiere de él. Solo dibujar pantallas de una aplicación móvil no es suficiente. Este no es un sitio web ni una aplicación web. Esta categoría de productos digitales tiene reglas más estrictas que debe obedecer. Se han creado pautas separadas para las plataformas IOS y Android (consulte la sección "Enlaces útiles").
Todo esto fue inventado por una razón. Si un ilustrador o simplemente un diseñador web de repente decide formar parte de un equipo móvil, es seguro decir que entregará el proyecto relativamente mal. Incluso si le parece que hizo todo bien, un mayor desarrollo puede llevar a la conclusión opuesta.
Actualmente, la situación es tal que los desarrolladores, como los diseñadores, tienen muchas herramientas y guías específicas. No solo no quieren profundizar en las herramientas de diseño, sino que simplemente no tienen tiempo. El diseñador acaba de aprobar su trabajo, y el gerente del proyecto y el cliente ya están exigiendo los resultados del desarrollador. ¿Qué puede ayudar un diseñador en este caso? ¿Cómo puede ahorrar tiempo al desarrollador? Todo es bastante simple: debe elegir las herramientas adecuadas no solo para dibujar el proyecto, sino también para el trabajo posterior con el equipo de desarrollo.
Después de varios años de trabajo en muchos equipos diferentes, me di cuenta de cómo el diseño afecta la velocidad de desarrollo y el trabajo cómodo en un equipo. Por lo tanto, ahora, antes de llevar el diseño al desarrollo, verifico que cumpla con ciertos estándares y reglas.
El diseñador es parte del equipo.
Estas no son solo palabras patéticas. El diseñador debe ser parte del equipo antes de poner la aplicación en la tienda, comunicarse constantemente con colegas, aclarar problemas y responder rápidamente a las solicitudes de los desarrolladores. El plazo mínimo de su estadía en el equipo es hasta la primera entrega del MVP.
Como muestra la práctica, los diseñadores no siempre dan sus diseños de una manera de alta calidad, y con un mayor desarrollo, surgen algunas fallas, por ejemplo, no se dibujan pantallas vacías o algún estado de elementos, se cortan incorrectamente bloques de elementos, falta de algunos recursos. También sucede que el cliente quiere agregar algo.
El diseñador tiene que terminar su trabajo, y es bueno si estará en el equipo en este momento para que los cambios se puedan hacer rápidamente. O debe estar en contacto para que el proyecto y el equipo no tengan problemas con el cambio operativo de UI / UX.
El desarrollador no debe entender en qué programas se dibujó el proyecto. Los archivos deberían abrirse fácilmente
Como se mencionó anteriormente, el desarrollador ahora tiene que estudiar tanto que simplemente no hay tiempo para comprender a los editores gráficos. Por lo tanto, el diseñador no debe dibujar elementos en Photoshop / Illustrator y donar el diseño en archivos * .psd / * .ai. Dichos archivos pesan bastante y requieren la instalación del paquete de Adobe. Incluso si esto no juega un papel especial, simplemente no hay tiempo para estudiar estos editores.
El desarrollador solo quiere seleccionar los elementos y ver cómo escribirlos, y no entender la estructura de las capas de un archivo enorme. Ahora hay muchos editores gráficos para renderizar aplicaciones móviles: Sketch, Figma y otros. En general, hay mucho para elegir. La forma en que el diseñador presentará un prototipo en el que se puede hacer clic y las "pantallas en vivo" para la interfaz dependerá del editor seleccionado.
Si el diseñador eligió Figma, las pantallas "en vivo", el prototipo en el que se puede hacer clic, la historia del usuario, las transiciones de pantalla, las familias de fuentes y el color, los recursos se pueden descargar de forma independiente: todo está en un solo lugar. Los cambios de diseño son visibles de inmediato. Al igual que muchos servicios, Figma tiene sus inconvenientes. Pero esta es una opción bastante buena, aunque solo sea porque este editor no requiere la instalación de un software especial. Solo necesita hacer clic en el enlace al proyecto. Lo principal es tener Internet.
Sketch también es una buena opción. Un diseñador puede usar herramientas de creación de prototipos como Zeplin o InVision para este editor si el equipo de desarrollo ya está trabajando con ellos. Estos programas no requieren un estudio en profundidad de las herramientas.
El diseñador debe conocer las pautas para las diferentes plataformas y sus diferencias.
Muy a menudo, los diseñadores dibujan proyectos sin comprender las pautas, mezclan estilos o crean elementos no estándar, pensando en la belleza de la pantalla. Hay bastantes ejemplos de este tipo en Dribbble y Behance. Los clientes, que desconocen estos matices, aprueban los diseños. Cuando se trata de desarrollo, las cosas se detienen. El diseñador no quiere rehacer el trabajo incorrecto. El cliente requiere tal pantalla o efecto, que aprobó, pero no se puede hacer.
Por lo tanto, es muy importante que el diseñador entienda qué y cómo dibujar.
Recursos
Este es el problema más doloroso al interactuar con un diseñador. Por lo general, los diseñadores no cortan los recursos. En su mayor parte, creen que: no están obligados a hacer esto; es largo y monótono, y si el desarrollador lo necesita, cortará todo él mismo o puede restablecer * .svg; no saben exactamente qué se debe cortar y en qué tamaños.
Sin embargo, si se mira desde el lado del desarrollador, resolver este problema reduce en gran medida el tiempo de trabajo. Es suficiente para él mirar el nombre del recurso en el prototipo y encontrar el mismo en la carpeta de recursos, y eso es todo, continúa escribiendo. ¿Y si imagina que el desarrollador necesita cortar los recursos él mismo? Debe resaltar completamente el elemento deseado en la pantalla, buscar la exportación, especificar el tamaño y la ruta.
Parece que es un trabajo rápido. Pero hay muchos elementos y se desperdicia mucho tiempo. Una vez más, los diseños no siempre se dan por vencidos en perfectas condiciones. El diseñador no siempre tiene todo en cuenta. Además, la herramienta de creación de prototipos puede no funcionar correctamente cuando se exporta.
Al tratar de seleccionar elementos para segmentar, los desarrolladores a veces seleccionan solo parte de un elemento o se aferran a un fondo (que debería ser transparente). Por lo tanto, es bueno cuando el diseñador no solo corta recursos, sino que también usa los tamaños correctos.
TK con una descripción de las pantallas
Es bueno cuando la aplicación consta de una pequeña cantidad de pantallas y de un vistazo está claro cómo funciona. Si la aplicación tiene una gran cantidad de pantallas y el prototipo no proporciona una imagen completa de su funcionamiento, o si la aplicación ha crecido después de realizar cambios a pedido del cliente, una descripción técnica de todas las pantallas, cada elemento en esta pantalla y su estado pueden salvar la situación.
Como se indicó anteriormente, los miembros del equipo del proyecto a menudo cambian. Nadie quiere meterse con los novatos. Quizás los colegas harán una breve revisión, colocarán enlaces a todos los recursos emitidos por el diseñador, y eso es todo. Se espera que el desarrollador comience a trabajar con una comprensión completa de cómo funciona la aplicación. En la mayoría de los casos, no hay conocimientos tradicionales que expliquen esto, porque el diseñador no sabía que era necesario o no quería hacerlo. ¿Y que sale? El trabajo se detiene. Un nuevo miembro del equipo no entiende qué y cómo funciona, trabaja a la mitad de la fuerza y pierde el tiempo del equipo.
¿Qué pasa si no hay ninguno de los anteriores, pero necesita trabajar?
Dio la casualidad de que todos los requisitos anteriores se convirtieron en obligatorios en uno de mis proyectos.
El proyecto se asoció con el alquiler de bienes inmuebles y se desarrolló para dos plataformas: IOS y Android. El proceso de desarrollo comenzó como cualquier otro. Más tarde resultó que el diseñador no estaba completamente versado en aplicaciones móviles. Qué guías no conocía. Al diseño asistieron elementos transparentes, las fuentes se usaron solo para una plataforma. La coloración podría describirse como el uso de "50 tonos de gris".
Me dieron un archivo * .psd. Parece que no hay nada malo. Dichos archivos son entregados por muchos diseñadores. Pero tuve que instalar el paquete de Adobe para ver el diseño. El archivo era muy "pesado" y se abrió durante unos 10 minutos. No todas las pantallas se dibujaron por separado en el espacio de trabajo. Estaban una encima de la otra como capas, y para ver una pantalla, tenía que apagar todas las demás. Como no tenía una experiencia significativa con el paquete, pensé en Avocode como una herramienta para procesar material de diseño. Por supuesto, este programa no es perfecto, pero literalmente me salvó.
El prototipo cliqueable me fue transferido en InVision. Tenga en cuenta, solo un prototipo en el que se puede hacer clic sin pantallas en vivo.
Conclusiones:
Lo que esperaba obtener del diseñador:
- prototipo en el que se puede hacer clic y pantallas en vivo (InVision, Zeplin o Figma)
- TK revisado con una descripción del funcionamiento de las pantallas
- pantallas de mapa con transiciones
- historia de usuario
- recursos cortados en tamaños @ 1, @ 2, @ 3
- fuentes
De todo lo anterior, recibí solo un prototipo en el que se puede hacer clic y un archivo * psd.
El proyecto se completa y se carga en la tienda. Pero para lograr este resultado, mi equipo atravesó siete círculos del infierno o, como dicen, se encontró con ciertas dificultades.
Muchos estarán en desacuerdo y dirán que los materiales provistos son suficientes. Pero estamos hablando de profesionalismo y de cómo se ve la situación desde el lado de los desarrolladores. Después de todo, un diseñador de aplicaciones móviles no es solo un artista. Este es un miembro de un equipo que trabaja en un proyecto complejo. Debería hacer bien su trabajo, porque para él este no es el final del trabajo en el proyecto, pero para el equipo es solo el comienzo.
¡Gracias a todos por su atención y proyectos exitosos!
Enlaces utiles:
Pautas del IOSPautas de AndroidProblemas de desarrollo del proyecto móvil heredadoFigmaBosquejo