Design e Inteligência Artificial: otimizando o processo criativo

Inspiração com IA - Apresentação

Olá! Me chamo Felipe Labouriau, sou designer e instrutor aqui na Alura.

Audriodescrição: Felipe Labouriau se descreve como uma pessoa de pele clara e cabelos pretos. Usa bigode e veste uma camiseta cinza. O local de gravação deste vídeo é no quarto do instrutor, que ao fundo possui iluminação em um gradiente do rosa para o azul. E um quadro pendurado na parede, à esquerda.

Desejo convidar você para participar do curso de Design e Inteligência Artificial, no qual vamos explorar diversas ferramentas e técnicas que vão ajudar nos mais variados processos criativos de design.

O curso será dividido em cinco aulas, nas quais, dentro de cada uma delas, discutiremos processos criativos distintos.

Aula 1

Na primeira aula, trataremos de assuntos ligados mais à produtividade e inspiração, como as ferramentas de inteligência artificial podem ajudar nesse sentido.

Aula 2

Na segunda aula, abordaremos a geração de imagens, um recurso que ficou bem conhecido, que chamou bastante atenção, principalmente no último ano, de 2023.

Aula 3

Na terceira aula, entenderemos como a inteligência artificial pode nos ajudar na criação de elementos visuais que podem fazer parte do seu design.

Aula 4 e 5

Na quarta aula, trataremos de interfaces digitais, e na quinta aula, abordaremos a inteligência artificial no design de apresentações.

O que vamos aprender?

O propósito deste curso é apresentar diversas ferramentas, sem aprofundar excessivamente em cada uma. Abordaremos o funcionamento delas, explorando quando é apropriado aplicar inteligência artificial em processos específicos e quando não é. Em seguida, teremos uma breve experiência prática para entender como essas plataformas podem efetivamente contribuir para nossas atividades.

Critérios

Como critério, assumimos que essas inteligências artificiais deveriam ser, a princípio, gratuitas, para que você seja capaz de experimentá-las sem necessariamente ter que pagar por esse uso.

Este curso é um curso leve para quem quer buscar informações, para quem está talvez até iniciando as suas pesquisas em inteligência artificial, que já está também no design, atuando profissionalmente, ou já conhece alguma coisa, já está estudando, mas quer abrir sua mente e entender como essas novas tecnologias podem nos ajudar, de fato, nos processos criativos.

Espero que você tenha gostado da nossa proposta e te vejo no curso!

Inspiração com IA - ChatGPT no design

Este curso não poderia iniciar sem abordar a inteligência artificial, especialmente o Chat GPT, que chamou a atenção de todos até o final de 2022. Como podemos integrá-lo aos processos criativos de design? A realidade é que há inúmeras possibilidades, e em um único vídeo ou curso, não seria viável abordar todas elas. A limitação está, afinal, em nós mesmos. Como designers, temos a capacidade de propor e imaginar uma variedade infinita de aplicações.

Chat GPT no Design

Neste vídeo, demonstraremos algumas maneiras de aplicar a inteligência artificial, tanto em projetos digitais quanto em outros tipos, se necessário.

Um dos primeiros usos que exploraremos é relacionado a checklists ou listas de verificação. O Chat GPT se destaca na interação, compreendendo o contexto do nosso trabalho e oferecendo sugestões, propondo ações com base nas informações fornecidas.

Na barra de texto na parte inferior, escrevemos o que desejamos do Chat GPT. Lembre-se que este é um diálogo. Quanto mais detalhes e informações oferecermos à inteligência artificial, mais precisa será a resposta.

Vamos pedir para ele criar uma lista de verificação de elementos de UI, ou seja, elementos de interface, no formato de tabela. Que elementos precisamos? Precisamos de elementos para uma tela de login de um aplicativo de uma fintech.

crie uma lista de verificação de elementos de Ul no formato de tabela para uma tela de login de um app de uma fintech

Após pressionar "Enter", confirmamos essa ação e aguardamos a resposta do chat GPT. Ele construirá uma lista de verificação para nós.

O retorno abaixo foi parcialmente transcrito. Para conferi-lo na íntegra, execute o código na sua máquina

