Curso de recursos: como usar o Think Kit

1. Introdução: Oi. Eu sou o Max. Sou engenheiro de software no 53. Hoje, vamos nos concentrar no Think Kit, que é um conjunto de ferramentas que lançamos no Paper voltadas para o pensamento visual estruturado. O Think Kit em seu núcleo é três novas ferramentas, a ferramenta de diagrama, a ferramenta de preenchimento e a ferramenta de corte. O que estamos tentando fazer nesta aula é familiarizá-lo com alguns dos principais recursos do Think Kit, e como você pode realmente usá-los para apresentar suas idéias, obter suas idéias para baixo, torná-las bonitas. Uma das coisas que é ótimo sobre o Think Kit é que, quando você o usa, ele tira a maior parte desse trabalho de suas mãos e permite que você amplie seu kit de ferramentas de pensamento visual, e pense mais sobre como você quer apresentar suas idéias em vez do que o trabalho sujo de realmente fazê-los parecer bonitos. Ao longo desta aula, eu vou estar demonstrando para vocês prós e contras das ferramentas do Think Kit através do meu próprio trabalho, para que vocês possam ver como eu o uso. Esta classe é realmente para qualquer pessoa, seja você um designer móvel usando isso para criar uma interface do usuário para seu novo aplicativo, ou se você está no marketing apenas tentando apimentar a próxima apresentação para seu grande cliente. O projeto para esta classe é criar um diagrama mostrando um hábito diário. Você pode levar este projeto em muitas direções diferentes, seja como você gasta seu tempo livre ou como você começa a trabalhar, mas a principal coisa que queremos que você saia dele é praticar a comunicação visual de suas idéias usando o Ferramentas do Kit de Pensamento. Tudo o que você precisa para esta aula é o seu iPad, a nova versão do Paper, que inclui as ferramentas Think Kit de graça, e uma caneta, se você quiser ou você pode simplesmente usar o dedo. Você pode terminar este projeto em apenas alguns minutos. Você vai ver mais tarde que eu vou fazer exatamente isso. Você pode passar mais tempo no projeto se quiser, mas lembre-se que isso não é sobre conseguir que sua idéia é perfeita, é apenas sobre comunicá-los bem de uma forma visual. Um projeto realmente grande vai comunicar uma idéia simples e claramente usando cores que funcionam bem juntas e formas que não estão muito ocupadas. Não há limite para o número de maneiras que você pode apresentar o que você está pensando, seja um fluxograma, um diagrama de Venn, um gráfico de pirâmide, ou até mesmo apenas um quadrado simples, o importante é que você encontre a estrutura que se encaixa no seu Idéia. 2. O que está na tela?: Quando abre a aplicação pela primeira vez, é colocado na vista inicial. É aqui que você pode ver todos os diários que criou. Você pode optar por dar a eles uma folha de rosto diferente ou alterar seu título. Se você tocar em um diário, você será levado para o que chamamos de visão de borboleta. É aqui que você pode ver todas as páginas da revista e todas as criações que você adicionou a essa revista. Você sempre pode tocar no botão de adição se estiver sem páginas para adicionar uma nova. Você pode usar o botão compartilhar aqui para compartilhar uma ideia para misturar, compartilhar a revista inteira como um PDF ou compartilhar essa página especificamente para qualquer serviço social, serviço de impressão ou apenas o rolo da câmera. Se você decidir que deseja remover uma página de um diário, toque no botão X e exclua essa página. Se você decidir que deseja duplicar uma página e talvez salvar a cópia original, você pode manter pressionado o botão de adição e clicar em duplicar. Para editar uma ideia, basta tocar nela na visualização de borboleta e você será levado para a visualização de tela. Você pode deslizar o dedo para cima a partir da parte inferior da tela para puxar a bandeja e alterar as ferramentas ou a cor. Quando terminar de editar, você pode simplesmente beliscar para retornar à visualização borboleta. Para retornar à vista de casa, basta beliscar novamente. Este é o seu espaço privado onde você guarda todos os seus diários pessoais. Se você deslizar para cima, ele o levará para o espaço público de mixagem. Você pode ver que tem três pilhas. À esquerda, estão todas as ideias que você criou e compartilhou no Mix. Essa pilha do meio leva você ao seu stream, onde você pode ver as criações de todos os usuários que você segue. Se você tocar em um ícone, ele o levará ao cartão de perfil dele e poderá segui-lo se ainda não estiver. Se você estiver usando o Think Kit para colaborar em uma ideia, seguir seus colaboradores é uma ótima maneira de se manter atualizado com as revisões e alterações feitas nesse projeto. A terceira pilha é idéias e criações que você estrelou. Quando você vê uma ideia que você gosta particularmente, você pode estrelá-la e ela aparecerá neste stream para você olhar para trás mais tarde. Neste momento, no fluxo de mixagem, você está vendo uma combinação de ambas as ilustrações e diagramas do Think Kit. Vou começar mostrando a vocês onde o Kit de Pensamento mora dentro do papel. Então, aqui estou eu na minha tela inicial em papel com todos os meus diários, e vou abrir um novo, para mostrar a vocês o Think Kit. Então, Think Kit em seu núcleo é, três novas ferramentas; a ferramenta de diagrama, a ferramenta de preenchimento e a ferramenta de corte. Eles vivem na mesma bandeja de ferramentas que as cinco ferramentas originais, então você pode já estar familiarizado com o que chamamos de kit essencial, as cinco ferramentas originais de papel. Você tem a caneta-tinteiro, o pincel, o marcador, a esferográfica e a aquarela. Você tem um misturador de cores aqui que permite que você planeje bem as cores, ou você pode escolher o seu próprio. Você tem suas paletas onde você pode armazenar cores que você criou no passado. Think Kit, apresentamos três novas ferramentas, a ferramenta de diagrama, a ferramenta de preenchimento e a ferramenta de corte. Esses dois conjuntos de ferramentas funcionam juntos para permitir que você crie uma maneira visualmente atraente de comunicar suas ideias. A ferramenta de diagrama permite criar formas estruturadas agradáveis, sejam elas retangulares, triangulares ou círculos. Você pode pressionar longamente sobre estes para movê-los ao redor se você quiser reposicioná-los. Outra coisa que você pode fazer com a ferramenta de diagrama é criar setas. Digamos que queremos fazer um fluxograma através destas três formas. É muito fácil de fazer com a ferramenta de diagrama. A ferramenta de preenchimento tem alguns aspectos diferentes. Primeiro, ele permite que você preencha rapidamente essas formas inteligentes que você criou. Qualquer coisa que tenha sido corrigida pela ferramenta de diagrama pode ser facilmente preenchida com apenas um clique. Ele também permite que você crie formas mais abstratas na mesma camada de fundo em que o preenchimento inteligente acontece. Com a ferramenta de corte, você pode reposicionar rapidamente formas inteligentes ou cortar áreas maiores da tela e movê-las. Tenho certeza de que você já está começando a pensar em como você pode usar essas ferramentas para criar diagramas, wireframes e fluxogramas. Agora vou dar um exemplo de como usei o Think Kit no passado, vou até aqui para o meu fluxo de mixagem, e vocês podem ver algumas das idéias que criei, esta é uma que eu criei para a equipe da Comunidade do 53 para se comunicar um dos aspectos mais confusos do Think Kit. Fazer isso com ferramentas Think Kit foi bastante simples. Como você pode ver, as únicas formas aqui são realmente retângulos e quadrados, e esses são super rápidos e fáceis de fazer com a ferramenta de diagrama. Depois disso, era apenas uma questão de usar a ferramenta de corte para posicioná-los como eu queria, e então a ferramenta de preenchimento para adicionar cor a ele. Essa foi uma maneira muito rápida e fácil para a equipe da comunidade e eu comunicarmos essa ideia relativamente complexa sobre alguns dos recursos do Think Kit. Aqui está um exemplo de como um usuário usou o Think Kit para apresentar uma ideia um pouco menos séria. Vemos água quente, café moído e pressão, e como eles interagem para fazer café, café expresso ou apenas vapor. Este diagrama é composto de alguns aspectos realmente básicos que são fáceis de fazer com ferramentas Think Kit. Basta criar um círculo, cortá-lo e colá-lo e, em seguida, preencher as áreas com a cor que você quiser. Em seguida, você pode simplesmente usar a ferramenta de diagrama para criar setas para qualquer área que você deseja chamar e adicionar rótulos e texto. Nesse caso, o projeto era mais um wireframe de interface do usuário. Criar um design como este com o Think Kit torna fácil e rápido colocar suas ideias no papel. Se você cometer um erro, é muito fácil de consertar. Você pode simplesmente pegar a forma e ajustar o layout, ou simplesmente preenchê-lo com uma cor diferente com a ferramenta de preenchimento. Esta é uma parte muito importante do processo de design, é não ter que se preocupar em cometer erros e ter que voltar e apagar ou refazer cuidadosamente o que você fez. Aqui está um exemplo de um fluxograma que foi feito com o Think Kit. Você pode ver que foi muito fácil de fazer. Basta fazer um retângulo com a ferramenta de diagrama e usar o corte para copiá-lo e colá-lo ao redor da tela. A ferramenta de diagrama pode ser usada para criar facilmente setas de caixa a caixa para orientar o olho ao longo de um fluxograma e, em seguida, a ferramenta de preenchimento pode adicionar cor. Depois de cortar e colar as caixas ao redor da tela, é muito fácil adicionar as setas para guiar os olhos dos usuários. Basta desenhar uma linha de uma caixa para outra com a ferramenta de diagrama e a linha irá corrigir automaticamente e encaixar para que não se sobreponha a nenhuma das caixas. Adicionar uma ponta de seta é tão fácil quanto tocar na ponta da seta. Então, essa é uma introdução às ferramentas do Think Kit, e como elas têm sido usadas até agora. No próximo vídeo, vamos entrar em mais detalhes sobre como essas ferramentas podem ser usadas. 3. Principais características: Então, vamos começar com uma ferramenta de diagrama. Uma das coisas mais fáceis que você pode fazer com uma ferramenta de diagrama é fazer um fluxograma muito rápido. Então, você pode começar apenas deixando alguns retângulos, que são, naturalmente, corrigidos automaticamente para serem quadrados e retângulos agradáveis. Podemos adicionar alguns círculos e triângulos, mais alguns quadrados. Em seguida, use a ferramenta de diagrama para criar o fluxo real através do gráfico. Basta desenhar uma linha rapidamente de uma para a outra e, em seguida, tocar para criar uma ponta de seta. Podemos fazer isso em todo o diagrama para indicar o fluxo de forma em forma e cobra em torno de todo o diagrama. Então, agora temos nosso fluxograma e podemos usar a ferramenta de preenchimento para adicionar um pouco de cor. Então, basta selecionar a ferramenta de preenchimento e tocar no interior de qualquer forma inteligente e ele irá preencher toda a forma com essa cor. Claro, uma parte importante dos diagramas são rótulos. Então, você pode usar a ferramenta de diagrama para criar facilmente caligrafia que não será reconhecida como formas. Esta é uma boa maneira de adicionar rapidamente algumas informações a um gráfico ou a um fluxograma. Se você quiser, você pode usar algumas das ferramentas originais do kit essencial para um visual ligeiramente diferente em suas etiquetas manuscritas. A ferramenta Cortar pode ser usada de várias maneiras diferentes. Se você quiser reposicionar o gráfico inteiro, você pode simplesmente desenhar um laço em torno da coisa inteira e movê-lo para baixo em direção ao centro da tela. Ou, se você quiser simplesmente ajustar o layout de um único elemento, você pode tocar no formato inteligente para colocá-lo para cima e colocá-lo de volta para baixo na tela. Você notará neste fluxograma que, embora tenhamos corrigido as formas para serem belos retângulos quadrados, círculos e triângulos, deixamos a tinta parecer bem orgânica. A largura do traçado, assim como algumas de nossas outras ferramentas no kit essencial, é baseada na rapidez com que você está desenhando. Então, nós não mudamos esses aspectos do traço quando corrigimos essas formas agradáveis nós apenas movemos o traçado em si e para a forma. Então, esse foi um exemplo rápido de usar a ferramenta de diagrama para criar um fluxograma simples, mas há muitos outros casos de uso para a ferramenta de diagrama. Você pode usá-lo para criar rapidamente um gráfico de pizza. Desenhe seu círculo para a torta. Você pode endireitar linhas para bisectar os segmentos de pizza e, em seguida, preenchê-los adequadamente. Você também pode usar a ferramenta de diagrama para esboçar algo como a pirâmide de alimentos e preencher cada nível com uma cor diferente que representa o tipo de alimento nesse nível. Outro exemplo comum de um diagrama é o diagrama de Venn. Você pode facilmente usar os círculos para criar um. Crie o primeiro e, em seguida, mantenha pressionado para pop-up. Toque com a outra mão para duplicá-lo e, em seguida, solte a final para criar um diagrama de Venn. Claro, podemos usar a ferramenta de preenchimento novamente para preencher as diferentes áreas que representam os diferentes quadrantes do diagrama de Venn. A ferramenta de diagrama torna realmente fácil para definir as formas e estruturas básicas de suas idéias. Como vimos, há três formas básicas que a ferramenta de diagrama reconhece. Você tem quadrados e retângulos, triângulos e círculos ou ovais. Então, as formas que você desenha com a ferramenta de diagrama chamamos de formas inteligentes porque adicionamos muita funcionalidade para torná-las muito mais fáceis de trabalhar do que a tinta normal. Uma das funcionalidades mais básicas de formas inteligentes é que você pode pegá-las e mover-se com a ferramenta Cortar. Se você colocar uma forma inteligente em cima de outra forma inteligente existente, elas se mesclam. Você pode ver a animação que indica essa ação. Então, quando tentar pegá-los de novo, eles serão apanhados juntos. Depois de mesclar duas formas inteligentes, você não pode separá-las, exceto desfazendo. Um ótimo exemplo de quando usar formas mescladas é útil é para um Diagrama de Venn. Então, você desenha seus dois círculos e, em seguida, você deseja mover o diagrama inteiro para ajustar seu layout na tela de desenho. Você pode tocar em qualquer um deles com a ferramenta Cortar e todo o diagrama será retirado, permitindo que você o coloque onde quiser. Outra interação entre formas inteligentes é o que chamamos de aninhá-los. Então, digamos que você está tentando criar uma interface do usuário para um site. Você tem sua janela básica e, em seguida, você tem esses elementos dentro disso. Estamos aninhando essas formas dentro da janela principal para que, se você quiser ajustar a posição da própria janela, as formas dentro dela serão movidas com ela. Então, temos nossa janela principal que podemos ajustar o layout de, mas também podemos mover cada forma aninhada individual sem mover os outros. Isso é realmente ótimo para fazer coisas como projetar uma interface do usuário, porque você pode ajustar o posicionamento de cada um dos subelementos sem ter que arruinar o que você já criou com alguns dos elementos mais importantes da interface do usuário. Quando você está lidando com formas inteligentes, é importante ter em mente que as bordas são o aspecto mais importante da forma inteligente. Se você estiver usando a ferramenta Apagar perto da borda, tenha cuidado porque se você chegar muito perto dela, você notará o flash de forma inteligente. Isso é uma indicação de que a forma inteligente foi destruída e você não pode mais pegá-la tocando nela com a ferramenta Cortar ou preenchê-la tocando nela com a ferramenta Preenchimento. Então, mostramos todas as formas que você pode criar com a ferramenta de diagrama. Mas um aspecto importante de comunicar suas idéias visualmente é indicar uma relação entre esses aspectos da idéia. Você pode usar conectores para fazer isso facilmente. No seu mais básico, você pode simplesmente desenhar uma linha rápida de uma forma para outra e ela se encaixará nos pontos de encaixe nessa forma. Você pode deixá-lo como está, ou você pode tocar nas pontas de seta azuis antes que eles desapareçam para adicionar pontas de seta e a cor de sua tinta em qualquer extremidade. Os indicadores de ponta de seta azul aparecerão automaticamente quando você desenhar uma linha de uma forma para outra. Mas você também pode fazê-los aparecer em qualquer linha que você criar com uma ferramenta de diagramação apenas pressionando-a no final. Aqui podemos criar uma seta giratória e fazer com que as pontas de seta apareçam apenas segurando no final. Você também pode aproveitar a ferramenta de diagrama para criar facilmente linhas retas, como um par de eixos para desenhar gráfico. Basta desenhar o ângulo direito e manter pressionado no final e os eixos serão automaticamente corrigidos para o ângulo reto reto. Esta pode ser uma ferramenta extremamente útil para criar rapidamente eixos para um gráfico usando a ferramenta Preenchimento para criar os dados. 4. As ferramentas em ação: O projeto para esta classe é criar um diagrama mostrando um hábito diário. Eu escolhi criar um gráfico de pizza que indica a proporção da minha ingestão diária de líquidos. Vou criar um retângulo grande para o fundo do meu diagrama. Em seguida, criarei o círculo para o gráfico de pizza e o posicionarei apropriadamente no canto inferior esquerdo. Vou criar uma grande caixa estreita para o título no topo e, em seguida, no espaço restante, uma caixa para a lenda. Vou preencher o fundo com um cinza claro. Em seguida, usando a ferramenta Diagrama, criarei meu título na caixa superior. Então, como eu fui um pouco longe demais para a esquerda, eu vou cortá-la com a ferramenta Cortar e arrastá-la mais para o meio. Voltando com a ferramenta Diagrama, vou cortar meu gráfico de pizza criando linhas retas do centro ao perímetro. Vou preenchê-los com três cores diferentes apropriadamente. Agora, vou criar a minha lenda na caixa da direita. Eu crio um quadrado e, em seguida, duplicá-lo três vezes para que eles sejam todos do mesmo tamanho. Posso usar o seletor de cores aqui para pegar as cores que usei recentemente e preencher as caixas apropriadamente. Então, com a ferramenta Diagrama, vou rotular as três porções dos meus líquidos diários. Aí está você. 5. CONCLUSÃO: Então, o que fizemos hoje foi introduzir papel e como contornar o próprio aplicativo, mas também três novas ferramentas que compõem o pensamento, o diagrama, o preenchimento e o corte. Você até me viu usar essas três ferramentas e alguns dos recursos que passei para criar um diagrama meu próprio. Agora é a sua vez. Crie um diagrama sobre um hábito diário seu e compartilhe-o na galeria do projeto. Estou ansioso para ver o que você cria e as ideias que você compartilha. Nosso objetivo, pensamos que é facilitar e fluir para você comunicar suas ideias visualmente. Então, divirta-se com ele, e pensando feliz.