Cómo hacer 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:0033:00

Cómo hacer portafolios responsivos en Sketch

Curso de Sketch 2015

Clase 17 de 19

Clase 17 / 19

Recursos

Diseña un portafolio responsivo con fluidez usando Sketch. Aquí verás cómo aprovechar símbolos, operaciones booleanas, pattern fill, máscaras, plugins, estilos de texto y prototipado con InVision. La meta: iterar rápido, mantener consistencia visual y validar en móvil con Sketch Mirror.

¿Cómo construir un portafolio responsivo en Sketch paso a paso?

La base está en reutilizar y ajustar elementos con eficiencia. Un símbolo (como el avatar) se duplica y se actualiza en todas las vistas, incluido el móvil, ahorrando tiempo y evitando errores.

¿Cómo integrar íconos sociales con operaciones booleanas?

Importa íconos vectoriales (Twitter y Facebook). Puedes cambiar color y tamaño sin perder calidad.
Si el fondo es azul y los íconos también, cámbialos a blanco, pero evita que se pierdan con el fondo.
Aplica sustraer: selecciona el logo y su círculo contenedor y usa “sustraer” para cortar el ícono en la forma. Queda una sola forma plana con alta legibilidad.
Añade tantos íconos como necesites según redes a mostrar.

¿Cómo rellenar objetos con imágenes: pattern fill o máscara?

Pattern fill: en la sección de “fields”, elige pattern fill y carga una imagen ligera. Evita “tile” si no quieres repetición; usa la opción que llene el objeto.
Copiar/pegar estilo: replica rellenos de imagen entre objetos en un clic.
Máscara: arrastra una imagen, ajusta tamaño, envíala al fondo y, si ayuda, baja la opacidad para encuadrar. Selecciona imagen + forma y aplica máscara para mayor control.

¿Cómo generar contenido rápido con el plugin content generator?

Selecciona las formas y ve a Plugins → content generator → photos → “nature and urban”.
Quita bordes si afectan la estética.
Alterna entre vista de grid y lista ajustando el ancho del objeto con relleno de imagen. Sketch mantiene el relleno sin deformar.

¿Qué buenas prácticas de diseño, estilos y grid conviene aplicar?

La retícula de 960 es conservadora, pero válida. Puedes elegir otra según el proyecto y cambiarla en el menú de layout. Elementos en orillas deben “vivir” en las orillas para adaptarse mejor a distintas pantallas.

¿Cómo crear y proteger estilos de texto H2, H3 y caption?

Usa un caption para metadatos como fecha o tipo (“fotografía”).
Para crear un H3: quita el estilo previo, ajusta tipografía (peso medium, color azul) y guarda como estilo “H3”.
Considera H2 para una descripción previa; ajusta tamaño (por ejemplo, 24) si queda grande.
Si cambias color de un estilo y afecta otro, crea un nuevo estilo (p. ej., “caption white”) para no sobrescribir.

¿Cómo mejorar legibilidad con blur o gradiente?

Protege el texto sobre foto con un rectángulo sin borde, relleno transparente y blur sutil. Úsalo con cuidado.
Alternativa: gradiente de negro a negro con opacidad 0% hacia arriba. Suele verse mejor y mantiene el foco en el contenido.
Atajo útil: si una capa quedó al fondo, córtala y pégala; Sketch la coloca arriba de todo.

¿Cómo organizar capas y símbolos para escalar?

Agrupa elementos relacionados (Command G) y nómbralos con claridad (p. ej., “description”).
Convierte bloques repetibles en símbolos para replicarlos con consistencia.
Usa las herramientas de alinear (arriba, abajo, centro) y activa el grid para mantener orden. El usuario no ve la retícula, pero sí se nota su efecto.

¿Cómo prototipar e inspeccionar con Sketch Mirror e InVision?

Para móvil, ajusta tamaños y prioriza una lectura tipo timeline. Si un objeto queda fuera del artboard, no se verá; redimensiónalo para que quede dentro. Centra elementos con las herramientas de alineación. Agrupa y convierte botones (p. ej., “contact”) en símbolo para reubicarlos sin perder consistencia.

¿Cómo validar en móvil con Sketch Mirror?

Activa Sketch Mirror y mira el diseño en el teléfono en tiempo real.
Cambios como el color de una barra se reflejan al instante. Ideal para evaluar tipografía, contraste e imágenes en contexto.

¿Cómo preparar y enlazar pantallas en InVision?

