Encontro 02 - Rede Daora

Prompts Avançados e Identidade Visual

01

Interface

Conceito

O que é uma interface?

Interface é o ponto onde eu me comunico com algo, sem precisar entender como funciona por dentro.

Conceito

Tipos de interface

GUI · visual

Clique

Botões, janelas e ícones. É o celular, o site, o Instagram.

TUI · texto

Digito

Comandos escritos. É o terminal do computador.

API · programática

Envio dados

Dados estruturados entre programas. É o app que consulta preços.

02

Estilos de Mercado

Estilos

A roupa certa

Cada negócio tem uma personalidade - o estilo do site precisa combinar.

Estilos

Como escolher o estilo

A pergunta não é qual estilo eu gosto - é qual combina com o público e com o serviço.

Antes de escolher, pesquise: abra os sites de 3 a 5 negócios do mesmo segmento e repare em cores, fontes e no tom. Eles são a referência do que o público já espera.

03

Blocos de Componentes Web

Componentes

É como LEGO

Cada bloco tem um formato e uma função. Junto os blocos pra construir o que quero: casa, carro, castelo.

Componentes

Componentes de UI

Componentes

Layouts

  • Grid - colunas e linhas, tudo alinhado
  • Flex - distribuição flexível, um eixo
  • Sidebar - barra lateral + conteúdo principal
  • Split - dois blocos lado a lado
  • Full-width - largura total, sem restrições

Layout é a disposição que escolhemos para cada componente na página.

Componentes

Como pedir componentes no prompt

1. Hero "Aprenda a Decorar Bolos" + botão "Inscreva-se" + Imagem de fundo
2. Depoimentos - 3 cards com foto
3. Pricing - 2 planos lado a lado
4. FAQ - perguntas que abrem e fecham
5. Rodapé com WhatsApp

Quanto mais eu especifico, menos a IA inventa.

04

Tipos de Site

Tipos de site

A loja certa

Cada negócio pede uma cara diferente.

Não construo uma padaria do mesmo jeito que uma loja de roupas - as necessidades são outras.

Tipos de site

Exemplos

Tipos de site

Como escolher o tipo

05

Hierarquia

Hierarquia

Hierarquia = ordem do olho

Se eu não defino hierarquia, o visitante se perde - não sabe por onde olhar primeiro.

Hierarquia

Prompt com hierarquia

Título: SOM DA TERRA - maior, bold, laranja
Subtítulo: Música ao vivo no Bar do Zé
Detalhes: Sábado às 20h, entrada grátis
Botão: Confirmar presença - grande, arredondado

Ordem no prompt = ordem no olho.

06

Prática: Landing Page no Replit

Prática

Landing page = Flyer online

  • Título chamativo
  • Informações: data, local, preço
  • Foto em destaque
  • Botão de ação (WhatsApp)
  • Identidade visual coerente

Um cartão de visitas, com botão de ação.

Prática

A estrutura da landing

Prática

Prompt pronto

Crie uma landing page para [NOME].
Hierarquia:
1. Título: [TÍTULO] - maior elemento, cor [COR]
2. Subtítulo: [DESCRIÇÃO]
3. Imagem em destaque
4. Detalhes: Data [DATA], Local [LOCAL], Preço [PREÇO]
5. Botão: [TEXTO] - grande, arredondado, WhatsApp
6. Rodapé: [REDES SOCIAIS]
Estilo: [ESTILO] · Cores: [CORES] · Fundo: [COR]

Prática

Passo a passo no Replit

  • Criar projeto HTML/CSS/JS
  • Escrever o prompt no chat da IA
  • Visualizar no painel ao lado
  • Ajustar com frases simples
  • Publicar via botão Publish

Prática

Ajustes avançados

Mudar estilo

"Troque de artesanal pra minimalista."

Adicionar seção

"Adicione depoimentos abaixo dos detalhes."

Mudar hierarquia

"Coloque o botão acima dos detalhes."

Animação sutil

"Anime o título ao carregar."

Tipografia

"Serifada no título, sem serifa no resto."

Espaçamento

"Mais espaço entre título e subtítulo."

Prática

Ajuste com propósito

Quando peço um ajuste, explico o porquê. "Mude a cor pra vermelho porque quero urgência" rende um resultado melhor do que só "mude a cor".

07

Checklist de Identidade Visual

Checklist

Checar antes de publicar

  • Cores
  • Título legível, texto grande
  • O olho sabe pra onde olhar
  • Texto com contraste contra o fundo
  • Respiro entre os elementos
  • Botão de ação clicável no celular
  • Link do WhatsApp funciona
  • Fica bom no celular
  • Cores e fontes consistentes

Encerramento

Na próxima aula

Encontro 03 - Publicando na Web - GitHub e Deploy

Git e GitHub como backup permanente, Vercel e Cloudflare Pages como hospedagem gratuita, e performance como UX.