1–2–3 Guía para gestionar activos de diseño

Tan fácil como suena. Echa un vistazo a la recapitulación y a continuación encontrarás una guía de video. Si trabaja como autónomo o en equipo, esta es la idea. Usaremos:

Boceto → UI, Resumen → Versionado, Zeplin → Traspaso (Opcional)

TL; DR

1 - Nivel superior: Bibliotecas de soporte y cliente

En resumen, configure New Project llamado ___Support: elementos que utiliza con frecuencia, como kits de interfaz de usuario, kits de sistema operativo, kits de estructura alámbrica, maquetas. Use un archivo de croquis para cada tipo de activo y asegúrese de establecer esos archivos como bibliotecas.

Luego, para cada Cliente que configure un Proyecto separado, diga __Dreamland Inc., donde mantendrá los Activos de la Marca, cosas que usará en los proyectos para el mismo Cliente, como logotipos, colores, tipografía. Todos los archivos de Sketch aquí también serán bibliotecas.

Todos los activos en los archivos de la Biblioteca tienen que ser Símbolos. Use / en Nombres de símbolos para la agrupación (p. Ej., Teclados / blanco, teclados / negro). Dejo la página de símbolos desordenada y uso páginas adicionales para mantener los elementos organizados (usando mesas de trabajo). Ejemplo: el cliente utiliza un esquema de color diferente para la Colección de primavera: crearé una página de colores de primavera con todas las instancias de colores en la Biblioteca __color.sketch.

Sugerencia: use Batch Create Symbols y Rename It para convertir mejor las capas en símbolos, y si usa Symbols Page, use Symbol Organizer.

2 - Nivel medio: proyectos

Use New Project para cada trabajo del cliente, por ejemplo, la aplicación Dreamland para iOS. Importe las bibliotecas de soporte y las bibliotecas de clientes según sus necesidades. Cree un archivo de croquis para la interfaz de usuario o divídalo en varios archivos. Si trabaja solo, use un archivo dividido en Páginas, uno para cada flujo de usuario. Para el trabajo en equipo, es mejor crear múltiples archivos de Sketch para evitar conflictos. No hay nada de malo en trabajar con muchos archivos, de hecho, puede ser más eficiente.

Además de las bibliotecas de nivel superior, use las bibliotecas de nivel medio aquí. Esos serán elementos comunes de diseño de proyectos, como botones, elementos de formulario, íconos, etc. Por lo general, es una exageración mantenerlos en archivos separados, por lo que debe atenerse a una _dreamland-ios-library y organizar símbolos dentro de las páginas para mayor claridad. Más tarde, cuando el mismo Cliente lo contrate para un proyecto diferente, diga la aplicación Dreamland iOS para guías turísticos, simplemente enlace _dreamland-ios-library y reutilice los activos.

Consejo lateral: para organizar los activos dentro de las páginas para una mejor vista previa, use Craft Plugin y acceso directo: Cmd + Shift + C.

3 - Nivel inferior: archivos de diseño de interfaz de usuario

Este es un archivo de boceto con múltiples páginas o varios archivos de boceto donde trabajas en la interfaz de usuario. A menos que sea un proyecto realmente pequeño, resista el impulso de mantener los símbolos en los archivos de diseño. Idealmente, conserve solo los Símbolos que son específicos de ese archivo y que no se usarán afuera. Ejemplo: si uso el mismo fondo para todas las pantallas de incorporación, pero no afuera, mantendré el fondo como un símbolo dentro del archivo de Onboarding.sketch del usuario. Si ese es el fondo que podría usar en otro lugar, lo muevo a _dreamland-ios-library.

Mantengo la _dreamland-ios-library abierta en segundo plano y después de diseñar algunas pantallas me detengo por un momento para poner los nombres correctos, mover los símbolos y reemplazarlos en el archivo de diseño. Realmente no es tanto ajetreo. El punto es que desea centrarse en el proceso de diseño. Trate de no preocuparse demasiado por lo que debe ir a dónde. Después de crear un par de pantallas o cuando se canse un poco, tómese un breve descanso y organice los recursos. De esa manera, creará cada pantalla siguiente más rápido y, mientras tanto, la biblioteca del proyecto.

Consejo lateral: utilice Sketch Runner para llamar rápidamente a los símbolos por su nombre

BONIFICACIÓN - Su desarrollador ️ it

Si juegas bien las cartas, no hay necesidad de crear especificaciones adicionales: los desarrolladores pueden usar Zeplin y los archivos de la biblioteca para crear fragmentos de código primero (construir átomos y moléculas: extraer colores, tamaños de fuente). Luego, los archivos de diseño les permiten poner todo junto (construir organismos, medir las distancias y colocar los elementos).

Además, si está buscando algunas formas de organizar y configurar una Estructura de diseño, puede consultar este artículo.

Y ¡estás listo!

Video - ¡Cómo funciona en detalle + Consejos!

Aquí hay un video tutorial de 24 minutos de duración dividido en 3 partes, que le mostrará cómo aplicar la Regla 1–2–3 en su flujo de trabajo de diseño, además de algunos Consejos adicionales:

Haga clic en la imagen para ver las lecciones.

Pros

  • Estructura clara, fácil de seguir para cualquier tipo de trabajo.
  • Las bibliotecas se pueden vincular entre diferentes proyectos.
  • Actualizaciones fáciles y entrega más rápida para clientes existentes
  • Ventajas del control de versiones: copia de seguridad de todos sus archivos, historial de versiones, trabajar en equipo y resolver conflictos y mucho más.

Contras

  • Debe guardar → Confirmar archivo de biblioteca en el mismo proyecto, y Guardar → Confirmar → Combinar en bibliotecas maestras de otros proyectos antes de actualizar los símbolos
  • Los estilos de texto y los estilos compartidos no están disponibles en la biblioteca vinculada: tenga en cuenta que, en este caso, use bloques de texto como símbolos

¡Espero que hayas aprendido algo útil! Si es así, consulte más de 40 horas de videos tutoriales para diseñadores de UI / UX en learnux.io