Primeiras aulas do curso Figma: componentes da interface

Figma: componentes da interface

Introdução e diretrizes - Introdução

Fala, pessoal. Bem-vindos a mais um curso aqui da Alura. Meu nome é André Lisboa e eu sou designer focado em interfaces. Isso significa que no meu dia a dia eu trabalho criando telas para sites, para sites responsivos, para aplicativos, para sistemas de design digital em geral. E esse aqui é o vídeo que inaugura o nosso curso de Figma Intermediário.

Se você não conhece nada sobre o mundo de design de interfaces, e também não conhece nada sobre o Figma, o programa que a gente vai utilizar nesse curso, eu aconselho fortemente a dar uma olhada no curso anterior a esse, de Figma Básico, onde lá a gente aprende conceitos mais básicos mesmo, tanto do programa Figma, tanto do design de interfaces. E aí, com essa bagagem que a gente adquiriu no curso anterior, a chegar aqui podendo já desenvolver o que vai ser proposto ao longo do curso.

Nesse curso aqui, a gente vai criar um aplicativo de vídeos de skate. O cliente que chamou a gente para construir, ele comentou que a cultura do skate, no mundo do skate, a cultura de vídeos é muito forte, e ele queria que fosse um aplicativo que fosse um apanhado de diversos vídeos onde o usuário pudesse navegar e ver com facilidade os vídeos que estão disponíveis, ou então fazer buscas.

Vou dar uma passada aqui pelas telas, rapidamente, só para a gente ter uma noção de mais ou menos o que a gente vai construir ao longo do curso. Então na tela inicial, logo de cara, já temos uma pesquisa, onde o usuário pode fazer uma pesquisa, e também tem recomendações da plataforma para ele ver. E aí, fora isso, ele pode ver aqui por alguns filtros, as abas, que também vamos aprender nesse curso. Ele pode navegar por aqui e vai carregar elementos diferentes conforme ele selecionar elementos diferentes aqui.

Essa aqui é a página inicial. Vou dar uma passada rapidamente só para ter uma noção do que a gente vai construir por todas as telas. Então aqui nós temos uma página do vídeo, de como que vai ser a reprodução do vídeo, de uma marca, que uma marca pode ter vários vídeos também. A página de favoritos do meu perfil, a edição de perfil, meu login, cadastro, resultado da busca, busca vazia, e do vídeo em si.

A gente deu uma passada aqui, uma navegada, e eu vou comentar que além da construção ferramental mesmo, de construir a interface, nós também vamos aprender conteúdos teóricos acerca do design de interface nesse curso aqui.

Vamos aprender sobre as diretrizes do design de interface, ou seja, quais são as boas práticas, como criar interfaces que sejam amigáveis, que sejam intuitivas, que sejam fáceis do nosso usuário utilizar. Além disso, vamos aprender duas metodologias bem interessantes de reutilização de elementos, que é o “Design Atômico” e o “Design Patterns”, que essas duas metodologias, elas focam bastante em criação de elementos para reutilizar em outros momentos, depois. Então é bem interessante a gente aprender sobre essas formas.

Fora isso, vamos aprender sobre grid. Como construir grids. Tanto para celular, aqui para o nosso projeto, quanto para computador. Quais são os elementos que compõem o grid. Vou até mostrar rapidamente. O nosso grid é composto por quatro colunas. A gente vai aprender isso nessa aula de grid.

Fora isso, vamos começar a entrar no ferramental do Figma mesmo e aprender a mexer na interface.

Esse curso vai ser bem focado em componentes. Componentes, eu posso mostrar para vocês rapidamente. Por exemplo, isso aqui é um componente, vocês podem ver que são elementos que eu reutilizo em vários momentos da página. Então por isso que eu comentei sobre o “Design Atômico” e o “Design Patterns”, que são metodologias que focam também na reutilização.

O componente. Basicamente isso aqui é um componente. Você pode ver que ele se repete aqui, aqui, aqui e aqui também. Aqui. Esse aqui é um botão, é um componente que se repete. Aqui, um outro botão. É um outro componente que se repete. Aqui, esse local de edição de texto, é um componente. Então a gente vai focar bastante na componetização dos elementos. E a gente aprender também, vai passar por vários tipos de componentes, o botão, a lista, um card, e vamos aprender as boas práticas de cada desses componentes, e também maneiras de não construir esses componentes, maneiras que não são tão eficientes.