Certamente, aqui está uma lista de verificação em formato de tabela para uma tela de login de um aplicativo de fintech:

| Elemento | Descrição | Verificação |

| Logo da Fintech | Presença do logotipo da fintech no canto superior …
| Campos de Entrada | Existência de campos para inserção de usuário …
| Rótulos de Campos | Rótulos claros indicando os campos de usuário e …
| Ícones de Usuário/Senha | Ícones visuais para indicar os tipos de dad
| Botão de Login | Presença de um botão claro e destacado para realizar…
| Esqueceu a Senha | Link para redefinição de senha ou página de recupe…
| Mensagens de Erro | Exibição de mensagens de erro claras e informativ…
| Segurança da Senha | Requisitos de senha e dicas visuais para …
| Link de Cadastro | Se aplicável, um link para a página de cadastro …
| Lembrar-me | Opção para lembrar informações de login …
| Ícones de Redes Sociais | Se integrado, ícones para login via redes…
| Autenticação em Duas Etapas | Se disponível, opção para autenticação…
| Layout Responsivo | Verificação de compatibilidade com diferentes…
| Mensagem de Boas-Vindas | Feedback visual ou mensagem de boas-vindas…
| Política de Privacidade | Link para a política de privacidade da …
| Suporte ao Cliente | Informações de contato ou link para suporte …

Certifique-se de revisar cada item da lista para garantir que a tela de login do aplicativo atenda aos padrões de usabilidade, segurança e design esperados.

Observe que interessante: ele nos apresentou isso em formato de código. Podemos simplesmente copiar esse código, mas, de qualquer maneira, as informações estão disponíveis. Ele faz referência ao logotipo da fintech, indicando a presença do logotipo no canto superior da tela. Os campos de entrada também foram mencionados, indicando a existência de espaços para inserir o nome de pessoa usuária e senha, conforme podemos destacar aqui.

Portanto, podemos aceitar esse resultado ou, se preferir, podemos solicitar ao chat GPT que gere outra resposta clicando na seta "↺". Podemos informar se gostamos ou não da resposta selecionando o ícone de mão informando "Ok" ou não, além de copiar o texto.

Clicamos no ícone "↺" para gerar outra resposta e obtemos:

Certamente! Abaixo está uma lista de verificação em formato de tabela para uma tela de login de um aplicativo de fintech:

Certifique-se de revisar cada item da lista para garantir que a tela de login do aplicativo atenda aos padrões de usabilidade, segurança e design esperados.

Note que o resultado agora não está mais no formato markdown para ser copiado diretamente, mas sim em uma tabela. Portanto, se você precisar de um checklist de elementos ou qualquer coisa relacionada a um projeto de design, é possível que o Chat possa oferecer assistência nesse sentido.

Criamos um novo chat selecionando "New chat" no canto superior esquerdo.

Desejamos criar o user flow (fluxo do usuário) de um aplicativo de banco digital.

crie o use flow de um app de banco digital

Retorno:

O retorno abaixo foi parcialmente transcrito. Para conferi-lo na íntegra, execute o código na sua máquina

Um fluxo de usuário (user flow) para um aplicativo de banco digital geralmente envolve várias etapas, desde o registro inicial até a realização de transações. Aqui está um exemplo básico do user flow para um app de banco digital:

1. Registro/Entrada:

• Usuário baixa o aplicativo.

• Cria uma conta fornecendo informações pessoais básicas (nome, e-mail, número de telefone).

• Define senha e realiza autenticação de dois fatores (se necessário).

…

O chat GPT nos explica rapidamente o que é o user flow, menciona que envolverá várias etapas e nos dará as orientações. Não precisamos considerar tudo o que ele nos informa. Afinal, essa inteligência artificial pesquisou sobre o assunto e está nos trazendo todas as informações relacionadas a isso e precisamos saber filtrar.

No "Para Saber Mais" após este vídeo, abordamos sobre isso. No entanto, é um ponto inicial que podemos usar no projeto.

Agora, criaremos outro chat, pois consideramos o chat GPT muito útil para auxiliar em processos criativos. Suponhamos que desejamos elaborar um post para as redes sociais. Como o Chat GPT pode contribuir conosco? Precisamos desenvolver o design de um post para as redes sociais destinado a uma fintech.

