Hola, soy Amber. Soy la diseñadora principal de SoCreate. Mi trabajo consiste en determinar cómo los usuarios experimentan e interactúan con nuestros productos. Los diseñadores de nuestro equipo no solo deben ser capaces de crear hermosas interfaces, sino que también deben tener una completa comprensión de cómo funcionará lo que hacemos.
El proceso de diseño en SoCreate está en constante evolución. Trabajamos de forma similar a muchos otros equipos y empresas de diseño; a menudo establecemos nuestras mejores prácticas a través de la prueba y el error. Cuando identificamos un punto conflictivo en nuestro proceso, probamos algo diferente. A veces, las cosas nuevas se mantienen, pero otras veces no.
Una de las cosas que se ha incorporado a nuestro proceso es la elaboración de bocetos. Cuando tenemos que diseñar algo nuevo o que se aleja bastante de lo que ya tenemos, pasar directamente al trabajo de máxima fidelidad puede ser improductivo. Por ello, utilizamos la elaboración de bocetos como parte de la fase de planificación de nuestro proceso.
La elaboración de bocetos nos permite averiguar rápidamente la estructura del diseño. Para nosotros, ha sido más útil para las cosas nuevas que no pueden utilizar los elementos de diseño existentes, piezas conocidas del sistema de diseño de nuestro producto. Al elaborar los bocetos, nos centramos más en:
Los datos / el contenido que se requieren mostrar en el diseño.
La jerarquía / la disposición general del diseño.
Nuestra oficina ya lleva mucho tiempo sin utilizar papel. Todos usamos tabletas. Cuando aún trabajábamos en la oficina, cada espacio tenía grandes computadoras con pantallas táctiles montadas en la pared que utilizábamos como pizarras digitales y pantallas de presentación para las reuniones. También resultaban prácticas para trabajar por tu cuenta cuando necesitabas una pantalla más grande. Este entorno sin papeles siempre nos ha animado a resolver los problemas a través de un medio digital.
Un poco de historia
Hace mucho tiempo, nuestro equipo trabajó en un proyecto para diseñar un estado financiero. Trabajamos durante semanas y a través de muchas iteraciones muy diferentes del estado financiero. En ese momento, me costó entender los fundamentos del sistema. Sentía que estaba diseñando de forma reactiva en lugar de proactiva. Cada iteración requería una reorganización significativa y debía trabajarse prácticamente desde cero en Photoshop y esto tomaba mucho tiempo.
Con el tiempo, empecé a hacer maquetas de estos diseños en nuestra aplicación preferida para tomar notas, OneNote. Dibujar siempre me ha ayudado a comprender y me gustaba utilizar el lápiz óptico para dibujar en mi tableta, pero aún no se me había ocurrido que pudiéramos planificar los diseños con estas herramientas.
![Boceto en OneNote muestra diseño inicial de un sistema financiero](https://images.prismic.io/socreate/1d810f41-a113-43f4-96db-d8229317405d_financial-statement.png?auto=compress,format&rect=0,0,1098,538&w=860&h=421)
Si no puedes entender esto, no te preocupes. Probablemente yo tampoco pude.
Con la eliminación de la capa visual del diseño, fue fácil centrarse únicamente en los datos, el diseño y las matemáticas necesarias, lo que nos ayudó a encontrar la raíz del problema.
El problema terminó situándose en nuestras necesidades para el sistema subyacente al estado de cuenta, más que en los aspectos visuales del propio diseño. Esta constatación fue una de las muchas que se produjeron durante un proceso que había comenzado como un simple rediseño de esta aplicación. Nos dimos cuenta de que eran necesarias mejoras fundamentales para que estuviera a la altura del producto de alta calidad que pretendíamos crear.
La elaboración de bocetos nos ayudó a llegar a esta conclusión mucho más rápido que si hubiéramos seguido haciendo largos y complicados trabajos de reelaboración. En última instancia, esto dio lugar a una amplia refactorización de cómo habíamos diseñado el sistema financiero y hoy tenemos un sistema que funciona incluso mejor de lo que habíamos previsto inicialmente.
Desde aquel proyecto, incorporamos los bocetos al proceso de diseño siempre que tenemos una interfaz de usuario complicada que pueda aprovechar un borrador.
Cómo utilizamos hoy OneNote para los bocetos
Hemos utilizado OneNote para tomar notas durante todo el tiempo que llevo en SoCreate. He descubierto que las herramientas de dibujo de OneNote funcionan sorprendentemente bien para hacer bocetos y sus limitaciones nos ayudan a saber cuándo es el momento de pasar de esta fase a los diseños finales.
Con la herramienta Pluma podemos trazar rápidamente los diseños. Tengo un par de colores de pluma diferentes que me gusta usar además del negro. A veces utilizo rotuladores cuando esbozo los flujos de trabajo para señalar las piezas individuales de la interfaz de usuario. Puedes guardar los colores, tamaños y tipos de pluma en la barra de herramientas de Dibujo.
![Varas opciones de pluma en OneNote](https://images.prismic.io/socreate/0cc132f4-d77f-42f6-b0f6-12af5350c1bc_onenote-draw-tools.png?auto=compress,format&rect=0,0,579,73&w=860&h=108)
Algunas de las herramientas de Dibujo de OneNote.
A veces, las líneas rectas son difíciles de hacer a menos que se tenga una mano firme. Un truco que ayuda a que nuestros bocetos sean bonitos y ordenados es dibujar una línea corta y luego utilizar las herramientas de transformación para darle la longitud deseada. Una vez que tengas esta línea recta, puedes copiarla y pegarla en cualquier lugar donde necesites otra línea con la misma orientación. También puedes utilizar la herramienta Regla para hacer líneas rectas. Yo prefiero el truco de estirar la línea por razones puramente estéticas.
![Uso de controles de transformación de formas en OneNote para remodelar las líneas](https://images.prismic.io/socreate/2cc8f566-a59c-4272-9612-bc95f38de997_resize-line.gif?auto=compress,format&rect=0,0,600,134&w=860&h=192)
Los controles de transformación de las formas creadas con la herramienta Pluma te permiten cambiar el tamaño de la línea.
Con OneNote, puedo seleccionar, copiar y pegar cualquier parte de mi boceto que quiera duplicar. Las funciones Copiar y Pegar facilitan la composición de listas, flujos de trabajo y versiones alternativas del mismo diseño. La función Selección nos permite hacer ajustes rápidos después de recibir comentarios.
Mediante estos métodos, podemos elaborar los fundamentos de lo que hay que diseñar a escala real.
Cuándo terminar la fase de elaboración de bocetos
Por lo general, el punto en el que hay que pasar del boceto se revela por sí solo: hemos cumplido los requisitos iniciales del proyecto y ahora podemos trasladarlos del borrador al resultado final. Pero, en ocasiones, nos sentimos demasiado concentrados en un aspecto particular del diseño, haciendo demasiadas pequeñas revisiones o ajustes sobre su colocación. Cuando esto sucede, suele ser un gran problema continuar en OneNote. Llegados a este punto, está claro que tenemos que salir de esta fase del proceso de diseño.
Cuando hayamos decidido que la fase de elaboración de bocetos ha terminado, elegiremos qué hacer a continuación.
Presentar los bocetos a desarrollo
Cuando el proceso de elaboración de bocetos está terminado, solemos presentarlo directamente a los equipos de desarrollo. Este paso es especialmente importante cuando se planifican cambios drásticos en la estructura principal de nuestra aplicación. Antes de finalizar nuestros diseños, necesitamos que participen compañeros de equipo que tengan un punto de vista más centrado en el desarrollo para obtener su opinión. Sus comentarios desarrollan aún más nuestros diseños.
Hace algún tiempo, modificamos la forma de acceder a las cuentas de uno de nuestros productos. Esta parte del software afectaba toda la aplicación, por lo que era fundamental que los equipos de desarrollo participaran desde el principio en el proceso. Al obtener valiosos comentarios de la gente que iba a desarrollar lo que estábamos creando, evitamos algunos problemas importantes. Este proceso redujo drásticamente el tiempo necesario para llegar a un diseño que nos gustara y que no causara un gran problema para nuestro equipo de desarrollo.
![Un boceto en OneNote muestra un diseño potencial para un menú desplegable](https://images.prismic.io/socreate/9b83cd62-0322-43fa-9de9-7235879cb69e_inventory-pool.png?auto=compress,format&rect=0,0,596,266&w=860&h=384)
Cuando esbozamos un flujo de trabajo con un elegante menú desplegable con campos de selección, hablamos con los miembros del equipo de UX para asegurarnos de que se podía crear un componente como éste.
Pasar a la siguiente fase de diseño
Si nuestro proyecto está más estrictamente relacionado con el diseño y no es tan necesario hacer un seguimiento con nuestros compañeros de equipo de desarrollo, podemos pasar rápidamente a los diseños de alta fidelidad. Las decisiones tomadas y los conocimientos adquiridos durante la fase de elaboración de bocetos informan de lo que debemos hacer para el producto final.
Otros motivos para elaborar bocetos
Un boceto rápido también puede ser útil durante las reuniones de revisión del diseño como acompañamiento para tomar nota de los comentarios del propietario del proyecto. A veces, el mismo propietario del proyecto anotará una o dos ideas mientras colaboramos para resolver un problema.
El año pasado contratamos a un nuevo diseñador y nuestro equipo creció un 100%. Aceptar el papel de líder del equipo supuso un reto en muchos sentidos para mí. Considero que, en ocasiones, dibujar rápidamente algo transmite mejor la idea que utilizar palabras para describirlo. El lenguaje de un boceto puede ser mucho más sencillo y ha sido muy útil para utilizarlo con mi nuevo compañero de equipo mientras trabajamos a distancia.
Un boceto en el tiempo
Como dibujante de toda la vida, la elaboración de bocetos ha sido un complemento agradable y beneficioso para nuestro proceso. Para nosotros ha sido un éxito, pero, por supuesto, las soluciones de proceso como ésta no siempre son únicas. Si tu equipo trabaja principalmente con un lenguaje de diseño establecido o si a menudo tienes que resolver problemas de diseño complejos, quizás trabajar con bocetos en tu proceso de diseño podría beneficiarte.
Si tu equipo emplea un proceso similar o algo diferente, me encantaría que me lo contaras. Siempre estamos buscando cómo mejorar y trabajar de forma más eficiente.