Primeiras aulas do curso Figma: design visual de um site mobile

Figma: design visual de um site mobile

Pesquisa e organização - Introdução

Bem-vindos a mais um curso aqui da Alura. O 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 sistema de design digital em geral.

E esse aqui é o vídeo que inaugura o nosso curso de Figma introdutório. Esse curso aqui é para quem está começando agora no mundo de design digital, design de interface no IU/UX e também para quem já tem certa familiaridade nesse universo, porém quer se aprofundar mais e conhecer a ferramenta do Figma.

Ah, alguém que já trabalha com o Adobe XD, que trabalha com Sketch, mas também quer conhecer outra ferramenta que é o Figma, que é muito poderosa. Nesse curso aqui, a gente vai englobar desde o início de começar um projeto, fazendo pesquisas com os nossos clientes, comunicação com o cliente, levantar um briefing, um protótipo navegável que vai ser algo entregável, que a gente vai entregar para o nosso cliente final.

Então, a gente vai englobar todos os processos de criação de um site expansivo, desde o início, até o final e aqui, durante esse curso, o que a gente vai produzir vai ser um site voltado para celular, um site responsivo chamado design diário, onde nele vão ter diversos artigos acerca do mundo do design, que sejam interessantes para designers mesmo, como se fosse uma rede social de leitura para designers.

Então, eu vou dar uma navegada aqui nas principais telas e nós podemos reparar que nós temos aqui uma área principal com logo e tal e aqui nós temos logo de cara uma área que você pode navegar, tem aqui artigos para você, artigos de IU/UX, artigos de Design Gráfico, de Motion e aqui vão ser listados os artigos para você clicar.

E aqui vão ter os populares do blog, que não vão seguir essas abas aqui, que vão ser artigos que estão em alta na plataforma. Além disso, vão ter pessoas que são influentes na plataforma que escrevem com frequência e você vai poder seguir, entrar no perfil delas, ver o que elas escreveram e tal.

Temos aqui o fluxo também mostrando uma tela de um artigo, então como é que ele se comporta, temos aqui a imagem principal, você pode “favoritar” esse artigo, o título e o texto corrido em si, com algumas fotinhos e tal. Vou até mostrar aqui o protótipo até o final, que nós vamos entregar esse protótipo navegável, onde você pode: “Ah, clicando aqui, vamos dar uma navegada”.

Então, a gente vai realmente construir desde o zero, desde a pesquisa, até o momento final, onde a gente vai entregar mesmo o protótipo, onde o usuário vai poder navegar por ele. Vou dar uma navegada aqui rápida, para a gente ter uma noção de como vai acontecer.

Então aqui nós temos a página inicial, quero fazer uma pesquisa: “Ah, aqui design de interface, foi a pesquisa que eu fiz, vou clicar aqui”. “Ah, legal, vou aqui ler o artigo”. “Ah, eu quero ver o que que a Luciana Valadares está postando, ela tem todas essas coisas aqui.

Eu posso ver o meu perfil, as minhas informações de perfil, quem eu estou seguindo, os artigos que eu “favoritei”, inclusive aqui, fazer um login. “Ah, já tenho conta, sou novo, quero criar uma conta. Vou finalizar o meu cadastro e entrar aqui.

Então, nós já temos aqui tudo preparado, todas as telas possíveis aqui, que vão ter nessa plataforma e na próxima aula, eu já vou começar a mostrar um pouco, destrinchar o que que vai acontecer ao longo desse curso, todas as etapas, tudo o que a gente vai aprender e fazer uma lista bem organizada, para a gente entender tudo o que a gente aprender.

Eu espero vocês então na próxima aula.

Pesquisa e organização - Overview

Bem-vindos a mais um vídeo aqui da Alura e nessa aula daqui, eu vou fazer um overview do nosso projeto, de tudo o que a gente vai aprender ao longo desse curso aqui de figma introdutório. Na aula 01, que é a aula que nós estamos no momento, nós tivemos a aula de introdução, que foi a passada, nós já vimos e essa daqui, que é a aula de overview.

