Framer: construindo um portal do colaborador com IA

Planejando o site - Apresentação

Boas-vindas ao curso de Framer focado em inteligência artificial (IA) para criar uma plataforma para recursos humanos (RH).

Deixe-me apresentar, caso você ainda não me conheça. Meu nome é Mateus Villain, sou Product Designer e também instrutor na Escola de UX e Design da Alura.

Te acompanharei nesta trilha que você vai percorrer agora para entender mais sobre como construir sites, sem qualquer tipo de conhecimento de programação ou tecnologia, usando uma ferramenta chamada Framer.

Audiodescrição: Mateus é uma pessoa de pele clara, com cabelo, sobrancelhas, olhos e barba castanho-escuro. Tem um cabelo bem curto, uma barba bem longa que chega até a metade do pescoço. Usa óculos redondo com armação dourada. Está com uma camiseta preta e uma corrente prata. À sua frente, há um microfone segurado por um braço articulado. Ao fundo, uma grade com alguns crachás pendurados e uma estante com alguns livros e uma máquina de escrever à direita.

O que vamos aprender?

Nesse curso, vamos aprender sobre Framer, uma ferramenta que costumamos chamar de no-code (sem código). Ou seja, é uma ferramenta que não exige conhecimento de linguagens de programação ou design.

Apenas com um mouse, um teclado e muita criatividade, conseguiremos criar um portal do colaborador de forma fácil e intuitiva. A cada aula, vamos evoluir na construção desse portal que servirá para que as pessoas colaboradoras de uma empresa consigam encontrar todas as informações de que precisam, sem qualquer dificuldade, reunindo tudo em um único local, em uma única plataforma.

Um adendo muito importante: não utilizaremos nenhum recurso pago neste curso.

Todas as ferramentas, tanto o Framer quanto outras plataformas de inteligência artificial que usaremos, possuem versões gratuitas. Você pode adquirir a versão paga, mas utilizaremos a versão gratuita para facilitar o acesso para todas as pessoas.

Esperamos você no próximo vídeo para começar a aprender o conteúdo de fato. Até lá!

Planejando o site - Planejamentos com Gemini

Como começar a criar nosso site ou portal utilizando inteligência artificial?

Conhecendo interface do Gemini

O Gemini é o nosso ponto de partida. Trata-se de uma inteligência artificial em formato de interface conversacional, semelhante a aplicativos como WhatsApp, Telegram ou Messenger. Há um campo de texto na parte inferior para enviar mensagens. A interação parece ser com uma pessoa do outro lado, mas, na verdade, é a IA retornando informações.

Antes de começar a digitar um comando, é importante destacar um alerta presente no próprio Gemini:

Nem sempre as respostas fornecidas pela inteligência artificial estarão corretas. Às vezes, a IA pode apresentar informações que não fazem sentido.

Por isso, o aviso "O Gemini pode apresentar informações imprecisas, inclusive sobre pessoas. Por isso, cheque as respostas" está logo abaixo do campo de texto.

Utilizamos essa interface porque, por ser da Google, o Gemini tem conexão com o buscador e a internet, permitindo buscar referências online. Antes de fazer qualquer pergunta, vamos explorar seu funcionamento.

Na lateral esquerda, contamos com um painel com algumas informações. Como estamos logados em uma conta, já aparecem algumas conversas recentes sobre diferentes assuntos. É possível salvar conversas, como se fossem contatos do WhatsApp.

Caso queiramos abrir uma interface nova para fazer perguntas ao Gemini, basta clicar no botão de "Nova conversa" localizado no topo desse painel. Nessa nova conversa, o Gemini oferece algumas sugestões de perguntas frequentes que ele pode responder.

Para começar a conversa, vamos usar o seguinte comando inicial, definindo com a IA pode nos ajudar:

Quero criar um portal de RH com seções para a página inicial, integração de novos colaboradores (onboarding), gestão de benefícios, avaliação de desempenho (processo de reflexão sobre como está seu desempenho) educação corporativa (treinamento instituicionais obrigatórios), recrutamento e seleção, treinamento e desenvolvimento. Mas, não sou desenvolvedor nem designer e quero utilizar um sistema no-code e ferramentas de IA para isso.

