Faceture by Phil Cuttance for the

Stepney Green Design Collection.

BLOCOS DE ESTILO

Processo de design visual de pginas de internet para clientes e
para uma internet gil.
Por Samantha Warren

O QUE SO BLOCOS DE ESTILO?

Blocos de estilo so um produto de design constitudo de fontes, cores e
elementos da interface que comunicam a essncia de uma marca visual para a
web.

Eles ajudam a formar uma linguagem visual comum entre os designers e
os interessados e proporcionam um catalisador para discusses em torno das
preferncias e objetivos do cliente.

Blocos de estilo so semelhantes aos chips de pintura e as amostras de
tecido que um designer de interiores apresenta para obter aprovao antes de
projetar um quarto.

Um designer de interiores no projeta trs salas diferentes para um cliente
na reunio inicial, ento por que os web designers tm que fazer o projeto de trs
maquetes diferentes?

Apresente aos clientes muitas opes de

interface, sem fazer o investimento de
criar vrias maquetes de Photoshop.

QUANDO USAR BLOCOS DE ESTILO?


Blocos de estilo so para quando um quadro de condio (moodboard)
demasiado vago e uma amostra demasiado literal.

Os blocos de estilo estabelecem uma conexo direta com elementos de
interface reais sem definir layout. Eles funcionam bem para os clientes que
estabeleceram marcas e precisam deles para traduzir sem problemas para a
web. Considerando que a palavra condio freqentemente associada com
marca e design de identidade, a palavra estilo foi escolhida para espelhar
folhas de estilo em cascata e reforar que os blocos de estilo so especficos
para Web design.

Escala de fidelidade de entrega de design visual

COMO USAR BLOCOS DE ESTILO?

Fazer dos blocos de estilo uma ferramenta do seu processo de design
para ajudar na comunicao com sua equipe e o cliente.

Assim como eu fao:

1 - Ouvir. Parece simples, mas to fcil sair do porto dizendo a seu cliente

o que voc acha que eles precisam. Seus clientes tm uma quantidade incalculvel de informaes, tudo que voc precisa fazer ouvir.
Tenha uma reunio inicial de design.

Os designers devem estar em todas as reunies. Esteja preparado. Faa
os interessados completar uma pesquisa antes da reunio ou tenha todos juntos
a responder perguntas.
Faa perguntas.

Se voc dar-lhes para as partes interessadas antes de uma reunio ou
durante a mesma, crie uma pesquisa de perguntas feitas para elas. Em seguida
distribua a pesquisa com os interessados a
preench-la, agregue as respostas.

2 - Interpretar. Agregar adjetivos do processo de resposta, identificar temas e semelhanas de classificao.

Decompor o feedback do cliente.

Interpretar como traduzir os adjetivos e os temas que voc descobriu em
princpios de design, tais como equilbrio e nfase. Isso vai ajud-lo a fazer escolhas sobre como usar os elementos de design. O objetivo final dar corretas e
sutis pistas visuais que guiam as suposies subconscientes humanas para com os
adjetivos desejados e temas.
Elementos de design:
Linha - Cor - Forma - Modelo - Padro - Espao - Textura.
Princpios de design:
Unidade - Harmonia - Equilibrio - Ritmo - nfase.

3 - Definir uma linguagem visual. Este o processo de composio do

bloco de estilo. Determina temas dos adjetivos agregados e comea a combin-los
com estilos. Os blocos de estilo do ao cliente um ponto de referncia para determinar se vocs esto na mesma pgina.

4 - Iterar. Fazer mudanas no estilo fora do contexto do layout leva menos

tempo e permite que voc trabalhe mais rpido. Apresentando vrios blocos lhe
d informaes para trabalhar com isso e pode influenciar a evoluo de um bloco.
Natureza humana.

da natureza humana combinar opes, combinando blocos de estilo promove um processo que permite uma evoluo de elementos estilsticos, sem comprometer os objetivos do projeto. A iterao de blocos de estilo uma maneira
mais fcil e mais direta de refino de um design visual, tornando-os uma tima
opo para chegar ao objetivo final mais rpido.
Use blocos de estilo quando voc precisar do seguinte:
Discusso sobre Linguagem Visual
Revises mais rpidas
Mudanas que precisam acontecer fora ou em paralelo com UX (Experincia do
Usurio)

EXEMPLOS

BLOCO 1

BLOCO 2

BLOCO 3

SITE

Site da campanha 2012 do The Examiner de Washington

Projeto gil e Blocos de Estilo

Ethan Marcotte refere-se a composies estticas durante o processo
de design gil como um catlogo de suposies. Os blocos de estilo so
o complemento perfeito para o catlogo, seja no lugar de composies ou
para reforar temas visuais. Os blocos de estilo no implicam dimenses
nem dispositivo, s que o projeto vai ser digital.

Alm de blocos de estilo, as Guias de componentes de estilo podem
ajudar a levar um estilo particular atravs de uma funcionalidade especfica, sem projetar pginas completas da web. Estas guias so muito teis
para projetos geis atravs de um grande nmero de dispositivos e para a
implementao de sistemas de projeto de um plataforma CMS.
Yesenia Perez-Cruz tem um timo artigo sobre Guias de componentes de
estilo em http://cognition.happycog.com/article/sweet-systems.

Desenvolver um sistema de desenho em vez de projetar

pginas de largura fixa.

Manuteno e Assistncia Tcnica em equipamentos mdicos,

fisioterapia, esttica.
Um mundo de servios eficientes para voc.
http://www.eletromedicinaoeste.com/