Então a gente vai ver exemplos bons e exemplos ruins de cada um desses elementos. E aí, ao final, quando já tiver terminado todos esses elementos aqui, a gente vai prototipar o nosso aplicativo. Então eu vou dar uma navegada rápida. A gente pode ver que a gente vai pegar as telas, vamos criar cliques, fluxos navegáveis, vamos mexer nela. Então, com isso, a gente vai ter, ao final desse curso, um produto já bem apresentável, seja para o nosso cliente final, seja para um usuário que vai testar. Enfim, a gente já chega com o produto já construído.

Bom, espero que vocês tenham gostado do conteúdo que está preparado para vocês nesse curso aqui, e eu espero vocês na próxima aula, onde a gente vai entender um pouco mais sobre esse projeto, o que a gente vai construir, o que vão ser as aulas, como é que está estruturado todo o curso. Eu espero vocês lá.

Introdução e diretrizes - Overview

Fala, pessoal. Bem-vindos a mais um vídeo aqui da Alura, e nessa aula daqui a gente vai entender um pouco sobre o projeto, sobre o curso em si, tudo que a gente aprendeu ao longo desse curso e o que a gente vai desenvolvendo ao longo desse projeto.

Eu já passei, na aula anterior, um pouco sobre as telas que a gente vai ver, que a gente vai produzir ao longo desse curso aqui. E eu tenho também aqui adiantado já para mostrar a ordem das aulas que a gente vai ver, como é que está estruturado esse curso de Figma Intermediário. Vamos dar uma olhada rapidamente?

Nós temos aqui, na primeira aula: introdução, que nós vimos, overview, que essa aula aqui, e na próxima aula a gente vai ver sobre as diretrizes do design de interface, vamos aprender as boas práticas desse mundo do design de interface.

Na aula 2, nós vamos aprender sobre a metodologia do design patterns, do design atômico, vamos criar as telas e os fluxos no papel mesmo, os rabiscos e os fluxos navegáveis, e vamos aprender também sobre a construção de grids.

Na aula 3 vai ser a aula que a gente vai realmente meter a mão na massa e vai começar a construir já os nossos elementos dentro do Figma. Então nós vamos ver o componente do menu do topo, o componente do menu no rodapé, e o componente dos cards, isso tudo na aula 3.

Na aula 4, nós vamos continuar vendo todos esses componentes, e vamos ver os botões e inputs na aula 4.1, stabs e listas, backdrops banners e os empty states, que são esses elementos que a gente vai ver na quarta aula.

E na quinta aula nós simplesmente vamos refinar a nossa interface e vamos prototipar. E aí, ao final, nós vamos concluir aqui o nosso curso. Vou dar uma passada aqui rapidamente, algo que é bastante interessante mostrar para vocês, que são os rabiscos. Então, os rabiscos, a gente vai primeiro desenhar um fluxo muito rústico mesmo no papel para ver como vai funcionar. “Ah, então da “Home” eu posso vir para os “Favoritos”, dos “Favoritos” eu posso ir para o “Perfil”, e da “Home” para o “Perfil””. Posso fazer esse fluxo do menu no rodapé, que eu comentei.

E aí, da “Home” eu posso vir e clicar em um filme, ou então clicar em uma marca. Desse filme eu já vou direto para a visualização, ou da marca vou para o filme, visualização. Então é um fluxo bem rápido, esse aqui é o fluxo principal, a jornada do usuário. Ele quer entrar e já de cara de um vídeo. Então, a gente vai deixar isso bem de cara para ele, bem fácil dele realizar. Então ele vai clicar na “Home”, ele já pode clicar em um filme e já visualizar ele. Então vai ser rapidamente, assim.

E aí, na parte dos “Favoritos”, eu posso também entrar, ver um dos meus favoritos, ver meu filme. E na parte do “Perfil” eu posso tanto editar meu perfil ou como posso fazer... Sair da minha conta para entrar no login e fazer o cadastro.

Então, é um fluxo bem simples mesmo, e bem focado no usuário para ele conseguir realizar as ações dele facilmente. E vocês podem ver que nada foi feito com muito refinamento, é um papel bem rústico mesmo, só para organizar as ideias.