Então, na próxima aula, a gente vai aprender sobre o universo do design digital, ou seja, quem são os profissionais que trabalham nesse ramos, são os profissionais de arquitetura da informação, são os profissionais de IU/UX, os profissionais de UI, vamos aprender todas essas nomenclaturas e entender qual é a área de atuação de cada um deles.

Depois, nós vamos levantar um briefing, vamos descobrir como que a gente faz um briefing e vamos levantar essas perguntas com o nosso cliente e também vamos ver referências, de onde a gente vai tirar referências visuais e de fluxos e de ações, diagramação, para a gente utilizar no nosso projeto.

Então vamos ver tipos de referência mesmo, para a gente se inspirar e poder produzir, baseado nos conceitos que a gente levantou no briefing. Então, isso vai nos levar para a aula 02. Na aula 02, nós vamos aprender sobre os rabiscos, que é uma maneira rápida, a gente conseguir gerar alternativas.

Vamos desenhar no papel e tentar levantar a melhor tela possível para a nossa interface. Depois disso, nós vamos fazer o sitemap, que é um fluxo de navegação, o usuário vai chegar em tal página, de tal página, ele pode ir para outra página, que ele pode ir para outra página e voltar para tal página, qual vai ser esse fluxo de navegação do usuário, o fluxo principal, qual é a jornada do usuário.

Após isso, nós vamos aprender sobre os wireframes, vamos ver tipos de wireframes diferentes, como criar o wireframes, o wireframes de baixa fidelidade, de alta fidelidade, vamos aprender essas diferenciações e entender sobre o wireframe mesmo, o que vai nos levar ao final da aula dois a abrir o figma de fato e começar a criar o grid.

A gente vai então entender o que é um grid, como criar ele para um projeto de site responsivo, de site para celular. Na aula 03, que nós vamos meter a mão na massa mesmo, vamos colocar a popular o nosso layout no figma, com os elementos necessários.

Então a gente vai criar primeiro formas, vamos aprender a inserir as formas, depois vamos aprender a inserir a tipografia e vamos ver como se insere os ícones. Na aula 04, nós vamos continuar isso, vamos inserir as cores e as imagens.

E após tudo isso, nós vamos aprender sobre as heurísticas de Nielsen, que são regras de ouro, para a gente ter boas interfaces, definido pelo cientista da computação, Jakob Nielsen, que é como se fosse o pai da usabilidade, ele tem bastante conhecimento nessa área.

Então nós vamos pegar essas regras de ouro, as heurísticas e vamos ver se elas estão sendo aplicadas no nosso layout, no projeto que nós estamos criando, senão estiverem aplicadas, nós vamos aplicar nessa aula daqui, na aula de heurísticas 01 e 02, está dividida em duas aulas.

Na aula 05, nós vamos então pegar tudo o que nós criamos, todo esse layout aqui e vamos fazer um refinamento, que é algo muito importante quando a gente está criando, que é não deixar passar o nosso layout final com erros, bater o olho melhor, ficar olhando com calma, ver se está tudo certinho e ajeitar o que não estiver correto.

No final, nós vamos pegar todas as telas que a gente criou e vamos criar um protótipo navegável, que até é isso aqui, que eu já estou aberto aqui, vamos criar esses cliques e tal, vamos fazer toda essa interação na aula de prototipagem.

E ao final, nós vamos concluir o projeto, vamos ver o que que a gente aprendeu ao longo do curso e tal, levantar alguns aspectos interessantes do design de interface e vamos fechar aqui o curso. Espero que vocês gostem de todo o conteúdo que está preparado para vocês durante esse curso aqui de figma, introdutório.

E na próxima aula, como eu já comentei, nós vamos aprender sobre universo do design digital. Eu espero então vocês na próxima aula.

Pesquisa e organização - Universo do design digital

Bem-vindos a mais um vídeo aqui da Alura e nessa aula daqui, a gente vai entender um pouco sobre o universo do design digital, que é composto principalmente por três vertentes, por três áreas, que cada uma é focada em uma etapa desse ciclo todo, como que a gente pode chamar assim do design digital, mas que juntas, elas já fazem esse complemento, para ver a totalidade mesmo dessa área.

