Sistemasde diseño -Diseño de sistemas

Sede en La IndustrialC/ San Andrés 8, 28004 Madriddinos@mrmarcelschool.com

58h lectivas

NOVIEMBRE2019

MrMarcel Schooles una escuela del siglo XXI, dirigida a profesionales de las industrias creativas. Nuestra forma de hacer esta basada en tres ejes: la calidad de contenidos y profesorado, el cui-dado de la experiencia en el apren-dizaje y el firme convencimiento de que para una escuela “el futuro es hoy”.

02

03

Skills & ToolsSistemas de diseño

¿Qué son los sistemas de diseño?

La big thing del momento. Airbnb con su Design Language System, Google con Material Design, Apple con las Human Interface Guidelines, IBM con Carbon Design System...todos tienen su sistema de diseño y los que no, demandan perfi-les para generarlos. Esta popularidad, más allá de la moda, se debe a las ventajas que ofrecen en cuanto a consistencia, escalabilidad y mante-nimiento.

Pero los sistemas no son algo reciente, algo de ahora. Están en los Lego y en las portadas de los libros de Penguin, están en los muebles de Vitsoe y en productos de consumo como los de Apple. Conforman un conjunto de reglas, patrones y principios, creados en torno a un propósito, que dictan la naturaleza de un producto o un conjun-to de ellos.

Dentro del mundo digital, la mayoría de la gente identifica los sistemas como una colección de componentes que se pueden combinar para diseñar interfaces, pero va mucho más allá. El tono de voz, el estilo de las animaciones, la retícula, los patrones, como deben usarse los elementos que componen la interfaz... Todo ello forma parte del sistema, lo articula. Todo ello define cómo se aplica y cuál es su razón de ser.

Skills & ToolsSistemas de diseño

Cómo es el cursoy qué queremos conseguir

Práctico, personalizado y colaborativo.Así será el enfoque del curso. Todo el conoci-miento se explicará a base de píldoras que posteriormente se pondrán en práctica mediante ejercicios. Además cada alumno realizará un proyecto cañero que le permitirá conectar todo lo aprendido.

Se establecerá un canal de comunicación para promover el desarrollo grupal y resolver dudas puntuales, habrá bastante trabajo mano a mano y fluirán constantemente referencias, lecturas y recursos para reforzar el aprendizaje y sacarle el máximo provecho a las clases.

La pieza central del temario será el sistema de diseño, pero la cosa no se quedará ahí. Se verán conceptos y procesos relacionados con el diseño de producto en general y se abordará el sistema como una parte específica del conjunto.

El contenido estará basado en la metodología y los procesos que se usan a día de hoy en men-desaltaren. Estos están probados y validados en múltiples proyectos realizados para startups y multinacionales. Se partirá desde el análisis inicial, la síntesis y la definición de la unidad mínima hasta la concepción de los estilos, la creación de los componentes y el desarrollo posterior de la documentación. Además, vere-mos cómo encaja todo esto en el flujo de trabajo del producto, como intervienen distintos agentes en él y qué pasos deberemos de llevar a cabo para asegurarnos de que el resultado es óptimo.

Todo esto suena bien, pero todo el mundo sabe que no es fácil implantar nuevas metodologías en algunas empresas. Para combatir este pro-blema, durante las clases, se mostrarán recursos sobre cómo gestar la semilla y conseguir que al final este tipo de iniciativas prosperen dentro de una compañía.

El objetivo del curso: dotar a los alumnos de las habilidades y recursos necesarios para imple-mentar un sistema durante la creación de un producto o la mejora de uno ya existente. Además, en paralelo, se buscará que el alumno adquiera otras habilidades y recursos transver-sales que le ayuden a ser un mejor diseñador de producto y adquirir ventajas profesionales que lediferencien.

¿Qué vas a obtener?

-Capacidad para diseñar un sistema desde sus cimientos, mantenerlo y modificarlo.-Herramientas y visión para auditar una aplica-ción y establecer su sistema.-Conocimientos para definir el concepto y la estructura base de un producto.-Una visión global del proceso de diseño de productos digitales.-Metodologías, trucos y buenas prácticas para que la calidad final del desarrollo sea óptima.-Distintas vías para evangelizar el sistema e involucrar a otros agentes de la empresa para que lo usen.-Secretos, trucos, referencias y recursos usados

Herramientas que usaremos

-Figma o Sketch + Abstract-Notion-Slack-Keynote o similar-Zeplin o similar-Zero height, Design System Manager o similar

04