E aí, aqui, vamos dar uma olhada também nos rabiscos, porque antes da gente começar a criar a tela no Figma em si, a gente vai criar os rabiscos. Então eu já vou dar uma passada rapidamente e a gente vai ver, vamos criar a “Home” com esse menu no rodapé, que a gente pode ver, olha, vamos até comparar. Então vocês podem ver que temos esse card aqui e as abas. A gente pode ver que está bem similar. Então a gente vai se basear bastante nesses rabiscos mesmo para produzir o nosso projeto. Aí tem a parte de “Favoritos”, “Perfil”, vou editar meu perfil, marca, vídeo, login, cadastro de visualização. Mais para frente, quando a gente for comentar mesmo dessa aula, vou passar um pouco melhor.

Bom, então já vimos o fluxo e os rabiscos no papel mesmo, então vou dar só uma olhada final aqui que eu vou explicar um pouco melhor sobre esse projeto aqui, vamos entender quais são as telas. Na tela inicial, a gente viu na aula passada, nós temos os destaques, a pesquisa e os cards, com o menu no rodapé. Então, na parte do vídeo, ele pode clicar nessa bolinha e já ir para a visualização do vídeo. E tem aqui algumas informações: nome do vídeo, nome da marca, o ano, duração, algumas tags e uma descrição curta. E aí ele pode navegar aqui clicando em outros vídeos.

A página da marca, muito similar à página do vídeo, ele pode ficar aqui, já vai para a playlist da marca, então já começa a passar os vídeos dessa marca, diz aqui quantos vídeos ela tem e todos os vídeo dela, que eu também já posso visualizar. Na parte de favoritos nós temos os favoritos, eu posso desfavoritar clicando aqui, e também posso navegar aqui pelo menu do rodapé. Na parte do perfil tem uma fotinha que eu posso editar o meu nome, e-mail, telefone e senha, e aqui abaixo, escondido, “sair da minha” conta com o menu no rodapé também, e clicando nesses locais aqui sobe essa telinha para eu editar minha informação. Então fica bem focado em apenas uma edição por vez.

Temos a tela de login aqui, com apenas os botões de entrar com o Google ou com o e-mail, e de cadastro, que aí eu posso fazer o cadastro aqui. E, além disso, temos aqui a tela de resultado de uma busca, e uma busca sem nenhum resultado.

E aí, ao final, aqui a nossa tela de visualização do vídeo mesmo, em si. Vou passar rapidamente aqui no protótipo, só para a gente dar uma olhada. Então a gente vai no final já deixar tudo montadinho, vamos prototipar, criar todos os cliques, como eu comentei aqui, clicando numa informação e fica bem focado. Se eu quiser, eu posso sair da minha conta, entrar, fazer login.

Tudo bem fechadinho aqui para a gente conseguir ter algo bem apresentável ao final desse curso. Espero que vocês tenham gostado dessa aula, e na próxima aula a gente vai ver sobre as diretrizes dos designs de interface, como a gente bem viu no plano de aulas aqui. Espero que vocês gostem da próxima aula e espero vocês lá também, pessoal.

Introdução e diretrizes - Diretrizes do design de interface

Fala pessoal, Bem-vindos a mais um vídeo aqui da Alura. E nessa aula a gente vai falar sobre as diretrizes do design de interfaces. A primeira coisa que a gente deve perguntar antes de sair falando sobre tema é: o que é, o que são essas diretrizes?

A gente pode dizer que são boas práticas para a gente seguir, para a gente conseguir de criar interfaces apuradas, interfaces bem feitas, que sejam fáceis do usuário utilizar.

Eu trouxe alguns princípios para a gente seguir quando a gente está criando as interfaces, algumas diretrizes para a gente seguir, para a gente sempre conseguir criar boas interfaces, que sejam amigáveis e úteis para o nosso usuário.

A gente vai falar aqui sobre a simplicidade, sobre a hierarquia, navegação facilitada, padrão visual e responsividade. Vamos começar então falando sobre a simplicidade.

Simplicidade não significa que a gente vai fazer uma interface simplória. Significa que a gente vai trazer, aliar essa simplicidade para a gente conseguir bons resultados na interface, que ajudem o nosso usuário.

Por exemplo, pensa no site do Google. O que é o site do Google? É o logo, Google, e uma caixa de busca escrito: “O que você está procurando?”, e um botão de enter. Muito simples.

