Reestruturação solo de portal cultural com 15+ anos de acúmulo de inconsistências. Do discovery à implementação: wireframes, protótipos e desenvolvimento WordPress com Bootstrap 2.3, SEO semântico e integrações com YouTube e redes sociais.

Introdução

O CineZen Cultural é um portal independente lançado em 2011, dedicado a cinema nacional, TV, literatura, quadrinhos, música e artes plásticas, com cobertura especial de eventos culturais da Baixada Santista. O projeto de redesign foi conduzido de forma solo — responsabilidade única sobre discovery, arquitetura da informação, design de interface e implementação técnica.

Problema

Anos de alterações pontuais transformaram o site num sistema fragmentado. Cada demanda nova era costurada sobre a anterior sem revisão estrutural, gerando:

  • Identidade visual inconsistente: tipografia, cores e componentes sem padrão
  • Arquitetura da informação quebrada: conteúdo de múltiplas editorias sem hierarquia clara
  • Gestão de conteúdo dependente de intervenção técnica para operações rotineiras
  • Ausência de responsividade — acesso mobile inviável
  • Baixa indexabilidade: sem semântica adequada para motores de busca

O problema não era estético. Era estrutural: o site não sustentava mais o volume editorial nem a diversidade de formatos do portal.

Abordagem

O redesign partiu de uma auditoria do conteúdo existente antes de qualquer decisão visual.

Estratégia: reorganizar primeiro, redesenhar depois. Decisões de layout só fazem sentido quando a estrutura de informação está resolvida.

Processo:

  1. Auditoria de conteúdo — mapeamento de todas as editorias, tipos de conteúdo e frequência de publicação
  2. Arquitetura da informação — definição de hierarquia, taxonomias e fluxos de navegação
  3. Wireframes — validação estrutural das páginas principais antes de qualquer estética
  4. Protótipos de alta fidelidade — apresentação ao cliente de variações de layout para tomada de decisão
  5. Desenvolvimento — implementação em WordPress com Bootstrap 2.3, SEO semântico e integrações

A sequência não foi linear por acidente: wireframes antes de alto fidelidade garantiram que o cliente tomasse decisões de estrutura separadas de decisões visuais — evitando o padrão comum de aprovar layout e depois pedir mudanças de navegação.

Decisões-chave

1. WordPress como CMS — autonomia editorial como requisito não-negociável

O cliente precisava atualizar slides, críticas, colunas, vídeos e banners sem depender de desenvolvedor. A alternativa seria um sistema customizado com menor custo inicial mas alto custo de manutenção e dependência técnica contínua. WordPress resolveu o problema de autonomia e reduziu o atrito operacional do cliente.

2. Wireframes validados antes do alto fidelidade

Projetos com cliente direto tendem a conflacionar feedback de estrutura com feedback visual. Separar as etapas forçou decisões arquiteturais antes de qualquer investimento em estética — economizando retrabalho e tornando o alto fidelidade uma conversa sobre refinamento, não sobre navegação.

3. Bootstrap 2.3 para responsividade — pragmatismo sobre customização

Em 2011, implementar responsividade do zero seria inviável no escopo de um projeto solo com cliente independente. Bootstrap 2.3 entregou grid responsivo, consistência visual entre breakpoints e velocidade de implementação. O trade-off — menos controle sobre o CSS — foi aceitável dado o contexto.

4. SEO semântico com Schema e Microformats

Conteúdo cultural tem vida longa em buscas. Implementar marcação semântica desde o início — em vez de tratar como feature futura — garantiu que cada novo conteúdo publicado já nascesse indexável corretamente. Custo zero de manutenção posterior.

5. Integração com YouTube em vez de hospedagem própria de vídeo

Hospedar vídeo próprio em 2011 com orçamento de portal independente era inviável. Integração com YouTube resolveu performance, storage e player sem custo adicional — e aproveitou a audiência já existente do canal do cliente.

Solução

O resultado foi um portal com estrutura editorial clara, capaz de crescer sem intervenção técnica para operações rotineiras.

  • Estrutura de navegação reorganizada em editorias distintas com hierarquia legível — usuário identifica seção e tipo de conteúdo sem ambiguidade.
  • Sistema de gestão via WordPress com painel configurado para o fluxo de trabalho específico do cliente: atualização de slide, publicação de crítica, gestão de colunistas e controle de banner publicitário, todos independentes.
  • Layout responsivo com Bootstrap 2.3 — acesso consistente em mobile, tablet e desktop.
  • Marcação semântica com Schema e Microformats em todos os tipos de conteúdo: críticas, perfis, eventos, resenhas.
  • Integrações com YouTube e redes sociais embutidas na estrutura de templates — não como plugins isolados.

Outras propostas da página inicial

Impacto e aprendizados

Sem métricas quantitativas disponíveis. Impacto estrutural:

  • Autonomia editorial real: o cliente passou a publicar, atualizar e gerenciar anúncios sem dependência técnica — mudança operacional concreta
  • Consistência visual recuperada: identidade coesa após anos de acúmulo de inconsistências
  • Responsividade como expansão de alcance: acesso mobile viabilizado num período em que tráfego mobile crescia e sites não-responsivos perdiam audiência
  • Base técnica sustentável: WordPress + Bootstrap permitiram que o site evoluísse com intervenções pontuais, não refatorações completas

Aprendizado principal: cliente de portal editorial independente tem duas dores simultâneas — identidade e operação. Resolver só a identidade visual sem resolver a gestão de conteúdo entregaria um site bonito mas inutilizável no dia a dia. A decisão de centralizar no WordPress foi tão crítica quanto qualquer decisão de design.

Aprendizado de processo: separar wireframe de alto fidelidade em etapas com aprovação intermediária reduziu o ciclo de revisão e tornou o feedback do cliente mais preciso — ele sabia exatamente sobre o que estava opinando.