Miles de diseñadores y desarrolladores de aplicaciones alrededor del mundo trabajan codo con codo todos los días para construir algunas de las aplicaciones más increíbles e innovadoras. Sin embargo, a esta sinergia muy a menudo no se le da la importancia que merece. En este contexto, la última Conferencia ADDC (App Design & Development Conference) crea oportunidades para satisfacer, innovar e inspirarse a los profesionales de ambas áreas en un espacio abierto, inclusivo y colaborativo.
Recogemos a continuación un resumen de las principales ideas extraídas de las diferentes charlas incluídas en la Conferencia ADDC:
My dear designer… with love… your developer
Fernando Cejas, ingeniero de Software enfocado en plataformas móviles habló sobre la importancia de la relación entre un diseñador y un programador y de cómo se necesitan el uno al otro para obtener buenos resultados.
Para ello, establece las siguientes pautas:
¿Cómo pueden ayudar los desarrolladores a los diseñadores?
- Transmitir el know-how de lo que se puede hacer y lo que no
- Dar una visión general de cómo funcionan las cosas
- Hacer críticas constructivas sobre los diseños
- Aportar una perspectiva diferente: basada en experiencia o funcionalidad
¿Cómo pueden ayudar los diseñadores a los desarrolladores?
- Usar un Asset Management actual o Control System Version.
- Mantener todo en vectores y efectos escalables.
- Uso de Platform’s idioms.
- Uso de contenido real
¿Cómo podemos trabajar juntos?
- Establecer un workflow claro y consistente
- Nunca asumir que es fácil
- Respeto mutuo
- Trabajar en harmonía y ambiente colaborativo
- Tener presente que la creatividad existe en ambos lados
- El feedback es clave para ambos
Motion and building effective developer-designer relationships
Una relación más cercana entre desarrolladores y diseñadores es esencial para crear buenas experiencias de usuario. Esta charla estuvo llena de ejemplos de herramientas para mejorar esta relación.
Hoy en día existen varias herramientas que ayudan a poder controlar las interacciones y animaciones mejor, construyendo ejemplos.
- La combinación de PeepPop + Interpolate: Peek and Pop es una gran herramienta nueva en iOS introducida con iPhone 6S y 6S+ que permite previsualizar contenido usando 3D touch.
- Lottie: Librería de código abierto que se encarga de renderizar las animaciones en tiempo real en los dispositivos, evitando cualquier tipo de codificación extra. Con Lottie resulta posible trasladar las animaciones desde After Effects sin necesidad de animar manualmente el código nativo. Basta con exportar en JSON la animación, utilizando el plugin Open Source Bodymovin.
- Fast + Easy, importando imágenes de Sketch, Keynote, Photoshop y Powerpoint
- Principle Mirror: Herramienta para Mac. Una especie de hibrido entre Sketch y Keynote que te permite convertir un diseño estático en un prototipo dinámico e interactivo.
- Origami: Se ha creado por un equipo de diseñadores de Facebook y se ha usado para crear apps como Instagram, Messenger y Paper. Copia cualquier cosa de Sketch y pega las capas en Origami Studio para poder mover las distintas capas. La herramienta permite a los diseñadores definir mejor gestos y animaciones de transición. Existe una opción para exportar código que convierte lo visual en código para iOS, Android o web. La pega es que no se puede compartir el prototipado tan fácilmente como un archivo, pero sí a través de previsualizaciones con Origami Live disponible para Android y iOS.
- Framer: Es un framework de Javascript para desarrollar prototipos interactivos de alta fidelidad.
¿La realidad virtual ha matado al 16:9?
Aprender a diseñar VR se está convirtiendo en una necesidad debido a las nuevas tecnologías, pero no siempre tenemos los recursos. Es por eso que Laura Hernández, diseñadora multidisciplinar de Visyon, quiso compartir algunos consejos para no cometer errores diseñando interfaces y animaciones para mundos virtuales.
La realidad virtual no tiene barreras, es por eso que es importante saber hasta dónde hemos de dibujar. En VR un story es bastante más complejo:
Además hay que tener en cuenta que la realidad virtual tiene muchas posibilidades a experimentar.
Passion, pixels and anxiety! 
Rikke transformó su proyecto personal en su trabajo actual. Este proyecto se llama ‘Steps’ y es una aplicación que combina tecnología y salud mental. A través de la app proponen una serie de pequeños retos que contribuyen a combatir la ansiedad.
Creating great animations on iOS
Las animaciones son una gran parte del diseño de las aplicaciones modernas, e iOS ofrece varias herramientas para crearlas. En este contexto, John Sundell mostró varias técnicas de cómo hacerlo y cómo generar un workflow fluido y eficaz tanto para los desarrolladores como los diseñadores.
Las bases: SpriteKit es un framework (de iOS) para el desarrollo de juegos 2D, sin embargo, aunque es una herramienta pensada básicamente para la creación de juegos, es una herramienta muy interesante para ilustraciones 2D y animaciones. Permite hacer animaciones con un código, tal como muestra el siguiente ejemplo sencillo del loading animado de los emojis:
- Crear una SKScene que haga de contenedor para la animación:
- Con esto tenemos una SKScene usando un SKView (que es un UIView subclass de iOS). Al añadirle el view al view controller y establecer un tamaño y punto en el centro, deberíamos tener una escena como la siguiente:
- Añadir nodes: Ahora que tenemos una escena en la que renderizar, y un view que lo presentará en el view controller, podemos empezar a añadir contenido. Creamos una extensión en SKLabelNode que permitirá renderizar un emoji:
Luego, otra extensión method en el view controller para añadir todos los emojis en nuestra escena (que los llamaremos desde makeScene()).
- ¡A animar!: Con todo el set up hecho ¡ahora viene lo divertido! Donde realmente se crea la animación. Le diremos a cada emoji que se escale a grande y luego a pequeño, con un pequeño retraso dependiendo en el index del node.
El código de la imagen funciona, pero es bastante complejo de leer. No obstante, se puede arreglar fácilmente gracias a Swift’s dot notation syntax, dejándolo de la siguiente manera:
- Ya podemos iniciar la animación llamando al method anterior con todas nuestras escenas con nodes en la makeScen():
- Ahora que ya es fácil de leer es fácil modificar y añadir movimientos. Por ejemplo, si a la escala le añadimos rotación:
John Sundell nos mostró, con este ejemplo, como utilizar SpritKit para animaciones nos permite escribir de una manera clara un código fácil de modificar y así poder experimentar hasta conseguir el resultado de la animación deseado.
UX discothèque: Cómo hacer DJ design y development thinking 
Jim Forrest explora el UX Design y su desarrollo a través de técnicas de la cultura DJ y performance musical. Por ello, explicó cómo crear dinámicas y situaciones únicas con los usuarios a base de ritmos y sorpresas.
Sus puntos clave:
- Apetito: Hacer conexiones laterales entre ideas disparatadas y entender la historia de tu disciplina.
- Práctica: Crear en un espacio donde no haya nada que perder y puedas experimentar.
- Preparación: Planear, buscar, diferenciar y asimilar.
- Acompasar la experiencia: Diseñar el arco de experiencia teniendo presente la emoción y la expectación del público.
- Usuarios: Anticipar y responder en el momento adecuado.
Por Marta Such y Facundo Pretini.