Whimsical — fluxogramas e wireframes | Rye Crowen | Skillshare
Menu
Pesquisar

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Whimsical — fluxogramas e wireframes

teacher avatar Rye Crowen, Designer/Developer

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

    • 1.

      Introdução

      0:21

    • 2.

      Introdução surante

      1:22

    • 3.

      Fluxograma (FC) começando

      0:35

    • 4.

      FC - ferramenta e barra de ferramenta - forma

      1:12

    • 5.

      FC: Shape Tool e barra de ferramenta

      1:09

    • 6.

      FC - conectores e formas

      1:43

    • 7.

      FC - adicione conector

      2:37

    • 8.

      FC - adicione texto

      1:42

    • 9.

      FC - adicionar ícone

      2:32

    • 10.

      FC - upload de imagem

      0:44

    • 11.

      FC - adicione link e comentário

      2:23

    • 12.

      FC - fechamento

      0:31

    • 13.

      FC - Desafio VUI

      6:06

    • 14.

      Wireframe (aka (aka - Introdução - introdução

      1:17

    • 15.

      WF - adicionar elemento

      2:08

    • 16.

      WF - adicione conectores e adicione texto

      2:12

    • 17.

      WF - adicionar ícones

      2:28

    • 18.

      WF - adicionar link

      1:20

    • 19.

      WF - upload da imagem

      1:26

    • 20.

      WF - compartilhar

      0:38

    • 21.

      WF - Desafio #2

      0:31

    • 22.

      Fim

      0:08

  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

220

Estudantes

--

Sobre este curso

Whimsical é uma ferramenta de colaboração relativamente novo que permite criar fluxos rápidos e fluxogramas e wireframes. Think assim semelhante ao Google docs, em que vários usuários podem ser no mesmo tela que trabalham na mesma tela. Bonito! Não existem requisitos para o curso e and tem um camada gratuito para até quatro placas. Ao longo do curso, tenho alguns desafios para você trabalhar. Então, compartilhe a mim no aprender para criar flowcharts e wireframes com Whimsical.

Conheça seu professor

Teacher Profile Image

Rye Crowen

Designer/Developer

Professor

Hello, my name is Rye Crowen. Professionally, I'm a user experience designer/researcher for a large consultancy. Outside of work I follow a variety of creative passions. Do the verb, forget the noun!

Visualizar o perfil completo

Habilidades relacionadas

Design Design de UI/UX Wireframing
Level: Beginner

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui aulas curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Introdução: Olá. Meu nome está certo. Bem desenhado. Fazendo ferramentas. Neste primeiro ano você está falando sobre software físico e online. Essa última colaboração. Quadros de arame, proximidade do local de outros recursos futuros. Simples. E acho que vais adorar, por isso vamos entrar. 2. Introdução surante: Vamos começar fazendo login. Você não tem nenhum contador pronto. Você pode dizer isso, mas eu já criei um. Então eu vou assinar. E o que vemos pela primeira vez é nossa página de destino aqui, onde estamos na pasta Exemplos atualmente, onde recebemos três exemplos que poderíamos analisar. Vamos ver isso em um segundo aqui, mas você clicou no “plus”. Você também pode criar outra pasta onde você pode realmente armazenar suas pastas dentro dela para iniciar uma nova pasta. Temos duas opções atualmente, que é um fluxograma e o quadro de arame que temos para as próximas placas que as notas pegajosas e o mapa mental. Temos quatro placas gratuitas que podemos criar com esta versão gratuita. Os exemplos não contam como aqueles gratuitos, então ainda podemos criar mais quatro. Se você realmente entrar em um desses exemplos, você pode olhar dentro dele e você pode ver que ele tem sido realmente bastante preenchido com realmente algumas coisas que nós vamos construir. Mas você pode se mover por aqui e você pode realmente fazer essas coisas ao redor, e você pode realmente mudar o texto lá placas totalmente credíveis, o que é muito legal. E depois para sair disto, basta ir para o canto esquerdo. Clique em exemplos e isso o levará de volta a esta página aqui. Então vamos começar. Vamos começar com a criação primeiro de um fluxograma e, em seguida, o próximo vai passar para a criação de um quadro de arame. 3. Fluxograma (FC) começando: Então, para criar um novo quadro, selecionamos qual queremos criar. Nesse caso, quero criar um fluxograma. Então, selecione esse. E aqui eu sou apresentado com uma tela em branco e logo fora do bastão, eu posso realmente em seu nome. Vamos chamar este, uh, uh, sanduíche. Verá por que, em um segundo, chamei um sanduíche, mas depois cliquei em “Voltar “e isso criou à esquerda. Temos a nossa barra de ferramentas. Vamos olhar para todas essas diferentes peças individuais enquanto criamos nosso fluxograma de sanduíche. 4. FC - ferramenta e barra de ferramenta - forma: começar com a ferramenta de forma, e essa é a opção superior na barra de ferramentas. É também atalho de teclado s para a forma do anúncio. Clique nisso. Você vê que temos uma variedade de formas. Na verdade, estes eram símbolos de fluxograma. E se você fizer uma pesquisa no Google por símbolos de fluxograma, você pode ver qual é o nome de cada um deles e qual é o propósito de cada um. Neste caso, vamos começar com esta pílula em forma de um, que na verdade é chamado de terminação, que às vezes está no final do início de um fluxograma. Então, se eu clicar sobre isso e eu poderia deixar isso no meu campus, você verá que tem um monte de opções. Entramos nisso em um segundo, mas se eu me afastar disso, você pode ver isso agora. Un selecionou isso. Mas eu também posso clicar nele para selecionar novamente. Então eu poderia movê-lo e posicionar o que eu quiser. Além disso, quando ele selecionado, tivemos a opção de re dimensionar sua Se eu segurar o deslocamento e mover essas alças em torno de redimensioná-lo restrito, mas eu também não posso mudar eu posso moldar o tamanho de. No entanto, eu gostaria. Por isso, vou deixar isto por enquanto. Então vamos falar sobre o que todas as diferentes opções estão na barra de ferramentas acima dela. 5. FC: Shape Tool e barra de ferramenta: Assim, as duas farpas de nos permite Teoh adicionar texto à nossa forma. Também podemos alterar a forma para que você possa selecionar uma das outras formas que temos também podemos adicionar cor a ele. Então digamos que eu quero torná-lo amarelo, por exemplo, podemos escolher ter uma cor de preenchimento para tê-lo com delineado também ter um tracejado a capacidade duplicado para adicionar um comentário E então poderíamos apenas insultar como essa forma lá. Então é meio que se movendo aqui para baixo, cuspir SMS que. Vou chamar isto de um começo já que este é o início do meu fluxograma. Uma vez que eu entrei no modo de texto, você poderia ver que há editor de texto me permite mudar o tamanho do texto. Eu também posso fazer um talaq tigela ligar e desligar aqueles para que você possa ver que eu tenho um certo opções e aqui também, como o meu Lyman é e também como o alinhamento é do alinhamento horizontal e os linhas verticais. Então agora que eu tenho, uh, que rápido fora que para un selecioná-lo 6. FC - conectores e formas: uma coisa que eu realmente gosto sobre caprichoso e torna também muito rápido. É essa ideia do que vou chamar de conectores automáticos. Mas ele está realmente apenas gerando uma conexão rápida com uma nova forma. Vai fazer uma duplicata da forma que já comecei neste caso. Eu tinha uma pílula amarela e tendo mais um desses você pode ver que vai criar outro desses. Clique nisso e instantaneamente eu tenho outro. E este eu poderia ter uma mensagem se eu quisesse. Claro, eu poderia mudar a forma, a cor e tudo o que vamos fazer em um segundo aqui. próxima parte vai mostrar que uma vez que temos estes selecionados, eu posso realmente fazer este problema. Faça auto para criar um garfo fora das minhas formas aqui. Então eu clico nisso. E agora eu realmente tenho que, neste caso, para pontos de partida. Vou ligar para a 2ª 1 All Stars é o meu ponto de partida alternativo. Isso é realmente relevante para o que estamos fazendo atualmente, mas vamos chamar dois pontos de partida diferentes, no entanto. Então eu dou este pequeno espaço aqui. Você pode ver que mover estes em torno destes foram continuamente ligados às formas de suas formas. Uma vez que criamos esses conectores, então uma posição que sobre sua forma realmente não precisa de outra dessas formas. Na verdade, vou transformar este em outro jovem e talvez torná-lo verde transformar isso em um diamante, que também é chamado de decisão, e eu poderia segurar o turno, e eu posso redimensionar isso um pouco maior, e eu vou meio que centralizar isso aqui, na verdade, texto de pessoa nisso. Vou chamar este de fome. Então agora temos que tomar uma decisão aqui. Então você vem para começar com este aqui. A primeira pergunta que estamos fazendo é, você está com fome? De selecionar isso? 7. FC - adicione conector: Quero criar duas novas formas. Eu estou realmente adicionar dois retângulos, então eu também poderia fazer caminhão teclado que estão neste caso. Eu só vou selecionar isso quando eu vou deixar cair um aparecer e vou ligar para este, fazer o almoço Agora, eu também poderia optar por duplicar este aqui mesmo para que eu pudesse apenas duplicar isso assim . Você também pode, se ele for selecionado, você pode ver que você pode dizer que você pode ouvir que você não pode fazer tudo e arrastou seu Dê-nos uma pequena dica lá. Por que, no entanto, sobre isso. Então, se eu fosse clicar em tudo isso para baixo deveria e então eu arrasto isso para baixo. Este caso eu estou segurando turnos que o arrastam direto para baixo. Então essa é a outra maneira de criar isso também. Então vou apagar este que eu tinha feito aqui, e vou chamar este, ir dar uma volta. Aqui estão as minhas opções. E a próxima coisa que eu faço é que eu estava mostrando como nós superamos um desses você pode ver que nós temos esses conectores, mas este garoto na verdade não tem esses criados aqui, então na verdade adicione alguns deles para que a próxima vez que eu vou olhar chamado conector de anúncio ou atalhos de teclado. Vês? Clique nisso. E o que eu posso fazer é clicar na forma que eu quero. E então eu poderia apenas arrastar até a outra forma. Quero me conectar automaticamente. Eu sou capaz de adicionar algum texto neste lugar. Vou acrescentar. Sim, estou com fome. Portanto, vou fazer o almoço. Além disso, quando você faz um conector, você pode cobri-los. Então eles dizem, eu quero fazer isso no verde. Você poderia fazer dele uma linha de traço. Ainda classifique algumas das opções que você poderia fazer bem e o lugar diferente de onde a seta está. Então você pode ter isso na frente, um, contra o também. Nós também podemos ter criar cotovelos e estes fazer formas diferentes tipo que temos aqui já e novamente. Temos também duplicação e adição de um comum a isso. Falaremos sobre os comentários um pouco mais tarde. Então fenoms Gandhi selecionar que agora eu também quero criar conector entre esta opção. Minha nenhuma opção agora algo para também, você também pode fazer em vez de realmente ir sobre e usando a ferramenta conector de anúncio é se a forma está perto de um deles. Se você apenas clicar em cima disso, eu clicar sobre isso. Vai fazer uma conexão com a forma mais próxima. Neste caso, ele clicou e fez uma conexão bem ali. Então, isso foi ótimo. Agora, se eu quiser adicionar texto, você pode ver aquele pop-up distante automaticamente. Então, se eu apenas clicar duas vezes sobre ele às vezes não funciona imediatamente. Mas eu tenho que entrar lá e clicar duas vezes nele. E lá vamos nós. Aí está a minha mensagem. Esta é a minha opção não e dormi nas gangues. Quero cobrir esta. Chama-se Espalhar e não há espaço apropriadamente. Então agora eu tenho a opção. Se estou com fome, sim, que eu faça o almoço. Se eu não estiver, então eu vou dar uma volta. 8. FC - adicione texto: Então eu vou rolar um pouco aqui e para o de um laptop mashup no meu colo na pista. Só estou usando dois dedos que me permitem marcar no campus. Na verdade, vou adicionar outra forma. Vou acrescentar outra decisão. Tempo e eu poderia ter copiado, uh, duplicado o faminto neste caso, eu decidi apenas cair fazendo lá dentro. E vou fazer do sanduíche uma opção para tomar uma decisão. Agora. Sabe, esposa deu um nome a essa tela. Quero dizer, um sanduíche esportivo. Neste caso novamente, eu faria um conector em algum lugar aqui. Eu poderia fazer um conector para aquele clique fora ruim. Se eu clicar duas vezes sobre isso, então vamos ver. Sim, isso é o que eu gostaria de uma opção de sanduíche. Vamos cobrir este. Vamos fazer esta laranja para o nosso salmão. Então outra coisa que Teoh falou sobre adicionar era a ferramenta de texto. Então adicione o atalho de teclado de texto t Então selecione em que um. Este caso eu posso deixar isso para baixo e dizer, talvez isto seja um bilhete para mim mesmo. Deve incluir uma lista de sanduíches. Então isso é apenas algo que nota para mim mesmo se você menospreza. A pele que você vê aqui à direita, nós tivemos essa mãozinha como e arrastar por aí. Isto permite-me, portanto, transformar isto num parágrafo onde eu poderia ter várias linhas de texto. Vou centralizar estes. Eu poderia fazer um pouco menor, talvez até fazer um pouco. Isso é provavelmente bom. E então eu deslizo para cima. Então talvez isto seja uma nota para mim que durante o tipo de sanduíches não listado, e isso é algo que eu poderia pensar. 9. FC - adicionar ícone: os próximos dois que vamos olhar é adicionar Ícone. Acho esta ferramenta ótima. Eu usei quando um monte quando estou fazendo fluxogramas. Este caso é o atalho de teclado X. Então, clique nisso. E nisso há uma tonelada de ícones que podemos usar que estão incluídos com caprichosos, e eu poderia procurar ícones. Vamos primeiro começar a ir para animais na natureza e você pode ver que claramente eu tenho a opção, que é o multi cores que você pode ver lá são coloridos. Eu também posso ter apenas um Phil sólido, ou ele também pode ter uma versão leão disso. Então vamos voltar para a multi cor e eu gosto deste caranguejo aqui. Então, vamos clicar nisso. E então eu dou meu movimento aqui. Eu cliquei para soltá-lo bem ali. E, claro, novamente você também pode, em seguida, redimensionar é para qualquer tamanho que eu gostaria. E você também tem esses outros conectores, assim como fizemos em nossa forma. Então, nós também podemos criar isso neste caso, parece que alguém deve se conectar à minha imagem, mas eu vou apenas dizer que estávamos lá a qualquer momento. Você também pode ir e decidir que você quer mudar que tipo de cor e você tem. Então você quer apenas preencher o leão Subjetivo, multicolorido. Você também pode girá-lo. Você também pode ter nenhuma cor. Então eu poderia mudá-lo para, tipo, uma sensação sólida como essa. Por exemplo, obter um comando Z e voltar para a minha multi cor como este com as cores diferentes nele. Nós também podemos mudar, ou eu conservo indo aqui e ver se podemos entrar lá. E talvez quiséssemos algo diferente. Então, mas eu vou ficar com o caranguejo por enquanto. Assim do que eu. Un Selecione que no ícone de anúncio, você também pode procurar algo, bem como eu tinha mencionado. Então, se eu entrar aqui e eu quiser procurar por sanduíche e ver o que eles têm aqui. Então, enquanto eu começo a digitar, você vê, nós já temos algumas opções. Este caso eu quero eu gosto deste, mas eu vou querer apenas um pouco disso. Então clique nisso e então eu vou deixar isso aqui em algum lugar. Então este caso eu quero ser de cor diferente já que é o sanduíche vegetariano. Vamos fazer o saco verde perfeito. Simplesmente assim. Mas talvez isto seja um caranguejo e vegetais. Então lá vamos nós. Agora sanduíche de caranguejo e vegetariano. Neste caso, vou adicionar um conector a ele. Então sanduíche espero que façamos isso como um texto para. Então eu vou deslizar isso. Vamos deixar o caranguejo passar. E eu estava, tipo, este ano para colocar Sim. Então, grande almoço? Sim. Sanduíche. Sim. Vou querer um sanduíche de caranguejo e vegetariano. Parece ótimo. 10. FC - upload de imagem: próxima ferramenta que vou mostrar a vocês é o atalho de teclado de imagem de upload. I Isso me permite fazer upload de uma imagem. Neste caso, eu tenho um dos meus desktop bem aqui este delicioso sanduíche vegetariano vegetariano. Então é clicar em abrir que isso também tem a alça. Então, se eu manter pressionado o deslocamento, eu posso então arrastar isso para redimensioná-lo. Vamos fazer um pouco menor. Esta opção aqui realmente me permite ter um quadro ou nenhum amigo. Então eu poderia ter uma pequena fronteira em torno dele ou não. Eu só vou manter um pouco de fronteira, e eu vou deslizar isso para cima aqui. Então eu vou rolar um pouco para mostrar isso, e assim eu posso lembrar que tipo de sanduíche delicioso eu vou jantar aqui. 11. FC - adicione link e comentário: então a ferramenta final na barra de ferramentas é teátrica. Pense atalho de palavra-chave K Clique nisso. Isso realmente nos permite adicionar um link externo ao nosso fluxograma. Muito que você poderia abrir nova guia. Vou procurar este contrato fiscal de Xhaka. E Santa Cruz é um ótimo lugar de sanduíches. Aqui vamos nós. Para que eu só vou selecionar o seu doente indo para depois copiar isso, voltar para o meu Salinger e então eu vou apenas colar isso aqui. Opa, eu queria colar. Aqui vamos nós e adicionamos. Então, primeiro, deixa cair um pequeno símbolo aqui. Eu posso fazer isso. Fora do caminho. Lá você pode ver que temos. Este é o sabor Khan do site para que tenhamos aquele pequeno símbolo. E se nós clicarmos nisso, claro, o que vai acontecer é que ele vai lançar o site assim mesmo. Isso é muito legal. Também nesta opção, se eu voltar a isso quando eu clicar na parte de sabor com, clicamos na câmera. Nós realmente temos a opção de ter o polegar agora, que temos agora você tem a cabeça de desktop, que coloca apenas uma parte da página lá dentro. Também podemos selecionar para ter a página inteira, que neste caso é bastante longa. Então, se eu diminuir um pouco de slide porque isso é toda a diferença, todo o menu, esta é a página inteira. Eu estava lá, e maneira também pode ter a opção das versões móveis de que ou remover o instantâneo, Eu acho que a menos que você vai polegar agora versão, que é outra opção, que é uma versão um pouco menor do o site. Apenas isso é uma espécie de versão pequena dos sites tinha, Então eu gosto que dá um pequeno instantâneo rápido dele, e eu acho que é tipo de perfeito lá. Também podemos duplicar isso e também comentar como outras partes que vimos. Então, neste caso, na verdade, vamos adicionar um comentário que isso permite a você. Veja, este é o primeiro comentário na página. Há um número um que vai dizer ótimo lugar para comer e é realmente que bater, enviar E lá vamos nós Agora eu adicionei um comentário a isso. Então, quem também faz parte deste tabuleiro que também faz parte e caprichoso. Eles também podem ver esses comentários que eles estavam para clicar sobre ele. Eles podem ver que eles também podem responder que eles poderiam dizer que, Sim, eles estiveram lá, e foi um ótimo lugar de fato. 12. FC - fechamento: Ótimo. Bem, isso encerra a barra de ferramentas esquerda. Como você pode ver, há muitas opções que poderíamos fazer quando estamos construindo são fluxogramas para sair deste fluxograma. Nós vamos para a esquerda, um pequeno menu aqui nós clicamos sobre isso, e então nós podemos apenas voltar para exemplos, e nós também podemos mudar para diferentes placas de no meu ter até mesmo criar um novo fluxograma ou criar um novo quadro de arame de fogo. Este caso, eu sou apenas rápido, volta e segundos. Volte para a minha página de destino aqui. Lembre-se de chamar isso de seu painel onde eu poderia ver todos os exemplos diferentes que eu tenho. 13. FC - Desafio VUI: Olha, ele diz que é hora de um desafio. E este desafio é criar uma interface de usuário de voz para qualquer tipo de dispositivo que você possa ter ou você pode simplesmente escolher um eu realmente ter Alexis. Então eu vou dar um exemplo rápido de criar um para isso. Vamos fazer isso, é claro, claro, usando um fluxograma, já que é isso que estamos trabalhando agora. Então eu vou clicar no novo fluxograma para abrir uma tela em branco, e essa habilidade em particular que eu vou criar vai chamar Ricky. E esta vai ser uma habilidade que me permite reservar um Ricky auto. Então, quando o pequeno tipo de três carros do mundo para me pegar e me levar para algum lugar na cidade lá, então é uma espécie de versão uber de um outro riquixá. Então vamos começar, e você meio que vê o que quero dizer, e eu vou fazer você criar sua própria habilidade. Não tem de ser o que estou a fazer. Mas eu pensei que pelo menos nós teríamos um ponto de partida lá, então eu vou começar com ir para um retângulo aqui, e isso vai ser apenas como eu invocar a habilidade Alexa você também pode, quando você criar para criar usuário de voz interfaces, quando você usa algo como Alexa para invocar, e você poderia simplesmente invocá-lo com um tempo, com ou sem um pedido, neste caso, eu só vou tê-lo sem um pedido. Então você simplesmente abriu a balança primeiro, e então você pode fazer o seu pedido. Então vamos chamar este, Alexa, uh, rasga, Rick. E lá vamos nós, é claro, pode haemas opções. Então a primeira opção vai ter é a localização que eu gostaria de ir. Assim que eu abri isso de volta e então dizer que a localização é 100 Main Street e que é em qualquer cidade , Califórnia, ele vai para lá. Então, neste caso, eu também vou um pouco mais longe aqui, e eu vou deixar um desses aqui, anúncios em texto. Então vamos chamar essa entrada de um usuário. Então isso é algo que o usuário está dizendo. Vou colorir estes lidos. Há uma boa leitura para isso. Vou encolher isso um pouco. Na verdade, vou copiar este. Chamo isso de Alexa Output Isso é algo que Alexis diria de volta e vamos cobrir esse. Vamos fazer estes amarelos. Então eu vou arrastar segurando Ault e mudar para fazer uma cópia e restrição indo direto para baixo. E eu chamo isso de lógica do sistema diz que é algo que acontece em segundo plano. Vamos fazer com que estes azuis realmente vão selecionar todos estes. Vou comer todos estes contornos. Lá vamos nós. Economia é que você pode ver que eu posso mudar algumas dessas opções selecionando várias coisas de cada vez e, em seguida, fazer minha seleção lá. Então este caso, na verdade, ambos ou algo que eu costumo ser e colocar algo de cor tanto estes vermelhos e ambos os contornos que lá vamos nós. A próxima coisa que eu quero adicionar é a opção de dizer que eu não disse um pedido imediatamente, então Alexa realmente me perguntaria qual local eu quero. Então eu vou clicar e arrastar isso aqui para baixo. E então esta é Alexis diria que ela saberia que horas eram nos dias em que ela neste caso, é bom dia, e onde você gostaria de ir? Isso, claro, é claro,vai ser olhares para fora, mas então coloque isso lá, e então esse garoto vai conectá-la a isso Um pouco mais de espaço e ainda nenhum clique nisso . É um truque. Então eu tinha que pegar o direito. Lá vamos nós. Clique duas vezes com o botão direito para começar o texto. Então esse garoto ia colocar o usuário não especifica a localização imediatamente para que isso aconteça. E já que fui especificado o local de incêndio, neste caso , Alexis vai perguntar onde eu quero ir. Então eu vou copiar este aqui, tudo em turnos. Deslize por cima deste. Vou dizer o que está acontecendo em segundo plano. Então verifique se o Ricky está disponível contra o Ricky ou os riquixás automáticos. Então, neste caso, este que ela vai ser azul, vou ligar desta forma. Na verdade, lá vamos nós. Então, neste caso, é aqui que no fundo, a habilidade é verificar se há Ricky disponível. Portanto, flexibilidade para responder com que horas eu poderia ser pego, por exemplo. Então eu não vou muito longe nisso. Só quero dar-te uma ideia básica. Você pode, obviamente, levar isso muito longe. E eu estou animado para ver o que diferente, uh, e escola Alexis você inventou ou poderia ser Google home. Pode ser a Siri no iPhone. Pode até ser um brinquedo que usa voz. Não importa o que você escolher, apenas a idéia de que você está fazendo uma interface de usuário de voz usando um fluxograma para mostrar as muitas opções que o usuário pode ser apresentado com Grande obrigado. 14. Wireframe (aka (aka - Introdução - introdução: Em seguida, vamos olhar para a criação de um novo quadro de arame. Então clique aqui e esta chamada Twitter porque é isso que eu vou reconstruir . Aqui está o exemplo. A primeira coisa que vamos olhar é adicionar quadro. Então, vamos pular o Adam. Vamos por agora ir para a direita para baixo para adicionar desgastamento, que é atalho de teclado f Clique nisso. Veja, nós temos uma variedade de quadros diferentes que poderíamos adicionar. Eu sou o ideal para a janela. Então eu vou estar fazendo a versão desktop dele. Então eu só deixo isso lá em baixo e lá nós temos. Nossa moldura. Também podemos clicar duas vezes sobre isso. Se quisermos mudá-lo, vamos dizer que chamo isso de principal e, em seguida, diminua um pouco. Este quadro também pode ser redimensionado para que eu possa esticá-lo. - Como? Certo? Como fazer isso se eu quiser fazer ah, quadro de tamanho particular. Hum, ele vai fazer 12. 80 por 1964 você vê no fundo. Aqui é onde eu vi o tamanho disso. Eu também posso adicionar um comentário a ele, se eu quiser , mas por enquanto, eu vou deixar assim 15. WF - adicionar elemento: Vamos voltar para aquele que pulamos aqui. Adicionar elemento. Qual teclado? Se eu abrir isso, , temos um monte de elementos diferentes que podemos escolher neste caso, eu vou dirigir. O que acontece de ser também atalho de teclado são Então eu clico sobre isso. Não, solte em algum lugar. Eu gostaria de eu posso ver que isso também tem uma barra de ferramentas do editor aqui, semelhante ao que tivemos nos vídeos do fluxograma onde eu poderia mudar a forma deste particular para a forma da pílula ou para um oval. Também ir para um preenchimento versus delineado versus traço. Ela é a sua cor. Este caso eu vou para um amarelo. Eu também posso em ícone duplicar e comum sobre isso. Então vamos clicar fora disso. Eu ia posicionar este aparecer, e então eu vou arrastar para fora um pouco para torná-lo sobre o tamanho aqui que vamos fazer em seguida é realmente vai ser tamanho. É um pouco mais por aqui. E então eu estou pedindo que você clique sobre isso e eu vou para um Mac Ault Shift drag ou opção shift drag em um PC arrastando isso aqui para baixo. Frango pequeno intervalo. O bar branco aqui pode mudar isso aqui. Mas por enquanto, tudo bem. Arraste isso para baixo e eu vou fazer isso cinza. Então já temos algo acontecendo aqui. Então agora quando eu pegar e circular ou oval e eu vou descer aqui também. Círculo . Na verdade, prefiro ter um avatar. Então este é o atalho de teclado. Um círculo era um atalho de teclado. Oh, mas avatares o que eu gostaria para este caso pensando Largue isso e então eu vou mudar arrastar isso para fazer um pouco maior, e isso vai deixar este branco também. Se você quer algo para ver aqui, é meio que ficar atrás do cinza. Se eu direito, clique que e você trazer a frente que realmente levantou em cima daqueles fazendo posição é onde eu gostaria de beijá-lo pode ficar um pouco mawr na área de cima. Simplesmente assim. Talvez estrito minúsculo, mas é meio grande. Então lá vamos nós. 16. WF - adicione conectores e adicione texto: este anúncio conectado muito rápido. Esta promessa de que você pode usar mais frequentemente na placa de fluxograma. Mas só para dar um exemplo rápido, você pode realmente clicar nele aqui. E então eu poderia me arrastar para fora. Então digamos que eu fui dedo do pé, anexá-lo a outra forma. Eu poderia acrescentar, texano aqui, amostra parece tipo de ah, endireitar-se assim. Mas você tem. Quero arrastá-lo e tê-lo tocado. Outra coisa assim. Eu poderia fazer conexões com isso. Vou apagar essa por enquanto. E, na verdade, o que eu quero ir a seguir foi adicionar texto, que é o atalho de teclado t, que, como um som, me permite adicionar texto. Então este caso vai colocar a palavra “casa “aqui. Eu acho que isso e isso vai ficar no topo aqui. Vamos ter a nossa navegação. Então, na verdade, eu quero fazer agora é eu quero selecionar esses três itens. Vou arrastá-lo um pouco até aqui, e então vou mover a casa para aquela seção para fazer realmente uma área específica de valete , e vou deixá-la bem ali. Parece bom. Eu vou querer fazer. Também tenho duplicatas para outra aqui. Eu vou fazer este um momento e eu faço outra duplicata. Posso deixar essa chamada de notificações. Isso e um MAWR. Vamos chamar este de mensagens familiarizadas com o Twitter. Você entende que provavelmente já viu tudo isso antes, mas clicável juntos. Isso me dá a opção de agrupar. Neste caso, eu só quero uma linha do que ter certeza que eles estão no centro da linha, o que parece que eles estão. Mas apenas no caso de eu me mover, qualquer que não parece negativo, disse, fazendo tipo de também distribuir horizontalmente, espaços para fora uniformemente. Isso é ótimo, Perfeito. Então, terminamos de adicionar texto por enquanto. 17. WF - adicionar ícones: A próxima coisa que fizermos, vamos adicionar ícones, que é, uh, atalho de teclado X aqui antes de eu fazer, eu quero ir para o, uh , Twitter aqui, que fazendo uma versão disso. Isso é o que eu não fiz login agora, mas você pode ver que temos o ícone, e depois a navegação no topo. O creme de mulher tem mais alguns. Uma vez que eu fosse a lei de novo, você veria esses, mas se tivesse a idéia, uh, nós entramos. Isso seria realmente uma pequena foto de uma casa, e então vamos começar a adicionar aqueles que eu já pude ver. Também voltando a isso é quão pequeno o círculo aqui é. Este é o West. Boss é um dos meus amigos e desenvolvedores favoritos que estamos olhando agora. E ele tem ótimas aulas como esta. CSS grid, que é ótimo lá. Então veja isso se você tiver uma chance. De qualquer forma, de volta para cá. O que? Estamos trabalhando nisso dizendo que temos encolher isso um pouco porque é meio grande para o que acabamos de ver lá. Então isso provavelmente é melhor por enquanto. Os ícones do Soas Faras abriram isto aqui. Eu posso, na verdade, uh, se eu quisesse especificamente aquele ícone do Twitter, eu poderia procurar o Twitter aqui e realmente ter um. E eu poderia deixar isso aqui. Isso funciona muito bem. Talvez eu queira mudar a cor que vamos deixar isso verde. Talvez mudar este ano para também ser a cor da tela porque estamos na página inicial agora , então isso faz sentido para momentos. Isso foi um relâmpago. Então, se eu voltar para Icon, eu poderia olhar para cima. Pode significar. E com certeza, eles têm um. Você tem aquele ali. Próximo para notificações. Vou precisar de um símbolo de sino. Então, Bill, tenho certeza que não. Lá vamos nós. Você pode, é claro, redimensionar estes. Vou deixar cair do tamanho que eles têm. Isso parece funcionar de vez em quando para mensagens. Vou precisar de um pequeno símbolo de envelope aqui. Então, se eu acertar no X, você vê que ele abre assim também. E, uh, nós temos parece que temos algumas escolhas diferentes. Que tal pegarmos aquele? Apenas solte isso. Lá vamos nós. Há um envelope. Então, imediatamente, temos nossas guias diferentes novamente. Como eu disse, você pode ampliar um pouco. Isso parece um pouco grande. Você pode deslocar e arrastá-lo para baixo para redimensionar. Talvez estes rolam como um pouco grande, então você pode decidir que você quer um amigos menores desde, assim e lá vamos nós, que está adicionando ícones. 18. WF - adicionar link: Em seguida, vamos usar o link do anúncio. Então, vou diminuir um pouco. E então clique. Adicionar link. Que tal irmos tão calmos? Talvez nos permita, se quiséssemos clicar sobre isso porque queríamos ir direto para o site. Assim poderíamos ver, uh, uh, o que estamos tentando fazer criar Aqui é uma cópia do Twitter. Assim como no fluxograma quando usamos que olhou para aquela placa. Se você clicar sobre isso, temos opções para torná-lo um polegar agora, que é uma pequena tampa de tela rápida dele. Neste caso, não é muito interessante, mas você pode ter a idéia. Também podemos decidir cavar a cabeça dos sites ou a metade superior dele. Este caso de novo, não parece muito interessante. Um slide atrás do lado aqui. Veja se isso ainda não é muito lá. Muito fora das versões móveis dele, eu não posso remover o instantâneo que o traz de volta para apenas o pouco de usar o deixar um golpe do site como algo que podemos clicar sobre isso para movê-lo, mas como, digamos, se você clicar sobre isso, ele vai abri-lo. Então eles clicam nisso. Claro, vamos para aqui onde eu realmente entraria. Mas se você estava logado, não foram lançados o site onde você embrulhar. E assim você poderia verificar o que você está tentando fazer de você e que é link de anúncio, que também é um atalho de teclado K. 19. WF - upload da imagem: agora para o próximo parceiro mostrar a você, que é carregar o atalho de teclado de imagem. Eu tenho realmente mostrando a vocês uma versão que eu tenho um pouco mais longe com o clone do Twitter aqui mostrando que eu fiz uma chamada Desert Life é o nome desta conta do Twitter . E assim, Deus , continuando com muito mais texto, alguns outros parecem busca. E estes foram todos construídos da mesma forma que eu construí as peças originais. Não há nada de novo nestes. Mas o que eu quero mostrar mais na imagem com Zoom em um pouco aqui. Eu poderia colocar uma imagem aqui, por exemplo. Então talvez eu fui procurar por uma busca rápida cenas no deserto procurando imagens e talvez eu goste deste aqui. Então vamos ver. Clique nesse. Vai copiar a imagem, voltar para esta aqui e então eu colo essa imagem aqui. Aqui é onde eu posso fazer um quadro completo ou ter uma pequena borda. Vou pegar uma moldura completa, deixá-la ali e bem ali. E aqui está a nossa imagem de anúncio. Claro, você também pode fazer upload da área de trabalho para se perguntar se você tinha alguma pasta em que você tinha as imagens. Mas eu tento ter uma idéia rápida do que parece adicionar uma imagem e tem tipo de tema cor correspondente lá como ele. 20. WF - compartilhar: A última coisa que eu quero falar dentro de armações de arame era compartilhar. Eu criei aqui algo que vá para este pequeno avião de papel. Posso ver que temos compartilhamento de exportação e impressão. Se eu clicar nisso, podemos ter uma parte de um link. Assim que eu receber isso, eu acho que eu poderia colocar isso no e-mail. Por exemplo, eu também poderia exportar isso, que irá salvá-lo na minha área de trabalho, por exemplo, ou na pasta específica. Eu também posso fazer uma cópia da imagem, que eu poderia então colar novamente no e-mail, e então ele vai para imprimir isso fora. Então esta é uma ótima maneira se você gostaria de realmente compartilhar o que você fez aqui, e isso é tudo para quadros de arame, muito obrigado. 21. WF - Desafio #2: e agora é hora do desafio. Compartilho com vocês algumas ferramentas diferentes que poderiam usar para criar uma armação de arame. E agora cabe a você pegar um dos seus lados favoritos, seja Twitter, Facebook, Facebook, instagram ou qualquer site, realmente, realmente, e fazer uma recriação dele. Trata-se de fazer algo que é muito rápido. Não há necessidade de mergulhar em fazer coisas elaboradas. Estamos fazendo armações como forma de tirar ideias. Você pode até criar uma idéia totalmente nova se você gosta de Teoh, eu estou ansioso para ver quando você vir acima com as coisas de novo. 22. Fim: Eu realmente espero que você goste deste vídeo. Veja a partir ou design fazendo ferramentas também. É projetado fazendo métodos futuros. Vê isso?