O LAYOUT e técnicas visuais elementates

Andrea Hecksher

{ Não há palavra melhor do que layout para sintetizar a ideia, a forma, o arranjo ou composição de uma página.

(Allen Hurlburt)

Layout

• Todos os elementos de um layout serão lidos pelo receptor – inclusive as imagens. • Para que isso aconteça de forma satisfatória, é importante ter conhecimento de algumas técnicas visuais. São elas:

– Pregnância da forma – Hierarquia – Equilíbrio – Contraste – Profusão – Grid

Técnicas Visuais e Gestalt

Pregnância

Na teoria da percepção da Gestalt, a lei da pregnância (Prägnanz) define a organização psicológica como sendo tão “boa” (regular, simétrica, simples) quanto o permitam as condições vigentes. {

(DONDIS, 1997: 42)

Get there faster. “ ”

Ano: 2010 Cliente: Renault Agência: Publicis Frankfurt, Germany

http://adsoftheworld.com/media/print/renault_pisa_paris

Ano: 2010 Cliente: Bosch Agência: DDB, Düsseldorf, Alemanha

http://adsoftheworld.com/media/print/bosch_veggi_fear_pepper

http://adsoftheworld.com/media/print/the_times_of_india_the_identity_of_young_chennai

The Identity of Young Chennai. “ ”

Ano: 2009 Cliente: The Times of India Agência: JWT, Chennai, Índia

http://adsoftheworld.com/media/print/fedex_usabrazil

Ano: 2010 Cliente: FedEx Agência: DDB, Brasil

O Diretor de arte precisa tornar evidente a hierarquia entre os elementos no layout. Isso significa que é preciso estabelecer visualmente uma ordem de importância para cada unidade: a importância da imagem, a importância do título, a importância do texto corrido, etc.

Hierarquia

Ano: 2011 Cliente: Huawei Agência: ArnoldFurnace, Sydney, Austrália

Smart Phones For Smart Cookies “ ”

http://adsoftheworld.com/media/print/huawei_ideos_x1_lets_stalk

http://wanphing.wordpress.com/2011/05/28/diet-pepsi-skinny-can/

the new skinny can “ ”

Ano: 2011 Cliente: Pepsi Agência: TBWA\Chiat\Day, Los Angeles, EUA

http://adsoftheworld.com/media/print/breast_cancer_foundation_spot

Ano: 2011 Cliente: Breast Cancer Foundation Agência: DDB, Cingapura

Are you obsessed with the right things?

“ ”

Equilíbrio Simétrico

• A forma mais evidente e clássica de equilíbrio é a simetria: • Essa técnica de design é puramente lógica. • A composição simétrica pode induzir às seguintes percepções: estática, monótona, racional, séria, simples e serena.

É uma formulação visual totalmente resolvida, em que cada unidade situada de um lado da linha central é rigorosamente repetida do outro lado.

(Donis A. Dondis)

{

http://adsoftheworld.com/media/print/natour_nyc

Ano: 2012 Cliente: Natour Agência: Gitam BBDO, Israel

Organized tours to hectic destinations “ ”

Ano: 2011 Cliente: McDonald’s Agência: DDB Tribal, Viena, Áustria

http://adsoftheworld.com/media/print/mcdonalds_mccafe_ampm_girl_1

• Diferentemente do que ocorre no layout simétrico, na assimetria infinitos arranjos são possíveis. É uma organização mais dinâmica, e mais viva porque tem pontos de tensão. • Essa técnica de design requer maior habilidade e sensibilidade do designer pois é, sobretudo, intuitiva. • Neste caso deverá ocorrer uma compensação visual.

Equilíbrio Assimétrico

Be stupid “ ” Ano: 2010 Cliente: Diesel Agência: Anomaly, Londres, Inglaterra

http://adsoftheworld.com/media/print/diesel_jeans_be_stupid_15

O contraste é a técnica visual que mais chama a atenção numa composição pois sua natureza é essencialmente o choque entre duas forças antagônicas.

Contraste

Há várias formas de gerar contraste:

• Tom: claro X escuro. • Cor: cor quente X cor fria; cores opostas. • Elementos básicos: linha reta X curva. • Forma: forma sinuosa X forma reta. • Escala ou tamanho: grande X pequeno. • Espaço: cheio X vazio. • Tipografia: fonte antiga X fonte sem serifa.

http://adsoftheworld.com/media/print/kleenex_yesno

Ano: 2011 Cliente: Kleenex Agência: JWT, Londres, Inglaterra

Let it out “ ”

100% Electric. “ ”

Ano: 2011 Cliente: Citroën Agência: Euro RSCG, Viena, Áustria

http://adsoftheworld.com/media/print/citroen_czero_100_electric

Ano: 2009 Cliente: McDonald’s Agência: DDB Sidney, Austrália

http://adsoftheworld.com/media/print/mcdonalds_wifries

love free wi-fi “ ”

http://adsoftheworld.com/media/print/pepsi_surfing

Ano: 2007 Cliente: Pepsi Agência: DDB, Düsseldorf, Alemanha

dare for more “ ”

Grid, diagrama, malha ou template

O grid é uma forma de racionalizar o espaço do layout. É definida uma malha – quadriculada ou não – onde os módulos nos ajudam a posicionar os elementos criando relações de alinhamento e proporção entre eles. Define-se as margens, divide-se o espaço verticalmente em quantas colunas achar melhor e pode-se dividi-lo também na horizontal.

http://en.wikipedia.org/wiki/Grid_(page_layout)

Exemplo de utilização de um grid:

http://en.wikipedia.org/wiki/Grid_(page_layout)

Os grids são a base sobre a qual todo projeto de design, impresso ou online, deve ser planejado, e são cruciais para se obter coesão, estabilidade e consistência. Primeiro, aprenda, entenda e depois aplique estruturas de grid simples, depois explore e desenvolva formações mais complexas. Experimente sobrepor grids, um para tipografia, outro para imagens. Dê impacto a seus designs com grids experimentais, que não precisam ser complicados. Acima de tudo, não se deixe restringir pelo grid. Afinal, é você quem define os parâmetros dele.

(Kenny Allan) *

* Fonte: Computer Arts Projects ,Ed. 21, P.37

Grid

No time to stop? Drive thru “ ”

http://adsoftheworld.com/media/ambient/mcdonalds_fries

Ano: 2006 Cliente: McDonald’s Agência: Cossette Atlantic, Halifax, Canadá

Profusão

• A profusão é carregada em direção a acréscimos discursivos infinitamente detalhados a um design básico, os quais, em termos ideais, atenuam e embelezam através da ornamentação. • Essa técnica é oposta à economia – o mínimo de unidades na composição. E requer grande habilidade

http://adsoftheworld.com/media/print/hubba_bubba_lochness

Blow it out of proportion. “ ” Ano: 2012 Cliente: Hubba Bubba Agência: Gitam BBDO, Tel Aviv, Israel

http://adsoftheworld.com/media/print/heinz_seriously_good_pasta_sauce_seriously_juicy

Ano: 2011 Cliente: Heinz Agência: DDB, Nova Zelândia

Seriously Good “ ”

http://adsoftheworld.com/media/print/havaianas_sandals_taxi

Havaianas. A Brazilian original since 1962. “ ” Ano: 2010 Cliente: Havaianas Agência: AlmapBBDO, São Paulo, Brasil

• Para a criação de um bom anúncio, no entanto, não basta aplicar com eficiência as técnicas visuais. • Todas as técnicas vistas deverão estar a serviço do conteúdo, ou conceito. • Uma boa solução de Direção de Arte precisa ter um bom conceito e uma boa representação técnica deste.

Forma e Conceito

Fim