YANDesign de web app e dashboard
Autopost.ai. Uma interface para gerar e publicar artigos com IA
Design de interface de um web app que gera artigos com IA para sites em WordPress, com dashboard, configuração inicial, editor de artigos e modos claro e escuro.
Em resumo
- O problema
- Um web app escreve artigos com IA para sites WordPress. Quem paga precisa ver quanto está gastando e continuar no controle do que é publicado.
- Minha parte
- Desenhei os fluxos e a interface do produto, da conexão com os modelos de IA ao dashboard, ao editor e à lista de artigos, nos modos claro e escuro.
- A decisão principal
- Colocar uso e custo ao lado dos botões de gerar e deixar a última etapa com a pessoa: depois de ler o artigo, uma coluna decide o que acontece em seguida, seja publicar, salvar como rascunho, agendar ou gerar de novo.
- Meu papel
- Fluxos de produto e design de interface
- Status do projeto
- Design de interface · Acervo do Figma e do Dribbble
Telas do arquivo de design original no Figma e do Dribbble, com dados de exemplo.
Minha contribuição
O Autopost.ai é um web app em inglês para gerar artigos com IA e preparar esses textos para um site em WordPress. Meu trabalho aqui cobre a interface, da primeira configuração até a tela em que a pessoa revisa e agenda o artigo.
O shot do Dribbble chamado AI Content and SEO Generator mostra o mesmo produto, então trouxe as telas dele para este case. Números de uso, nomes e títulos de artigos são dados de exemplo.
Deixar plano e uso à vista
O dashboard começa pelas duas coisas que a pessoa vem fazer: criar vários artigos de uma vez ou criar um só. As duas ficam no topo da primeira coluna, com o mesmo botão Generate with AI. No topo da segunda ficam os contadores de artigos, tópicos e palavras.
Abaixo deles, os custos de uso por modelo, os dados da assinatura e um gráfico de tokens por modelo respondem à pergunta que vem com qualquer ferramenta paga de IA: quanto já usei até agora? Manage subscription fica junto do plano, então uma consulta pode virar ação na mesma tela.
Primeiro, conectar os modelos
A configuração acontece sobre o dashboard desfocado, então o produto já aparece atrás do formulário. A etapa Setup your APIs pede uma chave do Midjourney e outra do GPT-3. Abaixo de cada campo, uma única linha diz onde entrar e leva até a chave. Back e Next mantêm a etapa dentro de uma sequência.
Revisar antes de publicar
O editor de artigos tem três colunas. A da esquerda traz o tema e os ajustes de geração, como número de palavras, tipo de artigo e tom. A do centro mostra o artigo gerado com a imagem. A da direita define o que acontece depois: publicar, salvar como rascunho, agendar ou agendar automaticamente, com a escolha do autor, as contas de redes sociais e um botão para gerar de novo.
De volta à lista, abas e etiquetas separam os artigos publicados, agendados, em rascunho e em geração. Um artigo que ainda está sendo gerado mostra o progresso no próprio card.
Explorar o claro e o escuro
As telas existem em modo claro e escuro. O layout não muda, mas a ênfase sim: no escuro, os botões ficam brancos, os títulos passam para lilás e as barras do gráfico clareiam. Assim, o índigo da versão clara não precisa carregar o contraste sozinho.