en mendesaltaren.-Buenas prácticas para la organización de tus archivos y la gestión de versiones.-Habilidad para crear interfaces recursivas, bellas y funcionales.-Incremento de la eficacia y la velocidad a la hora de diseñar interfaces.-Recursos para crear una documentación com-partida.

Sobre el proyecto transversal

Cada alumno seleccionará un producto ya existente por el que tenga interés.Ese producto será analizado para después lanzar un rediseño que lo mejore. El proyecto comenzará con la auditoría del producto, encon-trando la forma en la que se construye y articula. Más tarde se pasará a la definición de laestructura, la organización de archivos y los estilos básicos. Por último diseñaremos los elementos necesarios para componer las distin-tas partes de la interfaz y a partir de ellos plan-tearemos algunas vistas y flujos con una menta-lidad sistemática. Al finalizar el curso los alum-nos tendrán como resultado de su trabajo un producto con un sistema de diseño organizado, escalable, consistente e impecable a nivel técni-co que le permita nutrir una o varias interfaces.

Cómo es el cursoy qué queremos conseguir

Práctico, personalizado y colaborativo.Así será el enfoque del curso. Todo el conoci-miento se explicará a base de píldoras que posteriormente se pondrán en práctica mediante ejercicios. Además cada alumno realizará un proyecto cañero que le permitirá conectar todo lo aprendido.

Se establecerá un canal de comunicación para promover el desarrollo grupal y resolver dudas puntuales, habrá bastante trabajo mano a mano y fluirán constantemente referencias, lecturas y recursos para reforzar el aprendizaje y sacarle el máximo provecho a las clases.

La pieza central del temario será el sistema de diseño, pero la cosa no se quedará ahí. Se verán conceptos y procesos relacionados con el diseño de producto en general y se abordará el sistema como una parte específica del conjunto.

El contenido estará basado en la metodología y los procesos que se usan a día de hoy en men-desaltaren. Estos están probados y validados en múltiples proyectos realizados para startups y multinacionales. Se partirá desde el análisis inicial, la síntesis y la definición de la unidad mínima hasta la concepción de los estilos, la creación de los componentes y el desarrollo posterior de la documentación. Además, vere-mos cómo encaja todo esto en el flujo de trabajo del producto, como intervienen distintos agentes en él y qué pasos deberemos de llevar a cabo para asegurarnos de que el resultado es óptimo.

Todo esto suena bien, pero todo el mundo sabe que no es fácil implantar nuevas metodologías en algunas empresas. Para combatir este pro-blema, durante las clases, se mostrarán recursos sobre cómo gestar la semilla y conseguir que al final este tipo de iniciativas prosperen dentro de una compañía.

El objetivo del curso: dotar a los alumnos de las habilidades y recursos necesarios para imple-mentar un sistema durante la creación de un producto o la mejora de uno ya existente. Además, en paralelo, se buscará que el alumno adquiera otras habilidades y recursos transver-sales que le ayuden a ser un mejor diseñador de producto y adquirir ventajas profesionales que lediferencien.

¿Qué vas a obtener?

-Capacidad para diseñar un sistema desde sus cimientos, mantenerlo y modificarlo.-Herramientas y visión para auditar una aplica-ción y establecer su sistema.-Conocimientos para definir el concepto y la estructura base de un producto.-Una visión global del proceso de diseño de productos digitales.-Metodologías, trucos y buenas prácticas para que la calidad final del desarrollo sea óptima.-Distintas vías para evangelizar el sistema e involucrar a otros agentes de la empresa para que lo usen.-Secretos, trucos, referencias y recursos usados

05

Skills & ToolsSistemas de diseño

Herramientas que usaremos

-Figma o Sketch + Abstract-Notion-Slack-Keynote o similar-Zeplin o similar-Zero height, Design System Manager o similar

en mendesaltaren.-Buenas prácticas para la organización de tus archivos y la gestión de versiones.-Habilidad para crear interfaces recursivas, bellas y funcionales.-Incremento de la eficacia y la velocidad a la hora de diseñar interfaces.-Recursos para crear una documentación com-partida.

Sobre el proyecto transversal

Cada alumno seleccionará un producto ya existente por el que tenga interés.Ese producto será analizado para después lanzar un rediseño que lo mejore. El proyecto comenzará con la auditoría del producto, encon-trando la forma en la que se construye y articula. Más tarde se pasará a la definición de laestructura, la organización de archivos y los estilos básicos. Por último diseñaremos los elementos necesarios para componer las distin-tas partes de la interfaz y a partir de ellos plan-tearemos algunas vistas y flujos con una menta-lidad sistemática. Al finalizar el curso los alum-nos tendrán como resultado de su trabajo un producto con un sistema de diseño organizado, escalable, consistente e impecable a nivel técni-co que le permita nutrir una o varias interfaces.

