# Proposta Comercial e Posicionamento Estratégico **Projeto:** UI/UX & Design System — Patrimônios, Marcos e Lendas (Guia de Caxias do Sul) **Solicitante:** Soul Branding (A/C Mateus Loreto) **Executor:** Jefferson Motta — Especialista em Produto Digital, UI/UX & Design Systems **Data:** Setembro / 2026 --- ## 1. Carta de Alinhamento e Resposta ao Mateus Loreto > **Contexto de envio:** Esta mensagem pode ser enviada por e-mail ou no corpo da mensagem de apresentação, servindo como abertura do arquivo formal. --- **Fala, Mateus. Tudo bem?** Recebi e analisei minuciosamente o briefing de orçamento para a nova área e modernização do **Guia de Caxias do Sul**. Antes de abrir números, quero pontuar: a maturidade e a lucidez do documento de vocês são raras no mercado. Vocês mapearam exatamente as dores e os pontos nevrálgicos de um projeto que envolve a responsabilidade de uma chancela cultural (Lei Rouanet) e a transição tecnológica em paralelo conduzida pela TI (migração para React com o Diogo). Compartilho integralmente da régua de vocês: **raciocínio antes de tela, visão de sistema e nada de refação desenfreada de páginas legadas.** O sucesso desta entrega não é apenas criar uma área cultural visualmente impactante, mas entregar um **Design System com tokens e componentes reutilizáveis** que o Diogo consiga traduzir diretamente em código, assegurando a escala sustentável do portal pelos próximos anos. Para viabilizar a negociação da Soul com o cliente sem travar o processo, estruturei a proposta comercial exatamente como solicitado: **modular (Blocos A, B, C e D independentes)**, com prazos por etapa, governança de alinhamento com a TI e uma **tabela de variáveis claras** para pacificar os pontos do item 6 (como a distinção do 8º template e a complexidade do mapa). Além disso, como você verá nas notas do Bloco A, já contemplei uma visão de **Design de Serviço e Arquitetura de Ecossistema**: estruturaremos os componentes para que, além do dever cultural da Rouanet, o Guia ganhe musculatura para futuras frentes de monetização, conexão com o trade turístico e parcerias locais, sem exigir retrabalho estrutural posterior. Abaixo apresento o detalhamento completo para validação. --- ## 2. Escopo Orçado por Blocos ``` ┌────────────────────────────────────────────────────────────────────────┐ │ ESTRUTURA MODULAR DO PROJETO │ ├─────────────────┬─────────────────┬──────────────────┬─────────────────┤ │ BLOCO A │ BLOCO B │ BLOCO C │ BLOCO D │ │ Diagnóstico & │ Design System │ 7 Templates │ Adaptação │ │ Direção UX/IA │ & Tokens React │ Mestres (Desk) │ Mobile-First │ └─────────────────┴─────────────────┴──────────────────┴─────────────────┘ ``` ### Bloco A — Estudo, Diagnóstico UX/IA & Direção de Arte Cultural * **Objetivo:** Compreender as fricções de navegação do site atual, benchmark de portais culturais e turísticos contemporâneos, racionalização da arquitetura da informação e definição da direção estética. * **Escopo:** * Diagnóstico crítico de usabilidade e fluxos do portal legado. * Benchmark referencial focado em critérios de experiência, navegação e acervo histórico. * Revisão da Arquitetura da Informação para a inserção harmoniosa da área Rouanet (Patrimônios, Marcos e Lendas) e do Mapa, sem romper o legado. * Mapeamento de oportunidades de **Design de Serviço**: estrutura de cards e pontos de contato preparados para ecossistema de parceiros e monetização. * **Entregável:** Documento executivo de Diagnóstico, Arquitetura e Racional de Design (PDF/Notion). * **Investimento:** **R$ 6.800,00** * **Prazo de Execução:** 10 a 12 dias (Marco 1). --- ### Bloco B — Sistema de Operação / Design System Digital (Figma → React + WCAG 2.1 AA) * **Objetivo:** Construir o alicerce visual e técnico do Guia, permitindo que o Diogo (TI) implemente componentes consistentes em React sem adivinhação. * **Escopo:** * **Design Tokens:** Escala tipográfica, paleta de cores (semântica e contraste), sistema de espaçamentos (Grid 8pt) e raios de borda. * **Componentes Fundamentais:** Botões, inputs, cards de listagem, tags/badges, ícones, seletores de filtros, breadcrumbs e cabeçalhos. * **Matriz de Estados:** Padrões para estados `Default`, `Hover`, `Active`, `Focus` (navegação por teclado), `Disabled`, `Loading` (Skeleton screen) e `Empty State`. * **Conformidade de Acessibilidade:** Critérios de contraste e legibilidade rigorosamente alinhados às diretrizes **WCAG 2.1 nível AA** (obrigatório para prestação de contas da Lei Rouanet). * **Entregável:** Biblioteca componentizada no Figma utilizando Auto Layout nativo, variáveis organizadas e documentação de propriedades pronta para handoff. * **Investimento:** **R$ 9.800,00** * **Prazo de Execução:** 15 dias (Marco 2). --- ### Bloco C — Layouts de Templates Mestres (Base Consolidada: 8 Templates em Desktop) * **Conceito Norteador:** Criação de fôrmas estruturais dinâmicas (templates) que recebem conteúdo do banco de dados existente, sem criação de páginas individuais avulsas. * **Templates Inclusos (8 Fôrmas):** 1. **Home:** Estrutura de banner nobre, destaques editoriais, atalhos para áreas urbanas/rurais e vitrine de entrada para o projeto Rouanet. 2. **Listagem de Subcategorias:** Template unificado com barra de filtros dinâmicos (para compras, gastronomia, vida noturna, etc.). 3. **Página Individual Comercial / Serviços (`TPL_03`):** Template focado em conversão e contato rápido (WhatsApp, cardápios, horários). 4. **Página Individual Cultural Rouanet (`TPL_08`):** Template nobre exclusivo para Patrimônio Histórico, linha do tempo, tombamento e narrativa Rouanet. 5. **Página de Distrito / Região:** Template replicável para os 12 distritos de Caxias do Sul. 6. **Hub Patrimônios, Marcos e Lendas:** O epicentro cultural do projeto Rouanet, destacando o acervo histórico, lendas e contextualização temporal. 7. **Página Mapa Interativo Estruturado:** Interface com base cartográfica (Google Maps / Mapbox), pins categorizados e card/sheet lateral para visualização rápida. 8. **Página de Notícias / Artigos:** Listagem editorial com categorização e paginação. * **Entregável:** Telas em alta fidelidade no Figma organizadas em fluxo lógico de navegação. * **Investimento:** **R$ 14.600,00** *(equivalente a ~R$ 1.825,00 por template mestre desktop)* * **Prazo de Execução:** 20 dias (Marco 3). --- ### Bloco D — Adaptação Responsiva Mobile-First * **Objetivo:** Garantir que a experiência de uso em dispositivos móveis seja prioridade de usabilidade, considerando o perfil de uso turístico em trânsito. * **Escopo:** * Adaptação dedicada dos 8 templates mestres para viewport Mobile (390px). * Otimização de toque (touch targets mínimos de 44px), navegação por gavetas/sheets inferiores e simplificação de menus densos. * Regras de fluidez de grid que garantem a adaptação natural para resoluções intermediárias (tablets) via comportamento responsivo dos componentes. * **Entregável:** Telas mobile integradas aos fluxos de entrega de cada template no Figma. * **Investimento:** **R$ 8.600,00** * **Prazo de Execução:** 15 dias (Marco 4). --- ## 3. Resumo Financeiro e Condições de Pagamento | Etapa / Bloco | Escopo & Entregáveis | Investimento | Prazo / Cronograma | | :--- | :--- | :--- | :--- | | **Bloco A** | Diagnóstico UX/IA, Benchmarking & Arquitetura | R$ 6.800,00 | Dias 01 a 10 | | **Bloco B** | Design System, Tokens para React & WCAG 2.1 AA | R$ 9.800,00 | Dias 11 a 25 | | **Bloco C** | 8 Templates Mestres Desktop (inc. Rouanet & Mapa) | R$ 14.600,00 | Dias 26 a 45 | | **Bloco D** | Adaptação Responsiva Mobile-First (8 templates 390px) | R$ 8.600,00 | Dias 46 a 60 | | **TOTAL CONSOLIDADO** | **PROJETO INTEGRADO COMPLETO (60 DIAS)** | **R$ 39.800,00** | **60 dias corridos** | > **Condições Facilitadas de Pagamento:** > - **Opção 1 (Por Entrega de Marcos):** Faturamento vinculado à validação de cada bloco entregue (A: R$ 6.800, B: R$ 9.800, C: R$ 14.600, D: R$ 8.600). > - **Opção 2 (4 Parcelas Fixas / Quinzenais):** 4 pagamentos regulares de **R$ 9.950,00** (Entrada + 15d + 30d + 45d). --- ## 4. Tabela de Variáveis e Alinhamento Técnico (Item 6) Com o escopo consolidado em R$ 39.800,00, os itens críticos do briefing foram plenamente pacificados: | Item de Atenção | Tratamento na Proposta Consolidada | Status no Orçamento | | :--- | :--- | :--- | | **6.1 - 8º Template (Patrimônio Cultural vs Comércio)** | Já incluso no Bloco C (`TPL_08` para patrimônio e `TPL_03` para gastronomia/serviço). | **100% INCLUSO** | | **6.2 - Mapa Interativo Estruturado** | Canvas cartográfico com pins temáticos e sheet lateral retrátil de alta performance. | **100% INCLUSO** | | **6.3 & 6.5 - Herança Visual e Acervo Legado** | Containers com proporção travada (`aspect-ratio`) para absorver fotos sem quebra. | **100% INCLUSO** | | **6.4 - Sincronização TI / React (Diogo)** | Reunião prévia de alinhamento e entrega em tokens prontos para Dev Mode. | **100% INCLUSO** | | **6.6 - Acessibilidade Rouanet (WCAG AA)** | Contraste legal 4.5:1 e tipografia testada, blindando aprovação no Ministério da Cultura. | **100% INCLUSO** | | **Rodadas de Revisão** | Inclusas **2 rodadas consolidadas de ajustes** por bloco entregue. | **INCLUSAS** | --- ## 5. Premissas Técnicas e Governança de Projeto 1. **Acessibilidade e Conformidade Rouanet (Item 6.6):** Os componentes já serão desenhados observando o padrão de contraste e tipografia **WCAG 2.1 AA**, mitigando qualquer risco de apontamento em auditorias ou prestações de contas públicas. 2. **Sincronia com TI / React (Item 6.4):** Prevemos uma reunião inicial de 45 minutos com o Diogo antes do início do Bloco B para validar a arquitetura de tokens (nomenclatura de variáveis, padrões do Tailwind ou CSS Modules que ele planeja utilizar no React). 3. **Acervo de Imagens e Fotografias (Item 6.5):** Os cards e headers serão concebidos com tratamento dinâmico de sobreposição (overlays, máscaras e proporções flexíveis com `aspect-ratio`), garantindo harmonia visual mesmo que o acervo fotográfico legado tenha variações de resolução e iluminação. 4. **Fora de Escopo Confirmado:** Não inclui codificação/desenvolvimento front-end, redação de textos ou pesquisa histórica, tratamento individualizado de banco de fotos, redesenho do painel administrativo (CMS) e criação de logotipo/branding institucional. 5. **Ferramenta de Entrega:** Figma com permissões de visualização e inspeção de código para a equipe da Soul e da TI, organizado por páginas, fluxos e design tokens. 6. **Disponibilidade:** Início imediato em até 5 dias úteis após aprovação e formalização.