Contexto
Finalizado
Freelance
Construção civil
Website
Blog
Institucional
Múltiplas páginas
Wireframes
Design UI
Style guide
Protótipo
Entregas
Design UI
Prototipagem
Guia de estilos
Projeto
Site institucional
Construção Civil
4 páginas
Período
Mai. - Jun. 2024
Rio Grande do Sul
Brasil
Ferramentas
Figma
Google Drive
Google Meet
Google Forms
Framer
A proposta
Fui procurada pela empresa com o objetivo de criar um site institucional que fortalecesse a presença online da marca, captando novos clientes. A cliente gostaria de inovar no ramo da construção civil trazendo serviços de análises, organização e planejamento de projetos mais acessíveis e eficazes, através da modalidade de execução remota, algo que ainda não é muito utilizado no setor.
O projeto deveria seguir uma estética clean e moderna, contando com 3 categorias de páginas, sendo elas: home, benefícios para cada segmento de clientes (Construtoras, Arquitetos e Empresas) e a página de artigos para o blog.
Wireframes
Com a proposta definida e os objetivos acertados, criei 3 variações de wireframes para a página inicial, responsável por captar a atenção do cliente e apresentar de forma sucinta a proposta da empresa e os serviços disponíveis.
A navegação escolhida foi a tradicional no topo da página com links e submenus que levariam às diferentes categorias de páginas e futuros artigos do blog.
Neste momento inicial a cliente optou por não fazer uma página dedicada ao blog, reservando as chamadas para às seções de CTA e galerias de artigos contidas tanto na página inicial, quanto nas páginas direcionadas a cada segmento de clientes, sendo apresentado, neste caso, um artigo relacionado ao ramo em questão,
Para a página de artigo, uma estrutura simples, porém que permitisse grande flexibilidade na disposição do conteúdo, respeitando as restrições de plataformas CMS já demonstrando os diferentes tamanhos e estilos disponíveis pela linguagem markdown (MD).
Design visual
Com a disposição geral dos conteúdos definida pelas wireframes, comecei a explorar estilos e paletas de cores.
A primeira proposta focava na ideia de trazer o mundo digital para o mundo predominantemente físico e presencial da construção civil. O design contava com muitas linhas e ângulos retos, numa paleta monocromática com o auxílio de gráficos externos em linhas finas que complementavam a estética.
A segunda proposta foi um design tradicional de landing page, com divisões bem definidas e grande foco na descrição dos serviços oferecidos em seções dedicadas. As demais páginas seguiam a linguagem e estética, com grande modularidade permitindo fácil adequação à mudanças e crescimento no futuro.
Design Proposto
O design proposto era altamente caracterizado e guiado pelo desejo da cliente de trazer o digital para o mundo da construção civil. Nesta veia, me inspirei em plantas baixas, croquis e demais documentações utilizadas por arquitetos e engenheiros, dois dos principais clientes da empresa.
As imagens utilizadas nesta proposta foram criadas e pertencem à Freepik e podem ser acessadas aqui.
O design contava com linhas finas e ângulos predominantemente retos, com apenas alguns cantos levemente arredondados para trazer uma sensação de acessibilidade, algo não tão bruto, mais moderno.
A página inicial contava com algumas estatísticas de projetos realizados, bem como curtas descrições que apresentavam de maneira direta a proposta da empresa. Logo abaixo, um CTA para realizar uma avaliação sem custo.
Cada segmento de clientes possuía uma chamada própria, com uma descrição específica aos seus casos de uso, acompanhada de gráficos arquitetônicos em linhas finas que complementavam a estética definida, quebrando o conteúdo textual.
O método BIM e Lean, processos computadorizados de análises, nem sempre conhecidos pelos profissionais do ramo, eram descritos em mais detalhes junto à uma chamada aos programas e sistemas parceiros.
Uma seção mais abaixo descrevia em mais detalhes as etapas e processos do método combinado utilizado pela empresa. Logo em seguida, mais uma CTA para avaliação gratuita.
As imagens e nomes dos sócios foram trocados nesta apresentação para manter sua privacidade.
À princípio, o site não contaria com uma página dedicada ao time da MOHNO, portanto adicionei uma seção para falar mais sobre os sócios fundadores da empresa e seus valores.
Abaixo, uma galeria de artigos do blog sobre projetos já realizados, estudos de caso que comprovavam a competência da empresa e eficácia de seus métodos, e uma faixa com logos de clientes, reforçando o princípio da prova social.
Por último, mas não menos importante, um CTA de newsletter para captar clientes e endereços de maneira mais despretensiosa. O newsletter em questão enviaria aos clientes artigos sobre dicas, curiosidades e estudos de caso.
Mobile
Apesar da quantidade e disposição das diferentes linhas que permeiam o design, a transição para breakpoints menores ocorre sem maiores dificuldades, sendo o plano de fundo chanfrado a maior restrição, mas ainda assim, alcançável.
Design escolhido
Apesar da apresentação e a direção do design proposto, a cliente optou por uma estética mais tradicional para o site, com seções bem definidas, maior conteúdo textual e menos elementos gráficos.
Home page
O Hero da homepage conta com a proposta da empresa bem definida e um grupo de elementos gráficos utilizados pela marca em suas postagens para mídias sociais.
Logo abaixo da dobra, as chamadas para cada segmento de clientes com uma breve descrição sobre o método aplicado aos seus casos de uso.
O footer conta com os dados de contato da empresa e um mapa embed para acesso rápido à aplicativos de navegação, caso desejado.
Ao lado, um formulário para contato que os clientes possam contar mais sobre seus projetos e processos, objetivando uma estimativa personalizada.
Benefícios por segmento de clientes
A segunda categoria de página conta com elementos descritivos de cada processo do método MOHNO aplicado aos usos de caso de seus clientes. Na primeira seção, algumas destaques para a proposta de valor, em seguida como o método se aplica em diferentes áreas dos projetos.
Mais abaixo na página, um destaque em cor contrastante chamando a atenção para serviços específicos e usos de caso em termos práticos aplicados a cada segmento. O elemento é apresentado em formato de lista, separado por áreas de atuação.
Blog
Para os artigos de blog, preparei uma página modular e versátil, mantendo a estética clean e moderna, porém alterando a navegação (invertendo suas cores, tornando-se branca) e mantendo o tom da página predominantemente claro, para contrastar e denotar a diferença entre os conteúdos fixos e dinâmicos.
Todo artigo contará, além do título, breve descrição, autor, data de publicação e imagem auxiliar, a identificação de sua categoria e, principalmente, um destaque para o tempo de leitura estimado, auxiliando na experiência do usuário.
O conteúdo da página conta com blocos dinâmicos aderentes às práticas de plataformas CMS, tornando possível a construção de conteúdos variados. À esquerda, um índice de conteúdo ligado às seções, servindo também de navegação rápida, bem como links de compartilhamento rápido.
Entre as seções de texto, um CTA para avaliação gratuita, e ao final, para assinar a Newsletter, além da galeria de artigos relacionados.
Página 404
A página 404 conta com a galeria de artigos, que compõem a maior parte do conteúdo disponibilizado no site, levando o usuário para outras páginas que possam ser de seu interesse e mantendo seu engajamento e retenção.
Mobile
A adaptação aos breakpoints menores é feita sem maiores intercorrências, por tratar-se de um design modular e estabelecido.
Navegação
Os elementos da página tiveram sua opacidade reduzida para destacar a navegação. A seção estudos recentes na navegação mobile apresenta os 3 últimos artigos, porém foi reduzida para facilitar a demonstração.
A navegação conta com um menu flutuante apresentando links para os segmentos atendidos pela empresa, em seguida, os artigos mais recentes do blog e um CTA para agendar uma avaliação gratuita.
Os elementos da página tiveram sua opacidade reduzida para destacar a navegação. A seção estudos recentes na navegação mobile apresenta os 3 últimos artigos, porém foi reduzida para facilitar a demonstração.
A navegação do blog, além das características padrão, conta também com um indicador de progresso de leitura.
Guia de Estilos
Tipografia
Cores
A cliente já possuía algumas cores utilizadas em suas postagens em mídias sociais, predominantemente monocromáticas com destaques em um tom de azul royal. Expandi a paleta para contemplar um alcance maior de tons e disponibilizei uma paleta de cinzas complementares.
Neutras
AAA 21.1
White
#FFFFFF
AAA 21:1
Black
#000000
Cinzas
AAA 7.49
25
#FCFCFD
AAA 7.35
50
#F9FAFB
AA 6.97
100
#F2F4F7
AA 6.49
200
#EAECF0
AA 5.21
300
#D0D5DD
2.58
400
#98A2B3
AA 4.95
500
#667085
AAA 7.65
600
#475467
AAA 10.41
700
#344054
AAA 16.02
800
#182230
AAA 17.79
900
#101828
AAA 18.84
950
#0C111D
Primária
AAA 7.36
25
#FAFAFA
AAA 7.05
50
#F5F5F5
AA 6.74
100
#F0F0F0
AA 5.82
200
#E0E0E0
AA 4.54
300
#C7C7C7
2.84
400
#999999
3.94
500
#808080
AA 5.74
600
#666666
AAA 8.45
700
#4D4D4D
AAA 12.31
800
#353531
AAA 16.88
900
#1D1D1B
AAA 19.21
950
#0E0F0D
Iconografia
Espaçamentos
Os espaçamentos, radius, paddings e margins seguem a grade de 8 pontos.
Protótipo
Apresento os dois protótipos criados para mostrar a minha visão ao cliente. Por conta das restrições de dimensões, algumas telas podem não apresentá-los corretamente, neste caso, clique no botão abaixo para acessar o protótipo correspondente em alta resolução.
Design proposto
Considerações finais
Ao todo, esse foi o projeto em que mais pude explorar minha criatividade. Gostei muito do resultado do design proposto, inspirado em documentos arquitetônicos. Para mim, o maior desafio foi traduzir o ambiente predominantemente físico e presencial da construção civil, para um meio digital e remoto.
Neste projeto também pude avançar minhas habilidades em UI e prototipação, visto que usei o Framer para criar o protótipo rápido do design proposto.
A cliente ficou muito satisfeita com o resultado e, apesar de ter gostado muito do design proposto, a decisão foi tomada em conjunto com os outros sócios e por isso não foi possível seguir com o proposto.
A entrega foi feita no final de junho e o site aguarda o deploy pelo desenvolvedor. Fiquei muito feliz com os resultados e espero poder contribuir novamente com o crescimento da plataforma no futuro.