Se você comparar o Catarse atual com a versão Beta em desenvolvimento, vai notar diferenças bem claras com relação aos aspectos visuais. A nova roupa é o resultado do trabalho de reestruturação da plataforma, e não o ponto de partida. Começamos a reforma pois o Catarse cresceu sem um sistema construtivo sólido nem padrões de usabilidade, o que até agora deixava lenta a evolução do site. Até agora. Neste post conto como fizemos esse trabalho e abro o resultado para vocês copiarem, replicarem e se inspirarem.

A interface é o meio pelo qual o usuário interage com as linhas de código escritas para um programa ou sistema. Por quatro anos, a interface do Catarse foi construída por diferentes designers em diferentes momentos sem critérios claros estabelecidos. Esse quebra-cabeça de estilos fazia com que cada alteração na plataforma se transformasse em um novo trabalho a ser encarado do zero e com o desafio de dialogar com diversas soluções adotadas até então.

Esse fluxo lento ia contra toda a filosofia de startup enxuta e ágil que procuramos seguir no Catarse. Para resolver o problema e acelerar nosso desenvolvimento, decidimos criar um guia de estilos e classes que orientasse a construção de uma interface que respeitasse o sistema por trás dela.

Inspirados em frameworks como Bootstrap, Foundation, UIkit e Bourbon, desenvolvemos padrões de design para tipografias, cores, botões, navegação, formulários, feedback e ícones. Assim, sempre que um designer da equipe, ou qualquer um que venha a fazer parte dela, precisar mexer numa página ou criar uma nova, ele já parte de um ponto além, uma vez que os elementos já estão definidos.

 

Para conquistar ainda mais agilidade na evolução da plataforma, aproximamos design e desenvolvimento ao utilizar o Webflow, uma plataforma online de construção de websites em que o designer mexe direto no código.

Hoje, não temos mais Photoshop, Fireworks, Illustrator ou qualquer outro software na criação das telas que serão codificadas. Tudo é feito direto no Webflow. Com esse fluxo, ganhamos um “espelho” do Catarse, ideal para validação de rascunhos e estudos para as novas páginas. Depois de validada, fica fácil implementar a nova página, pois o Webflow gera a base do código que usamos na plataforma.

E o melhor disso tudo? O guia de estilos e o espelho do Catarse estão aberto, free, open-source, livre, ou como você quiser chamar. Se estiver na gana de mexer, usar como referência, aprender ou só bisbilhotar, basta acessar esse link! Esse processo está em constante modificação, portanto, espere um projeto em beta eterno.

A estética do Catarse pode não ter sido o motor da mudança, mas é um aspecto super importante e com o qual sempre nos preocupamos desde início. Ao longo da reforma, aproveitamos para mudar um pouco o visual não só do site, como de nossos materiais de comunicação também. Essa é talvez a camada mais fina do trabalho de design, nossa pele, nossa roupa. Eu queria usar esse post para contar um pouco sobre as camadas mais escondidas. Sobre a roupa, eu adoraria ouvir a opinião de vocês aqui nos comentários ;)