Dez páginas navegáveis com o texto definitivo de cada seção,
prontas para o designer e para o desenvolvimento
O protótipo abre pela Home e o menu do topo leva às demais páginas. A lista abaixo dá acesso direto a qualquer uma, inclusive às três que ficam fora do menu do site: página da agência, Convenção Coletiva e Lista Referencial de Preços.
Abrir o protótipo pela HomeO wireframe é um documento estrutural, não um layout. Ele define o que cada seção diz, em que ordem e com qual peso. Cor, tipografia da marca, espaçamento fino e imagem final são decisão do designer, na etapa seguinte.
O wireframe usa só tons neutros de propósito. Aplicar o amarelo da marca aqui faria a conversa virar sobre cor, quando o que precisa ser decidido agora é ordem, hierarquia e texto. O amarelo entra no layout, depois desta aprovação.
| Arquivo | O que contém |
|---|---|
| 03_01, a Home | Cinco seções: abertura, Radar, comunidade, associadas e convite |
| 03_02, Institucional | Propósito, história, atuação, diretoria, documentos e entidades do setor |
| 03_03, Associadas | Filtro por serviço, cidade e porte, com o cartão inteiro levando à página da agência |
| 03_04, Festival Colibri | Bloco temporário da edição em campanha, lista de premiadas, como funciona e a relação com o nacional |
| 03_05, Radar | Destaque, listagem filtrável e coluna lateral com os colunistas |
| 03_06, Contato | Canais com prazo declarado, formulário e perguntas gerais |
| 03_07, Seja um associado | Elegibilidade, o que entra na conta, tabela de valores, processo, formulário e confirmação no lugar |
| 03_08, a página da agência | Página interna, uma por associada, com marca, descrição, serviços e contato |
| 03_09, Convenção Coletiva | Documento vigente, leitura rápida das cláusulas mais consultadas e histórico |
| 03_10, Lista Referencial | Documento vigente, para que serve, por que é pública e versões anteriores |
Os textos em caixa tracejada cinza marcam o que ainda depende de informação do cliente. Os textos em cinza claro acima de cada seção são anotações de projeto e não aparecem no site.
O texto do site foi escrito a partir de seis decisões de tom, tomadas na Etapa 1 e aplicadas em todas as páginas.
Duas regras atravessam todo o texto. A entidade é masculina, o Sinapro, porque é sigla de Sistema, conforme o manual de identidade. E o site fala em primeira pessoa do plural, como já acontece nas redes sociais, e não em terceira pessoa sobre si mesmo.
| Decisão | Justificativa |
|---|---|
| A home fala de comunidade, não de mudança de sigla | A seção que antes explicava a virada de sindicato para Sistema foi reescrita em torno do coletivo. É o que conversa com o arquétipo do manual e o que interessa a quem lê, que não se importa com nomenclatura de entidade |
| Home sem atalho de documento | A home fica inteira dedicada a quem ainda decide. Convenção Coletiva e Lista Referencial são alcançadas pela coluna fixa do rodapé e pelo bloco do Institucional |
| Sem busca de texto livre na home e em Associadas | Os filtros de serviço, cidade e porte resolvem a tarefa. Campo de busca vazio na home cria expectativa de resultado que a base ainda não sustenta |
| Festival Colibri fora da home | Depende de arquivo de peça com autorização de uso. Fica na página própria, onde a lista de premiadas funciona sem imagem |
| Premiadas em lista, não em galeria | O crédito de agência e anunciante é o que importa, e ele não depende de ter a peça em alta resolução. Se o arquivo aparecer, a mesma lista aceita miniatura |
| Sem botão de ver tudo no Radar da home | O cartão inteiro é o link e o menu já leva ao Radar completo. Botão repetido em seção de listagem é ruído |
| Colunistas em coluna lateral no Radar | Dá rosto a quem escreve e prepara o site para receber texto das associadas, que é a intenção declarada para o médio prazo |
| Convenção e Lista Referencial em páginas próprias | São as duas tarefas mais frequentes do associado. Página própria resolve a achabilidade e ainda gera busca orgânica |
| Convite final ausente em Seja um associado e Contato | As duas páginas já são o ponto de conversão. Repetir o convite ali competiria com o próprio formulário |
| Confirmação no lugar do formulário | Sem página de obrigado, por decisão de escopo. A medição de conversão passa a ser por evento, o que está anotado no próprio wireframe |
Cada item abaixo aparece marcado no wireframe, no lugar exato onde entra. Nenhum deles impede a aprovação da estrutura, todos impedem o site de ir ao ar.
| Informação | Onde aparece |
|---|---|
| Números da comunidade no ano | Home, seção 3. Orientações jurídicas dadas e encontros e capacitações realizados |
| Cadastro das associadas | Home, Associadas e página de cada agência. Marca em vetor, descrição, serviços, cidade e contato |
| Lista de premiadas por edição | Festival Colibri. Ano, prêmio, categoria, peça, agência e anunciante |
| Prazo de resposta da filiação | Seja um associado, em quatro lugares: botão, processo, confirmação e perguntas frequentes |
| Nome de quem responde o contato | Seja um associado, na confirmação. Nome próprio reduz a ansiedade pós-envio |
| Diretoria vigente com retratos | Institucional, seção 4 |
| Convenção Coletiva vigente e valores das cláusulas | Página da Convenção Coletiva, na leitura rápida |
| Lista Referencial vigente e validade | Página da Lista Referencial e bloco de documentos do Institucional |
| E-mail institucional correto | Contato. O publicado hoje tem erro de digitação na origem |
| Primeiros colunistas | Radar, na coluna lateral. Nome, cargo, agência e retrato |
| Licença de fonte para uso em site | Todo o site. A família tipográfica da marca é comercial |
Com o wireframe validado, o material segue para o design, que aplica a identidade visual, e para o desenvolvimento. O projeto de UX se encerra aqui: as três etapas estão entregues.