Descrição do Problema
1. Visão Geral
O site pessoal de Nina Silva, executiva de tecnologia e fundadora do Movimento Black Money, serve como um hub de autoridade. O desafio do design é equilibrar a imagem de uma líder de pensamento com a prestação de serviços corporativos e educação tecnológica.
Atuei no desenvolvimento completo do site institucional em WordPress, transformando um layout concebido no Figma em uma aplicação web funcional, responsiva e fiel ao protótipo original. Garanti consistência visual em tipografia, cores, espaçamentos e hierarquia de informação, além da adaptação para diferentes dispositivos.
Fui responsável pela configuração do ambiente de hospedagem, incluindo preparação do servidor, criação de banco de dados, instalação e ajustes do WordPress. Também realizei a configuração do certificado SSL (HTTPS), assegurando navegação segura e contribuindo para boas práticas de SEO.
Adicionalmente, implementei redirecionamento de domínios (.com e .com.br), garantindo que ambos apontem para o mesmo servidor e versão oficial do site, evitando duplicidade de conteúdo e melhorando a experiência do usuário.
2. Elementos de Interação e UX
Hierarquia Visual e Identidade
O uso de um esquema de cores de alto contraste (preto, dourado e branco) estabelece imediatamente um tom de “Tecnologia Premium” e “Excelência Negra”.
Interação: A hierarquia é clara; o usuário é guiado dos títulos de impacto (“Tecnologia para o Impacto Social”) diretamente para os CTAs (Call to Action).
Componentes de Navegação (Affordance)
Menu Sticky/Transparente: O menu superior mantém o acesso rápido às seções de “Sobre”, “Blog” e “Serviços”, garantindo que a navegação seja intuitiva em qualquer ponto da rolagem.
Botões de Ação (CTAs): Os botões utilizam um preenchimento sólido em tom de cobre/dourado que se destaca sobre o fundo escuro, indicando claramente os pontos de conversão para contratação ou contato.
Microinterações e Feedback Visual
Elementos Geométricos Flutuantes: O site utiliza grafismos que remetem a circuitos e padrões ancestrais africanos. Esses elementos não são apenas estáticos; eles criam uma camada de profundidade (parallax) que reage à rolagem do usuário, tornando a experiência menos linear e mais dinâmica.
Hover States: Links e botões apresentam mudanças sutis de estado ao passar o mouse, fornecendo feedback imediato de que aquele elemento é clicável (interatividade).
Prova Social Interativa
Mural de Projetos e Prêmios: A seção de conquistas utiliza uma grade (grid) organizada que facilita a leitura rápida (scanning). O uso de ícones de troféus ao lado do texto ajuda na carga cognitiva, permitindo que o usuário entenda o valor da seção antes mesmo de ler o conteúdo.
Integração de Mídia: A seção “O que posso fazer por você?” utiliza imagens de alta qualidade que contextualizam os serviços (palestras, consultoria), humanizando a interface e gerando conexão emocional.
3. Design Responsivo e Acessibilidade
O layout foi estruturado em blocos modulares.
Mobile-First: Os elementos de texto e imagens são empilhados de forma fluida, garantindo que a leitura em dispositivos móveis mantenha a mesma força visual do desktop.
Contraste: O alto contraste entre o fundo e a tipografia (sans-serif moderna) garante uma boa legibilidade para diversos perfis de usuários.
Botão CTA - Chamada de ação
Elementos com consistência e padronização
Add Your Tooltip Text Here
Padronização nos respiros da página
Micro Blog
O trabalho contemplou ainda a estruturação do conteúdo no CMS, facilitando a manutenção, além de ajustes de performance, usabilidade e estabilidade, resultando em um site seguro, otimizado e alinhado às boas práticas de desenvolvimento web moderno.