Cómo hacer grandes wireframes en Sketch

(Esta publicación se publicó originalmente en alexanderskogberg.com)

En los últimos años, Sketch se ha convertido en uno de los mejores editores de gráficos vectoriales entre los diseñadores. Lo uso varias veces a la semana en el trabajo y ¡me encanta! Aquí están mis consejos para hacer grandes wireframes en Sketch.

Cuando comencé a trabajar como consultor de TI en 2011, mis colegas diseñadores utilizaron diferentes editores de gráficos vectoriales. Hoy, casi todos usan Sketch exclusivamente.

Si está haciendo wireframes, crear una guía de estilo o dibujar ilustraciones ¡Sketch es la herramienta perfecta! Es popular, no está sobrecargado con funciones y cuesta mucho menos que editores como Photoshop.

Aquí están mis mejores consejos al hacer wireframes en Sketch.

Organiza tus pantallas con páginas y mesas de trabajo

A medida que crecen sus estructuras alámbricas, mantener todas las pantallas organizadas es esencial para mantenerse eficiente. Por lo tanto, debe hacer uso de páginas y mesas de trabajo.

Crear una página para cada conjunto de pantallas relacionadas

En Sketch, una página ofrece un nuevo lienzo en blanco. No hay razón para poner todas sus pantallas en la misma página. En su lugar, cree una página para cada conjunto de pantallas relacionadas de la aplicación o sitio web para el que está realizando la estructura alámbrica.

Si estuviera haciendo wireframes para un sitio web donde compras animales de peluche, crearía las siguientes páginas:

  • Espacio de trabajo (un "banco de trabajo" para crear lo que necesite)
  • Activos (para logotipos, fotos, etc.)
  • Estilos de texto (solo para mis estilos de texto)
  • Símbolos (creados automáticamente por Sketch)
  • Página de inicio (para las últimas ofertas y noticias)
  • Página de categoría (para diferentes categorías de animales de peluche)
  • Página del producto (para un animal de peluche específico)
  • Página de pago (para ingresar la dirección y la información de pago)
  • Página de confirmación (para confirmar la compra)
La lista de páginas. Las mesas de trabajo para la página seleccionada se enumeran en la parte inferior.

En una página, cree una mesa de trabajo para cada variante de pantalla

Dado que es probable que cada pantalla tenga múltiples variantes, recomendaría crear una mesa de trabajo para cada una de ellas. Todas las mesas de trabajo que cree se colocan automáticamente en la página seleccionada.

Cuando crea una nueva mesa de trabajo, puede establecer su ancho y altura como desee, pero Sketch también ofrece ajustes preestablecidos basados ​​en dispositivos populares y resoluciones de pantalla.

Lo que es una variante de pantalla depende de usted. Normalmente hago variantes para diferentes tamaños de pantalla y para mostrar cómo se supone que el diseño de interacción debe funcionar en detalle.

Para la página de pago del sitio web de animales de peluche, crearía Artboards para las siguientes variantes de pantalla:

  • No se ingresó información de dirección o pago (para pantallas pequeñas y grandes)
  • Dirección ingresada correctamente e información de pago (para pantallas pequeñas y grandes)
  • Dirección ingresada incorrectamente e información de pago (para pantallas pequeñas y grandes)
Las mesas de trabajo para la página seleccionada se colocan en el lienzo principal.

Cuando se trata de nombrar las mesas de trabajo, recomiendo usar el patrón de nombres name-number-modifier-size.jpg. Con este patrón, es más probable que los miembros de su equipo puedan identificar el contenido de una mesa de trabajo exportada sin tener que abrirla.

Aquí hay unos ejemplos:

  • checkout-01-default-small.jpg
  • checkout-02-delivery-address-search-small.jpg
  • checkout-03-correct-payment-information-small.jpg
  • checkout-04-incorrecto-información-de-pago-small.jpg
Consejo: asegúrese de que una mesa de trabajo exportada se pueda identificar por su nombre. Un nombre como checkout-03-correct-payment-information-small.jpg es genial, un nombre como screen21.jpg es terrible.

Hacer uso de estilos de texto

