curso ui/ux sep (b-a) - mrmarcelschool.com · photoshop ha quedado obsoleto y ... servicios online...

11
Curso UI/UX (b-a) TOOLS SEP 2018 Sede en La Industrial C/San Andrés 8, 28004 Madrid [email protected] 55h lectivas

Upload: vankhanh

Post on 27-Sep-2018

221 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Curso UI/UX SEP (b-a) - mrmarcelschool.com · Photoshop ha quedado obsoleto y ... Servicios online de ejercicios de ideación colaborativos para equi-pos. Zeplin / Invision 5%. Traducen

CursoUI/UX(b-a)

TOOLS

SEP2018

Sede en La IndustrialC/San Andrés 8, 28004 [email protected]

55h lectivas

Page 2: Curso UI/UX SEP (b-a) - mrmarcelschool.com · Photoshop ha quedado obsoleto y ... Servicios online de ejercicios de ideación colaborativos para equi-pos. Zeplin / Invision 5%. Traducen

02

MrMarcel Schooles una escuela del siglo XXI, dirigi-da a profesionales de las industrias creativas. Nuestra forma de hacer esta basada en tres ejes: la calidad de contenidos y profesorado, el cuidado de la experiencia en el aprendizaje y el firme convenci-miento de que para una escuela “el futuro es hoy”.

Page 3: Curso UI/UX SEP (b-a) - mrmarcelschool.com · Photoshop ha quedado obsoleto y ... Servicios online de ejercicios de ideación colaborativos para equi-pos. Zeplin / Invision 5%. Traducen

TOOLS

03

MrMarcel School, es una escuela pequeña por creencia y grande por ambición. Peque-ña, para poder atender de una forma cercana las necesidades de cada alumno y para que estudiar en ella sea un valor añadido, porsu calidad y exclusividad (sólo 30 alumnos al año por promoción). Grande, porque nues-tro objetivo es desarrollar el mejor futuro posible, mediante una enseñanza tan selecta y cuidada, que facilite su incorporación al mundo profesional en la mejor de la condi- ciones posibles. Perseguimos que nuestrosalumnos disfruten de lo que hacen, además de ser valorados por ello.

UX/UI

Page 4: Curso UI/UX SEP (b-a) - mrmarcelschool.com · Photoshop ha quedado obsoleto y ... Servicios online de ejercicios de ideación colaborativos para equi-pos. Zeplin / Invision 5%. Traducen

UX/UI

04

TOOLS

UX. User experience, experiencia de usuario. Compa-ñías como Apple, Airbnb, Amazon o Netflix siguen una estrategia centrada en el usuario que les asegura ser líderes de su sector. Hay una demos-trada relación entre una buena UX y el éxito de un producto. Por eso, ser diseñador UX es una de las profesiones más demandadas y de las mejor pagadas. En los equipos de trabajo ya es necesa-rio que haya un perfil diseñador UX que guíe al resto del equipo alineando las necesidades del negocio con las del usuario. UX engloba todo, porque tanto la estructura del contenido, el diseño o las animaciones, logran una experiencia memo-rable. El diseñador UX debe guiar en todo el proceso de ideación, creación y testeo de un producto.

UX/UI

UI. Hay muchas variables que afectan al diseño UI, como las jerarquías, contrastes, tamaños, patro-nes, formas o espacio en blanco. Se trata de crear un sistema de diseño escalable para trabajar en equipo que nos permita simplificar el trabajo y mantener una coherencia. Aprenderemos a analizar y mejorar el diseño de forma totalmente objetiva.

Page 5: Curso UI/UX SEP (b-a) - mrmarcelschool.com · Photoshop ha quedado obsoleto y ... Servicios online de ejercicios de ideación colaborativos para equi-pos. Zeplin / Invision 5%. Traducen

TOOLS

05

Este curso te ayudara a idear, gestionar, liderar y ejecutar proyectos de UX-UI como APPs y webs. Trabajaremos con metodologías como LEAN, Design Thinking, Google Design Sprint, Kanban desde un punto de vista práctico y validado con clientes reales. Abordaremos lo mejor de cada metodología y herramienta.