O que é no-code? Sites como o aplicativo do Gemini são feitos por programadores utilizando código, mas existem ferramentas que permitem criar sites e aplicativos sem conhecimento de programação, apenas arrastando elementos na tela.

Ao enviar o comando com a tecla "Enter", o Gemini começa a carregar uma resposta e nos parabeniza pela iniciativa. O diferencial do Gemini é que ele não fornece apenas o que precisamos, mas expande o conhecimento, como se fosse uma conversa.

Ele oferece uma introdução e recomendações de plataformas no-code como Bubble, Adalo, Glide e Webflow, com descrições obtidas na internet. Além disso, o Gemini sugere funcionalidades para cada seção mencionada no prompt.

O Gemini finaliza com dicas adicionais: começar pequeno, utilizar templates, integrar com outras ferramentas e testar constantemente. Essas informações são valiosas, pois não temos experiência em programação ou design e buscamos uma ferramenta intuitiva e fácil para criar o site.

Próximos passos

No próximo vídeo, começaremos a pensar na estrutura da página com o que chamamos de sitemap. Se você não souber o que é, te aguardamos no próximo vídeo para explicar mais. Até lá!

Planejando o site - Criando um sitemap com IA

Já começamos a trabalhar na construção do projeto através de uma conversa com o Gemini, que trouxe algumas informações interessantes.

Antes de trazer mais dados, é importante destacar que nem sempre teremos clareza sobre como devemos produzir e moldar nosso site, que tipo de informação ele deve conter, como posicionar os blocos, quais páginas e conteúdos são relevantes.

Por isso, o ideal é buscar por referências. Inclusive, podemos pedir ao próprio Gemini para buscar referências na internet, que, muitas vezes, ele conseguirá fornecer um link.

Explorando referências

Nesse caso, gostaríamos de compartilhar uma referência que pode ampliar nossa visão: o site do ciclo de desempenho da Alura.

Abaixo da barra de navegação no topo, que contém as páginas que podemos acessar, temos informações sobre a importância da gestão de desempenho com quatro blocos explicativos. Em seguida, existe uma seção sobre o ciclo de desempenho 2024 e outra sobre informações detalhadas sobre o ciclo.

Essa é uma referência que podemos usar para construir nosso site. Durante o projeto do curso, você pode tanto seguir o mesmo modelo que estamos criando quanto explorar e usar sua criatividade para produzir algo diferente.

Pensando na estrutura básica

No vídeo passado, comentamos sobre criar um sitemap (mapa do site). No Google Imagens, podemos encontrar várias imagens que representam bem o que é um sitemap.

De forma geral, o sitemap é a estrutura de páginas do nosso site. É como se fosse uma árvore genealógica de um site, inteligando suas diversas páginas.

Todo site começa por uma página inicial, a partir da qual somos guiados para outras páginas, como, por exemplo, uma página sobre a empresa, outra sobre os produtos e outra com informações de contato. Cada página também pode conter mais subpáginas.

Precisamos de ajuda para organizar nosso portal de RH. O Gemini pode nos fornecer mais exemplos e nos auxiliar na construção desse estrutura através do seguinte comando:

Qual é a estrutura básica de um portal de RH?

Além de uma página inicial, eu também preciso de:

* Integração de novos colaboradores (onboarding)
* Gestão de benefícios
* Avaliação de desempenho (processo de reflexão sobre como está seu desempenho)
* Educação corporativa (treinamento institucionais obrigatórios)
* Recrutamento e seleção (vagas internas)

Me dê exemplos de portais de RH e também uma estrutura básica de sitemap.

Após enviar a mensagem, o Gemini informa que um portal de RH bem estruturado serve como um centro de recursos para colaboradores, otimizando processos e promovendo uma experiência mais engajadora.

A estrutura básica varia conforme o tamanho da empresa e suas necessidades, mas as seções mais comuns para a página inicial são: notícias e eventos da empresa, links rápidos, ferramentas de busca e calendário de eventos.