eu preciso criar o design de um post para as redes sociais para uma fintech, a empresa tem uma abordagem mais moderna e casual, que valoriza a tecnologia, a postagem deve ter um visual atual, qual estética ou estilo visual de design eu devo usar?

O chat GPT fornece algumas dicas valiosas:

O retorno abaixo foi parcialmente transcrito. Para conferi-lo na íntegra, execute o código na sua máquina

Para criar um design de post para redes sociais para uma fintech com uma abordagem moderna e casual que valoriza a tecnologia, você pode considerar seguir algumas diretrizes de estética e estilo visual. Aqui estão algumas sugestões:

1. Cores Modernas e Vibrantes:

Use uma paleta de cores moderna e vibrante. Cores como azul, verde, roxo e laranja podem transmitir uma sensação de inovação e modernidade. Evite cores muito tradicionais, como tons de marrom ou cinza.

…

Sugere cores modernas e vibrantes, assim como uma tipografia limpa e contemporânea para nosso projeto. A imagem não é disponibilizada aqui, pois estamos utilizando a versão do chat GPT 3.5. Na versão paga do chat GPT 4, há a possibilidade de criar a imagem. Ele nos orienta de maneira abrangente para prosseguirmos com nosso trabalho.

Vamos pedir para ele nos sugerir códigos hexadecimais de cores para usar.

eu vou trabalhar com cores modernas e vibrantes, você pode me sugerir códigos hexadecimais de cores para eu usar?

E ele nos fornece alguns códigos:

Certamente! Aqui estão alguns códigos hexadecimais de cores modernas e vibrantes que você pode considerar para o design do post da sua fintech:

• Azul Vibrante:

"#3498db" ou "#0074ce

• Verde Moderno:

"#2ecc71" ou "#00a65a"

• Laranja Energético:

"#067022" ou "#££7100"

…

Menciona que são cores vibrantes, um azul vibrante, verde moderno, laranja energético, roxo contemporâneo. Podemos combinar essas cores em um software de criação e ver se funciona.

Podemos ainda perguntar qual combinação de fontes tipográficas podemos usar. Ele está sendo um assistente.

qual combinação de fontes tipográficas posso usar?

Estamos utilizando-o justamente da forma que foi imaginado, como uma plataforma conversacional.

Neste vídeo, apresentamos essa capacidade de abrir a mente, mostrando que o chat GPT não precisa obrigatoriamente fornecer resultados finais. Pode oferecer, também, inspiração e auxílio para a criatividade. Ele nos forneceu algumas combinações de tipografia que podemos testar posteriormente, avaliando se funcionam e se fazem sentido para nosso projeto.

Sempre lembrando das limitações do chat GPT. Não é aconselhável aceitar tudo literalmente. É crucial confirmar, especialmente quando se trata de informações fornecidas por ele. E, é claro, é necessário testar todas as sugestões que ele apresenta.

Conclusão

Encerramos este vídeo por aqui. No próximo, vamos conversar sobre ferramentas de inspiração que fazem sentido trabalhar com inteligência artificial.

Inspiração com IA - Cores e tipografia

No vídeo anterior, entendemos como o ChatGPT pode nos auxiliar em alguns processos criativos de design. Neste vídeo, conheceremos plataformas online gratuitas que auxiliarão no trabalho com dois elementos fundamentais em grande parte dos projetos de design: cores e tipografia.

Em qualquer trabalho de comunicação visual, seja uma interface digital, um cartaz ou uma edição de vídeo, utilizaremos cores e tipografia. Portanto, vamos entender como a inteligência artificial pode fazer parte desse processo.

Gostaríamos de salientar que a escolha das cores e tipografias é de sua responsabilidade, pois a inteligência artificial não fará essa escolha por você. No entanto, essas plataformas podem auxiliá-lo nesse processo.

Khroma

https://www.khroma.co/

