Front-End Style Guide: um guia para a consistência da marca na web
-
Upload
joao-arruda -
Category
Documents
-
view
7 -
download
0
description
Transcript of Front-End Style Guide: um guia para a consistência da marca na web
Front-‐End Style Guide: um guia para a consistência da marca na web João Carlos Arruda
Embora o conceito de Front-‐End Style Guide seja ainda relativamente recente, estes podem, resumidamente, ser considerados como Guias de Estilo aplicados à web. À semelhança dos guias editoriais ou de marca, estes Guias de Estilo transmitem indicações sobre a correta utilização dos elementos que compõem o website, com a finalidade de manter uma comunicação consistente, independentemente do público ou da plataforma.
Contrariamente aos Manuais de Identidade Corporativa, dedicados à comunicação da marca no “mundo real” (estacionário, roll-‐ups, outdoors, entre outros), os Guias de Estilo para a web apresentam uma função semelhante para a presença da marca no mundo digital e em aplicações mobile, ao nível da interface do utilizador.
Estes Guias de Estilo variam a nível de complexidade mas podem ser implementados em qualquer projeto que envolva a criação e manutenção de um website, agilizando o processo de desenvolvimento e colaboração/comunicação entre equipas. À semelhança do que acontece com um designer gráfico que entrega um Manual de Identidade Corporativa no final do processo de criação da marca, o Front-‐End Style Guide final poderá ser entregue ao cliente como um guia de referência para futuros projetos que envolvam atualizaçoes ou alterações ao website.
Elementos relacionados com a tipografia, grelha, cores, navegação, botões e elementos de formulários serão geralmente transversais a todos os projetos — já elementos como carrosséis e galerias de imagens ou outros plug-‐ins de JavaScript mais específicos poderão estar presentes apenas em alguns casos.
Apresentam-‐se em seguida alguns bons exemplos de Front-‐End Style Guides, nomeadamente do serviço de envio de newsletters MailChimp e da cadeia de cafeterias Starbucks.
Fonte: Starbucks Style Guide
Fonte: MailChimp UX
No MailChimp cada elemento é acompanhado pela sua representação visual, assim como do excerto de código e classe associada. Por exemplo, para duplicar um botão basta copiar e colar o excerto de código correspondente no local pretendido. Caso seja necessário realizar uma alteração ao design do
botão basta editar o CSS e todos os botões com essa classe serão atualizados imediatamente.
A implementação de Front-‐End Style Guides no desenvolvimento de um projeto permite obter um impacto positivo na consistência da comunicação da marca, na produtividade dos colaboradores e na satisfação dos utilizadores do website/aplicação.
Há muito mais a dizer sobre os Front-‐End Style Guides. Por exemplo, quais as ações a tomar para a sua correta implementação numa organização com vista a que seja considerada uma ferramenta útil para todos os elementos da equipa.