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

Cómo realizar un inventario de interfaz con InVision

by
Difficulty:BeginnerLength:ShortLanguages:

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

Por definición: un inventario es una reunión de elementos registrados en una lista. Este término no es nada nuevo, pero la idea de utilizar este concepto para las interfaces si lo es. Brad Frost, quien acuñó el término "Diseño atómico", afirma que la creación de patrones agnósticos ayuda a construir componentes mucho más versátiles que se pueden usar ampliamente en un sistema.

En este breve tutorial usaremos InVision para crear un inventario de interfaz. Trabajaremos hacia un producto terminado con componentes y módulos que sean perfectamente reutilizables y portátiles.

Empezando

Un "módulo" es un conjunto de piezas estandarizadas o unidades independientes que se pueden ensamblar para construir una estructura más compleja. Construir de esta manera hace que los resultados predecibles sean más probables.

Para alcanzar este apogeo de la utopía del desarrollo, utilizaremos la función Tableros de InVision.

Aaron Stump en Dribbble

Los tableros son fáciles de crear y cada uno puede titularse con un nombre y una descripción. Una vez que tu información esté completa, haz clic en el botón "crear tablero".

file

Naturalmente, los tableros se pueden usar para varios propósitos, ya sea para una auditoría de inventario como la que estamos creando, o para descubrimientos de marca, etc.

file

Nos enfocaremos en el inventario de la interfaz para el propósito de este tutorial, pero ten en cuenta que los tableros también se pueden usar para otras necesidades contextuales.

Creando la Auditoria

Ahora que nuestro tablero ha sido creado, es hora de ponerse a trabajar y comenzar el verdadero trabajo que hemos venido a hacer; La interfaz de auditoría de inventario. Dependiendo de tu flujo de trabajo, esto se puede hacer de varias maneras diferentes, pero generalmente comienza con capturas de pantalla de los "átomos" de la interfaz, como botones, titulares, entradas, colores e incluso iconos. Dado que el Diseño Atómico también incluye "moléculas" y "organismos", puedes moverte a cada tipo según el proceso te guíe.

En la mayoría de los casos, las moléculas y los organismos tienen un nivel de inspección mucho más alto que incluye piezas más pequeñas de tipo atómico / molecular combinadas en formas únicas para crear un todo más grande.

Proyecto Alisa Law.

La organización es definitivamente la parte más importante al comenzar tus auditorías. Como puedes ver arriba, dividí una sección en particular en patrones y variaciones para poder identificar partes de la interfaz que se repetían, pero que tenían una ligera variación. Esto es genial cuando llega el momento de codificar, ya que puedes encontrar patrones reutilizables para mantener tu CSS, y finalmente construir un sistema más modular.

Proyecto Camp Shalom.

Los átomos ayudarán a identificar variaciones e incluso te guiarán en tu búsqueda de convenciones de nombres; la parte más difícil del trabajo. Cuando descubras tus átomos, piensa para tí mismo qué es un "patrón de visualización" y qué es un "patrón de contenido", ya que ambos diferirán enormemente. Si esta pregunta no se responde correctamente, tu código corre el riesgo de desviarse de convertirse en una unidad portátil y modular adecuada para diferentes contextos.

file

Las muestras de color también son un gran caso de uso con las tablas InVision. Esta puede ser una gran guía de ahorro de tiempo cuando se discute si la consistencia de color se usa en una interfaz. Las muestras también pueden ayudar a mantener un registro de los valores de color requeridos cuando se usan variables para almacenar información de color para trabajar con los preprocesadores de CSS.

Murmuration Malts proyecto

Aprovecha los tableros para documentar y discutir convenciones de nombres, funcionalidad, complementos / bibliotecas e incluso identificar patrones de un nivel superior.

Identificación de patrones utilizada junto con comentarios para el proyecto Murmuration Malts
Gif extraído de la publicación del blog Invision Boards Design Collaboration Reimagined

Los comentarios y los bocetos son una característica poderosa que también se puede usar con tablas. Usa el boceto para señalar partes de la interfaz en cuestión, o usa comentarios para discutir los patrones descubiertos para solidificar los requisitos antes del desarrollo. Hay un montón de otras funciones de comentarios excelentes que vienen con InVision. Te invito a leer más en su sitio.

Conclusión

Los tableros son realmente útiles para usar en descubrimientos iniciales, ya sean de desarrollo o visuales. Si deseas obtener más información, puedes leer todo sobre los tableros en el blog Invision. Como siempre, ¡feliz codificación y gracias por leer!

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.