Como a gente já disse anteriormente, os wireframes são uma ferramenta muito útil na hora de você discutir ideias com os clientes e também entender qual vai ser a estrutura básica da sua tela. Mas aí, depois de você já tem tudo decidido no seu papel o wireframe, como é que você evolui disso para isso, que é o layout final? Bom, antes disso é muito comum em empresas grandes, onde as equipes de design e de programação geralmente não trabalham lado a lado, é muito comum eles evoluírem a wireframe do papel para uma coisa um pouco mais sofisticada, mas ainda utilizando escala de cinza e não utilizando muitos elementos gráficos nem imagens. Depois, para você começar a usar elementos gráficos, é muito comum você ter um bloqueio e não saber muito bem como começar. Nessa fase, a gente usa uma ferramenta chamada moodboard, que é onde a gente junta tudo de inspiração que a gente acha legal, que poderia ter no nosso aplicativo e coloca numa forma mais gráfica, para tentar decidir exatamente qual vai ser a experiência que a gente quer proporcionar para o usuário nesse aplicativo. Aqui tem um exemplo de moodboard colaborativo que a gente fez no Figma, utilizando várias imagens, tipografias, e interfaces que a gente achou interessante. Aqui nós temos um exemplo de moodboard que a gente fez colaborativamente para um aplicativo que distribui amostras de medicamentos. Então, aqui, nossa equipe de design foi coletando tudo que a gente achava que tinha a ver com a sensação e com as emoções que a gente queria transmitir para os usuários enquanto ele utilizava aquele aplicativo. Então, temos imagens de laboratório, de sofisticação, de organização, clean, rapidez, e fomos colocando aqui no Figma. O Figma é um programa que você consegue ir trabalhando em grupo dentro de uma interface de um Canvas, como se fosse um Google Docs mesmo. Aqui também a gente colocou algumas frases que têm a ver com o nosso produto e muitas referências de produtos que também têm o mesmo Look and Feel que a gente gostaria de transmitir no nosso aplicativo. E depois disso, a gente então organizou tudo isso num PDF e mostrou para o cliente. E aqui você pode ver que a gente então organizou por palavras-chaves, então decidiu quatro palavras-chaves que esse aplicativo deveria transmitir, e isso ajudou a gente no nosso processo de design, a guiar o nosso processo de design, e também organizamos as imagens a partir dessas palavras. Depois, a gente também decidiu as cores a partir das imagens e também as tipografias a partir das referências que a gente pesquisou. Então, a partir desse moodboard, que você pode mostrar para o seu cliente, vocês conseguem decidir se é exatamente isso, as sensações e emoções que vocês querem que o usuário sinta na hora de utilizar o aplicativo ou o site de vocês. E assim, fica muito mais fácil para a equipe de design entender para qual caminho ela tem que seguir na hora de fazer realmente o layout final. Então, ela já vai estar sabendo mais ou menos quais são as cores que ela tem que usar, quais são, mais ou menos, as emoções que o design tem que tentar proporcionar para o usuário e assim desenhar uma interface que tem a ver com o produto que o cliente está querendo disponibilizar. Agora que você tem o moodboard você já está começando a definir qual que é a identidade desse aplicativo, e nessa parte a gente começa a definir o style guide, que seria um guia de estilo da identidade desse aplicativo. O que que seria isso? Aqui tem exemplo de style guide que a gente fez para esse aplicativo de amostras. Aqui tenho várias artboards, por exemplo, eu tenho as artboards do logo, do ícone do aplicativo, e aqui tem a artboard da tipografia, que define exatamente quais são as fontes que vão ser utilizadas, quais os tamanhos que vão ser utilizados. E aqui, na direita, também temos a artboard sobre as cores, então todas as cores que a gente vai utilizar. A partir daquele moodboard, a gente conseguiu extrair quais são as cores e quais são as hierarquias de cores. Então, você pode definir qual que vai ser a cor que vai ser mais utilizada, no caso aqui vai ser o preto, aqui na hierarquia, e você pode definir também quais são as cores que vão aparecer quando tem algum erro ou quando tem algum feedback positivo, ou seja, você mandou um formulário e você tem que mandar uma mensagem de "formulário enviado com sucesso", então utilizar um verde, que seria esse verde aqui. [SEM_ÁUDIO] [SEM_ÁUDIO] Além disso, você pode também definir quais vão ser os elementos de navegação desse aplicativo. Aqui, nessa artboard, está definido como vão ser os headers desse aplicativo, qual vai ser a bottom bar, quais são os ícones que vão ser utilizados nele, e também tem as cores certinhas que, por exemplo, esse ícone está selecionado então ele vai ser azul. E aqui, então, você consegue definir como é que vai ser feito essa interface. Como vocês viram nesse style guide, a gente consegue definir qual é a tipografia, quais são as cores, e quais são os usos que a gente pode fazer desses elementos gráficos dentro do aplicativo. E isso fica bem mais fácil para você criar então as telas que eu tinha definido no wireframe. Então, juntando os elementos gráficos e a estrutura que você tinha decidido, você consegue, então, montar a interface desse aplicativo no final.