Bom... como boa madrinha que sou, não podia deixar de desenvolver um site todo bonitão pro Gastro do Gal - uma empresa familiar, que produz e vende geléias, caponatas e conservas que respeitam a agricultura familiar.
A empresa segue caminhando e crescendo, o que é maravilhoso, portanto, uma boa vitrine para já direcionar os clientes e potencias lugares que queiram vender seus produtos é mais que necessário! Comecei fazendo um levantamento dos principais pilares e informações a conter no site.
Havia a necessidade de apresentar de forma convidativa o produto e não apenas informações sobre ele, sem que ambos competissem por atenção.
A cor principal da marca é o azul, mas ele deveria aparecer como destaque e não como cor de fundo, para tornar a cor ainda mais conhecida e linkada com o produto, mas só o azul não seria interessante para constar no site e trazer a harmonia necessária, portanto, algumas cores precisariam ser pensadas.
O site teria a única função de direcionar as pessoas a entrarem em contato direto com a marca, por direcionamento. Atualmente, para o whatsapp da empresa, mas o botão poderia ser modificado posteriormente para novo direcionamento e quem sabe até uma loja virtual.
Deveria conter informações sobre as feiras itinerantes que a empresa costuma participar, pois assim, ficaria mais fácil a encontrabilidade da marca e produtos.
Não há interesse em formulário de contato, pois o mesmo não seria gerenciado e todo e qualquer direcionamento, seja para compra e disponibilidade de produtos ou informações seria feito diretamente via whatsapp.
Não há interesse em criar um banco de dados, portanto, nenhuma informação seria solicitada.
A princípio a idéia era fazer uma landing page, já que haveria somente uma ação: Direcionar a pessoa usuária para o whatsapp. Embora os botões direcionassem somente para o whatsapp, alguns faziam link com pontos exclusivos de comunicação. Por exemplo:
Compre aqui ➙ Catálogo do Whatsapp
Entre em contato ➙ Diálogo direto com empresa
Na indicação de locais e dias das feiras seria de ótima usabilidade direcionar o user para a localização da mesma, assim, caso o usuário estivesse a caminho da feira, poderia facilitar o contato e o acesso apenas acessando o mapas. Portanto, houve a necessidade de incluir links para as localizações. No momento em que o Instagram se mostra uma potente vitrine de vendas e contato, seria especialmente interessante que houvesse um direcionamento rápido e fácil para esse acesso. Bem como, facebook e e-mail, pois ainda não sendo o canal principal de contato, atingia personas diferentes e tais páginas e canais já eram existentes.
Por fim, a idéia de landing page foi substituída por uma one page, com as devidas âncoras e links. Rascunhei algumas informações básicas para pensar a estrutura da página e gerou:
De posse da idéia estrutural do site, ou seja, o SITE MAP, era partir para as definições de cores e tipografia. A tipografia da marca já era bem definida, houve apenas a necessidade de decidir o tamanho e quais entrariam em cada parte específica do site. Quanto à cor, já tínhamos o azul, como a cor principal da marca e ainda tínhamos o off-white que era o utilizado no fundo da etiqueta, portanto, seguir o padrão de cores no mesmo formato utilizado na etiqueta, ajudaria o princípio de reconhecimento por parte das pessoas usuárias. Mas, por outro lado, deixar o site somente à cargo dessas cores, não era tão interessante, e uma nova cor de destaque se fazia necessário. Pensando então, em alguns princípios fundamentais da empresa, como: utilizar alimentos de agricultura familiar, respeitar safra e período de alimentos e portanto, todo respeito à terra, busquei pensar em uma cor que trouxesse harmonia e não fosse tão forte quanto o verde (que traria a pegada eco), mas brigaria com o azul principal da marca em um fundo offwhite. E o ideal seria que indicasse ainda, a ligação com a terra, luz, água e complementasse a hamornia das cores. Pensei então numa cor que remetesse à junção VERDE (alimentos colhidos) + AMARELO (sol) + MARROM (troncos e terra) para não brigar e destacar o AZUL da marca. Havia ainda a cor COBRE (por vezes oscila para dourado) que costuma ser a cor da tampa do vidro das embalagens. Encontrei no livro de Harmonia Cromática as cores que se associavam à essas características e de quebra, transmitem a imagem e sensação de glamour. Pois esses empreendedores tem a maior parte do seu público da classe A/B, portanto, atender visualmente esse público, torna a conversa do site ainda mais direcionada.
Daí era só definir saturação e luminância correta, ao fim, o padrão de cores para o site ficou:
E o layout guide, foi definido da seguinte forma:
Sabendo que o site teria botões direcionadores e que estes, poderiam ser modificados, foi feito, um componente no figma para testar a sua utilização e definir padrões de cores.
A grande facilidade de poder componentizar o botão, é facilitar a visualização das possibilidades de alternância entre botões, como: com ou sem ícone, primários ou secundários, ativos ou inativos, etc...
Pois teremos um padrão definido de utilização e ainda podemos saber como se portará a página num caminho não esperado: "caminho do erro!"
Daí para facilitar a montagem da estrutura do site, componentizei alguns padrões de alinhamento de títulos, imagens e textos. Assim, bastaria arrastar o componente para ter uma visualização prévia de um esqueleto, e posteriormente, ele poderia ser modificado conforme o conteúdo e necessidade, tirando o vínculo da estrutura com o componente inicial.
O Header e Footer também foi feito como componente, para tornar mais fácil qualquer alteração necessária.
Daí, era só partir pra brincadeira de lego.
Montar, montar, aparar, pensar... Para a imagem inicial, achei interessante demonstrar a imagem do produto com igual teor de peso e interesse que a marca e sua saudação inicial. Para que a imagem tivesse a idéia de estar recebendo, abrindo uma porta, descortinando aos olhos do usuário. Assim, achei que formas orgânicas trariam essa pessoalidade e diminuiriam a seriedade do padrão linear e reto, bem como a identificação masculina. E sem ser completamente redondo ou arredondado, pois não teria um padrão completamente descontraído e feminino. O objetivo era criar uma forma que remetesse à junção dessas características, assim, precisei fazer a forma com a ferramenta caneta em cima de um padrão quadrado.
E para dar a impressão de "abrimos nossas portas à você" as imagens foram posicionadas como se tivessem sido partidas e abertas, com a informação de apresentação de quem recebe um novo cliente à sua loja.
E ao final, assim ficou o protótipo do site:
Navegue no protótipo DESKTOP AQUI
Navegue no protótipo MOBILE AQUI