Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Prototyping

Prototipado rápido usando símbolos y plantillas de Sketch

by
Read Time:4 minsLanguages:

Spanish (Español) translation by Eugenio Monforte (you can also view the original English article)

Partir desde cero cada vez que bosquejas un diseño es una pérdida de tiempo, sobre todo cuando se hace sobre un producto existente. En Envato Market ya tenemos un estilo visual establecido y estamos trabajando en una guía de estilos para recopilar todos los elementos de nuestra Interfaz de Usuario (UI).

Lo que necesitamos es una manera fácil de crear un prototipo clickeable utilizando nuestra biblioteca UI. Una plantilla con todas las piezas Lego ya incluídas, lista para construir a partir de allí.

Creando la Plantilla en Sketch

Durante el transcurso de este tutorial voy a utilizar mis propias experiencias con Envato Market para demostrar el proceso. Sin embargo, todas las técnicas discutidas serán aplicables a tu propia situación.

Iconos

El primer paso en mi caso fue crear la plantilla imitando nuestra guía de estilos.

Empecé agregando todas nuestras fuentes de ícono: teniendo en cuenta que teníamos una fuente de ícono que queremos utilizar en nuestros diseños en Sketch, primero la fuente de ícono necesita ser instalada:

La mejor manera de abordar ésto es abrir la fuente en el Catálogo Tipográfico. La vista Repertorio (⌘ + 2) debe estar activa para poder ver todos los glifos disponibles. Copia cada glifo y añadelos a un Artboard en Sketch.

Símbolos

Luego, creé cada uno de los diferentes elementos de la UI. Cada elemento fue agregado en su propio Artboard y posteriormente guardado como símbolo:

Le di a cada uno un nombre. Los nombres tienen que coincidir con las clases usadas en la guía de estilo actual, pero queda a tu criterio cómo hacer ésto:

Presiona Enter. Hecho.

He repetido este proceso para cada tipo de elemento importante de la UI que tenemos actualmente catalogado en la guía de estilos. El resultado de este laborioso trabajo fue la creación de 89 símbolos en total.

Tipografía

La última pieza del puzzle fue la tipografía. Nosotros tenemos 17 diferentes variaciones tipográficas, entonces cada una fue convertida en estilo de texto dentro de Sketch.

Ésto se hace agregando una caja de texto y estilizándolo usando las opciones en la barra lateral:

Luego, conviértelo en un estilo de texto:

Guardar

Cuándo hayamos terminado todo, podemos guardarlo yendo a File > Save as Template...

¡Ahora estamos listos para el rock n' roll!

Rock n' Roll con la Plantilla

Una vez que tengo todos los íconos, los elementos importantes de la UI y la tipografía preparadas, estamos listos para empezar a maquetar cosas.

Crear un archivo nuevo usando plantilla de guía de estilos de Envato Market nos da todos los Artboards, símbolos, fuentes de íconos y los estilos tipográficos que hemos creado.

Borrón y cuenta nueva

Para iniciar una nueva maqueta, primero borro todas los Artboards. Los símbolos previamente creados estarán todavía accesibles ya que estan integrados en la plantilla. Uso el Catálogo Tipográfico para copiar rápidamente cualquier ícono para usarlo en la maqueta. Todo ésto junto significa que puedo empezar desde cero y aún así tener acceso rápido a todos los elementos que necesito. ¡Dicha Zen!

Luego agrego un nuevo Artboard:

Ahora estoy listo para empezar a agregar nuestros componentes.

Boom! Ahí está:

Lo coloco en su lugar:

Luego agrego el pie para finalizar la configuración de la página en blanco. Voilá!

Página modelo

Ahora vamos a poblar la página modelo con un formulario que enlaza a una página de confirmación. Más adelante vamos a añadir esto a un proyecto de InVision donde podemos obtener feedback de colegas y probar el flujo enviando un enlace a los usuarios que prueban la nueva interfaz.

Esto no toma casi tiempo y lo mejor es que ninguno de estos elementos deben ser diseñado a medida para la interfaz. Es todo una cuestión de usar los componentes que hemos hecho en la plantilla.

Exportación

Ahora vamos a exportarlos como imágenes seleccionando los Artboards y yendo a File > Export:

Colectando Feedback usando InVision

El último y más importante paso es cargar las maquetas a InVision, y compartir el enlace con colegas y testear con usuarios para obtener feedback.

Aquí he creado un nuevo projecto en InVision y cargado mis maquetas exportadas allí. Clickea, por ejemplo, en la landing page para abrirla:

Usando la Build tool he creado un punto de acceso para enlazar con la página de confirmación:

Finalmente, comparto el prototipo con otros diciendo algo como:

“Hey, si tienes un segundo me encantaría conocer tu opinión sobre este nuevo flujo para la página de confirmación en que he estado trabajando. Chequéalo en http://invis.io/RG1XC6XPA

Si, tú puedes seguir ese enlace para jugar un poco con la maqueta.

¡Eso es todo! Nuestro primer ciclo de feedback está completo.

Espacio para Mejoras

Este es el mejor proceso que he descubierto hasta la fecha en lo que respecta a conseguir rápidamente un prototipo en la pantalla de alguien más.

Habiendo dicho esto, creo que todavía no es proceso ideal. Tan pronto como nuestra Biblioteca UI cambia, alguien (en la actualidad yo) tiene que actualizar la plantilla Sketch manualmente. El proceso ideal sería uno donde pudiésemos usar HTML y CSS para crear símbolos de Sketch, haciendo posible mantener la guía de estilos y la plantilla Sketch en perfecta sincronización.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.