Resumen del proceso de diseño de Microsoft Outlook

Cómo Abstract mejoró la organización y colaboración de archivos en nuestro equipo de diseño

Descripción de la imagen: una selección de los componentes de la interfaz de usuario de nuestro sistema de diseño.

Como diseñador, he usado varias herramientas para el almacenamiento de archivos y la comunicación del equipo, pero ninguna ha sido muy sólida. Puedo pensar en innumerables veces que perdí un archivo o pasé horas buscando el diseño más actualizado de alguien, desperdiciando tiempo y energía preciosos.

Los desarrolladores han tenido sistemas de control de versiones como Git por un tiempo, pero mecanismos similares para los diseñadores no han estado disponibles, hasta ahora.

Abstract es una herramienta creada para ayudar a nuestros diseñadores a colaborar en proyectos. Proporciona a nuestro equipo un centro central para nuestro trabajo de diseño, ayudándonos a administrar y mantener componentes y archivos de diseño. Los diseñadores importan archivos Sketch en Abstract una vez, y luego simplemente abrimos los archivos desde allí.

Hace unos años, Miles y Victor comenzaron a usar Abstract en el equipo de Outlook y desde entonces se ha adoptado en los equipos de diseño de Microsoft. En esta publicación, analizaré cómo usamos Abstract y compartiré con ustedes nuestra estructura de archivos, el proceso de fusión, las prácticas de mantenimiento de archivos y algunas áreas de nuestro proceso que creemos que podrían mejorarse. Este proceso funciona para un equipo grande, pero todavía lo estamos resolviendo y nos encantaría saber cómo podemos mejorar esto.

Diseñar la estructura de archivos de un proyecto

Nuestros proyectos están divididos por plataforma: Android, iOS, Mac, Web y Universal (Mail and Calendar en Windows 10). Dentro de estos proyectos, nuestros archivos se dividen en varias secciones de nuestra aplicación. A continuación se muestra un ejemplo de nuestra estructura de archivos iOS dentro de Abstract donde separamos nuestros archivos en secciones como "Kit de interfaz de usuario de iOS", "Correo" y "Calendario" para mantener los archivos funcionando rápidamente.

Primero, Start Here es un archivo para nuevos diseñadores y socios externos. Contiene información sobre nuestros principios de diseño, cómo usar Resumen, exportar activos y algunos consejos y trucos sobre el uso de complementos de Sketch.

Comience aquí archivo

A continuación, UI-Kit es la biblioteca Sketch, que contiene todos nuestros componentes, tipografía, íconos y color. Todas las pantallas en los archivos de diseño usan símbolos vinculados de esta biblioteca.

El UI-Kit se divide en dos páginas: una para símbolos y otra para todas las hojas de adhesivos del componente de diseño. Este último incluye información detallada sobre cada elemento y un diseño intuitivo para que podamos encontrar rápidamente lo que estamos buscando.

El archivo del kit de interfaz de usuario de iOS contiene una hoja adhesiva de componentes, así como los símbolos mismos

El resto de los archivos representan diferentes partes de la aplicación: incorporación, correo, calendario, búsqueda, configuración y más. Separar cada categoría nos ayuda a evitar archivos lentos y retrasos mientras trabajamos. También es una ventaja al combinar diseños, porque cuando creamos nuevas funciones, a menudo solo necesitamos tocar ciertas partes de la aplicación, lo que a cambio significa menos conflictos

Pasando por el proceso de diseño

El primer paso es crear una rama, que toma todos los archivos de croquis en el maestro y crea una réplica. Piense en ello como duplicar una carpeta. Para identificar la rama, asignamos una etiqueta simple a la pieza en la que estamos trabajando, agregando el título apropiado después de la etiqueta. Normalmente usamos etiquetas como "Característica", "Kit" o "Exploración" para describir el proyecto. En Outlook, se nos anima a probar nuevas ideas y cambiar cualquier cosa que creamos que se puede mejorar, es cuando usamos una etiqueta como "Exploración". Estas etiquetas dan a otros miembros del equipo algo de contexto y les ayudan a encontrar y comprender lo que somos trabajando en. Crear una sucursal es una gran ventaja porque significa que varios diseñadores pueden trabajar en los mismos archivos y luego fusionarlos nuevamente en el maestro.

Ejemplo de etiquetado de rama