Utilizará texto hasta cierto punto en sus estructuras alámbricas y cuando necesite ajustar el tamaño de fuente o cambiar la tipografía por completo, es una enorme pérdida de tiempo y energía tener que hacerlo en todas y cada una de las pantallas.

Afortunadamente, Sketch ofrece la posibilidad de guardar y reutilizar sus opciones de diseño usando Text Styles. Una vez que se guarda un estilo de texto, se puede aplicar a nuevas piezas de texto. Si cambia un estilo de texto, afectará a todos los fragmentos de texto que usen ese estilo de texto.

Cada vez que empiezo a trabajar en un nuevo proyecto, creo estilos de texto para piezas de texto comunes como:

  • Titular H1
  • Titular H2
  • Titular de H3
  • Cuerpo de texto
  • Meta texto (para fechas, marcas de tiempo, sugerencias de entrada, etc.)
  • Etiquetas de entrada (para campos de entrada y grupos de botones de opción y casillas de verificación)
Siempre pongo mis estilos de texto en una página propia para poder verlos todos a la vez.

Configurar una convención de nomenclatura

Al igual que los desarrolladores web (con suerte) tienen un conjunto de reglas para nombrar sus clases de CSS, debe configurar una convención de nomenclatura para las páginas, las mesas de trabajo, los símbolos y los estilos de texto que usará.

Es una buena idea usar la misma (o una muy similar) convención de nomenclatura que usan los desarrolladores. Si comparte sus wireframes con ellos usando herramientas como Zeplin, habrá menos confusión y dudas si todos usan los mismos nombres para los mismos componentes.

Por ejemplo, si su equipo de desarrollo ha nombrado la clase CSS para diseñar los botones primarios de un sitio web como "botón primario", debe usar ese nombre en lugar de algo como "llamada a la acción".

Consejo: Imagine que está creando una convención de nombres para otra persona y no solo para usted. Pregúntele a alguien más si su terminología tiene sentido.

Si está buscando un ejemplo de la vida real de una convención de nomenclatura, consulte la Guía Trello CSS o BEM.

Domina el poder de los símbolos

Símbolos es probablemente la mejor característica en Sketch. Es como los estilos de texto, pero para todas las combinaciones de formas y fragmentos de texto. Es poderoso y le ahorrará mucho tiempo a largo plazo.

Consejo: Guarde logotipos e íconos como Símbolos también.

Por ejemplo, supongamos que crea un campo de entrada con una etiqueta y una sugerencia de entrada y desea reutilizarlo en más pantallas. Al guardar estos tres elementos como un Símbolo, ahora se almacena en su biblioteca y se puede usar cuando lo desee.

Si su símbolo contiene texto, puede anular los fragmentos de texto para todas las instancias de ese símbolo. Cambiar el texto (no su diseño) no afectará a las otras instancias.

Símbolo de un campo de entrada con una etiqueta, pista de entrada y texto de entrada. Los fragmentos de texto pueden anularse para cada instancia de este símbolo. Consejo: Ingrese un espacio negro para

Si luego edita este Símbolo, los cambios afectarán a todas las instancias del mismo.

Nombra tus símbolos con barras

Dado que probablemente creará muchos Símbolos, debe poner barras (/) en sus nombres para organizarlos de forma ordenada.

Cuando pones una barra diagonal en los nombres de los Símbolos, Sketch creará automáticamente subgrupos de ellos para que sea más fácil encontrar los que estás buscando.

Recomiendo usar estos dos patrones de nombres:

  1. categoría / tipo / estado
  2. categoría / tipo / estado de variación
Consejo: Apégate a un máximo de dos barras para que solo tengas una profundidad de tres capas (eso me ha funcionado mejor hasta ahora).

Aquí hay algunos ejemplos de símbolos con nombre basados ​​en estos dos patrones:

  • botón / primario / predeterminado
  • botón / primario / deshabilitado
  • botón / secundario / predeterminado
  • botón / secundario / deshabilitado
  • input / nolabel / default
  • entrada / etiqueta / predeterminada
  • entrada / etiqueta / deshabilitado
  • input / labelandhint / default
  • input / labelandhint / disabled
