Diseñando para Web

Contenido del curso

Introducción a Sketch

Sketch, Prototipados y Optimización para Web

Presenta un proyecto de Sketch a tu Cliente

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0026:08

Diseñando para Web

Curso de Sketch 2015

Clase 6 de 19

Clase 6 / 19

Recursos

Diseña una interfaz de música en Sketch con precisión profesional: crea un artboard Desktop HD, configura una retícula de 960 px, aplica background blur para un fondo dinámico y construye controles con operaciones booleanas. Además, integra íconos SVG de Noun Project y prepara el prototipado en InVision sin complicaciones.

¿Cómo configurar un artboard y retícula de 960 px en Sketch?

Abrir un archivo nuevo con Command n y nombrarlo “Music app”. Si usas iCloud, se sincroniza automáticamente. Crea un artboard con la tecla A y elige Desktop HD. Es posible trabajar en versiones desktop, tablet y móvil en un mismo documento, ideal para diseño responsivo.

Ir a: view, canvas, layout settings. Primero se configura, luego se muestra.
Configurar retícula de 960 px: 12 columnas, ancho total 960 px, columnas de 60 px con espacios de 20 px entre columnas.
Ajustar offset y activar “centrar al artboard”.
Elegir si se ven líneas o relleno, y color del grid.
Guardar como default para futuros documentos.
La retícula es un overlay no seleccionable, no estorba al diseñar.
Alternar grid: control l.

Usa el grid para organizar: mitad para el album art y mitad para la lista de canciones. Sketch alinea objetos al grid automáticamente.

¿Cómo crear el fondo con background blur y color en Sketch?

Arrastra la portada del álbum al lienzo. Duplica la imagen y hazla de todo el alto para usarla como base del fondo.

¿Qué pasos seguir para el background blur?

Dibuja un rectángulo sobre la imagen.
Quita el fill o ponlo transparente y elimina el borde.
En el inspector, activa background blur y ajusta valores hasta lograr un desenfoque amplio.
Agrupa imagen + rectángulo como “Background”, mándalo al fondo y bloquéalo para no moverlo.

Para mejorar la legibilidad tipográfica, añade un color al rectángulo del blur (por ejemplo, un tono derivado del arte) y baja la opacidad: mantiene el efecto y oscurece suavemente. Si el render va lento, oculta temporalmente la capa del blur mientras trabajas en otros elementos.

¿Cómo construir la barra del reproductor con gradiente?

Traza un rectángulo a lo ancho en la parte inferior.
Aplica un gradiente de negro al 100% a negro al 0% para “proteger” los controles.
Apaga los bordes para un look limpio.

¿Cómo crear íconos, alinear y exportar con Noun Project?

Los controles se pueden crear con formas básicas y precisión de píxeles.

¿Cómo trazar y combinar íconos con operaciones booleanas?

Inserta un triángulo para “play”, rota o usa flip desde el inspector.
Agrega pequeños rectángulos para “rewind/fast forward”.
Usa operaciones booleanas (por ejemplo, unión) para convertir varias formas en un solo objeto; son reversibles y no destructivas.
Si necesitas fijarlo definitivamente, usa flatten: convierte en un solo trazo editable por vectores.
Rellena en blanco y ajusta tamaño con el grid de píxeles.

Para la línea de tiempo: crea una línea de 2 px en blanco al 50% de opacidad como base, y otra línea de 2 px en blanco al 100% como progreso. Agrupa y nombra “timer”. Mantener una nomenclatura clara en capas evita errores.

¿Cómo alinear y distribuir con precisión?

Selecciona varios objetos y usa las herramientas de alineación sobre el inspector: arriba, abajo o centro vertical.
Usa distribuir horizontalmente para espaciar de forma equitativa. Toma como referencia los objetos de los extremos.
Agrupa los tres controles como “controls” y ajusta a las orillas para un layout HD y responsivo.

¿Cómo integrar íconos SVG con Noun Project e ir hacia InVision?

Abre la app de Noun Project, busca “volume” y arrastra el ícono al documento.
Cambia el relleno a blanco y escala según el diseño; es SVG, totalmente editable.
Crea una cuenta en InVision para prototipar interacciones y compartir pantallas. Exportar y enlazar se verá en la siguiente sesión.

