UI Design: construindo o produto final

Descoberta - Apresentação

Sabe o que é melhor do que uma formação de UI com dois cursos? Uma formação de UI com três cursos, porque esse aqui é o terceiro curso da formação de User Interface Design da Alura.

Caso você não me conheça ainda, não acompanhou os outros dois cursos anteriores da formação, meu nome é Matheus Villain e eu sou instrutor da plataforma da escola de UI/UX & Design.

Como sempre fazemos, hashtag acessibilidade, muito importante, eu sou uma pessoa de pele clara, de cabelo, sobrancelhas, olhos e barba castanho-escuro.

Meu cabelo está bem raspado; minha barba está bem longa, tapando todo o meu pescoço; estou usando óculos de cor branca; na minha frente, tem um microfone que está sendo segurado por um braço articulado; e atrás de mim tem alguns quadros e uma estante com alguns livros e jogos de videogame que eu particularmente gosto bastante.

Nós voltamos a esse curso dando continuidade ao nosso projeto de formação, construindo um site para uma empresa fictícia, a E-Ticket, uma empresa de ingressos digitais para eventos de todos os tipos.

Nós, ao longo da formação, fomos construindo, levantando diversos processo e, neste curso agora, vamos dar os toques finais e vamos ver os seguintes conteúdos.

Na aula 1, vamos entender sobre o que é um style guide e a sua importância tanto no design quanto na programação; na aula 2, vamos começar a construção do nosso style guide, criando elementos como cor e tipografia.

Na aula 3, vamos evoluir nosso style guide criando componentes básicos e complexos, e entender sobre interação; e, na última aula, vamos realizar a prototipagem em alta fidelidade do nosso produto.

Importante lembrar que tanto neste curso quanto ao longo da formação, tudo isso que estamos fazendo vai ser para gerar um portfólio incrível para você colocar no Behance, no Dribbble, colocar na plataforma que você preferir.

Apesar de a formação ser focada mais para aquelas pessoas que querem atuar com o User Interface Design, ela não se restringe só a pessoas da área de design.

Se você é uma pessoa programadora, uma pessoa que trabalha com data science, se é product owner, independente da área que você for, se você tiver interesse sobre UI e quer entender como funciona o processo da criação de produtos digitais, vem conosco.

Vem fazer o projeto, vem estudar toda a parte teórica e prática, porque você será muito bem-vindo e bem-vinda neste curso.

Nos vemos no próximo vídeo para começarmos o nosso conteúdo falando de style guide. Te vejo lá.

Descoberta - Entendendo sobre style guide

Antes de entrarmos de fato no nosso conteúdo do curso, vou deixar um spoiler no projeto que vamos construir, até para te dar uma animada no conteúdo que vamos trabalhar.

Antes de tudo, tem duas coisas bem importantes que quero falar. A primeira delas, mais uma vez, quero reforçar que neste curso, e na formação em geral, não estamos focando em uma ferramenta.

Então, você vai me ver mexendo no Figma, mas não vai me ver utilizando recursos do Figma, porque a ideia é que você possa ver esse curso, ver a formação inteira sem precisar focar na ferramenta do Figma.

Você pode assistir e utilizar o Adobe XD, pode utilizar o Sketch, com qualquer outra ferramenta que não seja o Figma, você vai conseguir trabalhar tranquilamente. Vamos focar no conteúdo e nos elementos que vamos estudar.

A segunda coisa é exatamente lembrando a parte da formação. Caso você não saiba, aqui na Alura temos um esquema de formações em que os cursos não estão soltos, estão todos juntos em uma rota de estudos, que é o que chamamos de formação, e este é o terceiro curso da formação de UI.

Então, depois você pode voltar na página inicial do curso e clicar em um botão em que vai estar escrito “Formação UI Design” e ver todos os cursos que acompanham o conhecimento em User Interface.

Agora, na minha tela, vou te mostrar um pouco do projeto que vamos trabalhar. Nessa primeira aula, vamos entender sobre guia de estilo, vamos bater um papo com uma pessoa programadora para entendermos um pouco do contexto também na parte de programação, e a partir da segunda aula é quando vamos começar a colocar a mão na massa.

Vamos começar trabalhando o nosso guia de estilo construindo os estilos principais que estruturam toda uma página web, todo um produto digital, como um aplicativo. Vamos conhecer sobre grids, sobre pontos de quebra e trabalhar com design responsivo.

Também vamos trabalhar com paletas de cores, vamos mexer, entender como construir as paletas de cores, quais são as paletas ideais que temos que trazer para o nosso produto, e também trabalhar com escalas tipográficas, como temos que definir essas escalas, fontes, tamanhos, altura de linha, etc., tudo isso vamos definir aqui no curso.