Essas três vertentes são: a experiência do usuário, também conhecida como UX; a arquitetura da informação, AI ou... e a interface do usuário, o UI, que é... muitas vezes a gente vê esse termo UI/UX, você já deve ter escutado algumas vezes, justamente vem daí, interface do usuário (user interface) e experiência do usuário (user experience).

Então é o UI/UX, como diria em inglês, eu prefiro falar em português mesmo, mas varia de cada um para cada um. Então, vamos começar primeiro falando da experiência do usuário, UX.

A experiência do usuário é nada mais, nada menos do que a vertente que estuda o sentimento desse usuário, quais são os problemas que esse usuário lida no dia-a-dia, quais são as dores dele, qual seria um produto ideal para resolver os problemas desse usuário, para deixar o usuário satisfeito, para ele ter uma boa experiência.

Então, o profissional de UX, ele é muito focado em entender esse usuário, ele tem que ter uma empatia muito grande, ele tem que se colocar no lugar desse usuário, ver: “Nossa, esse usuário realmente tem esses problemas no dia-a-dia e se nós fizemos um sistema que vai ter tais funcionalidades, que vai resolver o problema dele”.

Então é um usuário que tem que ter muito treinado a empatia e isso é... Não só comum no design digital, mas em todo o design, todo o campo de design, o campo de design em geral, ele tem que ter muita empatia pelo nosso usuário, pelo nosso cliente, por... seja lá quem está utilizando o produto que a gente está criando.

E o profissional de UX, ele tem que ter isso muito afiado dentro dele, tem que ter muita empatia pelo usuário e como ele faz para entender esse usuário? Faz principalmente pesquisas, então vai conversar com o usuário, senta com o usuário e começa a perguntar: “Quais são os seus problemas?”, “O que você acha de tal funcionalidade?”, “Como você acha que poderia ser solucionado esse problema que você tem no dia-a-dia?”.

E começa a pensar em insights para atender essas demandas, desses usuários, para deixar os usuários felizes, para a gente criar uma boa experiência. E além de pensar apenas na pesquisa, entender as dores do usuário, também esse profissional é responsável por criar testes de usabilidade.

Então, depois que tem o já... “Ah, já pensei, já descobri qual é o problema do meu usuário e já pensei numa solução para isso. Então aí, você já começa a desenhar essa tela e antes de implementar, vamos testar com o usuário, para ver se está funcionando.

E aí, chega lá o usuário: “Nossa, não consegui mexe e nada”. A ideia é muito boa, vai resolver os problemas do usuário, mas no teste de usabilidade está muito confuso, então não serviu de nada. Então, o profissional de UX, ele é muito responsável por fazer essas pesquisas em campo, para entender o usuário, para saber qual é a melhor solução para esse usuário.

O que nos leva agora a próxima vertente, que é o AI, arquitetura da informação. No AI, esse profissional, ele começa a pegar todas essas pesquisas que o profissional e UX fez, de entender quais são as dores do usuário, quais são os problemas que ele enfrenta no dia-a-dia, que funcionalidades poderiam resolver esses problemas que ele enfrenta.

E ele já começa a desenhar como é que ficaria isso, como que seria isso. Então, ele já pega um papel e começa a rascunhar, “Ah, eu acho que essa tela aqui poria... o problema do usuário vai ser resolvido com uma funcionalidade no aplicativo, que pode ter a cara... a tela pode ter essa cara”.

Então, ele já começa a pensar: “Há, aqui pode ter um botão, aqui pode ter um banner, aqui pode ter uma informação, aqui um campo de pesquisa, um lugar para ele inserir um texto”, enfim, vai começando a pensar em como montar todo esse quebra-cabeças para trazer essa pesquisa em algo palpável e além disso, ele também pensa nos fluxos.