Duplica el artboard y diseña dos vistas: grid y lista. Ajusta opacidades de los controladores (p. ej., 23%) para indicar estado activo/inactivo.
Guarda el archivo y crea un proyecto “portafolio web” en InVision (tipo “desktop web”).
Con InVision Sync (similar a Dropbox), espera a que se cree la carpeta del proyecto. Verifica el ícono rosa para confirmar sincronización.
Arrastra el archivo a assets → source files para que InVision exporte pantallas en la nube.
Enlaza hotspots: apunta cada botón a la pantalla correspondiente (nómbralas bien para evitar confusiones como “Desktop HD copy”).
Activa “maintain scroll position after click” para conservar la posición al cambiar de vista.
Comparte el prototipo y prueba la interacción entre vistas.

¿Te gustaría ver más trucos de Sketch, máscaras y prototipado en InVision? Comenta qué parte quieres profundizar y qué reto de tu portafolio estás resolviendo.

Resumen

¿Cómo construir un portafolio responsivo en Sketch paso a paso?

¿Cómo integrar íconos sociales con operaciones booleanas?

Importa íconos vectoriales (Twitter y Facebook). Puedes cambiar color y tamaño sin perder calidad.
Si el fondo es azul y los íconos también, cámbialos a blanco, pero evita que se pierdan con el fondo.
Aplica sustraer: selecciona el logo y su círculo contenedor y usa “sustraer” para cortar el ícono en la forma. Queda una sola forma plana con alta legibilidad.
Añade tantos íconos como necesites según redes a mostrar.

¿Cómo rellenar objetos con imágenes: pattern fill o máscara?

Pattern fill: en la sección de “fields”, elige pattern fill y carga una imagen ligera. Evita “tile” si no quieres repetición; usa la opción que llene el objeto.
Copiar/pegar estilo: replica rellenos de imagen entre objetos en un clic.
Máscara: arrastra una imagen, ajusta tamaño, envíala al fondo y, si ayuda, baja la opacidad para encuadrar. Selecciona imagen + forma y aplica máscara para mayor control.

¿Cómo generar contenido rápido con el plugin content generator?

Selecciona las formas y ve a Plugins → content generator → photos → “nature and urban”.
Quita bordes si afectan la estética.
Alterna entre vista de grid y lista ajustando el ancho del objeto con relleno de imagen. Sketch mantiene el relleno sin deformar.

¿Qué buenas prácticas de diseño, estilos y grid conviene aplicar?

¿Cómo crear y proteger estilos de texto H2, H3 y caption?

Usa un caption para metadatos como fecha o tipo (“fotografía”).
Para crear un H3: quita el estilo previo, ajusta tipografía (peso medium, color azul) y guarda como estilo “H3”.
Considera H2 para una descripción previa; ajusta tamaño (por ejemplo, 24) si queda grande.
Si cambias color de un estilo y afecta otro, crea un nuevo estilo (p. ej., “caption white”) para no sobrescribir.

¿Cómo mejorar legibilidad con blur o gradiente?

Protege el texto sobre foto con un rectángulo sin borde, relleno transparente y blur sutil. Úsalo con cuidado.
Alternativa: gradiente de negro a negro con opacidad 0% hacia arriba. Suele verse mejor y mantiene el foco en el contenido.
Atajo útil: si una capa quedó al fondo, córtala y pégala; Sketch la coloca arriba de todo.

¿Cómo organizar capas y símbolos para escalar?

Agrupa elementos relacionados (Command G) y nómbralos con claridad (p. ej., “description”).
Convierte bloques repetibles en símbolos para replicarlos con consistencia.
Usa las herramientas de alinear (arriba, abajo, centro) y activa el grid para mantener orden. El usuario no ve la retícula, pero sí se nota su efecto.

¿Cómo prototipar e inspeccionar con Sketch Mirror e InVision?

¿Cómo validar en móvil con Sketch Mirror?

Activa Sketch Mirror y mira el diseño en el teléfono en tiempo real.
Cambios como el color de una barra se reflejan al instante. Ideal para evaluar tipografía, contraste e imágenes en contexto.

¿Cómo preparar y enlazar pantallas en InVision?

Duplica el artboard y diseña dos vistas: grid y lista. Ajusta opacidades de los controladores (p. ej., 23%) para indicar estado activo/inactivo.
Guarda el archivo y crea un proyecto “portafolio web” en InVision (tipo “desktop web”).
Con InVision Sync (similar a Dropbox), espera a que se cree la carpeta del proyecto. Verifica el ícono rosa para confirmar sincronización.
Arrastra el archivo a assets → source files para que InVision exporte pantallas en la nube.
Enlaza hotspots: apunta cada botón a la pantalla correspondiente (nómbralas bien para evitar confusiones como “Desktop HD copy”).
Activa “maintain scroll position after click” para conservar la posición al cambiar de vista.
Comparte el prototipo y prueba la interacción entre vistas.

¿Te gustaría ver más trucos de Sketch, máscaras y prototipado en InVision? Comenta qué parte quieres profundizar y qué reto de tu portafolio estás resolviendo.

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

Cómo hacer 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