Creación de portafolios responsivos en Sketch

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:0029:34

Creación de portafolios responsivos en Sketch

Curso de Sketch 2015

Clase 16 de 19

Clase 16 / 19

Recursos

Diseña un portafolio responsivo en Sketch con seguridad: del wireframe a la entrega a desarrollo. Miguel Nieva, Santiago Eastman y Lulo muestran un flujo práctico con integración a Invision, uso de grid de 960 px, símbolos, estilos de texto y plugins que aceleran el trabajo sin perder calidad.

¿Cómo iniciar un portafolio responsivo en Sketch e Invision?

El objetivo es crear una landing page para web y móvil, probarla en Invision, preparar assets para desarrollo y comunicar con claridad a los developers el front end. Todo desde un archivo nuevo y sin plantillas.

¿Cómo configurar el grid de 960 px y 12 columnas?

Crear archivo nuevo y presionar A para un nuevo artboard.
Añadir artboards: Desktop HD, Desktop y Mobile.
Ir a View > Canvas > Layout Settings. Definir un ancho de 960 px con 12 columnas.
Ajustar color del layout y gutters según preferencia.
Alternar el layout rápido con control + L.
Recordatorio: también se usan 16 columnas, pero aquí se elige 12 por menor densidad de contenido.

¿Cómo planear el wireframe y la versión móvil?

Hacer un wireframe de baja fidelidad para entender el comportamiento sin invertir en visuales.
Secciones clave: perfil (nombre, ciudad, tagline), links sociales y un módulo para mostrar trabajos.
Incluir un controlador para ver trabajos en lista o cuadrícula.
En móvil, las columnas horizontales pasan a disposición vertical: diseñar pensando en el apilado.
Añadir un avatar y un tagline; usar alineación temprana para fijar jerarquías.

¿Qué acelera el workflow: símbolos, plugins y estilos de texto?

Reutilizar y estandarizar es clave. Los símbolos garantizan consistencia entre artboards. Los plugins ahorran tiempo. Los estilos de texto mantienen coherencia tipográfica y facilitan cambios globales.

¿Cómo usar símbolos bien y evitar errores comunes?

Crear símbolos: seleccionar el objeto y clic en “crear símbolo”. Nombrar claras: "avatar", "bio", "background".
Editar el contenido dentro del símbolo, no el folder: los cambios aplican correctamente.
Duplicar símbolos entre web y móvil para adaptar sin rehacer.
Evitar convertir textos con contenido variable en símbolo si solo necesitan un estilo.

¿Cómo crear estilos H1, P y caption coherentes?

Prototipar textos fuera del artboard: título, subtítulo, body y caption.
Tipografía: Avenir Medium para título, Avenir Book para cuerpo; subtítulo en light.
Tamaños finales: H1 ~44 px, body 16 px, caption 12 px.
Color: preferir gris en vez de negro 100% para mejor lectura en pantalla.
Plugins desde Sketch Toolbox: “Content Generator” para fotos y “Lorem Ipsum for Sketch” para texto de relleno.
Crear estilos en el inspector: H1, P y caption. Nomenclatura alineada con el front end.
Cambios globales: modificar el estilo (p. ej., azul a verde) actualiza todo automáticamente.

¿Cómo pulir la interfaz: alineación, botones, iconos y paleta?

Los detalles de UI elevan la claridad: alineación precisa, iconos consistentes, un botón de contacto visible y una paleta coherente que evite duplicidades de color.

¿Cómo alinear y nombrar para exportar assets sin fricción?

Alineación rápida: con un solo objeto seleccionado, el botón de alinear centra respecto al artboard; con dos objetos, alinea entre ellos.
Alinear párrafos al grid; centrar elementos que no controlan ancho (nombre, avatar).
Crear iconos de “list view” y “grid view” con guías inteligentes; quitar bordes y aplicar el fill azul del sistema.
Nombrar capas y grupos de forma descriptiva: “list view”, “grid view icon”. Esto ahorra tiempo al exportar.
Mantener el módulo de texto sobre grid para facilitar desarrollo y evitar “elementos flotando”.

¿Cómo diseñar un botón y gestionar colores consistentes?

Botón “contáctame” siempre visible y alineado al grid.
Usar bordes redondeados: atraen la atención al contenido del botón.
Estilo minimalista: sin relleno, borde azul, texto centrado a 18 px.
Avatar con borde blanco y sombra suave (0 px en X y Y, blur grande) para destacar sin dureza.
Paleta: abrir el selector de color y usar los colores frecuentes que muestra Sketch para evitar tonos “casi iguales”.
Copiar color con el picker solo si luego se verifica en la paleta para mantener consistencia.

