Front-End

Style Guide: um guia para a consistncia da

marca na web
Joo 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. semelhana dos guias editoriais ou de marca, estes Guias
de Estilo transmitem indicaes sobre a correta utilizao dos elementos que
compem o website, com a finalidade de manter uma comunicao
consistente, independentemente do pblico ou da plataforma.
Contrariamente aos Manuais de Identidade Corporativa, dedicados
comunicao da marca no mundo real (estacionrio, roll-ups, outdoors,
entre outros), os Guias de Estilo para a web apresentam uma funo
semelhante para a presena da marca no mundo digital e em aplicaes
mobile, ao nvel da interface do utilizador.
Estes Guias de Estilo variam a nvel de complexidade mas podem ser
implementados em qualquer projeto que envolva a criao e manuteno de
um website, agilizando o processo de desenvolvimento e
colaborao/comunicao entre equipas. semelhana do que acontece com
um designer grfico que entrega um Manual de Identidade Corporativa no
final do processo de criao da marca, o Front-End Style Guide final poder ser
entregue ao cliente como um guia de referncia para futuros projetos que
envolvam atualizaoes ou alteraes ao website.
Elementos relacionados com a tipografia, grelha, cores, navegao, botes e
elementos de formulrios sero geralmente transversais a todos os projetos
j elementos como carrossis e galerias de imagens ou outros plug-ins de
JavaScript mais especficos podero estar presentes apenas em alguns casos.
Apresentam-se em seguida alguns bons exemplos de Front-End Style Guides,
nomeadamente do servio 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 representao visual,
assim como do excerto de cdigo e classe associada. Por exemplo, para
duplicar um boto basta copiar e colar o excerto de cdigo correspondente no
local pretendido. Caso seja necessrio realizar uma alterao ao design do

boto basta editar o CSS e todos os botes com essa classe sero atualizados
imediatamente.
A implementao de Front-End Style Guides no desenvolvimento de um
projeto permite obter um impacto positivo na consistncia da comunicao
da marca, na produtividade dos colaboradores e na satisfao dos utilizadores
do website/aplicao.

H muito mais a dizer sobre os Front-End Style Guides. Por exemplo, quais as
aes a tomar para a sua correta implementao numa organizao com vista
a que seja considerada uma ferramenta til para todos os elementos da
equipa.