Transcripciones
1. Introducción: Hola. Yo soy Max. Soy ingeniero de software al 53. hoy, nos vamos a centrar en Think Kit, que es un conjunto de herramientas que hemos lanzado en Paper orientadas al pensamiento visual estructurado. El Think Kit en su núcleo es tres nuevas herramientas, la herramienta de diagrama, la herramienta de relleno, y la herramienta de corte. Lo que estamos tratando de hacer en esta clase es
familiarizarte con algunas de las características centrales de Think Kit, y cómo realmente puedes usarlas para presentar tus ideas, bajar tus ideas, hacerlas lucir bien. Una de las cosas que es genial de Think Kit es que cuando lo usas,
te quita la mayor parte de ese trabajo de tus manos y te
permite ampliar tu kit de herramientas de pensamiento visual, y pensar más en cómo quieres presentar tus ideas más bien el trabajo sucio de hacer que se vean bien. A lo largo de esta clase, te voy a estar demostrando los ins y outs de las herramientas Think Kit a través de mi propio trabajo, para que veas cómo lo uso. Esta clase es realmente para cualquiera, ya sea que seas un diseñador móvil que usa esto para wireframe la interfaz de usuario para tu nueva aplicación, o si estás en marketing solo tratando de
darle vida a la próxima presentación para tu gran cliente. El proyecto para esta clase es crear un diagrama que muestre un hábito diario. Puedes llevar este proyecto en muchas direcciones diferentes, ya sea como pasas tu tiempo libre o cómo llegas a trabajar, pero lo principal que queremos que salgas de él es que practiques comunicando tus ideas visualmente usando el Herramientas de Think Kit. Todo lo que necesitarás para esta clase es tu iPad, la nueva versión de Paper que incluye las herramientas Think Kit de forma gratuita, y un stylus si lo deseas o simplemente puedes usar el dedo. Puedes terminar este proyecto en realidad solo unos minutos. Ya verás más adelante que voy a hacer justamente eso. Puedes pasar más tiempo en el proyecto si quieres, pero recuerda que esto no se trata de que tu idea
sea perfecta, solo se trata de comunicarlos bien de manera visual. Un proyecto realmente genial va a comunicar una idea de forma sencilla y clara usando colores que funcionan bien juntos y formas que no están demasiado ocupadas. No hay límite para el número de formas en las que puedes presentar lo que estás pensando, ya sea un diagrama de flujo, un diagrama de Venn, un gráfico de pirámide, o incluso simplemente un cuadrado simple, lo importante es que encuentres la estructura que se ajusta a tu idea.
2. ¿Qué hay en pantalla?: Cuando abres la app por primera vez, te colocas en la vista de inicio. Aquí es donde puedes ver todas las revistas que has creado. Puedes optar por darles una portada diferente o cambiar su título. Si tocas un diario, te meten en lo que llamamos la vista de mariposa. Aquí es donde puedes ver todas las páginas de
la revista y todas las creaciones que has añadido a esa revista. Siempre puedes tocar el botón más si te quedas sin páginas para agregar uno nuevo. Puedes usar el botón compartir aquí para compartir una idea a Mix, compartir toda la revista como PDF, o compartir esa página específicamente a cualquier servicio social, servicio de
impresión, o simplemente a tu rollo de cámara. Si decides que quieres eliminar una página de una revista, puedes tocar el botón X y eliminar esa página. Si decides que quieres duplicar una página y tal vez guardar la copia original, puedes mantener pulsado el botón más y pulsar duplicar. Para editar una idea, basta con tocarla en la vista de mariposa y se te llevará a la vista de lienzo. Puedes deslizar el dedo hacia arriba desde la parte inferior de la pantalla para subir tu bandeja y cambiar herramientas o color. Cuando hayas terminado de editar, simplemente puedes pellizcarte para volver a la vista de mariposa. Para volver a la vista de casa, simplemente pellizca de nuevo. Este es tu espacio privado donde guardas todas tus revistas personales. Si desliza hacia arriba te lleva al espacio de mezcla público. Se podía ver que tienes tres pilas. A la izquierda, está todas las ideas que has creado y compartido en Mix. Esta pila media te lleva a tu stream donde podrás ver las creaciones de todos los usuarios que sigues. Si tocas un icono, te llevará a su tarjeta de perfil y podrás seguirlos si aún no lo estás. Si estás usando Think Kit para colaborar en una idea, seguir a tus colaboradores es una gran manera de estar al día las revisiones y cambios que se realizan a ese proyecto. El tercer stack son ideas y creaciones que has protagonizado. Cuando veas una idea que te gusta particularmente, puedes protagonizarla y aparecerá en este arroyo para que vuelvas a mirar más adelante. Ahora mismo en el flujo de mezcla, estás viendo una combinación de ambas ilustraciones y diagramas Think Kit. Voy a empezar con sólo mostrarles dónde vive Think Kit dentro del papel. Entonces, aquí estoy en mi pantalla de inicio en papel con todos mis diarios, y voy a abrir uno nuevo, para mostrarles Think Kit. Entonces, Think Kit en su núcleo es, tres nuevas herramientas; la herramienta de diagrama, la herramienta de relleno, y la herramienta de corte. Estos viven en la misma bandeja de herramientas que las cinco herramientas originales, por lo que quizás ya estés familiarizado con lo que llamamos el kit esencial, las cinco herramientas originales de papel. Tienes la pluma estilográfica, el pincel de boceto, el marcador, el bolígrafo de rodillo, y la acuarela. Tienes un mezclador de color por aquí lo que te permite planear bien los colores, o puedes elegir los tuyos propios. Tienes tus paletas donde puedes almacenar colores que has creado en el pasado. Think Kit, presentamos tres nuevas herramientas, la herramienta de diagrama, la herramienta de relleno, y la herramienta de corte. Estos dos conjuntos de herramientas trabajan en conjunto para permitirte crear una forma visualmente atractiva de comunicar tus ideas. La herramienta de diagrama permite crear formas estructuradas agradables, ya sean rectangulares, un triángulo o un círculo. Puedes presionar durante mucho tiempo sobre estas para moverlas si quieres reposicionarlas. Otra cosa que puedes hacer con la herramienta de diagrama es crear flechas. Digamos que queremos hacer un diagrama de flujo a través de estas tres formas. Es realmente fácil de hacer con la herramienta de diagrama. El instrumento de relleno tiene algunos aspectos diferentes a la misma. Una, te permite rellenar rápidamente estas formas inteligentes que has creado. Cualquier cosa que haya sido corregida por la herramienta de diagrama se puede llenar fácilmente con un solo clic. También permite hacer formas más abstractas en la misma capa de fondo en la que ocurre el relleno inteligente. Con la herramienta de corte, puede reposicionar rápidamente las formas inteligentes o cortar áreas más grandes del lienzo y moverlas. Estoy seguro de que ya estás empezando a pensar en cómo puedes usar estas herramientas para crear diagramas y diagramas y diagramas de flujo. Ahora te daré un ejemplo de cómo he usado Think Kit en el pasado, subiré aquí a mi flujo de mezclas, y puedes ver algunas de las ideas que he creado,
esta es una que he creado para que el equipo de comunidad de 53 se
comunique uno de los aspectos más confusos de Think Kit. Hacer esto con las herramientas Think Kit fue bastante sencillo. Como puedes ver, las únicas formas de aquí son realmente rectángulos y cuadrados, y esas son súper rápidas y fáciles de hacer con la herramienta de diagrama. Después de eso, solo era cuestión de usar la herramienta de corte para posicionarlos como yo quisiera, y luego la herramienta de relleno para agregarle color. Esta fue una manera realmente rápida y fácil para el equipo de la comunidad y yo de
comunicar esta idea relativamente compleja sobre algunas de las características en Think Kit. Aquí te mostramos un ejemplo de cómo un usuario usó Think Kit para presentar una idea un poco menos seria. Vemos agua caliente, café molido, y presión, y cómo interactúan para hacer café elaborado, espresso, o simplemente vapor. Este diagrama se compone de algunos aspectos realmente básicos que son fáciles de hacer con las herramientas Think Kit. Simplemente crea un círculo, córtalo y pegarlo alrededor, y luego rellena las áreas con el color que quieras. Entonces solo puedes usar la herramienta de diagrama para crear flechas a cualquier área que quieras llamar y agregar etiquetas y texto. En este caso, el proyecto era más bien un alambre de interfaz de usuario. Crear un diseño como este con Think Kit hace que sea fácil y rápido bajar tus ideas en papel. Si cometes un error, es realmente fácil de arreglar. Simplemente puedes recoger la forma y ajustar el diseño, o simplemente llenarla con un color diferente con la herramienta de relleno. Esta es una parte realmente importante del proceso de diseño, es no tener que preocuparse por cometer errores y tener que volver atrás y borrar cuidadosamente o rehacer lo que has hecho. Aquí te dejamos un ejemplo de un diagrama de flujo que se hizo con Think Kit. puede ver que fue realmente fácil de hacer. Simplemente haz un rectángulo con la herramienta de diagrama y usa el corte para copiarlo y pegarlo todo alrededor del lienzo. La herramienta de diagrama se puede utilizar para crear fácilmente flechas de caja a caja para guiar el ojo a lo largo de un diagrama de flujo, y luego la herramienta de relleno puede agregar color. Después de cortar y pegar las cajas alrededor del lienzo, es realmente fácil agregar las flechas para guiar el ojo de los usuarios. Simplemente dibuja una línea de un cuadro a otro con la herramienta de diagrama y la línea se autocorregirá y se ajustará para que no se superponga a ninguna de las casillas. Agregar una punta de flecha es tan fácil como tocar ese extremo de la flecha. Entonces, esa es una introducción a las herramientas Think Kit, y cómo se han utilizado hasta ahora. En el siguiente video, vamos a entrar en más de los detalles de cómo se pueden usar estas herramientas.
3. Características clave: Entonces, empecemos con una herramienta de diagrama. Una de las cosas más fáciles que puedes hacer con una herramienta de diagrama es hacer un diagrama de flujo realmente rápido. Entonces, puedes empezar con solo dejar caer algunos rectángulos,
que por supuesto se corrigen automáticamente para que sean bonitos cuadrados y rectángulos. Podemos agregar algunos círculos y triángulos, algunos más cuadrados. A continuación, utilice la herramienta de diagrama para crear el flujo real a través del gráfico. Simplemente dibuja una línea rápidamente de una a otra y luego toca para crear una punta de flecha. Podemos hacer esto a lo largo de todo el diagrama para indicar el flujo de forma a forma y serpiente alrededor de todo el diagrama. Entonces, ahora tenemos nuestro diagrama de flujo y podemos usar la herramienta de relleno para agregar un poco de color. Entonces, solo tienes que seleccionar la herramienta de relleno y tocar el interior de cualquier forma inteligente y llenará toda la forma con ese color. Por supuesto, una parte importante de los diagramas son las etiquetas. Por lo tanto, puede utilizar la herramienta de diagrama para crear
fácilmente escritura a mano que no se reconocerá como formas. Esta es una buena manera de agregar rápidamente algo de información a un gráfico o a un diagrama de flujo. Si lo desea, puede utilizar algunas de las herramientas originales del
kit de esenciales para un aspecto ligeramente diferente en sus etiquetas de escritura a mano. La herramienta Cortar se puede utilizar de algunas maneras diferentes. Si quieres reubicar todo el gráfico, solo
puedes dibujar un lazo alrededor todo
el asunto y moverlo hacia abajo hacia el centro de la pantalla. O si quieres simplemente ajustar el diseño de un solo elemento, puedes tocar la forma inteligente para subirlo y colocarlo de nuevo en el lienzo. Notarás en este diagrama de flujo que, aunque hemos corregido las formas para que sean bonitos rectángulos y cuadrados y círculos y triángulos, hemos dejado la tinta luciendo bastante orgánica. El ancho del trazo, igual que algunas de nuestras otras herramientas en el kit de esenciales se basa en lo rápido que estás dibujando. Entonces, no cambiamos esos aspectos del trazo cuando corregimos en estas bonitas formas simplemente movemos el trazo en sí y a la forma. Entonces, ese fue un ejemplo rápido de usar la herramienta de diagrama para crear un diagrama de flujo simple pero hay muchos otros casos de uso para la herramienta de diagrama. Se puede utilizar para crear rápidamente un gráfico circular. Simplemente dibuja tu círculo para el pastel. Puedes rectas líneas para bisectar los segmentos de tarta y luego llenarlos apropiadamente. También puedes usar la herramienta de diagrama para esbozar algo así como la pirámide de alimentos y llenar cada nivel con un color diferente que representa el tipo de alimento en ese nivel. Otro ejemplo común de un diagrama es el diagrama de Venn. Puedes usar fácilmente los círculos para crear uno. Crea el primero y luego sostén para que aparezca. Toca con tu otra mano para duplicarlo y luego despliega la final para crear un diagrama de Venn. Por supuesto, podemos utilizar de nuevo la herramienta de relleno para llenar las diferentes áreas que representan los diferentes cuadrantes del diagrama de Venn. La herramienta de diagrama hace que sea realmente fácil diseñar las formas y estructuras básicas de tus ideas. Como hemos visto, hay tres formas básicas que la herramienta de diagrama reconoce. Tienes cuadrados y rectángulos, triángulos y círculos u óvalos. Entonces, las formas que dibujas con la herramienta de diagrama que llamamos formas inteligentes porque hemos agregado mucha funcionalidad para hacerlas mucho más fáciles de trabajar que la tinta normal. Una de las funcionalidades más básicas de las formas
inteligentes es que puedes recogerlas y moverte con la herramienta Cortar. Si colocas una forma inteligente encima de otra forma inteligente existente, se fusionan. Se puede ver la animación que indica esta acción. Entonces, cuando intentes recogerlos de nuevo, recogerán juntos. Una vez que has fusionado dos formas inteligentes, no
puedes separarlas, excepto deshaciendo. Un gran ejemplo de cuando se usan formas combinadas es útil para un Diagrama de Venn. Entonces, dibujas tus dos círculos y luego quieres
mover todo el diagrama para ajustar su diseño en el lienzo. Puedes tocar cualquiera de ellos con la herramienta Cortar y se recogerá todo el diagrama, lo que te permite colocarlo donde quieras. Otra interacción entre las formas inteligentes es lo que llamamos anidarlas. Entonces, digamos que estás tratando de diseñar una interfaz de usuario para un sitio web. Tienes tu ventana básica y luego tienes estos elementos dentro de eso. Estamos anidando estas formas dentro de la ventana principal para que si
quieres ajustar la posición de la ventana misma, las formas dentro de ella se moverán con ella. Entonces, tenemos nuestra ventana principal la cual podemos ajustar el diseño de, pero también podemos mover cada forma anidada individual sin mover las otras. Esto es realmente genial para hacer cosas como diseñar una interfaz de usuario, porque puedes ajustar el posicionamiento de cada uno de los sub elementos sin tener que arruinar lo que ya has creado con algunos de los elementos más importantes de la interfaz de usuario. Cuando se trata de formas inteligentes es importante tener en cuenta que los bordes son el aspecto más importante de la forma inteligente. Si estás usando la herramienta de borrado cerca del borde, ten cuidado porque si te acercas demasiado a ella notarás el flash de la forma inteligente. Eso es una indicación de que la forma inteligente ha sido destruida y ya no puedes
recogerla tocando con la herramienta Cortar o llenarla tocando con la herramienta Rellenar. Por lo tanto, hemos mostrado todas las formas que puedes crear con la herramienta de diagrama. Pero un aspecto importante de comunicar tus ideas visualmente es indicar una relación entre estos aspectos de la idea. Puedes usar conectores para hacer eso realmente fácilmente. En su más básico, simplemente puedes dibujar una línea rápida de una forma a otra y se ajustará a los puntos de ajuste de esa forma. Puedes dejarlo tal como está, o puedes tocar las puntas de flecha azules antes de que
desaparezcan para agregar puntas de flecha y el color de tu tinta en cualquiera de los extremos. Los indicadores de punta de flecha azul se mostrarán automáticamente al dibujar una línea de una forma a otra. Pero también puedes hacerlos aparecer en cualquier línea que crees con una herramienta de diagramación con solo mantenerla presionada al final. Aquí podemos crear una flecha remolinada y hacer que aparezcan
las puntas de flecha con solo mantener pulsado al final. También puedes aprovechar la herramienta de diagrama para crear fácilmente líneas rectas, como un par de ejes para dibujar gráfico. Simplemente dibuja el ángulo recto y mantenga pulsado al final y los ejes se corregirán automáticamente al ángulo recto recto. Esta puede ser una herramienta extremadamente útil para crear rápidamente ejes para un gráfico utilizando la herramienta Relleno para crear los datos.
4. Las herramientas en acción: El proyecto para esta clase es crear un diagrama que muestre un hábito diario. He optado por crear un gráfico circular que indique la proporción de mi ingesta diaria de líquidos. Voy a crear un rectángulo grande para el fondo de mi diagrama. Entonces crearé el círculo para el gráfico circular y lo colocaré apropiadamente en la esquina inferior izquierda. Crearé una caja estrecha grande para el título arriba arriba, y luego en el espacio restante, una caja para la leyenda. Voy a llenar el fondo con un gris claro. Después, usando la herramienta Diagrama, crearé mi título en el cuadro superior. Entonces, porque lo hice un poco demasiado lejos a la izquierda, voy a cortar con la herramienta Cortar y arrastrarla más hacia el centro. De vuelta con la herramienta Diagrama, voy a cortar mi gráfico circular
creando líneas rectas desde el centro hasta el perímetro. Los llenaré de tres colores diferentes apropiadamente. Ahora, voy a crear mi leyenda en el cuadro de la derecha. Creo un cuadrado y luego lo duplico tres veces para que todos sean del mismo tamaño. Puedo usar el recolector de colores aquí para agarrar los colores que utilicé recientemente y llenar las cajas apropiadamente. Entonces, con la herramienta Diagrama, etiquetaré las tres porciones de mis líquidos diarios. Ahí lo tienes.
5. Conclusión: Entonces, lo que hemos hecho hoy es presentarte al papel y cómo moverse por la propia app, pero también tres nuevas herramientas que conforman el pensamiento, diagrama, el relleno y el corte. Incluso me viste usar estas tres herramientas y algunas de las características por las que caminé para crear un diagrama propio. Ahora es tu turno. Crea un diagrama sobre un hábito diario tuyo y compártelo en la galería de proyectos. Realmente estoy deseando ver lo que creas y las ideas que compartes. Nuestro objetivo, lo creemos, es hacer que sea fácil y fluido para que comuniques tus ideas visualmente. Entonces, diviértete con él, y el pensamiento feliz.
Max Liberman, Software Engineer, FiftyThree