Aprenderemos a:

-Idear, prototipar, diseñar y defender proyectos reales trabajando de manera escalable.

-Técnicas y herramientas de facilitación y cocreación, investigación con usuarios, requeri-mientos del negocio, buenas prácticas de diseño de interfaz, prototipar y comunicar ideas con wireframes, user flows, user journeys… Traba-jando con frameworks y sistemas de diseño. -Las peculiaridades de diseñar para las diferen-tes plataformas: Web, iOS de Apple y Material Design de Google.

-A agilizar mucho nuestro día a día con Sketch sacándole el máximo partido usando plug-ins como Craft, Runner, Iconfont, Distributor, Anima y otros. Haremos wireframes con distintos niveles de fidelidad y reutilizaremos UI Kits para ahorrar tiempo y no crear componentes nuevos desde cero.

-A gestionar proyectos de pequeña, mediana y gran envergadura con Trello y veremos algunas aspectos básicos de metodologías ágiles que se usan en la actualidad en equipos de diseño de productos y servicios, como SCRUM.

·Aprenderemos a hacer bien las pregun-tas para obtener información de nuestros usua-rios. A plantear tests de usabilidad para validar hipótesis y avances antes de desarrollar nuevas funcionalidades. ·La organización, planificación y gestión del tiempo es la asignatura pendiente de muchos equipos de trabajo. Vamos a experimentar y practicar probando herramientas que nos ayu-darán a aumentar nuestra productividad, mini-mizar problemas y adquirir habilidades en la resolución de conflictos trabajando en equipo.

Haremos un repaso a las posibilidades que nos ofrece el nuevo programa Invision Studio, que viene a comer terreno a Sketch por ser una herramienta todo en uno para diseñar y prototi-par.

Con Principle avanzado diseñaremos ese portfo-lio de animación para molar. También aprende-remos a comunicar ideas mediante un prototipo animado realista montado en minutos.

Además, te asesoraremos a la hora de idear y comunicar tu proyecto para tu portfolio habien-do adquirido experiencia con las herramientas más recomendadas para convencer en tus próximas entrevistas o reuniones, explicando tu proceso de trabajo y abrazando este cambio de paradigma y mentalidad que empieza por ti mismo y que te va a llevar a otro nivel como diseñador de productos y servicios.

Este curso te va a guiar para que tengas la seguridad para mejorar tu capacidad de comu-nicación en proyectos UX-UI y convencer con argumentos a tu jefe o a tus clientes, del valor que puedes aportar a un equipo de diseño de producto. Aprenderemos a tomar decisiones desde los intereses del negocio y del usuario.

UX/UI

Cómo es el cursoy qué queremos conseguir

Page 6: Curso UI/UX SEP (b-a) - mrmarcelschool.com · Photoshop ha quedado obsoleto y ... Servicios online de ejercicios de ideación colaborativos para equi-pos. Zeplin / Invision 5%. Traducen

TOOLS

06

UX/UI

Requisitos:A quién va dirigidoeste curso

Si eres diseñador web, diseñador UX y te falta la parte de diseño UI, este es tu curso. Si vienes de publicidad y tienes la sensación de haberte quedado descolgado, también. Otros perfiles a los que les vendría muy bien, son: desarrollador, jefe de proyecto, responsable de marketing o emprendedor. O simplemente si quieres plantear tu propia idea de web o app que te hará millo-nario y quieres asegurarte el éxito con el menor coste posible.

Personas con espíritu crítico, pasión por apren-der, capacidad para empatizar, resolver proble-mas y perfeccionistas con los detalles. El curso también será de gran utilidad a toda persona que necesite comunicar con seguridad y convic-ción su proceso de trabajo y asegurar el éxito de sus proyectos personales y profesionales hasta su entrega.

Que seas “culo inquieto” y sepas manejarte con alguna herramienta de diseño como Photoshop o Illustrator ayudará bastante, aunque para nada es necesario. La parte de sistemas de diseño y diseño de interfaz la haremos con Sketch, un programa de diseño que solo funcio-na en Mac OS X.