¿Te animas a replicar el reproductor con tu álbum favorito y a compartir tus variaciones de color, grid y controles?

Resumen

¿Cómo configurar un artboard y retícula de 960 px en Sketch?

Ir a: view, canvas, layout settings. Primero se configura, luego se muestra.
Configurar retícula de 960 px: 12 columnas, ancho total 960 px, columnas de 60 px con espacios de 20 px entre columnas.
Ajustar offset y activar “centrar al artboard”.
Elegir si se ven líneas o relleno, y color del grid.
Guardar como default para futuros documentos.
La retícula es un overlay no seleccionable, no estorba al diseñar.
Alternar grid: control l.

Usa el grid para organizar: mitad para el album art y mitad para la lista de canciones. Sketch alinea objetos al grid automáticamente.

¿Cómo crear el fondo con background blur y color en Sketch?

Arrastra la portada del álbum al lienzo. Duplica la imagen y hazla de todo el alto para usarla como base del fondo.

¿Qué pasos seguir para el background blur?

Dibuja un rectángulo sobre la imagen.
Quita el fill o ponlo transparente y elimina el borde.
En el inspector, activa background blur y ajusta valores hasta lograr un desenfoque amplio.
Agrupa imagen + rectángulo como “Background”, mándalo al fondo y bloquéalo para no moverlo.

¿Cómo construir la barra del reproductor con gradiente?

Traza un rectángulo a lo ancho en la parte inferior.
Aplica un gradiente de negro al 100% a negro al 0% para “proteger” los controles.
Apaga los bordes para un look limpio.

¿Cómo crear íconos, alinear y exportar con Noun Project?

Los controles se pueden crear con formas básicas y precisión de píxeles.

¿Cómo trazar y combinar íconos con operaciones booleanas?

Inserta un triángulo para “play”, rota o usa flip desde el inspector.
Agrega pequeños rectángulos para “rewind/fast forward”.
Usa operaciones booleanas (por ejemplo, unión) para convertir varias formas en un solo objeto; son reversibles y no destructivas.
Si necesitas fijarlo definitivamente, usa flatten: convierte en un solo trazo editable por vectores.
Rellena en blanco y ajusta tamaño con el grid de píxeles.

¿Cómo alinear y distribuir con precisión?

Selecciona varios objetos y usa las herramientas de alineación sobre el inspector: arriba, abajo o centro vertical.
Usa distribuir horizontalmente para espaciar de forma equitativa. Toma como referencia los objetos de los extremos.
Agrupa los tres controles como “controls” y ajusta a las orillas para un layout HD y responsivo.

¿Cómo integrar íconos SVG con Noun Project e ir hacia InVision?

Abre la app de Noun Project, busca “volume” y arrastra el ícono al documento.
Cambia el relleno a blanco y escala según el diseño; es SVG, totalmente editable.
Crea una cuenta en InVision para prototipar interacciones y compartir pantallas. Exportar y enlazar se verá en la siguiente sesión.

¿Te animas a replicar el reproductor con tu álbum favorito y a compartir tus variaciones de color, grid y controles?

Introducción a Sketch

Flujo de trabajo moderno con Sketch

Curso de Sketch para diseño web desde cero

Interface de Sketch: canvas infinito y artboards

Replicar el ícono de Tweetbot en Sketch

Crear íconos Material Design en Sketch

Diseñando para Web

Sketch con Illustrator: compatibilidad y plugins

Sketch, Prototipados y Optimización para Web

Preguntas antes de Clase

Sketch + InVision: prototipos con hover automático

Recursos gratuitos para acelerar diseño Sketch

Cómo crear tab bar iOS en Sketch e InVision

Símbolos en Sketch: cómo identificarlos y usarlos

[Extra] Creando prototipos con Marvel y Sketch

[Extra] Cómo pasar un archivo de Sketch a Zeplin

Presenta un proyecto de Sketch a tu Cliente

Sketch para interfaces: unidades, símbolos y exportación

Creación de portafolios responsivos en Sketch

Cómo hacer portafolios responsivos en Sketch

Proyecto: Sitio Responsive III

Crear grids para proyectos con mucho contenido

Diseñando para Web

Progreso del curso

Introducción a Sketch

Sketch, Prototipados y Optimización para Web

Presenta un proyecto de Sketch a tu Cliente

Recursos

Recursos