Crear grids para proyectos con mucho contenido

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:0034:17

Crear grids para proyectos con mucho contenido

Curso de Sketch 2015

Clase 19 de 19

Clase 19 / 19

Recursos

Diseña interfaces claras y escalables con Sketch aplicando reglas simples de grid, tipografía y exportación. Aquí encuentras criterios prácticos sobre lecturabilidad, tamaño de objetivos táctiles, trabajo con plugins e integración con InVision, además de decisiones visuales entre flat design y material design.

¿Cómo estructurar el layout y la tipografía para buena usabilidad?

Un proyecto con mucho contenido requiere criterio más que una receta fija. Ajusta el grid y el ancho de columna según el tipo de contenido.

Usa un grid de dieciséis columnas cuando necesites flexibilidad. Depende del contenido.
Mantén la lecturabilidad: entre ocho y diez palabras por línea es lo ideal. Evita menos de cinco y más de diez palabras por línea si el párrafo es muy ancho.
Ajusta según tipografía: diez palabras con 12 px no equivalen a diez con 40 pt.
Tamaños de texto: no bajes de 12 px para texto de cuerpo. Solo casos muy especiales cerca de 8 px.
Objetivos táctiles en móvil: el target debe superar el tamaño de un dedo, alrededor de 44 px.
Permite que el texto “viva” sin estorbos: reduce distracciones si el contenido principal es texto (por ejemplo, un blog).

¿Qué hacer con slides full screen y diseño responsivo?

No hay un alto único que garantice 100 % de pantalla en todos los dispositivos. Las pantallas varían.
Si necesitas forzar un alto, mídelo con JavaScript en el front end y ajusta la sección al viewport.
En mockups, usa medidas estándar para referencia, por ejemplo 1024×768, entendiendo que el sitio final será responsivo.

¿Cómo trabajar con Sketch, plugins e InVision de forma eficiente?

Optimiza el flujo instalando plugins de la comunidad y sincronizando vistas con InVision sin esperar edición en tiempo real.

¿Cómo redimensionar artboards en Sketch?

Selecciona el artboard desde su nombre en la esquina del lienzo.
Arrastra los nodos de las esquinas o lados para cambiar tamaño.
O define dimensiones exactas en el inspector, por ejemplo 1024×768.

¿Cómo instalar plugins con Sketch Toolbox?

Usa la app Sketch Toolbox para buscar, filtrar e instalar plugins.
Observa las estrellas de GitHub como señal de popularidad.
Alternativa manual: en Sketch, Plugins > Revelar folder de plugins y coloca allí la carpeta del plugin.
Ejemplos mencionados: Measure y content generator, ambos útiles para especificaciones y contenido de prueba.

¿Cómo colaborar con InVision y Sketch Measure?

Puedes compartir el archivo de Sketch vía InVision Sync para que otra persona lo modifique en su equipo. No hay edición colaborativa en tiempo real.
Evita conflictos: si alguien edita, la otra persona debe cerrar el archivo, similar a Dropbox.
InVision renderiza previews en PNG en la nube. Incluye las tipografías necesarias.
Las etiquetas de estilo de Sketch Measure se ven en los previews porque se exportan en la imagen.

¿Qué decisiones de diseño y habilidades elevan tu trabajo?

Elige tendencias visuales por objetivo y contexto, no por moda. Refuerza tu trabajo con habilidades técnicas y disciplina de aprendizaje.

¿Flat design o material design?

Entiende el origen de cada tendencia y aplícala según el proyecto y su audiencia.
Sigue patrones de la plataforma: iOS debe parecer iOS; Android, material design; en web, respeta la identidad del cliente.
Diseña con principios sólidos para que dure y cumpla objetivos de negocio y conversión.

¿Cómo exportar sin perder calidad?

En Sketch todo es vector (excepto fotografías). Exportar a @2x no “revienta” píxeles si son vectores.
Con mapas de bits, sí puede pixelarse al escalar.
El botón make exportable solo marca qué objetos se exportan y con qué ajustes. No convierte a vector.
Hay plugins que copian estilos en CSS, LESS, Sass, Stylus o SCSS, aunque su calidad y documentación varían.

¿Qué skills te hacen mejor en startups?

Entender un poco de código. Ser empático con frontend y backend para evaluar factibilidad.
Dominar atajos de teclado en Sketch. Cambian respecto a Illustrator y requieren práctica.
Transición desde Illustrator: inicia un proyecto real en Sketch. La curva de aprendizaje es corta con práctica.
Estudia a diario: UX, UI, referencias, patrones, plataformas. Ejecuta, falla y mejora con la comunidad.