Então, por exemplo, em um e-commerce, o que a gente deseja para o usuário? Deseja que ele rapidamente entre no e-commerce e já consiga comprar, então o pessoal de arquitetura da informação, ele é muito responsável também por pensar no fluxo.

“Ah, então ele tem que entrar, ele vai pesquisar, vai chegar no produto, vai clicar no produto, lá vai ter um botão para comprar, ele vai comprar, vai inserir o cartão de crédito dele e pronto, finalizou”, então isso é um fluxo do usuário e o arquiteto da informação, ele é responsável por pensar nesses fluxos.

E também, ele faz os wireframes, que a gente até vai ver um pouco mais para frente, aqui nesse curso mesmo, que é uma versão rústica de um design já final, então ele pensa, ele organiza mesmo todas as informações que são coletadas pelo profissional de UX e já começa a organizar em algo mais palpável.

O que nos leva agora à terceira vertente, que é da interface do usuário. A interface do usuário, profissional de UI, ele já começa... ele pega todas as informações que foram levantadas pelo UX, passaram pela arquitetura da informação com wireframes e já pega os wireframes e começa a já dar uma cara final para esse wireframe.

Então, ele já... onde tem ali um... onde seria um texto qualquer, ele já começa a escolher uma tipografia, que faça sentido para o projeto, ele já pega: “Ó, aqui... Então as cores vão ser sempre essas”, ele já começa a definir as cores, “Ah, os botões sempre vão ter essa cara, vão ter sempre essas cores”.

E e também começa já... onde teria uma imagem genérica, já começa a inserir imagens reais, então o profissional de UI, ele é muito focado em trazer o visual, pensar no visual dessa aplicação que está sendo desenvolvida por esse aplicativo, por esse site, por essa plataforma.

Então, ele já começa a trazer uma cara um pouco mais final do projeto, do que propriamente do wireframe, apenas. Então, ele já é um profissional focado muito no visual e muitas vezes o wireframe fica engessado, o arquiteto da informação, ele desenha o wireframe, mas chega na hora da interface final e o design pensa: “Ah, não, isso poderia ficar um pouco melhor, se fosse de tal maneira”.

O wireframe nunca é para engessar, é apenas para nos guiar, para ter um pensamento coerente, mas nunca para ficar: “Nossa, está feito assim no wireframe, então nunca mais posso mexer”, não, pode ser alterado, sim. [05:52] Então, nós demos uma passada aqui nessas três áreas, aqui do mercado do design digital e conhecemos um pouco de cada uma dessas três, mas lembrando, que é muito importante que o designer, ele fique sabendo muito bem dessas três vertentes, porque muitas vezes, se a gente está fazendo um projeto pessoal, mais pessoal, assim.

Ou então trabalhando numa empresa pequena, é muito difícil que tenha numa empresa, no mundo real mesmo, um profissional de UX que vai fazer somente a pesquisa, profissional de arquitetura da informação, que vai fazer somente wireframes, outro profissional de UI, que vai fazer somente o visual, é muito difícil de isso acontecer.

Então, o designer, ele tem que ter noção dessas três áreas, ele tem que ter muita empatia pelo usuário, ele tem que fazer as pesquisas, ele tem que fazer o teste de usabilidade, ele tem que pensar nos fluxos, ele tem que pensar no visual, tem que pensar em todo esse campo, pesando num olhar mais macro mesmo, para olhar tudo de fora e ter a noção de como executar muito bem essas três vertentes, com todas as tarefas que incluem esses mundos, que seja pesquisa, wireframe e o visual.

Então, nós agora conhecemos aqui um pouco das três vertentes aqui, principais desse mercado e na próxima aula, a gente vai começar a ver o briefing desse projeto, o que que a gente vai começar a desenhar para trazer, para fazer esse projeto aqui funcionar mesmo, qual foi o briefing que foi passado, assim, a gente vai conseguir ter um resultado final mais coerente do que foi passado.

Eu espero então vocês na próxima aula.

Sobre o curso Figma: design visual de um site mobile

O curso Figma: design visual de um site mobile possui 178 minutos de vídeos, em um total de 41 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