Creación de portafolios responsivos en Sketch

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.