06

SKILLSTOOLS

Sistemas de diseño

A quién va dirigido este curso:

-Diseñadores UI/UX que quieran profundizar en una metodología utilizada por algunos de los mejores equipos de diseño de producto del país. -Equipos de producto que quieran implantar o lanzar un rediseño abordándolo desde una perspectiva sistémica.-Diseñadores digitales en agencia que quieran mejorar sus conocimientos de producto, adop-tando una metodología puntera. -Diseñadores, publicistas, directores de arte... que quieran sumergirse en la profundidad del entorno digital, aprendiendo a abordar proyec-tos de forma sólida y consistente.-Desarrolladores con interés por el diseño que quieran aprender a diseñar un sistema para servir como base a su sistema de componentes.

Requisitos:

-Conocimientos básicos, medios o avanzados en diseño. Idealmente en entornos digitales.-Manejo de herramientas de diseño como Figma o Sketch.-Mentalidad abierta y capacidad de reinventar-se.-Ganas de aprender y currarselo.-Durante el curso trabajaremos cada uno con su portátil. Si no tienes, la escuela dispone de varios que puedes alquilar a un precio razonable.

Skills & ToolsSistemas de diseño

07

Sobre los docentes:

Mendesaltaren es un estudio de diseño de pro-ductos digitales que nace con el objetivo de aportar valor a negocios solucionando los pro-blemas de sus usuarios. Con ese objetivo en mente, co-fundan y ayudan a lanzar proyectos através de la estrategia, el análisis y el diseño y teniendo claro que la estética es una parte inseparable de la experiencia.Aunque el estudio se fundó en 2017, el equipo posee una larga trayectoria trabajando con empresas del sector. A día de hoy han colabora-do en el diseño de productos para SEAT, UEFA o ZARA y startups como Chicfy o Packlink.Compaginan su trabajo en diseño con cursos puntuales en escuelas del sector porque confían en que la clave para el progreso es compartir los conocimientos adquiridos.

mendesaltaren.com

Librerías

Trucos y buenas prácticasPlugins y funcionalidades útiles en Figma/SketchPriorización del sistemaErrores comunesRecursos

CLASE Sábado 30/11 de 09h30 a 14h30Iterando sobre el sistema Proceso de trabajo en producto Procesos de diseño Equipos implicados Diseño enfocado a tareas

Mantenimiento del sistema

Convergencia de elementos Cambio de estilos Actualización de componentes Buenas prácticas y errores comu-nes Changelog Manejo de diseño legado

SESIÓN DE TRABAJOMartes 03/12 de 19h30 a 22h30

TUTORÍAJueves 05/12 de 19h30 a 22h30

CLASEViernes 13/12 de 16h30 a 21h30

Patrones

Feedback Sistemas de diseño Navegación Formatos Internacionalización

Documentación

Cómo enfocar la documentaciónTipos de estructura Alcance. ¿Qué meter y qué no? Plataformas de documentación Colaboración con otros equipos

CLASE. Sabado 14/12 de 09h30 a 14h30

Entrega y colaboración con desa-rrollo

Hando�Exportación de recursos Feedback Errores comunes y buenas prácti-cas Governance

Control de calidad

Proceso

Herramientas Cómo dar feedback Errores comunes y buenas prácti-cas

SESIÓN DE TRABAJOMartes 17/12 de 19h30 a 22h30

TUTORÍAJueves 19/12 de 19h30 a 22h30. Fin de curso. De cañas!

*este programa esta sujeto a posibles actulizaciones.

Skills & Tools

08

CLASE Viernes 08/11 de 16h30 a 21h30Toma de contacto ·Presentación del curso ·Introducción a los sistemas de diseño ·Herramientas

Entender ·Comunicar en un proyecto ·Organización interna ·Herramientas

CLASE Sábado 09/11 de 09h30 a 14h30Delimitar el problema

Análisis de la problemática Briefing Toma de requisitos Definir una base

Fundamentos de un producto PRD Nomenclatura Unidad mínima

Auditoría

Análisis de flujos y vistas del producto Análisis de estilos y recursos visua-les Componetización

CLASEViernes 15/11 de 16h30 a 21h30Teoría de los sistemas

HistoriaEjemplos y casos de estudioFundamentos

Creación de una guía de estilos

Tono de vozConcepto visualGuías de estiloTipografía y sistema tipográfico

CLASESábado 16/11 de 09h30 a 14h30Siguiendo con la guia de estilo

ColorEspaciados y gridsEsqueleto del sistema

Estructura y organización

