Petra - Criação de website responsivo

Empresa

Petra - Segurança e Serviços

Função

Designer

Plataforma

Site

Ano

2023

Introdução

A Petra é uma empresa especializada em terceirização de serviços como segurança, portaria, controle de acesso, jardinagem, zeladoria e limpeza de condomínios. O cliente me procurou com a necessidade de criar uma marca do zero e desenvolver um site institucional que transmitisse profissionalismo e confiança para potenciais clientes.

O desafio

O projeto começou do zero, e meu papel envolveu todas as etapas do design e desenvolvimento do produto digital, desde o entendimento do negócio até a entrega final do site publicado. O maior desafio foi criar uma identidade que representasse solidez e profissionalismo e, ao mesmo tempo, garantir que o site oferecesse uma experiência fluida e intuitiva para quem busca os serviços da empresa.

O processo

1. Entendimento e alinhamento

Realizei reuniões com o cliente para entender os objetivos da empresa, o público-alvo, os serviços oferecidos e os diferenciais da marca. Esses encontros foram fundamentais para alinhar expectativas e definir o escopo completo do projeto, que envolvia:

  • Criação da identidade visual

  • Aplicações da marca em uniformes e materiais físicos

  • Desenvolvimento de um site responsivo

Ferramentas utilizadas: Google Meet (Reuniões), Miro (Brainstorming).

2. Criação da identidade visual

Com as diretrizes claras, iniciei a construção da identidade visual da Petra, focando em transmitir confiança, organização e presença. A criação envolveu:

  • Paleta de cores e definição tipográfica

  • Criação do logotipo

  • Aplicações da marca em uniformes e adesivos para veículos

Esse processo incluiu validações com o cliente em ciclos de interação até a versão final da marca ser aprovada.

Ferramentas: Adobe Illustrator (logo) e Photoshop (mockups e aplicações).

Cores

#E5B318

#3C3C3C

#F5F5F6

Logo

Aplicações

A Solução💡

Solução

3. Pesquisa e prototipagem com foco em UX

Antes de iniciar o design do site, conduzi uma etapa de benchmarking, analisando sites de concorrentes diretos no setor de terceirização de serviços. Essa pesquisa foi essencial para compreender padrões de mercado, identificar boas práticas e mapear oportunidades de diferenciação.

Com base nesse diagnóstico, iniciei o processo de design com foco em oferecer a melhor experiência possível para o usuário final, equilibrando clareza, fluidez e identidade visual.

As etapas dessa fase foram:

  • Definição do style guide: com base na identidade criada

  • Arquitetura da informação: estruturação das páginas e hierarquia de navegação com apoio do benchmarking

  • Criação de wireframes: para mapear visualmente a distribuição de conteúdo

  • Protótipo navegável em alta fidelidade: no Figma

Na etapa de validação, o cliente navegou pelo protótipo, o que facilitou a visualização do produto final. Esse processo contribuiu para ajustes pontuais e aumentou a segurança do cliente em relação ao resultado final.

Wireframes

4. Desenvolvimento e publicação

Após a validação do protótipo, fui responsável por transformar a interface em um site funcional. As etapas incluíram:

  • Desenvolvimento com WordPress utilizando o plugin ElementorPro

  • Adaptação para dispositivos móveis (desktop, tablet e smartphone)

  • Hospedagem com a plataforma Hostinger

  • Testes de usabilidade e performance

Ferramentas: WordPress, ElementorPro, Hostinger

Protótipo em alta fidelidade

Resultado

O projeto resultou em uma marca profissional e um site moderno, responsivo e bem estruturado, totalmente alinhado com os objetivos do cliente. A Petra agora conta com uma presença digital sólida, que transmite profissionalismo e oferece uma navegação fluida para usuários que buscam informações sobre os serviços.

O cliente ficou extremamente satisfeito com o resultado e valorizou a condução estratégica e completa do projeto, desde o entendimento do problema até a entrega final com o site no ar.