¿Tienes dudas sobre grid, símbolos o estilos de texto? Comenta cómo organizarías tu portafolio y qué plugins te funcionan mejor en tu flujo con Sketch e Invision.

Resumen

¿Cómo iniciar un portafolio responsivo en Sketch e Invision?

¿Cómo configurar el grid de 960 px y 12 columnas?

Crear archivo nuevo y presionar A para un nuevo artboard.
Añadir artboards: Desktop HD, Desktop y Mobile.
Ir a View > Canvas > Layout Settings. Definir un ancho de 960 px con 12 columnas.
Ajustar color del layout y gutters según preferencia.
Alternar el layout rápido con control + L.
Recordatorio: también se usan 16 columnas, pero aquí se elige 12 por menor densidad de contenido.

¿Cómo planear el wireframe y la versión móvil?

Hacer un wireframe de baja fidelidad para entender el comportamiento sin invertir en visuales.
Secciones clave: perfil (nombre, ciudad, tagline), links sociales y un módulo para mostrar trabajos.
Incluir un controlador para ver trabajos en lista o cuadrícula.
En móvil, las columnas horizontales pasan a disposición vertical: diseñar pensando en el apilado.
Añadir un avatar y un tagline; usar alineación temprana para fijar jerarquías.

¿Qué acelera el workflow: símbolos, plugins y estilos de texto?

¿Cómo usar símbolos bien y evitar errores comunes?

Crear símbolos: seleccionar el objeto y clic en “crear símbolo”. Nombrar claras: "avatar", "bio", "background".
Editar el contenido dentro del símbolo, no el folder: los cambios aplican correctamente.
Duplicar símbolos entre web y móvil para adaptar sin rehacer.
Evitar convertir textos con contenido variable en símbolo si solo necesitan un estilo.

¿Cómo crear estilos H1, P y caption coherentes?

Prototipar textos fuera del artboard: título, subtítulo, body y caption.
Tipografía: Avenir Medium para título, Avenir Book para cuerpo; subtítulo en light.
Tamaños finales: H1 ~44 px, body 16 px, caption 12 px.
Color: preferir gris en vez de negro 100% para mejor lectura en pantalla.
Plugins desde Sketch Toolbox: “Content Generator” para fotos y “Lorem Ipsum for Sketch” para texto de relleno.
Crear estilos en el inspector: H1, P y caption. Nomenclatura alineada con el front end.
Cambios globales: modificar el estilo (p. ej., azul a verde) actualiza todo automáticamente.

¿Cómo pulir la interfaz: alineación, botones, iconos y paleta?

Los detalles de UI elevan la claridad: alineación precisa, iconos consistentes, un botón de contacto visible y una paleta coherente que evite duplicidades de color.

¿Cómo alinear y nombrar para exportar assets sin fricción?

Alineación rápida: con un solo objeto seleccionado, el botón de alinear centra respecto al artboard; con dos objetos, alinea entre ellos.
Alinear párrafos al grid; centrar elementos que no controlan ancho (nombre, avatar).
Crear iconos de “list view” y “grid view” con guías inteligentes; quitar bordes y aplicar el fill azul del sistema.
Nombrar capas y grupos de forma descriptiva: “list view”, “grid view icon”. Esto ahorra tiempo al exportar.
Mantener el módulo de texto sobre grid para facilitar desarrollo y evitar “elementos flotando”.

¿Cómo diseñar un botón y gestionar colores consistentes?

Botón “contáctame” siempre visible y alineado al grid.
Usar bordes redondeados: atraen la atención al contenido del botón.
Estilo minimalista: sin relleno, borde azul, texto centrado a 18 px.
Avatar con borde blanco y sombra suave (0 px en X y Y, blur grande) para destacar sin dureza.
Paleta: abrir el selector de color y usar los colores frecuentes que muestra Sketch para evitar tonos “casi iguales”.
Copiar color con el picker solo si luego se verifica en la paleta para mantener consistencia.

¿Tienes dudas sobre grid, símbolos o estilos de texto? Comenta cómo organizarías tu portafolio y qué plugins te funcionan mejor en tu flujo con Sketch e Invision.

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

Creación de portafolios responsivos en Sketch

Progreso del curso

Introducción a Sketch

Sketch, Prototipados y Optimización para Web

Presenta un proyecto de Sketch a tu Cliente

Recursos

Recursos