SlideShare a Scribd company logo
1 of 23
Trabajando con
Sketch e Invision
Sketch
Introducción a Sketch
Programa especializado en el diseño de interfaz de usuario.
Diseño vectorial (elementos escalables)
Todos los diseños de un proyecto en un sólo archivo.
Diseño modular y opciones de automatización.
Ayuda al mantenimiento y evolución de las propuestas de diseño.
Diseño modular
Páginas: primer nivel de organización (no solamente páginas finales)
Artboards: espacios de trabajo con tamaño delimitado.
Estilos: propiedades de un elemento. Pueden predefinirse para compartirlos.
Paletas de color.
Sistema tipográfico compuesto por varios estilos de texto.
Símbolos: elementos reutilizables.
Invision
Prototipos de alta fidelidad
Nos permiten compartir nuestros diseños con nuestro equipo y con el cliente.
Permiten interactuar con ellos.
Cada proyecto va asociado a un tipo de dispositivo.
Permite la sincronización con Sketch.
Nos ayudan a mantener y evolucionar el trabajo de diseño durante el proyecto.
Nos ayudan a explicar y comunicar mejor nuestras propuestas.
Opciones
Opciones de trabajo:
● Preview mode.
● Build mode.
● Comment mode.
● Inspect mode.
● History mode.
Craft
Colección de plugins para Sketch desarrollados por Invision.
https://www.invisionapp.com/craft
Sync: Sincronizar archivos de Sketch con Invision.
Data: Falicita el trabajo con datos reales a la hora de diseñar.
Library: Crear librerías de recursos para trabajar en equipo.
Duplicate: Generar elementos repetidos de forma dinámica.
Prototype: Añadir interacciones al diseño desde Sketch. No está disponible.
Previsualizando el diseño

More Related Content

Viewers also liked

Aplicar Agile/Lean UX …y no morir en el intento
Aplicar Agile/Lean UX …y no morir en el intentoAplicar Agile/Lean UX …y no morir en el intento
Aplicar Agile/Lean UX …y no morir en el intento
Biko
 

Viewers also liked (16)

Aplicar Agile/Lean UX …y no morir en el intento
Aplicar Agile/Lean UX …y no morir en el intentoAplicar Agile/Lean UX …y no morir en el intento
Aplicar Agile/Lean UX …y no morir en el intento
 
Working effectively with legacy code
Working effectively with legacy codeWorking effectively with legacy code
Working effectively with legacy code
 
¿Cómo se comportan los usuarios cuando llegan a nuestra web?
¿Cómo se comportan los usuarios cuando llegan a nuestra web?¿Cómo se comportan los usuarios cuando llegan a nuestra web?
¿Cómo se comportan los usuarios cuando llegan a nuestra web?
 
Linkedin para los negocios
Linkedin para los negociosLinkedin para los negocios
Linkedin para los negocios
 
Iniciación emprendedores culturales
Iniciación emprendedores culturalesIniciación emprendedores culturales
Iniciación emprendedores culturales
 
Como buscar y obtener financiación II
Como buscar y obtener financiación IIComo buscar y obtener financiación II
Como buscar y obtener financiación II
 
Inteligencia economica
Inteligencia economicaInteligencia economica
Inteligencia economica
 
Innovación en procesos
Innovación en procesosInnovación en procesos
Innovación en procesos
 
Innovacion en el emprendimiento
Innovacion en el emprendimientoInnovacion en el emprendimiento
Innovacion en el emprendimiento
 
Cómo convertir mis visitas web en ventas. Analitica
Cómo convertir mis visitas web en ventas. AnaliticaCómo convertir mis visitas web en ventas. Analitica
Cómo convertir mis visitas web en ventas. Analitica
 
Js10 10112014 como el sector del comercio puede ser participe de una smarcity
Js10 10112014 como el sector del comercio puede ser participe de una smarcity Js10 10112014 como el sector del comercio puede ser participe de una smarcity
Js10 10112014 como el sector del comercio puede ser participe de una smarcity
 
Diseño de servicios
Diseño de serviciosDiseño de servicios
Diseño de servicios
 
Desarrollo de un plan de internacionalización
Desarrollo de un plan de internacionalizaciónDesarrollo de un plan de internacionalización
Desarrollo de un plan de internacionalización
 
La obligada reinvención de los gigantes_Expansión
La obligada reinvención de los gigantes_ExpansiónLa obligada reinvención de los gigantes_Expansión
La obligada reinvención de los gigantes_Expansión
 
Cuadro de mandos para emprendedores
Cuadro de mandos para emprendedoresCuadro de mandos para emprendedores
Cuadro de mandos para emprendedores
 
Diseño y desarrollo del plan de negocio para un emprendedor
Diseño y desarrollo del plan de negocio para un emprendedorDiseño y desarrollo del plan de negocio para un emprendedor
Diseño y desarrollo del plan de negocio para un emprendedor
 

More from Biko

Movilidad - Tendencias que cambiarán nuestras vidas
Movilidad - Tendencias que cambiarán nuestras vidasMovilidad - Tendencias que cambiarán nuestras vidas
Movilidad - Tendencias que cambiarán nuestras vidas
Biko
 
Lo digital llega a nuestro mundo …y yo con estos pelos
Lo digital llega a nuestro mundo …y yo con estos pelosLo digital llega a nuestro mundo …y yo con estos pelos
Lo digital llega a nuestro mundo …y yo con estos pelos
Biko
 

More from Biko (14)

