ui. herramientas. sketch, figma, · diseño ux/ui con sketch (3h) wireframes ui kits práctica:...

8
UI. Herramientas. Sketch, Figma, Invision y Principle. SKILLS TOOLS ENE 2020 Sede en La Industrial C/ San Andrés 8, 28004 Madrid [email protected] 21h de clases magistrales con prácticas diarias

Upload: others

Post on 09-Jun-2020

17 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: UI. Herramientas. Sketch, Figma, · Diseño UX/UI con Sketch (3h) Wireframes UI kits Práctica: Diseñar wireframes de una web Herramientas UI (Sketch, Figma, Invision y Principle)

UI. Herramientas. Sketch, Figma, Invision y Principle.

SKILLS TOOLS

ENE2020

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

21h de clases magistralescon prácticas diarias

Page 2: UI. Herramientas. Sketch, Figma, · Diseño UX/UI con Sketch (3h) Wireframes UI kits Práctica: Diseñar wireframes de una web Herramientas UI (Sketch, Figma, Invision y Principle)

02

MrMarcel Schooles una escuela contemporánea, creativa y abierta, dirigida a profe-sionales de las industrias creativas en cualquiera de sus ámbitos. Nuestra forma de hacer esta basada en tres ejes: la calidad de contenidos y profesorado, el cuida-do de la experiencia en el aprendi-zaje y el firme convencimiento de que para una escuela “el futuro es hoy”.

Page 3: UI. Herramientas. Sketch, Figma, · Diseño UX/UI con Sketch (3h) Wireframes UI kits Práctica: Diseñar wireframes de una web Herramientas UI (Sketch, Figma, Invision y Principle)

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 del alumno y para que estu-diar en ella sea un valor añadido por su cali-dad y exclusividad (no somos exclusivos para nada, pero formamos a pocos). Grande, porque nuestro objetivo es desarrollar el mejor futuro posible, mediante una enseñanza selecta y cuidada que facilite la incorporación al mundo profesional en la mejor de las con-diciones posibles

Apostamos por la excelencia, la autonomía intelectual del alumno y su razonamiento independiente, como herramientas esenciales. Perseguimos que los alumnos disfruten con lo que hacen, además de ser valorados por ello..

UI. HERRAMIENTAS.

Page 4: UI. Herramientas. Sketch, Figma, · Diseño UX/UI con Sketch (3h) Wireframes UI kits Práctica: Diseñar wireframes de una web Herramientas UI (Sketch, Figma, Invision y Principle)

UI. HERRAMIENTAS.

04

TOOLS

Sketch, como herramienta de diseño UI

Sketch se ha convertido en la herramienta princi-pal para diseño de producto digital. Los equipos de diseño de experiencia de usuario en empresas como Apple, Facebook o Google usan Sketch para crear nuevos productos y mejorar sus sistemas de diseño.

El programa sirve para plantear las primeras ideas (wireframes), diseñar componentes y gene-rar las pantallas finales de webs y APPs.

Para poder optar a trabajar en un equipo como diseñador UX/UI es indispensable ser muy rápido a la hora de diseñar pantallas. Trabajar con proyectos de webs responsive y APPs multidisposi-tivo puede ser un dolor de cabeza cuando adquie-ren cierta envergadura. Es necesario trabajar de una manera escalable y coherente usando la herramienta Sketch combinándolo con plug-ins que aumenten tus posibilidades al máximo.

HERRAMIENTAS UI. (Sketch, Figma, Invision y Principle)

Optimiza tu flujo de trabajo con Figma

Figma está abriéndose un hueco en el mercado como competidor directo de Sketch por caracte-rísticas como su capacidad para el diseño colabo-rativo y optimización para crear sistemas de diseño. Aprenderemos las diferencias principales entre ambos programas y consejos a la hora de utilizarlo.

Page 5: UI. Herramientas. Sketch, Figma, · Diseño UX/UI con Sketch (3h) Wireframes UI kits Práctica: Diseñar wireframes de una web Herramientas UI (Sketch, Figma, Invision y Principle)

A quién va dirigidoeste curso

TOOLS

05

El material de este curso vale tanto para inicia-dos que nunca han tocado la herramienta como para experimentados que buscan mejorar su workflow y productividad.

Como perfil, buscamos gente con pasión por aprender y ganas de mejorar su rendimiento como diseñadores de interfaz. Si trabajas en una agencia, consultora, con cliente o como freelan-ce, ¡ahora es el momento de reciclarte! Si traba-jas en alguna disciplina de diseño de experiencia de usuario, eres desarrollador y quieres tener nociones de diseño o quieres llegar a la excelen-cia para hacerte un portfolio como ui designer, ¿a qué esperas para dar el siguiente paso? También mejorarás tus habilidades de diseño visual y podrás justificar de manera objetiva tus decisiones.