E por conta dessa simplicidade, fica muito claro para o usuário qual o objetivo da plataforma, que é um buscador na internet, porque só tem uma caixa de busca no site. Então, realmente, você só pode fazer uma busca.

Então, essa simplicidade, ela auxiliar o usuário a entender qual é a ação principal que ele quer fazer, realizar na plataforma, para ele não ficar muito disperso e, por exemplo, ter uma interface com 50 botões, muitos textos. Um monte de couro, um monte de logo.

O usuário vai bater o olho, vai escanear e vai pensar: “O que eu faço aqui? Tem tantas opções. O que eu tenho que fazer?”. Então a gente tem que tentar unir, trazer essa simplicidade para a nossa interface, para a gente conseguir auxiliar o usuário e mostrar para ele que caminho ele deve seguir.

Algumas dicas boas para a gente conseguir criar interfaces simples é: usar poucas famílias tipográficas, no máximo umas 3 famílias. Por que eu digo isso? Porque assim a gente consegue criar um padrão visual, a gente não fica alternando de fonte toda hora.

Em uma página do nosso site é uma fonte, na outra página é outra fonte, em outra, é outra fonte. A gente sempre manter, fazer uma escolha de famílias tipográficas e manter ela ao longo da nossa interface.

Por exemplo, sempre os meus títulos vão ser fonte tal, meu texto corrido vai ser fonte tal, e no máximo uma outra fonte que seja mais display, ou fonte fantasia para algum outro elemento.

Então no máximo utilizar 3 famílias tipográficas para a gente não ficar variando muito. Outra dica importante é a gente utilizar poucas cores. É importante que a gente utilize também no máximo umas 5 cores, que assim a gente consegue manter esse padrão visual, consegue ser simples, para não ficar um carnaval.

Imagina. O usuário também, pensando no exemplo que eu dei, de um site que tem muitas coisas para o usuário escanear, ele entra, tem um montão de cor. Como ele vai fazer? Ele vai ficar: “O que eu faço aqui? O que cada cor significa?”.

Nas minhas interfaces eu costumo utilizar 3 cores principais, que é uma para o texto corrido, um para o texto corrido nos fundos claros, então um fundo branco e texto preto.

Aí o contrário, o fundo escuro e a fonte clara, que, sei lá, seria o branco, talvez. E uma terceira cor, que seja para indicar os cliques. Sempre que for um botão, vai ser essa cor, sempre que for um clique vai ser essa cor.

E talvez uma quarta cor que seja para alguns detalhes, talvez. Eu costumo usar 3, mas eu estou dizendo que o máximo que a gente pode utilizar, assim, que seja um bom número, seriam umas 5 cores mais ou menos.

Eu trouxe um site para a gente dar uma olhada, que é o Cooler, “color.adobe.com”. E aqui a gente consegue criar uma paleta de cores interessantes também.

Aproveitando esse gatilho aqui sobre as cores, a gente pode entrar nele aqui e querer uma paleta de cores análoga. Vocês estão vendo aqui que eles mantêm 5 cores, que é o número ideal para a gente criar nossas interfaces.

Eu criar uma paleta de cores análoga, eu quero uma monocromática, quero tríade, que é pegando os três pontos do círculo cromático. Quero complementar que seja um extremo ao outro do círculo cromático.

Enfim, esse site aqui é bem legal para a gente criar paletas de cores interessantes. E uma terceira dica que eu vou dar aqui também é utilizar bastante o espaço em branco.

O espaço em branco é bom para dar um respiro na nossa interface, não deixar o texto muito colado de outro texto, aí tem uma imagem e um botão, tudo coladinho.

Não. Isso aí deixa uma sensação de muita coisa apertada, de informação demais. É interessante utilizar o espaço em branco para dar uma suavidade para a interface, para trazer boa leitura, para trazer uma calma maior para o usuário, para eu conseguir entender as informações de forma mais precisa.

Então isso foi a simplicidade, e o próximo ponto que eu vou comentar aqui é a hierarquia. A Hierarquia, como a gente até pode ver nesse exemplo aqui, ela nos ajuda a mostrar o que o usuário vai escanear primeiro.