Durante el curso trabajaremos cada uno con su portátil. Así que si no tienes un Macbook, la escuela dispone de varios que puedes alquilar a un precio razonable.

Page 7: Curso UI/UX SEP (b-a) - mrmarcelschool.com · Photoshop ha quedado obsoleto y ... Servicios online de ejercicios de ideación colaborativos para equi-pos. Zeplin / Invision 5%. Traducen

TOOLS

07

Talk&Beer

Talk&Beer es un encuentro cercano, distendido e informal en el que escucharemos a un profesional del sector -cuidadosamente escogido por la Dirección del curso- durante treinta minutos. Después generaremos debate, compartiremos impresiones y ampliaremos nuestra red de con-tactos alrededor de una cerveza en un bar de Malasaña. Solo para los asistentes al curso + diez personas seleccionadas.

Sobre los profes

Samuel Hermoso y Óscar SP son un dúo de dise-ñadores UX con más de 15 años de experiencia que se han especializado en producto digital. Trabajaron juntos muchos años en agencia y aunque sus trayectorias profesionales les separa-ron por caminos diferentes, volvieron a reencon-trarse para formar su propio estudio en Malasaña y ayudar a empresas y startups a crear productos útiles y de calidad centrados en la experiencia de usuario.

Actualmente compaginan su trabajo diario con impartir conferencias y workshops. También son profesores de experiencia de usuario, design thinking y diseño de interfaz en escuelas como Mr.Marcel School o Ironhack. Si ellos han llegado aquí sin volverse locos y trabajando en lo que les gusta cada día, tú también puedes.

UX/UI

Herramientas:

Sketch 60%. Photoshop ha quedado obsoleto y ahora Sketch es el programa más fácil e intuitivo y con más posibilidades para diseño de interfaz. InVision 10%. Este servicio permite montar un prototipo interactivo a partir del diseño. También es la herramienta ideal para recibir y analizar feedback del cliente o del equipo sobre las pan-tallas del proyecto.

Invision Studio 5%. La última novedad del merca-do que unifica el diseño de interfaz con el prototi-pado en una sola herramienta

Keynote 5%. Es el PPT de mac y nos servirá para estructurar el proceso de trabajo. Es el formato final de la presentación a cliente o al equipo.

Principle 5%. Es un programa para animar elementos de Sketch, simular microinteracciones y crear prototipos animados.

Trello 5%. Tableros Kanban para gestión de proyectos.

Mural / Real Time Board 5%. Servicios online de ejercicios de ideación colaborativos para equi-pos.

Zeplin / Invision 5%. Traducen pantallas de Sketch a HTML y CSS. Permite la descarga de assets a distintos formatos y tamaños. También llevamos la organización de las pantallas con ellos.

Page 8: Curso UI/UX SEP (b-a) - mrmarcelschool.com · Photoshop ha quedado obsoleto y ... Servicios online de ejercicios de ideación colaborativos para equi-pos. Zeplin / Invision 5%. Traducen

con Principle Presentaciones ·Estructura de presentación y consejos ·Planteamiento herramientas, proyecto y conclusiones

Sábado 03/11Tests + Presentaciones UX - Tests y métricas ·Tests de usabilidad ·Siguientes pasos

Ajustes presentaciones·Práctica

Descanso. Jamón & tortilla (15 min)

Presentaciones finales·Exposición de proyectos ·Feedback

Miércoles 07/11Tutoría final

Fin del curso. De cañas!

TOOLS

08

UX-UI

Miércoles 19/09Talk&Beer·Charla/presentación·Preguntas y debate·Networking en un bar del barrio

Viernes 21/09UX - Principios básicos de usabilidad ·Qué es UX y qué no es UX ·Filosofía LEAN - MVP ·Wireframes

UI - De wireframe a UI ·Referencias diseño de interfaz ·Intro a Sketch ·Ui kits ·Material Design, iOS, web·Práctica: UI de una web tipo landing de producto

Descanso (10 min)

