Proyecto: Sitio Responsive III

Domina el color, los símbolos y el handoff en Sketch para cerrar una landing page responsiva con calidad profesional. Aquí verás cómo crear paletas globales y del documento, reutilizar colores frecuentes, convertir un footer en símbolo, anotar con Sketch Measure, aprovechar InVision y exportar assets en PNG para pantallas retina. Todo con foco en eficiencia y claridad.

Gestión de colores en Sketch

La gestión de color en Sketch es clave para la consistencia visual. Aunque los degradados por defecto son básicos, puedes crear y guardar los tuyos como globales o solo del documento. Además, Sketch muestra los colores usados con más frecuencia y acepta códigos hexadecimales para acelerar tu flujo.

¿Cómo gestionar gradientes y paletas globales?

• Selecciona un objeto con gradiente y presiona “+” en el selector de color. Se guarda como gradiente global.
• Los gradientes globales quedan disponibles cada vez que abras Sketch.
• Elimina gradientes que no uses arrastrándolos fuera de la paleta.
• Agrega tus propios degradados para un acceso rápido y consistente.

¿Cuándo usar gradientes del documento y colores frecuentes?

• Para un efecto local (p. ej., una sombra), guarda el gradiente en la sección del documento. Solo vivirá allí.
• Usa el panel de colores frecuentes tras el control de opacidad para reutilizar sin recordar códigos.
• Recupera rellenos y bordes ya usados en capas y textos con un clic.

¿Cómo aplicar códigos hexadecimales y paletas externas?

• Copia el código hexadecimal y pégalo directo en el selector de color.
• Importa o replica paletas como la de iOS 7 para partir de colores del sistema.
• Cambia los colores por defecto de Sketch para empezar siempre con tu identidad visual.

Componentes y símbolo del footer en diseño responsivo

Para cerrar la landing page, crea un footer sencillo y reutilizable. Cambia el fill al color del documento, define un estilo de texto específico y conviértelo en símbolo para mantener consistencia en múltiples artboards.

¿Cómo crear un footer reutilizable como símbolo?

• Ajusta el artboard para eliminar espacio sobrante.
• Crea el fondo y aplica el color del documento en fill.
• Agrega texto con © 2015 y un nombre. Pinta en blanco y baja la opacidad a 40%.
• Agrupa y conviértelo en símbolo para reutilizarlo.

¿Cómo posicionar y adaptar el símbolo en distintos artboards?

• Pega el símbolo en cada artboard y céntralo para alinear.
• Si necesitas cambios locales, usa clic secundario y detach from symbol.
• Ajusta tipografía solo si no encaja; si está centrada, no requiere cambios.

¿Qué ajustes completan la landing page responsiva?

• Duplica o alinea proyectos para cerrar el grid final.
• Verifica en InVision que los cambios se sincronicen automáticamente.
• Comprueba que el prototipo sigue funcionando con el nuevo footer.

Handoff con InVision, Sketch Measure y exportación de assets

Ni Sketch ni InVision exportan a HTML. Lo ideal es documentar bien, usar control de versiones en InVision y anotar especificaciones con Sketch Measure. Finalmente, exporta assets en PNG @1x y @2x y compártelos desde el proyecto en InVision.

¿Cómo aprovechar InVision para control de versiones?

• Usa History Mode para ver y comparar versiones en el tiempo.
• Revisa pantallas con y sin cambios (p. ej., el footer) en un solo lugar.
• Centraliza compartir, comentar y prototipar sin salir del flujo.

¿Cómo anotar tamaños y estilos con Sketch Measure?

• Instala el plugin desde la carpeta de plugins o Sketch Toolbox.
• Selecciona un elemento y aplica Measure size en estándar para web.
• Genera etiquetas con: font size, line height, tipografía y nombre de estilo.
• Mide spacing entre dos elementos para fijar distancias en píxeles.
• Mantén el diseño limpio creando un artboard aparte para anotaciones.

¿Cómo exportar assets en PNG para retina?

• Marca elementos como “hacer exportable” en el inspector.
• Elige PNG @1x y @2x para soportar pantallas retina.
• Exporta en lote con Export y guarda en assets/imágenes del proyecto de InVision.
• Verifica en la vista web que todo esté sincronizado.
• Entrega también los source files con el archivo de Sketch para referencia.

¿Tienes dudas sobre la paleta global, el símbolo del footer o las anotaciones con Sketch Measure? Cuéntame qué parte del flujo te ahorra más tiempo y deja tus preguntas para seguir mejorando.