Manual Lovable.dev
Manual Didático Lovable.dev
Guia completo e prático para criar aplicações web e websites através de inteligência artificial, sem necessidade de conhecimentos técnicos. Aprenda a transformar as suas ideias em realidade digital.
Índice do Manual
Introdução ao Lovable.dev
O que é, principais funcionalidades e benefícios da plataforma
O que é o Lovable.dev?
O Lovable.dev é uma plataforma revolucionária que democratiza o desenvolvimento de aplicações web e websites através da inteligência artificial. Esta ferramenta inovadora permite que qualquer pessoa, independentemente do seu nível de conhecimento técnico, possa criar aplicações web completas e funcionais simplesmente através de conversas em linguagem natural com a IA.
Definição Simples
O Lovable.dev é essencialmente um "engenheiro de software pessoal" alimentado por inteligência artificial. Tu descreves o que queres criar em português simples, e a plataforma transforma as tuas palavras em código funcional, design atrativo e uma aplicação web completa.
Principais Funcionalidades
- Prompts em linguagem natural: Descreve o que queres em português simples
- Diferentes tipos de projetos: Websites, landing pages, apps B2C/B2B, protótipos, ferramentas internas
- Design a partir de imagens: Carrega mockups ou esboços para recriar como aplicação funcional
- Colaboração em equipa: Trabalho em tempo real com colegas
- Tecnologias modernas: Código limpo seguindo melhores práticas
Exemplos Práticos de Uso
Para Empreendedores
Cria MVPs rapidamente para testar ideias no mercado em horas em vez de meses
Para Marketing
Landing pages de alta conversão e websites promocionais otimizados
Para Consultores
Expande serviços oferecendo soluções digitais aos clientes
Para Educadores
Plataformas de e-learning e ferramentas educativas personalizadas
Benefícios Principais
- Democratização: Elimina barreiras técnicas entre ideias e implementação
- Velocidade: Horas/dias em vez de semanas/meses de desenvolvimento
- Custo reduzido: Fração do investimento comparado ao desenvolvimento tradicional
- Flexibilidade: Alterações em tempo real sem coordenação externa
- Aprendizagem: Compreende conceitos de desenvolvimento naturalmente
Começar a Usar o Lovable.dev
Criar conta, fazer login e navegar na plataforma
Criar uma Conta
Passo a Passo do Registo
- Navega até lovable.dev
- Clica no botão "Get started" no canto superior direito
- Escolhe uma das opções de registo:
- • Google (mais rápido e seguro)
- • GitHub (para desenvolvedores)
- • Email + palavra-passe personalizada
- Aceita os Termos de Serviço e Política de Privacidade
- Confirma o email através do link enviado
Segurança da Conta
- Palavra-passe forte: Mínimo 12 caracteres com maiúsculas, minúsculas, números e símbolos
- Autenticação 2FA: Ativa se disponível para segurança extra
- Email seguro: Mantém o email de registo protegido
- Logout em dispositivos públicos: Sempre termina sessão em computadores partilhados
Painel Principal (Dashboard)
Área Central
Zona principal para iniciar novos projetos através de prompts em linguagem natural
Barra de Navegação
Community, Pricing, Enterprise, Learn, Launched - acesso rápido a recursos
Perfil de Utilizador
Configurações, histórico de projetos, preferências e gestão de faturação
From the Community
Projetos públicos para inspiração, filtrados por categorias
Navegação na Plataforma
- Community: Galeria de projetos públicos, possibilidade de "remix"
- Pricing: Informações sobre planos (gratuito a empresarial)
- Learn: Documentação, tutoriais, exemplos de prompts
- Launched: Projetos bem-sucedidos como inspiração
Dica Importante
Se não receberes o email de confirmação, verifica a pasta de spam. Podes solicitar reenvio através da página de login.
Criar o Primeiro Projeto
Do conceito inicial à publicação - exemplo prático completo
Configurar um Novo Projeto
Escolher o Tipo de Projeto
Websites & Landing Pages
Presenças online, portfolios, páginas promocionais
Consumer Apps
Aplicações para utilizadores finais, produtividade, entretenimento
B2B Apps
Dashboards, CRM, ferramentas de análise empresarial
Protótipos
Versões simplificadas para validar conceitos
Internal Tools
Ferramentas internas organizacionais
Ferramentas Específicas
Calculadoras, sistemas especializados
Definir Objetivo e Público-Alvo
Exemplo de objetivo específico: "Quero um website que apresente os meus serviços de consultoria e permita aos clientes potenciais agendar consultas"
Em vez de: "Quero um website"
Estrutura Básica de um Projeto
- Configurações gerais: Nome, descrição, visibilidade, colaboração
- Estrutura de páginas: Homepage + páginas adicionais conforme necessário
- Componentes: Elementos reutilizáveis (botões, formulários, navegação)
- Sistema de estilos: Consistência visual automática
Como Entender e Utilizar os Blocos
Conceito de Blocos
Os blocos são elementos funcionais que servem propósitos específicos na aplicação. Podem ser simples (texto, botão) ou complexos (formulário completo, gráfico interativo).
Tipos de Blocos Disponíveis
Exemplo Prático: Website Café Local
Caso de Estudo Completo
1. Definindo o Projeto
"Cria um website para um café local chamado 'Café da Esquina'. Quero uma página inicial atrativa com fotos do café, uma secção sobre nós, o menu completo e um formulário para reservas. O design deve ser acolhedor e moderno."
2. Desenvolvimento Iterativo
- "Altera a cor principal para um tom de castanho quente"
- "Adiciona uma galeria de fotos dos pratos mais populares"
- "Faz o formulário de reservas mais simples, só com nome, data, hora e número de pessoas"
3. Testes e Refinamentos
- Preview em desktop, tablet e mobile
- Teste de todas as funcionalidades e formulários
- Verificação da navegação intuitiva
4. Publicação
- Escolha de subdomínio gratuito ou domínio próprio
- Hosting, otimização e segurança automáticos
- Alterações refletidas em tempo real após publicação
Usar Templates Prontos
Acelerar desenvolvimento com templates personalizáveis
Escolher e Personalizar Templates
Explorar a Biblioteca de Templates
A biblioteca de templates está organizada por categorias para facilitar a navegação:
- Websites: Sites corporativos, portfolios, blogs
- Consumer Apps: Aplicações para utilizadores finais
- B2B Apps: Ferramentas empresariais
- Prototypes: Versões de teste e validação
- Internal Tools: Ferramentas organizacionais
Processo de Seleção
- Define claramente objetivos e requisitos
- Compara templates por funcionalidades e estrutura
- Considera a complexidade vs. experiência
- Lê comentários e avaliações de outros utilizadores
- Visualiza pré-visualização interativa completa
Editar Imagens, Texto e Cores
Texto
Clica no elemento ou usa prompts como "faz este título maior" ou "altera este parágrafo para negrito"
Imagens
Carrega próprias imagens, pede à IA para gerar específicas ou substitui por descrição
Cores
Mudanças globais: "altera o esquema para tons de azul e branco" ou específicas: "faz este botão vermelho"
Adaptar Templates para Diferentes Finalidades
Landing Pages
Foco: Uma única ação ou objetivo (captar leads, promover produto, inscrições)
- • Identifica a ação principal e torna-a proeminente
- • Remove elementos que distraiam
- • Estrutura: cabeçalho atrativo → benefícios → prova social → múltiplas CTAs
- • Simplifica navegação para manter foco
- • Otimiza para dispositivos móveis
Portfólios
Foco: Apresentação visual e organização clara de projetos
- • Página inicial: foto profissional + breve descrição + melhores trabalhos
- • Organização por categoria, data ou importância
- • Página/secção dedicada para cada projeto
- • Secção "Sobre" detalhada com história pessoal
- • Testemunhos de clientes para credibilidade
- • Contacto claro e acessível
Websites de Apresentação
Foco: Presença online profissional para pequenas empresas
- • Estrutura típica: Inicial → Sobre → Serviços/Produtos → Contacto
- • Mensagem clara: o que a empresa faz e porquê é especial
- • Linguagem simples, evita jargão técnico
- • Elementos de credibilidade: testemunhos, certificações, experiência
- • Otimização SEO para motores de busca
Personalização Avançada
Modificação da Estrutura
- Reorganizar secções: "Move a secção de testemunhos para antes da secção de contacto"
- Adicionar páginas: "Adiciona uma secção de FAQ após a secção de serviços"
- Remover elementos: "Remove a secção de blog" mantendo o resto do design
Integração de Funcionalidades Específicas
Para Restaurantes
- • Sistema de reservas online
- • Integração com encomendas online
- • Menu interativo
Para Serviços
- • Calculadoras de preços
- • Formulários de orçamento
- • Sistemas de agendamento
Para E-commerce
- • Carrinho de compras
- • Processamento de pagamentos
- • Gestão de inventário
Para Educação
- • Gestão de cursos
- • Quizzes interativos
- • Áreas de membros
Gestão de Conteúdos
Adicionar, editar e organizar conteúdos sem conhecimento técnico
Adicionar, Editar e Apagar Conteúdos
Gestão de Texto
Edição Simples
- • Alterar texto existente: Clica no elemento e escreve o novo conteúdo
- • Adicionar novo texto: "Adiciona um parágrafo sobre os nossos valores após a secção sobre nós"
- • Formatação: "Fazer este texto em negrito", "alterar este título para ser maior"
- • Alteração de cores: "Mudar a cor deste parágrafo para azul escuro"
Gestão de Imagens
Substituir Imagens
- • Arrastar e largar nova imagem
- • Prompt: "Substitui esta imagem por uma foto do nosso novo produto"
- • Ajuste automático de tamanho
Formatos Suportados
- • JPEG, PNG, GIF, SVG, WebP
- • Otimização automática
- • Performance otimizada
Gestão de Multimédia
Vídeos e Áudio
Vídeos: YouTube, Vimeo, upload direto (MP4, WebM, OGV)
Áudio: MP3, WAV, OGG com controlos personalizáveis
Documentos: PDF, integração Google Drive/Dropbox
Gestão de Botões
- Texto do botão: "Altera o texto deste botão para 'Contacta-nos Agora'"
- Cor e estilo: "Faz este botão azul com bordas arredondadas"
- Ação: "Quando clicarem neste botão, abrir uma nova página"
Organização de Blocos na Página
Movimentar Secções
Reorganiza elementos por instrução: "Move esta secção para o topo da página"
Criar Secções
Adiciona novas áreas: "Cria uma nova secção sobre a equipa após os serviços"
Ajustar Layout
Organização interna: listas, colunas, espaçamentos por descrição natural
Carregamento e Gestão de Multimédia
Métodos de Upload
- Drag & Drop: Arrasta ficheiros diretamente para a área desejada
- Integração Cloud: Google Drive, Dropbox, OneDrive
- URLs diretas: Liga para ficheiros online existentes
- Geração IA: "Cria uma imagem de um escritório moderno"
Otimização Automática
O Lovable.dev otimiza automaticamente todos os ficheiros para:
- • Redução de tamanho sem perda de qualidade
- • Formatação apropriada para web
- • Carregamento rápido em diferentes dispositivos
- • Backup automático na cloud
Gestão Avançada
Conteúdo Dinâmico
- Feeds de redes sociais: Integração automática Instagram, Twitter, LinkedIn
- Atualizações automáticas: Promoções, novidades, eventos
- Conteúdo baseado em localização: Mostra informação relevante por região
Múltiplas Páginas
- Elementos partilhados: Cabeçalhos, menus, rodapés consistentes
- Navegação automática: Ligações entre páginas geradas automaticamente
- Gestão centralizada: Alterar elemento partilhado atualiza todas as páginas
Histórico de Versões
Controlo de Versões
- • Guarda automaticamente todas as alterações
- • Visualiza histórico completo de modificações
- • Reverte para versões anteriores facilmente
- • Compara diferenças entre versões
- • Recupera conteúdo apagado acidentalmente
Ligações e Integrações
Conectar páginas, redes sociais e plataformas externas
Ligações Internas e Externas
Inserção de Links
Links Internos
- • Entre páginas do mesmo projeto
- • Para secções específicas (âncoras)
- • Navegação automática gerada
- • Atualização automática se página muda
Links Externos
- • Para websites e recursos externos
- • Abertura em nova aba opcional
- • Verificação de links válidos
- • Atributos SEO automáticos
Elementos com Links
Qualquer elemento pode ter links associados através de instruções naturais:
- Texto: "Faz esta palavra ligar para a página de contactos"
- Imagens: "Esta imagem deve abrir o portfolio quando clicada"
- Botões: "Este botão deve levar para o formulário de inscrição"
- Secções inteiras: "Esta secção deve ser clicável e levar para os serviços"
Gestão Automática de Links
O Lovable.dev gere automaticamente:
- • Detecção e correção de links quebrados
- • Atualização automática quando páginas são renomeadas
- • Navegação breadcrumb inteligente
- • Sitemap automático para SEO
Integração com Plataformas
Redes Sociais
Facebook/Instagram
- • Feed de posts automático
- • Botões de partilha
- • Pixel de tracking
- • Login social
Twitter/X
- • Embedded tweets
- • Timeline personalizada
- • Botões de tweet
- • Hashtags dinâmicas
- • Perfil profissional
- • Artigos e posts
- • Botões de partilha
- • Login empresarial
Integração de Vídeos Externos
- YouTube: Embed direto, listas de reprodução, live streams
- Vimeo: Vídeos privados, player personalizado
- TikTok: Vídeos virais, hashtags trending
- Twitch: Streams ao vivo, clips destacados
Formulários e Recolha de Dados
Criação de Formulários
Definição por Linguagem Natural
Exemplo: "Cria um formulário de contacto com nome, email, telefone, assunto e mensagem"
Validação automática: A IA adiciona validação apropriada para cada tipo de campo
Tipos de Campos Disponíveis
E-mail Marketing
Integrações Populares
Mailchimp
- • Listas de subscrição automáticas
- • Segmentação de audiência
- • Campanhas automatizadas
- • Analytics integradas
ConvertKit
- • Formulários embebidos
- • Sequências de email
- • Tags e segmentos
- • A/B testing
Outras Integrações
- HubSpot: CRM completo, lead scoring, automação
- ActiveCampaign: Email avançado, SMS marketing
- Constant Contact: Email simples, eventos, surveys
- AWeber: Autoresponders, landing pages integradas
Configuração Automática
Instrução simples: "Integra este formulário com o Mailchimp para adicionar contactos à lista 'Newsletter'"
A IA configura automaticamente:
- • Conexão API segura
- • Mapeamento de campos
- • Confirmação de subscrição
- • Tratamento de erros
Publicar e Partilhar o Projeto
Tornar o projeto acessível online e gerir versões
Opções de Publicação
Subdomínio Gratuito
Opção mais rápida e simples para começar
- • Formato: seuproject.lovable.app
- • Disponível imediatamente
- • SSL/HTTPS automático
- • Sem configurações técnicas
- • Ideal para testes e protótipos
Domínio Personalizado
Marca profissional com domínio próprio
- • Usa domínio que já possuis
- • Configuração DNS necessária
- • Certificado SSL incluído
- • Marca profissional
- • Melhor para projetos comerciais
Configuração de Domínio Personalizado
- Vai às configurações do projeto
- Seleciona "Custom Domain"
- Insere o teu domínio (ex: meusite.com)
- Copia as configurações DNS fornecidas
- Atualiza as configurações no teu provedor de domínio
- Aguarda propagação (até 24h)
- SSL ativa automaticamente
URLs Amigáveis
O Lovable.dev gera automaticamente URLs limpos e otimizados para SEO:
- Automático: seusite.com/sobre-nos
- Personalizável: "Alterar URL desta página para /equipa"
- Redirecionamentos: URLs antigos redirecionam automaticamente
- Breadcrumbs: Navegação hierárquica automática
Processo de Publicação
Passos da Publicação
- Revisão final: Testa todas as funcionalidades
- Configurações: Define domínio, visibilidade, SEO
- Publicar: Clica em "Publish" no menu do projeto
- Verificação: Testa o site publicado
- Partilha: Distribui o link final
Alterações Pós-Publicação
Edição Contínua
Qualquer alteração no editor é refletida imediatamente no site publicado
Atualizações Automáticas
Sem necessidade de "republicar" - mudanças aparecem instantaneamente
Colaboração Live
Múltiplos editores podem trabalhar simultaneamente
Gestão de Versões
Histórico Automático
- Snapshots automáticos: Versões guardadas regularmente
- Pontos de controlo: Versões marcadas manualmente
- Comparação visual: Vê diferenças entre versões
- Restauração fácil: Volta a qualquer versão anterior
Exemplo de Restauração
Cenário: Fizeste alterações que resultaram mal
- Vai ao menu "Version History"
- Navega pelas versões guardadas
- Pré-visualiza a versão desejada
- Clica "Restore this version"
- Confirma a restauração
Funcionalidades Incluídas Automaticamente
Hosting Profissional
Servidores rápidos, CDN global, 99.9% uptime
Segurança SSL
HTTPS automático, certificados renovados automaticamente
Responsive Design
Funciona perfeitamente em todos os dispositivos
Performance Otimizada
Carregamento rápido, compressão automática
SEO Básico
Meta tags, sitemap, estrutura otimizada
Analytics Ready
Pronto para Google Analytics, Facebook Pixel
Partilha e Colaboração
- Links de partilha: URLs diretos para páginas específicas
- Embed codes: Incorporar elementos em outros sites
- Redes sociais: Preview cards otimizados
- QR codes: Geração automática para acesso móvel
- Convites para colaboradores: Diferentes níveis de acesso
Analisar Resultados Básicos
Métricas essenciais e interpretação de dados
Métricas Disponíveis
Métricas de Visitantes
- • Visitantes únicos diários/mensais
- • Visualizações de página totais
- • Taxa de novos vs. retornos
- • Sessões por utilizador
Métricas de Engagement
- • Tempo médio na página
- • Taxa de abandono (bounce rate)
- • Cliques em botões/links
- • Interações com formulários
Métricas Essenciais por Tipo de Projeto
Landing Pages
- • Taxa de conversão: % de visitantes que completam ação desejada
- • Tempo na página: Engagement com conteúdo
- • Origem do tráfego: Quais canais trazem melhores visitantes
Websites Corporativos
- • Páginas mais visitadas: Conteúdo de maior interesse
- • Formulários de contacto: Leads gerados
- • Geografia dos visitantes: Alcance geográfico
Interpretação Prática
Taxa de abandono alta (>70%): Pode indicar conteúdo irrelevante ou carregamento lento
Tempo baixo na página (<30s): Visitantes não encontram o que procuram
Baixas conversões: CTA pouco clara ou formulário muito complexo
Ajustes Baseados em Dados
- Otimizar páginas populares: Melhorar conteúdo com mais tráfego
- Simplificar formulários: Se taxa de abandono for alta
- Melhorar CTAs: Se conversões estiverem baixas
- Otimizar para mobile: Se maioria dos visitantes usar telemóvel
Exercícios Práticos
Hands-on: projetos práticos para consolidar conhecimentos
Exercício 1: Landing Page para Curso Online
Curso de Fotografia Digital
Passo 1: Prompt Inicial
"Cria uma landing page para um curso online de fotografia digital. Inclui título chamativo, benefícios do curso, vídeo de apresentação, depoimentos, preço com desconto e formulário de inscrição."
Passo 2: Personalização
- • Alterar título: "Torna-te um Fotógrafo Profissional em 30 Dias"
- • Adicionar secção com currículo do instrutor
- • Incluir galeria de fotos de alunos
- • Destacar garantia de satisfação
Passo 3: Otimização
- • Testar diferentes versões do botão CTA
- • Ajustar cores para transmitir criatividade
- • Otimizar para mobile (maioria dos visitantes)
- • Adicionar urgência: "Apenas 50 vagas disponíveis"
Objetivos de Aprendizagem
- • Criar uma página focada numa única ação
- • Usar elementos de persuasão e urgência
- • Integrar vídeo e formulários
- • Testar e otimizar conversões
Exercício 2: Portfolio de Designer Gráfico
Portfolio Profissional
Estrutura Requerida
- • Homepage: Apresentação pessoal + melhores trabalhos
- • Portfolio: Galeria organizada por categorias
- • Sobre: História pessoal e profissional
- • Contacto: Formulário + informações
- • Blog: Artigos sobre design (opcional)
Funcionalidades Específicas
- • Filtros por categoria (branding, web design, print)
- • Lightbox para visualizar trabalhos em detalhe
- • Testemunhos de clientes
- • Links para redes sociais profissionais
- • Download de CV em PDF
Competências Desenvolvidas
- • Organização visual de conteúdo
- • Navegação intuitiva entre páginas
- • Integração de galeria de imagens
- • Otimização para motores de busca
Desafios Avançados
Desafio 1: Website de Restaurante
Funcionalidades Requeridas:
- • Menu interativo com categorias e preços
- • Sistema de reservas online
- • Galeria de fotos do ambiente e pratos
- • Mapa e informações de localização
- • Integração com redes sociais
- • Área para eventos especiais
Desafio 2: App de Gestão de Tarefas
Funcionalidades Requeridas:
- • Adicionar e remover tarefas
- • Marcar tarefas como concluídas
- • Organizar por categorias e prioridades
- • Interface intuitiva e responsiva
- • Filtros e pesquisa
- • Dashboard com estatísticas
Dicas para o Sucesso
- • Começa sempre com um rascunho no papel
- • Foca na experiência do utilizador
- • Testa em diferentes dispositivos
- • Pede feedback a amigos e colegas
- • Itera baseado no feedback recebido
Checklists e Recursos Úteis
Ferramentas essenciais e verificações pré-publicação
Checklist Pré-Publicação
Conteúdo
- □ Todos os textos revistos e sem erros
- □ Imagens de alta qualidade carregadas
- □ Títulos e subtítulos descritivos
- □ Informações de contacto corretas
- □ Links externos funcionais
- □ Política de privacidade (se aplicável)
Funcionalidade
- □ Todos os formulários testados
- □ Botões funcionam corretamente
- □ Navegação intuitiva
- □ Páginas carregam rapidamente
- □ Emails de confirmação funcionais
- □ Integrações externas ativas
Design Responsivo
- □ Testado em desktop
- □ Testado em tablet
- □ Testado em telemóvel
- □ Texto legível em todos os tamanhos
- □ Botões facilmente clicáveis
- □ Imagens ajustam-se corretamente
SEO Básico
- □ Títulos de página otimizados
- □ Meta descrições relevantes
- □ URLs amigáveis
- □ Alt text nas imagens
- □ Estrutura de cabeçalhos (H1, H2, H3)
- □ Sitemap automático ativo
Recursos para Imagens
Bancos de Imagens Gratuitos
- Unsplash: unsplash.com - Fotos profissionais gratuitas
- Pexels: pexels.com - Vídeos e fotos de qualidade
- Pixabay: pixabay.com - Imagens, vídeos, vetores
- Freepik: freepik.com - Vetores e templates
Ferramentas de Edição
- Canva: Design gráfico simples
- GIMP: Editor de imagem gratuito
- Photopea: Editor online tipo Photoshop
- Remove.bg: Remover fundos automaticamente
Inspiração e Tendências
Plataformas de Inspiração
- • Dribbble: Designs criativos e modernos
- • Behance: Portfolios profissionais
- • Awwwards: Websites premiados
- • Pinterest: Ideias visuais por categoria
Ferramentas Complementares
- • Google Fonts: Tipografias gratuitas
- • Coolors: Paletas de cores
- • Font Awesome: Ícones profissionais
- • TinyPNG: Compressão de imagens
Dicas Finais
- • Sempre guarda uma cópia de backup do projeto
- • Testa o site com utilizadores reais antes de publicar
- • Mantem uma lista de melhorias para implementar futuramente
- • Acompanha métricas regularmente para otimizar performance
Glossário Simplificado
Definições claras de termos técnicos essenciais
API
Interface que permite comunicação entre diferentes software. Como uma "ponte" entre aplicações.
Backend
Parte invisível do site que gere dados, segurança e funcionalidades no servidor.
CTA (Call to Action)
Botão ou elemento que convida utilizadores a realizar uma ação específica.
DNS
Sistema que traduz nomes de domínio (seusite.com) em endereços IP dos servidores.
Domínio
Endereço único do teu site na internet (exemplo: lovable.dev).
Frontend
Parte visível do site com que os utilizadores interagem diretamente.
Hosting
Serviço que mantém o teu site online e acessível 24/7 através de servidores.
HTML/CSS
Linguagens básicas da web. HTML estrutura conteúdo, CSS define aparência visual.
Landing Page
Página focada numa única ação/objetivo, otimizada para conversões.
MVP
Minimum Viable Product - versão simples do produto para testar no mercado.
Responsivo
Design que se adapta automaticamente a diferentes tamanhos de ecrã.
SEO
Search Engine Optimization - otimização para aparecer melhor no Google.
SSL
Certificado de segurança que encripta dados (ícone cadeado no browser).
UX/UI
User Experience/Interface - como utilizadores sentem e interagem com o site.