UX - HerramientasUser PersonasProtojourneysEmpathy MapsEjercicios de ideación

Sábado 22/09UX - Wireframes y prototipado ·Wireframes de alto y de bajo nivel·Prototipo navegable en InVision ·Práctica I: Wireframes a mano y con Sketch

Descanso. Jamón & tortilla (15 min) UI - Don’t repeat yourself ·Trabajar de manera escalable con estilos y símbolos en Sketch ·Plug-ins Sketch. Craft, Sketch Runner ·Práctica II: Diseñar pantallas de una app en Sketch

Miércoles 26/09Sesión de trabajo (ST)

Viernes 05/10UX - Herramientas ·Ideación ·User Persona·Proto Journeys ·Funcionalidades

UI - Interactividad y Microinte-racciones ·Prototipos interactivos ·Animaciones con Principle·Práctica I: Montar prototipo interactivo de app o web en InVision.

Presentaciones ·Enseñar proceso de trabajo /0·Práctica II: Planteamiento proyecto final ·Práctica III: Keynote detallando proceso de trabajo con efecto WOW.

Sábado 06/10UX - Tests y métricas ·Tests de guerrilla ·Medir e iterar

UI - Atomic Design ·Introducción al Atomic Design

Descanso. Jamón & tortilla (15 min)

Presentaciones ·Trato con cliente

·Trabajo en equipo ·Presentación en público Proyecto final ·Práctica I: Revisión y presenta-ción.·Práctica II: InVision. Exportar assets y código

Miércoles 10/10Tutoría 1º módulo

Miércoles 17/10 Talk&Beer·Charla/presentación·Preguntas y debate·Networking en un bar del barrio

Viernes 19/10UX-UI

UX - Design Thinking - Google Design Sprint·Intro al curso ·Map ·Sketch ·Decide ·Prototype

·Test

Descanso (10 min)

UI - Sketch·Atomic Design - Símbolos y overrides ·Atajos de teclado ·Plugins (Craft, Runner, Iconfont, Distributor, Anima…) ·Webs y Apps ·Exportar assets ·Práctica Sketch

Productividad·Metodologías Ágiles ·Kanban - Trello ·Pomodoro Sábado 20/10UX

UX - User research - Informa-tion architecture·Entrevistas ·Encuestas ·UX Mapping Methods ·User flows ·Cardsorting

Descanso. Jamón & tortilla (15 min) UX - Prácticas ·Ejercicios proyectos user research & IA ·Conclusiones Miércoles 24/10Sesión de trabajo (ST)

Viernes 02/11UI + Prototipo

UI - Sketch - Design Systems ·Tipografía ·Colores ·Estilos ·Grid/Layout·Práctica sistema de diseño del proyecto personal

Descanso (10 min)

Prototipo - diseño de interac-ción ·Prototipo con Invision Craft / Invision Studio ·Diseño de interacción en Apps

Docentes:Samuel Hermosoy Oscar SP

UX-UIMetodo & tools

Sep/Nov 2018

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

Horarios Talk&Beer:Miércoles de 20h30 a 22h30

Horarios ST y tutorías: Miercoles de 18h30 a 21h30

Page 9: Curso UI/UX SEP (b-a) - mrmarcelschool.com · Photoshop ha quedado obsoleto y ... Servicios online de ejercicios de ideación colaborativos para equi-pos. Zeplin / Invision 5%. Traducen

con Principle Presentaciones ·Estructura de presentación y consejos ·Planteamiento herramientas, proyecto y conclusiones

Sábado 03/11Tests + Presentaciones UX - Tests y métricas ·Tests de usabilidad ·Siguientes pasos

Ajustes presentaciones·Práctica

Descanso. Jamón & tortilla (15 min)

Presentaciones finales·Exposición de proyectos ·Feedback

Miércoles 07/11Tutoría final

Fin del curso. De cañas!

Miércoles 19/09Talk&Beer·Charla/presentación·Preguntas y debate·Networking en un bar del barrio

Viernes 21/09UX - Principios básicos de usabilidad ·Qué es UX y qué no es UX ·Filosofía LEAN - MVP ·Wireframes

