Share
Comenzar desde cero cada vez que se burla de un diseño es una pérdida de tiempo, especialmente cuando se construye sobre un producto existente. En Envato Market ya tenemos un aspecto visual establecido y estamos trabajando en una guía de estilo para recopilar todos nuestros elementos de UI.
Lo que necesitamos es una forma fácil de crear un prototipo seleccionable mediante nuestra biblioteca de UI. Una plantilla con todas las piezas de Lego ya allí, listas para ser construidas..
Durante el curso de este tutorial usaré mis propias experiencias con Envato Market para demostrar el proceso. Sin embargo, todas las técnicas discutidas serán aplicables a su propia situación..
El primer paso en mi caso fue crear la plantilla que imita nuestra guía de estilo..
Comencé agregando todas nuestras fuentes de iconos: considerando que teníamos una fuente de iconos que queríamos usar en nuestros diseños de Sketch, primero se necesitaba instalar la fuente de iconos:
La mejor manera de abordar esto es abrir la fuente en el Libro de fuentes. “Vista del repertorio” (⌘ + 2) necesita estar activo para ver todos los glifos disponibles. Copia cada glifo y agrégalos a una mesa de trabajo en Sketch.
A continuación hice a mano todos los diferentes elementos de la interfaz de usuario. Cada elemento se agregó a su propia mesa de trabajo y posteriormente se guardó como un símbolo:
Le doy a cada uno un nombre. Los nombres coinciden con las clases utilizadas en la compilación real, pero depende de usted cómo aborda esto:
Golpear Entrar. Hecho.
Repetí este proceso para cada tipo de elemento principal de la interfaz de usuario que actualmente hemos catalogado en la guía de estilo. El resultado de este laborioso trabajo fue la creación de 89 símbolos en total..
La última pieza del rompecabezas fue la tipografía. Tenemos 17 variaciones tipográficas diferentes, por lo que cada una se convirtió en un estilo de texto dentro de Sketch.
Haga esto agregue un cuadro de texto y aplique estilo al texto usando las opciones en la barra lateral:
Luego, conviértelo en un estilo de texto:
Cuando todos hemos terminado, ahorramos yendo Archivo> Guardar como plantilla ...
Ahora estamos listos para el rock and roll!
Una vez que tuve todos los íconos, los principales elementos de la interfaz de usuario y la tipografía preparados, estábamos listos para comenzar a burlarnos de las cosas..
La creación de un nuevo archivo utilizando la plantilla de la Guía de estilo de Envato Market nos brinda todas las mesas de trabajo, símbolos, fuentes de iconos y estilos tipográficos que creamos.
Para comenzar una nueva maqueta, primero remuevo todas las mesas de trabajo. Los símbolos creados anteriormente todavía serán accesibles ya que están incrustados en la plantilla. Uso el Libro de fuentes para copiar rápidamente cualquier ícono para usar en la maqueta. Juntos, esto significa que puedo comenzar con una pizarra limpia y tener acceso rápido a todos los activos que necesito. Felicidad zen!
A continuación agrego una nueva mesa de trabajo:
Ahora estoy listo para comenzar a agregar nuestros bloques de construcción..
¡Auge! Ahí está:
Colóquelo en su lugar:
Luego, agregue el pie de página para terminar de configurar la página en blanco. Voila!
Ahora llenemos la página ficticia con un formulario que enlaza a una página de confirmación. Más adelante, lo agregaremos a un proyecto de InVision donde podemos obtener comentarios de colegas y probar el flujo enviando un enlace a los usuarios que prueban la nueva interfaz..
Esto lleva casi nada de tiempo y lo mejor es que ninguno de estos elementos debe diseñarse de forma personalizada para la interfaz. Todo es cuestión de usar los bloques de construcción que hicimos en la plantilla..
Ahora exportemos estos como imágenes seleccionando las mesas de trabajo y yendo a Archivo> Exportar:
El último y más importante paso es cargar las maquetas en InVision y compartir el enlace con colegas y usuarios de prueba para recopilar comentarios..
Aquí he creado un nuevo proyecto de InVision y he cargado mis maquetas exportadas. Haga clic, por ejemplo, en la página de destino para abrirla:
Usando la herramienta de construcción, creo un punto de acceso para enlazar a la página de confirmación:
Por último, comparto el prototipo con otros diciendo algo como:
"Oye, si tienes un segundo, me encantaría escuchar tu opinión sobre el flujo de esta nueva página de confirmación en la que he estado trabajando. Compruébelo en http://invis.io/RG1XC6XPA "
Sí, puedes seguir ese enlace para jugar con la maqueta..
¡Eso es! Nuestro primer ciclo de retroalimentación está completo.
Este es el mejor proceso que he descubierto hasta la fecha con respecto a obtener rápidamente un prototipo en la pantalla de alguien.
Dicho esto, todavía no es lo ideal. Tan pronto como nuestra Biblioteca de UI cambie, alguien (actualmente yo mismo) tiene que actualizar la plantilla de Sketch manualmente. El proceso ideal sería uno en el que pudiéramos utilizar HTML y CSS para crear símbolos de croquis que permitan mantener la guía de estilo y la plantilla de croquis en perfecta sincronización..
Accentsconagua