O meu primeiro site

A necessidade

Precisava de uma ligação para partilhar no LinkedIn com quem quisesse perceber melhor o que faço. O meu perfil oferece uma primeira visão; o site permite-me encaminhar as pessoas interessadas para conteúdos mais específicos. Em poucos segundos, quem chega deve conseguir orientar-se, reconhecer as opções disponíveis e perceber onde pode aprofundar o assunto.

Pensei também em quem chegará mais tarde, quando os meus projetos tiverem uma história para contar. Os potenciais parceiros e investidores devem conseguir perceber o que estou a construir e acompanhar a evolução, incluindo os resultados que esses projetos vierem a gerar. Por isso, concebi uma estrutura que possa receber novos conteúdos sem precisar de ser redesenhada de cada vez. As próximas páginas poderão nascer em paralelo com os próprios projetos.

Foi a primeira vez que criei um site. Organizei o trabalho segundo o método que utilizo com os meus clientes: requisitos claros, decisões fundamentadas e verificações antes da publicação. Claude tratou do desenvolvimento; eu defini as regras, avaliei as propostas e testei as soluções. Na componente visual, trabalhei no site real, ativando e desativando temas a diferentes níveis, e avaliei o resultado nos meus dois ecrãs e no telemóvel. Só publiquei aquilo que já tinha visto numa pré-visualização.

Restrições

Defini logo à partida alguns limites: alojamento gratuito, sem base de dados nem cookies. A acessibilidade segundo WCAG 2.2 AA e a qualidade visual tinham de ser asseguradas em conjunto. Os conteúdos tinham de continuar legíveis mesmo sem JavaScript, e o site tinha de funcionar bem em iPhone e iPad. Previ oito idiomas, incluindo árabe com leitura da direita para a esquerda e chinês simplificado.

Caminhos alternativos

1. Escolha

   A página inicial começa com um seletor 3D de cartões. Nos computadores menos potentes, passa automaticamente para painéis simples, enquanto no telemóvel se transforma numa grelha de ícones semelhante à das aplicações.

   Alternativas descartadas

   Cartões dispostos em anel; apenas um menu clássico.

   Motivo

   O primeiro ecrã deve orientar imediatamente e deixar claro como continuar. A apresentação adapta-se ao dispositivo, mantendo a navegação rápida mesmo quando os recursos disponíveis são limitados.

2. Escolha

   O formulário de contacto exige uma confirmação por e-mail. Só recebo a mensagem depois de a pessoa que a enviou abrir a ligação recebida.

   Alternativas descartadas

   Endereço de e-mail publicado na página; serviço de formulários pago.

   Motivo

   A confirmação impede que o formulário seja utilizado para enviar e-mails a desconhecidos em meu nome. Mantive os dados em ferramentas que controlo.

3. Escolha

   Para atualizar os conteúdos, criei o meu próprio editor no site de teste, acessível através de um código recebido por e-mail. Cada alteração gera uma pré-visualização que verifico antes de publicar.

   Alternativas descartadas

   CMS com base de dados; edição manual dos ficheiros.

   Motivo

   Posso atualizar os textos sem mexer no código. A pré-visualização permite-me verificar o resultado antes de uma alteração se tornar pública.

4. Escolha

   Cada texto é gerido como um dado separado do código, com uma versão para cada um dos oito idiomas. Se faltar uma tradução ou uma opção do menu ultrapassar o espaço disponível, a construção do site é interrompida.

   Alternativas descartadas

   Textos inseridos diretamente nas páginas; CMS externo.

   Motivo

   Posso alterar uma frase ou acrescentar um idioma sem mexer no código. As verificações identificam traduções em falta e opções demasiado longas antes da publicação.

5. Escolha

   O ponto de partida foi um cartão de visita preto mate com folha de ouro. Transformei-o num cartão central preto e polido, com o ícone dourado embutido e uma luz vermelha que surge por trás do rebordo, como um estojo a abrir-se. Elegância, luxo e luxúria foram as palavras que orientaram o conceito. Pesquisei os sites mais premiados, inspirei-me na atmosfera de movimento e luz de ciaoenergy.com sem copiar o seu design e comparei o resultado com uma versão de teste criada com Lovable. Dessa comparação resultou a decisão de manter a luz vermelha de fundo. O vermelho funciona como efeito luminoso ou assinala a página ativa, enquanto todos os elementos clicáveis partilham o mesmo acabamento lacado.

   Alternativas descartadas

   Ícones brancos; dourado uniforme; mármore com veios, testado e depois eliminado; imagens nos cartões; navegação por pontos.

   Motivo

   Queria uma identidade visual reconhecível mesmo antes de alguém começar a ler. Mantive a coerência entre superfícies, luz e cores, atribuindo uma função precisa a cada elemento. Os testes ajudaram-me a perceber quais as soluções que reforçavam esta direção e quais tornavam o conjunto menos uniforme.

6. Escolha

   Para definir a experiência de utilização, consultei a Nielsen Norman Group, as orientações do W3C sobre menus e acessibilidade e as recomendações relativas a carrosséis, incluindo as referentes às setas por baixo dos cartões. Nas páginas interiores, por exemplo, as opções do menu permanecem visíveis no computador, porque os menus ocultos são utilizados com muito menos frequência.

   Alternativas descartadas

   Decisões baseadas exclusivamente no gosto pessoal.

   Motivo

   Queria que as decisões com impacto na navegação tivessem fundamento documentado. Utilizei as recomendações disponíveis para decidir como se acede aos conteúdos e como se interage com os elementos da interface.

Resultado

O site está online em oito idiomas. Os testes automáticos de acessibilidade não detetam erros em nenhuma página. Após a otimização, o peso da página inicial com 3D diminuiu 57%. Cada alteração desencadeia testes automáticos em todas as páginas, incluindo verificações para os tamanhos de ecrã do iPhone e do iPad.

Os testes não cobrem tudo, e é importante deixar isso claro. Testei manualmente o site em iPhone e iPad. Testei-o também com o Chrome e o Firefox; o Safari no Mac não foi testado de forma sistemática. Alguns testes em telemóveis e tablets são realizados em ambientes simulados. Para já, as traduções são automáticas; numa fase posterior, recorrerei a serviços profissionais de tradução.