UI - De wireframe a UI ·Referencias diseño de interfaz ·Intro a Sketch ·Ui kits ·Material Design, iOS, web·Práctica: UI de una web tipo landing de producto

Descanso (10 min)

UX - HerramientasUser PersonasProtojourneysEmpathy MapsEjercicios de ideación

Sábado 22/09UX - Wireframes y prototipado ·Wireframes de alto y de bajo nivel·Prototipo navegable en InVision ·Práctica I: Wireframes a mano y con Sketch

Descanso. Jamón & tortilla (15 min) UI - Don’t repeat yourself ·Trabajar de manera escalable con estilos y símbolos en Sketch ·Plug-ins Sketch. Craft, Sketch Runner ·Práctica II: Diseñar pantallas de una app en Sketch

Miércoles 26/09Sesión de trabajo (ST)

Viernes 05/10UX - Herramientas ·Ideación ·User Persona·Proto Journeys ·Funcionalidades

UI - Interactividad y Microinte-racciones ·Prototipos interactivos ·Animaciones con Principle·Práctica I: Montar prototipo interactivo de app o web en InVision.

Presentaciones ·Enseñar proceso de trabajo /0·Práctica II: Planteamiento proyecto final ·Práctica III: Keynote detallando proceso de trabajo con efecto WOW.

Sábado 06/10UX - Tests y métricas ·Tests de guerrilla ·Medir e iterar

UI - Atomic Design ·Introducción al Atomic Design

Descanso. Jamón & tortilla (15 min)

Presentaciones ·Trato con cliente

TOOLS

09

UX-UI

·Trabajo en equipo ·Presentación en público Proyecto final ·Práctica I: Revisión y presenta-ción.·Práctica II: InVision. Exportar assets y código

Miércoles 10/10Tutoría 1º módulo

Miércoles 17/10 Talk&Beer·Charla/presentación·Preguntas y debate·Networking en un bar del barrio

Viernes 19/10UX-UI

UX - Design Thinking - Google Design Sprint·Intro al curso ·Map ·Sketch ·Decide ·Prototype

·Test

Descanso (10 min)

UI - Sketch·Atomic Design - Símbolos y overrides ·Atajos de teclado ·Plugins (Craft, Runner, Iconfont, Distributor, Anima…) ·Webs y Apps ·Exportar assets ·Práctica Sketch

Productividad·Metodologías Ágiles ·Kanban - Trello ·Pomodoro Sábado 20/10UX

UX - User research - Informa-tion architecture·Entrevistas ·Encuestas ·UX Mapping Methods ·User flows ·Cardsorting

Descanso. Jamón & tortilla (15 min) UX - Prácticas ·Ejercicios proyectos user research & IA ·Conclusiones Miércoles 24/10Sesión de trabajo (ST)

Viernes 02/11UI + Prototipo

UI - Sketch - Design Systems ·Tipografía ·Colores ·Estilos ·Grid/Layout·Práctica sistema de diseño del proyecto personal

Descanso (10 min)

Prototipo - diseño de interac-ción ·Prototipo con Invision Craft / Invision Studio ·Diseño de interacción en Apps

Docentes:Samuel Hermosoy Oscar SP

UX-UIMetodo & tools

Sep/Nov 2018

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

Horarios Talk&Beer:Miércoles de 20h30 a 22h30

Horarios ST y tutorías: Miercoles de 18h30 a 21h30

Page 10: Curso UI/UX SEP (b-a) - mrmarcelschool.com · Photoshop ha quedado obsoleto y ... Servicios online de ejercicios de ideación colaborativos para equi-pos. Zeplin / Invision 5%. Traducen

TOOLS

10

UX-UI

con Principle Presentaciones ·Estructura de presentación y consejos ·Planteamiento herramientas, proyecto y conclusiones

Sábado 03/11Tests + Presentaciones UX - Tests y métricas ·Tests de usabilidad ·Siguientes pasos

Ajustes presentaciones·Práctica

Descanso. Jamón & tortilla (15 min)