Em seguida, na terceira aula, vamos evoluir nosso guia de estilo construindo componentes, tanto básicos, como botões, campos de texto, para depois pegarmos tudo isso e evoluirmos para componentes um pouco mais complexos, como o caso do header, do navbar para dispositivos móveis, esses elementos que utilizam de dois ou mais elementos.

Na quarta aula, vamos entender o processo de documentação de um guia de estilo, entendendo como é a base, como podemos fazer essa documentação, onde podemos fazer, o que precisamos colocar de anotação.

Ainda na quarta aula, vamos finalizar o nosso produto. Ao longo da formação viemos estudando, criamos o protótipo em baixa e média fidelidade, e agora vamos dar o encerramento construindo o protótipo em alta fidelidade, que é a versão final do produto, do E-Ticket, que tanto pesquisamos e elaboramos.

Chegamos a um resultado maravilhoso, que é esse que você está vendo na tela. Lembrando que, qualquer dúvida, o fórum e o Discord da Alura estão abertos para você. Nos vemos no próximo vídeo.

Descoberta - Style guides na tecnologia

Fico muito feliz que você tenha começado o curso e, como você viu na introdução, na visão geral sobre os conteúdos que vamos ver, vamos trabalhar com o style guide, ou com o guia de estilo em português, um dos conteúdos mais importantes que vamos ver no curso.

O que é um style guide para quem nunca ouviu falar sobre isso? Vamos lá, estou no site da Alura, vamos pegar esse site como exemplo.

A pessoa designer que criou toda a interface desse site não chegou abrindo a ferramenta de prototipagem, o Figma, e colocou o logo no canto, colocou o campo de busca com a borda branca, com a lupa e com o texto na cor cinza opaco dentro do campo.

No canto, ela não já colocou um botão verde com o texto “Matricule-se” em azul, com todos os textos em caracteres maiúsculos, com um tamanho um pouco maior, etc. Ela não chegou criando tudo perfeitamente, dessa exata forma.

Até porque, você sabe que, conforme viemos evoluindo do produto do E-Ticket até aqui, fizemos muita coisa sem a parte de estilo, e obviamente vamos fazer essa aplicação agora, só que antes de construirmos o protótipo em alta fidelidade, temos que definir nosso guia de estilo.

Que é basicamente quando coletamos todas as informações de identidade e criamos uma espécie de documentação em que sabemos quais são as paletas de cores que vamos utilizar no nosso produto, qual a fonte que vamos utilizar, como vai ser a escala da nossa fonte para um título, subtítulo, parágrafo corrido, etc.

Como vão ser os links, como vai ser a cor das cores, o posicionamento, a sombra, o grid, etc. Tudo isso, toda essa parte de estilo é legal definirmos antes, porque quando formos trabalhar com o produto, vai ser muito mais fácil, porque vamos ter tudo isso pré-analisado e criado.

Assim, para criar o produto digital, não vamos precisar ficar pensando “qual é o tamanho que tenho que colocar nesse título?”. Não vamos pensar nisso porque já vamos saber, já vamos ter definido tudo isso previamente.

Para te mostrar algumas coisas sobre guia de estilo, eu trouxe dois dos mais famosos que temos online. Posso chamá-los de guias de estilo, mas quem é programador e está assistindo, já conhece esses dois programas, o Ant Design e o BootStrap, e normalmente se referem a eles como frameworks, framework CSS.

Mas não tem problema, porque eles são de fato um guia de estilo. Eles contêm tudo que é necessário, tudo que existe dentro de um guia de estilo, e às vezes até um pouco mais do que o necessário, até porque eles são bibliotecas que cresceram bastante.

Vamos lá, o que quero mostrar sobre deles? Vou focar, por exemplo, no Bootstrap, o maior de todos, criado pela equipe do Twitter. Atualmente, não sei se eles continuam utilizando ele dentro do visual do Twitter, mas fica isso de curiosidade: quem criou o Bootstrap foi a equipe que criou o Twitter.

Dá uma olhada: quando abrimos o Bootstrap e vamos neste menu chamado “Docs”, de “documentação”, no menu da esquerda, já temos muitos links para clicarmos.

Vou dar uma olhada na seção de “Customize”, de “customização”, já temos algumas coisas interessantes. Clicamos, por exemplo, em “Cor” e já temos uma visualização de quais são as paletas de cores que o Bootstrap utiliza.

Se você for criar um produto utilizando os estilos do Bootstrap, uma das coisas que você já vai ter e não vai precisar tomar muito tempo criando do zero, você já vai ter uma cor primária, cor de sucesso, cor de danger, cor de warning, etc.

É claro, quando você for acessar isso, tanto o Bootstrap quanto o Ant Design, ou outros programas como o Chakra UI, Tailwind CSS, sempre têm uma comunicação mais voltada para programadores. Como falei, programadores acabam conhecendo muito mais essas ferramentas, mas elas também podem e devem ser utilizadas por designers.