Guia Rapida Para Entender A La Generacion Z
Guia Rapida Para Entender A La Generacion ZGuia Rapida Para Entender A La Generacion Z
Guia Rapida Para Entender A La Generacion Z
 
De maquetador a componentizador React, ¿qué ha cambiado?
De maquetador a componentizador React, ¿qué ha cambiado?De maquetador a componentizador React, ¿qué ha cambiado?
De maquetador a componentizador React, ¿qué ha cambiado?
 
Narrativas Metafóricas
Narrativas MetafóricasNarrativas Metafóricas
Narrativas Metafóricas
 
¿Son los micropagos el nuevo mal?
¿Son los micropagos el nuevo mal?¿Son los micropagos el nuevo mal?
¿Son los micropagos el nuevo mal?
 
Contribuir a drupal
Contribuir a drupalContribuir a drupal
Contribuir a drupal
 
Drupal 8: deploy capistrano y gestión de la configuración
Drupal 8: deploy capistrano y gestión de la configuraciónDrupal 8: deploy capistrano y gestión de la configuración
Drupal 8: deploy capistrano y gestión de la configuración
 
Fields en drupal 8
Fields en drupal 8Fields en drupal 8
Fields en drupal 8
 
Amp - contenido instantáneo en móvil
Amp - contenido instantáneo en móvilAmp - contenido instantáneo en móvil
Amp - contenido instantáneo en móvil
 
Sesión de narrativa digital y proceso de descubrimiento en proyectos
Sesión de narrativa digital y proceso de descubrimiento en proyectosSesión de narrativa digital y proceso de descubrimiento en proyectos
Sesión de narrativa digital y proceso de descubrimiento en proyectos
 
Tendencias web en el sector agroalimentario
Tendencias web en el sector agroalimentarioTendencias web en el sector agroalimentario
Tendencias web en el sector agroalimentario
 
Realidad aumentada y Movilidad
Realidad aumentada y MovilidadRealidad aumentada y Movilidad
Realidad aumentada y Movilidad
 
Movilidad - Tendencias que cambiarán nuestras vidas
Movilidad - Tendencias que cambiarán nuestras vidasMovilidad - Tendencias que cambiarán nuestras vidas
Movilidad - Tendencias que cambiarán nuestras vidas
 
Webinar: Aterrizaje de proyectos digitales
Webinar: Aterrizaje de proyectos digitalesWebinar: Aterrizaje de proyectos digitales
Webinar: Aterrizaje de proyectos digitales
 
Lo digital llega a nuestro mundo …y yo con estos pelos
Lo digital llega a nuestro mundo …y yo con estos pelosLo digital llega a nuestro mundo …y yo con estos pelos
Lo digital llega a nuestro mundo …y yo con estos pelos
 

Recently uploaded

140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc
ilvrosiebp
 
GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivos
CristianGmez22034
 

Recently uploaded (20)

SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptxSESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimiento
 
Introduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptxIntroduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptx
 
Arte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusaArte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusa
 
140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
 
INTERVENCIONES DE CARRETERAS EN LA LIBERTAD
INTERVENCIONES DE CARRETERAS  EN LA LIBERTADINTERVENCIONES DE CARRETERAS  EN LA LIBERTAD
INTERVENCIONES DE CARRETERAS EN LA LIBERTAD
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de Querétaro
 
Brochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdfBrochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdf
 
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfSlaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
 
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdfCLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdf
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especial
 
Bianchi_Susana_Historia_social_del_mundo-34-43.pdf
Bianchi_Susana_Historia_social_del_mundo-34-43.pdfBianchi_Susana_Historia_social_del_mundo-34-43.pdf
Bianchi_Susana_Historia_social_del_mundo-34-43.pdf
 
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
 
Jesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturaJesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitectura
 
GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivos
 
Planificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.docPlanificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.doc
 
Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientes
 

Trabajando con Sketch e Invision

  • 3. Introducción a Sketch Programa especializado en el diseño de interfaz de usuario. Diseño vectorial (elementos escalables) Todos los diseños de un proyecto en un sólo archivo. Diseño modular y opciones de automatización. Ayuda al mantenimiento y evolución de las propuestas de diseño.
  • 4. Diseño modular Páginas: primer nivel de organización (no solamente páginas finales) Artboards: espacios de trabajo con tamaño delimitado. Estilos: propiedades de un elemento. Pueden predefinirse para compartirlos. Paletas de color. Sistema tipográfico compuesto por varios estilos de texto. Símbolos: elementos reutilizables.
  • 6. Prototipos de alta fidelidad Nos permiten compartir nuestros diseños con nuestro equipo y con el cliente. Permiten interactuar con ellos. Cada proyecto va asociado a un tipo de dispositivo. Permite la sincronización con Sketch. Nos ayudan a mantener y evolucionar el trabajo de diseño durante el proyecto. Nos ayudan a explicar y comunicar mejor nuestras propuestas.
  • 7.
  • 8. Opciones Opciones de trabajo: ● Preview mode. ● Build mode. ● Comment mode. ● Inspect mode. ● History mode.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22. Craft Colección de plugins para Sketch desarrollados por Invision. https://www.invisionapp.com/craft Sync: Sincronizar archivos de Sketch con Invision. Data: Falicita el trabajo con datos reales a la hora de diseñar. Library: Crear librerías de recursos para trabajar en equipo. Duplicate: Generar elementos repetidos de forma dinámica. Prototype: Añadir interacciones al diseño desde Sketch. No está disponible.