Trabajo como desarrollador front-end desde hace aproximadamente dos años y he participado en la creación de una amplia variedad de proyectos. Una de las lecciones que aprendí es que la colaboración entre diferentes equipos de desarrolladores que comparten el mismo objetivo pero tienen diferentes tareas y responsabilidades no es fácil.
En consulta con otros miembros del equipo, diseñadores y desarrolladores, creé un ciclo de creación de sitios web diseñado para equipos pequeños (5-15 personas). Incluye herramientas como Confluence, Jira, Airtable y Abstract. En este artículo compartiré las características de organizar el flujo de trabajo.
Skillbox recomienda: Curso práctico de dos años. .
Recordamos: para todos los lectores de "Habr": un descuento de 10 rublos al inscribirse en cualquier curso de Skillbox utilizando el código promocional "Habr".
¿Por qué es necesario todo esto?
El equipo mínimo necesario para crear un sitio web desde cero es un diseñador, programador y gestor de proyectos. En mi caso se formó el equipo. Pero después del lanzamiento de un par de sitios, tuve la sensación de que algo andaba mal. A veces simplemente no entendíamos completamente nuestras responsabilidades y la comunicación con el cliente dejaba mucho que desear. Todo esto ralentizó el proceso y molestó a todos.
Comencé a trabajar para resolver el problema.
Una búsqueda en Google da buenos resultados sobre nuestro problema.
Para que el trabajo realizado sea más visual, creé un diagrama de flujo de trabajo que permite comprender cómo se realiza el trabajo aquí.
Haga clic en la imagen para abrirla en resolución completa.
Metas y objetivos
Una de las primeras técnicas que decidí probar fue el “modelo en cascada” (Cascada). Lo usé para resaltar problemas y entender cómo resolverlos.
Problema: la mayoría de las veces, el cliente no evalúa el proceso de creación del sitio web de forma modular, como lo hacen los desarrolladores. Lo percibe como un sitio normal, es decir, piensa en páginas individuales. En su opinión, los diseñadores y programadores crean páginas individuales, una tras otra. Como resultado, el cliente simplemente no comprende lo que sigue durante el proceso real.
Tarea: No tiene sentido convencer al cliente de lo contrario, la mejor opción es desarrollar un proceso modular para la creación de un sitio web dentro de la empresa basado en un modelo página por página.
Los tokens y componentes de diseño universal son administrados tanto por desarrolladores como por diseñadores.
Problema: Esta es una situación común que abordan muchas estrategias. Hay muchas soluciones interesantes, en la mayoría de los casos se propone crear un sistema de diseño controlado por una guía de estilo/generadores de biblioteca. Pero en nuestra situación, simplemente no era posible agregar otro componente al proceso de desarrollo que nos permitiera administrar los niveles de acceso para los diseñadores.
Tarea: construir un sistema universal en el que los diseñadores, desarrolladores y gerentes puedan trabajar sincrónicamente sin interferir entre sí.
Seguimiento preciso del desarrollo
Problema: Si bien hay muchas herramientas útiles disponibles para rastrear problemas y medir el progreso general, la mayoría no son flexibles ni óptimas. La herramienta puede resultar útil al ahorrarle al equipo el tiempo que normalmente se dedicaría a preguntas y aclaraciones sobre tareas específicas. También facilita la vida a los gerentes al brindarles una comprensión más precisa de todo el proyecto.
Tarea: cree un panel para realizar un seguimiento del progreso de las tareas realizadas por los diferentes miembros del equipo.
Juego de herramientas
Después de experimentar con diferentes herramientas, me decidí por el siguiente conjunto: Confluence, Jira, Airtable y Abstract. A continuación revelaré los beneficios de cada uno.
Confluencia
Rol de la herramienta: centro de información y recursos.
El espacio de trabajo de Confluence es relativamente fácil de configurar, tiene muchas funciones, integraciones con diferentes aplicaciones y plantillas individuales personalizables. No es una solución única para todos, pero es ideal como centro de información y recursos. Esto significa que cualquier referencia o detalle técnico relacionado con el proyecto debe ingresarse en la base de datos.
La herramienta le permite documentar adecuadamente cada componente y cualquier otro detalle sobre el proyecto.
La principal ventaja de Confluence es la personalización de plantillas de documentos. Además, se puede utilizar para implementar un repositorio único de especificaciones y documentación diversa del proyecto, separando los niveles de acceso de los participantes. Ahora no tiene que preocuparse de tener una versión antigua de la especificación en sus manos, como sucede cuando envía documentos por correo electrónico.
Más información sobre la herramienta .
Jira
Rol de la herramienta: seguimiento de problemas y gestión de tareas.
Jira es una herramienta de planificación y gestión de proyectos muy poderosa. La parte principal de la funcionalidad es la creación de flujos de trabajo personalizables. Para gestionar los problemas de forma eficaz (que es lo que necesitamos), conviene prestar especial atención al uso correcto del tipo de solicitud y del tipo de problema (tipo de problema).
Por lo tanto, para asegurarse de que los desarrolladores estén creando componentes basados en el diseño correcto, deben recibir una notificación cada vez que algo cambie en el diseño. Tan pronto como se actualiza el componente, el diseñador debe abrir un problema, asignar un desarrollador responsable y asignarle el tipo de problema correcto.
Con Jira, puedes estar seguro de que absolutamente todos los participantes en el proceso (permíteme recordarte que en nuestro caso hay entre 5 y 15) recibirán las tareas correctas que no se perderán y encontrarán a su ejecutor.
Más información sobre Jira .
Mesa de aire
Rol de la herramienta: gestión de componentes y tablero de progreso.
Airtable es una mezcla de hojas de cálculo y bases de datos. Todo ello permite personalizar el funcionamiento de todas las herramientas comentadas anteriormente.
Ejemplo 1: Gestión de componentes
En cuanto al generador de guías de estilo, no siempre es cómodo de utilizar; el problema es que los diseñadores no pueden editarlo. Además, no sería una buena decisión utilizar la biblioteca de componentes de Sketch, ya que tiene muchas limitaciones. Lo más probable es que simplemente no puedas utilizar esta biblioteca fuera del programa.
Airtable tampoco es perfecto, pero es mejor que muchas otras soluciones similares. Aquí hay una demostración de la plantilla de la tabla de gestión de componentes:
Cuando un desarrollador acepta un componente de diseño, evalúa el ABEM resultante registrando el componente en una tabla. Hay 9 columnas en total:
- Nombre: el nombre del componente según el principio ABEM.
- Vista previa: aquí es donde se coloca una captura de pantalla o una imagen del componente descargado de otra fuente.
- Una página vinculada es un vínculo a la página de un componente.
- Componente secundario: un enlace a los componentes secundarios.
- Modificador: comprueba la presencia de opciones de estilo y las define (por ejemplo, activo, rojo, etc.).
- La categoría de componente es una categoría general (texto, imagen promocional, barra lateral).
- Estado de desarrollo: el progreso real del desarrollo y su definición (completado, en progreso, etc.).
- Responsable: el desarrollador responsable de este componente.
- El nivel atómico es la categoría atómica de este componente (según el concepto de diseño atómico).
- Los datos pueden estar referenciados en la misma tabla o en diferentes tablas. Conectar los puntos evitará confusiones al escalar. Además, los datos se pueden filtrar, ordenar y modificar sin problemas.
Ejemplo 2: progreso del desarrollo de la página
Para evaluar el progreso del desarrollo de la página, necesita una plantilla creada específicamente para este propósito. La mesa puede atender tanto a las necesidades del propio equipo como a las del cliente.
Cualquier información sobre la página se puede anotar aquí. Esta es una fecha límite, un enlace al prototipo de InVision, un destino, un componente secundario. Inmediatamente se nota que las operaciones son muy cómodas de realizar, tanto en lo que respecta a la documentación y actualización del diseño como al estado del desarrollo front-end y back-end. Además, estas operaciones se realizan simultáneamente.
Resumen
Función de la herramienta: una fuente única de control de versiones para activos de diseño.
Abstract se puede llamar GitHub para recursos en Sketch y evita que los diseñadores tengan que copiar y pegar archivos. La principal ventaja de la herramienta es que proporciona un repositorio de diseño que actúa como una "fuente única de verdad". Los diseñadores deben actualizar la rama maestra a la última versión del diseño aprobado. Después de eso, deben notificar a los desarrolladores. Estos, a su vez, deberían funcionar sólo con activos de diseño de la rama principal.
Como conclusión
Después de implementar el nuevo proceso de desarrollo y todas las herramientas mencionadas anteriormente, la velocidad de nuestro trabajo aumentó al menos el doble. No es una solución perfecta, pero es muy buena. Es cierto que para que funcione, es necesario hacer un gran esfuerzo; se requiere "trabajo manual" para actualizarlo y mantenerlo todo en funcionamiento.
Skillbox recomienda:
- Curso práctico .
- Curso por Internet .
- curso práctico anual .
Fuente: habr.com