Aqui estou mostrando toda a parte de cores. Tem todas as informações das cores, quais são elas, como você deve usá-las, tem essa documentação, as informações que a pessoa programadora precisa e, claro, algumas formas de como isso pode ser aplicado na prática.

Se descermos um pouco mais, temos informações de grid, que é extremamente importante para trabalharmos com alinhamento e posicionamento do nosso produto. O que podemos encontrar de grid?

Tem alguns exemplos práticos de como funciona, eles mostram o grid de duas colunas, de três colunas; se você diminui o tamanho do navegador, ele também mostra como fica essa aplicação de forma responsiva, como isso fica em celulares, em tablets, eles têm todos esses tipos de quebra.

Então, eles são um guia de estilo pensado para esses tipos de aplicação, que é o que vamos fazer também neste curso. Descendo mais um pouco, o que podemos encontrar?

Repara que encontramos esses elementos que são os mais simples, que eu gosto de chamar de estrutura da interface. Por que estrutura? Por exemplo, vou voltar no site da Alura.

Para eu fazer um botão, eu preciso definir algumas coisas para fazer a estruturação do botão. Eu preciso definir a cor, a fonte; a partir da fonte, defino qual vai ser o estilo tipográfico, por exemplo, todo em caixa alta, com tamanho de 14px.

De tamanho 14px, também posso definir a altura de linha. Defino que a altura de linha aqui é de 21px; acredito que o texto está com elevação, não consigo ver direito, mas, se passo o cursor em cima, o sinto mexer, então podemos também definir que ele tem uma sombra e qual vai ser o sombreamento.

Se ele vai ter alguma interação, se eu clico e ele muda a cor ou forma etc. Tudo isso nós definimos, esses são os elementos mais básicos que temos na interface que, quando juntamos temos o que chamamos de componente.

Encontramos vários desses componentes aqui embaixo, é o que mais tem aqui dentro. Um deles foi o que acabamos de falar, o botão que está utilizando toda a estrutura tipográfica do guia de estilo do Bootstrap, as cores, as formas, toda a parte de interação, que é bem legal.

Eles têm para todo tipo de caso, navs e tabs, tem toda a parte de clique, de paginação, de modal etc. Óbvio, eles não mostram só a parte de estilo, de visual, eles têm uma documentação de como usar, que é uma comunicação geral, tanto para designer quanto para a pessoa programadora que for utilizar.

Como usar, como aproveitar esse componente da melhor forma, é legal que eles deixam um resumo no começo sobre o que é esse componente.

E, obviamente, como esse é um canal de comunicação às vezes muito mais voltado para a pessoa programadora, tem aqui uma informação ou outra de código explicando como você vai utilizar isso no editor de código de fato.

Mas é legal porque eles dão toda essa parte de exemplos e como você os utiliza de fato. Tem muitos cenários e informações que podemos coletar que, com certeza, vamos nos basear, tanto nesse quanto no Ant Design, que acabei não explorando tanto, porque ia ficar muito repetitivo.

Ele tem basicamente as mesmas informações tanto de design quanto de componentes que o Bootstrap tem, mas, obviamente, com uma identidade e detalhes diferentes.

Repare que aqui devo estar em um idioma que desconheço, mas é a mesma coisa, tem toda a parte de explicação, de documentação, ele mostra como funciona na prática e tem toda a parte voltada para a pessoa programadora.

Então, se você é programador(a) e quiser conhecer e trabalhar com isso, está aí a dica. Pode utilizar os dois programas, principalmente o Bootstrap, super recomendado, é o mais utilizado no mundo dentre os frameworks CSS.

Entendemos o que é o guia de estilo, para o que ele serve, como vamos planejar, obviamente não vamos construir um site todo estruturado, mas vamos fazer uma documentação para o nosso guia de estilo que vai ficar bem show.

Isso vamos ver mais para frente, na próxima aula. No próximo vídeo, vamos bater um papo bem legal, pegando essa vibe do guia de estilo, juntando com a programação, vamos entender quanto o guia de estilo pode ser importante para a pessoa programadora.

Porque o designer de interface, como você sabe, uma das pessoas com quem ele mais vai conversar vai ser a pessoa programadora. Então, vamos puxar outra pessoa programadora para a nossa formação, vamos bater um papo cabeça e vou ter algumas trocas sobre a importância do style guide para as pessoas programadoras.

Isso vamos ver no próximo vídeo. Te vejo lá.

Sobre o curso UI Design: construindo o produto final

O curso UI Design: construindo o produto final possui 133 minutos de vídeos, em um total de 36 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:

• Descoberta
• Style guide
• Componentização
• Prototipando