A primeira plataforma que desejamos apresentar é a chamada Khroma, a qual oferece duas opções de funcionalidade: uma denominada "Generate" (Gerar) e outra denominada "Get Started" (Começar). Iniciaremos com a opção "Generate", que é bastante simples. Basta clicar neste botão, e o Khroma sugerirá de maneira aleatória combinações de duas cores nestes cartões gerados.

Podemos mudar a maneira como essas cores estão acontecendo, clicando em Swap Colors (Trocar Cores) no canto superior direito de cada cartaz para entender como fica a relação de figura e fundo invertida.

Além dessa geração inicial, se formos no canto superior esquerdo do navegador, encontraremos as opções de trabalho do Khroma. A opção que está selecionada é a Type (Tipo), em que você tem uma tipografia sobre um fundo colorido.

Podemos selecionar, por exemplo, Poster (Cartaz), que será a exibição dessa forma das cores. Note que as cores agora mudaram, porque estamos trabalhando com uma geração aleatória.

Podemos trabalhar com Gradient (Gradiente), para ter gradientes de cores, muito interessante se você estiver trabalhando em projetos digitais, Image (Imagem), para verificar como as imagens se comportam.Por último, em Palette (Paleta), teremos paletas de cores. Esse processo demora um pouco para acontecer.

Vamos explorar a segunda opção de funcionalidade do Khroma, conhecida como "Get Started" (Começar). Nessa alternativa, escolhemos 50 cores favoritas dentre a ampla paleta disponibilizada pela plataforma.

À medida que fazemos as seleções, o Khroma exibe, no canto superior direito do navegador, a contagem regressiva informando quantas cores ainda precisamos escolher até atingirmos as 50. Neste caso, já fizemos as 50 escolhas, portanto, a contagem de cores restantes é 0.

Uma vez que selecionamos todas, podemos clicar em Start Training (Iniciar Treinamento), para o Khroma criar essas paletas. Observe os resultados mais personalizados que o Khroma nos entregou.

Com base em uma seleção de 50 cores que compõem uma identidade ou que estão dentro de um amplo contexto de pesquisa, você pode antecipar essas combinações para posteriormente criar objetos e elementos que compõem a sua identidade visual.

Agora, retornando para examinar a apresentação por meio da paleta de cores. Nesse contexto, a plataforma também nos fornece uma indicação da proporção em que essas cores podem ocorrer no equilíbrio cromático.

Observe que temos uma cor mais dominante, uma cor mais secundária e outras duas cores de destaque, algo similar, embora não exatamente igual, a uma técnica chamada 60-30-10, em que aplicamos 60% de uma arte com uma cor. Claro, isso não é uma proporção aritmética exata, mas uma noção geral. E 30% com uma segunda cor e 10% nas cores de destaque.

Aqui, não são precisamente 10%, pois essa cor não está ocorrendo exatamente nessa proporção. No entanto, o Khroma já forneceu uma orientação sobre como você pode abordar isso. Portanto, é possível realizar esse teste posteriormente com outro software ou em um aplicativo diferente onde você esteja desenvolvendo o seu trabalho.

Fontjoy

https://fontjoy.com/

A segunda ferramenta que gostaríamos de apresentar é destinada ao trabalho com tipografia. Da mesma forma que ocorre com as cores, a escolha da tipografia é de sua responsabilidade. Contudo, é crucial que essa escolha seja fundamentada em conceitos sólidos.

Por exemplo, a escolha entre uma tipografia com serifa ou sem serifa é, em última análise, uma decisão sua. Como aprendemos no vídeo anterior, o Chat GPT pode oferecer orientações, mas a decisão final cabe a você. Após tomar essa decisão ou ter uma ideia inicial, o FontJoy pode ser uma ferramenta útil, pois pode demonstrar efetivamente como combinar diferentes fontes.

Observe as três categorias de fontes disponíveis: uma para título, outra para subtítulo e uma terceira para a massa de texto. Com base em um critério de contraste que você determinará, indicando suas preferências, decidiremos como combinar essas fontes.

Na parte superior, apresentamos um contraste equilibrado entre as tipografias. Ao estabelecer um alto contraste entre elas e ao acionar o botão "Generate" (Gerar), observe como ele nos fornece fontes notavelmente distintas entre si. A combinação de fontes com base no contraste é um critério válido e uma abordagem que você pode adotar.

