Nosso cliente veio para nós com uma ideia de um site que mostrasse de forma simples e objetiva o seu papel como empresa, como a 4all é uma holding de tecnologia, o seu novo site deveria transparecer isso, de forma moderna e minimalista.
Seguindo essa ideia de minimalismo e modernismo, começamos pela sua nova home, onde ao invés de utilizar uma página com cabeçalho, a home se tornou o próprio menu do site, com páginas que já aparecem carregadas no momento em que você entra no site.
Primeiros passos
Começando com uma ideia bem concreta vinda da 4all, nós prosseguimos com o estudo de referências para nos sintonizarmos ainda mais com o cliente. Já pensando nas formas minimalistas e conversando com o time sobre as tecnologias envolvidas no projeto, nos debruçamos sobre ele, e com ideias modernas e objetivas, demos início ao que viria a ser hoje, o site oficial da 4all.
Design
Mirando no design minimalista, utilizamos de bastante tipografia, white space e formas limpas, para dar um toque mais contemporâneo para o site, além de ser esteticamente agradável para os olhos, o que torna a leitura de informações mais fácil e prazerosa.
O menu: ao entrar no site, o usuário é recebido com as páginas já abertas em forma de grid pela home, foi uma solicitação especial que o cliente fez para nós, eles queriam que o seu site oferecesse uma experiência diferenciada e inovadora.
Além disso, foram criadas animações de scroll, para deixar o site com mais fluidez, as animações dão um ar de cool, o que vai de encontro com o que a 4all gostaria de ver no seu site. Além disso, também foram criadas animações de carregamento de página.
Ferramentas que utilizamos
Mirando no design minimalista, utilizamos de bastante tipografia, white space e formas limpas, para dar um toque mais contemporâneo para o site, além de ser esteticamente agradável para os olhos, o que torna a leitura de informações mais fácil e prazerosa.
O menu: ao entrar no site, o usuário é recebido com as páginas já abertas em forma de grid pela home, foi uma solicitação especial que o cliente fez para nós, eles queriam que o seu site oferecesse uma experiência diferenciada e inovadora.
Além disso, foram criadas animações de scroll, para deixar o site com mais fluidez, as animações dão um ar de cool, o que vai de encontro com o que a 4all gostaria de ver no seu site. Além disso, também foram criadas animações de carregamento de página.
Sketch
Sketch é uma ferramenta de web design, que permite a criação de layouts de sites com fluidez, tendo também uma gama de plugins que permitem agilidade e facilidade na hora de transformar ideias em páginas com vida.
Anima App
Anima é um plugin para o Sketch desenvolvido para exportar layouts para a web. Esse plugin permite a prototipação, possibilitando a criação de interações reais em tela, transformando uma imagem estática em um site fluído.
Zeplin
Zeplin é uma ferramenta que permite a interação de designer e desenvolvedor. Ele transforma certos aspectos, como número de cor, tamanhos e espaçamentos, para linhas de código, permitindo agilidade no trabalho dos desenvolvedores.
Keyshape
O Keyshape combina ferramentas de desenho e animação de gráficos vetoriais em um único aplicativo. Utilizado para fazer a animação de carregamento entre telas no site da 4all, uma ferramenta fácil e rápida de usar.
Tecnologia na criação de conteúdo
O cliente 4all, tinha uma necessidade de uma maior liberdade quanto a publicação de seus conteúdos. Tendo em vista, a aplicação de layouts específicos e padrões que seriam utilizados durante a montagem das páginas, tanto do site em si como em seu blog.
Para tal, foi utilizado o novo editor de conteúdos do WordPress, o Gutenberg. Este possibilitando a adição de diversos componentes pré definidos em seu core, tornando assim a customização de uma página muito mais ampla e de forma rápida.
Conforme o cliente necessitou, foram desenvolvidos novos componentes para o editor Gutenberg. Utilizando todo o potencial desta tecnologia a favor da dinamicidade do site.
Componentes que permitiriam a aplicação de elementos de layout como carrossel de imagens, personalização de títulos de página e padronizações de cabeçalhos de texto. Além da customização da paleta de cores, possibilitando assim a personalização total de layout de acordo com o que o conteúdo demandar. Tornando o produto final, uma experiência mais agradável personalizada ao usuário.
Tecnologia no carregamento dos conteúdos
O site foi desenvolvido baseando-se em um conceito de carregamento de conteúdos sem que a página fosse recarregada. O que torna a navegação dos usuários muito mais limpa e amigável. Este com efeitos de carregamento com uma pequena animação com o logo da 4all.
Ainda, quanto à página inicial do site, foi utilizado um contexto de grid com exibição em tempo real de conteúdos de páginas tanto internas do site quanto de outras aplicações da família 4all. Desta forma transformando a sua Home em um grande menu de navegação entre sites.
Ferramentas que utilizamos
A construção do site demandou integrações com diversas plataformas de terceiros. Algumas delas com integrações para captação de leeds e dados, compartilhamento de conteúdos, além de integrações com servidores para armazenamento de mídias.
Zendesk
