Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Domestika

Introducción a Sketch

via Domestika

Overview

Aprende desde cero a diseñar webs y apps con el software pionero en el mercado para el diseño de interfaces (UI) como un profesional
  • Bienvenida
  • Instalación del programa
  • Interfaz de Sketch
  • Zoom y moverse
  • Preferencias
  • Pantallas
  • Insertar formas básicas
  • Menús
  • Transformar, escalar, giro y reflejo
  • Seleccionar
  • Mover, copiar, pegar y duplicar
  • Práctica: diseño con formas geométricas y adaptaciones a distintas pantallas
  • Bienvenida
  • Bordes y colores
  • Trabajar con imágenes
  • Exportar imágenes
  • Vectores, bordes redondeados, importar y exportar vectores
  • Iconos pixel perfect
  • Trabajo con formas vectoriales
  • Booleanos con formas geométricas
  • Práctica: diseño de iconos
  • Bienvenida
  • Grupos de capas
  • Tipos de capas
  • Bloquear y desbloquear capas
  • Medir distancias, alinear y distribuir
  • Botón de play y alinear elementos en cabecera
  • Orden de capas
  • Reorganizar capas y pantallas
  • Reordenar espacios en textos
  • Práctica: organizar y alinear elementos en una pantalla
  • Bienvenida
  • Alinea y modifica textos y formas para crear botones
  • Mejorar la experiencia de lectura
  • Jerarquías de texto
  • Pega texto manteniendo el mismo estilo
  • Ejercicio transformar botones
  • Tamaños de textos recomendados
  • Estilos de texto
  • Práctica: crear pantallas de móvil combinando distintos estilos de texto
  • Bienvenida
  • Símbolos
  • Modifica valores con overrides
  • Rellena información con Data
  • Transforma grupos y símbolos con resizing
  • Crea símbolos alternativos
  • Añade estilos para modificar overrides de color
  • Copiar-pegar estilo de capa
  • Copia otro color y tipos de rellenos
  • Sombras
  • Práctica: pantalla de listado de preferencias en móvil y tablet
  • Bienvenida
  • Layout de 12 columnas
  • Ajusta elementos al layout y al grid
  • Ritmo vertical para textos y espaciado
  • Usa el smart layout
  • Padding con smart layout
  • Prototipado
  • Elementos fijos
  • Previsualiza el prototipo
  • Práctica: proyecto de UI de una web/app y prototipo de pantallas de una web/app
  • Bienvenida
  • Atajos de teclado
  • Máscaras
  • Buscar y reemplazar colores
  • Redimensionar pantallas
  • Recomendaciones líneas y gráficas de anillo
  • Reemplazar elementos
  • Crear listas de datos para el menú Data
  • Reducir tamaño de archivo y elementos de versiones
  • Cambiar de ventana y pestañas para varios documentos
  • La pluma para dibujar curvas
  • Plugins
  • Práctica: adapta una pantalla a una nueva imagen de marca renovada
Si quieres diseñar una interfaz responsive para diferentes dispositivos, de forma sencilla y eficiente, las herramientas de Sketch —programa especialmente desarrollado para diseñadores UI—, te facilitará el trabajo.

En este Domestika Basics de 7 cursos, el consultor y diseñador de UX/UI Samuel Hermoso, te enseñará a dominar Sketch desde cero. Con una metodología práctica a través de una serie de ejercicios, podrás diseñar la interfaz de tus propios proyectos, para sitios web y aplicaciones, de manera profesional.

Empezarás aprendiendo a instalar el programa, conociendo su interfaz y las herramientas básicas, así como sus principales características. Verás cómo crear tus primeras formas y cómo seleccionar, mover y transformar las capas de diferentes maneras.

En el segundo curso, Samuel te enseñará a añadir bordes, colores, sombras y otros efectos a tus formas básicas. Aprenderás cómo trabajar con vectores y píxeles, y a crearás los primeros iconos para el diseño de tu interfaz mediante la intersección de formas vectoriales y dibujos de curvas.

En el tercer curso, verás cómo trabajar con los elementos en Sketch de forma organizada, midiendo las distancias, agrupando y alineando las capas. Aprenderás las principales funcionalidades para reordenar las pantallas y capas con la herramienta Smart layout.

Pasarás al cuarto curso, adentrándote en el proceso de diseño de textos. Aprenderás cómo mejorar la experiencia de lectura y mantener la consistencia a lo largo de tu proyecto. Samuel te enseñará a modificar textos, creando diferentes estilos y estableciendo jerarquías. Explorarás fuentes, tamaños, colores y contrastes para crear un diseño para una pantalla de móvil.