Então aqui a gente bate o olho e vê Lucid Rhytms. A gente vê de cara que está grandão, deve ser para ali que eu tenho que olhar. E aí tem uma imagem grande também, então ela está competindo aqui com o texto e a imagem, são elementos grandes, que a gente quer chamar a atenção do usuário para ele escanear rápido.

E aí depois, ele batendo o olho nessas coisas, ele: “Ah, agora que eu bati o olho aqui, já escaneei essa informação, vou continuar lendo”. Aí depois tem um texto embaixo, ele pode ler isso aqui também.

Então, com o auxílio da hierarquia, a gente consegue dizer para o nosso usuário o que ele deve fazer. Então a gente vai utilizar uma fonte maior para chamar a atenção de alguma frase de efeito que a gente queira que o usuário veja.

Ou então vai deixar uma imagem grande para mostrar: “Veja primeiro”. Depois a gente vai seguindo para as coisas mais auxiliares. Então a simplicidade, também como hierarquia, ele nos ajudam a gente fazer uma interface que seja fácil para o nosso usuário, a gente guiar o nosso usuário falando: “Faça isso, isso e aquilo”, tentar dar um caminho mais fácil para o usuário se localizar na nossa interface.

O terceiro ponto que eu vou comentar é a navegação facilitada. A navegação facilitada diz respeito à gente deixar bem claro para o nosso usuário como ele vai navegar pelo nosso site, pela nossa plataforma, pelo nosso sistema que a gente está desenvolvendo.

Este exemplo é um exemplo muito bom de dashboard, que são admints, também conhecido, que é um exemplo que está bastante em voga atualmente, que é utilizar a navegação no canto esquerdo da página.

Então aqui ele mostra meus cursos, é onde você está. Inclusive tem uma cor mostrando que você está nesse local. E você pode navegar por todas as outras áreas aqui, então ele mostra por onde eu posso navegar, divide por grupos. Aqui é o menu, aqui são grupos. Poderia ter outra coisa aqui embaixo, que é amigos, por exemplo.

A gente usa essa navegação para mostrar para o nosso usuário aonde ele está e o que ele pode fazer. E é muito importante deixar bem claro isso para o usuário também, para ele saber por onde ele pode navegar em uma plataforma que ele se encontra.

Um outro tipo de navegação que é muito interessante é o bread crumbs, que o nome em inglês, bread crumbs, significa migalhas de pão, que é exatamente isso, dos contos infantis que a gente lembra.

A migalha de pão é para a gente conseguir lembrar por onde a gente veio. Então eu vou deixando migalhas de pão para mostrar que caminho eu percorri até chegar em tal local. E se eu quiser voltar, eu vou seguindo pelas migalhas de pão.

Esse nome é muito legal porque ele remete exatamente isso nas plataformas digitais. Por exemplo, aqui seria mais ou menos um exemplo de um e-commerce, imagino, onde tem a home, aí eu entrei na área de budget aqui, que é o orçamento, carteira, custos.

Então atualmente eu me encontro na área de custos, e se eu quiser voltar eu posso voltar mostrando aqui o caminho que eu percorri. Então eu vim por carteiras, orçamento e home.

Então, o caminho de pão, bread crumbs, ele mostra exatamente que caminho a gente percorreu, e se eu quiser voltar alguma parte especifica da minha plataforma, eu posso voltar facilmente.

Isso é utilizado em sistemas um pouco mais complexos, onde, por exemplo, e-commerce que tem categorias, e dentro dessas categorias tem outras subcategorias. E dentro das subcategorias tem outras subcategorias.

E aí eles chegam no detalhe de um produto. Então, se o usuário quiser voltar, como ele volta esse caminho que ele percorreu? A gente deixa as bread crumbs no topo, as migalhas de pão, que vai mostrar para ele exatamente que caminho ele percorreu.

Um exemplo que eu vou mostrar para vocês é o Mercado Livre, que eu já até deixei aberto. Então aqui na minha busca eu vim pela home, depois eu fui na categoria celulares e telefone, e eu cliquei em celulares e smartphones.

Então está mostrando o caminho que eu percorri. Vou clicar em uma marca para ver se ele vai. Não, na verdade ele usa como filtro. Mas ele mostra o caminho que eu percorri.

Se eu quiser voltar para essa aqui, por exemplo, eu clico e já voltei. Então isso é muito utilizado em sistemas de um pouco mais complexos, que envolvam muitas áreas, muitas categorias. Se for um sistema um pouco mais tranquilo, assim, que não tem tantas áreas, não é muito comum utilizar o bread crumbs.

