Case 036Design de web app e dashboard
Autopost.ai
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.
- Meu papel
- Fluxos de produto e design de interface
- Status do projeto
- Design de interface · Acervo do Figma e do Dribbble
01
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.
02
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.
03
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.
04
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.
05
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.