Qué incluir y qué noNomenclaturaFragmentos, componentes y módulos

Definición de los fragmentos

Organización técnicaCreación del grid para los iconos

Creación en Figma/SketchEstados

SESIÓN DE TRABAJOMartes 19/11 de 19h30 a 22h30

TUTORÍA Jueves 21/11 de 19h30 a 22h30

CLASEViernes 29/11 de 16h30 a 21h30Componentes y módulos

Componentes/símbolos en Figma/SketchCreaciónConstraints y OverwritesAtomizaciónMódulos

Templates y flujos

CreaciónTemplatesFlujosOrganización dentro del sistema

Estructura

Organización dentro de los archi-vosOrganización de elementos del sistema

Sistemasde diseño

Noviembre / diciembre 2019

Sistemas de diseño

Docentes:Mendesaltaren

Horarios clases:Viernes de 16h00 a 21h30Sábados de 09h30 a 14h30

Sesiones de trabajo y tutorías:Martes y jueves de 19h30 a 22h30

Skills & Tools

09

Librerías

Trucos y buenas prácticasPlugins y funcionalidades útiles en Figma/SketchPriorización del sistemaErrores comunesRecursos

CLASE Sábado 30/11 de 09h30 a 14h30Iterando sobre el sistema Proceso de trabajo en producto Procesos de diseño Equipos implicados Diseño enfocado a tareas

Mantenimiento del sistema

Convergencia de elementos Cambio de estilos Actualización de componentes Buenas prácticas y errores comu-nes Changelog Manejo de diseño legado

SESIÓN DE TRABAJOMartes 03/12 de 19h30 a 22h30

TUTORÍAJueves 05/12 de 19h30 a 22h30

CLASEViernes 13/12 de 16h30 a 21h30

Patrones

Feedback Sistemas de diseño Navegación Formatos Internacionalización

Documentación

Cómo enfocar la documentaciónTipos de estructura Alcance. ¿Qué meter y qué no? Plataformas de documentación Colaboración con otros equipos

CLASE. Sabado 14/12 de 09h30 a 14h30

Entrega y colaboración con desa-rrollo

Hando�Exportación de recursos Feedback Errores comunes y buenas prácti-cas Governance

Control de calidad

Proceso

Herramientas Cómo dar feedback Errores comunes y buenas prácti-cas

SESIÓN DE TRABAJOMartes 17/12 de 19h30 a 22h30

TUTORÍAJueves 19/12 de 19h30 a 22h30. Fin de curso. De cañas!

*este programa esta sujeto a posibles actulizaciones.

Sistemasde diseño

Noviembre / diciembre 2019

Sistemas de diseño

Docentes:Mendesaltaren

Horarios clases:Viernes de 16h00 a 21h30Sábados de 09h30 a 14h30

Sesiones de trabajo y tutorías:Martes y jueves de 19h30 a 22h30

CLASE Viernes 08/11 de 16h30 a 21h30Toma de contacto ·Presentación del curso ·Introducción a los sistemas de diseño ·Herramientas

Entender ·Comunicar en un proyecto ·Organización interna ·Herramientas

CLASE Sábado 09/11 de 09h30 a 14h30Delimitar el problema

Análisis de la problemática Briefing Toma de requisitos Definir una base

Fundamentos de un producto PRD Nomenclatura Unidad mínima

Auditoría

Análisis de flujos y vistas del producto Análisis de estilos y recursos visua-les Componetización

CLASEViernes 15/11 de 16h30 a 21h30Teoría de los sistemas

HistoriaEjemplos y casos de estudioFundamentos

Creación de una guía de estilos

Tono de vozConcepto visualGuías de estiloTipografía y sistema tipográfico

CLASESábado 16/11 de 09h30 a 14h30Siguiendo con la guia de estilo

ColorEspaciados y gridsEsqueleto del sistema

Estructura y organización

Qué incluir y qué noNomenclaturaFragmentos, componentes y módulos

Definición de los fragmentos

Organización técnicaCreación del grid para los iconos

Creación en Figma/SketchEstados

SESIÓN DE TRABAJOMartes 19/11 de 19h30 a 22h30

TUTORÍA Jueves 21/11 de 19h30 a 22h30

CLASEViernes 29/11 de 16h30 a 21h30Componentes y módulos

Componentes/símbolos en Figma/SketchCreaciónConstraints y OverwritesAtomizaciónMódulos

Templates y flujos

CreaciónTemplatesFlujosOrganización dentro del sistema

Estructura

Organización dentro de los archi-vosOrganización de elementos del sistema

Skills & Tools

ALWAYSWITH

CARIÑO

www.mrmarcelschool.com