Transcrições
1. Introdução ao curso: armações de arame são a parte importante de qualquer processo de design porque são a ponte entre a ideação e a execução. Eles são ótimos porque eles são simples o suficiente para que todos os envolvidos possam entendê-los e também barato o suficiente porque você pode criá-los no pedaço de papel ou maioria fora do
software de design Hey lá. Meu nome é Alex, e no Discurso você vai aprender o que são armações de arame, como desenhar armações de arame no papel e usar os modelos que eu forneci como criar armações de arame em diferentes on-line faz como criá-los em quatro lojas e, finalmente, como criá-los no Adobe X'd e, em seguida, passar para quadros e
protótipos de fio de alta fidelidade . Este curso é para qualquer pessoa interessada em armações de arame, e você não precisa saber como usar essas ferramentas. Vamos cobri-los neste curso. Então, se você quiser melhorar sua produtividade, economize muito tempo e dinheiro em iterações e crie os produtos mais rápido do que clicar rolo e eu vou vê-lo no curso
2. O que é o wireframe: armações de arame são a parte essencial de cada criação de produto. Então, onde você está criando um aplicativo móvel ou site, quadros de
arame são a parte essencial da criação desse produto, porque eles são essencialmente uma ponte entre a idéia por trás desse produto e a execução em frio mais tarde, armações de arame são super fáceis de criar porque você pode criá-los com diferentes tipos de
elementos fora . Você pode tentar idéias diferentes porque eles são super rápido e super barato. Portanto, eles são ajuste perfeito entre a parte idéia e a parte de execução porque você pode saltar para dentro e mudar as coisas realmente facilmente, muito rapidamente. E então, por exemplo, se o elemento não funcionar, é muito mais barato criá-lo em enquadramento de fio, em
seguida, em código, por exemplo. Portanto, design não é feito dentro do código. O design não é feito dentro do U. Y. Parte do processo de projeto. É feito dentro de vire emoldurando parte fora do processo de design, porque mais uma vez é muito rápido de executar. É extremamente barato porque você pode fazê-lo em um pedaço de papel. É extremamente fácil para todos se encaixar com suas idéias, e você pode testar todos os tipos de idéias lá fora em um pedaço de papel antes de você
saltar para a produção de seu você eu trabalho e mais tarde em Cote. Portanto, é realmente recomendado para projetos ou tamanhos de queda, por exemplo, de projetos menores. Quando você está trabalhando com seu negócio local todo o caminho até as empresas extremamente grandes como o Google, por exemplo, para fazer este quadro de fio, em parte porque é extremamente fácil de executar. E é extremamente rentável porque você não está investindo tempo e dinheiro no frio e, em seguida, iterando dentro do casaco, porque certamente haverá muito fora disso mais tarde quando você chegar à morte parte fora do processo de
design. Mas quando você está apenas começando com seu design e você tem todas essas idéias
pulando em sua cabeça, especialmente se você está trabalhando como parte de uma equipe pequena ou grande, realmente não importa, desde que você esteja fazendo isso armação de fio em parte fora do processo de design, é extremamente fácil para todos os envolvidos toe entender a idéia e mais tarde sobre a execução
3. Recursos para o papel: quando se trata de recurso é para o seu processo de toque esposa papel. Cabe a você o que você vai usar para criar essas armações de arame. Você pode usar uma folha de papel em branco como esta. Este é apenas um papel de impressão simples, e você pode usá-lo linhas de trigo ou sem linhas. Realmente não importa. Eu vou te mostrar. Você pode usar um bom livro de desenho rápido como este, este aqui, este do meu Kia. Mas você pode usar qualquer livro de desenho que você quiser. Como você pode ver lá dentro. Estes são apenas folha em branco fora de papel e você está recebendo essas alianças, por exemplo, e você está recebendo esses pontos se você quiser usá-los para um tipo de grande. Mas como eles disseram
, realmente não importa. É realmente até você o que você vai criar, porque meus amigos são extremamente simples de criar que pode ser criado com aberração e ou você pode usar uma régua. Por exemplo. Eles podem ser extremamente fácil para os olhos ou extremamente complicado, E no vídeo posterior eu vou mostrar alguns exemplos da Web e alguns produtos que eu
criei dentro da minha empresa off. Que donut com a ajuda de algumas pessoas, é
claro, e eu vou te mostrar o que é diferente. O recurso é que você pode ver Toby inspirado e usar em seus projetos particulares para ver as diferenças entre todos esses diferentes quadros de arame. Além disso, quando se trata de realmente desenhar, você pode usar um simples dobrado de madeira como este, por isso é um lápis simples. Você pode usar diferentes tons de lápis, se quiser. Você também pode usar uma caneta como esta. Isto é simples ikey uma caneta, mas você pode usar uma caneta que você quer. Na verdade, você também pode usar marcadores coloridos diferentes se você quiser dar acentos a algo em seu quadro de
arame. Então, por exemplo, você quer dar acentos diferentes aos fundos. Digamos que seu cliente tenha botões azuis em seu site. Talvez queira usar um marcador azul. Talvez você possa usar um marcador verde para imagens e assim por diante. É realmente importante entender que você não tem que investir nenhum dinheiro neste processo anel
esposa papel porque você pode realmente usar o que você tem em torno de sua casa se você quiser ser chique mais tarde no processo, então você pode realmente explorar e gastou quantidades infinitas de dinheiro basicamente em outros ricos. Uma vez que esses papéis diferentes que você quer, você tem diferentes notas de papéis. Você tem lápis de sombreamento diferentes. Por exemplo, você tem todos os tipos de marcadores diferentes de cinza claro, Digamos Toe 30% grande, 50% grau. Mas a principal chave para entender aqui é tudo o que não importa. Você pode usar o que você tem em torno de sua casa para criar esses amigos de fio porque, como eles disseram na introdução de vídeo fora deste curso, eles são apenas um ponto de partida de seu processo de design. Porque muitas das vezes em que você está trabalhando em grandes empresas, você vai desfazer armações de arame realmente facilmente porque talvez eles não encaixem o U
ex parte fora do processo de design. Talvez esta posição fora dos botões não funcione. Talvez você tenha que tentar controles deslizantes diferentes. Digamos que talvez este formulário não precise ter três campos. Só tem que ter dois campos e assim por diante. Então você vai encontrar todas essas mudanças diferentes durante seu processo de design, então é realmente importante ser capaz de iterar rapidamente antes de realmente entrar no software e começar a projetar. Então é por isso que eu digo que realmente não importa que tipo de espessura de papel você vai
usar ou classificação de papel. Tudo depende de você e do que você tem em sua casa para começar. O jornal Weibring.
4. Elementos de fio: Existem muitos elementos diferentes que você pode usar em seu processo de criação de enquadramento de arame. Mas alguns dos elementos mais importantes são basicamente imagens de texto, fundos e formulários ou campos. Então esses quatro são basicamente os principais elementos que você vai usar em seu creme branco no processo de criação e, mais tarde, você vai combiná-los. Então, por exemplo, você está criando um post de cara ou você está criando um carro fora de algum tipo, então você está basicamente indo para trocar esses quatro, e incluí-los em seu processo de design. Então você vai expandir a partir desses quatro e criar algo como um controle deslizante, por exemplo, que é formado fora, Digamos texto de imagem e alguma paginação, então você vai usar os pontos para a paginação. Você vai incluir botões talvez diferentes. Talvez você esteja indo para incluir ícones diferentes dentro, mas realmente depende de sua esposa no processo de criação. Além
disso, ele se preocupa com o orçamento do seu cliente,
então, se o orçamento é pequeno e o prazo é realmente apertado, você não vai explorar armações de arame em detalhes profundos, mas você só vai colocar em alguns belos esboços rápidos para transmitir suas são suas idéias para seus clientes para que eles possam entender o que você tem em sua cabeça um pouco melhor antes de você
saltar para o software e começar a projetar no próximo vídeo, eu vou mostrar-lhe alguns diferentes estilos de enquadramento fio de papel, e eu vou mostrar a vocês o que você pode realmente fazer com suas molduras de fio de papel. Eu vou mostrar a vocês algumas maneiras mais fáceis e métodos fáceis e também alguns extremamente
complexos e alguns extremamente elaborados, que inclui ilustrações também, porque realmente depende de você se você é talentoso sobre isso tipo de coisa, se as ilustrações vão ser incluídas, se elas vão ser incluídas, mas você não sabe desenhar, não se
preocupe. Você pode simplesmente rabiscar algo para indicar que a ilustração vai para lá. Além disso, quando se trata de enquadramento de fios, você pode usar texto real para indicar o que tudo é, ou você pode simplesmente criar algumas caixas, e nós vamos chegar a ele um pouco mais tarde. Neste curso, vamos mostrar-lhe algumas ferramentas de software diferentes que estão usando elementos diferentes, e você pode basicamente ter criatividade infinita. Mas é realmente importante entender, não ficar atolado para baixo com sua parte de enquadramento de arame porque, como eu disse várias vezes ao longo deste curso, é realmente uma ponte entre a idéia e a execução. Então é aí que entra a parte de enquadramento de arame, e é aí que você vai começar a pensar sobre essa parte de enquadramento de arame. É só a ponte entre a ideia e a execução. Então vamos agora pular para o próximo vídeo, onde eu vou mostrar alguns exemplos da Web sobre como diferentes designers estão usando os quadros de fio de
papel do , e eles são diferentes idéias e execuções.
5. Estilos de fio de papel: Se você entrar no Google e simplesmente digitar papel de arame, você vai obter todas essas diferentes variedades fora de molduras de fio de papel, e eles vão de
realmente, realmente, extremamente fácil quer dedos extremamente complexos. E eu vou cozinhar para mostrar esses exemplos. Mas você também pode explorar o que quiser sobre os amigos do fio porque existem literalmente milhares de exemplos diferentes. Assim, a partir deste primeiro aplicativo móvel, por exemplo, você pode ver que eles têm todas essas idéias diferentes basicamente marcadas para baixo no lado com setas apontando. E isso é realmente útil quando você está enviando este projetado para outros membros de sua equipe , por exemplo, ou se você só quer lembrar de algo você mesmo, talvez você tenha essa idéia no momento, mas você quer ir para o Kuwait mais tarde na linha com seu cliente, então isso é extremamente útil para fazer. E como você pode ver, eles estão usando texto para literalmente tudo. Outras partes fora do processo de enquadramento do fio é esta. Como você pode ver, talvez eles vão usar títulos aqui mesmo. Eles vão usar o parágrafo aqui, então um texto um pouco menor e eles estão usando esta caixa agradável e simples para as imagens que você pode ver aqui. Eles estão usando o ícone do jogo. Então, talvez isto seja um vídeo. Então, há também esse estilo para quadros Vier, e isso geralmente é usado como eles disseram no vídeo anterior. Quando você não tem um monte de tempo em suas mãos quando o orçamento é, talvez, dedo curto em pequeno. Então você está indo, tem que usar algo que é agradável e fácil de entender tanto para você quanto para seu cliente. Talvez você tenha que dar um pouco mais de explicação para o seu cliente. Então se você está usando algo assim porque você pode ver aqui que
não há nada lá. Então talvez o cliente vai ficar confuso sobre o que é isso. Talvez você tenha
reboque, diga a eles. Bem, esta é a imagem. Este é o parágrafo. Este é o título. Então talvez você realmente vai perder um pouco de tempo lá. Então, se você está apenas usando isso do início, você pode ver um bom exemplo como este. Então talvez eles vão usar algumas ilustrações diferentes, menus suspensos
diferentes, talvez migalhas de pão. Talvez eles vão usar o site aqui, então é com você. Você pode ver este exemplo aqui. Eles vão usar o texto neste exemplo e também alguns rabiscos. Então, se o texto está se repetindo, você não vai perder seu tempo. Você só vai rabiscar algo para baixo, vai indicar que esse é o texto também, e você pode ver aqui e a frustração deste cara. Então ele está usando um monte de telas diferentes, muitos elementos diferentes, e essa é realmente a chave. Tire daqui deste processo de intempéries. Você vai fazer isso muito, especialmente se você estiver desenhando no pedaço de papel porque você vai cometer erros ao longo deste processo. Você vai fazer algumas alterações e mudanças. Então isso é o que você vai esperar da maioria dos seus projetos. Além disso, muitas vezes os clientes não entendem que eles realmente precisam de mais algumas
páginas da Web adicionais , mais
três telas móveis adicionais. Então é aí que isso entra e você vai ter que criar várias iterações fora cada tela em novas telas e novas páginas. Então é aí que isso entra, e você tem todos esses papéis diferentes no final. Fora deste processo, você pode ver algo como isso para o site e esta pessoa realmente incluiu algumas
sombras e algumas linhas de cruzeiro diferença e você pode ver que fez mais uma vez eles estão usando algum texto. Então, por exemplo, você pode ver produtos aqui, mas para o parágrafo lá, apenas rabiscando algo assim também para os fundos. Mas eles têm suas anotações bem aqui. E isso é o que eu estava dizendo sobre o que você precisa usar para seus armações de arame e o que você quer usar um de nossos trajetos. Basicamente, com base em suas habilidades e seu orçamento, eles estão usando cores diferentes para indicar o que eles precisam fazer. Então você pode fazer isso. Por exemplo, se você se lembrar de quando você estava na escola, talvez seu professor tenha usado algo como uma cor vermelha para indicar alguns erros e algo como uma cor verde para indicar algo que você fez bem para que você possa usar exatamente o mesmo princípio e exatamente o mesmo estilo. Mas você pode fazer isso em uma variedade de cores diferentes. Você pode usar sopro. Você pode usar a cor que quiser. Mas basicamente vermelho, verde e azul são as principais cores que os designers usam porque eles são realmente simples e fáceis transmitir
para outros membros da equipe de design ou seu cliente de design. Se percorrermos todo o caminho para baixo, você pode ver armações de arame um pouco mais avançadas aqui para que você possa ver que essa pessoa claramente sabe como desenhar. Então você pode ver todos os tipos de ícones diferentes, pessoas
diferentes. Você pode ver um mapa bem aqui. Você pode ver claramente uma bela caligrafia aqui. Eles estão desenhando ícones diferentes, então você pode fazer isso também. Mas fique avisado, se você estiver em um prazo apertado e no orçamento do tipo cliente, talvez
você não tenha tempo suficiente para criar algo assim. Há um bom exemplo aqui também, assim
como este. Então você pode ver que eles estão desenhando um carro. Estão desenhando o processo. Estão desenhando ícones diferentes aqui ao lado. Então você pode fazer isso tão bem quanto eu estava dizendo em, uh, parte do
equipamento. Basicamente, como você pode ver, eles estão usando uma régua bem aqui. Então, tudo é agradável e uniformemente espaçado. Você pode ver que esses padrões diferentes estão mesmo em cada lado você pode ver um grande bem aqui. Você pode ver o ícone aqui. Então, como eu disse, você pode fazer isso também. Mas como você pode ver, eles estão usando exatamente a mesma coisa. Então eles estão apenas escrevendo descrição e, em seguida, apenas algumas linhas rabisqueiras para indicar
que isso vai ser, Ah, parágrafo nessa página. Agora você pode ver este exemplo e eles estão usando isso para as imagens. Este vai ser o texto. Como eu estava explicando sobre a imaginação, há simplesmente pontos aqui, e você pode fazer isso também. Então, como você pode ver a partir de apenas estes poucos exemplos e eu realmente encorajo você a explorar
tanto quanto você quiser ver qual desses estilos realmente se encaixa em você e seus projetos, e você pode realmente torná-lo tão complexo ou tão fácil quanto você quiser, ou se o projeto requer algo um pouco mais complicado, talvez você possa envolver em seu processo de design algo como isso. Então extremamente fácil, extremamente simples, ou talvez algo assim onde talvez você vai incluir um pouco mais de cores e um pouco mais de sombras ou algo assim você pode usar marcadores, como eu disse e você pode ver aqui e eu vou incluir estes modelos de impressão, que eu vou dar-lhe para o discurso. E eu vou incluir diferentes dispositivos móveis e formas diferentes, e eu também vou incluir um para o navegador da Web. Então, se você quiser usá-los, sinta-se livre para imprimi-los e usar o seu Talvez ele vai acelerar o seu processo um pouco, especialmente quando você tem que desenhar todas essas caixas diferentes. Vai realmente levar muito tempo para fazer este espaçamento perfeito e medir
tudo para não perder tempo em seu processo de design e esposa Remi. Eu vou lhe dar esses modelos, que você pode imprimir livremente, e você pode então usá-los em seus projetos. Eles vão parecer algo parecido com isso. Mas como você vai ser capaz de embaçar e ver o que eles vão acelerar seu processo imensamente e mais tarde, quando nós realmente começar com o processo de design de enquadramento de arame, eu vou mostrar a vocês como você pode imprimi-los e também como você pode usá-los em seu processo via
enquadramento, modo que é basicamente isso para este vídeo. Como você pode ver, apenas rolando para baixo, você pode ver todos esses exemplos diferentes, complexidades
diferentes,idéias
diferentes, idéias
diferentes cores
diferentes, formas e assim por diante. Mas basicamente tudo se resume a essas quatro formas, que eu estava dizendo imagens, fundos, texto e campos para que você possa ver diferentes categorias aqui você pode explorar e entrar em um monte de detalhes. Muitas pessoas estão fazendo isso, então basicamente eles estão cortando todos os seus quadros certos e, em seguida, colando-os em uma parede ou fixando-os em algumas placas, por exemplo, e você basicamente acaba com algo como isto. Então, mais uma vez, dependendo do orçamento do cliente dependendo. Ou se você está fazendo isso por si mesmo em apenas por si mesmo, em seu cliente, ou se você está fazendo isso como parte da grande equipe. Então todo mundo tem que estar envolvido dentro desse processo de design. Cabe a você como você vai transmitir suas idéias e como você vai
apresentá-las aos seus clientes.
6. Templates para impressão: Tudo bem, então eu quero mostrar como tudo isso funciona. Basicamente, eu vou te dar esses quatro modelos diferentes, que você pode imprimir por conta própria. Ou se você não tem uma impressora, você pode facilmente ir a uma loja de impressão e simplesmente imprimir todos esses modelos, quantos deles você precisa ou possivelmente usar uma folha em branco de pessoas como falamos nos vídeos anteriores. Então, o que temos aqui são modelos de iPhone, e você pode ver os modelos de iPhone com espaçamento em torno desses modelos para que você possa rapidamente adicionar suas marcas ou algo que você quer dizer, ou para lembrar-se mais tarde maneira ter fora Samsung Modelo Galáxia. Temos um modelo congelado, que se parece com o Google casa com estas apostas bar topo para que você possa usar este espaço abaixo de seus dois simplesmente desenhado. Ou, como eu disse, se você não quiser, você pode simplesmente usar Thetis ou mesmo simplesmente usar pessoas assim e depois afundar. Você desenhar em seu Web design, pois eu tenho aqui e porque o Apple Watch é muito pequeno, eu simplesmente usei um monte deles como você vê aqui para corresponder com o espaço restante na minha página. E todos estes são um quatro, mas você pode simplesmente ajustá-los dentro de seu programa favorito, ou você basicamente imprime o dedo do pé ser tamanho letra dos EUA se você quiser dentro de seu
software de impressão . Então, como você pode realmente usar qualquer um desses? Este? Você parece ter que começar a desenhar. E como eu disse, você pode usar qualquer caneta ou papel que você quiser ou precisa dele para que eles não nos distraiam. Então, como eu disse, você pode simplesmente usar qualquer pedaço de papel e uma caneta que você quiser ou que você gosta. E como um zoológico viu no vídeo, que é mostrado anteriormente com todos esses diferentes exemplos de como as pessoas estão usando esses quadros de
arame e desenhando sobre eles, eu seria que mais uma vez, você pode tornar isso tão simples ou como complexo como você quer, e é realmente fácil. Cabe a você mesmo aos seus talentos, ao seu tempo, aos clientes, ao tempo e, claro, orçamento dos
clientes, porque só quero mencionar isso mais uma vez. Você não quer perder muito tempo nesta parte do processo porque a parte de design
real do processo,
uma vez que você começa o seu favorito mais suave é o que vai levar um monte de tempo. Então arame frames são apenas a ponte entre a parte de ideação e a parte de execução. Então eu vou mostrar a vocês alguns métodos diferentes aqui. Então, para a imagem, você pode simplesmente desenhar um retângulo agradável como este. Eu diria que você tem um texto um pouco para que possamos, talvez em algo assim. E podemos talvez mostrar algo como Você suporta um título e alguns fora os menores
para o padrão de abaixo E, finalmente, para o botão, talvez possamos adicionar em torno de um botão. Então algo assim,
talvez, talvez, e isso é basicamente o seu cartão. Vamos chamá-lo assim,
em seguida, próximo nível você pode fazer exatamente a mesma coisa. Mas, por exemplo, talvez você possa adicionar uma boa ilustração. Digamos que uma montanha ao sol ou algo assim, e talvez as pessoas possam então entender um pouco melhor do que esta é a imagem real. Então talvez possamos adicionar um título como então talvez possamos adicionar um parágrafo como esse e talvez possamos adicionar um botão aqui. Exatamente a mesma coisa que fizemos aqui. Mas vamos digitar, por exemplo, Bt. E assim as pessoas realmente sabem que é um botão em questão. Então, depois disso, talvez você possa adicionar um. Mas para este, talvez se você quiser adicionar imagem fora de uma montanha aqui, você pode, talvez, e euros pegar. Então talvez você possa desenhar algo assim. Talvez centralmente, isto. Talvez possamos ter um filho aqui. Talvez possamos adicionar algumas árvores. Então, como eu disse, tudo isso requer seu tempo porque você viu o Hamas. Quanto mais rápido desenhamos. Este ditado é com tudo isso. Mas este está nos levando muito tempo. Então, como eu disse, cabe a você e ao orçamento dos clientes. Talvez você não saiba desenhar. Talvez você não queira desenhar. Então, talvez você possa ajustar todos esses estilos diferentes do que melhor lhe convier, bem como seu cliente e seu projeto. Então aqui, talvez possamos adicionar, digamos,
yo, yo, Stone Park. E aqui estamos indo para a direita todo o parágrafo. Então eu não vou fazer isso. E finalmente, bem aqui. Talvez possamos colocar muito mais. E talvez eu possa até adicionar uma sombra por trás deste botão para que eu saiba mais tarde no design que vai usar esta sombra para que você possa ver apenas com esses três estilos como eles são diferentes, quanto adotivo é isso como bem como isso. Enquanto este leva um monte de tempo e um monte de exploração, especialmente se você está desenhando personagens, por exemplo. Então você precisa criar, digamos, um personagem masculino e feminino, talvez seu personagem filho, então isso vai levar muito tempo, não simplesmente colocar um ícone como este. Como você pode ver, é muito mais rápido. É muito mais simples, e todos vocês na equipe vão entender que esta é realmente uma pessoa que eu chamo. Quanto a todo o layout, fantasma rapidamente para este discurso. Então talvez você possa usar algo assim, então talvez possamos ir primeiro. Stalin deve fazer, que é este, que é o mais fácil de entender Então vamos dizer que vamos criar uma página da Web e precisamos de algo assim. Então vamos criar imagem de herói aqui e dentro da imagem de herói. Vamos colocar um grande título bem aqui. Vamos colocar um parágrafo aqui. Vamos colocar um fundo bem aqui. E talvez possamos colocar uma grande imagem aqui para sabermos que esta é a imagem. Talvez possamos adicionar uma navegação aqui. Então eu costumo colocar em um círculo, talvez colocar algumas dessas alianças assim. E talvez eu possa fazer uma busca bem aqui no topo, e eu posso chamá-lo de inteligência de herói. Vamos ver, chamador Benji, que é uma imagem de herói com a cor de fundo ou morte abaixo da morte. Talvez possamos colocar um grande título. Então algo assim talvez com um parágrafo abaixo dele. E talvez eu possa incluir alguns recursos aqui. Talvez eu possa adicionar o nome do futuro assim. E talvez eu possa incluir algum tipo de ícone fora aqui. Então talvez eu possa apenas colocar uma estrela por agora para que eu saiba que estes são os ícones que vão vir aqui e abaixo. Aqui. Talvez possamos incluir algo primordial, para que você possa ver como isso é fácil. E eu posso simplesmente colocar futuros aqui. E talvez eu queira adicionar algum tipo de forma de fundo ou uma cor de fundo ou algo assim. Você pode atraí-lo. Então vamos dizer que a forma que vai assim e eu posso simplesmente incluir outra seta
aqui , outra nota e eu estou indo para escrever Vamos dizer forma assim então abaixo que talvez possamos incluir um vídeo. Então talvez eu possa simplesmente incluir um chefe como este com um ícone de placa dentro. Então todo mundo sabe que a morte é um vídeo como então talvez este vídeo mostre o futuro deste site, então abaixo disso, talvez queiramos incluir uma grande ação de falha. Digamos que queremos incluir um texto,
em seguida, parágrafo abaixo. Talvez nós queiramos incluir o formulário aqui para que eu possa até escrever na refeição e, em seguida, dtn isso vai ser um apelo à ação e talvez isso vai dedão conter uma imagem de fundo . Então seja o Jeep. I m G s uma imagem de fundo para que eu saiba que este é um fundo com uma imagem. E eu quero incluir,
por exemplo, por exemplo, um bom grande título aqui,
descrição ou o serviço e, em seguida, e-mail e uma beleza, em seguida, abaixo. Pai, talvez queiramos incluir uma música. Digamos que testemunhos. Então talvez possamos incluir uma boa imagem bem grande aqui. Talvez possamos incluir um parágrafo de título. Então eu vou incluir algumas flechas bem aqui. E se você quiser, você pode adicionar uma paginação aqui apenas para que o visitante saiba quantos fora destes eles são esquerda, esquerda, direita, e podemos chamá-lo de testemunho. Talvez esta próxima seção seja uma seção de equipe. Então talvez possamos dividi-lo em três cartas. Digamos que e talvez nós também podemos incluir Ah paginação aqui mesmo. Então talvez possamos adicionar um título e um belo parágrafo B. Isso vai conter imagens de pessoas,
então título que eu nomear do que sua posição e talvez seu ícone de mídia social. Então você pode simplesmente replicar o que você fez aqui. E se você quiser se lembrar um pouco mais tarde, quando você deve começar a projetar isso dentro do saltério. Se ele passa com o seu cliente, então talvez você possa desenhar um grande barril bem aqui e dizer que estes são
ícones de mídia social apenas para que você saiba, um pouco mais tarde sobre o que eles são em toda esta seção. Seção da equipe dois B. Então, finalmente, talvez possamos incluir mais aqui. Então isso vai conter um local. Digamos que aqui. Talvez eu possa até incluir. E talvez alguma navegação no menu venha aqui. E então veremos o orginal cooperar e talvez 2000 e 21. Digamos que esse é o ano. Então, basicamente, você pode ver como é fácil criar essas armações de arame e como é fácil navegar entre todas essas seções diferentes. Então você pode ver, uh, com um pouco de trabalho e um pouco de tempo, você pode facilmente criá-los extremamente, simplesmente extremamente facilmente. Mas apenas o suficiente. Assim como você em seus clientes ou 30 membros sabem o que eles são, o que eles fazem e o que eles devem representar dentro do processo de design. Então, no próximo vídeo, nós fomos para realmente começar a criar nosso quadro de arame em um pedaço de papel. Vamos usar modelos de iPhone, que emitiu neste vídeo porque vamos criar uma moldura de fio para iPhone para o imaginário e mais tarde dentro do meu suave favorito Don't be XY. Eu vou mostrar a vocês como você pode adicionar um pouco de tempero a ele e como você pode adicionar imagens, talvez, um, colorista e tão texto real que vão gerar para criar um aplicativo bonito olhando, que é basicamente uma ponte morta entre o quadro de arame e a parte fria fora do processo de design. Então, como eu disse no próximo vídeo, vamos dar uma olhada em como podemos realmente começar a criar quadros de fogo, que realmente significa algo? Porque tudo isso feito da minha cabeça só para mostrar alguns exemplos de como você constrói meu amigo assim. Então eu te vejo no próximo local
7. Desenhando seu fio: Tudo bem, vamos agora começar desenhando uma armação de arame em um conjunto. Nos anos anteriores, vamos criar um anel de esposa 40 Eu telefone para que você possa imprimir e usar este modelo, que eu forneceu para o iPhone. Ele não tem direito aqui no topo, por isso pode acomodar todos os requisitos de domínio para o design profundo do aplicativo iPhone. Então agora vamos começar, e eu vou apenas usar essas três telas. E, obviamente, você pode imprimir quantos desses quiser, porque seu projeto pode exigir, digamos, 20 telas. Alguns projetos exigem 200 telas e assim por diante, e você também pode usar o pdf, que é fornecido, e adaptar isso a quantas telas você precisar. Então você poderia ter, por exemplo, cinco ou 10 telas assim. Mas eu realmente recomendo três, porque eu achei que é uma espécie de valor ideal e número ideal, porque você pode realmente saltar em detalhes e ver tantos grandes detalhes e pequenos detalhes como você quiser. Então não vamos começar com esta tela à esquerda aqui, e eu vou criar uma tela inicial simples. Então, o que eu faria é desenhar uma barra de dedão bem aqui, por exemplo. Vou para o local no meio. Eu vou usar o ícone de pesquisa aqui, e eu vou usar o menu Ícone aqui à esquerda porque as pessoas vão ser
capazes de bater, pesquisar e procurar, obviamente. E isso vai ser classificada fora da linha do tempo ou uma página de mídia social ou algo assim. Então, as postagens de seus amigos vão aparecer aqui mesmo. Então agora vamos começar com o Post e eu vou desenhar um bom, ser quebrado Ingle assim, e ele vai até aqui até o bar de cima. Então, primeiro à esquerda, eu vou desenhar um ícone de pessoa. Então vai ser a imagem de um nome de pessoa da pessoa e, obviamente, o tempo, por exemplo, quando palavras dispostas feitas e eu vou fazer os três pontos bem aqui à direita, por exemplo,
para indicar que você pode, digamos, abrir isso para mais informações agora, abaixo disso, incluir,
digamos, vamosincluir,
digamos, uma linha fora do texto, como então talvez uma descrição para a imagem e abaixo disso, o imagem em si. Então vai ser assim, por exemplo. E digamos que se você vai desenhar essas montanhas que estavam desenhando anteriormente para indicar que esta é a própria imagem. Abaixo disso você vai ter três ícones. Então vamos ter ciclo cardíaco com o contador. Vamos ver, 125. Nós vamos ter o magnata comum,
digamos 36 nós vamos ter que compartilhar ícone aqui mesmo. Você pode usar qualquer ícone do que você quer, e eu vou simplesmente digitar compartilhar aqui. Não, nós só vamos cortar nosso retângulo assim para indicar que esse é o post em si agora lido e criar o segundo reitor será baixo. Vou usar a barra de TEP aqui e desenhar um bom grande estão aqui primeiro. Eu não posso. Eu vou desenhar a casa dele, então eu vou desenhar uma casa agradável e
simples que eu tenho que gostar, então nós vamos usar o tipo comum em. Então talvez esta seja a parte verificada. Talvez esta próxima parte possa ser uma parte de membro, então onde estavam suas localizações? Onde quer que você se mova e, finalmente, faça o perfil aqui à direita. Agora vamos desenhar. A segunda carta aqui vai ser exatamente a mesma que a primeira carta para que possamos ir até aqui. Temos aqui o nome de uma pessoa, Time no posto. Como você pode ver, é muito simples quando você criou um tão duplicado, basicamente e criar outros que corta isso com imagem bem aqui abaixo. Então não vamos precisar soltar esses ícones de compartilhamento abaixo porque não temos nenhum espaço. Mas você pode simplesmente indicar que eles vão bem aqui, por exemplo, como em proteger compartilhar aqui, não para a próxima tela. Vamos usar exatamente a mesma configuração para pesquisar logo e menu Michael e é, como eu disse em vídeos anteriores, e você pode ver aqui isso não tem que ser perfeito. Ele pode ser realmente rabiscos, mas ele precisa transmitir a mensagem para sua equipe e quando você está enviando isso para o seu cliente, então basicamente o que vai acontecer nesta próxima tela é a pessoa vai estar tocando este cartão ou esta imagem, e a imagem vai expandir um pouco na próxima tela, dando-nos mais imóveis nesta tela, para mostrar a imagem um pouco melhor para que possamos talvez deixar um comentário ou algo como Isso. Então não vamos ter esse amigo na tela porque, como você disse, está expandido. Então temos a mesma configuração para dizer aqui para aqui. Mas aqui temos a imagem maior. Sabe, antes de eu ir até o fim,
eu vou simplesmente derrubar aquela barra mais uma vez só para que eu possa me limitar com o espaço que eu tenho e mais uma vez, isso porque eu não tenho que ser perfeito se você quiser para economizar um pouco de tempo. Como você pode ver, eu cometi um erro aqui, mas ele fala. Se você quiser economizar um pouco de tempo, simplesmente levou-os Aziz melhor como você sabe, mas basicamente tudo o que eles têm a fazer é transmitir a mesma mensagem aqui. Então vamos estender esta imagem até aqui. Digamos que eu acho que isso é bom em torno dele fora e simplesmente desenhar um formas maiores. Então você fez bem aqui para indicar que é uma imagem maior. Obviamente, não, vamos fazer esses ícones. Então, 125, este é para um comentário 36. E, finalmente, estes seta para a parte e abaixo. Aqui vamos desenhar em um campo para o próprio comentário. Então eu estou indo para um grande retângulo como Então, por exemplo, nós vamos colocar em um rosto sorridente apenas para indicar que a pessoa pode adicionar esses emojis,
por exemplo, por exemplo, até que os direitos direita, uh, Colman, por exemplo, e finalmente este ícone, que indica enviar ou postar Hari uma vez, e é basicamente a nossa tela. Talvez em vez disso, nessa busca Mike, talvez possamos incluir um ícone de trás. Digamos que sim. É por isso que os quadros de arame são ótimos, porque você pode simplesmente entrar e remover qualquer coisa que você não gosta. Você tinha aquela coisa branca para comprar em todas as livrarias ou algo assim. Você está encontrando seus suprimentos para cobri-lo, se você quiser. Se você não quiser, ou se você estiver indo com um lápis, você pode simplesmente remover a navalha de lápis e, em seguida, simplesmente acreditar no espaço para sua seta. Mas você também pode fazê-lo assim porque todo o ponto dos quadros de arame, como eles disseram várias vezes ao longo dessas lições, é certificar-se de que eles são rápidos. Certifique-se de que você pode gerar com rapidamente e certifique-se de que você pode ir para trás e para a frente entre suas idéias e saltar suas idéias entre você e seu cliente. Agora, finalmente, neste último, vamos mostrar a tela de perfil. Então, mais uma vez eu vou soltar esta barra com logotipo de pesquisa e menu e este homem você pode, por exemplo, expandir para algumas coisas diferentes porque, por exemplo, bem aqui na parte inferior ali, nós não têm configurações. Não temos pagamento. Não temos nenhuma dessas coisas. Então é aí que entra o cardápio. Não, vamos desenhar uma imagem bem grande aqui, assim este pode ser o nome. Este pode ser o local, por exemplo. Não, nós vamos desenhar em três abas como Então talvez você queira incluir imagens diferentes. Digamos que de álbuns diferentes, e esta será a nossa facada selecionada, então talvez possamos preenchê-la também para indicar que ela está selecionada como você pode ver
aqui . E, finalmente, vamos desenhar algumas imagens aqui. Então talvez possamos criar um ótimo para três imagens pode ser criativo até que pode ser ótimo, pois é realmente com você. Você pode usar isso, Mansour ótimo. O que indica que estes dois são assim. E então esta é uma grande imagem e, em seguida, trocá-los ao redor. Então, realmente, você pode fazer o que quiser aqui. Na verdade, cabe a você. Talvez você possa adicionar uma descrição. Talvez você possa adicionar um parágrafo sobre a pessoa aqui. Mas eu não vou fazer isso. Vou simplesmente desenhar em um grande bar bem aqui no fundo mais uma vez. Então eu fui em comentários, ícone, pagando mapa. E finalmente, porque estamos no perfil, vamos preencher o ícone do perfil, o que mais uma vez indica que este é o estado clicado deste perfil. Eu ligo para que você possa fazer algo assim. Agora você pode ver a diferença entre este e este aqui porque este está preenchido . E é isso que estamos tentando transmitir. Finalmente, quero dizer, nós podemos adicionar mais três imagens aqui para que tenhamos um bom, grande, grande fora imagens. Ou você pode simplesmente desenhar uma boa imagem grande como esta do que segunda imagem abaixo 30 abaixo
parece que fizemos aqui mesmo, apenas sem todos esses quadros e informações. Agora, se você não quer perder tempo retirando isso, então você pode simplesmente fazer isso. Não indique que estas são as imagens porque, como você pode ver é muito adotivo. E como essas formas estão se repetindo, talvez você possa simplesmente fazer isso para a imagem. Então seu cliente ou seus companheiros de equipe, por exemplo, ou você mesmo sabe um pouco mais tarde o que é isso. Então isso é basicamente é Este é o design que vamos usar para criá-lo em todos esses outros Softwares. Talvez não vamos fazer os três. Talvez eu possa fazer isso apenas uma vez para acelerar um pouco o processo, porque em alguns desses eu não posso importar esses ícones. Talvez eu possa usar alguns outros ícones e vendido, e eu vou mostrar-lhe isso um pouco mais tarde no curso. Mas basicamente é assim que nosso quadro de arame vai parecer e mais tarde, Quando chegarmos ao Adobe Xdd, vou mostrar-lhe como você pode facilmente adaptar esses quadros de arame e como você pode incluir algumas cores adicionais. Talvez você possa incluir alguns ícones adicionais. Talvez não a incluíssemos aqui. Vou incluir algumas imagens, obviamente e assim por diante. Então é isso que eu vou mostrar a vocês quando chegarmos ao Adobe X parte agora quando se trata desta parte. Mais uma vez, eu realmente encorajo você a tentar transmitir suas imagens melhor que você pode. Mas como você viu com essa seta para trás, às vezes você vai se lembrar das coisas como seu desenho. E esse é o ponto principal fora do processo de arame é explorar. Nada disso é definitivo. Nada disso é perfeito porque não precisa ser perfeito. E é realmente sobre exploração e sobre encontrar as maneiras e métodos onde você pode incorporar esses elementos para que eles fiquem ótimos na página, e eles funcionam logicamente basicamente, então eles são fáceis de entender seu fácil de usar, e eles ficam ótimos na página. Há basicamente isso para esta armação de arame, em parte no papel, realmente encorajada a começar a explorá-la. Ele pode ser um monte de diversão, e pode ser processo muito rápido para aprender mais sobre o seu design e todo o processo fora do seu aplicativo antes mesmo de saltar para um software favorito. Falando de software, na próxima lição, vamos começar a explorar algumas dessas opções gratuitas e pagas, e mais tarde vou mostrar como você pode fazer isso em adobe eggs deep e incluir imagens
diferentes e incluem cores diferentes, talvez até algumas bordas de sombras de fundo. E vamos explorar essa parte mais tarde no curso, então nos vemos na próxima lição.
8. Ferramentas de redação digital: nesta seção do curso, vamos explorar ferramentas de enquadramento de fio digital e quais são as nossas opções de enquadramento de fio digital que você pode ter agora. Há muitas opções diferentes lá fora, mas eu vou apenas dar-lhe quatro ferramentas diferentes para a loja, e então nós vamos terminar em um Toby X'd. Você também pode usar a mente figura. Você também pode usar esboço, e há muitas, muitas,
muitas ,
muitas outras ferramentas como o Illustrator, por exemplo, e assim por diante, para que você possa usar qualquer ferramenta que você possa achar adequada para suas necessidades, seus projetos e seu negócio, como eles disseram várias vezes em um fio de papel enquadrando parte deste curso. Eu realmente adoro Adobe X'd por causa de sua versatilidade e sua funcionalidade. E isso é o que eu escolho para o meu enquadramento de fios e para o meu, hum e UX trabalho. Mas você pode escolher o que você pode encontrar adequado para você agora ferramentas que estamos indo para explorar além de quatro loja e adobe ex d r arame ponto cc apenas em mente, Mark plus e balsâmico no final. Então nós vamos basicamente explorar todas essas ferramentas, e eu vou mostrar a vocês todas elas têm versões gratuitas, e algumas delas têm versões premium. Mas eu acho que todos eles têm versões de oração, mas você pode começar com todas elas de graça. Você pode explorá-los e ver se há o ajuste certo para você. Ou se não, você pode simplesmente explorar algumas dessas fezes de adobe, figo, MMA ou esboço, Então vamos começar.
9. Ferramenta 1: primeiro lugar. Ainda assim, vamos explorar seu quadro de arame CC e seu primeiro porque é o mais limitado todos
eles. Agora, quando se trata de longe da CC, você pode escolher seu dispositivo aqui mesmo. Eu vou escolher a web porque é apenas a mais fácil e a mais branca fora do shopping. Você pode simplesmente estender para baixo se quiser incluir vários dispositivos, e seu dispositivo pode ser tão branco ou tão estreito quanto você quiser. Então, como você pode ver, você pode fazer isso e você pode até mesmo fazer isso a partir do site agora controles. Isso deve fazer você desfazer. Mas se não, você pode simplesmente estendê-lo de volta assim, e ele se encaixará na posição e no lugar. Você tem alguns comandos aqui, como desfazer ou rádio, e você tem mais algumas opções aqui. Você tem essas configurações aqui, e quando se trata de salvar quando você clica,
salvar ele vai levá-lo aqui para que você tenha um mictório público, que você pode copiar e compartilhar com sua equipe. Eles podem acreditar nos comentários, como você pode ver aqui, e é gratuito para projetos privados. Molduras de arame clicáveis empacotador Malta, páginas-mestre
reutilizáveis. Exportações PDF e B N G. Então, se este é o ajuste certo para você, então vá em frente e escolha isso e comece de graça agora para começar com nossas armações de arame. Como disse, é extremamente limitado como uma ferramenta. Então, o que você tem que fazer, basicamente é que você tem que desenhar essas opções, e eu vou fazer isso para nossos ícones que eu vou pisar. Desenhe algo assim. E como você pode ver, você pode escolher a opção de texto, e eu vou simplesmente subir sendo logotipo. Se você se lembrar do que fizemos antes, e eu vou clicar neste controle C e, em seguida, controle V para copiar e colar. E eu vou usar isso para nossas opções de menu para que você possa ver como ele é limitado. Basicamente, você não tem nenhuma opção, pelo
menos não naquelas que eu fundei que talvez você possa posicionar ícones dentro imagens de
posição e assim por diante. Mas como eles disseram, algumas pessoas podem achar que é fácil de entender e fácil de usar, então é basicamente para isso que você pode usá-lo. Então não vamos simplesmente alinhar isso e não perder mais tempo. Esta ganância é uma ótima opção. Mas você pode fazer isso, por exemplo, e vamos fazer isso. Vamos incluir uma imagem porque essa será a imagem de uma pessoa. E vamos talvez duplicar este texto. Talvez possamos posicioná-lo aqui. Chame-lhe um nome e você pode reduzir o tamanho deste texto assim. E talvez possamos fazer outro e chamar este tempo fora dos postos, talvez, ou algo assim, e talvez possamos até reduzi-lo ainda mais e posicioná-lo aqui. Agora temos mais um ícone aqui. Vou simplesmente desenhar um retângulo grande e agradável. Talvez eu possa incluí-lo para ser um círculo ou algo assim. Eu vou posicioná-lo aqui, então, abaixo disso, nós temos a descrição fora da nossa imagem, então eu vou simplesmente desenhar um grande retângulo como este, incluir um texto, e isso vai para ser a descrição fora da nossa imagem, basicamente, então abaixo disso, talvez eu possa incluir a imagem em si. Então algo como isso basta clicar na imagem é que você pode ver algumas dessas ferramentas são realmente fáceis de usar. Enquanto outros são realmente complicados agora para os ícones. Talvez possamos usar esta forma. Possivelmente posicionar isto para estar bem aqui. Talvez eu possa ligar para a minha tecla Shift ou algo assim e posicioná-la aqui. Então talvez eu possa copiá-lo. Ouça politicamente encurralado. Se ele quer clicar, seu excede extremamente irritante. Então talvez eu possa selecioná-lo como o controle C V para fazer uma duplicata dele, eu vou posicioná-lo bem aqui, então controlar a mais uma vez para outra duplicata. E isso vai ser basicamente coração. Isso vai ser um comentário, e isso vai ser compartilhado. Agora você pode usar o texto que viu, mas eu não vou incomodá-lo com isso. E uma última coisa que eu quero fazer simplesmente desenhar um grande retângulo em torno de tudo. Então algo assim e eu posso posicionar este retângulo para estar em algum lugar por aqui. Talvez assim, e você pode clicar aqui. Ele diz em torno de organizar elementos e você pode enviar este elemento dedo do pé de volta, e então você pode brincar com todos esses elementos adicionais e você pode muito posicionado, e no entanto você quer ter certeza de que tudo está no centro como este, você pode clicar aqui dedo do pé, remover esta linha de texto para que ele se encaixe e nós vamos talvez posicionar convidados como então talvez
possamos mover isso sobre. Posso clicar aqui, posicionar isto aqui, por exemplo. E isso é basicamente para esta forma. Agora você pode simplesmente selecionar todos estes, como então hit controle C Control V para ter uma duplicata sobre como assim Porque se você se lembrar de nosso papel via quadro, isso é o que fizemos. E talvez possamos selecionar tudo isso. Vamos ver se funciona. Ele não faz. Então você tem que basicamente selecionar todos eles dedo do pé, movê-los. Como eu disse várias vezes, é realmente complicado, desnecessário, e é muito chato fazer todas essas coisas. Mas basicamente, se você quer algo que é extremamente simples, como isso ainda é realmente que você pode fazer sair impune com essas coisas. Uma última coisa que quero mostrar aqui é como podemos adicionar nossos ícones aqui na parte inferior? Como pode ver, tem algo estranho acontecendo aqui. Mas deixe-me ajustá-lo rapidamente como então talvez eu possa trazer isso ainda mais longe assim e para os ícones na parte inferior. Talvez eu possa usar alguns desses círculos. Talvez eu possa posicionar tudo por aqui. Aperte o controle C Controle V mais algumas vezes assim, e eu posso ter meus quatro. Eu construo o fundo algo assim. Então talvez eu possa selecioná-los todos, e você pode ver que ele quer criar uma nova forma. Não deixa com você selecionar essas formas, disse
Aziz. É extremamente complicado de navegar, mas mais uma vez é gratuito. E como você pode ver, nós fizemos e completamos nossa simulação. Então, basicamente, você terá que fazer muitas explicações aqui porque, como eu disse, você não pode incluir ícones ou imagens ou algo assim. Mas como você pode ver, ele faz o trabalho. Então, se você quiser explorar algo como este arame frame dot cc e eu vou colocar o link
no dedo pdf. Todas essas ferramentas, todos os recursos que vou usar no discurso para poder simplesmente acessá-las com um clique. Então, por que Frame CC é o primeiro pedágio? E no próximo vídeo, vamos passar para a próxima ferramenta para que possamos explorar algumas ferramentas adicionais que podemos usar para enquadramento de fio on-line, então eu vou vê-lo lá.
10. Ferramenta 2: próxima ferramenta que vamos usar é Mach plus, e você pode ver que você pode usá-lo gratuitamente por 15 dias antes de sua compra. Então, se você não está interessado nisso, talvez você deva encontrar algumas versões gratuitas adicionais ou outro software gratuito. Mas deixar mostrar rapidamente o que ele oferece para que você possa ver tem integração rápida. Você pode usá-lo para prototipagem. Você pode usá-lo para incluir imagens, então é muito mais elaborado do que a ferramenta anterior, que eu mostrei a vocês. Então, quando você baixar e instalar isso em seu computador, aqui está o que você vai obter para que você possa escolher o dispositivo que você quiser. Toe criar suas armações de arame para você pode simplesmente criar rapidamente. E isso é o que você vai conseguir por trás disso. Então aqui está o que parece. Então aqui à esquerda, você pode escolher esses componentes muito achados, e você pode clicar aqui mesmo sobre essas extensões. Você pode escolher o layout desejado. Então, como você pode ver, é extremamente complexo, extremamente complicado, mas não precisa ser. Você pode simplesmente desenhar como quiser. Então aqui temos uma barra de navegação. Então talvez eu possa arrastá-lo e soltá-lo aqui. Mas ele está me mostrando a barra de navegação android e eu quero I barra de navegação US. Então, se você não quer usá-lo, então você não precisa. Mas como você pode ver, nós temos a barra de ação bem aqui, e isso é o que nós vamos usar. Então, em vez da barra de ação, talvez a visão da CE seja um local aqui, pressione enter ou return. E isto é o que vamos conseguir. E se você tiver quaisquer ícones adicionais que você pode usar PNG ou SPG, você pode arrastar e soltar seu ícone aqui. Então você pode simplesmente clicar duas vezes aqui e abrir isso. Você também pode clicar aqui para ver essas camadas adicionais e assim por diante. Mas você pode ver que temos a barra de ação bem aqui, e temos todas essas configurações adicionais para que você possa até mesmo alterar seu nome de texto
aqui para que você possa alterar a cor do ícone aqui mesmo. Você pode escolher os telefones. Você pode escolher a cor do fundo e assim por diante. Então você tem todos esses estilos diferentes para que você possa clicar nesses estilos adicionais
para ver o que você deseja usar. Foi, você pode ver bem aqui. Vamos continuar explorando e encontrar algumas coisas adicionais que podemos incluir. Então temos todos esses elementos estáticos. Como você pode ver aqui nós temos os gráficos. Temos a marca levantada. Então, se você quiser desenhar algo e depois compartilhar com sua equipe, você pode fazer isso também. Então você pode simplesmente arrastar e soltar o que quiser dentro. E aqui temos o ícone, e talvez eu possa posicionar. Está em algum lugar por aqui, mas eu não quero o ícone para que eu possa simplesmente bater. Excluir. O que eu quero é a imagem para que eu possa arrastá-la e soltá-la dentro. Você pode segurar sua tecla Shift e posicioná-la bem aqui porque isso vai ser uma imagem de pessoa. Então vamos arrastar e soltar algum texto aqui e para a criação de rótulos. Talvez possamos incluir o nome fora da pessoa. Em algum lugar por aqui, você pode acertar o controle. Controle C mais uma vez. Parece ser a outra ferramenta. Talvez um tempo livre, postar algo assim, e você pode segurar seu dedo do pé chave de mudança, reposicioná-los para que já o banco é muito melhor do que a ferramenta anterior, porque você tem muito mais controle sobre esses recursos. Então isso vai ser uma descrição fora de nossa imagem bem aqui e abaixo que ele
vai dedo do pé conter a imagem em si. Então simplesmente arraste e solte sua imagem aqui. E talvez eu possa reposicioná-lo para estar em algum lugar por aqui. Vamos ver assim. E agora temos que incluir alguns ícones adicionais. Então, quando eu clicar aqui, você vê, nós temos todos esses ícones. Então, se você se lembra, nós tivemos o coração, nós tivemos o comentário e nós temos o ícone compartilhar. Então vamos procurar o coração. Aqui está, e sempre povoado à vista. Agora o que precisamos é de um texto. Mas antes de passarmos para a dívida, vamos incluir outros ou comentários. Caixa de seleção. Aqui está. Mas não me avise sobre isso de novo. Então aqui está o comentário bem aqui. E precisamos incluir uma busca adicional do meu consulado para o coração. Como você viu, você vai ter todos esses pop-ups adicionais irritante para mostrar-lhe que você realmente precisa Teoh comprar isso ainda. Mas se você não quiser. Você pode simplesmente continuar por 15 dias como o mostrar-lhe em seu site. Então vamos duplicar isso assim E agora vamos tentar comentar assim. E agora ele é duplicado mais uma vez e nós vamos digitar em compartilhamento assim. E agora vamos saltar para o texto para que você possa clicar aqui e arrastar e soltar subtexto. Então, para o coração, vamos ver 125 assim e você pode duplicá-lo. Então controle C controle re posicionamento aqui. Talvez possamos digitar “Não”. 86 vamos dizer e para este texto, talvez possamos digitar compartilhar como ele é. Então algo assim fazendo capital s assim e você pode segurar a tecla shift para selecionar ambos e dar-lhes um pouco mais de espaço. E isso é ótimo porque você pode ver todo esse espaçamento acontecendo, e você pode simplesmente selecionar todos eles e simplesmente ajustar o ajuste do dedo do pé como quiser. Então, como eu disse isso já é um dedo melhor do que o anterior, que eu mostrei a vocês. Mas se você eu não quero pagar por isso, você pode simplesmente usar o anterior ou encontrar ferramentas adicionais que você deseja usar. Agora precisamos de uma Nikon como esta aqui. Talvez possamos usar este, mas não para incomodá-lo e desperdiçar mais tempo que simplesmente selecionar tudo isso e ver se podemos agrupá-los assim. Então simplesmente aperte o controle G. e vai agrupá-los. E você pode renomear seu grupo assim e para o nome fora do grupo. Talvez possamos digitar, por exemplo, em sua vida assim. E talvez possamos duplicar isso para que possamos copiar. E talvez possamos colar aqui. Ou talvez você possa fazer isso daqui. Então controle C controle V assim. E isso vai ser uma imagem para, por exemplo, assim e muito magoado. Temos nosso layout pronto para usar, e você pode compartilhar isso com pessoas da sua equipe ou com outros designers. E você pode salvá-lo daqui. Você pode exportá-lo, por exemplo, como G, e você pode compartilhar isso com seus clientes. Mas uma última coisa que precisamos aqui no fundo são as nossas opções. Então, vamos incluir isso. Então agora vamos incluir nossos ícones. E daqui eu vou procurar por casa. Aqui está. Eu vou clicar e eu vou posicioná-lo bem aqui, abaixo na parte inferior Controle de Controle C Veto. Faça uma duplicata disso. E aqui vamos usar esse comentário como então ele vai preencher e você pode alinhá-lo assim. Aperte o controle C Controle V e vamos usar o mapa. Talvez isso tenha mesmo a dor que faz e finalmente controle C Control Re para o perfil. Aqui está, e talvez possamos usar a morte 1. Então, como você pode ver, este banquinho é realmente fácil de usar uma vez que você obter o brilho pendurar. E esta versão gratuita pode realmente levá-lo lá. E isso pode realmente ajudá-lo a explorar este processo de enquadramento de fios no formato digital, como você pode não notar. Ou se aconteceu. Eu não criei o quadro em torno dele porque eu acho que ele não precisa dele porque ele mostra essa luz grande, hum, bar em torno dele. Então eu acho que vai olhar muito desordenado bem aqui. Então, como você pode ver É extremamente fácil de usar estes, e é extremamente fácil trabalhar em simulação plus. Então, mais uma vez, se você gosta desse tipo de coisa, se você quiser explorar este banquinho um pouco mais, você pode. E se voltarmos para aqui, deixe-me ver os preços. Eu estou usando esta marca mais B r, que é o que eu baixá-lo, e você pode ver o quão caro é, basicamente, é $200 por ano. Então, é muito mais caro, na minha opinião, do que fezes de adobe, por exemplo, para você
possa usar um doce off para Jules, eu acho, por US $19 por mês, então isso é já quase muito mais barato. 10. Isto. Mas você pode se safar com a versão profissional fora do Adobe Exit, por exemplo, porque o conjunto completo de adobe é muito mais caro, obviamente, mas mais uma vez, ele lhe dá muito mais opções. Mas você não precisa pagar pelo Adobe X T também. Você pode usar a planta livre para sempre. Basicamente, você é apenas limitado com algumas opções fora, mas eu só queria mostrar-lhe que você tem essa opção também,
Então, se você quiser explorá-lo. E se você quiser cavar fundo em Mark plus, lá você tem, você pode baixá-lo e eu acredito que o link em um arquivo pdf, que você pode baixar e clicar no link e, em seguida, basta visitar este site e baixar Moke plus e tente por si mesmo mais uma vez. Como eu disse, são 15 dias de teste gratuito, então confira. Você não tem nada a perder porque é um teste grátis. E talvez você possa até gostar. Então é isso que foi para a marca mais e eu vou te ver no próximo vídeo.
11. Ferramenta 3: Na porta ao lado, eu vou te mostrar. É chamado apenas em mente, e eles têm este quadro de fio livre até que para projetos Web e móveis, você pode ver que funciona no Mac é Bella no Windows, e você pode clicar aqui para baixá-lo gratuitamente. Eles vão pedir-lhe uma conta gratuita, e assim que tiver 15 dias de teste gratuito acabar, sua batida continuou com o Plano Grátis para sempre e o Free Forever. planta só cobre este enquadramento de arame para o qual é basicamente o que estamos interessados, mas eles têm todas essas outras ferramentas. Então eles têm você. Tenho filhos que eles têm. Você pode ver requisitos de colaboração móvel privada, integrações com outras ferramentas e assim por diante. Então, por tudo isso, você terá que pagar. Mas para o enquadramento de fio básico para você é capaz de usar isso de graça. Então, se eu rolar até aqui, você pode ver que você pode criar protótipos de alta fidelidade. Você pode ver para que serve. Você pode incluir imagens, e isso é o que é ótimo. É que você pode adicionar esses campos interativos, por exemplo, formulários
interativos, e você tem todos esses elementos pré-preparados que você pode simplesmente arrastar e soltar em incluir em seus próprios projetos. Você pode ver algumas empresas que estão usando. Você pode ver como ele se parece depois de emular, para que você possa basicamente visualizar seu protótipo e ver como ele funciona. E é para todas essas coisas básicas, como você pode ver aqui mesmo preenchendo os formulários, preenchendo alguns desses calendários,
por exemplo, por exemplo, assim por diante você pode arrastar e soltar imagens dentro você pode cortar imagens incluem diferentes fundos, estilos
diferentes, cores e assim por diante. E você pode ver que você pode integrá-lo com todas essas ferramentas, incluindo Adobe X'd, e você pode ver que você pode experimentar todos os recursos por 15 dias,
e você pode, em seguida, ser alternado para livre adição para sempre. E você pode ver a diferença entre livre e profissional aqui também. Eu estava de licença. Vou deixar o link no arquivo pdf, e você pode simplesmente acessá-lo e depois ler todas essas coisas. Então, para começar, é
assim que Justin pode parecer. E como eu disse, você pode importar novos desses arquivos, ou você pode começar com o novo protótipo. Você poderia simplesmente rápido lá, e então você pode escolher entre todos esses dispositivos diferentes. Você pode ir da esquerda para a direita para alternar entre os dispositivos porque eu estou mostrando a você
exemplo de iPhone X. Com isso ainda não no topo. Vamos simplesmente selecionar isso e você pode começar com todas essas pessoas diferentes
elementos papagaio . Mas vamos simplesmente começar com orientação vazia em Retrato Click Finish. Ele vai começar a carregar esses widgets e Justin mente protótipo er e tudo isso eu estou mostrando neste vídeo é um aplicativo desktop, então você tem que instalá-lo em seu computador. Mas o problema é que ele está tirando todos os ativos de dentro do software da Internet. Então, como você pode ver, está tomando. É hora de carregar quando eu vou te mostrar. Quando começarmos a criar nosso layout e começarmos a importar nossos ícones, vai levar muito tempo. E isso é na minha opinião. A pior coisa possível sobre este software é que ele está tomando muito tempo fora, então
imediatamente você pode ver que ele parece muito mais limpo e muito mais agradável do que o exemplo anterior que eu
mostrei no vídeo anterior, mas ainda assim, Não parece tão complicado. Parece familiar de alguma forma, porque você pode encontrar todas essas ferramentas em todos esses outros Softwares. Então, para começar, vamos correr rapidamente e ver o que tudo faz. Então você tem suas ferramentas básicas aqui, e se você passar o mouse, você não pode ver o que tudo faz. Então você basicamente tem que clicar e você pode ver que isso é uma grande desvantagem, na minha opinião. Mas você pode basicamente ir arquivo e você pode exportar para documento, e você pode exportar para cães ou documentos personalizados, e você pode. Então você pode nos salvar imagens, e então você pode compartilhar com seu cliente e assim por diante. E basicamente o que você sente aqui é ver no dispositivo. Então você tem que instalar o aplicativo em seu telefone celular, e você pode então conectar este software com o seu APP em seu telefone celular. Em segundo lugar, diretamente, visualizá-lo no formulário móvel e você também pode simular,
Então, quando você clicar ali mesmo, assimilação será aberta. E isso é o que eu mostrei no exemplo deles. Então deixe-me encontrá-lo rapidamente. Aqui está. Este é o simulador. Então, uma vez que você terminar com seu projeto. E enquanto você está projetando, você sempre pode voltar aqui e conferir dentro do simulador e ver o que você fez. Então, basicamente aqui no topo, você tem sua barra de ferramentas básica. Você tem comentários de interface de usuário, cenários de mapa
lateral e requisitos. Como eu disse, esta é apenas a versão gratuita, e todos estes estão vindo uma versão pá. Então você tem que pagar os comentários de acesso do site do seu cliente, mapas em áreas e tanto tempo aqui, você vai ver os itens, e este é basicamente o painel de camadas. Mas apenas a sua própria versão ruim em poderia dizer assim aqui você tem esses regentes, e esta é a principal questão que eu tenho com este aplicativo é todos esses widgets são um carregamento
da Internet. Basicamente, embora isso possa ser uma coisa boa para todos vocês com velocidades de conexão à Internet mais lentas, será terrível porque vai começar a levar muito tempo fazendo todas essas coisas básicas. Mas eu acho que é ótimo ter essa opção apenas eu achei que ele é extremamente lento e extremamente TD, por isso aqui é alguns desses elementos básicos. Nós temos componentes IOS, e você pode ver todos esses lá em baixo e você pode ver alguns ícones básicos de íris bem aqui. Então o que precisamos aqui é que vamos precisar de um pouco. Vamos ver formulários e controles. Talvez esteja lá. Não é. Então talvez seja barras, menus e guias porque precisamos da barra de parada aqui e basicamente você basta clicar nele, arrastar e soltá-lo como um show você No exemplo anterior, vamos digitar no local aqui. Se você se lembrar de um exemplo anterior e um bom, simples del clique aqui e excluir este. E em vez de procurar um ícone de pesquisa, talvez eu possa fazer isso. Vamos descer todo o caminho. Aqui está a busca. Você pode simplesmente arrastá-lo e soltá-lo na posição aqui mesmo. Eu vou empurrá-lo no lugar apenas um pouco, e eu vou simplesmente em excluir este ícone. Basta clicar, excluir e, em seguida, simplesmente, você pode segurar sua tecla shift e simplesmente não isso, e você pode ver que ele está fora da parte superior da barra para que você possa simplesmente arrastá-lo para dentro do topo são. E agora vamos continuar a criar nosso layout. Então a primeira coisa que precisamos é de uma imagem, então eu vou rolar todo o caminho até aqui. Vá para o básico. Aqui está a imagem que você pode simplesmente arrastar e soltá-la dentro da posição aqui para que você possa ver imediatamente. Esta é uma ferramenta muito mais fácil de usar do que a anterior que eu mostrei a vocês. Vamos arrastar o texto. Vou digitar o nome, por exemplo, ou o nome da pessoa. Vamos chamá-lo assim. E o que é ótimo nisso é que você pode simplesmente aumentar ou diminuir o tamanho. Então, por exemplo, vamos usar 18. Mas acho que é muito grande. Vamos com 14 você pode ir controlar C Controle V para fazer uma duplicá-lo. Posicione-o bem aqui. Talvez fazer isso menor. Eu me importo. Então, tempo fora do posto. Digamos que apenas para que saibamos o que é, e você pode selecionar e ousado mantendo o deslocamento e simplesmente posicioná-los no meio, assim você pode até ir mais longe e reduzir isso ainda mais a algo assim. Então posicione-os por aqui. Qualquer coisa que seja boa. O que precisamos agora é do ícone do menu. Então vamos descer até que eu veja aqui e deixe-me mostrar-lhe rapidamente. Então, se você for aqui, você tem essa busca. Clique lá e confira quanto tempo leva para encontrá-lo. Então eu vou simplesmente digitar no menu. Eu terminei de digitar, e você pode ver quanto tempo leva para encontrá-lo. E este não é o milho “oi “, que eu estava procurando. Então, quando eu clicar aqui, clique na minha tecla backspace. Você pode ver quanto tempo leva para voltar. Você também pode clicar neste X, mas você pode ver que ele vai começar a carregar. Vai começar a apagar. Então, basicamente, toda
a volta está indo para o dedo do pé para cima, levando a pausa do vídeo até que ele se limpe. Então, uma vez que isso acontece, você tem simplesmente rolar aqui. Então encontre o ícone que você está procurando. Então deixe-me ver qual deles é. É este. Então, basicamente, queremos incluir isso mais. Eu não posso aqui. Vou empurrá-lo para a posição. Vou duplicar este texto. Posicione-o por aqui. bom chamá-lo de descrição fora de você, Mitch, que é postado, por exemplo, algo assim. Então o que precisamos é de uma imagem. Então eu vou simplesmente arrastá-lo e soltá-lo em posição em algum lugar por aqui. Estendido até aqui para que você possa ver imediatamente. Este é um exemplo muito melhor do que um vídeo anterior que eu mostrei a vocês, mas ainda extremamente lento e extremamente tedioso para fazer todas essas coisas. É por isso que adoro o Adobe X'd. Mas nós vamos chegar a ele no vídeo mais tarde. Então eu vou arrastar e soltar meu ícone de coração. Posicione-o por aqui. Vou rolar para baixo para ver se consigo encontrar um ícone de chat. Vamos usar este para o compartilhamento e galpão é em algum lugar por aqui, eu acho que aqui é tão arrastar e soltá-lo em posição. Vou clicar aqui mesmo, duplicar este post e vamos usar 125 para isso. Talvez empurrar um pouco por aqui. Vamos usar vamos ver 84 para isso, talvez, e vamos duplicar mais uma vez para isso. Chame esse compartilhamento assim, e você pode simplesmente posicioná-lo onde quiser. E essa é outra questão que eu tenho com esses Softwares é que você não pode ter certeza absoluta onde essas diretrizes estão. E é por isso que adoro os produtos Adobe X'd e Adobe em geral, porque é extremamente simples encontrá-los. Isso é simplesmente selecionar todos estes. Vamos para aqui. Vamos alinhar centro Desculpe, não todos no centro, mas alinhar meio assim e agora eles estão alinhados no meio. Então, uma vez que terminamos, o que precisamos é de uma forma básica. Então eu vou escolher meu retângulo de arrasto. Estava por aqui,
digamos, e aqui está. Vou clicar duas vezes aqui. Chame de G. Assim como eu sei o que é. Eu vou arrastá-lo todo o caminho para baixo logo abaixo da minha imagem e, em seguida, selecionar todos esses itens como assim mantendo pressionada a tecla Shift, clique com o botão
direito e, em seguida, agrupar no painel dinâmico porque se o seu grupo no mestre, ele irá criar um mestre componente. Basicamente, a partir disso que não queremos. Nós só queremos esse grupo e vamos chamá-lo de imagem um. Outra desvantagem fora do software é uma vez que você clica duas vezes aqui, você não pode comandar A ou controlar A. Como você pode ver, ele não faz nada para selecionar este texto. Você basicamente tem que fazer isso e, em seguida, digite o seu nome, clique com o botão
direito sobre ele, duplicar, ou você pode pressionar o controle ou o comando D, e nós vamos posicionar. Está em algum lugar por aqui dizendo para eu remover um pouco para aqui até que ele se alinhe, e isso é basicamente para o nosso protótipo. Tudo o que precisamos fazer aqui é criar uma guia são então eu vou para a direita aqui para barras, menus e guias. Localize meu bar. Talvez este. Acho que vai funcionar muito bem, posicionando-se em algum lugar por aqui. E porque só precisamos de quatro, não
precisamos de cinco. Você pode clicar duas vezes dentro. Por exemplo, Basta ir para a opção C onde é atingido? Excluir e, em seguida, clique aqui e, em seguida, simplesmente estendê-lo para preencher assim Uma vez que você ouviu, você pode simplesmente renomear estes. Então isso vai ser um perfil. Isto vai ser localizações. Isto vai ser, vamos ver fechada. E, finalmente, isto vai ser o meu lar. Por isso, temos de substituir estes. Eu considero que basicamente significa vamos voltar e encontrar esses ícones para que possamos usar este para o nosso perfil ou gelo. Eu acho que vi melhor um todo o caminho para baixo, mas role para baixo e veja o que é para que você possa ver que isso está levando muito tempo fora. Basicamente, em qualquer outro software, você pode simplesmente integrar ícones e há no arrastar e soltá-los na posição. Ou se você comprou, por exemplo, e eu voltar, então você pode simplesmente arrastar e soltar isso na posição e usar isso. Mas com todos esses Softwares lá simplesmente muito limitado para o meu gosto e eles estão levando
muito tempo, vamos ver desconforto, Seiken, talvez para locais. Sim, assim o que precisamos para a conversa. Vamos encontrá-lo. Acho que está em algum lugar aqui. Vamos ver aqui ISS secando e soltá-lo. E porque não temos casa, não
posso deixar isto aqui. Então, uma última coisa que quero mostrar com este software é quando você clica. Simular vai mostrar isso no processo e abrir uma nova janela. E aqui está como essa janela se parece. Então, basicamente, você pode clicar e arrastar você pode ver. Por exemplo, se você tiver vários fora destes, vamos ver se podemos fazer isso funcionar. Está fechada. Aqui é Palumbo para duplicatas. Vamos posicioná-lo mais ou menos por aqui, por exemplo, só para ver se posso mostrar a dívida como um exemplo real assim. Mas o que precisamos é posicionar a barra de reboque no topo, assim isso pode ir abaixo dela. E se saltarmos dentro do fundo do BG e se eu ver aqui a transparência está em 0% assim que ele permanece plana. E assim que simularmos mais uma vez, ele abrirá bem aqui. E como você pode ver, você pode rolar para baixo e ver onde isso vai levá-lo porque isso não é corrigido, e você pode ver alguns problemas de alinhamento bem aqui nesses ícones. Mas como isso não é corrigido, por exemplo, eu não posso corrigi-lo no momento aqui, ou eu não posso rolar além desta barra de passos. Então, como você pode ver, há muitas, muitas limitações com o software. Mas se você quer apenas algo que você pode tentar, por exemplo, de brincar com ele, então você pode explorar apenas em mente. Eu realmente recomendo que você experimente todas essas ferramentas e apenas veja por si mesmo se você tiver tempo, apenas como os produtos Adobe,
X'd e Adobe em geral são melhores . E também esboço e invenção. Se você gosta de usar essas ferramentas no próximo vídeo, eu vou mostrar a vocês o Final One fora dessas ferramentas on-line. E então vamos passar para a loja e, finalmente, para a Adobe é onde vamos
explorar várias ferramentas que o Adobe X'd oferece a você. E eu vou mostrar a vocês como é fácil usar e basicamente dominar o
jogo de enquadramento da sua esposa . Vemo-nos no próximo vídeo.
12. Ferramenta 4: o final dessas ferramentas on-line, que eu quero mostrar-lhe uma escola balsâmico e islâmico, é talvez o dedo mais conhecido on-line para arame frames porque é extremamente fácil de
usar . É extremamente fácil comunicar suas ideias com os designers, e é basicamente uma ferramenta que seus clientes podem usar para enviar suas ideias. Então, talvez eles tenham algumas idéias. Eles os colocam no papel, mas estão avançando um passo adiante com balsâmico para criar esses
quadros de arame bonitos , que todos podem entender. E se você rolar para baixo em seu site e o que é novamente, vou deixar o link em um arquivo pdf para que você possa verificar por si mesmo. É assim que as armações de arame estão parecendo. Basicamente, eles são como esboços, e é extremamente fácil para todos entenderem. Você pode ver que eles são meio divertidos e extremamente fáceis de comunicar suas idéias, e você pode ver alguns exemplos básicos aqui. Então, o que você precisa fazer é criar uma conta gratuita, e eles vão lhe dar, eu acho, teste gratuito de
30 dias, e depois disso você pode começar com $9 por mês. Isso é útil islâmico parece. Então, mais uma vez, é extremamente colorido e extremamente tipo de desenho animado como tão basicamente aqui você tem seus quadros esposa que você pode criar é muitos deles. Como você quiser. Você vai ver as anotações bem aqui. Versões alternativas. Você pode ver todas essas ferramentas aqui no topo. Você tem a barra de fezes onde você pode escolher todas as diferentes opções, que você pode arrastar e soltar no quadro de arame. Então, basicamente, o que vamos fazer é arrastar e soltar. iPhone dentro. Você pode ver com entalhe bem aqui, e você pode posicioná-lo onde quiser. Assim, o que eu vou fazer a seguir é simplesmente escolher um retângulo arrastar e soltá-lo na posição, assim ele vai encaixar em todos os lados, e ele vai me mostrar o meio. Em seguida, eu vou colocar em um texto tão completo aqui, e eu tenho texto de feijão e vamos ver o que podemos fazer, talvez entradas de texto. Então, basicamente, basta clicar vai posicioná-lo aqui mesmo. Vou clicar duas vezes dentro e chamá-lo de centro de imprensa de logotipo, e você pode posicionar seu texto aqui. Em seguida, o que você vai fazer é usar, hum, Michael. Então eu vou começar a digitar pesquisa, clique e simplesmente posicionar tudo aqui. Assim, depois disso, podemos usar o menu, e temos essas barras para que você possa simplesmente clicar e arrastar para a posição. E você pode ver imediatamente como distal é fácil usar digitação de imagem. E você pode ver o contorno do arquivo de imagem. Imagem delineada. Só vou usar esta imagem. Posicione-o bem aqui. E mais uma vez, você pode reduzir o tamanho se quiser. Você pode segurar a tecla shift na posição que ele gosta. Então eu vou adicionar um texto mais uma vez. E eu não preciso disso. Vamos ver, que outras escolhas temos? Vamos ver uma linha de texto, talvez assim. Você Condell clica aqui e chama de centro de pessoas. E eu posso controlar o controle C. Seja mais uma vez e tempo fora post como centro de imprensa. Você pode ver como isso é extremamente fácil e simples de usar. E vamos ver. Oh, para o tamanho, cor
do texto. Podemos reduzi-lo para ouvir talvez 16. Sim, acho que fica bem depois disso, o que podemos fazer é mais desiludir, então talvez a corrente para baixo. Podemos usar isso. Ou vamos ver se eles têm esses pontos que eles têm, nós podemos usar a sua posição eles para aqui e você pode ver imediatamente. Como é o banquinho é de dois anos? Eu acho que esta é a ferramenta mais fácil de usar fora de todos esses, que eu mostrei a você. Em seguida, precisamos de uma linha de texto. Então vamos ver uma linha de posição de texto para ouvir um pequeno clique dentro. E esta será a descrição da imagem postada, talvez para um centro, e vamos reduzir o tamanho para talvez 16 para combinar com este texto. Você pode até empurrá-lo um pouco para cima. Então podemos usar uma imagem. Então, talvez este. Posicione-o aqui, e depois vou estender um pouco. Talvez assim eu vou usar o coração. Aqui está. Vamos usar delineado como assim próximo Chet ou comentário. Como você pode ver, eles têm este ícone, mas não importa. Essa é a posição aqui e talvez compartilhar assim. Posicione-o aqui e vejamos, talvez possamos duplicar este nele. Eu compartilho, assim talvez eu possa movê-lo para algum lugar por aqui. Vamos fazer o controle. C controlamos mais uma vez. Isso vai escrever em um antes, por exemplo, e vamos ver mais um. E isso vai ser Vamos ver 125 assim, e você pode ver apenas em alguns minutos. Eu já criei o que nos levou, digamos, 10 ou 15 minutos para criar nesses outros Softwares. Então esta é basicamente a chave. Você precisa gostar disso para criar esses quadros de arame rápido, fácil e fazer com que todos entendam dentro de sua equipe como isso vai parecer. Então vamos ver. Talvez possamos usar uma barra de toque ou uma barra de botões. Vamos ver aquele bar. É o fundo do trabalho. Acho que isso pode funcionar, mas acho que precisamos criar um novo. Então vamos usar um retângulo arrastar e soltá-lo na posição. Então, tudo bem, aqui, assim. Então vamos usar esses ícones em casa. Aqui está. Vou colocá-lo bem aqui. O que precisamos a seguir é Chet. Vamos usar exatamente o mesmo ícone que este. Uma posição aqui, depois mapa. Vamos ver. Mapa no mapa Maker funciona bem. Assim e, finalmente, perfil. Vamos ver, usuário posicioná-lo aqui e, em seguida, talvez simplesmente empurrou esses ícones para a esquerda e para a direita, e é basicamente isso. Você pode ver como ele se parece, e basicamente nós terminamos nossa armação de arame. O que eu posso fazer é simplesmente selecionar todos estes e, em seguida, fazer uma duplicata deles e, em seguida, fazer outro abaixo. Soto Agrupe suas camadas. Você tem que selecioná-los porque, como você pode ver, temos qualquer painel de camada. Então, como eles disseram, , às vezes você vai encontrar algumas dessas coisas, então é muito mais importante lidar com elas enquanto você trabalha. Então talvez eu não devesse ter criado isso assim. Então talvez eu possa simplesmente reduzir a sagacidade dessa entrada de texto, assim é mais fácil para mim selecioná-lo, então você pode então manter sua tecla shift e simplesmente selecionar todos esses ícones e todos esses elementos assim, e o que você tem que fazer é simplesmente ir aqui onde ele diz grupo ou você pode usar o controle G, então você tem que duplicá-lo, que é o Controle D, e então você pode simplesmente posicioná-lo bem aqui. E se eu rolar para baixo vai cobrir o dedo do pé sobre a minha barra de abas. Então, basicamente, você pode clicar aqui e enviá-lo para trás e, em seguida, simplesmente trazê-lo para a frente . E é basicamente isso. Essa é a nossa armação de arame feita. E como você pode ver, demoramos menos de 10 minutos para criar a tela, que é extremamente útil quando você está criando um monte de telas e você pode ver que é muito divertido, porque todos podem entender dentro
de sua equipe ou cliente o que todos esses elementos são o que eles significam. Mas isso ainda não é o que eu escolheria. Eu vou te mostrar para a loja a seguir, que é o maior, e sempre foi um ótimo dedo do pé. Mas ainda não é a ferramenta que eu usaria para armações de arame que ainda será Adobe X'd porque fora de sua versatilidade, e é basicamente feito para este material. Então é isso para o balsâmico. Eu realmente espero que você goste. Você pode conferir. Como eu disse, um teste gratuito de 30 dias. Você pode testá-lo e simplesmente brincar com ele e ver o que você pode encontrar com esses quadros de fio de
fundo. E mais uma coisa que eu quero mostrar a vocês é quando você clicar em mais controles aqui vai abrir isso e você pode escolher entre todos esses modelos diferentes. Você pode ver o que outras pessoas criaram. Você pode incluir cores diferentes, formas
diferentes e assim por diante, e você pode simplesmente escolher entre layout, modelos, tutoriais e assim por diante. Então, é extremamente útil. Este banco é realmente grande e um comando corretor de imóveis que você pelo menos verificar e ver por si mesmo se você gosta ou não. E uma última coisa que quero mostrar antes de terminarmos. Você tem este botão de compartilhamento aqui, e você pode compartilhá-lo com seus clientes que poderiam enviar-lhes o link, e eles podem conferi-lo. Mas obviamente você tem que pagar para fazer isso, e finalmente, você pode clicar aqui onde diz projeto. Você pode tirar uma foto. Se você tem vários fora destes Oregon pairar aqui toe exportação e, em seguida,
quadro de arame atual para estar em G ou você pode usar um fundo transparente. Você também pode usar quadro de fio para Jason aparecendo para código, o que é ótimo em trabalhar com desenvolvedores. Mas é basicamente isso. Isso é balsâmico para você. Eu realmente espero que você goste. Vá em frente, confira. Divirta-se pelo menos até que seu julgamento se esgote porque eles têm um monte desses
elementos diferentes . E eles também podem dar um pouco de dentro sobre como uma ferramenta profissional pode ser semelhante. Porque todos esses elementos você pode usá-los sozinho dentro de outros softwares que você está usando. Então, por exemplo, você pode não considerar todas essas formas diferentes. Então, quando você clica aqui, você pode ver todas essas formas diferentes, e talvez você possa ver alguns elementos que você não usou antes, e eles podem lhe dar inspiração para usá-los em seus projetos.
13. Wireframes no Adobe Photoshop: neste vídeo, eu vou mostrar a vocês como você pode criar essa mesma simulação de arame que nós criamos em todos esses outros Softwares na Adobe para uma loja. E neste vídeo eu estou usando para Shop CC 2000 e 14. Mas você pode usar basicamente qualquer outra versão. Não estou atualizando para as versões mais recentes porque não uso para uma loja para o meu trabalho principal. Eu apenas usá-lo dedo do pé, editar fotos e para manipular fotos e em algum texto quando outras ferramentas não estão disponíveis para fazer tal coisa. Porque para a loja ainda está o rei fora manipulando suas imagens. Basicamente, o que temos aqui é nosso arquivo, e você pode pular aqui para arquivar novo e essa janela vai aparecer. E eu estou usando 1920 com 10 80 em 7 para resolução. Como estamos trabalhando para a Web, você pode simplesmente clicar em OK, e ele vai criar isso para você. Isto é o que você vê aqui. Eu também estou usando esta tela, e se eu pular aqui, você pode ver que é 375 com 8 12 que é basicamente o tamanho do iPhone 10 e 11 para as telas . E eu também estou usando esses ícones Big I constante, e eu vou deixar o link na descrição se você quiser usar esses
ícones particulares , que eu estou usando seus ícones premium. Mas eu também vou vincular alguns ícones gratuitos que você pode encontrar e usar em seus projetos. Mas você pode ver um real como este porque é extremamente versátil. É extremamente bem feito. É extremamente coerente, e também tem muitas dessas categorias,
e você pode basicamente usar esses mesmos ícones para uma variedade de projetos diferentes, e eles sempre funcionarão não importa o que você esteja fazendo de volta ao nosso trabalho. Selecionei estes ícones desta parte de trás. Eu simplesmente arrastá-los e soltá-los aqui usando o dedo do pé de movimento, e eu vou usar esses ícones em nosso projeto. Eu fui para reduzir o tamanho um pouco, então deixe-me selecioná-lo rapidamente segurando a tecla shift e, em seguida, segurando minha tecla shift
mais uma vez porque eu quero torná-los agradável e pequeno porque não há realmente nenhuma necessidade para eles
para ser tão grande. Vovó foi posição semelhante e em dissidente como Então, não, o que vamos fazer é começar com Top Bar. Parece que fizemos com todos os exemplos anteriores. Você pode clicar aqui, mas eu vou clicar fora e tipo simples de logotipo que podemos usar mais tarde. É uma frente frequente. Acho que está tudo bem. Você pode simplesmente usar sua ferramenta de movimentação. Posicione-o bem aqui. Vou clicar em T e reduzir o tamanho. Vamos ver, talvez 24. Acho que está tudo bem. Fazendo centro alinhado controle mais antigo Clique aqui, mova o dedo do pé e, em seguida, simplesmente posicioná-lo onde quiser no campus. Eu vou clicar no meu ícone de menu, e eu não teria que zoom em um pouco porque é um pouco complicado para selecionar todos
estes e eu estou indo dedo do pé,
selecioná-los e, em seguida, simplesmente posicionar todos eles acima da minha tela apenas para que eu possa ver eles. Eu vou posicionar isso para estar no centro fora do meu texto e talvez, mas ver 20 pixels é bom a partir da borda direita. Eu vou renomeá-lo menu porque todos esses ícones estão vindo sem o nome, então isso é uma desvantagem. Mas basicamente é uma coisa maioritária com todos estes I compactos para vir sem qualquer significado. Então você tem que renomeá-los você mesmo. Mas está tudo bem porque para a maioria fora ícones você tem que renomeá-los. De qualquer forma, vou selecionar minha tela, posicioná-la no turno da esquerda 12 e, em seguida, renomear isso para pesquisar. Eu vou posicioná-lo aqui mesmo,
ir para a posição para o menu aqui,
selecionar todos eles, clique aqui e, em seguida, talvez empilhados no topo e, em seguida, talvez 10 ou 20 para baixo para que eu tenha certeza de que todos eles são alinhados perfeitamente como Então, agora que temos completo isso, você pode ver que isso parece muito mais agradável já do que todos esses exemplos anteriores, que é mostrado a você, e nós ainda nem começamos. Em seguida, vamos usar esse dedo retangular, então eu vou toe, criar um retângulo. Vamos ver, talvez possamos posicioná-lo para alinhar com nossos ícones, algo assim, e vamos deixar isso aqui para não, vamos publicamente podemos chamá-lo de BG. Eu vou posicioná-lo todo o caminho para baixo,
ondular tudo menos a tela. E agora vamos começar a criar nossos elementos. Então vamos começar com um círculo. Vou chamar-lhe Molitor. Desculpe, não
tive a tendência de mudar o nome, pelo que ouvi. Fui posicioná-lo por aqui. Eu vou clicar duas vezes e usar a mesma cor, e eu estou indo para o pé. Certifique-se de que um objeto, por exemplo, 10 pixels Ou podemos usar a cor mais escura. Então DDT, por exemplo. E eu vou usar o DDT para isso também. Só para que você possa ver todos esses ícones um pouco melhor. Agora, eu posso simplesmente clicar aqui. Aperte o controle C ou controle J ou Comandante. Clique aqui e digitando. Desligar o nome. Certifique-se de que deixou a linha e certifique-se de reduzir o tamanho. Vamos ver 14 obras. Bem, posição. É mais ou menos por aqui. Controle J mais uma vez. Isto vai ser postagens de tempo como assim de uma forma de selecionar ambos, mudar 12 e certificar-se de que eles estão no centro como este. Apenas certifique-se de alinhá-los corretamente. E isso sou só eu sendo um pouco irritante com tudo isso. Mas você pode, se quiser deixá-los sem alinhamento. Nós fomos posicionar isso aqui é zoom em um pouco e ter certeza que é 10 pixels. Da mesma forma, nossa imagem é a próxima. Vamos duplicar esta posição por aqui. Esta vai ser a descrição da nossa imagem Post. Só para que se sinta mais fora do espaço assim. E eu vou posicionar, por exemplo, 20 pixels abaixo. Acho que funciona bem. Como assim. E eu vou me certificar que isso talvez possamos mostrar, uh, com um esboço. Então talvez possamos usar a cor do traçado para isso, assim, mas apenas um traço menor. Talvez um que funcione bem. Se isso é algo que você quer, porque você pode então ter fundo branco, bem como,
assim, se você quiser e você pode chamá-la de sua cor BG decidiu. Então eu posso simplesmente bonitinho. Eu faço uma amostra e preciso desbloqueá-la primeiro. E depois um medalhão mais uma vez. Só para que eu não o mova e, em seguida, a tela pode ser branca. E aqui vamos nós. Se atingirmos o controle zero, você pode ver como isso se parece. Agora vamos voltar, seguir a nossa imagem. E em vez de criar novas formas e ir para controlar Jay sobre isso, vou chamá-lo de imagem assim. E vamos movê-lo para aqui, então, cacete. 12 Vou posicioná-lo por aqui, por exemplo. E então eu fui simplesmente posicionando para aqui ele controle. Clique na minha tela Lear Press V. Posicioná-lo no centro. E agora eu tenho minha imagem e minha imagem pode ser essa cor e eu posso simplesmente aquecer oito e,
em seguida, clicar aqui para remover o traço. E agora não tenho mais um derrame. E eu posso até reduzir a inteligência um pouco mais de 3 20 por exemplo,
só para que você possa vê-lo um pouco melhor e ter certeza de que ele é 20 para baixo, como então talvez até mesmo enviar. Talvez não precisemos de 20, então acho que funciona bem. E, finalmente, vamos incluir ícone aqui mesmo, display
do dedo do pé. Isto é uma imagem. Então o que vou fazer é localizar a minha imagem. Não posso. Aqui está. Ela controlaria G e então simplesmente posicioná-lo no lugar como então eu vou ampliá-lo um
pouco assim apenas para que ele indique que esta é a minha imagem em civil e eu vou mover essas duas camadas ou aqui, por exemplo, imagem que vejo. E certifique-se de que está no centro assim. Se você não gosta que ele seja tão grande, você pode manter seu turno velho e clique com o botão esquerdo do mouse para reduzir o tamanho. O que eu também preciso é deste ícone de avatar, então eu vou controlar J mais uma vez, e eu vou então selecioná-lo e movê-lo. Você pode ver que é muito mais difícil de clicar porque eles são muito pequenos posicionando bem
aqui . Em seguida, movê-lo para dentro de uma posição muito melhor aqui. Vou dar o dedo do pé. Copie isso como para que eu CME para o ícone para ser mais curto, certifique-se de que está no centro assim, e lá vamos nós. Próximo. Precisamos criar esses três ícones, mas antes disso, vou duplicar isso. Certifiquem-se que diz 1 25 “Controle J. “Estou indo para o pé. Mova-o para aqui. Certifique-se de que é 84 e controlou você mais uma vez e certifique-se que ele disse, Claro, Como você pode ver, é extremamente estupidamente simples de criar tudo isso em quatro loja. Mas vai ser ainda mais simples em Adobe Angsty. E eu continuo dizendo isso, mas eu realmente quero dizer isso porque eu acho que isso é basicamente o padrão-ouro. Na minha opinião, para este trabalho de enquadramento e design de arame, este vai ser um ciclo difícil. Então CNN e eu realmente gosto Teoh Name meus ícones porque eu realmente acredito que uma vez que você enviar este arquivo para o seu desenvolvedor, eles vão te odiar com a paixão. Se você não enviar os arquivos com os nomes apropriados, porque mais tarde, quando eles começarem a desenvolver seu aplicativo ou qualquer outra coisa, eles vão ter muito tempo fora de dificuldade em renomear todos os seus jogadores. Então, como este talvez 10. O que precisamos a seguir é de um comentário. Eu me consolar localizado. Tudo bem, aqui. Aqui está selecionado Controle de calor J mais uma vez, foi para a posição. Parecia um encontro bem aqui. Isto vai ser comentários. Então posicione-o ou à direita por aqui e sua posição aqui. Acho que funciona bem. O mesmo espaçamento que o caminho para este. E finalmente compartilhar. Vamos movê-lo por aqui para que oito alinhe apenas não fique online. Por alguma razão. Vamos tentar de novo. Aqui está. E pela parte. Vamos apenas incluir esse ícone de compartilhamento aqui é que eu vou selecioná-lo. Posicionamento para aqui e eu estou indo dedo do pé e um grande é apenas um pouco porque você pode ver é um pouco menor do que esses outros ícones, assim, e certifique-se que é 10 bem aqui. Lá nós temos isso e quando simplesmente reduzir o tamanho do dedo do pé por aqui. E lá vamos nós. Nós criamos nossa imagem. Agora tudo que eu tenho que fazer é simplesmente Judeus D, que são deixados aqui para que nós não precisamos mais de imagem. O que não precisamos mais. Vejamos, não precisamos mais de coração, então vamos deletá-lo. Eu vou selecionar todos estes segurando minha tecla Shift como então pressione o controle G para
agrupá-los e eles vão ser nossos ícones de guerra Ted ou simplesmente barra de toque. Então vou encontrar a minha casa. Aqui não é apenas por aqui. Vai ser perfilado bem aqui. Isto vai ser o mapa. Vamos chamá-lo. Isto vai ser conversa e isto vai ser em casa. Próximo. Vou mover essa barra aqui para estar no centro da minha tela. Vou me posicionar para baixo. Então mude um
para, por exemplo, e então vamos simplesmente mover esses ícones um pouco. Talvez assim. Talvez assim. Talvez pudéssemos querer um perfil como este. Em seguida, você pode selecionar todos eles e simplesmente clicar aqui. Ele vai distribuí-los uniformemente, em
seguida, posicioná-lo no centro e nós tê-lo. Terminamos esta parte. Agora a próxima parte é selecionar tudo, e eu vou acreditar na minha pesquisa, meu logotipo e no meu menu fora do caminho. Esta vai ser uma barra superior,
por exemplo, por exemplo, e eu vou agrupar tudo o resto, exceto por um controle barra de lágrima G vai ser postar um. Ela controlaria o J, e nós vamos duplicá-lo e simplesmente movê-lo para baixo. Estamos por aí para ouvir. Vamos movê-lo. Vejamos, 26 está em baixo, por exemplo, e vai ser o post número dois, assim logo abaixo e dentro de uma barra de estrelas. Vamos usar a cor principal. Então vamos usar uma cor azul três e c seis ff percenter apenas para indicar que este é o ícone
selecionado e que o usuário está localizado na tela inicial. Então é basicamente isso para o processo de enquadramento de sua esposa dentro da loja quatro, levou um pouco mais do que o esperado porque eu tenho que explicar todos esses ícones
e posições diferentes é um pouco, mas você pode ver que é extremamente simples de fazer. O que você pode fazer neste ponto é simplesmente selecionar todos estes clique direito converter para
objeto inteligente , em
seguida, ir para o objeto inteligente e a partir daqui, ir para o arquivo, salve-nos e, em seguida, salvar esta imagem como um JP Agra PNG em orderto compartilhe-o com seu cliente ou seus colegas de equipe. O que você também pode fazer é começar com nossos portos se você estiver trabalhando em seu original para tiro porque, como eu disse, este é C. C 2000 e 14. Ele ainda não tinha nenhuma nossa prancha dentro, mas de C. C. 2000 e 16 ou 17. Acredito que incluíram o nosso conselho. Então, quando você está trabalhando dentro de nossos portos. É extremamente simples. Em seguida, exportar todos os seus portos e compartilhá-los com o seu cliente. Eu realmente recomendo que você estava trabalhando deste tipo de maneira apenas para imaginar que este é o seu número um. Nossa porta número um número dois estaria bem aqui. O número três estará aqui e assim por diante porque todos esses projetos tendem a ter muitas, muitas imagens diferentes dentro incluídas e muitos ativos diferentes incluídos. Assim, quanto mais nossos portos você tiver, maior será o projeto. E mais difícil será controlar o que você tem dentro desse projeto. Então eu realmente recomendo. Você está trabalhando dentro do nosso partido se você tem eles. Se não fizer isso, pode fazer algo assim. E então você pode exportar todos eles como objetos inteligentes como explicado simplesmente. Agrupe todos eles, selecione cada um deles, agrupe o dedo do pé, esteja dentro de um objeto inteligente e exporte todos os objetos inteligentes para fora. Você também tem uma exportação de lote de arquivos aqui. Acho que está no roteiro. Sim, e então você pode exportar em lote tudo o que você vê na tela. Mas mais uma vez, você terá que criá-los como objetos inteligentes. Então isso é basicamente para quatro partes afiadas. Eu realmente espero que você entendeu o quão extremamente fácil é usar em quatro lojas e como
é fácil trabalhar em para a loja. E você pode ver que o resultado é muito melhor do que com todas essas ferramentas diferentes, porque você está realmente no controle sobre o que está fazendo e o que está apresentando aos seus clientes no próximo vídeo. Vamos começar com o Adobe X'd, e eu vou mostrar a vocês o que, na minha opinião, eu acho e realmente acredito que é a melhor ferramenta lá fora para esse tipo de trabalho.
14. Wireframing no Adobe XD: E agora, finalmente, deixe-me mostrar como você pode via frame no Adobe X deep. Então, tem uma porta R aberta aqui, e você pode ir para casa e você pode clicar aqui para abrir os mesmos são para o iPhone , ou você pode clicar aqui e você pode escolher o que a nossa porta que você quiser. E eu vou renomeá-lo para casa, por exemplo, e vamos começar como fizemos anteriormente com Top Bar. Então eu vou simplesmente arrastar um retângulo. Vou usar uma cor cinza clara extrema, por exemplo. Algo como isto. Remova a borda como então eu vou posicioná-la no centro até o topo e estendê-la aqui e tudo bem aqui. Eu vou dar um toque, e nossa coragem é para que você e eu possamos vê-lo. Então eu vou digitar local, e vamos usar a mesma frente que usamos em quatro lojas. Então vai ser mais tarde. Vou te mostrar onde você pode chegar mais tarde. Vou deixar o link no arquivo pdf, e é um fundo gratuito do Google, e você pode usá-lo como quiser basicamente para projetos pessoais e comerciais. Isto vai ser, por exemplo, barra de
reboque G. Vamos chamá-lo assim. Então o que precisamos é de ícones de menu. Eu vou usar este aqui para posicioná-lo bem aqui. E também precisamos de um ícone de pesquisa. Então eu vou posicionar esse aqui. Então eu vou selecionar tudo como então eu vou me mover em um pouco mais perto. Posicione isso aqui. Desloque um
para, por exemplo, para mover 20 pixels. A posição é para o turno da esquerda um para basicamente o mesmo. E então faça isso mais uma vez. Então certifique-se de que todos eles estão no centro. Vou controlar,
G e ligar para esta barra de reboque só para que tenhamos tudo bem e organizado fora do curso porque você tem aquele entalhe bem aqui. Você vai mover isso para baixo apenas para que você possa acomodar o espaço para a informação. Estamos aqui no canto superior esquerdo e no topo, à direita. Então tempo, melhor indicador assim por diante. Mas porque estamos criando através de quadros, não
nos importamos muito com isso. Você pode se importar com isso uma vez que você mover dedo do pé, a parte prototipagem de alta fidelidade. Mas como eu disse, você pode incluir isso também se você quiser, e você pode baixar um livre você eu criança da Apple eles mesmos porque eles criaram. Você pode simplesmente usá-lo para incluir tudo isso dentro do processo de enquadramento de sua esposa. Em seguida, vamos criar um retângulo grande e agradável, algo assim. Certifique-se de que está no centro. Ele controlava fundo, e eu vou chamar minha chave de turno, e minha chave antiga disse que era do tamanho. Vou usar isto para a imagem. Um pouco mais tarde. Vamos usar essa cor com borda removida. Vamos deixar isso aí. Vou chamar-lhe imagem assim, e talvez não consiga escondê-la só para não nos incomodar. E esta vai ser a BG. Certifique-se de que está no centro e certifique-se de posicioná-lo. Vamos ver. 10 pixels está bem do topo. Em seguida, vou usar o círculo. Certifique-se de que é algo como eu não sei 60. Vamos conseguir uns bons números pares. Posicione tudo bem aqui. Mude um e outro aqui onde você pode usar se quiser. Na verdade, cabe a você. Vou chamar este termo assim. E o que você pode fazer com todos esses ícones é que você pode encobri-los para símbolos se você quiser, ou dois componentes, e você pode então copiar e colar esses componentes mais tarde. Eu não vou fazer isso porque temos várias instâncias fora deles. Mas tão direto. Tem certeza que pode apertar o controle K e vai mostrar isso como uma chave de controle de símbolo? Está bem, está bem. E uma vez que eu comecei, deixe-me criar todos os símbolos s, e eu vou mostrar a vocês como você pode usá-los um pouco mais fácil mais tarde. Então você tem o perfil de arrastar sensato e soltá-lo em posição em algum lugar bem aqui. E deixe-me reduzir rapidamente o tamanho dele e posicioná-lo bem aqui no centro, fora do meu círculo, assim. Em seguida, eu preciso do texto dos dentes e meu nome é chamado de dívidas. Certifique-se de que é deixado mentindo. Certifique-se de que são 16, por exemplo, e eu fui com a minha chave antiga para fazer uma duplicata dela. E vamos dar 10 por exemplo, vai ser tempo livre, postar algo assim e vamos ver se podemos separá-los. Mas 10 pixels posição descer deslocamento central 12 e agora precisamos desse ícone mais. Eu posso simplesmente arrastá-lo e soltá-lo na posição, assim certifique-se de que ele está no centro e certifique-se de posicioná-lo até que ele se alinhe com o nosso fundo assim e, em seguida, um, também, modo que nós temos mesmo espaçamento direito Aqui. Se você não quiser ver isso para ser muito brilhante, você pode usar algo assim ou você pode usar uma cor um pouco mais escura. Talvez algo assim. Acho que funciona bem. Hit control D. Eu vou posicionar isso aqui e descrição fora da imagem, e nós podemos usar este dedo adicionado aos estilos de personagem neste para estilos de personagem. E então você pode simplesmente clicar neste. Clique aqui vai aplicar os mesmos estilos de caracteres para dis texto também. Então, se você quiser que ele pareça exatamente igual a este, certifique-se de que é uma linha à esquerda. É agora que estamos indo para obter dedo do pé são camadas painel aqui clique em nossa posição de imagem. É mais ou menos por aqui, então vamos ver. Talvez seja muito grande. 20 pixels para baixo. Certifique-se de que Aito linhas aqui. Certifique-se de que é aliança aqui como então vamos ver casa. Temos muito espaço. Talvez isso seja mercadoria. Você pode até estendê-lo até aqui para fazer esta imagem parecer agradável e grande para a altura. Vamos usar 1 70 Faça um bom número. Vou incluir a imagem. Não posso voltar para aqui. Mova o ícone da imagem aqui. Selecione minha imagem. Certifique-se de que está no centro e acho que parece um pouco melhor assim do que o contrário. E também posso fazer as mesmas coisas. Vou remover a borda e incluir a mesma cor do campo só para que tenhamos alguma consistência aqui também. No projeto real organizou essas camadas um pouco melhor. Então, talvez este avatar e este ícone externo irá para o topo como então, em seguida, primeiro nome, hora do post e este ícone apenas para que possamos ver que o tempo se orgulha e mais ele vai abaixo, como então a descrição, então imagem. E então este Bijie Então assim. Em seguida, vamos incluir esses outros ícones para que você possa simplesmente clicar aqui. E o 1º 1 é coração. Porque se o arrastar e soltá-lo na posição como este próximo é comentário em posição, talvez em um centro como este, e finalmente compartilhar, Basta arrastar e soltá-lo. Vou selecionar todos os três que vou incluir, quero dizer, desativar o redimensionamento responsivo. Vou segurar a tecla Shift e depois redimensioná-las para algum lugar por aqui. Então eles são um pouco menores do que antes, e eu vou ter certeza de que eles são,
por exemplo, por exemplo, 20 pixels a partir deste 20 pixels para baixo. E então eu vou fechá-lo até aqui, em
seguida, selecione disse três e, em seguida, simplesmente movê-los para cima 20 pixels mais uma vez, assim e então eu vou fazer. Vou selecionar este texto. Ele controlava os dois duplicados e, em seguida, simplesmente fazer alguns ajustes para ele. Algum jeito de reposicionar isso vai ser 125, então certifique-se de que está no centro de todos esses ícones, mas podemos lidar com isso um pouco mais tarde. 10 em frente e mova isso aqui, Control De. Isto vai ser 84. Por exemplo, Controle de mais uma vez. Isto vai escrever para um xerife. Então, posicionando aqui. E então talvez 10 pixels provavelmente fizeram com todos esses anteriores, assim. E você pode escolher esses ícones assim, mantendo
pressionada a tecla Shift, você pode ampliar um pouco e fazer uma amostra de descoloração,
por exemplo, para que sejam mais consistentes. Assim como. E lá temos. Terminamos nossa primeira carta para que eu possa entrar e mover minha barra de conversa aqui no topo. Posso selecionar todas essas camadas. Mais uma vez, você pode organizá-los um pouco melhor, mas para economizar algum tempo, simplesmente o agrupou. Chame este cartão um, eo que você pode fazer é usar uma repetição grande,
e, em seguida, simplesmente estender outro cartão aqui. Ou se você não quiser fazer isso, você pode simplesmente duplicar este cartão. Então aperte o controle D e, em seguida, simplesmente movê-lo. Tudo bem aqui. Vamos fazer com que sejam pixels de tronco. Acho que está tudo bem. E por causa do tamanho do nosso porto. Deixe-me apagar rapidamente. Siga estes ícones vai cobrir bem aqui na parte inferior. Então você não tem que fazer basicamente qualquer outra coisa. O que eu quero fazer a seguir é simplesmente pular aqui. Pressione control de para duplicar esta camada. Arraste-o para fora da mesma forma. Então você não vai chamar isso, por exemplo? Tab Bar, Coloque-o bem aqui na parte inferior da minha prancha, assim e porque não podemos vê-lo, talvez eu possa torná-lo um pouco mais escuro assim. E basicamente vai colorir. Isso porque queríamos rolar e que também pode fazer é estender este nosso dedo do pé do porto caiu. Mas eu vou mostrar a vocês que no próximo vídeo vamos começar a adicionar um pouco temperado este design . Mas, por enquanto, podemos deixar assim. O que precisamos aqui são esses ícones. Então vamos arrastá-los rapidamente e soltá-los para dentro. Precisamos desta casa, Michael. Coloque-o por aqui. Precisamos de um magnata comum por aqui. Precisamos de um ícone indicador membro e, finalmente, precisamos de um ícone de perfil, algo para posicionar e escrever aqui. Então eu vou selecionar todos eles, desativar recurso responsivo para a minha tecla Shift
e, em seguida, simplesmente reduzir o tamanho deles. Garanta que Darryl esteja no centro e eu possa clicar aqui mesmo com o dedo do pé. Distribua-os. Mesma liquidez para uma loja. Se você se lembra, pule de volta em camadas. Painel, clique aqui. Ele controlava o G e depois chamava esta barra de passos. É basicamente isso. Nós terminamos tudo. Vou mudar a barra de cima bem aqui. Organizei isso um pouco, pai. E aqui está como nossa tela parece que eu não vou continuar e criar minhas outras telas apenas para mostrar como é fácil fazer no Adobe X'd. Então esta é a nossa tela inicial. Vamos bater bem aqui. Controle fundo. Esta vai ser a nossa imagem aberta ou aberta galeria de imagens uma vez porque a pessoa pode clicar. E isso abriu esta imagem para vê-la um pouco melhor dentro dela. Vamos apagar o descarte porque não precisamos dele. E esta outra carta, vamos mudar o nome da Parte 2. Desculpe, e podemos posicioná-lo. Eu não sei como digitar hoje nós podemos posicionar abaixo da carta um, é
claro. E vamos ver, eu reduzi você pagar a cidade acidentalmente. Então aqui temos imagem aberta e o que vamos realmente fazer aqui antes de fazer e selecionar semanalmente isso. E talvez possamos adicionar um toque de cor três D c seis ff. Se funcionar, não
funciona. Isso disse que a cor mais escura apenas para indicar este está selecionado
agora, aqui você pode adicionar a mesma coisa aqui para que eu possa excluir esta guia. São controle C controle nós e incluídos barras de facada facilmente como que para este cartão. O que vamos fazer é simplesmente clicar aqui e estendê-lo. Você pode usar o redimensionamento responsivo, se quiser, mas vai divisor todos esses elementos basicamente que não queremos, especialmente porque para esses ícones, redimensionamento
responsivo está desativado. Então, se eu selecioná-lo para que tenhamos um coração comentário compartilhar. Eu posso ativar o redimensionamento responsivo e, em seguida, tentar reduzir tudo um pouco para baixo para que ele funcione assim, mas para não perder tempo, você pode simplesmente selecionar esses como então Então selecione este texto e há simplesmente movê-lo todo o caminho para baixo ou aproximadamente por aqui, por exemplo,
em seguida, posição BG são aproximadamente dois aqui,
em seguida, selecione todos eles mais uma vez. Então, assim, certifique-se de que eles estão 20 pixels para cima, 20 pixels para cima. Mais uma vez clique em nossa imagem e estendido. E agora eu vou selecioná-los mais uma vez assim, pixels para baixo apenas para que tenhamos espaçamento uniforme, e então finalmente clique em nossa imagem e estendido e posicioná-lo no centro assim. Então é isso que temos. Basicamente, você pode ver como é fácil fazer no Adobe XY. Tudo o que você precisa fazer ele simplesmente cair alguma lógica e seguiu nossos esboços ou idéias que você tem em sua cabeça. E eu realmente recomendo se você está fazendo isso aqui apenas para experimentar o máximo
possível . Então, basicamente, se você não está começando com papel via frames e você está começando diretamente Rita Adobe X 'd eu realmente recomendo que você experimente o máximo possível e para começar apenas colocando alguns elementos e ver onde ele leva você Próximo? O que precisamos aqui é escrever um comentário para que eu vou duplicar este controle de beleza D com fora. Isto vai ser um comentário. Beleza. Definitivamente não sei soletrar hoje. Vou movê-lo mais ou menos por aqui, por exemplo. E então podemos deixá-lo aqui. Talvez. Vamos ver 70 coisa que funciona. - Tudo bem. Então, até às 12, talvez possamos mover todo o dedo do pé da imagem aqui. 12 e, em seguida, finalmente, o que podemos fazer é clicar direito seu turno 12 e, em seguida, ir para a direita aqui e selecionou este guia . Encaixe-o para aqui e então nós vamos simplesmente estender este BG para caber o dedo aqui. Basicamente moveu tudo 20 pixels para cima mais uma vez. Então, ou você pode ir para o outro lado. Se for mais fácil para você, você pode fazer o mesmo. Mas com a de baixo. Deixa-me mostrar-te isso. Então você pode clicar aqui, mudar 12 e, em seguida, simplesmente estender até aqui até que ele se encaixe. E, em seguida, basta selecionar estes dentro. Então estes três assim assim por diante para então você pode estender isso para baixo. Então, Então, que é mais fácil para você? Funciona bem porque, como eu disse, este é o processo de experimentação. Nada está completado. Nada é definitivo,
então, basicamente, tudo depende de você agora. O que vamos incluir aqui é que precisamos deste texto. Se te lembrares dos nossos esboços, vai dar certo, certo? Os Comuns. Assim, então precisamos de novo eu curso, Eu só vou pular dentro de nossos ícones. Vou localizar o ícone do meu rosto sorridente. Acho que está bem aqui no topo. É Aqui é o controle. Vês? Super salto para trás bem aqui. Aperte o controle V. Vou reduzir o tamanho um pouco. O mesmo que você fez com todos esses ícones anteriores. Turno 12 e depois ela quer. Eu vou usar esta mesma cor que foram usados para os ícones anteriores. Então simplesmente escolhi, e eu vou chamá-lo de Smiley. Então, e nós só precisamos do ícone de envio aqui, então deixe-o rapidamente localizado e ver onde ele pode estar localizado. Talvez esteja em algum lugar por aqui. Vamos ver Aqui é muito uso este não simplesmente saltar para dentro, posição que no lugar E o que você também pode fazer é simplesmente alinhá-lo com o seu rosto sorridente como então certifique-se de ter responsivo redimensionado desligado porque não precisamos dele no momento. Em seguida, simplesmente posicione-o no lugar igual. Então, mude um também. E vamos provar esta cor ou aqui do fundo assim. É basicamente isso. Terminamos nossa tela. Vamos chamar isto de enviar. Então, como essa cara sorridente direita
comin, comin, G. Vamos chamar isso de comentários, posicioná-lo na parte inferior, e uma última coisa que precisamos é incluir a seta para trás bem aqui dentro de um tártaro porque queremos ser capazes de voltar. Então eu vou saltar de volta para os meus ícones mais uma vez aliviado o link no arquivo pdf. Então, se você quiser conferir esses ícones, você pode ver onde esse ícone está. Aqui está. Isso é simplesmente saltar à vista e ver aqui está, ele controla. Veja o Controle V e eu vou movê-lo para longe, cima assim, Veja o que é, e eu vou simplesmente posicioná-lo como se fosse o redimensionar mais rápido isso implicando maior, apenas um pouco. Certifique-se de que está no centro, assim,
assim, e eu vou chamá-lo de volta assim. Vou desligar a busca ou dilatada simples como você quiser, e é basicamente isso para esta tela. Agora a tela final vai ser uma tela de perfil. Por isso, vou duplicar este, por exemplo. E o que precisamos é apagar rapidamente tudo daqui. Ou talvez possamos deixar a mensagem. Mas como já o selecionamos, podemos selecionar a partir daqui. Então eu vou simplesmente um arrastar e soltar um ícone de perfil aqui. Certifique-se de que está em dissidente assim, ou melhor ainda, eu posso fazer o mesmo daqui. Só me dê um segundo. Posso saltar para dentro. Profilie um controle de avatar. Veja bem aqui, Controle V. Lá eles vão simplesmente estendido para ser um pouco melhor. 12 Então podemos usá-los para controlar o controle C. Nós certificamo-nos que eles estão alinhados no centro assim, então certifique-se que eles estão no centro e vamos ver o que temos aqui é pessoa, nome e talvez localização como esse. Certifique-se de que está no centro. Vamos ter que ser. Não é “Não”. 10. Acho que funciona bem. Sim. Agora o que precisamos são algumas torneiras. Então o que podemos fazer é rapidamente incluir três linhas como esta. Por exemplo, talvez possamos usar essa cor talvez sem controle de borda. De, certifique-se que isto está no controle central D. Isto está bem aqui, e se você quiser espaçá-los uniformemente, basta fazer um retângulo. Em seguida, selecione-os para clicar na posição central. Dirigir vai bem aqui seleciona para ter certeza que está no centro. Em seguida, exclua este retângulo e lá vai você. Então, basicamente, essas são suas três guias. Vai ser um 20 porque este passo é selecionado. Vamos dar uma cor. Vamos dar a cor desses ícones para que você possa ir aqui e você pode saltar para dentro e basicamente adicionar suas cores aqui. Vamos adicionar uma cor para isso como uma também. E uma vez que estamos aqui, vamos escolher este ícone. Certifique-se de que é esta cor de casa dos judeus. O Michael. Certifique-se de que é esta cor porque agora estamos na tela de perfil, e isso é o que eu estava dizendo. Você pode ver como é fácil multiplicar estes, e adicioná-lo a eles, e então isso vai ser livre de tabulação. Isto também é. E este é o passo número um, e é o que é selecionado. Então, basicamente, isso pode ser o seu É uma galeria ou favoritos ou comunicações ou algo assim. Você os manteve em um Twitter ou Facebook e alma. Então, o que precisamos a seguir é incluir imagens diferentes. Então eu vou simplesmente arrastar um ser agradável retângulo algo como em dias. Talvez a seguir eu vou incluir meu ícone de imagem, arrastá-lo e soltá-lo na posição. Talvez eu possa torná-lo um pouco menor. Talvez assim, eu vou escolher usar isso sem uma borda, e eu vou incluir este ícone bem aqui. A seguir, vou agrupá-lo. Então isso vai ser imagem Bijie. Você pode usar a outra imagem entre criado antes e incluí-lo se quiser. Mas achei que esta era uma maneira muito mais simples. Vou reduzir o tamanho apenas um pouco apenas para que eu possa ter certeza de que eu posso caber três deles. Basta agrupá-los, chamá-lo imagem e clique, repita grande e, em seguida, simplesmente preencher três em uma linha como esta. Certifique-se de reduzir o espaçamento entre eles. Clique aqui para posicioná-lo no centro e, em seguida, simplesmente estender todo o caminho para baixo. Quantos você quiser. E essa é a grande coisa sobre o dhobi exceder tem todas essas ferramentas fantásticas que vão ajudá-lo a acelerar o processo fora dessas tarefas tediosas, especialmente quando você começar a duplicar todas essas coisas diferentes. Isso vai ser perfilado, e é basicamente isso para o nosso Via Frame tem esperança de que você pode ver como
é extremamente simples criar esses quadros de arame no Adobe X'd, porque ele tem todas essas ferramentas diferentes que estão indo ajudá-lo imensamente. Depois de iniciar a prototipagem e começar a compartilhar com seu cliente, você pode adicionar alguns pontos de acesso. Você pode incluir imagens diferentes, sombras e assim por diante. E é isso que vou mostrar no próximo vídeo. Então eu te vejo lá.
15. Levar seus quadros: beleza fora Adobe X'd é. Uma vez que você terminar o enquadramento de sua esposa, você pode aumentar isso e passar para quadros de arame de alta fidelidade em imagens como sombras, cores
diferentes e assim por diante. E, além disso, você pode até incluir algum movimento adicionando protótipos aos seus projetos, e você pode compartilhar esses protótipos com seus clientes, e então eles podem deixar feedback para que você possa saber o que pode melhorar. É por isso que eu amo o Adobe Xdb porque é uma ferramenta tão completa. Não só é extremamente fácil de usar, e espero que você tenha visto isso no vídeo anterior, mas você também pode fazer todas essas outras coisas sem nunca sair desta ferramenta, porque anteriormente você tem que usar várias ferramentas para fazer essas múltiplas coisas. Enquanto estiver no Adobe X D. Você pode fazer todos eles sem sair do aplicativo. É por isso que gosto tanto porque me poupou tanto tempo. E quando você está trabalhando com clientes, especialmente em um prazo apertado, pode ser extremamente importante fazer essas coisas enquanto economiza o máximo de tempo possível em um projeto. Então, para começar, vou simplesmente saltar para dentro aqui. E este é o quadro de arame que você criou anteriormente. Eu era seleto. Todas as três portas atingem o controle D para fazer uma duplicata fora deles porque eu estou indo dedo do pé. Basicamente, adicione algumas imagens e alguma cor a elas. Não, vamos saltar para dentro e vamos começar a adicionar alguns elementos. Então aqui, vamos incluir o nome, por exemplo. Jason Marcus. Vamos um tempo livre, vangloriar-se 24 de abril. Vamos ver City 45 algo minha dívida e isso também pode ser 24 de abril. Mas vamos ver o 48 talvez algo assim. Então este é o novo post. Este é o antigo post, e talvez isso possa ser mesmo outra pessoa. Então vamos chamá-lo de Murray. Não conheço Andrews. Então, apenas alguns nomes aleatórios e você também tem gins de sangue para Adobe X'd, e você também pode gerar algumas dessas necessidades aleatórias para economizar ainda mais tempo agora para incluir algumas imagens. Eu tenho algumas imagens de estoque aqui tirando de um splash, e quando um dragão deixou cair a imagem, você pode ver que ele preenche isso, mas eu tenho que esconder meu ícone de perfil e você pode ver lá. Agora está começando a ficar com a forma. Vamos incluir o mesmo para esta pessoa aqui. Então eu vou seguir em frente e escolher uma imagem. Deixe-me ver. Bem aqui. Eu tenho esta pasta fora das minhas imagens, que tomaram on-line, e você também tem um plugging para disco. Você tem esses plugins bem aqui, então pode simplesmente clicar ali. E você pode instalar todos esses plugins diferentes para um splash. Vai lhe dar, por exemplo, imagens de um ponto de splash com. Ele irá preencher seus espaços reservados. Você é Logos são ótimos porque você pode incluir todas essas imagens diferentes em dróides. Ótima. Porque você pode usar sobre essas ilustrações diferentes e assim por diante. E para descobrir, conecte, basta clicar aqui. Você pode descobrir todos esses plugins diferentes que eles acumularam e coletaram para você. Estes são, na sua opinião, o essencial. Então vocês que eu enfrento é ótimo porque ele pode preencher com essas imagens. Então eu realmente encorajo você a explorar todos esses plugins diferentes e vamos agora voltar dedo do pé são projetados. Precisamos da mesma pessoa aqui. Então eu vou apenas pular dentro do texto corporatista e baseá-lo aqui. Eu também vou clicar duas vezes aqui e baseá-lo aqui e vamos usar a descrição. Mas primeiro preciso encontrar a imagem que vou incluir, então não sei. Vamos ver. Talvez possamos usar algumas imagens de arquitetura, por exemplo, ou algumas imagens de viagem. Então vamos ver. Posso incluir uma imagem aqui. Eu posso simplesmente arrastá-lo e soltá-lo no lugar. Este em particular é daquele para stock photo dot com, e é ótimo porque você pode encontrar todas essas imagens diferentes, que são livres para usar. Mas você pode usar imagens de no splash, por exemplo, ou, se você quiser imagens premium, você pode ir em elementos voláteis, por exemplo, e incluir imagens a partir daí. Descrição da ponte de imagem em Sen. Francisco. Tudo bem, então de helicóptero, assim e então para este são um. Por exemplo, formação
Brooke aqui, Sir Francisco, porque é a mesma coleção para estas imagens e, por exemplo, para esta, talvez possamos localizar este fundo. Talvez eu possa incluir algum raio de canto. Vamos incluir a Coréia fora 10, por exemplo. Você pode ver como isso se parece. E talvez eu possa até incluir um pouco de sombra e depois ir em frente e remover a borda. Quando eu clico lá fora, você pode ver como isso se parece. Então dá este belo pedaço de sombra caída. E eu também posso pular aqui, clique com o botão
direito do mouse em copiar, então pular aqui e simplesmente com base na aparência. E ele vai me dar o mesmo olhar para o cartão bem aqui. E também quero fazer isso aqui. Então ele vai me dar o mesmo olhar fora do cartão bem aqui. E também podemos fazer isso para os comentários. Um simples baseado pais e você pode ver como isso se parece. Então, basicamente, faz parecer que pertence bem ali. Agora, as imagens. Vamos dar-lhes a mesma placa de raio. Então 10 só tinha um pouco de tempero para ele. Por exemplo, esta imagem 10 e nós precisamos toe incluir essa mesma imagem aqui. Deixe-me remover meu ícone de imagem, e você pode ver como isso parece tudo o que precisamos aqui é esta descrição como assim E nós também precisamos incluir nesta mesma imagem fora de uma pessoa que fizemos antes, tão rapidamente Encontre-a. Aqui está. E simplesmente remova meu perfil. Eu posso a partir dele. E lá temos. Basicamente. Agora temos formando aplicativos e também podemos seguir em frente e incluir, por exemplo, cor aqui. Então vamos em frente e provar um pouco de cor. Então talvez possamos usar uma cor desse ícone. Assim? Veja como isso parece Não parece tão ruim, mas precisamos virar esses ícones do dedo do pé branco, mesmo que com o nosso logotipo. Então talvez possamos chamar isso de algo como socialmente, por exemplo. E talvez eu possa incluir alguma forma de forragem para ele. Jogar exibição justa. Negrito itálico. Certifique-se de que é branco. Veja como isso funciona, Will. Então isso é basicamente um exemplo fora. O que? Você pode fazer isso e você pode simplesmente controlar crianças. Vês? Então pule bem aqui. Aperte o controle V, nós e eu vamos esconder isso. Pare o nosso diário para tudo isso. Então eu vou fazer o mesmo aqui. Mas antes de apagar, quero ser capaz de mover esta seta para trás aqui. Como podem ver, cometi um erro e incluí vários desses, mas não importa. Vou incluir aqui mesmo. Então apaga este bar abastecido,
assim eu vou trazê-lo de volta. Então simplesmente vire minha seta para trás, dedo do pé branco e simplesmente reduza a Cidade Obedeça da minha busca. E lá temos. Temos o nosso bar de cima bonito e limpo agora para este. Talvez as pessoas tenham clicado nessa pessoa e então eles pularam bem aqui. Precisamos de outra imagem do perfil dessa pessoa. Vamos copiar isto aqui e para a localização. Talvez ele esteja localizado em São Francisco porque é de onde essas imagens vieram. E porque vou copiar e colar as mesmas imagens, vou substituir esta. Então é usado a imagem de Londres, por exemplo, para este. Talvez eu possa arrastar e soltar aqui. E é por isso que eu disse, Isso é ótimo sobre Adobe X'd. Você pode simplesmente ir em frente e mudar qualquer coisa que você quiser e digamos algo como apenas que
possamos preencher algum texto aleatório agora para isso. Como pode ver, temos uma repetição. Ótima. Tudo o que eu tenho que fazer é simplesmente lutar neste 1º 1 e então eu posso pular bem aqui. Arraste e solte minhas imagens no 1º 1 e vai preencher com todas essas imagens
diferentes aqui. Tudo o que precisamos fazer agora é simplesmente adicionar algumas abas aqui. E para fazer isso, tudo o que tenho que fazer eles simplesmente pulam aqui. E, por exemplo, copiou um desses textos. Talvez eu possa acertar o controle de posição. Está bem por aqui e certifique-se de que está no meio destas linhas,
como So e Dent. Deixe-o lutar rapidamente contra as minhas facas. E talvez possamos escrever em favoritos. Vamos criar uma duplicata. Estes podem ser, por exemplo, novos e vamos criar outra duplicata. E isso pode ser, por exemplo, coleções. Vamos ver. E porque escolhemos favoritos, talvez possamos pular aqui e clicar em nossa cor. É basicamente isso. Vamos saber, simplesmente organizá-los. E se você se lembra da dica, eu mostrei simplesmente selecionar assim. Então, como estes dois mais com bem aqui a imposição. Este aqui selecionou estes para movê-lo como então eu vou deletar este, e talvez eu possa baixar o seu basicamente destes. São os Judeus cinco, por exemplo. E preciso de um espaçamento melhor para isso. Então talvez eu possa ver que este é stand talvez 20 N Dent. Vamos dar o mesmo. Então, 20 como então lá temos. Se você quiser trazer essas linhas de volta, talvez eu possa escolher um toque e eu posso chamá-lo de seletor, por exemplo. Ajustado só um pouquinho. Talvez usado para ter certeza que está no meio do meu texto e talvez movê-lo apenas cinco. Vamos ver. E eu posso até reduzir a inteligência dele para aqui, assim e então simplesmente selecionar essa cor para tornar óbvio que isso está selecionado. É isso. Basicamente, para a parte de design, você pode ver que em apenas alguns segundos você pode ter algo que é realmente atraente e algo que parece realmente agradável. Eu não gosto disso porque é desta cor cinza, então talvez eu possa transformá-lo em branco. Veja como isso parece bom, porque agora temos esse fundo bem aqui. Mas você também pode adicionar uma linha aqui separando-a de modo que a linha superior vai parecer ainda melhor Mas por uma questão de tempo e fora para este vídeo, vamos apenas tê-lo branco porque nós temos todos esses elementos de fundo cobrindo bem. Agora que não sabemos, talvez seja hora de passar para a prototipagem e simplesmente adicionar um
pouco de integração em direção a ela. Então o que eu posso fazer é simplesmente estender isso. Posso saltar aqui e depois movê-lo até aqui. Clique duas vezes aqui até chegar. Então vamos ver até aqui. Isso parece ótimo. Eu quero tocar dese dois e eu quero fazer isso porque eu quero fazê-lo continuar rolando. Então o que você precisa fazer na verdade é trazer de volta até que ele se alinhe com esta linha. Porque esta linha é basicamente uma linha cortada como essa e agora podemos obter a prototipagem. Então basta clicar no protótipo E o quê? O que podemos fazer é simplesmente clicar aqui nesta imagem. Então, quando o usuário toca, ele vai abrir esta tela para que tenhamos um toque de gatilho. Então, mais uma vez, quando você usa os toques, ele vai abrir esta transição de tela que vamos usar também animate E é por isso que nós tivemos as mesmas camadas e mesma estrutura de nomeação porque nós queremos Adobe X'd para reconhecer o que nós fizemos. E ele irá comparar essas duas telas e, em seguida, simplesmente encontrar diferenciações entre elas e simplesmente integrar uma boa ilustração. Derek, você pode usar notas fáceis e duração 0.4. Acho que vai funcionar muito bem. Agora, esta imagem. Podemos pisar e podemos fazer a transição. Talvez possamos usar dissolver fácil e fora porque uma vez que o usuário clica bem ali, ele vai levar para o perfil desta pessoa. Teremos a mesma integração para aqui e também a mesma integração para aqui para este ícone de
perfil. Então simplesmente passe o mouse sobre ele, clique nele e, em seguida, simplesmente arraste e solte e Adobe X'd lembrará suas últimas configurações. E ele basicamente mostrará as mesmas configurações que você já escolheu agora para este simplesmente selecionado aqui. E se você quiser voltar para casa a partir daqui, você pode simplesmente fazer a mesma coisa e ele vai levá-lo de volta para casa. E isso é basicamente tudo para isso. Talvez possamos incluir o mesmo pergaminho aqui, como fizemos aqui, mas não vou incomodá-lo. Você começa a idéia com uma última coisa que eu quero te mostrar é aqui. Então, quando
saltarmos aqui, queremos voltar para casa. Então eu vou ligar esta transição de torneira e em vez de dissolvido, vamos usar sleight left, por exemplo. E então eu posso clicar aqui e antes de fazer, eu só quero fixar a posição do dedo ao rolar. Então isso vai ficar consertado. E uma vez que você chegar ao final da página, ele estará bem ali. E quando estivermos aqui, podemos fazer o mesmo por aqui. Então vamos entrar no design. Posso estender todo o caminho para baixo. E eu posso, por exemplo, movê-lo. Vamos ver 20 pixels, algo assim. E eu posso simplesmente pairar bem aqui, ver o que é. E talvez eu possa cortá-lo bem aqui, e eu vou saltar para trás, trazê-lo todo o caminho para ouvir salto, prototipagem, posição
fixa e rolagem. E é basicamente isso. Então agora vamos conferir nosso protótipo. Basta clicar aqui. Ele vai abrir este discurso, e se eu ampliá-lo, você pode ver que uma vez que começamos a rolar, você pode ver como isso parece, então você pode rolar e você pode ver que isso permanece fixo no fundo. Como você pode ver, você pode rolar para cima
e para baixo, e quando
você clica aqui, você pode ver que esta pequena animação agradável vai mostrar. E quando você clicar aqui, ele vai te trazer de volta. Se você não gosta de disposição, você pode usar também anima. E também será animado de volta basicamente. Mas eu acho que isso funciona muito melhor. Uma vez que você desliza para a esquerda e para a direita, muitos clicam aqui. Ele se dissolverá para o perfil e você pode rolar para baixo basicamente. E uma vez que você clicar na casa, por exemplo, ele irá levá-lo de volta para casa. Então é assim que é fácil usar o Adobe X'd do processo de ideação dele para os designs mais complexos e, finalmente, para os protótipos, que você pode compartilhar com seus clientes clicando aqui, você pode criar um link, e, em seguida, você pode copiar este link e enviá-lo para seus clientes. Eles podem deixar seus comentários sobre o que você precisa mudar, e isso é basicamente todo o seu processo de design dentro de um aplicativo. E é por isso que adoro que a Adobe exista tanto porque lhe dá tantas possibilidades de trabalhar com seus clientes e de permanecer criativo e continuar avançando com seus projetos. Eu realmente espero que você vá tentar. Confira no site da Adobe de Também deixe o link para Adobe X'd no pdf. É de graça. Você pode usá-lo de graça para sempre, basicamente porque eles têm o plano livre para sempre. Ele só tem algumas limitações fora. Quantos produtos você pode compartilhar com seus clientes? E é basicamente isso que você pode usar. Começa hoje. Vai mudar sua carreira de design para sempre, pois mudou a minha. Eu realmente adoro isso, e eu não posso dizer isso muitas vezes porque é realmente verdade. Então, confira. Eu realmente espero que você goste, também.
16. Exportando ativos do Adobe XD: Uma última coisa que quero mencionar é exportar. Então, talvez você queira compartilhar essas imagens com seus clientes ou com sua equipe foram e-mail via chats eram mídias sociais. No entanto, você quer compartilhar com eles para que você possa compartilhá-lo com o link e já mencionou que
no vídeo anterior, basta clicar aqui para criar um link, em
seguida, clicar aqui para copiar o link e basicamente enviar-lhes o link. Eles podem deixar seu feedback com os comentários, e podem identificar detalhes específicos dos quadros de arame que você deseja que você altere. Mas e se você quiser apenas exportar suas imagens? Você pode simplesmente clicar aqui no nome do nosso Port Hit Control Command E. Estes agora aparecerão, e você pode selecionar os formatos de arquivo que controla sendo G SVG para a Web. Pdf e Jay Pek. Basicamente, se você quiser compartilhar imagens, você pode escolher PNG ou JPEG. Se você quiser compartilhar, pdf basicamente clique aqui, ou se você quiser compartilhar SPG para os desenvolvedores para usar isso, é
claro, talvez então você pode compartilhá-lo assim Além disso, você pode exportar peças específicas do design com base em como você os criou, para que você possa exportar o design. Ele irá exportar em um X tamanho basicamente original. Você pode clicar na Web, e ele irá exportar um X e dois x basicamente tamanho original e dobrar esse tamanho, o que é ótimo para desenvolvedores. Você pode clicar na íris. Ele vai exportar no tamanho original, dobrar o tamanho e triplicar o tamanho porque fora da variedade de dispositivos diferentes. E, finalmente, quando você clica em Android, você pode ver que você é projetado em, por exemplo, 100% que é o seu tamanho original 75% que é um pouco menor do que o tamanho original e sobe a partir desse . Então basicamente esses pontos percentuais são basicamente dívida tamanho original, depois maior, maior, maior e assim por diante. E isto é menor. Isso é basicamente para a parte de exportação, tudo nele para uma exportação simplesmente clique. Ele vai exportar essa imagem, e quando eu abrir essa imagem, basicamente com meu erro de imagem, aqui está como ela se parece basicamente com qualquer outra imagem, e uma última dica que eu quero mostrar é quando você tem múltiplo desligado. Estes são portos, e as chances são de que você vai tê-los na maioria de seus projetos. Você pode simplesmente selecionar todos os seus ireports hit control ou comando E. Escolha estas configurações, no entanto você configurá-los e simplesmente clicar. Exportação está indo toe exportar todos aqueles porque eu já tenho casa um pacote J, que eu exportei anteriormente. Você pode clicar substituições, vai substituir essa imagem, e ele vai exportar todas as suas imagens. Então isso é basicamente para este curso e basicamente para a exportação. Eu realmente encorajo você a brincar com o Adobe X'd, e eu garanto que você vai adorar pelo menos alguns dos recursos que ele tem para oferecer.
17. Trabalhando com modelos: trabalhar com modelos permitirá que você termine o projeto, fomente para cobrar mais e entregar os arquivos aos clientes para os desenvolvedores o mais rápido
possível . É por isso que os modelos são uma solução fantástica. Se você está com um orçamento apertado, por exemplo, se você está em um prazo apertado ou se você só quer ter mais projetos feitos dentro do ano e ganhar mais dinheiro. Então aqui estamos em uma página web donut dot net, e este é o meu site na minha empresa e dentro da minha empresa. Estamos criando esses modelos. Como você pode ver, nós temos você I crianças, crianças UX, modelos de mídia
social. Temos gráficos de canto social, que é modelos de mídia social dedicados. Página. Nós também temos os cursos, e você está no que nós matriculamos, obviamente, em um de nossos cursos agora, temos imagens de estoque, e temos outros produtos. Então temos todos esses riachos para ajudar os designers a evoluir e ajudá-los a acelerar seu processo e terminar seus projetos. Foster. Então, se eu pulei aqui para os kits U X, que é basicamente a experiência do usuário recebe, nós temos todos esses produtos diferentes que você pode comprar e usar em seus projetos. E vamos explorar um deles. E eu só vou mostrar a vocês como é fácil criar uma página quando você está criando, comer com um modelo e vamos usar algo como ossos esposa de filhos, por exemplo. Então aqui estou eu no Adobe X'd, e eu vou chamar isso de nosso quadro de arame que rapidamente se estendeu todo o caminho para baixo
assim , e eu vou saltar para dentro e escolher modelo de nossos ossos de volta. Eu estava simplesmente copiando e colando bem aqui, Al. Posicioná-lo para o topo e, em seguida, eu vou simplesmente seguir em frente com alguns outros modelos. Então vamos ver, Talvez eu possa usar este, por exemplo, e você só tem que alinhá-lo com o anterior, assim. E eles simplesmente seguem em frente e começam a construir seu quadro de arame para que você possa escolher entre a variedade de diferentes elementos e deixá-lo mostrar rapidamente como esses elementos se parecem. Então vá em frente e posicione isso até que ele se alinhe com o meu anterior. E aqui está, por exemplo, esta é a parte do futuro fora dos ossos. Por que do kit e eu só usei este, e você pode ver que você pode adicioná-lo. Qualquer um deles você pode editar este texto,
você pode editar esses ícones, você pode alterar suas cores e assim por diante. E eles estão disponíveis para este produto específico, por exemplo, para Photoshopped X'd e esboço, que você
possa usá-los como quiser. Vamos selecionar rapidamente outro aqui, para que você possa abrir quantos desses arquivos quiser. Você deve ouvir, por exemplo, e então simplesmente começar a construir. E você pode explorar como sempre muitos fora desses modelos é que você quer. Você pode reposicionar alguns desses elementos. Se você não gostar, você pode simplesmente excluí-lo. Deixe-me escolher este para depoimentos, por exemplo. E eu acho que temos 10 categorias diferentes para este produto, e você pode usar qualquer uma dessas categorias obviamente, e reposicionar alguns desses elementos. No entanto você quer um rapidamente posicioná-lo aqui, e eu posso simplesmente chorou sombrio aqui no meu quadro de arte. Feche na parte inferior. Então estamos por aqui, por exemplo, e cada hábito, como você pode ver em menos de dois minutos, tem algo que eu posso mostrar aos meus clientes, por exemplo, dar feedback e dizer para eles, Ok, nós temos um bom, pequeno, fácil de usar navegação aqui no topo. E então temos um controle deslizante. Aqui compartilhamos recursos. Temos um formulário onde você pode coletar seus e-mails, por exemplo, para suas campanhas. Então temos um controle deslizante aqui embaixo. E finalmente temos um rodapé. Não precisa ficar assim. Pode parecer como quiser. É por isso que você tem 120 neste produto em particular. 110 elementos diferentes, como você pode ver aqui. Mas temos outros produtos. Como você pode ver aqui, não
é apenas nossos produtos que você pode acessar. Você comeu, por exemplo, e você pode explorar todos esses produtos. Você pode ir para navegar e você confinou fio. O Frank. É e você pode procurar por essas mulheres e filhos aqui, e você pode ver que eles têm variedade diferente de Y. Frank. É e eu acredito que o link no pdf dedo do pé tudo. Estou falando bem aqui, e você pode usar qualquer um desses para seus projetos, obviamente. Mas o meu favorito está em elementos Votto fora do curso. Aqui estão os nossos produtos aqui em elementos de água também. O que este site basicamente faz é o seu pagamento um preço de assinatura mensal e você está recebendo cada produto que está localizado neste site. Então, se eu pulei duas categorias, você pode ver o que eles têm de estoque de vídeo, seus modelos, música, efeitos
sonoros , modelos
gráficos, que inclui tudo isso, que eu estou falando. Você tem gráficos, ilustrações, modelos e assim por diante. Você tem fotos mesmo para modelos de representante. Você tem equipes WordPress. Então, cada coisa que você pode imaginar que você tem neste site. Então, se você estiver interessado em um grande negócio, então você pode pular para envolver elementos baía para uma assinatura mensal e, em seguida
, simplesmente usar o modelo que você quiser e é um conjunto. Aqui estão os nossos modelos e se eu pular aqui, eles não estão todos localizados aqui. Mas se você pular em modelos gráficos porque nós simplesmente temos toe salvar algo para o nosso site para torná-lo exclusivo porque nós temos uma assinatura aqui também. E você pode ver quantos desses modelos diferentes temos aqui e aqui está o kit de quadros do IRS. E há também um para a Web, que eu estava mostrando a vocês antes. E uma vez que você terminar com estes, você pode transformá-los em protótipos completos e protótipos de alta fidelidade, então você pode simplesmente arrastar e soltar suas imagens e incluí-los dentro e deixe-me mostrar-lhe a morte. Então vamos dizer que eu tenho uma imagem e eu quero incluí-la aqui, ou precisamos fazer é simplesmente pressionar o controle para selecionar esta camada, e você pode saltar aqui para ver a estratégia de camadas. Se eu pular aqui, você pode ver que tudo é nomeado corretamente. Tudo está posicionado como deveria estar na página. Basta arrastar e soltar sua imagem para incluí-la aqui. E como você pode ver, com apenas alguns minutos de folga, você pode converter isso em alta fidelidade. Protótipo. Obviamente, então você pode selecionar as apostas e mudar sua cor para, digamos, essa cor, por exemplo, apenas para que possamos vê-la um pouco melhor. Talvez até essa cor, e então você pode simplesmente ampliá-la se quiser, e posicioná-la para ser um pouco mais limpa aos olhos. e um pouco mais atraente. Digamos que você pode pular em frente e estender esta imagem para o topo. Por exemplo, posicioná-lo bem no centro assim e, em seguida, podemos localizar nossa navegação, colocá-lo aqui no topo, saltar dentro de sua navegação e simples desligar o fundo. E então você tem essa transição agradável entre a navegação e imagem de fundo, riquezas, imagem de
herói, é
claro. Então é assim que é fácil usar esses modelos, especialmente nossos modelos. E nós realmente nos esforçamos muito para trabalhar com nossos designers e nossos compradores para entender suas necessidades e desejos, a fim de estruturar nossos futuros produtos ainda melhor do que antes. Então, como eu disse, você pode pular de pé em qualquer um desses sites, e eu acredito que o link em um pdf, e você pode verificar todos esses sites e comprar qualquer desses modelos se você quiser, para melhorar o seu piso de trabalho e aumentar a sua velocidade
18. Conclusão: muito obrigado por fazer este curso. Eu realmente espero que você encontrou algum valor em sua e que você vai implementar alguns desses passos e técnicas que eu ensinei neste curso em um trabalho futuro. Lembre-se, se você está começando com armações de fio de papel, comece devagar. Comece pequeno com os suprimentos. Você já tem um deitado em torno de sua casa, e então quando você começa a obter projetos maiores e maiores e clientes, então você pode começar a melhorar e comprar alguns equipamentos mais caros. Por exemplo, alguns desses marcadores extravagantes ou pegar um papel de grade em alguém. E quando se trata de armações digitais, basta escolher o software com o qual você se sente mais confortável. É o mencionado várias vezes ao longo do curso. Eu estou mais confortável com Adobe X'd Eu gosto de adobe eggs ação melhor, e é por isso que eu usei todos os dias você pode usar qualquer um desses Softwares que mostrou , ou você pode usar qualquer outro software, que eu não mostrei em o curso. Basicamente, encontrar o que você está confortável com, e então uma vez que você começa a conhecer todos os soft primeiro, você pode alternar entre eles porque Basicamente eles são todos eram semelhantes, e eu espero que você viu isso no curso. Basicamente, todos eles têm camadas. Por exemplo, eles também têm essas ferramentas de movimento que você pode usar para mover suas formas. Basicamente, cada um deles é semelhante, então quando você aprende um deles, você basicamente conhece todos eles. Só precisa de fazer é explorar um pouco também sobre os preços. Se você não está confortável pagando por nada, então não pague por ele até que você esteja confortável e até que você ache que precisa dele para seus projetos, porque essa é a parte mais importante. Por que você pagaria por algo? Se você não quiser usá-lo mais tarde? É isso para este curso. Eu realmente espero que você tenha gostado tanto quanto eu gosto de torná-lo uma verdadeira esperança. Eu vou vê-lo em um dos meus outros cursos, e até lá, tomar cuidado e manter arame enquadramento porque é a parte mais importante do processo de design e pode ser extremamente divertido quando você começa a pendurá-lo. Cuide-se
19. Seu projeto do curso: para seu projeto de classe. Eu quero criar o mesmo quadro de arame que fizemos no curso ou um
namorado completamente diferente , que realmente encoraja você a fazer e, em seguida, salvá-lo como uma imagem e enviar essa imagem lá. Projetos de classe. Você pode usar molduras de fio de papel, e você pode usar qualquer material que você tem em sua casa para que você não tenha que ter os mesmos suprimentos que eu tinha no vídeo. Você pode usar qualquer material que você quiser. Você só precisa tirar uma imagem com o seu telefone, por exemplo, é carregado para seus projetos de classe. Ou, se você estiver usando assuntos digitais, então você pode simplesmente salvar a imagem do seu quadro de fio final e carregar para os projetos. Eu realmente quero ver o que você fez com todas essas técnicas, que são ensinadas no curso, e estou muito animado para ver seus resultados e ver o que você aprende com o discurso. Então eu estou ansioso para seus projetos
20. Canal do YouTube para mais conteúdo: Aqui é Designer Alex. E eu só queria dizer um rápido obrigado. Obrigado por fazer o discurso, e eu realmente espero que você tenha obtido o máximo de valor possível dele se você quiser conferir mais conteúdo. Recentemente, lancei meu canal no YouTube, onde explorou alguns tópicos que podem interessar designers de freelancers para técnicas de
renda passiva de Web design, design APP. Você projeta design UX. Então, se você estiver interessado em algum desses tópicos, vá até o meu canal do YouTube, conecte-o no pdf, e você pode simplesmente clicar lá e ele o levará ao meu canal do YouTube. Se você gosta desse conteúdo, certifique-se de se inscrever e certifique-se de seguir, porque eu vou tentar ser realmente regular com esse canal do YouTube e enviar o máximo conteúdo possível. Então, obrigado mais uma vez por fazer o meu curso, e eu realmente espero vê-lo no meu canal Digger
21. Junte-se ao meu grupo gratuito no Facebook: Ei, designer, eu realmente espero que você tenha gostado do curso, e que você tenha o máximo de valor possível fora dele. Se você quiser receber ainda mais valor de mim e da comunidade de design, eu criei um grupo no Facebook. Onde você pode participar é apenas um grupo do Facebook para os meus alunos sozinho para que você possa participar
clicando no link abaixo ordem. Nate fora do curso é uma conta no Facebook, e é um grupo gratuito para participar. O grupo é formado para fornecer feedback adicional para que você possa anexar seus projetos seguindo este curso e usando exemplos deste curso ou qualquer outro fora
dos meus cursos. Ou se você tiver seus próprios exemplos. Off design funciona do passado do presente. Você pode enviar esses trabalhos para o Facebook Group e, em seguida, recebeu feedback para mim ou de outros membros do design. Encorajo-vos também se tiverem postos de trabalho disponíveis para os partilhar nesse grupo, de modo todos possam beneficiar desse grupo. Mais uma vez, o grupo está livre. É fácil se juntar. Basta clicar no link no pdf, e eu realmente espero ver o maior número possível de vocês nesse grupo apenas para compartilhar nossas experiências como designers, e eu vou tentar postar algum vídeo adicional, algumas dicas adicionais e técnicas nesse grupo do Facebook. Mas, por enquanto, estamos apenas a começar. Nós vamos apenas formar o seu, e eu realmente encorajo você a participar e compartilhar seu melhor trabalho lá. Para inspirar outros designers ou dedo do pé pedir feedback adicional. Apenas certifique-se, por favor, quando você está pedindo feedback, pediu coisas específicas. Não basta perguntar. O que você acha deste projeto? Porque ninguém vai responder a isso. Ou se o
fizerem, estão na cena do Lee. Eles vão dizer para você se parece bonito ou não parece legal. Certifique-se de pedir comentários específicos sobre seus designs. Por exemplo, faça como essa combinação de cores. Você acha que eu deveria usar uma frente diferente? Você acha que essas imagens correspondem bem com a cor de fundo, por exemplo ,
coisas assim, Então certifique-se de pedir feedback específico quando seus projetos, porque vai ser muito mais fácil para mim e para outros designers nesse grupo para dar-lhe são feedback específico que você pode melhorar muito mais rápido,
em seguida, apenas perguntando o que? Tudo fora deste design. Então, obrigado mais uma vez por fazer o meu curso, e eu realmente espero vê-lo à vista fora do meu grupo do Facebook Digger.