UI
A consistência visual do site: componentes, padrões de página e a relação com o design system da PUC-PR. Este capítulo reúne os achados de UI e consistência do relatório de análise; os de UX ficam no capítulo de UX. Cada achado indica a página, o impacto e o que sugerimos fazer.
UI / 01
Consistência visual
O mesmo componente com aparências diferentes entre páginas: FAQ, depoimentos, cards, filtros, carrosséis, newsletter e abertura de página.
FAQ em cinco formatos
Acordeão com "+", grade de cards abertos e pílulas pretas com seta. Títulos ("Perguntas frequentes" e "Perguntas e Respostas") e larguras diferentes.
Recomendação
Um único componente de FAQ, com título e largura padrão.
Depoimentos em dois formatos
Carrossel de um depoimento em cartão cinza (Home) contra grade de cartões brancos (Sobre, Assinaturas), com títulos, avatares e nomes tratados de forma diferente.
Recomendação
Um único componente de depoimento, com regra para avatar, nome e aspas.
Filtros e busca sem padrão
Mesma coluna lateral com chips duplicados e um chip vazio, texto copiado de outra página ("aos cursos") e rótulo que não combina com a opção. O Blog só tem busca, isolada no canto.
Recomendação
Definir o componente de filtro e busca, com posição fixa e regras de rótulo.
Cards de conteúdo em quatro formatos
Curso, post, material e curso de pós mudam de estrutura e de peso do título. O card do Blog usa miniatura pequena; os de Materiais têm alturas diferentes, selo "DOC" e capas em estilos diferentes.
Recomendação
Uma família de cards com variações definidas e regra para alturas e selos.
Carrossel de cursos
O mesmo componente tem título, tamanho de card e alinhamento de texto diferentes. Resumos cortados sem reticências e setas abaixo, em azul-marinho.
Recomendação
Padronizar título, card, setas e corte de texto.
Abertura de página (hero)
H1 à esquerda na Home e centralizado em Cursos, Professores, Assinaturas e Ajuda. Sobre tem hero roxo, Materiais e Blog têm imagem e Ajuda tem eyebrow.
Recomendação
Um padrão de hero para páginas internas, com variantes definidas.
Newsletter e rodapé
Bloco da newsletter, texto interno e rodapé têm margens diferentes. Em Professores, Pós e Climatério ocupa a largura toda. Pontos soltos nas listas do rodapé parecem itens vazios do CMS.
Recomendação
Um único bloco de newsletter com largura e margens fixas, e limpeza do rodapé.
"Ainda tem dúvidas?"
O mesmo bloco aparece com larguras diferentes e, em Assinaturas, com um vazio grande acima.
Recomendação
Alinhar o bloco ao mesmo grid do FAQ.
Foto estática no hero
A imagem parece ocupar espaço sem explicar a plataforma. Há espaço para elementos visuais que mostrem produtos e diferenciais, e para tags dos principais produtos logo abaixo da frase de impacto.
Recomendação
Substituir a foto por visual que explique a plataforma.
Bloco de números e credibilidade
Os cards têm preenchimento desigual (alguns com dado, outros vazios) e não captam a atenção. Dá para priorizar o que reforça a credibilidade da PUCPR.
Recomendação
Reorganizar o bloco com dados que sustentem a decisão de compra.
Nomenclatura dos filtros
Termos como "Avulso" podem não ser autoexplicativos, e "Espiritualidade e Bem-Estar" aparece em Categorias e em Especialidade. Os tópicos precisam de organização.
Recomendação
Revisar e organizar nomes e agrupamento dos filtros.
Título e descrição sem diferenciação
Nos cards do Blog, título e descrição têm quase o mesmo peso, o que dificulta a leitura rápida.
Recomendação
Definir hierarquia tipográfica para o card de post.
Paginação diferente dos Cursos
O Blog usa botão "Próximo", enquanto Cursos usa paginação numerada.
Recomendação
Usar a mesma paginação em listagens.
Cursos em um carrossel só
A Home apresenta todos os cursos em um único carrossel, o que cansa o usuário e não ajuda cada perfil a achar o seu caminho.
Recomendação
Dividir em vitrines: mais acessados, recomendados para recém-formados e categorias por persona.
UI / 02
Componentes e design system
O site partiu do Untitled UI, mas os componentes se perderam na passagem do Figma para o Webflow. Os achados mostram onde a biblioteca deixou de ser aplicada.
Botões e CTAs sem biblioteca
Pelo menos quatro estilos de botão secundário no site e até seis em Pós e Curso. O mesmo CTA tem rótulos diferentes ("Experimente Grátis", "Começar agora"), e Climatério tem nove rótulos para quase a mesma ação.
Recomendação
Biblioteca de botões (primário, secundário, texto) e lista de rótulos de CTA.
Sem grid nem escala de espaçamento
O conteúdo usa várias larguras e recuos laterais diferentes na mesma página e entre páginas.
Recomendação
Definir um grid único e uma escala de espaçamento, e aplicar em todas as páginas.
Cores fora da paleta
Verde nos ícones de check, nos filtros e nos títulos. Azul-marinho em "Mais Popular!" e nas setas dos carrosséis. Fundo cinza azulado em Climatério.
Recomendação
Mapear as cores aos tokens da biblioteca e remover o que não pertence à paleta.
Tipografia sem escala
Três tipografias no projeto: uma no site dos cursos, outra na Pós e uma terceira no checkout. Além disso há fontes diferentes nos subtítulos de hero e no corpo, textos muito pequenos em chips, cards, rodapé e FAQ, e contraste baixo em cinza claro.
Recomendação
Definir uma família tipográfica por função, escala, tamanho mínimo e pares de cor com contraste verificado, valendo para site, Pós e checkout.
Header e menu
O item atual não é destacado e o CTA "Experimente Grátis" tem tamanho diferente dos botões de conteúdo. O menu Explorar repete três categorias e corta nomes. Os nomes mudam entre header e rodapé ("Central de Ajuda"/"Ajuda").
Recomendação
Revisar o componente de menu e usar um nome único para cada destino.
Acabamento e CMS
Chips duplicados e vazios, espaços duplos, texto colado ("conteúdos exclusivos;Conteúdos em multiformato"), aspas retas e ícone de envelope repetido nos 9 cards da Ajuda.
Recomendação
Revisão de conteúdo no CMS e checagem de campos de rich text.
Elementos fixos que cobrem conteúdo
O selo do reCAPTCHA fica fixo no canto e cobre conteúdo em telas menores. Em Pós e Climatério divide o canto com o botão do WhatsApp.
Recomendação
Definir uma área livre para elementos fixos e a regra de quando cada um aparece.
Portal com outro design system
Logo, fonte e botões do portal não seguem o site principal, e a passagem de "Entrar" parece trocar de produto.
Recomendação
Alinhar o portal à mesma biblioteca de componentes.
Interrupções de animação
FAQ, newsletter e rodapé aparecem desbotados durante a animação de entrada, com contraste baixo por alguns segundos. A confirmar rolando normalmente.
Recomendação
Confirmar no site e, se for real, reduzir ou remover a animação de entrada.
Sem botão de voltar ao topo
Páginas longas, como Professores e Cursos, não têm atalho para voltar ao topo.
Recomendação
Incluir botão de voltar ao topo, respeitando a área livre dos elementos fixos.
Período do preço pouco claro
Os cards mostram o valor por mês nos dois planos, sem indicar "Anual" ou "Mensal". Não fica claro a diferença nem se há multa no cancelamento do anual.
Recomendação
Rotular o período nos cards e explicar a diferença ao lado do seletor.
"Experimente Grátis" com destaque excessivo
O botão do header compete com os CTAs de conteúdo e com o CTA principal da página.
Recomendação
Reduzir o destaque do botão no header.
Data em inglês e autor repetido
As datas aparecem em inglês e os posts mostram o mesmo autor e data. A confirmar se é erro de CMS.
Recomendação
Traduzir o formato da data e revisar autor e data de cada post.
Cantos arredondados e retos
Alguns cards têm cantos arredondados e outros cantos retos, o que quebra a conexão visual entre os elementos.
Recomendação
Definir o raio de borda por tipo de componente (card, botão, campo, imagem) e aplicar em todo o site.
UI / 03
Pós-Graduação
A Pós tem uma identidade própria, mais próxima do brandbook. Pós-Graduação e Climatério usam outro tema, mas mantêm header, newsletter e rodapé do site, o que torna a troca abrupta. Hoje a Pós é o carro-chefe e o que mais movimenta o caixa; o produto nasceu como assinatura e ainda não tem um roadmap definido para o usuário.
Linguagem visual própria
Site dos cursos e Pós parecem sites diferentes: tema escuro com gradiente rosa e roxo, faixas listradas e serifa na Pós; fundo claro, roxo plano e outra fonte nas outras 11 páginas. A Pós é hoje o carro-chefe e não aparece na identidade do site.
Recomendação
Trazer mais identidade da empresa ao site todo e manter o light mode nos cursos e o dark mode (moderno) na Pós, como subsistema documentado do brandbook.
CTAs e botões
Quatro estilos na Pós e cinco em Climatério, com rótulos diferentes para a mesma ação. "Garantir minha vaga" fica a cavalo na borda do formulário, em roxo claro.
Recomendação
Usar a mesma biblioteca de botões do site, com variante para o tema escuro.
FAQ em terceiro formato
Pílulas pretas com seta e primeira pergunta aberta, diferente do acordeão de Assinaturas e dos cards da Ajuda.
Recomendação
Aplicar o componente único de FAQ (UI / 01) com variante escura.
Decoração sem regra
As faixas listradas passam por trás dos cards até a borda da tela, e a lista de módulos usa um quarto esquema de listras. Na Pós, a faixa roxa animada tem texto minúsculo e cortado.
Recomendação
Um tratamento decorativo com regra de uso e limite dentro do contêiner.
Tipografia com serifa em vários usos
Serifa no nome da coordenadora, nos nomes dos professores e, em "Baixe a ementa completa do curso", misturada com a fonte do site na mesma frase.
Recomendação
Definir onde a serifa entra (só títulos de destaque) e nunca na mesma frase.
Cards de temas e professores
Seis cards com o mesmo ícone, títulos em alturas diferentes e capitalização inconsistente. O carrossel de professores tem cartões cortados e sem setas ou pontos visíveis, e biografias de tamanhos muito diferentes.
Recomendação
Padronizar o card e dar controles visíveis ao carrossel.
Cards de curso e de materiais
Títulos de alturas diferentes desalinham duração e professor, que aparece como "Dra.", "Dr." e sem título. Os materiais gratuitos têm outro visual e paginação pouco visível.
Recomendação
Alinhar com a família de cards do site e normalizar título de professor.
Larguras e newsletter
O conteúdo da Pós usa pelo menos cinco larguras diferentes. A newsletter ocupa a largura toda, enquanto em Blog, Curso e Expert fica contida.
Recomendação
Aplicar o grid único e o bloco de newsletter padrão.
Elementos fixos
O botão verde do WhatsApp fica junto ao selo do reCAPTCHA, e a barra "Início da próxima turma" cobre conteúdo em quase toda a página de Climatério.
Recomendação
Definir quando cada elemento fixo aparece e dar opção de fechar a barra.
Pílulas que parecem botões
Elementos com aparência de botão não são clicáveis, o que gera expectativa de ação.
Recomendação
Diferenciar visualmente rótulos informativos de botões.
Alinhamento do cabeçalho
Todo o conteúdo é centralizado, exceto o logo e o rótulo "Pós-Graduação", o que causa estranheza.
Recomendação
Alinhar logo e rótulo ao mesmo eixo do restante.
Cards com informação repetida
As informações se repetem em todos os cards e as tags vêm antes do título. Um card repete o texto de outro acima.
Recomendação
Mostrar o título antes das tags e revisar o texto duplicado.
Home sem referência à Pós-Graduação
A Pós é hoje o produto que mais movimenta o caixa, mas a Home não traz nenhuma menção a ela.
Recomendação
Incluir na Home uma seção ou chamada para a Pós-Graduação, ligando à página da Pós.
UI / 04
Próximos passos
O que fazer na camada visual depois deste diagnóstico: um design system único para cursos avulsos e Pós-Graduação, usado para reestruturar a navegação e o layout com as mudanças de UX.
Um só design system para o site e a Pós
Hoje o site de cursos, a Pós e o portal têm três famílias tipográficas, grades, cores e botões próprios. Sem uma base comum, qualquer ajuste de navegação ou de layout se repete em cada área.
Entrega
Definir tokens (cores, tipografia, espaçamento, raios, sombras e grid) e uma biblioteca no Figma que cubra cursos avulsos, Pós e portal.
Uma marca, dois temas
O modo claro dos cursos e o escuro da Pós parecem duas identidades. A marca precisa se reconhecer nas duas, com a mesma base visual.
Entrega
Tratar claro e escuro como temas do mesmo sistema (mesmas fontes, mesmo uso do logo, mesma paleta base) e fixar o que muda e o que não muda entre eles.
Consolidar as variantes dos componentes
FAQ em cinco formatos, depoimentos em dois, cards de conteúdo em quatro e botões sem biblioteca. Cada variante extra é custo de manutenção e quebra a coerência entre páginas.
Entrega
Reduzir a uma versão por componente (botão e CTA, FAQ, card de curso, card de conteúdo, depoimento, filtro, carrossel, formulário), com estados e regras de uso documentados.
Reestruturar navegação e layout com base no UX
O menu com mais de 30 itens, a busca escondida, a listagem que não ajuda a escolher e a Home que não mostra a Pós são problemas de UX que só se resolvem na estrutura das páginas.
Entrega
Redesenhar menu com hierarquia, busca visível, Home por persona e momento de carreira (com a Pós em destaque) e templates de listagem e de página de produto já no novo sistema.
Mobile e acessibilidade desde o início
A diagramação no celular tem falhas básicas (elementos fixos que cobrem conteúdo, larguras, rolagem lateral). Corrigir depois custa mais do que desenhar certo agora.
Entrega
Criar os templates responsivos primeiro no celular, definir regras para elementos fixos e checar contraste, tamanhos de texto e áreas de toque no sistema.
Validar, entregar ao time técnico e manter
Um design system só se sustenta se for aplicado de fato no CMS e no portal. Também falta definir o roadmap da Pós, que é o carro-chefe e pesa na ordem de aplicação.
Entrega
Testar os protótipos com médicos de cada persona, entregar a biblioteca com documentação ao time de desenvolvimento, aplicar por fases (Home, Cursos, Pós, portal) e definir quem cuida das regras.