4.71 de 5
4.71
133 valoraciones en Udemy

Diseño Web y Móvil con Sketch

Aprende a usar la herramienta más popular y profesional para diseño de interfaz
Profesor:
Eugenia Jongewaard
434 Estudiantes apuntados
Spanish [Auto-generated]
Usar Sketch de forma profesional para mis clientes
Crear interfaces para web y móvil
Aplicar tips para focalizar mi trabajo en la experiencia del usuario
Trabajar con programadores y compartir de manera efectiva los proyectos
Crear presentaciones en Photoshop animadas

Hola mi mombre es Eugenia Jongewaard y soy diseñadora de experiencia de usuario (UX Designer). A lo largo de mi carrera (más de 7 años) he trabajado para diferentes empresas y de forma particular como diseñadora y consultora. Estos últimos años he utilizado Sketch y la he incorporado en mi día a día laboral siendo mi herramienta principal. Y este es un Curso para diseñar sitios web. Basicamente.

En este curso aprenderás a diseñar sitios web responsive y aplicaciones móviles usando Sketch 3. Ten en cuenta que este es un curso para aprender a usar la herramienta a fondo, no aprenderemos diseño gráfico ni a programar aplicaciones móviles.

Si tienes conocimientos de diseño gráfico y programación de app para moviles, en este curso aprenderás a lo más avanzado poniendo en práctica tus conocimientos con el diseño de sitios web responsive y aplicaciones móviles.

¿Empezamos?

ACTUALIZACION Noviembre 2017 – Novedades version 47.1!

  • Actualizada la introducción
  • Nuevo video en sección Símbolos donde vemos Resizing

Sketch  es la herramienta utilizada por empresas líderes del mercado web y móvil como Apple, Facebook, Google, Groupon, Twitch, Dropbox etc.

Por el momento el curso esta orientado a Sketch 3 pero se irá actualizando para mostrar las novedades y cambios de la última versión.

 

 

Introducción

1
Introducción al Curso
2
Actualizaciones
3
Explorando Sketch
4
Inicio

Desde la ventana de Inicio podemos acceder a los Templates de Sketch. Usemos estos Templates! ya que nos van a ahorrar mucho trabajo. No tenemos que estar buscando en otros lados ;)

5
Autoguardado y recuperación

Guardar, guardar! que tema tan importante. Ya sabemos lo que sucede si tenemos algún problema y no guardamos! Así que activemos el autosave que nos puede ahorrar muchos dolores de cabeza. En otros casos el autosave puede ser que nos haga guardar algo que no queríamos así que tengamos presente eso!

Primero pasos

1
Artboards

Los Artboards nos van a ayudar a crear nuestros espacios de trabajo. Veamos cómo se utilizan :)

2
Páginas y Plantillas

Organicemos todo correctamente en Páginas y utilicemos las Plantillas (Templates).
Esta sección será pronto actualizada por la nueva version de Sketch. Por ejemplo la opción de Exportar ahora esta en la pestaña Share.

3
Instalando Plugins

Y si.. por esto se hizo tan famoso Sketch, por sus geniales Plugins! Veamos cómo se instalan :O

Trabajando con vectores

1
Formas

En este tutorial vamos a aprender a usar las Formas y comenzamos a crear nuestro proyecto Responsive. Vamos a crear una interfaz para Escritorio y otra para Dispositivo Móvil y vemos como ajustar cada elemento para ambas interfaces.

2
Dibujo vectorial

¡Vamos a ponernos creativos con el dibujo vectorial!

3
Operaciones Booleanas

Para trabajar más rápido con los vectores podemos utilizar las Operaciones Booleanas (si si que nombre más raro!) :D

4
Tijeras y rotación de copias

Trabajando con Texto

1
Texto
2
Estilos de Texto
3
Texto sobre guía
4
Organización de las Fuentes

¡Seamos organizados! aunque a mi se me pasa siempre también :( Pero vamos a ponerlo en práctica ya que la organización nos va ahorrar mucho tiempo, especialmente cuando se trata de organizar las Fuentes!

Símbolos

1
Símbolos 1

Símbolos, Símbolos, que bellos que son :D Si! ahora podemos diseñar en solo minutos una interfaz compleja con sólo símbolos! 

2
Ajuste de elementos

Organizando y Alineando los elementos

1
Layout Grids
2
Alineación y distribución
3
Make Grid
4
Trabajando con varias Capas

Colores y Efectos

1
Pixel Perfect
2
Color I
3
Color II
4
Efecto Blur
5
Máscaras

Exportación

1
Exportación

5 Plugins Recomendados

1
Plugin 1

Acceso al Plugin Content Generator: https://github.com/timuric/Content-generator-sketch-plugin

2
Plugin 2
3
Plugin 3
4
Plugin 4

Descarga AutoLayout aquí: https://animaapp.github.io/Auto-Layout/

5
Plugin 5

Primero descarga el plugin desde aquí: https://github.com/keremciu/sketch-iconfont

Luego descarga el font-bundle desde aquí: https://github.com/keremciu/font-bundles

Proyecto Web y Móvil

1
Presentación de Proyecto

Los wearables son dispositivos que se adaptan a nuestro cuerpo. La traducción al español más conocida es "dispositivos vestibles" Puedes ver más información aquí. El archivo final del proyecto se encuentra en el último video.

2
Wireframes
3
Prototipo iOS - #1
4
Prototipo iOS - #2
5
Prototipo iOS - #3
6
Sitio Responsive #01
7
Sitio Responsive #02
8
Compartiendo con inVision
9
Trabajando con Desarrolladores

¡Felicitaciones! Has completado el Curso Avanzado de Sketch :D

¡Hasta la próxima!

You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don`t have an internet connection, some instructors also let their students download course lectures. That`s up to the instructor though, so make sure you get on their good side!
4.7
4.7 de 5
Calificaciones 133

Calificación Detallada

5 estrellas
68
4 estrellas
41
3 estrellas
14
2 estrellas
9
1 estrellas
1