Presentaciones finales·Exposición de proyectos ·Feedback

UX-UIMetodo & tools

Miércoles 07/11Tutoría final

Fin del curso. De cañas!

Sep/Nov 2018

Docentes:Samuel Hermosoy Oscar SP

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

Horarios Talk&Beer:Miércoles de 20h30 a 22h30

Horarios ST y tutorías: Miercoles de 18h30 a 21h30

Miércoles 19/09Talk&Beer·Charla/presentación·Preguntas y debate·Networking en un bar del barrio

Viernes 21/09UX - Principios básicos de usabilidad ·Qué es UX y qué no es UX ·Filosofía LEAN - MVP ·Wireframes

UI - De wireframe a UI ·Referencias diseño de interfaz ·Intro a Sketch ·Ui kits ·Material Design, iOS, web·Práctica: UI de una web tipo landing de producto

Descanso (10 min)

UX - HerramientasUser PersonasProtojourneysEmpathy MapsEjercicios de ideación

Sábado 22/09UX - Wireframes y prototipado ·Wireframes de alto y de bajo nivel·Prototipo navegable en InVision ·Práctica I: Wireframes a mano y con Sketch

Descanso. Jamón & tortilla (15 min) UI - Don’t repeat yourself ·Trabajar de manera escalable con estilos y símbolos en Sketch ·Plug-ins Sketch. Craft, Sketch Runner ·Práctica II: Diseñar pantallas de una app en Sketch

Miércoles 26/09Sesión de trabajo (ST)

Viernes 05/10UX - Herramientas ·Ideación ·User Persona·Proto Journeys ·Funcionalidades

UI - Interactividad y Microinte-racciones ·Prototipos interactivos ·Animaciones con Principle·Práctica I: Montar prototipo interactivo de app o web en InVision.

Presentaciones ·Enseñar proceso de trabajo /0·Práctica II: Planteamiento proyecto final ·Práctica III: Keynote detallando proceso de trabajo con efecto WOW.

Sábado 06/10UX - Tests y métricas ·Tests de guerrilla ·Medir e iterar

UI - Atomic Design ·Introducción al Atomic Design

Descanso. Jamón & tortilla (15 min)

Presentaciones ·Trato con cliente

·Trabajo en equipo ·Presentación en público Proyecto final ·Práctica I: Revisión y presenta-ción.·Práctica II: InVision. Exportar assets y código

Miércoles 10/10Tutoría 1º módulo

Miércoles 17/10 Talk&Beer·Charla/presentación·Preguntas y debate·Networking en un bar del barrio

Viernes 19/10UX-UI

UX - Design Thinking - Google Design Sprint·Intro al curso ·Map ·Sketch ·Decide ·Prototype

·Test

Descanso (10 min)

UI - Sketch·Atomic Design - Símbolos y overrides ·Atajos de teclado ·Plugins (Craft, Runner, Iconfont, Distributor, Anima…) ·Webs y Apps ·Exportar assets ·Práctica Sketch

Productividad·Metodologías Ágiles ·Kanban - Trello ·Pomodoro Sábado 20/10UX

UX - User research - Informa-tion architecture·Entrevistas ·Encuestas ·UX Mapping Methods ·User flows ·Cardsorting

Descanso. Jamón & tortilla (15 min) UX - Prácticas ·Ejercicios proyectos user research & IA ·Conclusiones Miércoles 24/10Sesión de trabajo (ST)

Viernes 02/11UI + Prototipo

UI - Sketch - Design Systems ·Tipografía ·Colores ·Estilos ·Grid/Layout·Práctica sistema de diseño del proyecto personal

Descanso (10 min)

Prototipo - diseño de interac-ción ·Prototipo con Invision Craft / Invision Studio ·Diseño de interacción en Apps

Page 11: Curso UI/UX SEP (b-a) - mrmarcelschool.com · Photoshop ha quedado obsoleto y ... Servicios online de ejercicios de ideación colaborativos para equi-pos. Zeplin / Invision 5%. Traducen

TOOLS

MADEWITHLOVE

www.mrmarcelschool.com