Raúl Marín Calleja

Workshop de 24 horas para convertirse en un Design System Specialist.

El uso, cada vez mayor, de las interfaces de voz no solo ha revolucionado la forma de relacionarnos con la tecnología, sino que también replantea cómo se realiza una búsqueda e incluso se compra un producto. A pesar de que la forma más directa de interacción oral sigue siendo el teléfono móvil, los altavoces inteligentes cada vez son más usados y están más presentes en nuestros hogares. Lo usuarios de momento emplean estos altavoces para tareas sencillas (escuchar música, preguntas generales… Mostrar más

El uso, cada vez mayor, de las interfaces de voz no solo ha revolucionado la forma de relacionarnos con la tecnología, sino que también replantea cómo se realiza una búsqueda e incluso se compra un producto. A pesar de que la forma más directa de interacción oral sigue siendo el teléfono móvil, los altavoces inteligentes cada vez son más usados y están más presentes en nuestros hogares. Lo usuarios de momento emplean estos altavoces para tareas sencillas (escuchar música, preguntas generales, etc.) y por eso en este taller crearemos desde 0 una sencilla “skill” para Alexa y Google Home con la herramienta de prototipado Voiceflow, sin necesidad de código complejo, y que podremos probar posteriormente en el propio dispositivo al acabar la sesión. Veremos todo el proceso desde su conceptualización y diseño hasta su conexión con nuestra cuenta de Amazon o Google.

Qué veremos:

Conceptos básicos de Alexa Skills.
Diseñando VUI. Principio básicos.
Desarrollando Alexa Skills sin código con Voiceflow.
Sistema de bloques.
Testando en el dispositivo Mostrar menos

Herramientas de prototipado como InVision, Marvelapp, Principle o incluso Axure, cada uno con sus limitaciones, son opciones que salen mal paradas si tenemos en cuenta el tiempo que lleva crear nuestros proyectos y el resultado final que conseguimos con ellas. Especialmente en proyectos web responsive. En este taller trasladaremos un diseño en alta fidelidad realizado con Figma/Sketch a Webflow desde 0 con total precisión, viendo cómo la herramienta integra desarrollo y diseño de manera fácil y… Mostrar más

Herramientas de prototipado como InVision, Marvelapp, Principle o incluso Axure, cada uno con sus limitaciones, son opciones que salen mal paradas si tenemos en cuenta el tiempo que lleva crear nuestros proyectos y el resultado final que conseguimos con ellas. Especialmente en proyectos web responsive. En este taller trasladaremos un diseño en alta fidelidad realizado con Figma/Sketch a Webflow desde 0 con total precisión, viendo cómo la herramienta integra desarrollo y diseño de manera fácil y rápida. Utilizando símbolos y componentes reutilizables de la misma forma que lo hacen las herramientas de diseño digital. El acabado final, a parte de para producción, veremos que se puede aplicar a pruebas de usuario, A/B testing o el lanzamiento de MVPs.

Qué veremos:

Situación actual del mundo de los CMS, plataformas “No-Code”...
¿Qué aporta Webflow?
Primeros pasos con Webflow (interfaz, layout, componentes, símbolos…).
Exportación e importación de assets desde Sketch / Figma.
Transiciones y estados.
Animaciones e interacciones (Lottie, Parallax…).
Lanzamiento y publicación. Mostrar menos

Deben los diseñadores programar? ¿Sí? ¿No? Conocer las posibilidades y limitaciones del CSS hacen a un UI mejor diseñador y le permiten abordar cada proyecto web con mayor perspectiva y precisión. El diseño “front” se ha reinventado en los últimos años apareciendo montones de propiedades nuevas, metodologías y frameworks que permiten desarrollar mejores webs pero que la mayoría de veces ni UIs ni devs han incorporado a su flujo de trabajo habitual. En este taller trabajaremos, desde la… Mostrar más

Deben los diseñadores programar? ¿Sí? ¿No? Conocer las posibilidades y limitaciones del CSS hacen a un UI mejor diseñador y le permiten abordar cada proyecto web con mayor perspectiva y precisión. El diseño “front” se ha reinventado en los últimos años apareciendo montones de propiedades nuevas, metodologías y frameworks que permiten desarrollar mejores webs pero que la mayoría de veces ni UIs ni devs han incorporado a su flujo de trabajo habitual. En este taller trabajaremos, desde la perspectiva del diseñador, con todo ese “nuevo mundo”: aplicando tipografías variables, el uso del color con HSL, maquetando con flexbox y CSS Grid, las nuevas media-queries, viendo qué es BEM... Comprobaremos también lo que aporta el uso de pre-procesadores como SASS o PostCSS, y aplicaremos frameworks CSS tan flexibles como Tailwind Css.

Qué veremos:

Reciclando CSS.
Tipografías variables.
Layout con Flexbox y CSS Grid.
Aplicando BEM.
Pre-procesadores.
¿Qué hay de nuevo en Tailwind Css? Mostrar menos

Actualmente las herramientas de prototipado cumplen una función principal en el proceso de desarrollo de cualquier producto digital. Pero herramientas como InVision, Marvel, Flinto (y todas las demás) no cumplen específicamente con las necesidades de diseño “responsive” cuando diseñamos nuestros e-commerces, landings, etc. Aprenderemos los fundamentos básicos del diseño “responsive”, veremos algunas de las herramientas más prácticas para prototipar este tipo de proyectos (Webflow, JustinMind… Mostrar más

Actualmente las herramientas de prototipado cumplen una función principal en el proceso de desarrollo de cualquier producto digital. Pero herramientas como InVision, Marvel, Flinto (y todas las demás) no cumplen específicamente con las necesidades de diseño “responsive” cuando diseñamos nuestros e-commerces, landings, etc. Aprenderemos los fundamentos básicos del diseño “responsive”, veremos algunas de las herramientas más prácticas para prototipar este tipo de proyectos (Webflow, JustinMind, Axure o soluciones integradas en Sketch como Anima (Launchpad y Timeline)). Durante las jornadas realizaremos 2 ejercicios para ver los fundamentos y herramientas principales de Axure y por otro lado de Anima + Sketch. Mostrar menos

El formato SVG cuenta con numerosos defensores y detractores y a pesar de sus increíbles ventajas sigue siendo un gran desconocido para diseñadores y desarrolladores. En esta masterclass aprenderemos cómo son, con qué herramientas podemos generarlos (Sketch, Figma, Illustrator, código…), cómo optimizarlos para eliminar la información redundante, y lo más importante, conocer las diferentes formas de integración y manipulación con html, css y js. Y, por supuesto, también su uso con CMS como… Mostrar más

El formato SVG cuenta con numerosos defensores y detractores y a pesar de sus increíbles ventajas sigue siendo un gran desconocido para diseñadores y desarrolladores. En esta masterclass aprenderemos cómo son, con qué herramientas podemos generarlos (Sketch, Figma, Illustrator, código…), cómo optimizarlos para eliminar la información redundante, y lo más importante, conocer las diferentes formas de integración y manipulación con html, css y js. Y, por supuesto, también su uso con CMS como WordPress. Por último veremos cómo animarlos y sacarles más partido en nuestras microinteracciones, con herramientas como Lottie (y Bodimovin) o Haiku Mostrar menos

Los iconos son prácticamente imprescindibles en cualquier proyecto digital, pero no siempre queremos recurrir a “sets” prediseñados y perder la consistencia de nuestros trabajos. Repasaremos los fundamentos de la percepción visual (Gestalt), la importancia de los pesos visuales y alineaciones. Cómo aplicar la “grid” (8 pt) y cómo generar un sistema de escalado. Durante la sesión crearemos algunos íconos para poder aplicar las técnicas y procedimientos que conseguirán que se muestren… Mostrar más

Los iconos son prácticamente imprescindibles en cualquier proyecto digital, pero no siempre queremos recurrir a “sets” prediseñados y perder la consistencia de nuestros trabajos. Repasaremos los fundamentos de la percepción visual (Gestalt), la importancia de los pesos visuales y alineaciones. Cómo aplicar la “grid” (8 pt) y cómo generar un sistema de escalado. Durante la sesión crearemos algunos íconos para poder aplicar las técnicas y procedimientos que conseguirán que se muestren perfectamente nítidos incluso en pantallas sin “retina”. Finalmente veremos cómo transformar nuestros iconos en una “icon font” y poder usarlos en proyectos web. Así conoceremos qué es el “unicode”, y revisaremos las diferentes formas de renderizado de tipografías que presentan sistemas como Windows o Mac OS. Mostrar menos

La evaluación heurística es una de las herramientas (de experto) más importantes con las que contamos para analizar y evaluar la calidad de un sistema o producto digital en UX. En este curso, repasaremos las clásicas reglas de Jakob Nielsen, Schneiderman, Pierotti o Tognazzini y aplicaremos subheurísticas que nos permitirán ampliar el mapeado de posibles problemas de usabilidad. Sin dejar de lado los dispositivos móviles donde también es muy habitual encontrar errores básicos de interacción… Mostrar más

La evaluación heurística es una de las herramientas (de experto) más importantes con las que contamos para analizar y evaluar la calidad de un sistema o producto digital en UX. En este curso, repasaremos las clásicas reglas de Jakob Nielsen, Schneiderman, Pierotti o Tognazzini y aplicaremos subheurísticas que nos permitirán ampliar el mapeado de posibles problemas de usabilidad. Sin dejar de lado los dispositivos móviles donde también es muy habitual encontrar errores básicos de interacción. Veremos también cómo evaluar la usabilidad con técnicas adicionales como el “método Pure” que nos permite valorar la facilidad o dificultad con la que un usuario realiza una tarea. Mostrar menos

Una de las fases más importantes de todo desarrollo de producto digital pasa por el testing donde ponemos a prueba procesos concretos con usuarios reales. En esta sesión repasaremos como se plantean y planifican estas pruebas que nos ofrecen datos cuantitativos y cualitativos de forma remota, rápida y sencilla. Para ello usaremos 2 de las mejores herramientas disponibles: Quant UX y Maze, viendo cómo conectarlos con nuestros proyectos creados en InVision o Marvelapp y Sketch. Después… Mostrar más

Una de las fases más importantes de todo desarrollo de producto digital pasa por el testing donde ponemos a prueba procesos concretos con usuarios reales. En esta sesión repasaremos como se plantean y planifican estas pruebas que nos ofrecen datos cuantitativos y cualitativos de forma remota, rápida y sencilla. Para ello usaremos 2 de las mejores herramientas disponibles: Quant UX y Maze, viendo cómo conectarlos con nuestros proyectos creados en InVision o Marvelapp y Sketch. Después abordaremos como analizar los datos obtenidos y cómo aprovecharlos para iterar nuestras apps y web, gracias a los KPIs (básicos) de tarea completada, ratios de error, tiempo invertido o incluso yendo aún más lejos gracias a los mapas de calor. Mostrar menos