Luego, aprenderás a trabajar con tu proyecto de forma escalable utilizando símbolos con la herramienta Resizing. De esta forma, podrás duplicar pantallas e implementar ajustes que afecten a todas las copias, de forma eficiente; también, aprenderás a crear e intercambiar estilos.

En el penúltimo curso de este Domestika Basics, crearás un prototipo navegable con tus páginas. Para ello, verás cómo ajustar tus diseños para diferentes dispositivos a través de layouts de columnas y grids. Aprovecharás las nuevas características para alinear elementos de forma automatizada, creando espaciados y paddings.

Finalmente, Samuel te mostrará cómo sacar el máximo partido de Sketch compartiendo diversos trucos y atajos que harán que tu trabajo sea más rápido y eficiente. Finalmente, verás una serie de plug-ins para personalizar la herramienta que mejor se adapten a tus necesidades.

Requisitos técnicos



    ⦁ Un ordenador con macOS Mojave o superior.
    ⦁ La última versión de Sketch. Puedes descargar la versión de prueba en la página oficial del software.

Syllabus

  • Bienvenida
  • Instalación del programa
  • Interfaz de Sketch
  • Zoom y moverse
  • Preferencias
  • Pantallas
  • Insertar formas básicas
  • Menús
  • Transformar, escalar, giro y reflejo
  • Seleccionar
  • Mover, copiar, pegar y duplicar
  • Diseño con formas geométricas y adaptaciones a distintas pantallas
  • Bienvenida
  • Bordes y colores
  • Trabajar con imágenes
  • Exportar imágenes
  • Vectores, bordes redondeados, importar y exportar vectores
  • Iconos pixel perfect
  • Trabajo con formas vectoriales
  • Booleanos con formas geométricas
  • Práctica: diseño de iconos 1
  • Práctica: diseño de iconos 2
  • Bienvenida
  • Grupos de capas
  • Tipos de capas
  • Bloquear y desbloquear capas
  • Medir distancias, alinear y distribuir
  • Botón de play y alinear elementos en cabecera
  • Orden de capas
  • Reorganizar capas y pantallas
  • Reordenar espacios en textos
  • Práctica: organizar y alinear elementos en una pantalla
  • Bienvenida
  • Alinea y modifica textos y formas para crear botones
  • Mejorar la experiencia de lectura
  • Jerarquías de texto
  • Pega texto manteniendo el mismo estilo
  • Transformar botones
  • Tamaños de textos recomendados
  • Estilos de texto
  • Práctica: crear pantallas de móvil combinando distintos estilos de texto 1
  • Práctica: crear pantallas de móvil combinando distintos estilos de texto 2
  • Bienvenida
  • Símbolos
  • Modifica valores con overrides
  • Rellena información con Data
  • Transforma grupos y símbolos con resizing
  • Crea símbolos alternativos
  • Añade estilos para modificar overrides de color
  • Copiar/pegar estilo de capa
  • Copia otro color y tipos de rellenos
  • Sombras
  • Práctica: pantalla de listado de preferencias en móvil y tablet 1
  • Práctica: pantalla de listado de preferencias en móvil y tablet 2
  • Práctica: pantalla de listado de preferencias en móvil y tablet 3
  • Bienvenida
  • Layout de 12 columnas
  • Ajusta elementos al layout y al grid
  • Ritmo vertical para textos y espaciado
  • Usa el smart layout
  • Padding con smart layout
  • Prototipado
  • Elementos fijos
  • Previsualiza el prototipo
  • Práctica: proyecto de UI de una web/app y prototipo de pantallas de una web/app 1
  • Proyecto de pantallas UI y prototipo de una app 2
  • Bienvenida
  • Atajos de teclado
  • Máscaras
  • Buscar y reemplazar colores
  • Redimensionar pantallas
  • Recomendaciones líneas y gráficas de anillo
  • Reemplazar elementos
  • Crear listas de datos para el menú Data
  • Reducir tamaño de archivo y elementos de versiones
  • Cambiar de ventana y pestañas para varios documentos
  • La pluma para dibujar curvas
  • Plugins 1
  • Plugins 2
  • Práctica: adapta una pantalla a una nueva imagen de marca renovada
  • Práctica: adapta una pantalla a una nueva imagen de marca renovada 2
  • Práctica: adapta una pantalla a una nueva imagen de marca renovada 3
  • Práctica: adapta una pantalla a una nueva imagen de marca renovada 4

Taught by

Samuel Hermoso

Reviews

Start your review of Introducción a Sketch

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.