Design de UI/UX: aprenda a usar o Figma

1. Trailer do curso: Bem-vindo ao curso de introdução ao design UI UX. Neste curso, aprenderemos alguns dos conceitos básicos do design UX da interface do usuário usando a plataforma gratuita chamada Figma, que cria produtos juntos. Meu nome é Amy, sou sua instrutora para este curso. Sou designer há mais de três anos, trabalhando em vários projetos, tanto em aplicativos móveis quanto na web , para saber se você está interessado em aprender design. E esta é sua primeira vez projetando ou projetando seu feixe por algum tempo. E agora você vai aprender Figma. Este curso é exatamente para você. Neste curso, aprenderemos conceitos essenciais de design de UI e UX. E por que o Figma é uma ferramenta tão poderosa e como pode ajudá-lo em seus projetos de design. E vamos para a primeira parte do curso. 2. UI e design de UX: Então, primeiro, é importante definir esses dois termos, interface do usuário ou design de interface do usuário é sobre a experiência estética. Para dar um exemplo tangível, pense no aplicativo móvel que você usa todos os dias. E o design de experiência do usuário ou design ajudou a decidir quais recursos, quais coisas estariam naquele produto e como o trabalho e quem você se sente enquanto os usa. Então ainda parece um pouco complicado, certo? Designers de UX e UI o que estamos usando, mas vamos tentar detalhar isso para tornar a experiência do usuário e a interface do usuário um pouco mais claras do que a experiência envolve muitas coisas diferentes . Como você se sente, onde está, suas motivações estão no momento em que as faz. O que acontece quando você faz alguma coisa? Qual foi a reação? Há muitas coisas envolvidas em como você experimenta qualquer coisa. Agora vamos dar uma olhada na interface de palavras. E a interface é uma coisa específica com a qual você faz uma ou mais interações. Pense, por exemplo, em um controle remoto com, mas isso é algo com o qual você está interagindo para conseguir algo. Portanto, essa é a diferença real entre a experiência do usuário e a interface do usuário. Então, a experiência, o que quer que você sinta, o que você quiser em todas as diferentes maneiras de fazer isso. E uma interface é aquela coisa tangível com a qual você interage para obter algo específico. Designers de interface do usuário e UX geralmente trabalham nos mesmos projetos e muitas vezes ao mesmo tempo, mas eles são realmente responsáveis por coisas muito diferentes. O designer de interface do usuário é responsável por representar visualmente todos esses conceitos e ideias uma forma que o usuário saiba exatamente como usá-los. Ux designer responsável pela experiência geral, entendendo os usuários e ajudando a fornecer conceitos e formas de melhorar a experiência para os usuários. E vejo você na segunda parte. 3. O que é a FIGMA: Nesta parte, exploraremos o Figma, aprenderemos o que é e como podemos começar a usá-lo. Examinaremos alguns desses tópicos essenciais que o deixarão pronto para criar belos projetos de UI UX. Figma é um software de design líder, ajudando equipes e indivíduos a criar projetos com mais rapidez e eficiência. Figma tem algumas vantagens. mais importante, para você, é gratuito começar se você estiver trabalhando sozinho. Usado por muitas empresas porque também tem uma colaboração muito boa. Assim, pode haver várias pessoas trabalhando no mesmo arquivo de design ao mesmo tempo. Também muito rápido. Funciona em qualquer computador, seja você um Mac ou um PC ou Linux, o que quer que você tenha, funciona diretamente no navegador e também tem um laboratório móvel. Assim, você pode visualizar seus designs em uma tela móvel. Portanto, não há realmente nenhuma desvantagem em começar com uma ferramenta como o Figma. É um ótimo recurso para quem está começando um novo IN UX. Então, este é o site que você acabou de acessar figma.com. Já estou conectado, mas você pode se inscrever muito rapidamente, mesmo com sua conta do Google. Comece a usar a versão do navegador. Mas se você quiser usar o aplicativo para desktop, você pode clicar aqui Bom aplicativo para desktop e abrir sua conta da mesma forma. Mas antes de entrarmos direto no Figma, quero mostrar a maneira como eu recomendaria para começar. Então você só quer começar a praticar. Agora, para isso, não vou pedir que você comece a projetar algo do zero porque acredito que seria muito difícil com alguém. Especialmente se você é um iniciante neste espaço e não tem base em princípios de design e coisas assim. Portanto, a melhor maneira de começar é copiar outros designs até o final. A razão pela qual isso é tão bom é porque você pode ver como o design foi criado. Assim, quando você fica preso em algo, você pode realmente ver como essa pessoa que criou isso alcançou um efeito particular ou parece um sinal de figuração. Isso é totalmente bom no começo porque você não vai vender isso. Você não vai dizer que projetou algo quando copiou de outra pessoa. Isso é apenas para sua própria prática e é uma ótima maneira de começar. 4. Como começar com a figma: Comece a usar. Agora, faça isso. Eu queria começar com um modelo. E o que eu literalmente fiz foi entrar na comunidade. Então, quando você olhar para isso, você encontrará um ramo de kits de interface do usuário onde posso pesquisar aplicativos de compras. E isso é ótimo sobre a Figma. Existem muitos recursos gratuitos na comunidade que você pode usar para começar a praticar e incorporar ao seu design, para que você não precise começar do zero. E eu escolho este aplicativo compras on-line como exemplo. E eu abro aqui. Depois de clicar neste botão aqui, obtenha uma cópia que diz Copiar para a conta Figma. E eu posso começar a editar isso. Tudo bem, agora temos uma cópia desse arquivo que vamos usar como ponto de partida. Então, no Figma, como você pode ver, eu posso simplesmente rolar para cima e para baixo para ver as diferentes telas e arquivos de disco. E eu posso facilmente reorganizá-los. Você notará que no arquivo original eles foram colocados lado a lado e eu tenho um arranjo mais vertical. E eu posso movê-lo com o cursor do mouse assim. E eu posso ampliar e diminuir o zoom com um gesto de pinça no meu trackpad para que eu possa ver todas as minhas telas. Então, digamos que agora eu queira começar a lidar com esse design, o que eu faço, bem, só para dar a vocês o básico. À esquerda aqui, eu só tenho uma seção de camada. E então, quando eu seleciono um elemento, eu obtenho as configurações para esse elemento à direita. Então, começaremos passo a passo para redesenhar essa tela de login. E à medida que avançarmos, usaremos formas, cores e ícones específicos. Antes de começar, ajustaremos nosso ambiente para adicionar uma nova tela ao lado da tela de login original. Agora, o primeiro passo para criar uma nova tela, você tem que escolher o quadro que envolve todas as formas de tela assim. Clicamos aqui e escolhemos um quadro para redesenhar da seguinte forma, qualquer formato para nossa tela. Mas o que vamos fazer agora para preparar o quadro, vamos escolher aqui nesta parte esquerda, o tipo de quadro adequado para nosso uso. E, nesse caso, escolhemos o iPhone 13 Pro Max e o movemos para o lado assim. Agora começamos com o cabeçalho do telefone. E usaremos os plug-ins para o ícone. Clique com o botão direito aqui e escolha plug-ins, mais plug-ins para gerenciar nossos plug-ins para usar durante o design. Aqui você encontra muitos plugins úteis. Mas agora vamos escolher o ícone se cinco. Depois de renderizar o plug-in, clique em Instalar. Agora podemos usar o ícone no login cinco. Começando com o ícone Wi-Fi. Escolhemos esse ícone e clicamos no ícone de importação para estar disponível para uso em nossa nova tela. E terminamos o resto dos ícones com o mesmo método. Agora redimensionamos os ícones e subimos assim. Você pode agrupar seus três ícones para se mover no controle facilmente. E a hora simplesmente com a ferramenta de texto como esta. E agora mudamos a cor de fundo como na outra tela. Selecione a moldura. E aqui à direita, desça um pouco e clique aqui. Como você vê essa paleta de cores, podemos escolher uma cor como essa, ou usar essa pequena ferramenta, o seletor, e depois clicar no local em que deseja tirar a mesma cor. Agora vamos adicionar esse ícone grande com o mesmo método que o outro. Escrevemos compras e escolhemos o ícone novo desejo. Em seguida, construiremos o campo de nome com a ferramenta retângulo. Qual deles? Um anúncio daqui. E mudamos a cor da borda para branco. Aqui à direita. Escolhemos esse parâmetro de traçado. Então, podemos aumentar o tamanho da borda em três para ficar mais claro. E agora mudamos sua cor para vermelho. Mas ainda assim é necessário ajustar o raio da borda assim. Aqui à direita, na parte superior, há o parâmetro de raio da borda. Agora podemos adicionar o outro campo no botão. Copie e cole o primeiro campo porque eles têm uma forma semelhante. E não se esqueça de mudar a cor do botão. Em seguida, adicionaremos esses dois ícones como os outros. Usando o ícone. Se eu conectar. Agora nos movemos em cada um em seu lugar. Mas, como você vê aqui, o ícone desapareceu. Você cancelou a seleção e clique com o botão direito do mouse e escolha Trazer para frente. Novamente, é necessário alterar as cores para branco para os dois ícones. Então, agora vamos adicionar os textos para os dois campos e fazer o login para o botão. E continua a adicionar a senha esquecida logo abaixo do botão com o mesmo método. Mas você tem que ser mais magro do que os outros. Para alterar esse parâmetro. Você seleciona o texto e vai para a direita e clica nesta lista de seleção. Em seguida, escolha o tamanho desejado. Para nós. Agora vamos escolher o meio. Finalmente, terminamos com isso. Esta parte contém três ícones e a frase logo abaixo. Vamos escolher ícones diferentes da tela original, que eu vejo que são mais consistentes com a nossa tela. E não se esqueça de mudar a cor dos ícones no cabeçalho. Então, usamos nesta nova tela as ferramentas básicas do Figma e como instalar e usar plugins. Ainda assim, existem outras ferramentas e coisas para aprender e projetar com protótipos como o Figma. Agora você criou algo que está muito próximo do design original. Como você pode ver, começar com um modelo que já está no Figma permite que você trapaceie no início e copie os elementos. E você deve apenas procurar recursos gratuitos que tenham designs de aplicativos móveis ou da web e começar a lidar com eles. Veja como você pode recriar esses elementos. E com o tempo, você começará a internalizar todos os princípios. É claro que, em algum momento, é muito bom se você começar a aprender sobre a teoria real do design. Mas essa é uma maneira de começar sem ficar atolado. Então, talvez você possa trocar. Você fará um pouco de prática, um pouco da teoria e começará a aplicar o que aprendeu. Mas essa é uma maneira de começar sem conhecer nenhuma teoria e justificar os projetos de enfrentamento. Agora, o próximo passo disso seria começar a projetar coisas no Figma quando você estiver confortável com isso e puder recriar tudo o que vê. Então você pode ver um aplicativo que você gosta que ainda não foi criado e é grande. Então, talvez você procure no Instagram ou qualquer outro aplicativo que você goste ou no aplicativo watts ou qualquer coisa. E você pode começar a projetar isso no Figma quando começar a se familiarizar cada vez mais com a ferramenta. E o passo depois disso é olhar para um aplicativo que você acha que poderia ser melhorado. Então, talvez seu aplicativo bancário seja muito, muito ruim e você sempre quis melhorá-lo bem agora que sabe como usar o Figma o suficiente para começar a montar um novo design. Espero que este vídeo tenha sido útil para você. E se você tiver alguma dúvida sobre os próximos passos, algo em que ficou preso, entre em contato comigo no meu e-mail e nos vemos no próximo vídeo.