¿Tienes dudas, tips o buenas prácticas con tu grid, plugins o flujo con InVision? Compártelos y sigamos aprendiendo en comunidad.

Resumen

¿Cómo estructurar el layout y la tipografía para buena usabilidad?

Un proyecto con mucho contenido requiere criterio más que una receta fija. Ajusta el grid y el ancho de columna según el tipo de contenido.

Usa un grid de dieciséis columnas cuando necesites flexibilidad. Depende del contenido.
Mantén la lecturabilidad: entre ocho y diez palabras por línea es lo ideal. Evita menos de cinco y más de diez palabras por línea si el párrafo es muy ancho.
Ajusta según tipografía: diez palabras con 12 px no equivalen a diez con 40 pt.
Tamaños de texto: no bajes de 12 px para texto de cuerpo. Solo casos muy especiales cerca de 8 px.
Objetivos táctiles en móvil: el target debe superar el tamaño de un dedo, alrededor de 44 px.
Permite que el texto “viva” sin estorbos: reduce distracciones si el contenido principal es texto (por ejemplo, un blog).

¿Qué hacer con slides full screen y diseño responsivo?

No hay un alto único que garantice 100 % de pantalla en todos los dispositivos. Las pantallas varían.
Si necesitas forzar un alto, mídelo con JavaScript en el front end y ajusta la sección al viewport.
En mockups, usa medidas estándar para referencia, por ejemplo 1024×768, entendiendo que el sitio final será responsivo.

¿Cómo trabajar con Sketch, plugins e InVision de forma eficiente?

Optimiza el flujo instalando plugins de la comunidad y sincronizando vistas con InVision sin esperar edición en tiempo real.

¿Cómo redimensionar artboards en Sketch?

Selecciona el artboard desde su nombre en la esquina del lienzo.
Arrastra los nodos de las esquinas o lados para cambiar tamaño.
O define dimensiones exactas en el inspector, por ejemplo 1024×768.

¿Cómo instalar plugins con Sketch Toolbox?

Usa la app Sketch Toolbox para buscar, filtrar e instalar plugins.
Observa las estrellas de GitHub como señal de popularidad.
Alternativa manual: en Sketch, Plugins > Revelar folder de plugins y coloca allí la carpeta del plugin.
Ejemplos mencionados: Measure y content generator, ambos útiles para especificaciones y contenido de prueba.

¿Cómo colaborar con InVision y Sketch Measure?

Puedes compartir el archivo de Sketch vía InVision Sync para que otra persona lo modifique en su equipo. No hay edición colaborativa en tiempo real.
Evita conflictos: si alguien edita, la otra persona debe cerrar el archivo, similar a Dropbox.
InVision renderiza previews en PNG en la nube. Incluye las tipografías necesarias.
Las etiquetas de estilo de Sketch Measure se ven en los previews porque se exportan en la imagen.

¿Qué decisiones de diseño y habilidades elevan tu trabajo?

Elige tendencias visuales por objetivo y contexto, no por moda. Refuerza tu trabajo con habilidades técnicas y disciplina de aprendizaje.

¿Flat design o material design?

Entiende el origen de cada tendencia y aplícala según el proyecto y su audiencia.
Sigue patrones de la plataforma: iOS debe parecer iOS; Android, material design; en web, respeta la identidad del cliente.
Diseña con principios sólidos para que dure y cumpla objetivos de negocio y conversión.

¿Cómo exportar sin perder calidad?

En Sketch todo es vector (excepto fotografías). Exportar a @2x no “revienta” píxeles si son vectores.
Con mapas de bits, sí puede pixelarse al escalar.
El botón make exportable solo marca qué objetos se exportan y con qué ajustes. No convierte a vector.
Hay plugins que copian estilos en CSS, LESS, Sass, Stylus o SCSS, aunque su calidad y documentación varían.

¿Qué skills te hacen mejor en startups?

Entender un poco de código. Ser empático con frontend y backend para evaluar factibilidad.
Dominar atajos de teclado en Sketch. Cambian respecto a Illustrator y requieren práctica.
Transición desde Illustrator: inicia un proyecto real en Sketch. La curva de aprendizaje es corta con práctica.
Estudia a diario: UX, UI, referencias, patrones, plataformas. Ejecuta, falla y mejora con la comunidad.

¿Tienes dudas, tips o buenas prácticas con tu grid, plugins o flujo con InVision? Compártelos y sigamos aprendiendo en comunidad.

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

Crear grids para proyectos con mucho contenido

Progreso del curso

Introducción a Sketch

Sketch, Prototipados y Optimización para Web

Presenta un proyecto de Sketch a tu Cliente

Recursos

Recursos