A IA trouxe informações para cada página que especificamos e também adicionou uma página para intranet - que não iremos incluir. Nem sempre o Gemini traz informações mais precisas, por isso, devemos ler com calma e decidir o que faz sentido manter.

Além disso, o Gemini também trouxe alguns exemplos de plataformas de RH como Workday, SAP SuccessFactors e BambooHR - que não parecem ser brasileiras, mas não especificamos essa necessidade. Ele também mencionou plataformas no-code e portais de grandes empresas como inspiração.

Por fim, trouxe a estrutura básica de sitemap com páginas e subpáginas:

• Página inicial
• Colaboradores
  • Onboarding
  • Benefícios
  • Avaliação de desempenho
  • Educação corporativa
  • Intranet
• Recrutamento
  • Vagas
  • Candidatos
• Administração (acesso restrito)
  • Relatórios
  • Configurações

Criando sitemap com IA

O Gemini trouxe uma base para começar a gerar um mapa do site, mas não gerou um desenho. Para criar essa imagem, vamos utilizar uma ferramenta chamada Relume, que também trabalha com IA.

Nesse site, podemos criar uma conta e iniciar um projeto de forma gratuita. Após logar e entrar na plataforma, clicamos no botão de "New Project" no canto superior direito para criar um novo projeto.

A primeira etapa é a criação do sitemap. Poderíamos criar esse mapa manualmente, mas decidimos usar o campo de sitemap prompt para pedir que a IA gere essa estrutura automaticamente.

O Relume tem uma funcionalidade em beta, ou seja, ainda em desenvolvimento, para entender comandos em vários idiomas, mas não queremos nos arriscar muito. Por isso, vamos manter o campo de "Language" em "English (US)", ou seja, em inglês.

Se você não domina o inglês, você também pode usar o Gemini para traduzir o comando de criação do sitemap em uma nova conversa:

Traduza a seguinte frase para inglês:

"O site da RH Solutions é um espaço completo que contém integração de novos colaboradores (onboarding), gestão de benefícios, avaliações de desempenho (processo de reflexão sobre como estão seu desempenho), educação corporativa (treinamentos institucionais obrigatórios), recrutamento e seleção (vagas internas)."

Poderíamos também traduzir esse trecho com o Google Translate, mas o Gemini nos dá várias opções de tradução: mais direta, enfatizando integração dos recursos e destacando a experiência do usuário.

Nesse caso, vamos copiar a terceira opção com o atalho "Ctrl + C":

The RH Solutions website provides a seamless user experience, offering a comprehensive suite of HR tools including onboarding, benefits administration, performance management, corporate learning, and talent acquisition.

Após colar a mensagem em inglês no campo de prompt do Relume com o atalho "Ctrl + V", pedimos para gerar um sitemap de 1 a 5 páginas.

Basicamente, a IA criou uma página inicial com uma barra de navegação e diversas seções para funcionalidades, depoimentos, notícias e rodapé. Além disso, a interligou com uma página de "Sobre Nós" e outra de "Serviços".

Apesar de não termos especificado que queríamos uma página de "Sobre nós", o Relume provavelmente a trouxe por ser uma página muito comum em vários sites. A página de serviço, contém cinco subpáginas com os conteúdos que havíamos mencionado, traduzidos para o inglês.

Não precisamos manter essa estrutura exata, podemos reorganizar o mapa clicando e arrastando as páginas para onde queremos posicioná-las. Também podemos selecionar um elemento e apertar a tecla "Delete" para excluí-lo.

Próximos passos

Agora, vamos revisar as informações trazidas e decidir o que faz sentido manter em nosso projeto. Por exemplo, uma seção de newsletter pode não ser necessária. Se preciso, você pode voltar no Gemini e traduzir cada seção.

No próximo vídeo, vamos pensar no modelo da nossa página, chamado de wireframe. Até lá!

Sobre o curso Framer: construindo um portal do colaborador com IA

O curso Framer: construindo um portal do colaborador com IA possui 162 minutos de vídeos, em um total de 40 atividades. Gostou? Conheça nossos outros cursos de IA para Negócios 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:

• Planejando o site
• Começando a construção com Framer
• Criando a interface usando IA
• Personalizando o site
• Publicando o site