Las subcarpetas que Sketch crea cuando coloca barras (/) en los nombres de los Símbolos que crea.

Crea una biblioteca de símbolos comunes

Sketch ofrece formas comunes como rectángulos, círculos, triángulos y flechas. No es necesario volver a dibujarlos, pero debe usarlos para crear componentes de interfaz comunes como botones, campos de entrada, selectores de fecha y ventanas modales.

Por ejemplo, siempre creo símbolos de componentes comunes en diferentes estados como:

  • Botones primarios (predeterminado y deshabilitado)
  • Botones secundarios (predeterminados y deshabilitados)
  • Casillas de verificación con etiquetas de texto (marcadas y no marcadas)
  • Botones de radio con etiquetas de texto (marcado y no marcado)
  • Bloques expandibles (expandidos y no expandidos)
  • Campos de entrada con una etiqueta (predeterminada y deshabilitada)
  • Campos de entrada con una etiqueta y una pista de entrada (predeterminada y deshabilitada)

Hay muchos componentes de interfaz listos para usar que puede descargar y usar de forma gratuita, pero le recomiendo crear su propia biblioteca. Aprenderá más sobre el uso de Sketch y terminará con menos símbolos no utilizados.

El bosquejo de la página de símbolos se crea automáticamente cuando comienza a crear y guardar símbolos.

Haz que tus símbolos respondan

Al hacer wireframes hoy, probablemente necesitará crear diferentes variantes de sus pantallas para diferentes tamaños de pantalla. Una variante para pantallas pequeñas, una para pantallas grandes y quizás una para pantallas medianas.

Esto significa que debe configurar sus símbolos para que su diseño no se rompa cuando los estira horizontal o verticalmente.

¡Afortunadamente, Sketch maneja esto excelentemente! Para cada elemento incluido en un Símbolo, puede configurar cómo se comportará cuando el Símbolo se estire utilizando un control en la columna de propiedades a la derecha.

Estas son algunas de las configuraciones que puede realizar para un elemento seleccionado en un Símbolo:

Se estirará en cualquier dirección.Mantendrá su tamaño, pero se moverá con las mismas proporciones hacia los lados, hacia arriba y hacia abajo.Fijado a la parte superior. Estirará su ancho, pero mantendrá la misma altura.Fijado en la esquina superior izquierda. Mantendrá su tamaño.

Presentando los wireframes

Al presentar sus wireframes a los desarrolladores de su equipo, tiene varias opciones.

Algunos desarrolladores prefieren echar un vistazo al archivo Sketch directamente, otros prefieren exportar sus pantallas a imágenes y algunos prefieren herramientas para hacer prototipos clicables como InVision.

Consejo: trate a los desarrolladores de su equipo como usuarios. Sirveles tus wireframes de la manera que prefieran.

Si inVision suena interesante, lea mi publicación Prototype como un profesional con inVision.

No uses capas en tus archivos de croquis

Según mi experiencia trabajando con desarrolladores, no debería usar capas en sus pantallas en Sketch. Creo que esta forma de trabajar solía ser la norma cuando Photoshop reinaba supremamente.

La mayoría de los desarrolladores con los que he trabajado encuentran molesto tener que ocultar y mostrar muchas capas (a menudo mal nombradas) para aprender cómo se ve y se comporta una pantalla. En cambio, solo use más Artboards para presentar las diferentes variantes de pantalla.

Otras lecturas

Ya se han escrito muchos artículos excelentes sobre el uso de Sketch. Aquí están mis favoritos:

  • Diseño receptivo en croquis - Parte 1 por Emin Inanc Ulu
  • Desatando todo el potencial de los símbolos en Sketch de Javier ‘Simón’ Cuello
  • Mejores prácticas de símbolos de croquis (ahora que las anulaciones anidadas son una cosa) por Lloyd Humphreys

¿Hay algo que creas que debería agregar, eliminar o cambiar en esta publicación? Déjame saber en la sección de comentarios.

¡Oh por cierto! Si este tipo de trama de alambre es demasiado para su proyecto, lea mi nueva publicación "Cómo la trama de alambre lo convertirá en un mejor diseñador".

/ Alex