Guía de Shishir para Enmarcar Problemas en la Pizarra
Shishir Mehrotra
Una frase trillada, pero muy usada: Una imagen vale más que mil palabras
Cualquiera que haya trabajado cerca de mí reflexionará rápidamente sobre mi profundo amor por las pizarras. Me encanta el espacio en blanco abierto y la flexibilidad para dibujar y volver a dibujar, para enmarcar y volver a enmarcar.
Cuando Matt (Jefe de Crecimiento) y yo comenzamos a construir Coda, pasamos incontables horas en pizarras y gradualmente formalizamos nuestras técnicas. Al hacerlo, desarrollamos una taquigrafía que facilitó tanto desarrollar el marco adecuado como que otros lo digieran rápidamente.
Perspicacia: Usar colores como una taquigrafía
Originalmente, esto ocurrió por casualidad. Teníamos una pequeña caja de marcadores de pizarra con un conjunto fijo de colores y comenzamos a rotarlos. Descubrimos rápidamente que si acordábamos de antemano qué significaba cada color, era mucho más fácil colaborar. De hecho, a menudo comenzábamos con uno de nosotros enmarcando un problema y luego cambiábamos de lugar para que el otro pudiera terminar.
A lo largo de los años, estas asignaciones de color se han mantenido con nosotros. Aquí están los colores a los que llegamos:
Preguntas (Negro): Configurando el espacio. Definiendo las grandes preguntas. De estas, una o dos serán la(s) eigenpregunta(s).
Opciones (Azul): Se utiliza para ayudar a pensar en grande — definiendo posibles respuestas u opciones.
Ejemplos tangibles (Gris o Marrón): Utilizado para concretar una opción. ¿Cuál es el visual?
Llamadas (Púrpura): Destacando el concepto importante en un ejemplo concreto que demuestra la opción azul. A menudo se usa para énfasis o para atraer la atención.
Una elección (Naranja): Señala una decisión o espacio donde estamos inclinándonos entre las opciones.
Un problema (Rojo): Esto tiene posibles problemas o podría ser realmente complicado. Precaución.
Un beneficio (Verde): Esto parece realmente bueno — señalando un potencial asombroso.
Eso es todo, un sistema simple, pero un atajo muy útil. Por ejemplo, podríamos mirar un diagrama y decir cosas como:
"Parece que todavía estás enmarcando, todavía está todo azul"
"¿Listo para los intercambios? Déjame tomar el verde/rojo
¿Momento de decidir? Aquí está el bolígrafo naranja
"Quizás estas no son las preguntas correctas? Regresemos al bolígrafo negro
Un ejemplo (y una plantilla)
Si bien amo las pizarras físicas, con el paso de los años, a medida que nuestro equipo se volvió más distribuido, recurrí con más frecuencia a una alternativa digital. Mi pizarra digital preferida es Miro (hablaré más sobre eso en un post aparte).
¡Este es un ejemplo de cómo funciona esta técnica de coloreado en la práctica! Si quieres profundizar, consulta este documento, Eigenquestions: El arte de enmarcar problemas.
Shishir Mehrotra
Cofundador y CEO @ Coda
Soy un fanático de la productividad a largo plazo que finalmente tuvo la oportunidad de formar el doc de sus sueños. Anteriormente construyó productos en YouTube, Microsoft y Centrata. Ex estudiante del MIT. Vivo en San Francisco y estoy casado con mi novia de la universidad, con quien tengo dos hijas maravillosas.
Categorías
Plantillas similares
Plantilla de wireframes para sitios web
Plantilla de wireframes para sitios web
El wireframing es un método de diseño de un sitio web a nivel estructural. Un wireframe es una disposición estilizada de una página web que muestra los elementos de la interfaz en cada página. Usa esta plantilla de wireframes para iterar en páginas web de manera rápida y económica. Puedes compartir el wireframe con clientes o compañeros de equipo y colaborar con las partes interesadas. Los wireframes permiten a los equipos obtener la aceptación de las partes interesadas sin invertir demasiado tiempo o recursos. Ayudan a garantizar que la estructura y el flujo de tu sitio web satisfagan las necesidades y expectativas de los usuarios.
Plantilla de Bocetos Online

Plantilla de Bocetos Online
Antes de avanzar al máximo con una idea prometedora, obsérvala desde una perspectiva amplia para saber cómo funciona y qué tan bien cumple tus objetivos. Eso es lo que hacen los bocetos. Esta plantilla te ofrece una potente herramienta de colaboración remota para las etapas iniciales del prototipado, ya sea que estés esbozando páginas web y aplicaciones móviles, diseñando logotipos o planificando eventos. Luego, puedes compartir fácilmente tu boceto con tu equipo y guardar cada etapa antes de modificarlo y desarrollar sobre él.
Plantilla de wireframes de aplicaciones
Plantilla de wireframes de aplicaciones
¿Listo para empezar a construir una aplicación? No te limites a imaginar cómo funcionará y cómo interactuarán los usuarios con ella: deja que un wireframe te lo muestre. El wireframing es una técnica para crear un diseño básico de cada pantalla. Cuando haces un wireframe, idealmente al principio del proceso, obtendrás una comprensión de lo que logrará cada pantalla y conseguirás el apoyo de las partes interesadas importantes, todo antes de añadir el diseño y el contenido, lo que te ahorrará tiempo y dinero. Y al pensar en las cosas en términos del viaje del usuario, ofrecerás una experiencia más convincente y exitosa.
Plantilla de wireframes para sitios web
Plantilla de wireframes para sitios web
El wireframing es un método de diseño de un sitio web a nivel estructural. Un wireframe es una disposición estilizada de una página web que muestra los elementos de la interfaz en cada página. Usa esta plantilla de wireframes para iterar en páginas web de manera rápida y económica. Puedes compartir el wireframe con clientes o compañeros de equipo y colaborar con las partes interesadas. Los wireframes permiten a los equipos obtener la aceptación de las partes interesadas sin invertir demasiado tiempo o recursos. Ayudan a garantizar que la estructura y el flujo de tu sitio web satisfagan las necesidades y expectativas de los usuarios.
Plantilla de Bocetos Online

Plantilla de Bocetos Online
Antes de avanzar al máximo con una idea prometedora, obsérvala desde una perspectiva amplia para saber cómo funciona y qué tan bien cumple tus objetivos. Eso es lo que hacen los bocetos. Esta plantilla te ofrece una potente herramienta de colaboración remota para las etapas iniciales del prototipado, ya sea que estés esbozando páginas web y aplicaciones móviles, diseñando logotipos o planificando eventos. Luego, puedes compartir fácilmente tu boceto con tu equipo y guardar cada etapa antes de modificarlo y desarrollar sobre él.
Plantilla de wireframes de aplicaciones
Plantilla de wireframes de aplicaciones
¿Listo para empezar a construir una aplicación? No te limites a imaginar cómo funcionará y cómo interactuarán los usuarios con ella: deja que un wireframe te lo muestre. El wireframing es una técnica para crear un diseño básico de cada pantalla. Cuando haces un wireframe, idealmente al principio del proceso, obtendrás una comprensión de lo que logrará cada pantalla y conseguirás el apoyo de las partes interesadas importantes, todo antes de añadir el diseño y el contenido, lo que te ahorrará tiempo y dinero. Y al pensar en las cosas en términos del viaje del usuario, ofrecerás una experiencia más convincente y exitosa.