O próximo ponto que eu vou comentar aqui é o padrão visual. O padrão visual ajuda o usuário a identificar a se perder na plataforma. Então, por exemplo, ele está na home de um aplicativo, e aí ele clica em outra página, e aí ele entra nessa outra página e a fonte mudou, outra família tipográfica que estão usando, outras cores, os elementos não tem nada a ver com a home.

O usuário vai olhar e falar: “Acho que me enganei. Eu cliquei e acho que fui para outro aplicativo sem querer”. Para a gente evitar essa desconfiança do usuário, para a gente mostrar sempre para ele que está sempre no meu site, está sempre na minha plataforma, a gente utiliza o padrão visual mesmo, que dessa maneira, aqui nesse exemplo, as cores são sempre iguais, os botões são sempre dessa cor.

Aqui ele tem essa borda arredondada que é utilizada aqui também. Então, dessa maneira, a gente consegue mostrar para o usuário que ele se encontra sempre na mesma plataforma, e dessa maneira, além disso, ele também identifica o que é um texto corrido, o que é um titulo, o que é uma legenda, porque uma vez que ele viu a legenda e estava em 16 pixels de altura, ele vai saber que ele entrou em outra pagina e a legenda está do mesmo tamanho, então ele vai sempre saber que sempre que estiver com esse tamanho é uma legenda, sempre que estiver com esse tamanho é um título, sempre que estiver com esse tamanho é um texto corrido.

E isso complementa o que eu falei sobre as famílias tipográficas na simplicidade, porque além da gente escolher poucas famílias tipográficas, a gente consegue definir que o meu titulo sempre vai ser a família tipográfica tal, no peso tal, e no tamanho tal.

Meu texto corrido vai ser sempre essa família tipográfica com peso tal e o tamanho tal. Então, dessa maneira, a gente consegue sempre manter um padrão, e o usuário não fica perdido. A gente mostra atalhos para o usuário para ele se encontrar na plataforma.

Então aqui, esse ponto dá responsividade, que é um ponto muito importante também, que é uma boa prática, muito importante para se seguir para boas interfaces.

Atualmente, se inverteu. Antigamente a gente dizia que as plataformas têm que ter versões para celular que sejam tão boas quanto às de computador. Hoje em dia, com o crescimento cada vez maior de smartphones, a gente está vendo o contrário: primeiro sai feitos os layouts para o smartphone e depois tem que se pensar para o desktop.

A maioria dos usuários, hoje em dia, está utilizando muito o celular, está ultrapassando os computadores. Então a gente tem que fazer um layout que se encaixe em todos os tamanhos de tela, desde um tamanho de um monitor grandão até um celular, que é pequenininho. Isso se chama responsividade. Tem que ter isso em mente quando está desenvolvendo uma plataforma, tem que pensar que ela vai ser acessada não só por computadores e celulares, mas computadores que sejam grandões, computadores pequenos, tablets, celulares grandes, pequenos.

E a gente tem que ter tudo isso em mente quando está desenvolvendo uma plataforma, senão a gente não vai contemplar uma boa parte dos usuários. “Só fiz site para computador”. Mas a maioria dos usuários usa celular. [12:16] E aí, como é que faz? “Ah, só fiz site para celular”, mas, sei lá, 40% dos usuários entra pelo computador. Então a gente tem que fazer um site, a nossa plataforma tem que ser responsiva, ela tem que se adaptar a diversos layouts.

Inclusive nesse curso aqui, um pouco mais para frente à gente vai falar sobre grid e eu vou explicar como criar esses grids para diversas resoluções diferentes.

A gente viu aqui sobre as boas práticas do design de interface, aprendemos mais ou menos os princípios dela. E na próxima aula a gente vai começar a aprender sobre design patterns. Espero você na próxima aula.

Sobre o curso Figma: componentes da interface

O curso Figma: componentes da interface possui 167 minutos de vídeos, em um total de 39 atividades. Gostou? Conheça nossos outros cursos de UI Design em UX & Design, ou leia nossos artigos de UX & Design.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda UI Design acessando integralmente esse e outros cursos, comece hoje!

Plus

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$85
à vista R$1.020
Matricule-se

Pro

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas