Framer: usando IA para criar um site

Desenhando e planejando seu site com IA - Apresentação

Boas-vindas ao curso "Construindo um Site com Inteligência Artificial"! Me chamo Luiz Lima, e serei seu instrutor.

Audiodescrição: Luiz Lima se declara um homem moreno, com cabelos escuros longos e amarrados, olhos escuros e barba. Veste uma camiseta azul-clara. Ao fundo, há uma estante com alguns livros e uma luz arroxeada.

O que vamos aprender?

Neste curso, exploraremos como a Inteligência Artificial pode guiar as etapas de desenvolvimento de um site, utilizando um e-commerce como exemplo.

Ferramentas

Não é necessário ter conhecimento de código. Utilizaremos a plataforma no-code chamada Framer para construir o site do início ao fim.

Trabalharemos com o Gemini para obter uma interface conversacional que nos auxiliará em cada uma dessas etapas, guiando a construção de textos e entendendo o desenvolvimento do site.

Também utilizaremos a Relume, que permite gerenciar e criar sitemaps (mapas do site) e wireframes (esquemas) através da Inteligência Artificial. Os prompts (solicitações) dessa ferramenta já definem como o site deve funcionar e qual será sua ordem.

Além disso, usaremos o Framer para gerar uma interface personalizada, com layout, cores e estilo de acordo com o gosto pessoal, criando uma landing page (página de destino), um site pessoal, um portfólio ou, no nosso caso, um e-commerce.

Vale lembrar que essa ferramenta é robusta e utiliza Inteligência Artificial para construir esses elementos.

Compreender a ferramenta é fundamental para editar e trazer mais dinamismo e singularidade ao projeto. Conhecer algumas propriedades de design também ajudará nesse processo, e abordaremos esses tópicos ao longo do curso.

Esperamos que você goste do conteúdo. Até lá!

Desenhando e planejando seu site com IA - Organizando ideias com GEMINI

Iniciaremos a produção do site. Conforme abordado na visão geral, trabalharemos com um e-commerce, mas isso não significa que precisamos nos limitar a esse modelo.

Utilização de Sites no-code

Para construir um site, especialmente para quem não tem familiaridade com programação e design de interface, utilizaremos sites no-code. Antes de começarmos, é essencial entender alguns aspectos, e a inteligência artificial pode ser uma grande aliada nesse processo.

Introdução ao Gemini

Utilizaremos o Gemini, a inteligência conversacional do Google. A plataforma é interessante porque permite iniciar uma conversa e continuar a discussão de forma contínua, semelhante ao site de API. A ferramenta ou sua versão está disponível de forma simples.

A versão avançada pode ser testada no canto superior direito, em "Testar o Gemini Advanced". As conversas estão localizadas à esquerda, enquanto no centro trabalharemos com a conversação. A ferramenta possibilita fazer perguntas e obter respostas de forma organizada, o que consideramos um aspecto interessante.

Trabalharemos com e-commerce, mas é possível trabalhar com outros tipos de sites e utilizar essas perguntas. À esquerda, já tenho duas conversas fixadas. Abordaremos isso nesta aula. Temos a opção de iniciar uma nova conversa, mas, no momento, o sistema já está solicitando uma nova conversa para nós, o que impede que possamos clicar no botão de "Nova conversa" no canto esquerdo.

Formulando perguntas para o projeto

Faremos uma pergunta para o nosso projeto. Iremos colar o que já temos copiado:

Quero abrir um e-commerce criando meu próprio site com sistema de vendas, mas não sou desenvolvedor nem design, quero usar sistemas no-code e sistemas de vendas já existentes no mercado.

A pergunta é clara e define bem o que desejamos: criar um site próprio com um sistema de vendas, sem ser uma pessoa desenvolvedora, utilizando sistemas no-code. Isso deixa claro o que precisamos entender para construir o site.

Ao fazer isso, podemos simplesmente pressionar "Enter" e iniciar a conversa.

Embora não seja algo novo, sabemos como utilizar esse tipo de recurso. O mais interessante é como organizamos o projeto dentro das interfaces conversacionais.

No Gemini, observamos a conversa que acabamos de iniciar na parte esquerda. Em vez de iniciar novas conversas ou tratar disso sem organização, selecionamos a conversa e clicamos nos três pontos posicionados verticalmente à direita. Neste menu, temos a opção de "Fixar" a conversa.

Organizando conversas para um fluxo contínuo

Podemos organizar as conversas dentro da interface para manter um fluxo contínuo, permitindo respostas mais adequadas com base nas perguntas já feitas. Fixamos esta conversa e a nomeamos de "Perguntas para o meu e-commerce". Clicamos no botão "Fixar" na parte inferior direita.

Assim, sempre que precisarmos trabalhar com perguntas relacionadas ao site, retornaremos a esta conversa, onde o Gemini já terá toda a interação necessária para fornecer respostas adequadas. Podemos até adicionar um emoji, se desejamos.

Tratando de traduções

Também podemos iniciar uma nova conversa clicando em "Nova conversa" e solicitar a tradução da palavra "e-commerce".

traduza a palavra e-commerce

Ao traduzir a palavra em uma nova conversa, criamos uma nova conversa para tratar de tudo relacionado a traduções. Assim, manteremos uma conversa separada para essas necessidades. Fixaremos essa conversa e a nomearemos "Traduções".

Observe como a organização dentro da Inteligência Artificial contribui para o desenvolvimento de maneira adequada e otimizada.

Analisando o retorno do Gemini

A partir disso, revisamos nossas perguntas clicando em "Perguntas para o meu e-commerce" e verificamos o que foi trazido.

Abrir um e-commerce sem conhecimentos em desenvolvimento ou design é totalmente possível hoje em dia, graças às plataformas no-code e sistemas de vendas prontos!

1. Escolha sua plataforma no-code:

- Shopify: Uma das mais populares, intuitiva e completa, com diversos templates e recursos para criar e gerenciar sua loja. Ideal para iniciantes.

- Nuvemshop: Plataforma brasileira com bom custo-benefício, fácil de usar e com boa variedade de ferramentas.

- Vtex: Mais robusta e escalável, indicada para lojas maiores que buscam alta customização. Requer um pouco mais de curva de aprendizado.

- Wix: Famosa por sua interface amigável e sistema de arrastar e soltar, ideal para quem busca simplicidade.

2. Adicione um sistema de vendas:

- Nuvemshop Checkout: Já integrado à plataforma Nuvemshop, oferece checkout rápido e seguro, além de diversas formas de pagamento.

- PagSeguro: Opção popular no Brasil, com taxas acessíveis e fácil integração.

- Mercado Pago: Integração com o Mercado Livre, ideal para quem já vende por lá.

- Stone Pagamentos: Soluções completas para pagamentos, incluindo maquininhas de cartão.

3. Explore recursos adicionais:

- Temas e layouts: Personalize a aparência da sua loja com templates prontos ou crie seus próprios designs.

- Marketing e vendas: Utilize ferramentas de SEO, e-mail marketing, anúncios e cupons para impulsionar suas vendas.

- Gerenciamento de estoque: Monitore seus produtos, estoque e fornecedores de forma eficiente.

- Atendimento ao cliente: Ofereça suporte aos seus clientes através de chat, e-mail ou telefone.

Dicas extras:

- Comece com um MVP (Produto Mínimo Viável): Crie uma versão básica da sua loja com as funcionalidades essenciais e vá aprimorando-a conforme o feedback dos clientes.

- Invista em cursos e tutoriais: Plataformas como Udemy e YouTube oferecem diversos conteúdos para te auxiliar na criação e gestão do seu e-commerce.

- Busque ajuda profissional: Se precisar de personalizações mais complexas, considere contratar um freelancer ou agência especializada em e-commerce.

Lembre-se: o sucesso do seu e-commerce depende de diversos fatores, como pesquisa de mercado, marketing, atendimento ao cliente e, claro, a escolha da plataforma e ferramentas adequadas.

Com planejamento, dedicação e as ferramentas certas, você estará no caminho certo para construir um e-commerce de sucesso, mesmo sem ser um desenvolvedor ou designer!

Observamos que uma das perguntas é sobre escolher uma plataforma no-code. Já sabemos que utilizaremos o Framer. Durante o curso, verificaremos se o Framer oferece um sistema de vendas. Além disso, temos exemplos de recursos adicionais que podemos usar, como marketing de layout, marketing de vendas e dicas extras.

O mais importante é que, após fazer a primeira pergunta, temos o início da nossa conversa com a Inteligência Artificial. Agora sabemos o que podemos fazer para desenvolver o site e o que precisamos escolher para isso.

Com essas informações, fica muito mais fácil começar, mesmo para quem não tem conhecimento prévio sobre o desenvolvimento de sites.

Próximo passo

Passamos para o próximo vídeo para entender, com o Gemini, quais são os passos seguintes. Já sabemos que desejamos criar um e-commerce e qual plataforma utilizaremos. Agora, é necessário explorar como a ferramenta pode ajudar nos primeiros passos do desenvolvimento.

Até lá!

Desenhando e planejando seu site com IA - Rascunhando um sitemap com IA

Já fizemos a pergunta correta e organizamos o Gemini para trabalhar com essa interface conversacional, permitindo um suporte contínuo. Com o site pronto, é essencial estruturá-lo adequadamente, seguindo a estrutura básica de um e-commerce.

Usando o Gemini para perguntas específicas

No Gemini, dentro da conversa "Perguntas para o meu e-commerce", digitamos:

Qual é a estrutura básica de um e-commerce?

Trabalhar com interfaces conversacionais e ter suporte oficial é vantajoso, pois permite fazer várias perguntas e obter diversas respostas, ao invés de buscar informações em diferentes sites ou sistemas de pesquisa.

Dica: ao invés de pressionar "Enter" para enviar cada pergunta, pressione "Shift + Enter" para pular linhas, como se fosse um parágrafo, e elaborar melhor a pergunta.

Podemos perguntar, por exemplo, como mostrar e vender produtos, solicitar exemplos de e-commerce e obter uma estrutura básica de sitemap (mapa de navegação).

Qual é a estrutura básica de um e-commerce?
Desejo poder mostrar e vender produtos
Me dê exemplos de e-commerce e também uma estrutura básica de sitemap

Mesmo sem um conhecimento profundo, alguns termos são extremamente importantes para utilizar bem a inteligência artificial. O termo sitemap refere-se a um mapa que mostra a ordem e a navegação do site. Dessa forma, o próprio Gemini consegue entender o que buscar para fornecer uma resposta sobre a estrutura desejada.

Desejamos entender a estrutura de um site e como ela deve ser organizada em um sitemap para aplicá-la na construção do nosso site.

Estrutura Básica de um E-commerce para Venda de Produtos:

1. Front-end (Loja Virtual):

- Homepage: Apresentação da loja, produtos em destaque, promoções e categorias.

- Páginas de Categorias: Listagem de produtos por categoria, com filtros e ordenação.

- Páginas de Produtos: Detalhes do produto, fotos, descrição, preço, frete e opções de compra.

- Carrinho de Compras: Visualização dos produtos selecionados, quantidade, valor total e cupons.

- Checkout: Finalização da compra, dados do cliente, endereço de entrega, forma de pagamento e confirmação.

- Conta do Cliente: Histórico de compras, dados cadastrais, endereços salvos e preferências.

2. Back-end (Gerenciamento):

- Painel de Controle: Gerenciamento de produtos, categorias, pedidos, clientes, estoque, relatórios e configurações.

- Gerenciamento de Produtos: Cadastro, edição, fotos, descrição, preços, estoque, variantes e categorias.

- Gerenciamento de Pedidos: Visualização, processamento, envio, cancelamento e devolução de pedidos.

- Gerenciamento de Clientes: Cadastro, edição, dados de contato, histórico de compras e preferências.

- Gerenciamento de Estoque: Controle de entrada e saída de produtos, níveis de estoque e alertas.

- Relatórios: Vendas por período, produtos mais vendidos, clientes mais frequentes e outros insights.

- Configurações: Definição de frete, formas de pagamento, políticas da loja, integrações e outras configurações.

3. Integrações:

- Sistemas de Pagamento: PagSeguro, Mercado Pago, Stone, etc.

- Logistica e Frete: Correios, transportadoras, apps de entrega, etc.

- Marketing e Automação: E-mail marketing, anúncios, CRM, etc.

- Ferramentas de Análise: Google Analytics, Hotjar, etc.

Exemplos de E-commerce:

- Moda: Dafiti, Netshoes, Amaro, Renner, C&A.

- Eletrônicos: Magazine Luiza, Americanas, Submarino, Ponto Frio, Kabum.

Cosméticos: Natura, Avon, Beleza na Web, Quem Disse, Berenice?

- Livros: Amazon, Submarino, Americanas, Livraria Cultura, Estante Virtual.

- Casas e Decoração: Casas Bahia, Mobly, Tok&Stok, Magazine Luiza, Leroy Merlin.

Sitemap básico:

```
Homepage
  - Sobre nós
  - Contato
  - Ajuda
Produtos
  - Categoria 1
    - Subcategoria 1
      - Produto 1
      - Produto 2
    - Subcategoria 2
      - Produto 3
      - Produto 4
  - Categoria 2
  ...

Carrinho de Compras
Checkout
Conta do Cliente
```

Lembre-se: Essa é apenas uma estrutura básica, e seu e-commerce pode ter mais ou menos funcionalidades, dependendo das suas necessidades e do seu público-alvo.

Dicas Extras:

- Priorize a experiência do usuário: Design intuitivo, navegação fácil, checkout rápido e seguro.

- Invista em boas fotos e descrições dos produtos: Ajude os clientes a visualizar e conhecer bem os produtos antes da compra.

- Ofereça diversas formas de pagamento: Para atender às preferências dos seus clientes.

…

Ao fazer essa pergunta, o Gemini fornecerá respostas baseadas no que perguntamos, facilitando o entendimento e a interação com a plataforma. Ele mostrará como o front-end funciona, como o back-end será implementado, as interações envolvidas, exemplos de e-commerce para referência e um sitemap básico.

Essas informações são o suficiente para sabermos por onde começar. Já sabemos que vamos trabalhar com no-code, portanto, não utilizaremos front-end e back-end.

Construindo o sitemap no Relume

Devemos focar na estrutura do site e, ao montá-la, considerar como avançar. Existem plataformas que auxiliam na construção dessa estrutura, permitindo criar o layout de maneira muito mais rápida. É nesse contexto que utilizaremos a plataforma chamada Relume.

Essa plataforma permite que, com o auxílio da inteligência artificial, damos vida ao sitemap e à estrutura que discutimos com o Gemini. No Relume, acessamos a opção "Launch" na parte superior direita, criamos nossa conta e obtemos um dashboard, que é o espaço onde gerenciamos nossos projetos.

Na parte esquerda, temos vários menus para a construção do projeto. Como estamos usando a conta gratuita, temos acesso a apenas um projeto. Vamos em "Site Builder" e clicamos em "New project" ("Novo Projeto") no canto superior direito. Ao clicar em "New project", somos direcionados para uma área onde começamos a aplicar a inteligência profissional na construção de sites.

Nesta página, encontramos "Primary Sitemap" no canto superior direito, onde construiremos um sitemap com a ajuda da IA. Já temos uma ideia do que precisamos para o sitemap e agora devemos trazer essas informações para a plataforma.

Devemos descrever, em "Sitemap prompt", o que precisamos de forma clara, pois quanto melhor a descrição, melhor será o resultado. A descrição deve ser feita em inglês, e é aqui que o Gemini auxilia com as traduções.

Voltamos ao Gemini e selecionamos a conversão "Traduções".

Já sabemos o que é e-commerce, então podemos pedir ao Gemini para traduzir um texto e, em seguida, usar esse texto traduzido no Relume.

Prompt parcialmente transcrito:

traduza para o inglês para mim a seguinte frase:

A Zoop Megastore é uma loja virtual de roupas casuais e criativas que oferece a vestimenta completa como acessórios, calçados, blusas, calças, bermudas, saias e…

Retorno do Gemini parcialmente transcrito:

Zoop Megastore: Tradução para o inglês

Opção 1: Foco em moda e estilo:

Zoop Megastore is your one-stop shop for casual and creative streetwear. Find the perfect outfit with our wide selection of accessories, shoes, tops, pants, shorts, skirts, and dresses. Our fast and easy online shopping experience lets you build your own style and checkout in just a few clicks.

Opção 2: Foco em praticidade e variedade:

Zoop Megastore is your online destination for casual and creative clothing. We offer a complete wardrobe, including accessories, shoes, tops, pants, shorts, skirts, and dresses. Our fast and convenient online shopping experience allows you to build your own style and make your purchase in just a few clicks.

Dicas adicionais:

- Utilize palavras-chave relevantes para o seu nicho e público-alvo.
- Mantenha a tradução natural e fluente, evitando frases artificiais ou soando como tradução literal.
- Adapte a linguagem para o público americano, utilizando expressões idiomáticas e gírias relevantes.
- Utilize ferramentas de tradução online como Google Translate, DeepL ou Microsoft Translator para auxiliar na tradução, mas revise e edite o texto manualmente para garantir a qualidade e fluidez.

…

Trabalharemos com foco no em moda e estilo, portanto, copiamos apenas o seguinte trecho do texto:

Zoop Megastore is your one-stop shop for casual and creative streetwear. Find the perfect outfit with our wide selection of accessories, shoes, tops, pants, shorts, skirts, and dresses. Our fast and easy online shopping experience lets you build your own style and checkout in just a few clicks.

No Relume, colamos o texto no campo "Sitemap prompt" para criar o sitemap e definimos o número de páginas desejadas. O próprio Gemini já nos forneceu essa informação, permitindo que entendamos quantas páginas temos e se precisamos trabalhar com as mesmas categorias.

Definimos entre 1 e 5 páginas para a primeira construção do site e podemos escolher uma linguagem diferente. Esse recurso está indicado como beta, então utilizaremos o inglês para garantir a solidez do recurso.

Primary Sitemap

• Sitemap prompt: Zoop Megastore is your one-stop shop for casual and creative streetwear. Find the perfect outfit with our wide selection of accessories, shoes, tops, pants, shorts, skirts, and dresses. Our fast and easy online shopping experience lets you build your own style and checkout in just a few clicks.
• Number of pages: 1-5
• Language: English (US)

Clicamos em "Generate Sitemap" e o ambiente automaticamente nos mostra a estrutura do site: a página principal (home), a página de produtos (Products), o blog, o post do blog, uma área para sapatos ("Shoes") e uma área para acessórios ("Accessories"). O sistema está organizando os produtos para nós.

Isso é interessante porque o sistema criou a página principal e a exibe na lateral direita, oferecendo opções para regenerar o sitemap ("Regenerate sitemap") ou gerar páginas vazias ("Generate empty pages"). Ele construiu uma estrutura de site para nós, e agora podemos ajustá-la conforme nossas necessidades.

Podemos excluir as páginas de "Shoes" e "Accessories", mantendo apenas produtos, blog e post do blog. Isto é, podemos trabalhar com essas páginas individualmente.

Selecionamos a página de produtos clicando em "Products" e à direita, dentro de "page prompt" podemos inserir um prompt ou não. No caso, não inserimos e geramos a página correspondente clicando em "Generate page". O sistema criará a página com base na ideia de que se trata da página de produtos. O mesmo processo pode ser aplicado para o blog e para o post do blog.

Trabalhar com o sitemap se torna muito mais eficiente e rápido com essas ferramentas.

Dica: Para ajustar o zoom, pressione "Ctrl" e use o scroll do mouse para aumentar ou diminuir o zoom. Se essa opção não estiver disponível, utilize a ferramenta de zoom no canto inferior direito da tela para ajustar o nível de zoom conforme necessário, facilitando a seleção do que incluir ou excluir do sitemap.

Para a página "Home", obtemos a seguinte sequência de estrutura:

Estrutura parcialmente transcrita:

A estrutura gerada é: há o nome da página seguido de cards que podemos clicar para remover ou ajustar.

A estrutura está completa com uma home que inclui uma barra de navegação, uma hero header section ("banner"), uma lista de recursos ("Features List Section"), que podemos remover, os benefícios do e-commerce; uma área de depoimentos, um FAQ (que também podemos remover), um CTA (chamada para ação) que direciona para a compra e para os produtos do site, e um footer (rodapé).

Ficamos com:

Home

• Navbar
• Hero Header Section
• Ecommerce Product Section
• Benefits Section
• Testimonial Section
• FAQ Section
• CTA Section
• Footer

Ele já trouxe toda a estrutura que vai existir na home e também na página de produtos. Podemos revisar, identificar o que não desejamos, e inserir o que desejamos. Assim, fizemos um sitemap simples e eficiente, que nos permite dar o primeiro passo para construir o layout do nosso site.

Conclusão

Com base nessa estrutura, evitamos a perda de tempo e a necessidade de criar novas páginas depois de construir o layout. Podemos aplicar o mesmo processo ao blog e aos posts do blog, ou ajustar nossos produtos conforme necessário.

Estamos satisfeitos com o que obtemos como retorno; apenas alguns ajustes são necessários. Agora, vamos focar na construção do wireframe desse sitemap para desenvolver o layout dentro do frame. Isso será abordado no próximo vídeo. Até mais!

Sobre o curso Framer: usando IA para criar um site

O curso Framer: usando IA para criar um site possui 131 minutos de vídeos, em um total de 42 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:

• Desenhando e planejando seu site com IA
• Criando a estrutura no Framer
• Construindo o site com IA
• Personalizando textos e elementos
• Publicando seu site