Otros perfiles ideales para hacer este curso son gente que ya tenga experiencia diseñando webs o APPs y quiera profundizar y aprender un buen proceso de trabajo de principio a fin. El curso también será de gran utilidad a toda persona que necesite comunicar con seguridad y convic-ción cada paso del proceso de diseño y asegurar el éxito de sus proyectos profesionales.

Este curso te ayuda a ejecutar proyectos de UX-UI donde estudiaremos a fondo la herra-mienta Sketch de manera totalmente práctica con ejercicios de proyectos reales.

Aprenderemos a entender las peculiaridades de diseñar para las diferentes plataformas: Web, iOS y Material Design de Google.

Vamos a agilizar mucho nuestro día a día con Sketch sacándole el máximo partido usando plug-ins como Craft, Runner, Iconfont, Distribu-tor, Anima y otros. Haremos wireframes y reutili-zaremos UI Kits para ahorrar tiempo y no crear componentes nuevos desde cero.Serán 6 días intensos, repartidos en días de diario por la tarde para que puedas compagi-narlo con tu vida o trabajo. Te ofrecemos un canal de comunicación directa con los docentes para resolver dudas sobre tus proyectos antes, durante e incluso una vez finalizado el curso. ;)

UI. HERRAMIENTAS.

Cómo es el cursoy qué queremos conseguir

Page 6: UI. Herramientas. Sketch, Figma, · Diseño UX/UI con Sketch (3h) Wireframes UI kits Práctica: Diseñar wireframes de una web Herramientas UI (Sketch, Figma, Invision y Principle)

TOOLS

06

UI. HERRAMIENTAS.

Requisitos: Sobre los docentes (Elastic Heads):

Que tengas alguna base habiendo trabajado con programas tipo Photoshop, Illustrator, Flash, Fireworks o de maquetación tipo Indesign, Power Point o similar. Piensa que si eres de los que usa atajos de teclado con los programas para ser mucho más rápido, eres de los nuestros.

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.

Elastic Heads es una boutique de diseño especiali-zada en producto digital. Sus fundadores son Samuel Hermoso y Óscar SP, un dúo de diseñado-res UX con más de 20 años de experiencia que se han especializado en producto digital. Trabajaron juntos muchos años en agencia y aunque sus trayectorias profesionales les separaron por caminos diferentes, volvieron a reencontrarse 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 y diseño UI en escuelas como Mr.Marcel School o Ironhack. Si ellos han llegado aquí sin mucho esfuerzo y traba-jando en lo que les gusta cada día, tú también puedes.

Page 7: UI. Herramientas. Sketch, Figma, · Diseño UX/UI con Sketch (3h) Wireframes UI kits Práctica: Diseñar wireframes de una web Herramientas UI (Sketch, Figma, Invision y Principle)

TOOLS

07

UI. HERRAMIENTAS.

Lunes 13/01Intro a Sketch (3h)Intro del cursoEspacio de trabajoArtboards, capas y alinearTextosVectores

Práctica: Ejercicios guiados para conocer la herramienta

Martes 14/01Escalando (3h)EstilosSímbolos y overridesLibreríasOrganizarse

Práctica: Pantallas de APP en iOS/Android con símbolos anidados

Lunes 20/01Diseño UX/UI con Sketch (3h)WireframesUI kits

Práctica: Diseñar wireframes de una web

Herramientas UI(Sketch, Figma, Invision y Principle)

Martes 21/01 Aumentando la productividad (3h)Atajos de tecladoTrucos y consejosPlugins (Craft, Runner, Anima…)

Práctica: Diseñar el UI partien-do de un wireframe

Lunes 27/01Webs y APPs (3h)WebsAppsMaterial designiOSGridsLayout

Práctica: Landing responsive de una APP ajustada a un layout y a un 8-pixel grid

Martes 28/01Prototipado (3h)Prototipos y gestión de proyecto con Sketch-InvisionPrototipos animados realistas

con Sketch-Principle

Práctica: Prototipo en Invision y en Principle

Lunes 03/01Figma I (3h)Diferencias entre Sketch y Figma¿Por qué Figma? Flujo completo de diseño colaborativoMejoras prácticasPrototipado simple y avanzadoOrganización de componentes y sistemas de diseñoComentarios y Hando�

Fin de curso. De cañas por Malasaña.

Enero 2020

Docentes:Samuel Hermosoy Oscar SP

Horarios de clases:Lunes y martes de 19h30 a 22h30

Page 8: UI. Herramientas. Sketch, Figma, · Diseño UX/UI con Sketch (3h) Wireframes UI kits Práctica: Diseñar wireframes de una web Herramientas UI (Sketch, Figma, Invision y Principle)

TOOLS

ALWAYSWITH

CARIÑO

www.mrmarcelschool.com