Felipe Gionavaz
Felipe Giovanaz é um advogado especializado em Direito do Apostador, Direito do Consumidor e Direito Civil. Atua no Paraná e em todo o Brasil, ajudando pessoas a recuperar dinheiro perdido em apostas online, defender seus direitos contra plataformas digitais e resolver conflitos jurídicos civis e contratuais.
Felipe Gionavaz
Felipe Giovanaz é um advogado especializado em Direito do Apostador, Direito do Consumidor e Direito Civil. Atua no Paraná e em todo o Brasil, ajudando pessoas a recuperar dinheiro perdido em apostas online, defender seus direitos contra plataformas digitais e resolver conflitos jurídicos civis e contratuais.
O desafio
Sem nunca ter tido um site próprio, o advogado Felipe Giovanaz buscava estabelecer sua presença digital e reforçar sua credibilidade em um nicho jurídico específico: o direito do apostador. Fui contratada para desenvolver o design da interface (UI), com o conteúdo já definido por um profissional de SEO e Copywriting. O desafio foi traduzir visualmente a identidade e o posicionamento do advogado, criando uma interface moderna, confiável e acessível, que equilibrasse a autoridade técnica do direito com a proximidade humana que marca sua atuação.
O desafio
Sem nunca ter tido um site próprio, o advogado Felipe Giovanaz buscava estabelecer sua presença digital e reforçar sua credibilidade em um nicho jurídico específico: o direito do apostador. Fui contratada para desenvolver o design da interface (UI), com o conteúdo já definido por um profissional de SEO e Copywriting. O desafio foi traduzir visualmente a identidade e o posicionamento do advogado, criando uma interface moderna, confiável e acessível, que equilibrasse a autoridade técnica do direito com a proximidade humana que marca sua atuação.
Análise
Após analisar as referências enviadas, identifiquei os elementos visuais que eram mais relevantes para o cliente e o que ele buscava transmitir com o site. Para complementar, realizei uma pesquisa dentro do nicho jurídico de apostas online, buscando entender quais abordagens visuais faziam mais sentido para o público-alvo.
A partir dessas análises, concluí que a interface deveria seguir uma linha limpa e clara, considerando que muitos visitantes chegam ao site em um momento de vulnerabilidade. Assim, priorizei um design que facilitasse o acesso rápido, claro e objetivo às informações, transmitindo confiança e acolhimento desde o primeiro contato.
Análise
Após analisar as referências enviadas, identifiquei os elementos visuais que eram mais relevantes para o cliente e o que ele buscava transmitir com o site. Para complementar, realizei uma pesquisa dentro do nicho jurídico de apostas online, buscando entender quais abordagens visuais faziam mais sentido para o público-alvo.
A partir dessas análises, concluí que a interface deveria seguir uma linha limpa e clara, considerando que muitos visitantes chegam ao site em um momento de vulnerabilidade. Assim, priorizei um design que facilitasse o acesso rápido, claro e objetivo às informações, transmitindo confiança e acolhimento desde o primeiro contato.
Wireframe
Com base nas informações do conteúdo e nas referências analisadas, desenvolvi o wireframe com foco em organizar a navegação e estruturar as informações de forma clara e intuitiva.
O objetivo foi criar uma hierarquia visual que conduzisse o usuário naturalmente pelos principais pontos de interesse: quem é o advogado, suas áreas de atuação e como entrar em contato.
As seções foram estruturadas em blocos bem definidos, criando uma sensação de organização e fluidez visual, além de facilitar a leitura e a navegação. A proposta foi evitar excessos e priorizar a funcionalidade e a clareza, garantindo que cada parte do site tivesse um propósito claro dentro da jornada do usuário. Esse planejamento serviu como base sólida para o design final, assegurando consistência entre conteúdo, experiência e objetivo do projeto.
Wireframe
Com base nas informações do conteúdo e nas referências analisadas, desenvolvi o wireframe com foco em organizar a navegação e estruturar as informações de forma clara e intuitiva.
O objetivo foi criar uma hierarquia visual que conduzisse o usuário naturalmente pelos principais pontos de interesse: quem é o advogado, suas áreas de atuação e como entrar em contato.
As seções foram estruturadas em blocos bem definidos, criando uma sensação de organização e fluidez visual, além de facilitar a leitura e a navegação. A proposta foi evitar excessos e priorizar a funcionalidade e a clareza, garantindo que cada parte do site tivesse um propósito claro dentro da jornada do usuário. Esse planejamento serviu como base sólida para o design final, assegurando consistência entre conteúdo, experiência e objetivo do projeto.
Acesse o protótipo navegável acessando o link abaixo:
Acesse o protótipo navegável acessando o link abaixo:
Design System
Para a criação dos design tokens, estabeleci uma base visual sólida e coerente com a identidade do advogado. A paleta de cores neutras em tons de cinza foi escolhida como base do sistema, transmitindo seriedade, confiança e clareza, valores essenciais para o contexto jurídico. A cor principal da marca foi utilizada de forma estratégica para destacar elementos-chave, como botões e chamadas de ação, garantindo contraste e reconhecimento visual.
Além disso, defini cores de apoio para estados de sucesso, erro e atenção, mantendo a consistência visual e facilitando a compreensão imediata das interações pelo usuário.
Design System
Para a criação dos design tokens, estabeleci uma base visual sólida e coerente com a identidade do advogado. A paleta de cores neutras em tons de cinza foi escolhida como base do sistema, transmitindo seriedade, confiança e clareza, valores essenciais para o contexto jurídico. A cor principal da marca foi utilizada de forma estratégica para destacar elementos-chave, como botões e chamadas de ação, garantindo contraste e reconhecimento visual.
Além disso, defini cores de apoio para estados de sucesso, erro e atenção, mantendo a consistência visual e facilitando a compreensão imediata das interações pelo usuário.
Na tipografia, foram elencados tamanhos e pesos específicos para cada estilo de texto, assegurando legibilidade, ritmo visual e hierarquia clara.
Por fim, os ícones foram selecionados seguindo a mesma linha minimalista e funcional do restante do design, reforçando a identidade visual e contribuindo para uma experiência mais intuitiva e acessível.
Na tipografia, foram elencados tamanhos e pesos específicos para cada estilo de texto, assegurando legibilidade, ritmo visual e hierarquia clara.
Por fim, os ícones foram selecionados seguindo a mesma linha minimalista e funcional do restante do design, reforçando a identidade visual e contribuindo para uma experiência mais intuitiva e acessível.
Componentização
Para o design do site, desenvolvi um sistema de componentes reutilizáveis, garantindo consistência visual e eficiência na criação das telas. Botões, formulários, cards, menus e outros elementos foram pensados para manter hierarquia clara, acessibilidade e usabilidade, permitindo que cada seção do site seja facilmente adaptável e escalável sem perder coesão estética.
Componentização
Para o design do site, desenvolvi um sistema de componentes reutilizáveis, garantindo consistência visual e eficiência na criação das telas. Botões, formulários, cards, menus e outros elementos foram pensados para manter hierarquia clara, acessibilidade e usabilidade, permitindo que cada seção do site seja facilmente adaptável e escalável sem perder coesão estética.
Responsividade
A adaptação do projeto para mobile foi pensada desde o início, garantindo que a experiência permanecesse clara, fluida e intuitiva em telas menores. Durante essa etapa, reorganizei blocos de conteúdo, priorizei informações essenciais e ajustei componentes para manter legibilidade, espaçamento adequado e navegação simples no celular.
Além disso, refinei hierarquias visuais, apliquei breakpoints específicos do Wix Editor e otimizei elementos interativos para toque, criando uma experiência consistente entre desktop e mobile.
Responsividade
A adaptação do projeto para mobile foi pensada desde o início, garantindo que a experiência permanecesse clara, fluida e intuitiva em telas menores. Durante essa etapa, reorganizei blocos de conteúdo, priorizei informações essenciais e ajustei componentes para manter legibilidade, espaçamento adequado e navegação simples no celular.
Além disso, refinei hierarquias visuais, apliquei breakpoints específicos do Wix Editor e otimizei elementos interativos para toque, criando uma experiência consistente entre desktop e mobile.
Implementação
A etapa de implementação foi realizada no Wix Editor, conforme solicitado pelo cliente.
A partir do design aprovado, adaptei toda a interface para o ambiente do Wix, ajustando componentes, responsividade e microinterações dentro das possibilidades da plataforma.
Durante essa migração, priorizei manter a fidelidade visual do projeto, otimizar o carregamento das páginas e organizar o conteúdo de forma que o cliente pudesse atualizar o site no futuro sem depender de código.
O resultado é um site funcional, consistente com o layout original e totalmente alinhado às necessidades do cliente.
Implementação
A etapa de implementação foi realizada no Wix Editor, conforme solicitado pelo cliente.
A partir do design aprovado, adaptei toda a interface para o ambiente do Wix, ajustando componentes, responsividade e microinterações dentro das possibilidades da plataforma.
Durante essa migração, priorizei manter a fidelidade visual do projeto, otimizar o carregamento das páginas e organizar o conteúdo de forma que o cliente pudesse atualizar o site no futuro sem depender de código.
O resultado é um site funcional, consistente com o layout original e totalmente alinhado às necessidades do cliente.
Site criado e desenvolvido por Jéssica Bortolan para a agência Turbo Design (somente foi desenvolvida a parte de design, o conteúdo foi enviado previamente pela a empresa).