Diseño Web y Móvil con Sketch
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.
En este curso aprenderás desde lo más básico a lo más avanzado poniendo en práctica tus conocimientos con el diseño de sitios web responsive y aplicaciones móviles.
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.
Hola ni 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.
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.
¿Empezamos?
Introducción
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 ;)
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
Los Artboards nos van a ayudar a crear nuestros espacios de trabajo. Veamos cómo se utilizan :)
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.
Y si.. por esto se hizo tan famoso Sketch, por sus geniales Plugins! Veamos cómo se instalan :O
Trabajando con vectores
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.
¡Vamos a ponernos creativos con el dibujo vectorial!
Para trabajar más rápido con los vectores podemos utilizar las Operaciones Booleanas (si si que nombre más raro!) :D
Trabajando con Texto
¡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
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!
Organizando y Alineando los elementos
Colores y Efectos
Sitios mencionados en el tutorial:
http://ego-icons.com/
https://icons8.com/
https://www.iconsmind.com/
https://nucleoapp.com/
http://geticonjar.com/
https://www.iconfinder.com/
Exportación
5 Plugins Recomendados
Acceso al Plugin Content Generator: https://github.com/timuric/Content-generator-sketch-plugin
Descarga AutoLayout aquí: https://animaapp.github.io/Auto-Layout/
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
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.
¡Felicitaciones! Has completado el Curso Avanzado de Sketch :D
¡Hasta la próxima!