En la nueva rama creo un nuevo archivo desde Abstract. Denomino al archivo algo así como "Trabajando", que ayuda a otros a saber dónde están las últimas iteraciones. Luego puedo copiar las mesas de trabajo de otros archivos en este: me ayuda a visualizar un flujo o cambiar una pantalla existente.

Crear un archivo

Un archivo de boceto abierto desde Resumen contiene un pequeño diálogo flotante con la opción de Vista previa y confirmación. Ahorra trabajo al servidor y permite que otros miembros del equipo vean los cambios. Commit no afecta al maestro, solo actualiza la rama. En mi equipo, nos gusta seguir la regla general de comprometer el trabajo una vez al día. Antes de confirmar los cambios, agrego una nota descriptiva que describe los cambios que he realizado. Siempre tengo acceso a cada cambio, por lo que, si es necesario, puedo revertir un cambio o consultar las versiones anteriores de un archivo.

Comprometerse diariamente

Una vez que se completa un diseño, es hora de ordenar las capas y fusionar el diseño con los archivos maestros. Asegúrese de que los nombres de las capas sean precisos y el orden siga lo que ve en la pantalla (de arriba a abajo). Esto debe repetirse para cada pantalla. Puedo crear otra nueva rama etiquetada [Kit] y copiar en las nuevas pantallas al archivo apropiado, o puedo volver a crear estas pantallas desde cero utilizando los últimos componentes de la biblioteca. La razón por la que comienzo un nuevo archivo es para traer solo las pantallas principales al maestro. Siempre puedo volver a visitar la rama anterior en el archivo Resumen más adelante. Lleva un poco de tiempo y nos desalienta de combinar funciones con más frecuencia. Nos encantaría saber de cualquiera que tenga sugerencias para mejorar el proceso de fusión.

A continuación se muestra una demostración de cómo podemos crear una rama y usar los componentes de la interfaz de usuario de la biblioteca para diseñar pantallas en nuestra aplicación. Es esta combinación de Resumen y nuestra biblioteca de componentes lo que nos permite trabajar de manera rápida y eficiente mientras brindamos total transparencia y visibilidad al equipo. Estamos trabajando desde los mismos archivos y nuestros nuevos archivos están disponibles para todos.

Descripción de la imagen: Creación de pantallas de Outlook utilizando nuestros componentes de la interfaz de usuario.

Antes de seleccionar el botón de combinación, puedo solicitar una revisión de cualquiera en el equipo. Buscamos capas de símbolos vinculados, nombres correctos, símbolos duplicados y cambios en la biblioteca. Los revisores suelen dejar comentarios en la sección de comentarios de Resumen o en mesas de trabajo específicas, manteniendo todo en el mismo lugar. Una vez que se completan las revisiones, fusionamos el diseño y archivamos la rama anterior.

Mejores prácticas para mantenimiento

Mi equipo comparte la responsabilidad de actualizar el kit con sus funciones y me dedico a trabajar para mantener sanos los archivos de Sketch y mejorar y actualizar continuamente el kit, en particular para tener en cuenta las actualizaciones del sistema operativo o las principales revisiones de diseño.

Los diseñadores pueden dar su opinión sobre los kits en cualquier momento, planteando problemas o iniciando conversaciones sobre posibles mejoras. Hacemos un seguimiento de estos comentarios en un problema de GitHub, lo que permite que cualquier persona a tiempo contribuya. A continuación se muestra un ejemplo de los tipos de comentarios que rastreamos para el kit de interfaz de usuario, incluida la eliminación de iconos duplicados y la adición de anulaciones de color a todos los iconos.

Un problema de Github para rastrear problemas con el kit de interfaz de usuario

Nuestro equipo de proceso y UI ha sido aceptado por los equipos de diseño de Microsoft a medida que diseñamos con un enfoque más abierto y colaborativo. A medida que Fluent Design evoluciona en dispositivos móviles, veremos elementos comunes a través de los productos de Microsoft.

Todavía estamos aprendiendo y constantemente estamos buscando formas de mejorar nuestro proceso. Nos encantaría saber cómo otros equipos están utilizando Resumen en su proceso de diseño y sugerencias sobre cómo podríamos mejorar el nuestro.

Siéntase libre de compartir sus ideas en los comentarios .

Para mantenerse informado con Microsoft Design, síganos en Dribbble, Twitter y Facebook, o únase a nuestro programa Windows Insider. Y si está interesado en unirse a nuestro equipo, diríjase a aka.ms/DesignCareers.

Escrito con y con la ayuda de Miles Fitzgerald y el Equipo de Outlook.