Diseñando para Web

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?