Alternativamente, é possível explorar a combinação de fontes com características mais semelhantes. Ao clicar em "Generate" (Gerar), a plataforma produzirá uma composição mais harmoniosa, transmitindo uma sensação de estabilidade e segurança.

Do lado esquerdo, podemos clicar, selecionar um modo de trabalho noturno, se preferir. Do lado esquerdo, selecionamos as fontes de fato. As fontes foram selecionadas de maneira aleatória, mas digamos que queremos manter essa fonte para o corpo de texto, a Montserrat Alternates.

Ao clicar no cadeado, fixamos essa fonte, de modo que, ao acionarmos "Generate" (Gerar), as outras duas fontes, usadas para título e subtítulo, se alterem, enquanto a Montserrat Alternates permanece inalterada. Caso desejemos escolher manualmente uma tipografia, basta clicar no botão correspondente abaixo de "The Girl Next Door", e diversas opções de tipografia são apresentadas visualmente para facilitar a visualização.

Ao passarmos o mouse sobre uma fonte, seu nome é exibido, ou podemos digitar o nome desejado, como "Montserrat", por exemplo, ou optar por algo específico, como a Montserrat Alternates. Dessa forma, podemos selecionar e visualizar combinações de tipografias em tempo real, facilitando a avaliação das edições e ajustes necessários para tomarmos decisões informadas.

Adobe Firefly

Adobe Firefly

Finalmente, a última ferramenta que desejamos apresentar é o Adobe Firefly. Trata-se de uma inteligência artificial desenvolvida pela Adobe, a empresa responsável por programas renomados como Photoshop, Illustrator, InDesign, Premiere, After Effects, e outras ferramentas importantes no mercado de design. Essa ferramenta pode ser utilizada gratuitamente diretamente no navegador.

Existe a inteligência artificial Adobe Firefly integrada aos softwares da Adobe, como o Photoshop, por exemplo. No entanto, o foco aqui são os efeitos de texto. Ao clicarmos na opção "Efeitos de texto", temos a oportunidade de utilizar uma galeria de efeitos fornecidos pelo Adobe Firefly.

Podemos inserir uma palavra, como "Alura", por exemplo, e especificar o tipo de efeito desejado, como o efeito de ouro. Em seguida, ao pressionar "Enter" ou clicar em Gerar, o Adobe Firefly utiliza os parâmetros definidos no painel de configurações à direita para criar uma tipografia com o efeito desejado. Temos a flexibilidade de ajustar a relação e o estilo dessa tipografia conforme necessário.

Assim, selecionamos do lado direito e experimentamos outros acabamentos para a nossa tipografia, incluindo a opção de alterar a fonte. Inicialmente, foi aplicada a "Acumin Pro", mas podemos optar pela "Poplar", por exemplo, garantindo que se alinhe adequadamente à forma desejada. Após a aplicação do acabamento escolhido, o sistema processa a solicitação e apresenta o resultado.

É possível também aproveitar descrições já testadas por outras pessoas usuárias ou fornecidas pela Adobe. Quando estiver satisfeito com um resultado, ao clicar no botão "Mais Opções" do lado superior direito, você pode baixar a imagem para utilização, podendo optar por um fundo transparente, como mostrado, ou adicionar um fundo branco ou de outra cor, conforme preferir.

Conclusão

Neste vídeo, exploramos plataformas úteis para utilizar inteligência artificial. Ao escolhermos cores e tipografia agora e na próxima aula, abordaremos outra temática. Na sequência, a divisão das próximas aulas ocorrerá por temas específicos. Concluímos este vídeo aqui, e nos encontraremos no próximo!

Sobre o curso Design e Inteligência Artificial: otimizando o processo criativo

O curso Design e Inteligência Artificial: otimizando o processo criativo possui 98 minutos de vídeos, em um total de 41 atividades. Gostou? Conheça nossos outros cursos de IA para UX & Design em Inteligência Artificial, ou leia nossos artigos de Inteligência Artificial.

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

• Inspiração com IA
• Geração de imagens
• Elementos visuais
• Interfaces digitais
• Apresentações