Criação de kit em interface no Adobe Xd

1. Apresentação do curso: Ui kits são realmente úteis se você está trabalhando em um projeto pequeno ou grande, porque eles vão economizar um monte de tempo com essas tarefas repetitivas. Eles vão ajudá-lo a entregá-lo aos seus clientes e desenvolvedores muito mais rápido. E eles vão deixar-te com mais tempo livre para ti. Crianças entram, meu nome é Alex, eu sou um criador de produtos e até agora eu criei quatro ou 500 produtos de design e também nosso criador de cursos. E até agora eu criei mais de 20 cursos. Nesta classe Skillshare, vamos falar sobre kits de interface do usuário e por que eles são úteis. Vamos cobrir o que nossos kits de interface do usuário e para que eles podem ser usados. Quais são os três principais tipos de kit de interface do usuário e por que cada um deles é bom para. Qual é a diferença entre kits de interface do usuário e sistemas de design? Como escolher componentes importantes para seus próprios kits de interface do usuário, como estruturar, criar e salvar seu kit de interface do usuário no Adobe XD. E, finalmente, qual é a diferença entre kits de interface de usuário gratuitos e premium e como você pode vender o seu próprio se quiser, e muito mais. Seu projeto de classe para esta classe é criar seu próprio kit de interface do usuário. Você pode usar o Adobe XD ou qualquer outro software para uma questão, você pode simplesmente escolher alguns elementos, salvá-los como um JPEG e fazer upload em seus projetos de classe. E eu estou realmente animado para ver o que vocês podem criar e quais são alguns projetos que você pode criar para este projeto de classe. Então, estou ansioso para vê-lo no final da aula para mostrar como você é criança pode ser usado para melhorar sua produtividade, independentemente do tipo de projetos de interface do usuário em que você está trabalhando. Então, vemo-nos na aula. 2. O que são Kits de UI e por que são úteis: Ui kits são basicamente apenas coleção de diferentes elementos que você pode usar para seus projetos de design de interface do usuário. Esses projetos podem variar de projetos de design móvel para projetos de design de sites para projetos de design de produtos, como painéis e aplicativos da Web e projetos dessa natureza. Eles podem vir em diferentes tipos de arquivos. Por exemplo, Photoshop, Sketch, Illustrator, Figma, Adobe XD. E nesta aula vamos nos concentrar no Adobe XD. Eles também podem ser imagens de largura e sem imagens. E vamos explorar algumas diferenças entre esses dois tipos. Por que um é melhor do que o outro e o contrário? E principalmente você vai usar esses kits de interface do usuário para acelerar seu fluxo de trabalho porque você vai fazer essas tarefas repetitivas, especialmente no design de interface do usuário. Por exemplo, você criará navegações para todos os seus projetos. Então, em vez de recriar essa navegação per se para cada projeto específico, você só vai criar um tipo de navegação e, em seguida, simplesmente expandir sua ideação a partir desse tipo de navegação, que eu também vou mostrar mais tarde em nesta classe. Então, basicamente, vamos acelerar seu fluxo de trabalho na próxima vez que você iniciar um projeto de design, porque você vai ter todos esses tipos de arquivos diferentes salvos em seu computador. E então, basicamente, serão capazes de usar e reutilizar todos esses elementos diferentes para todos os seus projetos diferentes. Agora, porque vamos trabalhar no Adobe XD, vamos trabalhar com componentes e você será capaz de reutilizar esses componentes para alterar as cores, para alterar os tipos de arquivo, para alterar a estrutura, para alterar a sombra de fundo, por exemplo, para alterar as cores e muito, muito mais. Com seus filhos, você vai ser capaz de se adaptar a diferentes projetos. Então, mais uma vez, por exemplo, se você estiver criando no Adobe XD per se, você pode criar componentes para, por exemplo, design de site em tela cheia, Digamos 1920 por 1080, então você pode ir para baixo e criar redimensiona tamanhos responsivos para seus projetos de design responsivos. O mesmo vale para projetos móveis. Por exemplo, você cria seu kit de interface do usuário para aplicativos iOS. Em seguida, você deseja criar o mesmo kit de interface do usuário para trabalhar no Android. Vai ser muito mais simples quando você realmente tem os tipos de arquivos e arquivos já preparados, então fazer isso do zero. E isso vai permitir que você cobre mais por seus projetos porque você vai ser capaz de entregar mais rápido. Porque você vem preparado com essas crianças e você prepara todos esses elementos para seus projetos futuros. Então, no próximo vídeo, vamos explorar essas diferenças entre kits de interface do usuário com imagens e sem imagens. Quais são alguns benefícios e desvantagens de cada um deles? E vejo-te no próximo vídeo. 3. Os tipos de kits de UI: Neste vídeo, vamos explorar algumas diferenças principais de kits de interface do usuário com imagens e sem imagens. Quais são as principais desvantagens e pontos de venda para cada um deles? Então vamos começar. Então aqui eu abri UI 8, que é um site onde você pode realmente comprar esses kits de interface do usuário. E vamos chamar um documento sobre esses sites um pouco mais tarde neste vídeo específico, eu só quero focar nas diferenças entre kits de interface do usuário com imagens e sem imagens. Para que cada um deles pode ser usado? N, o que você pode aprender sobre a criação desses kits de interface do usuário para seus diferentes tipos de projetos. Então o que temos aqui é este UIkit quântico, que é, como dizem, enorme biblioteca de seus cartões para serviços web. E o que eles realmente criaram aqui, como você pode ver, são todos esses componentes diferentes, que são basicamente um site procurando modelos que você pode usar e reutilizar para seus projetos futuros. Então, por que isso é útil para, se eu clicar com o botão direito do mouse e abrir na nova guia e ampliar para que você possa ver um pouco desses detalhes. Você pode ver que aqui temos, por exemplo, este Sony Dual choque para controlador preto. Temos o preço, temos este ícone. Então, basicamente, o que você pode fazer com este design é que você pode simplesmente trabalhar com este design exato. Basta criar um componente, por exemplo, para este controlador de show dual. E digamos que você deseja substituir isso dentro do componente, por exemplo, para adicionar um produto diferente. Digamos que talvez você queira vender o iPhone, então você pode criar componente de dívida deste cartão específico. Você pode simplesmente arrastar e soltar sua imagem do iPhone. Você pode arrastar e soltar as informações do iPhone que você tem para venda. E Dario, você não precisa criar o cartão mais uma vez, você não precisa adicionar a sombra. Você não precisa escolher a fonte específica. Você não precisa escolher o layout de tipografia, você não precisa escolher a hierarquia. Tudo isso é feito para você no projeto anterior sozinho. E agora você pode simplesmente usar e reutilizar esse mesmo componente em seus projetos futuros. Vou explicar que um pouco mais tarde na lição especificamente sobre o Adobe XD, como você pode dimensionar esses componentes, como ele pode alterá-los, usá-los e reutilizá-los e assim por diante. Mas neste exemplo, como eu disse, queremos nos concentrar em kits de interface do usuário com imagens e sem imagens e o que você pode usar cada um desses quatro. Então, voltando a este exemplo, você pode ver quantos deles eles têm. Eles têm este carro de venda, por exemplo, eles têm esta carga mais componentes. Então, basicamente, todos esses componentes são extremamente cruciais para criar em um kit de interface do usuário porque você vai usá-los e reutilizá-los para cada projeto. Então, nas negações, rodapés, cartões de blog, estes são itens afiados e assim por diante. Então, tudo isso vai ser realmente útil para os seus projetos futuros. Se verificarmos este que é chamado plataforma nosso kit wireframe. Então, qual é a diferença aqui entre este e este? Basicamente wire-frame crianças são estes kits de interface do usuário sem quaisquer imagens e você pode encontrá-los on-line onde quer que você pesquisa. E eu realmente recomendo que você crie esses tipos de wireframe ou kits de interface do usuário. Por quê? Porque você sempre pode arrastar e soltar imagens em lugares desses kits de wireframing e você não precisa fazer login com esses tipos de arquivos enormes porque obviamente que são um software que você está usando se você não tem imagens incluídas dentro de seus projetos, seus tipos de arquivo serão muito menores. Vai ser muito mais fácil trabalhar com esses arquivos. Então, se você os tiver com imagens, também será muito mais simples. Para mostrar essas crianças wireframe para seus clientes e apenas dizer a eles, basta imaginar incluindo imagens dentro do lado do marcador de posição de imagem, por exemplo, você pode alterar a cor. Então, digamos que você pode falar com seu cliente, ele pode comunicar essa idéia. Por exemplo, essa imagem vai ser azul, como neste caso aqui, então eles podem saber, ok, Então este fundo vai ser apenas imagem. Então vai ser muito mais simples para eles entenderem e visualizarem em sua cabeça que a imagem vai para lá. O que está nele para você é, vai ser muito mais simples de mudar e fazer alterações para esses kits wireframing do que para os kits de interface do usuário porque você está ficando com imagens vai ser muito mais difícil de mudar porque você sempre vai seguir algum tipo de estrutura de imagem. Você sempre vai envolver algum tipo de imagem, talvez você não vai provar suas cores de suas imagens. Portanto, é bom ser muito mais simples usar cores em uso todos esses elementos de wireframe crianças porque você não tem imagens no lugar mais tarde quando você determinar a estrutura com seu cliente durante o seu trabalho sobre isso você pode simplesmente arrastar e soltar imagens dentro e, em seguida, simplesmente ajustar o design um pouco. Por exemplo, inclua a sombra aqui e ali, apenas para tornar o botão, por exemplo, destaque ou navegação ou imagem herói ou o texto. Talvez você deva mudar a cor do texto de escuro para claro e o contrário dependendo da imagem de sua escolha. Então, portanto, as crianças wireframe são muito mais úteis, na minha opinião. E, em seguida, kits de interface do usuário porque você são crianças, como eu disse, seguir a estrutura das imagens e, portanto, adaptar-se a essa estrutura e essas imagens, enquanto as crianças wireframe simplesmente usam a própria estrutura e não se adaptam a nada. Você pode simplesmente arrastar e soltar imagens dentro mais tarde. Finalmente, há mais uma coisa que eu queria mencionar, e estes são fluxogramas. E basicamente para fluxogramas vêm em diferentes tipos de tamanhos de arquivo, diferentes tipos de elementos. E isso é algo chamado fluxograma móvel esquema. E eu posso mostrar um dos meus produtos de fluxograma um pouco mais tarde porque eu preciso, e eu vou mostrar a vocês como eu os criei e como você pode usá-los para comunicar idéias com seus clientes voltando para este, porque você não pode vê-lo. Aqui. Eu abro em uma nova aba, e aqui você pode ver que eles não usam textos reais, eles não usam imagens reais. Eles só usam esses espaços reservados. Por exemplo, isso vai ser parágrafo, vai ser legenda do título. Esta é a imagem, este é o botão, esta é a paginação é que você pode ver que eles estão usando ícones para navegação e para pesquisa. Usando esses ícones sociais para Facebook e Twitter. E o que isso vai permitir que você faça é que você seja capaz de comunicar suas ideias e muito mais rápido com seu cliente. Porque mais uma vez, como acontece com kits de wireframing e novas crianças AI, você não perde seu tempo escolhendo essas imagens, escolhendo essas cores. Você está simplesmente criando layouts que você pode se comunicar e compartilhar com seu cliente. Depois que esses layouts forem aprovados, você poderá trabalhar nos detalhes. Então é por isso que esses kits de wireframing, kits de interface e esses fluxogramas são tão cruciais para você criar. Então você pode imaginar que você pode começar a trabalhar em um fluxograma, por exemplo, para o seu cliente. Depois que o projeto é feito, você pode simplesmente reutilizar esse fluxograma em termos de uma criação UIKit para o seu próximo projeto, você pode simplesmente criar componentes para formas, para cores, para fontes, para imagens, para botões, e assim por diante. E você pode simplesmente usar e reutilizar esses componentes em seus projetos futuros, que por sua vez vai economizar muito tempo e ele vai ajudá-lo a seguir em frente com seus projetos mais rápido vai permitir que você cobrar muito mais porque você vai gastar muito menos tempo em cada projeto porque você já criou todos esses componentes. 4. Quais componentes são importantes: Quando se trata de estrutura, esses componentes são realmente importantes e menos importantes. Então, é realmente tudo até você quais tipos de componentes você deseja usar. Então, digamos que você está trabalhando em projetos de blog o tempo todo. Basta dar uma olhada em seus trabalhos anteriores e entender quais tipos de componentes você usou no passado. Obviamente, algum tipo de barra de pesquisa, algum tipo de rodapé de navegação, talvez até controles deslizantes, imagens de herói, portas são realmente obrigatórios porque esses são tipos de elementos que você vai usar o tempo todo em seus projetos. Mas, dependendo do nicho, você é independente dos projetos que você estará trabalhando anteriormente e anteriormente, você é o único que vai determinar quais tipos desses elementos você vai usar em seus kits de interface do usuário. Então, vou mostrar-vos com os exemplos anteriores que vos mostrei. E você pode determinar olhando para aqueles quais tipos de elementos você pode escolher. E nos próximos vídeos desta aula, eu vou mostrar a vocês quais são alguns tipos de elementos que são usados no passado e o que você pode aprender com isso. Então, voltando para esses exemplos que mostrei anteriormente, você pode ver que eles têm e-commerce bem aqui. E se eu rolar todo o caminho por aqui, para que possamos ver e-commerce. E se eu rolar todo o caminho para baixo, você pode ver o Dashboard. Então, se você está trabalhando em projetos que exigem todos esses elementos, você pode simplesmente imaginar o quão demorado objetivo destes são. Então você pode criá-los uma vez e, em seguida, simplesmente reutilizá-los mudando as cores, mudando, por exemplo, a posição desses diferentes textos e assim por diante. Se percorrermos todo o caminho para baixo, temos cartões de empresa. Então, esses podem ser, por exemplo, portfólio de equipe Sobre Nós, depoimentos, recursos, preços e coisas assim. Se percorrermos todo o caminho para baixo, podemos ver placas de música e vídeo. Portanto, estes talvez não sejam tão importantes como estes anteriores, e eles podem variar de projeto para projeto. Notícias e cartões de revistas. Mais uma vez, se você está trabalhando em projetos de blog o tempo todo, estes são realmente cruciais. Então, uma vez que você criar um um vai ser muito mais simples para reutilizá-los e reutilizá-los para projetos futuros. E você pode ver aqui, então temos diferentes tipos de navegação. Temos esses cartões sociais, que mais uma vez, dependendo do projeto em que você está trabalhando, podem ser importantes ou menos importantes. Temos elementos de base e cartões de estilo. Então temos elementos de base, tais como navegação, rodapés, migalhas. Temos esses ícones diferentes, carregadores, controles deslizantes, botões, cores. E finalmente você tem essas páginas de exemplo neste UIkit quântico particular. E você pode olhar para essas páginas para inspiração e ver onde eles usaram todos esses elementos diferentes. Se dermos uma olhada no jogo de plataformas, temos cabeçalhos, temos conteúdo. Então, mais uma vez, blocos de Conteúdo, controles deslizantes, grades simples. Então basicamente imagens em uma grade esquerda e direita. Temos esta grade mestre. Temos recursos futuros à esquerda, certo. Por exemplo, com maquete de telefone celular, com maquete de site, desculpe, maquete de laptop com maquete de tablet. Temos diferentes carteiras mais uma vez, dependendo de onde você está trabalhando em que natureza, quando usar um ou outro. Temos comércio eletrônico, especialmente importante se você estiver trabalhando com sites de comércio eletrônico. Temos cartões de blog. E, obviamente, você pode usar e reutilizar esses diferentes componentes. Por exemplo, estes cartões de bloco. Você não precisa usá-los para sites de blog. Você pode usá-los, por exemplo, para sites de comércio eletrônico. Essa é a beleza desses kits de interface do usuário. Você pode simplesmente redefinir esses cartões em seus projetos futuros e simplesmente adaptá-los para trabalhar para esse projeto específico. Podemos ter depoimentos de equipes, estábulos de preços, plano de ação. Estas tabelas de preços são especialmente chato para criar porque você é basicamente, digamos que você tem, por exemplo, 20 exemplos diferentes dessas tabelas de preços on-line. E todos esses outros exemplos são apenas variações desses exemplos. Então por que perderia tempo recriando o tempo todo? Todos esses elementos simplesmente criar, por exemplo, cinco ou seis tabelas de preços de uma só vez lá, simplesmente reutilizá-los para seus projetos futuros vai economizar um monte de tempo, especialmente com esses detalhes chatos onde você têm a maioria dessas opções diferentes, especialmente com tabela de preços. Então você tem opções, você tem preços, um plano mensal, plano anual. Então, todos esses detalhes vão levar muito tempo para criar para cada projeto em particular. Portanto, tê-los em um kit de interface do usuário vai economizar muito tempo. Se dermos uma olhada aqui, chamada à ação, especialmente importante com todos esses cartões promocionais, temos formulários e contatos. Mais uma vez, com essas formas, quantas dessas variações você pode realmente ter? Então, digamos que você pode criar, por exemplo, 1520 formulários de contato. Lá vai você. Você pode usá-los para todos os seus projetos futuros. E cabeçalhos e rodapés, especialmente são chatos para mim criar por causa da repetitividade e eles estão usando todos esses elementos diferentes. Por exemplo, o logotipo do cliente vai ser esquerda, direita, centro na parte inferior, e é basicamente isso. Então você pode ver quando você começa a criar esses kits de interface do usuário, você pode obter a imagem de quais tipos de elementos você precisa para criar um mais, quais tipos de elementos você precisa criar menos obviamente para qualquer tipo de nicho em que você está, algum tipo de formulário de contato será bom para incluir. Mas basicamente uma vez que você começar a criar, você pode usar o formulário de contato para isso, a partir deste projeto. Você pode usar o formulário de contato deste projeto e simplesmente se adaptar ao trabalho para seus projetos futuros. Esse é o ponto de vista que eu brinco, e é por isso que eu acho que eles são extremamente úteis para ter e para criar. E, obviamente, esta criação UIKit não vai ser fácil, não vai vir rápido. Este é o processo que você vai usar e reutilizar ao longo de sua carreira. Então você pode basicamente suprimir alguns elementos que não são mais relevantes em termos de estilo, em termos de função. Talvez alguns elementos não sejam usados na indústria ou em mais, então você pode simplesmente sucatá-los. Use elementos que são finais, basta se adaptar e se ajustar ao kit de interface do usuário que você está usando. Então essa é a beleza dos kits de interface do usuário e é por isso que eu os amo tanto. E eu acho que você deveria começar a explorá-los também. 5. Estrutura de kit de UI no Adobe XD: Neste vídeo, vou mostrar algumas ideias de estrutura para seus kits de interface do usuário no Adobe XD. Eu vou mostrar meus exemplos porque eu tenho criado esses UI e UX crianças há anos. E eu tenho mais de 500 produtos de design na minha loja web amanhecer na dotnet, eu vou deixar os links para tudo o que eu estou falando no PDF. Você pode simplesmente clicar nesses links e visitar e explorar se você estiver interessado, mesmo Burgess, todos esses produtos diferentes que eu mencionei n, que eu vou mencionar no futuro. Uma vez que você realmente chegar a esses tipos de vendas e esses perfis nesses sites, você pode vender seus projetos. Mas, por enquanto, vamos explorar a estrutura dessas crianças, como elas podem trabalhar no Adobe XD e como você pode aprender com ele e criar o seu próprio. Então, o que eu tenho aqui é o construtor de página de destino convertido, que é o produto que criamos há algum tempo. E este é o kit de arame, obviamente, como você pode ver. E se eu aproximar um pouco mais, mas você pode ver aqui nós temos a navegação, nós temos os cabeçalhos, história, recursos, benefícios, promoção, depoimentos, equipe, preços, outros. E para todos estes, temos várias opções, obviamente porque este é o construtor da página de destino. Estes são os elementos que vão usar para a maioria das páginas de destino. E isso é destinado a alguém que está criando essas páginas de destino o tempo todo porque a maioria dessas empresas estão lá, estão criando essas páginas de destino o tempo todo, por exemplo, para suas campanhas de lançamento, para seus lançamentos de produtos, para seu produto para uma promoção para todas essas campanhas, para anúncios do Facebook, para anúncios do Instagram, anúncios do YouTube e assim por diante. As páginas de destino são extremamente importantes para isso. Este produto específico destina-se a funcionar com páginas de destino. Então, mais uma vez, vamos voltar ao nicho. Qual é o seu nicho e qual é o seu tipo de projeto em que você está trabalhando? Você vai criar componentes que vão funcionar nesse nicho. Se saltarmos para trás aqui, por exemplo, posso ver que são 1400. E eu posso entrar aqui para criar uma nova prancheta. E eu posso pular aqui, criar este. Clique aqui e simplesmente ajustado para 1400, assim. Para que todos os nossos elementos funcionem. E eu vou expandi-lo ainda mais. Então o que eu posso fazer é, por exemplo, clicar neste controle de navegação C, clicar aqui, controlar V. E eu posso, por exemplo, clicar aqui, controlar C, controlar V, e ajustar isso para caber. Eu posso até colocá-los dentro da pilha, e então eu posso simplesmente arrastar e soltar dentro de uma pilha, mas nós também podemos fazer isso mais tarde. Por exemplo, eu quero mostrar esses recursos diferentes. Então vamos ver onde estão os recursos. Aqui estão eles. Então, por exemplo, eu posso usar este controle C, controle V. E você pode ver como a criação desses sites é fácil. Digamos que este aqui, se posiciona bem aqui. Talvez eu queira usar este agora. Posição bem aqui. Talvez eu queira usar este aqui. Assim como. E digamos que agora chega a hora do preço, coloque-o aqui. E talvez algo assim. Eu quero persuadir as pessoas ainda mais rodapé aqui. E posição não importa. Dê um momento e verá o porquê em um segundo. Então coloque-os aqui. E digamos que agora que sua página de destino está concluída, você pode selecionar todos eles, clicar em Control G para colocá-los em um grupo e, em seguida, colocá-los em uma pilha. Esta é a pilha vertical e eu posso colocar a distância de 150, por exemplo, entre eles e pressione Enter ou Return. E agora temos espaço uniformemente espaçado entre todos os nossos elementos. Posso colocá-los todos no topo da página assim. E, por exemplo, não quero que seja 150 por isso. Então eu posso simplesmente ajustar apenas este para 0. E todos esses outros vão ter 150 para o espaçamento. Assim, você pode ver como é simples criar sua página de destino. Você pode clicar duas vezes aqui para fechá-lo aqui mesmo. E, por exemplo, digamos que a cópia está pronta e você deseja fazer algumas alterações nas imagens. Você pode simplesmente arrastar e soltar suas imagens dentro daqui, colocá-lo e, em seguida, simplesmente fazer alterações. Por exemplo, temos este ícone de imagem bem aqui. Eu posso simplesmente pressionar Delete para removê-lo. E eu posso, por exemplo, diminuir a opacidade da minha imagem para que ela se destaque um pouco mais. Por exemplo, eu quero adicionar uma imagem adicional para aqui. Talvez esta imagem, eu quero adicionar algo para o vídeo. Talvez. Talvez esta imagem vai funcionar para que você possa ver como é simples trabalhar com essas imagens diferentes. Então eu posso selecioná-lo para talvez, 40 por cento de obesidade. Talvez eu possa usar um ícone diferente do olho aqui. E talvez eu queira colocar isso para ser, eu não sei, algo um pouco mais redondo. Então eu posso pular aqui, digitar em 2004, o raio do canto. Se eu quiser fazer isso, você pode ajustar isso para que você veja como é simples criar esses elementos. Então esta é basicamente a minha estrutura e como minha equipe e eu estamos trabalhando por anos nessas estruturas. E eu vou mostrar a vocês uma estrutura diferente para crianças móveis. E este é o UIkit tagarela. E você pode ver que temos imagens bem aqui. Obviamente vai ser bastante simples para substituir todas essas imagens. Você só vai usar exatamente a mesma estrutura. Então, se eu der uma olhada aqui, talvez eu queira ajustar essas imagens para que eu possa selecioná-la e esta, e talvez eu possa selecionar duas imagens diferentes, arrastá-las e soltá-las dentro. E eu quero usar este, por exemplo, que você tenha a idéia de quão rápido é. Mas o que você também pode fazer é clicar aqui, e aqui temos todos esses elementos diferentes. Agora, os elementos são realmente úteis. Temos este azul principal e eu quero clicar com o botão direito do mouse, clique em Editar, e talvez eu queira alterá-lo para vermelho. Então, basta notar como ele se aplica ao longo de todas nossas diferentes mudanças e simplesmente ajustado para ler. Também posso ir ao Control Z. para desfazer isso. Também podemos alterar o tamanho da fonte e opções de fonte. Podemos mudar os pesos da fonte. Podemos mudar todos esses diferentes elementos. Então o que eu posso fazer é clicar em Editar. Por exemplo, eu quero escolher alguns outros formulários como Open Sans, por exemplo, pressione Enter, e ele vai aplicar essa alteração em todo o nosso design. Então você pode ver como isso é fácil e simples. Além disso, podemos ter todos esses componentes diferentes. Podemos mudar de forma independente. Então você pode ver, por exemplo, que nós temos esses pontos que são pretos, bem aqui, bem aqui, bem aqui. Então, em todo o nosso design e tudo o mais, que é preto, queremos mudá-lo para algo selvagem, como ler mais uma vez, por exemplo. Então você pode ver onde quer que tivéssemos essa cor, ela vai se aplicar em todo o design artístico. E vai aplicar-se onde quer que tenhamos, em primeiro lugar. É por isso que todos esses componentes são extremamente úteis. E no próximo exemplo e no próximo vídeo, eu vou mostrar a vocês como você pode transformar seu design existente em UIKit porque você não vai comprar esses kits de interface do usuário onde cada projeto, e eu acho que é muito melhor abordagem, mesmo que eu estou vendendo essas crianças UAC, é muito, muito melhor abordagem para começar com um UiKit premium apenas para a sua estrutura, apenas para este elemento, apenas para alguns elementos chatos, que você pode então reutilizar para seus próprios projetos e , em seguida, criar seu próprio UIKit usando esses elementos, usando essas táticas e técnicas, que vai funcionar para o seu caso de uso particular. Porque vou voltar ao nicho mais uma vez. Como você está, por exemplo, em um nicho de viagem, elementos que funcionaram para você em seu projeto podem não funcionar para alguém que está em um nicho de blog, por exemplo, porque eles podem precisar de elementos diferentes. Então, no próximo vídeo, vou mostrar a vocês como você pode transformar seu projeto existente em kits de interface do usuário. 6. Criação de kit de UI no Adobe Xd: Neste vídeo, vou mostrar como você pode transformar seu projeto existente em UIKit e depois reutilizá-lo para seus projetos futuros. Esta abordagem pode ser usada para diferentes projetos tão grandes e pequenos. E você pode usar certos elementos ou você pode usar todos os elementos e, em seguida, simplesmente continuar a partir daí. Você pode usar um tipo de elemento, por exemplo, navegação. Se isso é algo que está repetindo o tempo todo em seu projeto, ou você pode usar diferentes tipos de itens. Por exemplo, navegações, imagens de herói, rodapés, corações de blog e todos esses tipos de itens. Então eu vou mostrar a vocês neste exemplo ou para o projeto existente como você pode transformá-lo em um kit de interface do usuário. Então este é o projeto que criei para um dos meus cursos anteriores. Eu vou deixá-lo, deixar o link para ele no PDF para que você possa dar uma olhada nele se você estiver interessado. Então todos esses elementos são criados nessa classe. Então, já são 20 horas de duração n mais uma vez, vou deixar o link no PDF para que você possa acessá-lo rapidamente. E o que temos aqui são componentes diferentes para as cores, estilos de caracteres, todos esses componentes para todos esses cartões diferentes, temos ícones diferentes, temos estruturas diferentes aqui. Temos o logotipo, temos as setas e muito, muito mais. Então o que você pode fazer por isso é se eu clicar aqui, mais uma vez, estamos em 1920 em vez de 1400, como fizemos da última vez. Então o que eu posso fazer é clicar na minha prancheta para criar um novo aeroporto. Ou posso simplesmente duplicar o existente. O que fazer ainda melhor, o que eu posso fazer é ir direto para o arquivo. E, em seguida, Novo, desculpe se ele fica um pouco porque eu estou executando todos esses elementos na minha máquina. E esse arquivo é enorme. Então eu vou criar um novo arquivo, e eu vou simplesmente reutilizar alguns desses diferentes elementos no meu projeto. Ou é uma adição, nós criamos esse projeto. O que eu vou fazer é saltar aqui para este site design. E eu vou pular todo o caminho até aqui, acertar o Controle C. E então eu vou mudar para o projeto que acabamos de criar, acertar o Controle V. Então lá eu posso apenas colar dentro deste design. E o que eu também posso fazer é voltar para aqui. E talvez eu possa usar um ao outro. Vamos usar este controle C. E eu vou saltar para este projeto, bater o controle V. E então uma vez lá vamos nós, apenas para nos poupar um pouco de tempo, o que eu vou fazer é realmente desligar isso. Então frigideira, e como você pode ver, alguns elementos já estão colados em nosso projeto anterior, como todos esses ícones diferentes. Mas não temos cores e estilos de caracteres e podemos trabalhar neles separadamente. O que eu queria te mostrar é isso. Então eu vou ampliar isso. E digamos que eu queira usar essa navegação, mas antes de tudo, vamos usar a mesma grade. Então, se eu ligá-lo, nós temos, vamos ver, 12 colunas. Então 60, 82, e eu vou fazer o mesmo por isso. Então temos 60, 82. Lá vamos nós. Então é o mesmo que este. E eu vou baixar sua basicidade dessas linhas de grade assim. Então vamos dizer que eu quero usar este círculo de navegação, pressione Controle C, colá-lo aqui mesmo. E o que posso fazer é posicioná-lo aqui. E digamos que esta é a nossa primeira navegação. Vamos para as nossas camadas. Então podemos usar, por exemplo, Nav 1. E o que eu também posso fazer é desvinculá-lo. Então vamos clicar com o botão direito. Deixe-me ver onde está. Apenas componente. Lá vamos nós. Então este é o único fim. Podemos criá-lo para ser componente local. Então podemos acertar o Controle K se quisermos, e podemos criar estados diferentes a partir dele. Então eu posso clicar aqui e digitar, por exemplo, vamos dizer botão grande, big btn. E o que eu quero fazer aqui é apenas clicar duas vezes dentro e estender este botão para ouvir e talvez mover nossos itens de navegação mais. Digamos que eu queira alinhá-los aqui, ou talvez até melhor no centro assim. Então, se olharmos para este estado padrão e este estado, temos esses dois estados separados. Então o que você pode fazer com este é simplesmente manter Alt em seu estado padrão. Posição aqui também. Não sei, digamos 60, então use este estado. E já tem dois tipos de navegações diferentes. Então digamos que eu queira criar outro. Então podemos voltar para o estado padrão, que é este, criar um novo estado. E por exemplo, eu posso para algo como sem texto, algo assim. Então, neste estado, o que vamos fazer é basicamente entrar e remover nossos textos. Então abra, selecione nosso texto, clique em Excluir. Então agora ficamos com o botão. E podemos expandir este botão, deixá-lo assim. Tudo depende mesmo de você. Então o que eu vou fazer é selecionar este, movê-lo para 60, e clicar sem texto. Então lá vamos nós. Temos nossos três elementos diferentes e três elementos de navegação diferentes já criados. Mas você também pode fazer é organizar estes. E eu gosto muito de fazer isso. Então este é agora um, este é agora dois. E este vai ser o nav três. E deixe-me dar-lhe apenas mais um exemplo para que possamos voltar para este padrão e criar um sem um botão ou sem btn para abreviar. Então o que vamos fazer é basicamente fazer um ponto seleto. Então daqui estamos 40 e eu vou selecionar um botão excluído e selecionar todos os nossos itens de navegação. Assim. Posicione-os para a mudança de borda 1234. Então somos 40 a partir desta borda, como estamos com esta onda. E basicamente vou fazer isso mais uma vez. Então eu vou manter minha opção mais antiga, selecionar saber BTM e Terry ir, Eu posso voltar para o estado padrão e você pode ver o quão rápido isso é, quão rápido isso é. E isso vai poupar um monte de tempo. Vou mudar isto para um botão grande como este. Então, vai poupar um monte de tempo mais tarde para seus projetos futuros. E você já viu como isso é simples simplesmente copiar e colar no vídeo anterior. Mas você também pode fazer para essas imagens de herói, por exemplo. Então vamos clicar em Controle C. Eu vou para V. E o que eu recomendo que você faça é renomear isso para navegação e criar um aeroporto separado para essas imagens de herói, por exemplo. Então, neste caso, digamos que temos essas pessoas deste lado. E vamos duplicar. Controle J, desculpe, Controle D, assim e posicione-o para 60. Então, mais uma vez, isso vai ser em pranchetas separadas, então vamos realmente criar isso. Então eu vou remover esses dois. E você pode posicionar rodapés dentro de sua navegação, se quiser. Já cabe a você como deseja criá-los. E eu vou chamar esse herói, por exemplo. Porque essas imagens de herói é algo que você vai gastar a maior parte do seu tempo. Então vamos dizer que para este segundo exemplo, que vai ser Herói 2. Então este herói. Observe como eu não crio componentes desses. Quero mostrar-lhe esta segunda abordagem. Então, como eu já mostrei com esses componentes, obviamente, são extremamente simples de criar, mas você também pode ir sem componentes e você pode simplesmente criar esses elementos separados para si mesmo. Então vamos dizer que eu quero posicionar este texto para a direita. O que podemos fazer com esses é posicionar esses dois em um grupo, colocá-los em uma pilha, e simplesmente reverter a Ordem, assim. E agora o texto está deste lado, as pessoas estão deste lado. E o que também podemos fazer é usar esses elementos de fundo. Então essa forma de herói, talvez eu queira girar assim, e eu quero posicioná-la assim. E todos esses elementos diferentes. Então Hero Elements, vou posicioná-los por aqui. Então você percebe como isso é simples. E também tenho uma máscara aqui com o meu círculo de heróis dentro. Então eu vou posicioná-lo aqui mesmo. Então lá vamos nós. Só um par de cliques. Temos duas opções diferentes que podemos mostrar aos nossos clientes. O que isso vai fazer para vocês mais uma vez, é que estamos fazendo para permitir que vocês trabalhem muito mais rápido nesses projetos, especialmente com essas tarefas repetitivas como eu mencionei. Então navegação, imagens de rodapé, e todos esses elementos diferentes que vão se repetir o tempo todo, como tabelas de preços, por exemplo. Então, é muito mais fácil para você, como designer, criar todas essas variações em seu estilo, usando seus componentes, usando sua linguagem de design, usando sua fonte preferida, usando suas cores preferidas, e, em seguida, simplesmente reutilize esses componentes para seus projetos futuros. Isso é trapaça para seus clientes? Sabe, porque seus clientes só querem o resultado final. Eles não se importam como chegar ao resultado final. Isso é algo que você reaproveitou? Obviamente é, mas apenas certifique-se de não usar nenhum logotipo que você usou anteriormente em seu projeto e não usar qualquer marca. Por exemplo, certas cores em seus livros de marca que você obtém com seus clientes. Por exemplo, algumas cores são marcas registradas, algumas fontes são marcas registradas. Portanto, certifique-se de usar, por exemplo, fontes gratuitas do Google quando você começar a criá-las e, em seguida, simplesmente adaptá-las às especificações do seu cliente. Por exemplo, para cores e para fontes. Deixa-me mostrar-te mais uma coisa. Então, com o poder de x D, temos todos esses elementos diferentes. Então imagine que queremos usar essa imagem. Então, Controle C, Controle V aqui. E digamos que este é o nosso primeiro cartão. Então vamos chamar de carta um. Lambda. E aqui temos a pilha, como podem ver. Então eu vou bater em Alt. O que ainda melhor? Posso criá-lo como um componente. Então Control K, temos este estado padrão é com a imagem à esquerda. Novo estado, imagem certa. E então simplesmente ajustado para aqui. Assim. E o que eu vou fazer por este aqui é basicamente eu vou apenas jogá-los ao redor. Então lá vamos nós. E eu vou ajustar este cartão um, eu vou ter certeza de que minha imagem está bem aqui, e lá vamos nós. Então este é o nosso estado padrão. Esta é a nossa imagem certa. E mais uma vez, vou criar mais uma. Então centralize a imagem assim. E eu vou fazer uma mudança dessas. Então 123, então estamos em 60 assim. E, obviamente, para este, eu vou para a imagem central. Então o que eu vou fazer é pular bem aqui. E vou mudar a posição da minha pilha. Então o que eu vou fazer é colocá-los dentro de um grupo. Vou usar uma pilha vertical segundo como esta. E basicamente apenas expandir a imagem para as bordas assim. Clique duas vezes dentro posicionado, por exemplo, bem aqui. Lá vamos nós. O texto vai estar no centro em um momento. Então vamos para o estado padrão, e vamos trabalhar na imagem central aqui. Porque este é o nosso componente. O que eu quero fazer é basicamente ajustar este texto. Então vamos com, vamos ver a largura automática. Então o que eu vou fazer é clicar duas vezes dentro e ajustar este bit de bingo de texto lá fora. Mas você também pode fazer é criar ou para a altura e você pode ajustá-lo assim. E simplesmente traga o que você não precisa aqui assim. Então somos apenas um par de cliques. Nós vamos ser capazes de ajustá-lo. E você pode fazer deve esperar. Você pode fazer auto altura, o que quiser. E eu vou me certificar de que este é o centro alinhado assim. E eu vou talvez posicionar isso no centro e posicionar meu botão no centro também. E certifica-te de que somos 40 de todos estes. E apenas certifique-se que estamos porque estamos em uma pilha, por exemplo, 64 decimal. E você também pode inseri-lo aqui. Então, se eu selecionar meu grupo aqui, selecione 60, e ele será selecionado. Então lá vai você com apenas alguns cliques. Você tem três cartões diferentes que você pode usar. Então basicamente temos imagem padrão, imagem direita, imagem central. Então você pode fazer o que quiser com isso. Assim, você pode ver como é simples criar esses elementos no Adobe XD. E mais uma vez, peço que comece a pensar no seu projeto, comece a pensar no seu nicho, que são alguns elementos que já batem o tempo todo. Nossos elementos SWOT que são extremamente chatos. Você pode comprar algo ou baixar algo gratuitamente que vai melhorar seu fluxo de trabalho, o que vai acelerar seu fluxo de trabalho? Ou você tem que criar tudo do zero, dependendo da urina limpa, dependendo do seu estilo de design. Se for esse o caso, então simplesmente comece criando todos esses elementos regulares, como mostrei neste exemplo. Por exemplo, navegação, rodapé, todos esses carros diferentes que vão se repetir em todo o tempo e, em seguida, simplesmente expandir a partir daí ao longo do tempo. Finalmente, o que quero mostrar é que se voltarmos ao Adobe XD, você pode ver que ele salvou esse arquivo na Nuvem. Isso é extremamente importante, especialmente se você estiver compartilhando isso com seus colegas de design, com seus clientes, ou se você estiver trabalhando remotamente formulários, por exemplo, você tem o escritório e também trabalha em um laptop. Mas o que eu também recomendo é salvar isso em sua área de trabalho. Para fazer isso, você pode simplesmente escrever aqui em Arquivo, Salvar como, e você pode escolher tão seguro quanto o documento local para sua área de trabalho. O que isso vai permitir que você faça é que você pode simplesmente ter este arquivo. Por exemplo, se a eletricidade sumiu, você pode levá-la para o seu laptop e você pode levá-lo para onde quiser. Se você tiver que ajustar e fazer algumas mudanças rápidas, se a Internet se foi, que é realmente o principal benefício dos documentos locais, você pode simplesmente salvá-lo localmente e simplesmente trabalhar ou não. Se você não tiver conexão com a Internet. 7. Sistemas de design de UI com Kits VS: Há também mais um tipo de modelo que está disponível on-line, que é chamado de sistema de design. E o sistema de design está basicamente morto. Envolve diferentes tipos de fontes, diferentes tipos de regras, diferentes tipos de grades em muitos outros projetos, especialmente se você estiver trabalhando com código. Então você vai atribuir um snippets de código diferente. Você vai atribuir tokens diferentes para cores, para fontes e muito mais. Então o sistema de design é muito mais complexo do que o UIkit. Então, dependendo dos projetos que você está trabalhando em, você pode criar sistema de design que é menor se você está trabalhando em pequenos projetos ou se você está trabalhando com projetos maiores, eu definitivamente recomendo trabalhar com sistema de design. Mas a principal diferença entre o UiKit e o sistema de design é que o UiKit já possui esses componentes pré-fabricados já criados. Então, como você viu no vídeo anterior, nós já criamos essa navegação. Então está pronto. Ele tem o logotipo dentro do qual você pode trocar com seu próximo projeto cliente. Tem o tipo dentro, então tudo já está posicionado. Você pode simplesmente renomear alguns desses tipos. Você pode alterar a fonte, você pode alterar os estilos, você pode escolher o tamanho e tudo o resto. E já tinha esse botão no lugar. Então você pode simplesmente ajustar a largura, a altura, a cor do botão, a sombra de fundo e todos esses elementos. E esse é o UIkit em poucas palavras. Enquanto com o sistema de design, você teria que recriar essa navegação do zero. E porque dentro do sistema de design você tem uma estrutura muito coerente. Então, mais uma vez, eu vou voltar para o projeto maior, especialmente no grande projeto onde maioria dos designers estão trabalhando nesse mesmo projeto. Então sistema de design é realmente crucial porque você precisa ter um repositório central de elementos para ser usado para todos esses diferentes designers dentro de sua equipe. Enquanto se você está trabalhando sozinho ou se você está trabalhando com apenas um outro designer, ou se você está trabalhando diretamente com clientes, você eu recebo é uma solução muito melhor na minha opinião, porque mais uma vez, ele vai acelerar seu fluxo de trabalho massivamente porque você tem todos esses elementos já criados. Você não precisa criá-los do zero o tempo todo. Enquanto projetar sistemas são extremamente importantes, extremamente valiosos e extremamente úteis, na minha opinião, para esses projetos menores, você realmente não precisa criar esses sistemas de design porque você tem os componentes. Então você pode simplesmente ajustar os componentes. Você pode simplesmente ajustar o tamanho da fonte. Você pode simplesmente ajustar a família de fontes. Você pode ajustar a cor. Você pode ajustar todos esses elementos diferentes, por exemplo, ícones. Digamos que você esteja usando esse ícone de imagem em todo o seu design e você só quer trocá-lo muito rapidamente. Bem, você pode criar um componente e da próxima vez no próximo projeto, se você quiser mudar isso, você pode simplesmente arrastar e soltar um ícone diferente dentro vai trocar esses componentes. E lá vai você. Você não precisa de um sistema de design para todos esses pequenos projetos. Então, mais uma vez, depende de você em que tipo de projetos você está trabalhando, em que tipo de nicho você está, especialmente para esses pequenos nichos, esses sistemas de design não são realmente tão úteis. Mais uma vez, depende de você e vou deixar os links para alguns dos sistemas de design mais conhecidos em um PDF, você pode baixar a versão XD. Você pode abri-los no Adobe XD e simplesmente explorar o que são esses sistemas de design e o que você pode aprender com eles. Porque todos eles são criados por grandes empresas. E mais uma vez, essas grandes empresas criaram esses sistemas de design porque eles têm vários designers trabalhando em uma equipe ao mesmo tempo. Então eles precisam desse repositório central de elementos para ser usado por todos esses diferentes designers. Caso contrário, se você é apenas uma banda de homem, se você está trabalhando com projetos menores, você pode simplesmente usar kits de interface do usuário e vai ficar muito bem. 8. Kits de UI gratuitos em VS: É tudo bem e bom criar esses kits de interface do usuário para você mesmo. Mas às vezes pode ser mais fácil simplesmente ir em frente e baixar ou comprar esses diferentes kits de interface do usuário que você vai ser usado para seus projetos futuros, talvez para aqueles elementos chatos como falamos anteriormente, como a navegação, como o rodapé, como as tabelas de preços e assim por diante. Então, onde você pode encontrar esses kits de interface do usuário, vou mostrar-lhe na próxima lição onde vamos realmente discutir a venda de seus próprios kits pessoais de interface do usuário nesses sites. Mas basicamente o que eu queria compartilhar nesta lição é esses kits de interface premium são feitos com apenas marca idiota em mente. Quero dizer com isso é que não há certa conexão entre a dívida UIkit e uma certa marca. Você pode simplesmente imaginar que se o iOS lançar seu UiKit vai ser específico para essas diretrizes de marca, para essas grandes diretrizes, para essas diretrizes de topografia e todos esses diferentes elementos que compõem esse UIKit específico e desse sistema operacional específico nesse caso. Então é a mesma coisa. Se o Facebook, por exemplo, lançar seu próprio UIKit, ele vai ser reconhecido por essa cor azul, por fonte de dívida e todos esses elementos. Embora com esses kits de interface premium e gratuitos, que você pode encontrar on-line, não há nenhuma marca em mente. Por que é isso? Porque é para ser usado por outros designers. Vai ser muito simples para você mudar as cores, mudar as fontes e todos esses elementos que você falou antes. Então esse é o ponto completo do kit de interface premium ou gratuito. Agora, qual é a diferença entre UIKit gratuito e Premium? Obviamente, o número 1 está no preço. Os kits de interface do usuário gratuitos podem ser baixados gratuitamente, obviamente, e o premium pode ser comprado. E a principal diferença, na minha opinião, é o número de elementos. Normalmente, estas crianças da auto-estrada vêm com dez ou 20 elementos diferentes. Enquanto kits de interface premium como o UIKit quântico, especialmente que eu mostrei antes, vem com, por exemplo, 11000 elementos diferentes. Além disso, há diferença nos tipos de arquivo. Por exemplo, com kits de interface do usuário gratuitos, ele geralmente vem com apenas um tipo de arquivo. Por exemplo, haverá XD ou Adobe Photoshop ou Sketch ou Figma ou qualquer outra coisa. Embora com premium os desejos de alguém geralmente estão se esforçando para incluir todos esses diferentes tipos de arquivos. Então, não importa o que você está usando, você vai ser coberto. Além disso, há uma diferença na diferenciação de elementos. Então, de graça você, eu acho que você vai simplesmente obter, por exemplo, 23 categorias. Enquanto com kits de interface do usuário premium, você geralmente recebe 10, 20, 50 categorias diferentes. E, finalmente, quero mencionar o apoio. Se algo quebrar, se algo não funcionar. Semana três, kits de interface do usuário, basicamente, quem se importa, É gratuito e você não vai obter qualquer apoio do designer. Enquanto com os mercados premium, especialmente se você estiver comprando-os diretamente em seu site, você terá basicamente direito ao suporte. E você será o primeiro da fila para obter ajuda desses designers que criaram esses kits de interface do usuário. Então, no próximo vídeo, vou falar sobre vender seus próprios kits de interface do usuário. E nós vamos basicamente navegar por esses diferentes sites. E eu vou mostrar-lhe onde você pode obter os kits de interface premium para si mesmo. E você também pode vender seus próprios kits de interface do usuário nesses sites específicos. 9. Como criar e vender seu kit de UI: Quando se trata de comprar kits de interface premium on-line, ou quando se trata de vender seus próprios kits de interface on-line. Há apenas um punhado de sites onde você pode fazê-lo com sucesso. Há muitos sites diferentes lá fora. E o meu conselho como alguém que está nisto há seis anos é que não tente vender em todos os lugares porque você vai simplesmente deixar a lata. Você vai gastar muito tempo desperdiçado nesses sites que não vão gerar suas vendas. Segui este conselho. Siga este vídeo de alguém que já fez isso há, como eu disse, seis anos e eu tenho ou 100 mil vendas em todos os meus diferentes produtos. Então eu deveria saber uma coisa ou duas sobre onde você deve vender e onde é rentável ou não. Então, neste vídeo, eu vou mostrar a vocês, como eu disse em um vídeo anterior, esses sites onde você pode comprar kits de interface de usuário premium e onde você pode vender seus próprios kits de interface do usuário. Agora, primeiro de tudo, por que você deve vender seus próprios kits de interface do usuário em primeiro lugar. Na verdade, é apenas um bom senso fazer isso, e é apenas uma boa fonte de renda adicional para você. Se, por exemplo, você criou um kit de interface de usuário bonito para um de seus projetos anteriores. Você pode simplesmente expandir sobre ele usando as dicas e técnicas sobre as quais falamos anteriormente e simplesmente prepará-lo e vendê-lo em um desses sites diferentes. Você pode colocá-lo à venda pelo preço de que é representado em todos esses sites diferentes. Você pode simplesmente ajustar o preço de mercado. Você pode explorar o que os outros estão fazendo e simplesmente se ajustar por si mesmo. Então, se você tiver, por exemplo, 100 elementos em seus kits de interface do usuário e estiver oferecendo apenas um tipo de arquivo, que é o Adobe XD, garante que não cobra muito porque você está competindo contra outra pessoa que está criando no esboço do Adobe XD Figma para a loja. Então, talvez o seu filho vai vender muito melhor do que o seu UIKit porque eles estão oferecendo todos esses tipos de arquivos diferentes. Então vamos saltar para dentro e eu vou mostrar todos esses sites diferentes e onde você pode vender seus produtos. E antes de tudo, hospedagem celular. Então, basicamente auto-hospedagem é onde você está hospedando os produtos e você está encarregado de trazer seus clientes. Então você está encarregado da promoção, você está encarregado da venda, você está encarregado da entrega de tudo o resto. E eles também são mercados onde você pode vender em todos esses mercados diferentes e eles estão fazendo todo o trabalho para você. Então vamos começar com auto hospedado em basicamente o site que eu estou usando por anos é estrada goma. Você pode ajustar, você pode carregar todos esses produtos diferentes. Você pode criar links personalizados, descontos personalizados, cores personalizadas. Você pode criar esses diferentes botões de chamada à ação, como ele diz aqui, começar a vender ou comprar agora, ou comprar agora, o que quiser. E você pode basicamente amarrar isso com apresentação de beacons, com apresentação drible, você pode simplesmente levar seus espectadores aqui e eles podem comprar em sua loja de câmeras. Ou você pode fazer o que eu fiz com a minha equipe é criar um site. E neste site você pode criar, por exemplo, UIKit. E digamos que você pode ver UIkit bem aqui, seus filhos bem aqui. Então temos um monte deles. E digamos que os usuários queiram comprar este, por exemplo, eles podem simplesmente clicar. Ele vai levá-los para a página específica para o seu produto, que vai ter. A descrição aqui, o que está incluído? Ele funciona em qual software e quando eu clicar em Comprar agora, ele vai levá-los para a página de goma. Eles podem simplesmente clicar, eu quero isso e eles podem comprar este produto. E como você pode ver, é muito mais simples ir do site para ouvir. O que você também pode fazer é a venda integrada. O que isso significa é que quando eles clicam em Comprar agora, uma janela vai abrir bem aqui e eles podem comprar diretamente de lá. Mas apenas certifique-se de entender se você está usando o Gmail, especialmente, e você está usando algo como o Google Analytics, por exemplo, esses dois vão falhar. Então, basicamente, apenas certifique-se, e é por isso que eu digo que ele redireciona você para uma página de compra segura. Então eu vou para aqui mesmo. Como você pode ver, Goma Road é realmente seguro como é o meu site, mas eu só quero ter essa camada adicional de segurança porque as pessoas estão deixando seus números de cartão de crédito, eles são endereços de e-mail do PayPal. Então eu não quero que nada aconteça com isso. Basicamente, essa é a minha opinião. Você também tem um site chamado sulfeto, que é basicamente bastante semelhante à estrada de goma, mas na minha opinião, estrada de goma está lá desde o início deste jogo online e você pode, como eu disse, são ajustados para caber o que você está fazendo, qualquer que seja o seu produto parece, neste caso, UiKit, mas você pode vender todos os tipos de coisas diferentes. Agora vamos passar para mercados. E eu vou mostrar a vocês quais são alguns dos principais mercados lá fora. E como eu disse, você pode explorar todos esses outros mercados, especialmente quando você começa a vender, quando você começa a obter tração. Todas essas pessoas diferentes do mercado vão se aproximar de você e dizer que eles têm este novo site revolucionário que vai trazer tanto dinheiro para você. Você não vai saber o que fazer com ele, mas não dê ouvidos a eles. Certifique-se de começar a vender nestes principais sites e, em seguida, expanda para os pequenos sites. Mas apenas com um produto de cada vez. Se você tem 500 produtos como eu, é literalmente impossível carregar todos esses produtos em todos esses sites diferentes. E por que você deveria querer fazer isso se eles não têm, por exemplo, um milhão de vendedores diferentes ou se eles não trazem vendas suficientes. Então, para começar, o que temos é o mercado Envato e este site é Graphic River. Dentro do que você tem Elementos Web e você tem interfaces de usuário. Você pode pular dentro de lá. E você pode ver como alguns desses diferentes produtos se parecem. Como eu disse anteriormente, você não precisa vender kits de interface do usuário. Você pode vender o que quiser. Mas esta classe é tudo sobre kits de interface do usuário. Em seguida, nós projetamos modelo e esses caras são destemidamente seletivos sobre o que é capaz de ir em seu site. E você pode ver que todos esses elementos são realmente de alta qualidade, realmente topo de gama, especialmente para estes kits de interface n, Por exemplo, se eu clicar aqui apenas para mostrar essas apresentações diferentes porque você está trabalhando com eles para criar essas apresentações. Você pode ver que eles são realmente tela cheia. O verdadeiro olhar polido, o realmente olhar profissional. Eles realmente parecem high-end, e essa é a coisa chave sobre eles. E eu acho que você também pode adicionar animações diferentes ao criar com elas. Em seguida, temos Mercado Criativo e rio basicamente gráfico e Mercado Criativo, ou estão lá desde o início dos tempos. E você pode navegar por todos esses modelos diferentes. Então vamos com modelos da web, por exemplo. Você pode ver quantos desses existem. Mas se formos com modelos e eu vou com Deixe-me me lembrar onde todos eles estão. Então elementos gráficos web. E se eu clicar lá, podemos filtrar. Então vamos com o Adobe XD. E você pode ver todos esses elementos diferentes para o Adobe XD. E podemos até mesmo para filtrado este ainda mais indo para sites de mídia social template. E nós temos filhos wireframe, por exemplo. Posso selecionar isso. E você pode ver crianças wireframe, como eles se parecem, quanto há? Aqui estão os meus. E você pode navegar por eles se estiver interessado. E é basicamente isso. Você simplesmente vai aqui e vê o que esses outros designers estão fazendo C, quais de suas categorias eles estão usando, C em que software eles estão criando essas crianças wireframe, seus filhos e assim por diante. E basicamente começar a partir daí e explorar o que funciona para você. Finalmente, o que temos também é a UI 8, que é bem conhecida na indústria. Eles também são de alto padrão, de alta qualidade, e eles são realmente frugal quando se trata de selecionar quem é capaz de vender em seu site para que você possa conferi-los. Eu realmente os recomendo. Finalmente, temos elementos Envato e nós projetamos feixes e elementos de água é apenas a parte do mercado Envato. Então você tem que aplicar separadamente para vender em elementos Envato. Mas uma vez que você faz, você é basicamente pago pelo valor que alguém faz o download do seu produto. Então, se eu procurar kit de interface do usuário, por exemplo, você pode ver todos esses elementos diferentes. E basicamente a diferença entre este marketplace e todos esses outros mercados é exceto para UA porque eles têm todos os passes de acesso, mas eles têm limitações sobre quantos itens você pode baixar por semana, por mês, por dia, e assim por diante. Embora os elementos Envato não tenham nenhuma limitação, agora você pode carregar o que quiser, onde quiser, e você está pagando uma assinatura anual em vez de três meses, seis meses, um mês, qualquer que seja. Todos esses outros são basicamente apenas pagar como você vai. Então, se você optar por comprar este produto, por exemplo, basta comprá-lo. Ou se você optar por comprar meus produtos, você pode simplesmente comprá-los. E a mesma história com todos esses outros, e a mesma história com a estrada de goma, mas estrada Vidkun, você pode optar por criar pacotes separados. Então, se voltarmos para aqui, eu rolar para baixo, por exemplo, eu posso criar o pacote UiKit de todos os meus produtos. E eu posso escolher criar um pacote iframe massivo, como meio feito. E você pode fazer isso muito facilmente dentro da estrada de goma, enquanto você não pode fazer isso em todos esses sites diferentes. Agora voltando para elementos Envato, como eu disse, você não está ganhando dinheiro para um produto separado que alguém compra, mas você está ganhando dinheiro. Mas quantos de seus produtos alguém baixou e também quantos downloads você tem nessa categoria para o bônus de seu colaborador? Então, por exemplo, quantos desses produtos diferentes que você tem na maioria dessas outras coisas. E mais uma vez, se você estiver interessado, você pode simplesmente navegar no site deles. E mais uma vez, aqui está o meu produto e Austria UI kit. E, finalmente, eu quero compartilhar pacotes de design com você, que é um dos sites mais recentes da indústria, mas vale a pena perseguir porque aqui você também pode vender todos esses. Hey crianças, como mencionamos, mas eles também têm diferentes pacotes que eles estão executando de vez em quando. E basicamente pacote é algo de um pacote e você pode comprar um pacote. Por exemplo, 10 designers diferentes têm 10 kits de interface do usuário diferentes. Eles usam todos aqueles que você é crianças colocá-los dentro de um pacote chamado o pacote cortar o preço para baixo realmente difícil e, em seguida, simplesmente comercializado como louco. E basicamente que Mundell vai trazer alguns milhares de vendas e, em seguida, disciplina dividir esse dinheiro desse pacote particular através desses designers, geralmente o que acontece é que existem dois modelos diferentes. Ou 50, 50, 50 vão para os pacotes de design. Neste caso, em 50 vai para todos os outros designers. E há também um modelo 50 e o resto, 50 por cento vai para os pacotes de design, eo resto vai para quem tem o maior UIKit recebe mais dinheiro, que tem o menor alegria crianças recebe a menor quantidade de dinheiro. Então, basicamente dependendo do site, dependendo do negócio, dependendo do pacote, você vai obter uma certa porcentagem do dinheiro. Vou criar um curso separado no futuro, explicando, explicando como preparar apresentações, tags, como preparar descrições, como escolher sua segmentação, como melhor descrever seu produto, como criar essas listas de fotos, como você pode criar essas imagens de capa e todos esses elementos. Especialmente eu vou falar sobre suporte, por que o suporte é importante, como você pode contornar fornecendo suporte, fornecendo uma boa descrição e fornecendo um bom produto em primeiro lugar, o que torna um grande produto e muito mais. Então, se você estiver interessado nessa aula para o futuro, apenas me siga nas redes sociais ou você pode me deixar uma mensagem. Você pode me seguir aqui onde quer que esteja assistindo essa aula e, basicamente, ficar atento para o futuro. E você também pode seguir meu canal no YouTube. Vou deixar um link para ele também. No PDF. Estou colocando todos os tipos de conteúdo do Adobe XD lá fora. Então, se você estiver interessado, certifique-se de me seguir até lá e eu vou anunciar essa aula no futuro. 10. Seu projeto de curso: Seu projeto de classe para esta classe é criar seu próprio kit de interface do usuário. Você não precisa criar a maioria desses elementos, então você não precisa criar 50 elementos diferentes. Você pode apenas criar um ou dois ou três, talvez cinco elementos. Então você pode começar, por exemplo, com navegação, com imagem de herói, e então você pode continuar a partir daí e você pode simplesmente salvá-lo como uma imagem JPEG e carregá-lo para os projetos de classe. Eu realmente gostaria de ver o que vocês podem vir acima com e apenas para praticar a criação de kits de interface do usuário para o futuro. Porque como eu disse, uma vez que você começar a fazer isso, você vai apreciá-lo cada vez mais porque ele vai economizar um monte de tempo no futuro para todos os seus projetos futuros em vai permitir que você trabalhe em seus projetos muito mais rápido. Como eu disse, estou ansioso para nossos projetos de aula e muito animado para ver o que vocês podem inventar. 11. Conclusão e recursos: Obrigado por assistir a esta aula e eu realmente espero que você tenha encontrado algum valor nela, e eu realmente espero que você tenha entendido como você é. As crianças podem realmente ajudar a elevar seu tempo gasto nesses projetos. Como eles podem melhorar seu fluxo de trabalho, como eles podem aumentar o tempo que você passou com sua família, com seus amigos e diminuir o tempo que você gasta nesses projetos. Mais uma vez, comece a criar kits de interface do usuário. Estilo pequeno, começou a criar-lhes uma largura. Todos esses elementos que você vai usar em todos os seus projetos. Por exemplo, rodapé de navegação, tabelas de preços como falamos antes. E então você pode simplesmente adicionar um ajuste e incluir elementos diferentes. E é por isso que a Adobe existe tão bem. E eu mostrei a você no vídeo anterior como você pode facilmente criar seu próprio kit de interface do usuário e certifique-se de ajustá-lo e alterá-lo à medida que você avança. E o mais importante de tudo é encontrar o seu estilo. Alguns designers não gostam de criar componentes. Outros estão jurando por componentes. Então basicamente o que você quiser, o que quer que você esteja metido, o que for mais confortável para você. Use essa técnica, use essa abordagem para criar seu próprio kit de interface do usuário. Além disso, certifique-se de selecionar o seu nicho e certifique-se de explorar o seu nicho e ver quais tipos de elementos o seu nicho mais requer, como expliquei em um dos vídeos anteriores, não vai ser o mesmo para tudo. Alguns sites de blog não vão usar elementos de sites de loja e vice-versa. Evidentemente, haverá elementos que são compatíveis com todos estes nichos diferentes. Mas na maioria dos casos, você vai criar para um nicho específico. Portanto, certifique-se de fazer isso quando você começar a criar seu kit de interface do usuário. Mais uma coisa a mencionar é que os recursos vão estar em um PDF, como eu expliquei nos vídeos anteriores, basta clicar no link que lhe interessa. Vai levar-te até lá. Está dentro daquele PDF. E desejo-lhe sorte na criação de seus kits de interface do usuário. E eu realmente espero que eles vão te poupar um monte de tempo como eles fizeram para mim em todos os seus projetos futuros. Cuide-se.