design m贸dulo 1
índice pág.04
- o que é design?
pág.06 - áreas de atuação pág.07 - gestalt pág.09 - conceito pág.12 - originalidade pág.14
- diagramação
pág.16 - cores pág.20 - tipografia pág.22 - equilíbrio
04
o que é design? Seja bem-vindo ao curso Web para Designers!
riais de comunicação visual cresceu, e de maneira proporcional
Mas... O que é Design?
o design evoluiu.
Design é projetar conceitos, equilibrando estética e funcionalidade. Segundo a ICSID - The International Council of Societies of Design, numa definição mais abrangente:
Em paralelo a este crescimento também ocorreu, em meados de 1850, um novo pensamento que permeou as práticas industriais: a desvalorização do objeto com deficiência projetual e de estilo. A idéia de que a qualidade do objeto fabricado
“Design é uma atividade cuja finalidade é estabelecer
deveria refletir tanto a unidade do projeto e execução quanto
as qualidades multifacetadas de objetos, processos, servi-
o bem-estar do trabalhador, fez ressoar o nome de Willian
ços e seus sistemas, compreendendo todo seu ciclo de vida.
Morris como um divulgador da importância do design, dando
Portanto, design é o fator central da humanização inovadora
origem ao movimento conhecido Arts and Crafts.
de tecnologias e o fator crucial para o intercâmbio econômico e cultural.”
Com o crescimento industrial na Europa de 1900 a 1914, iniciou a chamada Belle Epoque, onde a burguesia, o luxo, a cultura
Para conhecermos melhor esta profissão multidisciplinar,
de elite dividiam o espaço com a imensa desigualdade social, os
falaremos um pouco sobre a história do design e suas diferen-
movimentos socialistas, comunistas e anárquicos. Em meio a este
tes áreas de atuação.
atordoado antagonismo e a expansão capitalista que gerou concorrência econômica industrial entre os países, surgiram diversas
História do Design
organizações e escolas com o intuito de promover o design como
Não há como falar de design sem mencionar as revolu-
um fator diferencial de qualidade industrial.
ções industriais e a industrialização mundial. A primeira Revolução Industrial ocorreu na Inglaterra, por volta de 1750, se expandindo para França, Estados Unidos e Alemanha nos séculos 18 e 19.
Estas escolas e organizações acabaram extintas com a Primeira Guerra Mundial. Sobre a influência de diversos fatores históricos, do ecletismo artístico e de movimentos como o simbolismo e o
Os primeiros designers eram operários que emergiram
esteticismo, a arte passou a ser percebida como expressão
por experiência e habilidade para a posição de concepção e
individual e a busca por um estilo unificado adequado ao novo
gerência nas indústrias. Com o processo evolutivo surgiram as
século culminou nas manifestações da Art Nouveau, primeiro
primeiras escolas de design.
estilo verdadeiramente moderno e internacional.
O processo de industrialização acarretou em mudanças
O movimento Art Nouveau teve origem na Europa, por
sociais como aumento da população nas cidades, crescimento
volta de 1900. Relacionado diretamente com a Segunda Revo-
das tecnologias em transporte e nas relações econômicas. Com
lução Industrial, este movimento determinou a exploração de
o trabalho assalariado ocorre um aumento no consumo e no
novos materiais, a utilização de avanços tecnológicos na área
acesso às informações. Entre as mercadorias mais consumidas,
gráfica, como a técnica da litografia colorida que teve grande
estão os impressos de todas as espécies, já que a disseminação
influência nos cartazes, e caracteriza-se pelas composições
da alfabetização nos centros urbanos gerou um crescimento
com formas orgânicas. Porém, o Art Nouveau ainda perma-
enorme no público leitor. Com os avanços tecnológicos de
necia ligado às características de luxo da Belle Epoque, com
impressão e de reprodução fotográfica, a qualidade dos mate-
produções de artistas renomados e elitizados.
05
Em paralelo na América, entre de 1920 e 1930, surgiu o movi-
buições da escola de Ulm foi sua visão do design como uma
mento Art Déco, estilo de massa produzido e consumido ano-
área interdisciplinar voltada para a diversidade de produção.
nimamente nas grandes metrópoles americanas e divulgado
E partiu da escola de Ulm a experiência de implantar o ensino
amplamente pelo cinema. Os dois movimentos afirmavam a mo-
formal do design em países periféricos. No caso do Brasil,
dernidade e se caracterizavam pelas ruas nos ciclos de moda.
a implantação se deu através da ESDI (Escola Superior de
Nas primeiras décadas do século 20 surgiram diversos mo-
Desenho Industrial). Na verdade, na época da fundação da
vimentos artísticos como Futurismo, Cubismo, Neo-Plasticismo,
ESDI, já se buscava implantar o ensino sistemático no Brasil
denominados Vanguarda Européia. Descrentes dos ensinamen-
há mais de uma década. A primeira tentativa aconteceu em
tos tradicionais, estes artistas descobriram na tecnologia, nas
São Paulo, no MASP (Museu de Arte de São Paulo); a segunda
indústrias e no design um caminho para o seu trabalho.
ocorrência, na Escola Técnica de Criação do MAM (Museu de
A influência das vanguardas artísticas foi mais ampla na
Arte Moderna). A escola do MAM nunca vingou de fato, mas
área do design gráfico, com específica importância nos pro-
a experiência e os contatos lá firmados foram indispensáveis
jetos relacionados ao Construtivismo Russo, ao movimento
para a criação da ESDI. A terceira tentativa de implantar um
de Stijl, na Holanda, e à Bauhaus, na Alemanha.
curso de design no Brasil, e a primeira a se consolidar, foi a
A Bauhaus foi formada através da unificação e reorgani-
Faculdade de Arquitetura e Urbanismo da USP (Universidade
zação de duas escolas já existentes em Weimar: a Academia
de São Paulo). A ESDI foi a primeira escola exclusivamente
de Belas-Artes e a Escola de Artes e Ofícios. No momento da
de design criada no Brasil e, devido a sua eficiência, ajudou a
sua formação, a Bauhaus se encontrava no centro dos aconte-
consolidar a área e na fundação de diversas escolas.
cimentos políticos. Sua existência permaneceu como motivo de polarização ideológica até o momento de seu fechamento
Estas são algumas das escolas que fizeram parte da história do design.
em 1933, com o Nazismo. No período inicial, a escola esteve
Conhecer a história, os conceitos, os pensamentos e os
preocupada em agregar pessoas e propostas das mais diver-
segmentos torna possível o entendimento dos caminhos que
sas tendências, com a premissa de fazer uso da arquitetura
permeiam o design atual. O conhecimento da história é a me-
e do design para construir uma sociedade melhor, mais livre,
lhor forma de buscar o autoconhecimento coletivo do design.
mais justa e plenamente internacional, sem os conflitos de
Um profissional com esse conhecimento está um passo a frente
nacionalidade e raça que então dominavam o cenário político.
no mercado, já que o seu caminho acompanha o desenvolvi-
Suas portas estavam abertas para qualquer novidade e esta
mento conciso, consciente dos fatores cronológicos da área,
receptividade acabou atraindo figuras e idéias inovadoras
estando pronto para uma produção mais sólida no futuro.
relacionadas ao fazer artístico e arquitetônico.
O design se solidificou e conquistou seu espaço como
O fechamento da Bauhaus e a dispersão de seus inte-
uma área multidisciplinar, capaz de atingir diversos meios
grantes deram alento a muitas modificações na história do
por ter uma filosofia conceitual de bases sólidas em estudos
design no mundo. Os cientistas, intelectuais, artistas e polí-
e pesquisas com progressão e desenvolvimento como
ticos exilados pelo Nazismo foram acolhidos principalmente
demonstra sua história.
nos Estados Unidos. Novas escolas foram fundadas e este caminho se desencadeou na formação da escola de Ulm. Embora desejasse retomar alguns pensamentos bauhausianos, o interesse maior era de gerar algo original e independente. Os ulmianos também questionavam diversas soluções formais empregadas em sua antecessora. Uma das maiores contri-
06
áreas de atuação Já vimos como o design é uma área multidisciplinar e o seu desenvolvimento dentro da história. Agora, vamos exemplificar as diferentes áreas de atuação do design. Os três principais grupos de atuação disciplinar da área são:
símbolo a ser criado. Bens de Consumo - Área destinada a concepção de bens
Design de Interfaces - O profissional desta área projeta inter-
de alta produção, que tem grande concorrência e que possui
faces gráficas de sistemas operacionais, softwares e games, anima-
a necessidade de um diferencial formal ou funcional: eletrodo-
ção 2D e 3D, sites (neste caso também conhecido como webdesigner) etc. objetivando o conforto do usuário.
Design Gráfico - É um campo de atuação bastante amplo e criativo, cujas atividades englobam criação de logotipos, identidades corporativas, editoração (revistas, jornais, livros), embalagens, cartazes etc.
Design de Produto - Desenvolvimento de produtos industriais, visando sempre facilitar sua produção e o seu uso. O designer de produto elabora objetos que são produzidos pelas indústrias, sempre atento não somente à estética, mas também à funcionalidade. Ele também cuida de tecnologia, pesquisas e desenvolvimento de materiais adequados para o produto.
mésticos, eletro-eletrônicos, luminárias, objetos de lazer. Bens de Gosto - Esta área compreende bens de consumo, porém menos funcionais: jóias e relógios, calçados e acessórios, brindes e presentes. Mobiliário - Área voltada para a formação de design de produto, com especialidades e características acentuadas na criação e concepção de móveis e de mobiliário especial. Moda - Privilegia a diferenciação e a aparência dentro das tendências mais efêmeras, do vestuário e acessórios: roupa feminina, masculina e infantil. Têxtil - Criação gráfica bidimensional em superfícies e texturas diversas, de acordo com a tendência da moda: estamparia e têxteis para moda e decoração, padrões decorativos, papéis de parede. Veículos - A importância do trabalho do designer de veículos é
Observando de um ângulo mais específico podemos verificar diversas áreas geradas a partir destes grupos como: Áudiovisual - Área com ênfase em imagens seqüenciais para uso em apresentações, conferências, stands, TV, filmes e vídeos digitais... Editoração - Diagramação e concepção gráfica de impressos para publicação: livros, jornais e revistas e etc. Embalagens - Área especializada em criação de embalagens, tanto em sua concepção tridimensional, quanto sua composição gráfica. Identidade Corporativa (branding) - Cuida da concepção visual de marcas e logotipos bem como toda a sua aplicação e uso. Ilustração - Domínio de meios de representação das técnicas de desenho: ilustração de livros, jornais, revista e ilustração publicitária. Interface Digital - Responsável por planejar a experiência do usuário, desde caminhos a serem percorridos por ele, até a definição de todos os elementos de interação utilizados (menus, botões,
no desenvolvimento dos aspectos ergonômicos e funcionais. Stands e Exposições - Planejamento e projeto de exibições de qualquer tipo ou tamanho: vitrines, exposições, feiras. Interiores - Abrange os principais aspectos ergonômicos de conforto ambiental para projetos de interiores: ambientação comercial, layout de escritórios e etc. Ergonomia - Esta é uma área que foi gerada nas escolas de design do país e assumiu uma importância ímpar: levantamentos antropométricos, pesquisas de aplicação, testes ergonômicos. Modelos e Protótipos - Representação tridimensional de projetos em qualquer fase de sua concepção: maquetes e mock ups, protótipos e simulação funcional. Ilustração Técnica - Rendering, apresentação e documentação de projetos. Educação - Trata da formação de recursos humanos para o exercício profissional nos níveis médio e superior.
campos de texto). Abrange o uso da mídia eletrônica para a con-
Planejamento de Produtos - Atividade que abrange supervi-
cepção de elementos visuais e gráficos: CDs, concepção e diagra-
são e o gerenciamento de processos e projetos: diretor de arte,
mação de sites, produção de telas, slides, realidade virtual.
gerente de produto.
Manipulação de Imagens - Uso da informática na elaboração de imagens: ilustração digital e foto digital. Programação Visual (impressos) - Área que contempla a produção de qualquer elemento impresso, reproduzido em qualquer escala. Sinalização - A atuação abrange tanto o aspecto gráfico como o planejamento dos sistemas de suporte. Tipografia - Estuda os problemas de visibilidade e leitura, bem como os aspectos culturais e estruturais do caractere ou
Teoria ou Pesquisa- Atividade complementar a educação em design, de natureza acadêmica, propiciando reflexão sobre a área: autor de livros e artigos, palestrante. Arquitetura de Informação - responsável pela organização de todo o conteúdo disponível no site/sistema digital. É extremamente importante que ele veja com “os olhos” do usuário, pois é sua tarefa fazer com que tudo esteja disponível da maneira mais fácil, natural e transparente possível.
07
gestalt Apesar das diferentes atuações e suas particularidades, o objetivo do design é sempre o mesmo: projetar conceitos, equilibrando estética e funcionalidade. Para isso, é fundamental o entendimento dos conceitos gerais da percepção visual. A gestalt é considerada pelos mais conceituados profissionais da área a gramática subliminar da alfabetização visual. Neste módulo, vamos entender um pouco mais sobre este valioso movimento e sua contribuição para os estudos da área.
O movimento
relação dos elementos que as constituem. Uma ou mais unidades
O movimento gestaltista teve início na Viena do século XIX,
podem ser percebidas dentro de um todo pela percepção
através dos estudos do filósofo Von Ehrenfels. A Gestalt
isolada e combinação dos elementos como: pontos, linhas,
firmou-se como a primeira Escola de Psicologia Experimental
planos, volume, cores, brilho, sombra, textura etc.
e atuou principalmente no campo da teoria da forma, com
Segregação: Este conceito demonstra a capacidade
contribuição relevante aos estudos da percepção, linguagem,
perceptiva de separar, identificar, evidenciar e destacar
inteligência, aprendizagem, memória, motivação, conduta
unidades formais em uma composição.
exploratória e dinâmica de grupos sociais. O termo Gestalt, no seu sentido mais amplo, significa uma integração de partes em oposição à soma do “todo”. É comumente traduzido para o inglês, espanhol e português como estrutura, figura, forma.
Unificação: Consiste na semelhança e igualdade produzidos pelo campo visual. A unificação também acontece por fatores como harmonia, coerência da linguagem e organização. Semelhança: os objetos similares tendem a se agrupar. A
A teoria da Gestalt, gerada através de grande pesquisa
similaridade pode acontecer na cor dos objetos, na textura. Estas
e experimentação, sugere uma resposta ao porquê de umas
características podem ser exploradas quando desejamos criar
formas agradarem mais e outras não. Ela afirma também
relações ou agrupar elementos na composição de um layout.
que o cérebro só consegue perceber, decodificar e assimilar uma imagem ou um conceito pela sua totalidade e não pelas partes separadas que formam este todo. Sendo assim, existem algumas leis básicas da Gestalt que explicam o processo psicológico de captação e entendimento de alguma imagem ou idéia.
Proximidade: Os elementos são agrupados de acordo com a distância a que se encontram uns dos outros. Assim, elementos próximos entre si tendem a ser percebidos como um grupo. C o n t i n u i d a d e : S e v á r i o s e l e m e n t o s d e u m q u a d ro apontam para o mesmo canto, por exemplo, o resultado final “fluirá” mais naturalmente.
Leis da Gestalt Pregnância da forma: Este é um dos conceitos mais importantes da Gestalt. Ele demonstra que todas as formas tendem a ser percebidas em seu caráter mais simples: uma espada e um escudo podem tornar-se uma reta e um círculo. Quanto melhor for a organização visual da forma do objeto, em termos de facilidade de compreensão, rapidez de leitura e interpretação, melhor será o seu grau de pregnância. Unidade: As unidades formais são percebidas através da
Clausura: Ou “fechamento”, o princípio de que a boa forma se completa, se fecha sobre si mesma, formando uma figura delimitada. O conceito de clausura relaciona-se ao fechamento visual, como se completássemos visualmente um objeto incompleto. Ocorre geralmente quando o desenho do elemento sugere alguma extensão lógica, como um arco de quase 360º sugere um círculo. O conceito de boa continuidade está ligado ao alinhamento, pois dois elementos alinhados passam a impressão de estarem relacionados.
08
Conceituação da Forma A forma pode ser definida como a imagem visual. Ela informa sobre o aspecto estrutural do objeto. A forma é o resultado de interação entre o objeto e o meio. A conceituação da forma acontece em seis princípios: Forma ponto – unidade mais simples existente na comunicação visual. Forma linha – uma sucessão de pontos ou ponto em movimento. Forma plano – uma sucessão de linhas que se expressa nas duas dimensões do espaço. Forma volume – algo que se expressa por projeção nas três dimensões do espaço. Forma – configuração real – Demonstra a captação real da imagem, como numa fotografia. Forma – configuração esquemática – Demonstra a percepção do objeto real num conceito estrutural.
Complexidade – complicação visual por numerosos elementos. Se organizado pode gerar harmonia e interesse. Minimidade – simplicidade, naturalidade, gerando boa pregnância pela economia de elementos. Profusão – manifestação visual muito carregada com excesso de detalhes e ornamentos. Coerência – resultado de uma aplicação visual integrada e harmoniosa e diretamente vinculada ao conceito. Exageração – técnica que recorre a configurações extravagantes para uma expressão visual intensa. Arredondamento – suavidade e maciez transmitidas geralmente por formas orgânicas. Transparência – transmite a sensação de profundidade e de realidade. Redundância – enfatizar ou chamar atenção através da repetição. Ambigüidade – concorrência por indefinição geométrica ou orgânica da forma induzindo a mais de uma interpretação.
Certas formas só podem ser compreendidas se já a conhecermos, ou se tivermos consciência prévia de sua existência. Da mesma maneira, a experiência passada favorece a compreensão: se já tivermos visto a forma inteira de um elemento, ao visualizarmos somente uma parte dele reproduziremos esta forma inteira na memória.
Espontaneidade – aparente falta de planejamento visual. Aleatoriedade – disposição rítmica e não seqüencial. Fragmentação - decomposição dos elementos em peças separadas Sutileza – transmite delicadeza através de acabamentos elegantes e refinados.
Categorias conceituais – técnicas visuais aplicadas Estas técnicas visuais podem fornecer informações valiosas no processo de criação, gerando conceitos e agregando
Difusidade – transmite a sensação de diluição da imagem, retirando dela precisão e transportando o observador a um ambiente subjetivo.
significados para a produção visual. Porém, devem ser utilizadas
Distorção – dramatização com o propósito de sensibilizar.
de acordo com a necessidade conceitual do projeto.
Profundidade – técnica com objetivo de gerar uma
Clareza – manifestação visual bem organizada, unificada, harmoniosa e equilibrada. Simplicidade – esta aplicação é caracterizada pela o rg a n i z a ç ã o , h a r m o n i a e s í n t e s e v i s u a l , g e r a n d o b o a pregnância da forma.
perspectiva tridimensional. Seqüencialidade – elementos organizados e dispostos de modo contínuo. Ruído – interferências que perturbam a harmonia ou a ordem a fim de criar pontos de interesse.
09
conceito Para começar a projetar deve-se estar sempre atento aos princípios do design, como: conceito, originalidade, simpli-
Conheça algumas categorias de sites
cidade, pregnância e legibilidade. Eles são importantes para
Todo site tem que transmitir um conceito, isto é, uma idéia do
a fundamentação dos seus projetos.
que se trata. No caso de um site para o público infantil, por exemplo, é adequada a utilização de cores alegres, fontes divertidas, muitas ilustrações e desenhos, animações, joguinhos interativos, criando um ambiente lúdico. Além disso, o site deve condizer com a categoria à qual pertence. Um portal infantil deve possuir diversos links para outras áreas de interesse que atraiam a criança. Portais – apresentam conteúdo vasto, dividido por seções de temas variados e atualizados diariamente, na maioria dos casos.
Observe as figuras acima... Você notou algo de estranho? Em um supermercado, os produtos são facilmente identificados pela sua embalagem. Mesmo à distância, consegue-se reconhecer, sem ler os nomes, o que é sabão
www.globo.com
em pó, cerveja ou pasta de dentes. Isso acontece quase
Sites institucionais - sites de empresas ou instituições que
i n t u i t i v a m e n t e , p o rq u e v o c ê j á t e m u m a i m a g e m p r é -
apresentam seus serviços e produtos. É o contato direto
estabelecida desses produtos. Já se sabe, por exemplo, que
da empresa com seus clientes.
a pasta de dentes vem em tubo, e o sabão em pó, em caixa. Além disso, nota-se que, na maioria das vezes, adotam uma estética bastante similar. Cada categoria de produtos tem um conceito, uma imagem a transmitir. É isso: o conceito nada mais é do que um conjunto de informações representadas por elementos gráficos (como cor, tipografia, imagens etc.) e que, juntos, transmitem uma idéia. Agora, você deve estar se perguntando: mas o que isso tem a ver com criação de sites? Tudo! Os sites também devem transmitir conceitos, de acordo com a sua categoria.
www.dnv.com.br
10
Sites de comércio eletrônico – sites que disponibilizam produ-
Sites de instituições financeiras - agências virtuais, que disponibili-
tos a serem comprados pela internet.
za serviços como, acesso a sua conta e pode realizar transações.
www.amazon.com
www.itau.com.br
Sites pessoais ou portfólios - apresentam trabalhos já reali-
Blogs (portfólios) - uma tendência, onde designers ou qualquer
zados, mostrando sua experiência profissional, currículo etc.
profissional expõem seus projetos em blogs portfólios. Assim,
Esses sites não se restringem a profissionais do design, também
há muita interatividade com os leitores e mais rapidez para a
podem divulgar artistas, músicos, estilistas ou qualquer profis-
atualização.
sional liberal.
www.andrefaccioli.com.br www.btreze.blogspot.com
Sites de educação à distância - o mesmo que “e-learning”. É destinado ao aprendizado fora da sala de aula. Geralmente, apresentam conteúdo vasto que pode ser impresso pelo aluno em casa. Este formato estimula a interatividade entre os alunos
Sites de entretenimento - sites desenvolvidos para o lazer do usuário. Voltados para o público-alvo, onde o entretenimento expõe o produto ou conceitualiza a marca.
para compensar a distância
www.fgv.br/fgvonline
www.idadeinterior.com.br
11
Sites de notícias – são sites direcionados a informar, com
Hotsites - são sites desenvolvidos para um curto prazo de exposi-
atualização intensa e conteúdo, além da utilização de tecnolo-
ção, onde são divulgados novos produtos. Nesta modalidade de
gias, como RSS, e informativos via e-mail, disponibilizando aos
site, a criação tem a oportunidade de reforçar o conceito da marca e
usuários informações com mais rapidez.
vender uma atitude.
www.bluebus.com.br
Sites de rede social - esta modalidade de site entrou como uma febre no mercado e hoje demonstra claramente sua função. O que parecia um simples site de relacionamento demonstrou com a formação de comunidades que pode servir de medida para empresas e uma resposta direta do público aos produtos lançados. Este tipo de site teve uma ótima aceitação no Brasil, não tendo grandes participações internacionais.
pt-br.facebook.com/
application.nokia.com.br/2007/br/musicrooms
Site de exibição de vídeos - o nascimento do YouTube marca a revolução na veiculação de vídeos na web, tornando-os acessíveis para qualquer pessoa, em qualquer lugar. Além disso, o YouTube ajudou a consolidar uma das principais características da chamada Web 2.0, ao estimular a participação dos usuários na construção do conteúdo do site, seja pelo envio de vídeos caseiros, ou até mesmo na disponibilização de material produzido profissionalmente.
www.youtube.com
Tendências Foco no público-alvo. Esta é uma das principais tendências do mercado digital. Direcionando ao público os produtos, as idéias, os conceitos e todo o nicho de informações, as empresas podem ganhar cada vez mais o mercado, já que com a alta interatividade, comunidades e métricas*, o retorno do público é mais intensificado. * Este assunto será aprofundado nos módulos 2 e 3.
12
originalidade Destacar-se na grande rede pode ser uma tarefa difícil.No
do individualmente ou em grupo, espera-se uma verdadeira
meio de tantos outros sites, por que o seu seria notado?
chuva de palavras, onde qualquer idéia é bem-vinda, por mais
Ter uma idéia brilhante pode custar muitas horas de sono e
descabida que possa parecer.
papéis amassados... A originalidade é um dos principais fatores de sucesso de um site, por isso, você precisa ser diferente dos seus concorrentes! Mas fique atento ao objetivo do projeto: um site de ecommerce, por exemplo, deve ser mais direto, uma vez que
Tendo um tema definido, pegue papel, caneta e dê asas à imaginação! O objetivo é deixar a mente criadora fluir livremente, sem medo de críticas. Reúna um grande número de idéias, sem se preocupar com a qualidade. Depois, basta selecionar as melhores e organizá-las até se chegar à solução ideal.
sua meta é a venda e o usuário não deve encontrar obstáculos, como vídeos ou animações, que demorem para carregar. Sites que permitem exceder em originalidade são os sites pessoais e de portfólio (pois é a oportunidade de o autor mostrar seu talento), e os sites de entretenimento, onde o usuário não tem pressa de navegar e está lá só por diversão. O originalidade pode ser percebida em diversos aspectos, num layout diferenciado, na navegação, no uso de uma nova tecnologia. Porém lembre-se que o diferencial deve atender principalmente as necessidades do cliente. Mãos à obra: comece fazendo uma pesquisa; faça uma busca na web dos sites similares, veja o que eles oferecem, quais as suas vantagens, de que forma se apresentam etc. Não descarte também o meio offline; visite lojas, pegue folders, folhetos etc. Enfim, analise tudo o que estiver ao seu alcance. Dessa maneira, você terá um parâmetro do que já foi feito e, a partir daí, partirá para uma solução exclusiva, diferente de tudo o que já foi visto.
Brainstorming Este termo, que significa “tempestade de idéias”, é uma técnica de pensamento que estimula a produção de uma grande quantidade de idéias, expondo ao máximo nossa inteligência, desbloqueando hábitos e atitudes inibidoras de um raciocínio criativo para se chegar a uma solução original. Como o próprio nome já diz, no brainstorming, que pode ser realiza-
Fases de um brainstorming em grupo 1a. fase > geração: 1. Definir o assunto (tema). 2. Convidar os participantes, preferencialmente de áreas diferentes e habilidades e formações distintas. 3. Fazer uma breve exposição no início da reunião sobre o problema e a sistemática a ser utilizada. 4. Anotar as idéias, de forma que todos a visualizem durante a reunião. 5. Prosseguir a reunião até que todas as idéias sejam registradas. 2a. fase > clarificação: 1. O time deve rever todas as idéias e entendê-las, mas não deve discuti-las. 2. Priorizar as idéias com a participação do grupo, através de votação, fazendo uma lista com um grande número de itens. 3a. fase > avaliação: O time deve rever a lista, eliminar idéias menos adequadas à proposta e selecionar as melhores.
13
Dicas para estimular a criatividade :: Relacione-se com pessoas diferentes
A leitura proporciona o contato com novos conceitos e idéias
Pontos de vista diferentes sobre uma mesma questão podem
que podem interagir com as suas, gerando novos resultados
ser interessantes para expandir seus pensamentos.
interessantes.
:: Personalize seu ambiente de trabalho
:: Visite museus e exposições
Projete um lugar agradável para trabalhar. Decore com o
O contato com as artes nos traz experiências não vividas no
seu estilo, coloque objetos pessoais ou que simplesmente lhe
cotidiano, dando margem a novas formas de expressão.
transmitam alegria e tranqüilidade.
:: Acompanhe a tecnologia
:: Viaje sempre que puder
Os recursos tecnológicos, principalmente os softwares, permi-
Adquira um repertório visual variado. Presenciar outros
tem que você coloque suas idéias em prática.
cenários e culturas estimulam sua sensibilidade criativa.
:: Exercite seu cérebro com desafios
:: Cultive o bom-humor
Nos casos de trabalho sob pressão, você necessita de uma
Relaxar, descontrair e dar boas risadas são estímulos naturais
grande idéia dispondo de pouco tempo. Simule essas situações
para criatividade.
para exercitar o pensamento criativo, imponha-se um
:: Leia bastante
tempo na próxima vez em que for criar.
Alguns sites originais
http://www.sensisoft.com/
www.bio-bak.nl
A agência polonesa demonstra seus serviços em épocas diferentes de
Site com navegação inusitada e trabalho ilustrativo incomum.
maneira super inusitada.
amana.jp/company/tsutawaru/content.html
http://game.cocacolazero.com.br/minhavidadegame/
Site com dispositivo de vídeo e riqueza estética. De fato, é uma experi-
Jogo on-line com riqueza de detalhes e aplicação de 3d de forma
ência visual e cognitiva de diversidade sensorial, é uma sinestesia.
coerente.
14
diagramação Imagine que você acabou de se mudar para um novo aparta-
Legibilidade
mento. Todos os cômodos estão vazios e prontos para receber
Ao diagramar um site, principalmente páginas internas, onde
a mobília que você terá que organizar. No quarto, você coloca
há maior quantidade de textos, faça-o ficar o mais confortável
a mesinha ao lado da cama, e sobre ela, o abajur para iluminar
possível de se ler.
suas leituras noturnas. Na sala, o sofá estará em frente à tele-
Geralmente, usuários lêem na tela ‘decompondo’ as
visão e, entre os dois, a mesa de centro para apoiar as gulosei-
páginas: seus olhos selecionam automaticamente frases em
mas que você devora assistindo a um filme. Sem perceber, você
destaque, gráficos ou tópicos. Dificilmente lêem um texto
acabou de diagramar sua casa. Significa que você organizou
corrido na tela do computador.
elementos num determinado espaço, dispondo-os intencional e estrategicamente em suas posições. Trazendo agora para a realidade do webdesigner, esse ‘espaço’ seria o próprio site. E
Alinhamento
os móveis? Estes seriam os elementos gráficos (textos, imagens
É importante que todo o site (home e páginas internas)
etc.) com os quais você fará sua composição.
apresente o mesmo tipo de alinhamento de texto. Faça sua escolha (alinhado à esquerda, justificado ou centralizado)
Recursos que facilitam a legibilidade
e aplique em todas as páginas.
:: Destaque palavras-chave utilizando cor ou fonte diferentes.
O alinhamento se transforma em mais uma característica
:: Divida o texto o máximo que puder com títulos, subtítulos
da identidade visual (+) do site. Veja como um projeto com
e resumos significativos.
diferentes alinhamentos perde consistência e fica confuso:
:: Faça listas por tópicos (como esta) :: Dê preferência a vários parágrafos pequenos no lugar de
:: O alinhamento à ESQUERDA é visualmente mais
poucos, porém, grandes.
confortável, pois resulta em comprimentos diferentes
:: Use, aproximadamente, a metade do número de palavras
para cada linha e facilita o usuário a não se perder na
que você usaria em um texto impresso.
leitura.
:: Ilustre o texto com imagens relativas ao assunto, deixando-o mais dinâmico e leve. :: Procure utilizar na fonte do texto uma cor que contraste e se sobressaia em relação à cor do fundo.
:: O alinhamento à DIREITA deve ser utilizado apenas para parágrafos bem curtos, por alguma opção estética, e não, aleatoriamente.
:: Utilize o recurso de hipertexto (+). (+) hipertexto
:: O alinhamento JUSTIFICADO, ou blocado, também
Conjunto de informações que podem estar na forma de texto, imagens (ani-
deve ser utilizado somente se o projeto pedir uma massa
madas ou fixas) e sons, organizadas em uma leitura (ou navegação) não linear,
de texto quadrada ou retangular.
baseada em associações de idéias e conceitos, sob a forma de links. Os links agem como portas virtuais que abrem caminhos para outras informações.
:: O alinhamento CENTRALIZADO deve ser evitado para
(+) identidade visual
textos longos, pois dificulta bastante a leitura.
Conjunto de elementos gráficos que representam o conceito de uma empresa ou produto. É o logotipo e suas aplicações.
15
Hierarquia da Informação
O lado esquerdo também é bastante importante, assim como
Hierarquizar informações em um site significa destacar ou
a parte superior (cabeçalho). Informações não relevantes po-
priorizar alguns elementos em relação a outros. No caso de
dem ficar abaixo da “dobra” do site (quando o usuário precisa
um texto, isso pode ser feito através de recursos, como:
rolar a página).
- texto grifado (negrito, itálico ou sublinhado); - aumentar o corpo do texto que deseja destacar; - utilizar uma segunda cor; - utilizar caixa alta (letras maiúsculas). Outra forma de destaque é utilizar as áreas privilegiadas do site (ver esquema ao lado). Na cultura ocidental, o processo de leitura consiste em uma “varredura” da esquerda para a direita e de cima para baixo. Por isso, a parte considerada mais privilegiada do site (para onde o usuário olha primeiro) é o canto superior esquerdo.
Análise hierárquica do Portal Globo.com :: A área mais privilegiada do site é dedicada à fidelização dos clientes.
:: Notícia de maior destaque com a chamada em negrito e cor de destaque referente a área.
:: Divisão das modalidades de notícias por cores. Caracterizada no box e na tipografia.
:: Seqüência de notícias da modalidade dividida por box na cor determinada pela modalidade.
:: Destaque para as notícias principais de cada modalidade.
:: Negrito para o resumo das notícias principais de cada modalidade.
16
cores Ao criar o layout de um site, todos os elementos, inclusive as cores, devem visar que a experiência do usuário seja a mais
Um pouco de teoria
eficiente e confortável possível. O bom uso das cores em um
:: Cores Primárias: que não podem ser formadas por ne-
site é determinante para uma usabilidade satisfatória.
nhuma mistura. São elas: azul, amarelo e vermelho.
Antes de tudo, é preciso saber se existe uma cor institu-
:: Cores Secundárias: formadas pela mistura das cores
cional que deve ser usada e como integrá-la com as demais
primárias, em diferentes tonalidades:
cores do layout. O importante é que a cor mantenha as carac-
azul + amarelo = verde
terísticas do negócio do cliente e que a interface permaneça
azul + vermelho = violeta
perfeitamente funcional.
amarelo + vermelho = laranja
A quantidade de cores usadas na web, ao contrário dos impressos, não representa qualquer aumento de custo no
:: Cores Terciárias: formadas pela mistura das cores secundárias. Podem ser divididas, de acordo com sua tempe-
projeto, o que pode levar ao seu uso excessivo e indiscrimina-
ratura, em frias e quentes. As frias abrangem azul, verde,
do. Não abuse, ou seu site vai virar um verdadeiro carnaval!
violeta e suas combinações. As quentes são os vermelhos, laranjas, amarelos, marrons e suas misturas.
Cor-luz – RGB A cor-luz pode ser observada através dos raios luminosos e se baseia na luz solar. É representada pela soma de três cores aditivas: vermelho, verde e azul (em inglês: red, green e blue - RGB). Cor-luz é a própria luz que pode se decompor em muitas outras cores. A mistura das três cores aditivas produz a luz branca. Esse sistema é o que forma as cores dos sistemas de comunicação visual, como a televisão e o monitor do seu computador.
:: Cores Complementares: uma cor primária é complementar a uma secundária quando ela não faz parte da mistura que forma esta última. São cores opostas no círculo cromático. Juntas, causam impacto visual. Exemplo: o vermelho é complementar do verde; azul é complementar do laranja; amarelo é complementar do violeta. :: Cores Análogas: são as cores ‘vizinhas’ no círculo de cores. Formam composições harmoniosas. :: Cores Acromáticas: são chamadas neutras: branco, preto, cinza e marfim. :: Cores Monocromáticas: cores da mesma família, va-
Cor-pigmento – CMYK
riações de tom. Exemplo: azul marinho, violeta, azul
Cor pigmento é a substância material que, conforme sua
bebê e turquesa.
natureza absorve, refrata e reflete os raios luminosos componentes da luz que se difunde sobre ela. São o
Psicologia das Cores
ciano, magenta e amarelo (cian, magenta, yellow - CMY),
Lembre-se sempre de que, ao escolher uma determinada cor
que misturadas em partes produzem outras milhões de
para seu projeto, esta provocará reações, sensações nos usu-
cores subtrativamente. A soma total delas produz um
ários que navegarem no site.
preto turvo. Este modelo de cor é utilizado nas artes gráficas (impressão offset).
Não podemos deixar de falar sobre o famoso caso do Mc’Donalds, que utiliza as cores amarela e vermelha em seu logotipo e em toda a identidade visual da empresa.
17
O amarelo forte transmite ansiedade, o vermelho dá fome,
É uma cor luminosa e muito forte para atrair a atenção. Ex.:
e os dois juntos, combinação presente nas lanchonetes des-
luz, angústia, esperança, atenção.
ta empresa, estimulam seus clientes a comerem exagerada e rapidamente, pois, além disso, a presença destas cores gera um certo desconforto quando visualizadas por muito tempo.
:: Verde: cor universal da natureza. Tem frescor, harmonia e equilíbrio. Cor calma, que não se dirige para nenhuma direção, nem encerra algum elemento de alegria, tristeza ou eficiência. Ex.: floresta, natureza, bem estar, tranqüilidade, juventude, umidade, saúde, tapete de jogos. :: Azul: transmite segurança e confiança, além de tranqüilidade. Em exagero, pode deprimir as pessoas. Cor profunda, calma. Marca uma certa maturidade. Mais claro, provoca uma sensação de frescura e higiene, principalmente quando na
Fique atento a outros efeitos :: Branco: considerada a melhor cor para demonstrar limpeza, é ofuscante, levando a um certo cansaço mental. O ideal é sempre combiná-la com outra cor. Sugere pureza. Cria uma impressão de vazio e de infinito. Ex.: ordem, simplicida-
presença de branco. Ex.: frio, céu, mar, tranqüilidade, paz, infinito, meditação, credibilidade. :: Roxo: equivale a um pensamento meditativo e místico, mistério. Assim como o preto, remete à nobreza e ao poder. Ex.: sonho, mistério, egoísmo, nobreza, fantasia, profundidade, doença.
de, luz, paz, higiene, casamento, hospital, neve, harmonia. :: Marrom: emana a impressão de algo maciço, denso, com:: Preto: utilizado sozinho é austero e confere isolamen-
pacto. Sugere segurança e solidez. Ex.: terra, outono, chocolate.
to. Associado ao branco sugere um ar moderno. As composições do preto com outras cores podem ser bem alegres e esportivas. Quando brilhante, confere nobreza, distinção e elegância. Cor preponderantemente masculina. Ex.: noite, nobreza, pessimismo, tristeza, dor, silêncio, morte. :: Cinza: é a expressão de um estado de alma duvidosa e neutra. Símbolo da indecisão e da ausência de energia. Quanto mais sombrio, mais conota desânimo, monotonia. Ex.: chuva, máquinas, seriedade, velhice, desânimo, sabedoria. :: Vermelho: significa força, virilidade, masculinidade, dinamismo. É uma cor exalante e até enervante. Impõe- se sem discrição. É uma cor essencialmente quente, transbordante
:: Rosa: é de pouca vitalidade e sugere feminilidade e afeição. É uma cor íntima, de doçura melosa e romântica. Ex.: feminilidade, delicadeza. Obs.: estes significados podem variar de acordo com a cultura de cada país. Segundo estudos de Albert Badre, professor da Escola de Psicologia da Georgia Institute of Technology, enquanto vermelho significa “perigo” ou “pare”, nos EUA, na China, denota felicidade. Verde significa fertilidade e força no Egito, enquanto, nos EUA, significa “seguro” ou “prossiga” e, na França, representa criminalidade. Por isso, torna-se tão importante o estudo do público-alvo do site em relação à percepção do uso de cores.
de vida e de agitação. Ex.: cereja, morango, sangue, desejo, sexo, agressividade, fogo, fome, perigo, guerra, força, energia, fúria, dinamismo, paixão.
Harmonização
:: Laranja: transborda irradiação e expansão. É aco-
Na hora de escolher as cores em um projeto, leve em consi-
lhedor, quente, íntimo. Ex.: outono, pôr-do-sol, festa, co-
deração alguns princípios fundamentais como similaridade,
mida, movimento.
familiaridade, equilíbrio, ordem e ambigüidade.
:: Amarelo: estimula a criatividade, é uma cor vibrante e alegre. Incentiva a conversação. Em excesso, é cansativa.
Dicas para harmonizar as cores no seu layout, com base no círculo cromático:
18
:: Usar diferentes valores de luminância (brilho) de uma mesma cor. Ex.: azul-marinho, azul-médio e azul claro. :: Utilizar duas cores opostas do círculo cromático. Este é um esquema a ser analisado com cuidado, como no caso do uso de vermelho e verde. Pode-se ter uma área maior com uma cor fria, deixando a área menor com sua cor complementar quente. :: Utilizar duas cores vizinhas e uma terceira oposta a elas no círculo cromático. Neste caso, é importante determinar qual será a cor predominante, aquela que chamará mais atenção na interface. Evite que a cor dominante ocupe a maior área da tela. :: Imagine um triângulo eqüilátero sobre o círculo cromático e utilize as cores que estão nos vértices (como na figura ao lado). :: Faça composições baseadas na temperatura das cores, com cores frias (violetas, azuis, verdes) ou quentes (vermelho, laranja, amarelo). É recomendável o uso de branco como “cor de alívio” no texto, separadores, áreas de respiração ou elementos acessórios, principalmente se forem utilizadas cores quentes. :: Outra preocupação é com o equilíbrio visual. Elementos escuros tendem a ser ‘engolidos’ visualmente por um fundo claro, parecendo menores. :: Se as áreas forem igualmente distribuídas entre uma cor quente e uma cor fria de igual luminância, a cor
Estudos demonstram que um olhar é imediatamente atraído
quente predominará.
para as partes de uma interface que são extremamente dife-
:: Em uma interface em que prevalecem cores frias, as
rentes do que está a sua volta.
cores quentes chamam atenção, atraindo o olhar. :: Em uma interface em que predominam cores escuras,
Legibilidade
as cores mais claras atrairão o olhar. Isso provoca um efeito
No livro ‘A Prática da Simplicidade’, Jakob Nielsen, conside-
de ordenação na leitura. Usadas incorretamente, estes tipos
rado um dos ‘papas’ da usabilidade, cita que a ótima legibili-
de contrastes podem provocar dispersão no usuário.
dade requer o texto escuro em fundo claro, o que ele denomina como ‘texto positivo’. Ex.: fundo bege e texto vinho.
Contraste
O contrário, ou seja, texto claro em fundo escuro, chamado ‘texto negativo’, causa quase a mesma eficácia de leitura. Ex.:
Considerando-se que o contraste, cromático ou luminoso, é
fundo azul-marinho e texto cinza claro. Entretanto, o autor diz
o que nos permite distinguir um objeto de outro ou do fundo
que esta inversão de cores gera no usuário uma certa desace-
em que ele está inserido, a utilização de cores contrastantes
leração ao ler. Elementos gráficos de fundo, principalmente
ressalta a presença de um determinado elemento no layout.
quando muito coloridos, podem interferir na capacidade de
A visão do usuário se volta para os contrastes mais extremos.
reconhecer as formas das palavras.
19
Navegação É importante lembrar também a importância de saber trabalhar com as cores nos links. Geralmente, os links já visitados pelo usuário são diferenciados dos que ainda não foram vistos pelo uso de outras cores. Quando não é respeitada essa regra, o visitante pode ficar perdido, e a navegação, ineficiente. Determinar uma escala cromática e utilizá-la em todo o site ajuda a manter a coerência e a identidade visual do projeto, familiarizando o usuário durante toda a sua visita.
Cuidado com fundos coloridos ou com textura.
www.hiddenbrookstudio.com
www.oifuturo.org.br
Nestes sites, podemos verificar que o fundo atrapalha um pouco a leitura. Deve-se tomar muito cuidado com esse tipo de solução. É necessário estar atento ao contraste, já que isso difere de acordo com os monitores.
20
tipografia O termo ‘tipografia’ significa o emprego de fontes, que nada
legível, impresso ou digital, requer habilidade e sensibilidade
mais são do que desenhos, representações do alfabeto. Atra-
do programador visual. Ao escolher uma determinada tipo-
vés de recursos gráficos, as letras podem fornecer outras in-
grafia para seu site, procure sempre proporcionar uma leitura
formações sobre o contexto da mensagem, através de seu
rápida, confortos visual e cognitivo. Além de ler facilmente,
contorno, proporções, peso, cor etc. Dependendo do trata-
é preciso também compreender facilmente a mensagem, o
mento tipográfico, um simples alfabeto pode transmitir hu-
conceito que se quer passar ao usuário.
mor, dramaticidade e uma série de outras emoções. Em meios digitais, a tipografia deve ser adequada à baixa resolução das telas, ao brilho dos monitores e à distância de leitura. Nos
Dicas
sites com grande quantidade de texto ou nos projetos onde
:: Usar fontes fantasia (‘desenhadas’ ou temáticas) apenas
seja preciso otimizar a busca por informações, a legibilidade
para títulos. Veja alguns exemplos dessas fontes:
exerce maior influência na opção do tipo. Produzir um texto
Brushstroke (Brushstroke) B l u r r d (Blurrd) (CherryBomb)
Curiosidade Duas novidades de origem chinesa revolucionaram a his-
:: Para textos corridos, não devem ser utilizadas as fontes
tória da impressão: o papel e a xilogravura (e também
fantasia. Dê preferência a fontes nativas do Windows que
xilografia), a fase de impressão anterior à tipografia que
podem ser visualizadas em qualquer computador, como
consiste em imprimir imagens e textos por meio de pran-
Verdana, Tahoma e Arial. Evite as fontes com serifa como
chas de madeira gravadas em relevo. Seu emprego na
a Courier ou Times, que dificultam a leitura.Veja:
Europa começou no século XV, com a ilustração de cartas
A tipografia que escolhi para digitar esta frase foi
de baralho e manuscritos de origem religiosa.
a Verdana.
A tipografia veio logo a seguir, também usando o mesmo método de impressão em relevo. Enquanto na xilotipia os caracteres ficam presos ao bloco de madeira (como num carimbo fixo), na tipografia as letras são soltas, podendo ser trocadas e reutilizadas à vontade. A tipografia foi rapidamente difundida, pois trouxe mais velocidade na reprodução. Ao acabarem com a fase de impressão de manuscritos, esses primeiros tipógrafos foram também os primeiros editores, pois encontraram elementos e soluções para facilitar a leitura como tamanhos de linhas, letras, paginação, que vieram a ser padronizados posteriormente. Fonte: site IBGE.
A tipografia que escolhi para digitar esta frase foi a Courier. A tipografia que escolhi para digitar esta frase foi a Arial. :: Atualmente, uma grande variedade de fontes digitais vêm sendo desenvolvidas. São fontes desenhadas especialmente para visualização na tela do computador, o que requer um tratamento gráfico diferenciado. Fontes para meios digitais normalmente apresentam formas mais simples, baseadas nas limitações de resolução dos monitores, e levam em conta a emissão de luz para que percebamos suas formas.
21
Curiosidade
Sites de fontes gratuitas
Formas tipográficas inspiradas numa opção que anteriormen-
Nesses sites pode se baixar fontes gratuitamente, com ver-
te era uma limitação; resultam de tipos alfanuméricos gerados
sões para PC e Mac:
obedecendo a uma matriz retangular de pixels (bitmap) de
www.dsg4.com/04/extra/bitmap/index.html
baixa resolução, característica das primeiras fontes digitais
www.1001freefonts.com
produzidas para impressoras de agulha e para uso nas telas
www.acidfonts.com
de videogames, de monitores de computadores e em relógios
www.fontfreak.com
digitais com display de cristal líquido.
abcdefghijklm
www.larabiefonts.com www.fontfile.com www.free-fonts.com www.coolarchive.com
fonte: 04bo3
www.007fonts.com
abcdefghijklm
www.webfxmall.com/fonts
fonte: 04b03b
www.fontface.com
abcdefghijklm fonte: 04b08
abcdefghijklm fonte: 04b11
Livros Indicados
"Gill Sans" (Gustavo Piqueira) "Capitular Collage" (Tide Hellmeister) "Psicodélicas: um tipo muito louco" (Carlos Perrone) "Como se pode fazer tipografia suiça?" (Wolfgang Weingart) "Pensar com Tipos" (Ellen Lupton) "Elementos do Estilo Tipográfico"(Robert Bringhurst)
www.fontshop.com www.fontparadise.com simplythebest.net/fonts www.abstractfonts.com www.highfonts.com www.downloadfreefonts.com
22
equilíbrio Um website deve estar visualmente harmônico e equilibrado.
bom espaço para valorizar produtos ou serviços que precisam
Isso significa que, ao diagramar, deve-se distribuir os elemen-
se destacar no mercado. Para apresentar produtos, faça um
tos e informações de maneira homogênea pelo site, evitando
corte de modo que sejam eliminados elementos não-informa-
a concentração de informações em um determinado espaço
tivos, supérfluos e que realce as informações importantes.
ou um grande vazio em outro, exceto quando o conceito do
Cuidado com a redução, ela pode deixar a sua imagem abs-
próprio site exigir uma diagramação mais assimétrica propo-
trata. Você pode pegar fotos de bancos de imagens gratuitas
sitadamente.
ou até fazer sua própria produção. Utilize o mesmo tratamen-
Em uma composição, a proporção das partes, juntas, deve transmitir a mensagem visual como um todo. Ou seja, cada forma inserida na estrutura deve ser considerada como elemento do esquema total. Para se conseguir elaborar uma composição harmônica para o site, deve-se realizar a combinação ordenada das for-
to gráfico para todas as imagens e cuide para que o zoom seja o mesmo. Caso você decida recortar as imagens (eliminando o fundo) ou utilizar molduras, (algum filtro do Photoshop), faça o mesmo com todas as fotografias.O importante é que imagens, fotografias ou ilustrações tenham as mesmas características entre si.
mas. E aqui vai uma dica: faça muitas experimentações, dis-
Esteja certo do seu objetivo e, caso necessário, destaque
tribuindo os elementos no espaço que você possui. Veja qual
apenas um produto ou serviço. Não concorra com você mes-
delas apresenta maior dinamismo, atração e conforto visuais.
mo. Quanto mais elementos “destacados”, menos importância
Tratamento de Imagens
será dada a cada um. Por isso, pense no seu objetivo para fazer
De acordo com o objetivo da empresa, a homepage é um
o seu layout, valorizando os pontos mais importantes.
Tratamento de Imagens
www.gallaher.com.au
www.netshoes.com.br
Aqui se explorou o tratamento duotone, obtendo um resultado
Os produtos à venda neste site estão todos na mesma perspectiva,
uniforme.
sobre um fundo branco com o mesmo corte e proporção.
23
Harmonia vs. Equilíbrio
www.borat-filme.com.br - não está mais no ar
http://themes.purelayers.com/contrast/
Este site foi desenvolvido com desequilíbrio, desarmonia, incoerência
Trabalho de imagens e muito coloridas porém absolutamente
enfim uma total falta de lógica visual. Porém, tudo isso foi pensado de ma-
equilíbrado.
neira intencional, já que o ideal do cliente era algo bem trash mesmo. No entanto, é um ótimo exemplo de tudo o que não se deve fazer, a não ser, é claro, se seu briefing for direcionado para este tipo de produto.
www.aol.com
www.camiseteria.com
Este buraco no informativo gera um desequilíbrio, como se a página fosse
Esta estrutura é bastante equilibrada, transmitindo confiança ao cliente.
tombar para esquerda. Fora isso um bloco vazio demonstra fragilidade na
Todos os boxes são bem divididos e distribuídos de forma coerente. As
estrutura. Com este tipo de falha, você gera insegurança e pode diminuir a
cores foram bem aplicadas.
confiança do seu cliente.
www.maritaca.art.br Neste caso a diagramação, criou um bloco um pouco pesado na base do site. Ele possui boas idéias, mas seria preciso verificar o que deve ser
http://br.sportingbet.com
eliminado e o que pode ser aproveitado para o ambiente ficar mais leve e
Aqui pode-se notar uma boa divisão de informações e navegação por
confortável para a leitura.
cores o que torna a navegação fácil, rápida e agradável visualmente.
fim do módulo 1
design
bibliografia Lupton, Ellen. Pensar com Tipos. São Paulo: Cosac Naify Cardoso, Rafael. Uma introdução à história do design. São Paulo: Edgard Blucher Guimarães, Luciano. As cores na mídia. São Paulo: Annablume Guimarães, Luciano. A cor como informação. São Paulo: Annablume Gomes Filho, João. Gestalt do objeto. São Paulo: Escrituras Janson, H. W. Iniciação à história da arte. São Paulo: Martins Fontes Brito, Ronaldo. Neoconcretismo. São Paulo: Cosac e Naify Wiedemann, Julius. Coleção WebDesign. Cologne, Germany: Taschen Nielsen, Jakob. Homepage: 50 websites desconstruídos - Rio de Janeiro: Campus 2002 Radfahrer, Luli. Design/web/design2. São Paulo: Market Press Krug, Steve. Não me faça pensar. São Paulo: Market Books Nielsen, Jacob. Projetando Websites. Rio de Janeiro: Campus 2000 Van Camp, Freddy - Apostila de Design Tableless: de volta à simplicidade. REVISTA WEBDESIGN. Ano 2. n. 16 - Abril de 2005. Sobe ou desce. REVISTA WEBDESIGN. Ano 2. n. 24 - Novembro de 2005. Web2.0: vamos experimentar a evolução da internet?. REVISTA WEBDESIGN. Ano 3. n. 25 - Janeiro de 2006. Seu site está no ar!. REVISTA WEBDESIGN. Ano 3. n. 35 - Novembro de 2006. Aperte o play... e saiba como utilizar vídeos para aumentar a interatividade de seu site!. REVISTA WEBDESIGN. Ano 4. n. 41 - Maio de 2007. REVISTA WEBDESIGN. Ano 2. n. 44 - Agosto de 2007.
Sites de referência: www.googleanalytics.com.br ( imagens com valores fictícios) www.webarchive.org