Dicas para melhorar seu design

O Photoshop um grande aliado para ajudar no seu design e este tutorial fornece algumas dicas importantes para
voc :) ...
As dicas que voc estar lendo so baseadas em informaes que obtive durante alguns anos de design aprendi
trabalhando com publicidade em mdias fotogrficas e agncia de publicidade - por isso essas so dicas pessoais :)
...
Aprendi no comeo de carreira com um grande amigo de profisso que cada designer adquire seu estilo medida
que comea a observar outros designers. Uma primeira dica observar tudo ao seu redor: outdoors,
cartazes, folders, televiso, propagandas, rtulos, embalagens e tudo mais relacionado a comunicao. medida
que voc comea a selecionar o que lhe agrada e descartar outras que no
considera legal, voc comea a ganhar um estilo prprio - e o mais legal que medida
que o tempo passa e seus trabalhos comeam a aparecer, outras pessoas reconhecem voc pelo seu estilo.
gratificante.
O Photoshop um grande aliado para ajudar no seu design - assim como o Painter e outros softwares - mas
vamos ficar por enquanto com o nosso bom e velho Adobe Photoshop ;) ...
Um bom layout, sempre comea com um fundo.

1
Fundos
A escolha de um fundo muito importante pois voc pode realar as informaes ou apag-las. Eu costumo ver
folders, panfletos e sites com fotos inteiras como fundo e eu no sou contrarrio a isso quando se trabalha
com opacidade certa, com resoluo adequadas e uma foto bem tratada. O problema que eu tenho visto coisas
"horrendas" aonde o arte-finalista coloca a foto estourada, com uma opacidade de 50, 60% - e ainda joga aquela
enxurrada de informaes fazendo com que voc no saiba o que ver primeiro. Resumindo: uma poluio total !
Seja coerente na hora de se colocar fotos de fundo: uma boa alternativa colocar fotos em PB com opacidades de
10 a 25% dependendo do contedo. Fundos chapados, para empresas srias, costuma-se utilizar cores mais
neutras como o cinza, o azul 30%, amarelo 20% (pois so cores que transmitem seriedade). Quando o trabalho
trata-se de empresas mais comunicativas, procure utilizar cores mais quentes pois estas aproximam as pessoas.
O gradiente uma boa opo para quebra de visual alm de equilibrar o layout:

2
Fontes
Acredito que a web uma forma incrivelmente perfeita de reunir informaes; contudo eu prefiro imprimir do que
ler. A web no deve ser tratada da mesma forma que os impressos pois em mdias impressas pode-se utilizar
fontes pequenas e finas - mas nos sites procure utilizar fontes bolds e de fcil leitura. Eu dou preferncia
a pargrafos pequenos e o uso de negritos e itlicos para possibilitar que o leitor percorra todo a pgina
rapidamente captando os pontos importantes. sua tarefa inventar modos de prender o interesse do visitante.
Nas mdias impressas ocorre de forma parecida - s que fica mais fcil abusar dos textos e diferenciao das
fontes e estilos. O Photoshop um ambiente ideal para criar elementos grficos e tipos na web pois as camadas
do Photoshop permitem que voc empregue toda a espcie de efeitos.

3
Cores
na
web
Criar arte-final colorida para a web muito diferente de outras mdias de transferncia de cores pois neste caso
voc est publicando seu trabalho nas telas dos outros usurios em vez de faz-lo em pginas impressas como a
de um folder ou catlogo. Cores baseadas em PC so compostas por luz projetada e pixels em vez de pigmentos
de
tinta,
padres
de
pontos
e
percentuais
de
tela.
Trabalhar com cores na tela mais interessante do que em outro tipo de mdia - como a impressa que utiliza
tintas. Voc pode fazer os testes e no precisa de prova de cor. A web bem diferente dos impressos pois voc
tem diversas variveis para seu trabalho (os usurios visualizam seu trabalho em monitores com uma grande
variedade de definies de profundidade de bits). Muitos monitores de computador tm uma calibrao de cores e
padres de gama diferentes e h tambm a interferncia dos sistemas operacionais na forma de exibio das
cores.

4
Diferena
entre
RGB
e
CMYK
A cor de um pixel formada por trs cores de luz projetadas que se misturam oticamente. As luzes projetadas
formam as cores vermelho, verde e azul (Red, Green e Blue). Aps misturadas essas cores criam um espao de
cor chamado RGB. J o CMYK formado pelas cores ciano, magenta, amarelo e preto (Cyan, Magenta, Yellow e
blacK). O espao de cor CMYK em um computador utilizado para simular cores de tintas impressas e por este
motivo o padro para grfica sempre o CMYK. Para mdias fotogrficas utiliza-se o RGB como fechamento de
arquivo
(apesar
do
controle
na
revelao
ser
em
CMYK).
Bem, ficam aqui as minhas dicas e espero que sejam teis na hora que voc estiver criando um impresso ou um
site. Eu pretendo em breve publicar mais sobre cores - e talvez eu coloque um tutorial sobre cores protegidas para
navegadores e seus cdigos (cores com hexadecimal) :) ...

Diferena entre um arquivo RGB e CMYK

Publicado por: dbaoracleinfnet em: julho 10, 2009

Em: Cores
Comente!

Quando comeamos a manipular arquivos de imagens em softwares para tratamento de imagem como o
Photoshop (software de tratamento de imagens mais famoso do mundo), nos deparamos com a
possibilidade de trabalhar em RGB ou CMYK, mas o que cada um e para que servem?
Antes de mais nada, preciso sabermos que existem 2 tipos de cores: As cores da luz e as cores das tintas,
ou pigmentos.

O que RGB
RBG uma nomenclatura proveniente das palavras Red, Green e Blue que so as trs cores da luz,
ou melhor, a luz composta por essas trs cores como vimos no segundo grau naquela experincia com
um prisma. Todos os milhes de cores que nossos olhos capturam, so na verdade a combinao dessas
trs cores.

O que CMYK
CMYK a nomenclatura proveniente das palavras Cyan, Magenta, Yellow e Blak. No caso do
Black, a letra escolhida para compor a nomenclatura o K e no o B, evitando assim que haja uma
confuso com a cor Blue como no RGB. Tambm no caso do CMYK, a mistura de porcentagens das
quatro cores d origem a outras milhes de cores.
Portanto para facilitar e a grosso modo, RGB so as cores da luz e CMYK as cores das tintas.

Diferena entre um arquivo RGB e CMYK

Aps esta rpida explicao sobre a diferena entre RGB e CMYK, fica mais fcil saber quais as
diferenas entre um arquivo e outro.

RGB O formato RBG deve ser utilizado quando as imagens forem utilizadas em meios digitais como, por
exemplo, monitores, ou seja, no sero impressas. Este o caso das imagens para web que sero
mostradas em home pages ou individualmente atravs do monitor do seu computador.
CMYK O formato CMYK utilizado quando as imagens forem impressas, ou seja, ao tirar uma foto, por
exemplo, se voc for utiliza-la em uma revista, cartaz, folder, ou qualquer outro tipo de impresso, essa
imagem deve ser transformada em CMYK.

importante saber que quando transformamos uma imagem de RGB para CMYK, as cores so levemente
modificadas, o que pode causar problemas no resultado final da impresso, pois a mesma no ser igual a
que o cliente est esperando, por isso importante a impresso de provas e da aprovao da cor pelo
cliente antes da impresso final.
Diferena entre um arquivo RGB e CMYK um dos assuntos abordados na formao Imagem e
Ilustrao Digital do Instituto Infnet.

Sistemas de cores CMYK e RGB

Uma noo trivial para publicitrios e designers, os sistemas de cores podem assustar quem est
comeando na rea. Neste post vou tratar as principais diferenas entre CMYK e RGB.
RGB
Red Green Blue
(Vermelho, Verde, Azul)

Este o sistema de cores usado pelos monitores de computadores, cmeras digitais, scanners e afins.
um sistema de cor luz, ou seja, que emite informaes de luz em trs nveis, formando preto (nenhuma
luz) ou branco (mxima iluminao) ou tonalidades de cor baseado em quanto se tem de vermelho, verde
ou azul.
Cada uma das tonalidades do RGB variam de 0 a 255. Quanto mais prximo do zero, mais escuro, ou
seja, menos luz. Quanto mais prximo do 255, mais claro, mais luz.
Exemplos:
R
R
R
R
R

000
255
255
000
000

G
G
G
G
G

000
255
000
255
000

B
B
B
B
B

000
255
000
000
255

=
=
=
=
=

preto
branco
vermelho
verde
azul

As cores que escolhemos para web so formadas com o sistema RGB, a diferena que usamos o sistema
em hexadecimal. Cada cor formada por 6 dgitos ou letras. As duas primeiras para o R, as do meio para
o G e as duas ltimas para o B. Variam de 0 a 9 e de A a F. Quanto mais prximo de zero, menos
intensidade de luz e quanto mais prximo de F, mais iluminao.
Exemplos:
#000000
#FFFFFF
#FF0000
#00FF00
#0000FF

=
=
=
=
=

preto
branco
vermelho
verde
azul

CMYK
Cyan Magenta Yellow blacK
(Ciano, Magenta, Amarelo, Preto)

CMYK a cor formada por pigmentos. o sistema usado para a impresso. Como a base da impresso
o papel, o fundo geralmente j branco e a medida que vamos adicionando tinta, vamos escurecendo a
impresso. Cada uma das cores pode variar de 0 a 100%. No CMYK temos um processo inverso, quanto
mais prximo do 100, mais pigmento existir na impresso e mais forte ser a cor. Ento quanto menos
porcentagem, menos cor, menos pigmento. Quanto mais pigmento, mais escuro.
C
C
C
C
C

000
100
000
000
000

M
M
M
M
M

000
000
100
000
000

Y
Y
Y
Y
Y

000
000
000
100
000

K
K
K
K
K

000
000
000
000
100

=
=
=
=
=

branco
ciano
magenta
amarelo
preto

Como a mistura dos trs pigmentos, CMY, no forma o preto puro, foi acrescentada a cor preta para dar
um bom acabamento s impresses. Quem j fez mistura de tintas quando era criana, deve lembrar bem
que, aps misturar todas as cores dos potinhos de tinta guache, o resultado era uma cor marrom escura.
O RGB, como visto atravs de iluminao tende a ser brilhoso, j CMYK tende a possuir menor brilho.
Estes efeitos podem ser alcanados usando um papel brilhoso ou uma aplicao de verniz sobre a
impresso. No vou entrar em detalhes sobre estes processos agora.
A sugesto que eu deixo : trabalhe sempre em RGB no seu computador. Isso porque as imagens que
usamos so captadas no sistema RGB. Quando terminar o layout, transforme em CMYK e observe o
resultado. Faa os ajustes necessrios. Depois, salve o arquivo como um TIFF e mande para a grfica.

A diferena entre os padres CMYK e RGB no

design
Os padres CMYK e RGB so padres de cor utilizados em design de projetos, na criao de materiais grficos, webdesign, material destinado a
publicidade impressa, e uma infinidade de outras situaes.
Qual a diferena entre estes padres?
CMYK corresponde s iniciais das cores Cian (ciano), Magenta (magenta), Yellow (amarelo) and Black (preto).
Este um padro de quatro cores primrias, que combinadas formam cores ilimitadas. O padro CMYK mais usado para impresso em papel, onde
4 cores de tinta geram uma qualidade final melhor do que apenas 3.
RGB corresponde s iniciais das 3 cores Red (vermelho), Green (verde) e Blue (azul). Este pado utilizado para exibio em monitores de
computador e televisores em geral.
Devido a esta diferena de padro que uma mesma imagem vista no monitor apresenta leves alteraes na tonalidade das cores ao ser impressa.
Alguns programas grficos como o Corel Draw incorporam filtros, que tentam mostrar no monitor a imagem exatamente como ser impressa.
Ao criar o design para um formato preciso ter em mente qual o suporte ser utilizado. No caso de imagens para web o padro adotado deve ser o
RGB, enquando que, em se tratando de materiais impressos, deve-se utilizar o padro CMYK ou outro de acordo com especificaes tcnicas do
projeto adotado pelo designer.

Alm do CMYK e do RGB existem vrios outros padres de cores, como o Pantone. Neste caso ao invs de um certo nmero de cores primrias que
so combinadas para gerar as demais, h uma tinta para cada cor que ser utilizada na impresso. Isto garante que a cor impressa seja exatamente a
mesma que vista no mostrurio, entretanto no permite usar muitas cores diferentes no mesmo impresso, j que seria necessrio o uso de uma tinta
diferente para cada cor.
Lebramdo que o desenvolvimento de uma pea para impresso deve levar em conta que quanto maior o nmero de cores utilizadas no design do
material maior o custo de impresso.
As imagens em formato CMYK geradas aps o trabalho de design geralmente so exportadas na extenso tiff. Justamente pela impossibilidade de
apresentar estas imagens em um browser no h uma imagem de exemplo para este formato.

rvore do TI
A rea de desenvolvimento, seja no TI, seja no design, propriamente dito, sofre com a imensa dificuldade de
comunicao entre as partes envolvidas no processo.
O cliente muitas vezes pede algo que nem mesmo sabe explicar. O resultado que nem sempre os
objetivos do cliente so satisfeitos da forma como ele deseja gerando insastifao.
Este assunto matria discutida largamente em cursos de gerncia de TI, gesto de pessoas e equipes.
Lendo sobre o assunto encontrei um desenho que traduz bem a realidade:

1 Como o cliente explicou o que precisa

2 Como o gerente de projetos entendeu
3 Como o analista projetou
4 Como o programador escreveu
5 Como o consultor de negcios descreveu
6 Como o projeto foi documentado
7 O que o setor de operaes instalou
8 Como o cliente foi cobrado
9 Como o cliente obteve suporte
10 O que o cliente realmente precisava
Est a uma boa lio: simplicidade pode ser o melhor dos caminhos.
Aproveito para deixar uma mensagem fantstica do dalai lama:
Perguntaram ao dalai lama:
O que mais te surpreende na humanidade?
E ele respondeu:
- os homens porque perdem a sade para juntar dinheiro, depois perdem dinheiro para recuperar a sade.
E por pensarem ansiosamente no futuro, esquecem do presente de tal forma que acabam por no viver nem o
presente nem o futuro.
E vivem como se nunca fossem morrer e morrem como se nunca tivessem vivido.

SEJA A MUDANA QUE VOCE QUER VER NO MUNDO!

Guia SEO para Designers e Webdesigners

O termo SEO acrnimo para Search Engine Optimzer, que pode ser entendido como Otimizao para mquina de busca (buscadores).
Equivaleria a dizer: como otimizar meu site para que ele aparea bem colocado em uma busca do Google, por exemplo?
De acordo com levantamentos realizados por diversos sites especializados, fica cada vez mais evidente que o uso de ferramentas de otimizao de
fundamental importncia para adquirir bom posicionamento em de sites de busca. Diariamente pessoas tomam contato com alguma informao
relativa otimizao de sites. Mesmos proprietrios de sites, a princpio leigos em tecnologias relacionadas ao universo web, esto cada vez mais
solititando das empresas administradoras de seus sites, o oferecimento de servios de otimizao e cadastro em buscadores visando alcanar melhores
resultados nas diversas mquinas de busca existentes na web.
Muitos designers ignoram ou mesmo desconhecem a importncia de tcnicas de otimizao de sites, por considerar que no lhes cabe atuar nesta
rea. Ocorre que durante a confeco de um website, o trabalho de um webdesigner est repleto de aspectos relacionados aos servios de otimizao
e muitos destes profissionais desconhecem esta possibilidade. Muitas vezes, bastaria apenas uma mudana de postura durante a fase de diagramao
do website e gerao de contedos, para criar pginas mais legveis aos mecanismos de busca.
J h algum tempo venho realizando pesquisas em diversos canais disponveis na internet e fora dela tentando alcanar informaes acerca do
processo de otimizao de sites. O fato que a literatura sobre o assunto ainda no ampla e alguns recursos utilizados por vitoriosos no mundo dos
search engines ainda so guardados a sete chaves ou so de certo modo obscuros. Entretanto, h certos erros, que ocorrem frequentemente
durante o processo de desenvolvimento praticado por webdesigners e programadores que podem ser evitados elevando consideravelmente a
legibilidade do website criado para os spiders (robs espies dos buscadores).

Por que importante conhecer tcnicas de SEO?

Primeiramente, cabe dizer: SEO no apenas para profissionais da rea de Marketing. Como webdesigner ou desenvolvedor de contedo,
grande parte dos servios de otimizao denominados on-dev-site SEO so de responsabilidade destes profissionais.
Se o seu site no amigvel para as mquinas de busca, entendendo como amigvel, ser visto, enxergado e completamente interpretvel,
provvel que voc esteja perdendo grande nmero de visitantes. Boa parte destes visitantes, os quais voc jamais saberia.
bom ter em mente que se um internauta no digitar o endereo do seu site (www.seusite.com) no browser ou se no existir referncias
para seu website na web atravs de outros sites por exemplo, a nica forma de algum visitante encontrar seu contedo ser atravs de
mecanismos de busca, como Google, Yahoo,etc.
H muitos benefcios em ter um site otimizado e amigvel a mecanismos de busca. O fato de um site apareer bem posicionado em um
mecanismo de busca uma publicidade gigantesca a custo praticamente igual a zero.
Um site otimizado ser melhor entendido por uma ferramenta de busca e ir garantir maior nmero de visitas elevando consideravelmente
a publicidade do seu contedo.
SEO um considerado um skill. Este termo muito comum em jogos de video game e significa habilidade. bastante apropriado dizer
que adquirir conhecimentos de SEO agrega valor profissional ao webdesigner, uma vez que este poder vender servios de otimizao,
alm de ser um diferencial no seu currculo. Futuramente, saber utilizar recursos de SEO ser condio se en qua non para um
webdesigner.

Em seguida irei mostrar algumas tcnicas bsicas para evitar erros comuns de desenvolvimento que podem impedir que um rob de busca seja capaz
de enxergar seu website corretamente num universo de milhes de pginas disponveis na internet.
Antes vamos entender um pouco do funcionamento de mecanismos de busca.

Como funcionam as Search Engines (Mquinas de busca,

comumente denominadas Mecanismos de buscas?

Cada buscador tem seu prprio programa de busca denominado web spider ou web crawler. O termo crawler significa rptil rastejante. De certo
modo, justamente o que faz uma mquina de busca: rasteja pela internet, rente ao solo, buscando os mnimos detalhes, tentando apontar para os
diretrios mais ocultos, para os documentos mais esquecidos, gerando uma verdadeira base de dados.

O propsito bsico de uma mquina de busca justamente ler e coletar toda informao possvel de ser encontrada, seguindo links (internos e
externos) para depois depositar toda esta informao em uma base de dados gigante denominada Index.
Quando um internauta solicita uma busca atravs de um mecanismo, como Google ou Yahoo, o trabalho do buscador resume-se a encontrar a
informao armazenada em seu banco de dados que seja mais relevante e aproximada daquilo que foi requisitado.
O que move um mecanismo de busca ou o faz parar o quo bem foi respondida uma questo, quando um busca solicitada. O comportamente de
um buscador baseado em um algortmo constitudo de uma srie de fatores que juntos so utilizados para dizer se uma pgina realmente relevante
em relao a uma busca realizada.
bem verdade que a relao semntica estabelecida pelas mquinas na tentativa de oferecer aquilo que o usurio deseja atravs de uma busca
rotineira ainda bastante precria e precisar evoluir muito para ser capaz de representar o entendimento das coisas do mundo.
No artigo denominado: INFORMAO, REPRESENTAO E COMUNICAO: OS PILARES PARA A WEB SEMNTICA da revista Gesto
do Conhecimento, Cludio Jos Silva Ribeiro menciona que pouco adianta tanta informao disponvel se no possvel distinguir quais so as mais
relevantes que satisfazem as condies estabelecidas pelos usurios. justamente neste sentido que as mquinas de busca ainda precisam evoluir. Por
exemplo, ao digitar num buscador: modelos de sites, o que se espera que o buscador aponte para um endereo semelhante a modelosdesites.info, ou
seja, que o endereo eletrnico contenha as palavras utilizadas na busca, no entanto, no isto que acontece sempre.

Eu posso ser um Search Engine Optimizer?

H no mercado brasileiro e mundial, empresas e profissionais vendendo servios de cadastro em sites de busca e de otimizao de sites com o
objetivo de melhorar o posicionamento de websites em buscadores. um novo campo que se abre. E tenha certeza que entend-lo e praticar todas
estas tcnicas a fundo (no este o objetivo deste artigo) demanda tempo considervel e em pouco tempo ser seguramente um departamento de
muitas empresas de desenvolvimento e criao de contedo para internet.
Cada mecanismo de busca possui seu algortmo de busca. No entanto, entender ao menos em linhas gerais, os fatores que influenciam o algortmo
afetando o posicionamento no resultado de uma busca relativamente fcil e pode contribuir em muito para alcanar resultados bem interessantes.
Alm do que conhecer estas tcnicas pode se tornar uma boa fonte de renda.
Um trabalho de SEO possui dois aspectos: On-dev-site SEO e Off-dev-site SEO.

On-dev-site SEO (Tcnicas de desenvolvimento e otimizao on-site): so aes que voc pode tomar diretamente no seu site, como
interferir, alterar e otimizar tags de HTML, cabealhos de pginas, palavra-chave, links internos, estrutura do site, etc.
Off-dev-site SEO (Tcnicas de desenvolvimento e otimizao off-site): so aspectos que voc no tem pouco controle, como por exemplo,
quantos links externos apontam para o seu site ou quantas pessoas visitam seu site. Embora, existam algumas atitudes que possam ser
tomadas para melhorar este aspecto, no objetivo deste artigo trat-las aqui.

O guia apresentado, como j foi dito, fruto de trabalhos de pesquisas em diversos sites na internet, bibliografia variadas, alm daquilo que venho
aplicando em meus sites. Os mtodos aqui discutidos podem ser utilizados por designers, webdesigners e desenvolvedores. O foco so as tcnicas
relacionadas ao On-dev-site SEO.
Uma dica importante: produza contedo de qualidade, atrativo e interessante. Aplique corretamente as tcnicas On-dev-site SEO e certamente os
aspectos relacionados ao Off-dev-site SEO comearam a caminhar por si s, sem que voc tenha que mexer bravamente seus dedos. Em algum tempo
voc conseguir adquirir social bookmarks (links na web) apontando para o seu site, alm de bons backlinks (links de outros sites), inclusive, sites
de respeito enviando usurios para o seu domnio.
H algumas tcnicas Off-dev-site que voc pode utilizar para alcanar retorno mais rpido, como por exemplo, troca de banners. No entanto,
assunto para outro post.

Os erros de SEO mais comuns cometidos por Designers e

Webdesigners

1 Splash Page (tambm conhecida como pgina de apresentao)

Este erro ainda bastante comum e pode ser encontrado com facilidade na internet. Ao no ser que posio em buscadores no seja importante em
seu projeto, jamais coloque uma pgina de abertura em seu site. H sites muitos especficos e populares que utilizam esta tcnica e lanam modismos
que acabam arrastando designers e desenvolvedores mais desavisados. Justamente por pensarem que esto fazendo algo inovador ou ainda por
acharem que esto participando da moda. preciso lembrar que uma grande empresa em geral possui um pblico fiel ao seu contedo ou mesmo
um produto j consolidado no mercado e uma mudana drstica em seu site a ponto de retirar a pgina inicial dificilmente ir causar grande perda de
visitao. Outro ponto que estas empresas j possuem um pblico regular acostumado a acessar o seu contedo. Empresas com grande oramento
para publicidade, como a Coca-Cola, por exemplo, podem investir na criao de uma pgina de entrada contendo apresentaes complexas e cheias
de efeito em flahs criados para atrair o visitante. O que nem sempre fcil para outras empresas, que possuam um oramento mais modesto.
Colocar uma pgina de entrada em seu site dizendo: Clique aqui para entrar o maior dos erros que voc poder cometer. Se for uma pgina toda
em flash, o pecado torna-se mortal. Uma vez que links inseridos dentro de arquivos em flash so impossveis de serem seguidos por spiders e
crawlers.
A estrutura interna do seu site (pginas internas) no sero reconhecidas pelos robs de busca se no existirem links apontando para dentro do site.
Ou seja, todo o seu site ficar completamente invisvel.
A sua homepage precisa incluir, minimamente, algumas palavras chaves e links apontando para as pginas internas do seu site.
2 Menus em flash
Os robs de busca so buscadores baseados em textos. Este fator deve ser levado em conta toda vez que se pensar em produzir contedo objetivando
otimizao. Mecanismos de busca enxergam textos. Portanto, inserir menus em flash, com efeitos de sombras, esmaecimento e outros recursos
grficos pode ser muito bonito e impactante, mas do ponto de vista de otimizao um grande erro, j que os links inseridos em elementos em flash,
como j mencionado, no podem ser seguindos por robs buscadores.
3 Imagens e contedo em flash
Web spiders (robs de busca) so baseados na busca textual, como j mencionado, portanto, eles no podem ler textos inseridos em imagens e
arquivos em flash. Muitos designers cometem o srio erro de inserir contedo, sobretudo, palavras-chaves em arquivos em flash e imagens.
4 Uso excessivo da tecnologia Ajax
Muitos designers tentam impressionar seu visitante implementando massivamente efeitos em Ajax, particularmente, com objetivos de
navegabilidade. No entanto, este tipo de artifcio constitui-se em dos maiores erros de otimizao. Por que? O contedo baseado em Ajax carregado
dinamicamente. Ocorre que neste caso, o robs de busca e indexadores no so capazes de realizar a indexao do contedo.
5 Localizao dos arquivos do site
Por algum motivo, alguns designers costumam alterar com frequncia a localizao dos temas e arquivos de seus sites, distribuindo-os em
subdiretrios (por exemplo: dominio.com/v1, v2, v3) e criar redirecionamentos para estes novos diretrios. Mudar constantemente a localizao dos
arquivos do site pode causar a perda de links que apontam para seu site e interferir no seu rankeamento em buscadores.
6 Clique aqui para ver, acessar

 bastante comum e pouco inteligente o uso do Clique aqui ou Leia mais como um link de texto. Seria timo, se seu objetivo fosse concorrer e
aumentar o seu rankeamento para as expresses (que nada dizem) clique aqui ou leia mais. No entanto, se o seu objetivo que o seu contedo seja
reconhecido pelo que realmente significa do ponto de vista semntico, preciso utilizar palavras mais instrutivas que realmente sejam capazes de
dizer alguma coisa. Utilize termos relacionados ao tpico/ assunto em questo. Use uma palavra-chave que seja mais relevante e objetiva. Se o
objetivo levar o cliente at um texto que fala sobre o desmatamento da Amaznia, ento escreva: clique aqui para saber mais sobre o desmatamento
da Amaznia e no simplesmente clique aqui para mais informaes. Isto no mnimo ineficiente.
Importante: No use a mesma palavra-ncora em vrios lugares em seu site. Este tipo de recurso pode ser visto pelos buscadores como indcio de
spam.
7 Erros mais comuns na utilizao da Tag Title
Textos iguais ou parecidos dentro da tag title
Cada pgina do seu site deve possuir uma <tag title> nica, com suas palavras-chaves especficas. Muitos desenvolvedores cometem o erro de
utilizar tags de ttulos iguais ou similares em todo o site. Isto o mesmo que dizer para os buscadores: cada pgina do meu site igual, portanto, no
tenha o trabalho de percorrer todas elas. Isto abrir mo da exclusividade de cada contedo disponvel em cada pgina do seu site.
Um exemplo de pssima utilizao da tag title so os temas padres do WordPress. As tags title padro do WordPress so: Nome do site/ Arquivo do
blog/ Ttulo do post. Por que o padro utilizado pelo WordPress no amigvel aos buscadores? Porque cada post do blog ter o mesmo padro na
parte inicial da tag title, repetindo: Nome do site/ Arquivo do blog/. Se voc realmente desejar incluir o nome do site na tag title, este dever estar
presente no final da sequncia: Ttulo do post/ Nome do site.
Exceder a quantidade limite de 65 caracteres
Escrever tags title com muito longas. Os mecanismos de busca iro mostrar a tag title das pginas como cabealhos e links atravs dos quais os
usurios iro acessar o contedo do site. Voc tem aproximadamente 65 caracteres (incluindo espaos) para passar a sua mensagem ou correr o risco
de perder pblico.
Excesso de palavras na tag title
Outro tipo comum de erro a colocao de muitas palavras na tag title. Escrever a mesma coisa 3 ou mais vezes no ir tornar sua pgina mais
relevante para os mecanismos de busca. O excesso de palavras na tag title visto como tcnica de spam pelos buscadores. preciso ser esperto para
repetir a mesma palavra vrias vezes de diferentes formas. Veja o exemplo:
Dicas de foto e tcnicas fotogrficas para belas imagens
Observe que foto e fotografias so palavras com a mesma raiz (foto). Este tipo de artifcio pode contribuir para aumentar sua audincia e seu
desempenho em buscadores.
8 Atributo Alt de imagens vazio
Voc sempre dever descrever sua imagem atravs do atributo alt. O atributo alt que ir identificar sua imagem e demonstrar a relevncia do
contedo de sua pgina. Buscadores no enxergam imagens e para reconhecer o contedo do seu site atravs das ilustraes necessrio o uso do
atributo alt.
Dica: Descrever as imagens do seu site corretamente pode favorecer o aparecimento do seu site em posies destacadas em buscas de imagens.
Vrios visitantes podem chegar at seu site atravs da busca de imagens. Suponha que um usurio esteja buscando por imagens de computadores e ao
digitar esta palavra em um buscador, o seu site contendo um artigo sobre a evoluo dos computadores tenha aparecido nos primeiros lugares, devido
ao atributo alt de uma imagem presente neste artigo. Observe que neste caso, o usurio pode ter sido levado ao seu site para acesso a um artigo
relevante atravs da pesquisa por imagens.
9 URLs no-amigveis
Muitos blogs e CMS (Content Management System Sistemas de administrao de contedos) possuem recursos de gerao de endereos amigvel.
No entanto, nem todos sistemas tiram vantagem de endereos amigveis. Estes endereos so interessantes tanto para audincia humana quanto para
buscadores. A URL tambm um lugar importante para aparecer as palavras-chaves do seu site.

Exemplo de endereo amigvel: dominio.com/titulo_pagina

Exemplo de endereo no-amigvel: dominio.com/?p=23568

Dicas gerais de SEO: o que fazer e o que no fazer.

No ignore sua audincia

Escreva tpicos que iro interessar ao seu pblico. Como? Procure, estude, faa pequenas pesquisas de opinio, utilizando polls, por exemplo, busque
por informaes relevantes em fruns, tpicos comuns em e-mails de marketing e venda, ou mesmo utilize busca por palavras-chaves, enfim, faa
tudo para conhecer melhor seu pblico e oferecer aquilo que lhes interessa.
Existem diversificas e timas ferramentas, como Google Keyword Tool, ou SEO Books Keyword Tool e muitas outras que podem ser utilizadas
para otimizao. O objetivo no gastar todo o seu tempo procurando palavras-chaves, mas sim, conhecer o que os visitantes do seu esto buscando.
Um bom painel de administrao do site, localizado no servidor de hospedagem (comumente, denominado CPanel) dever trazer ferramentas para
conhecer melhor a audincia do seu site e inclusive analisar as palavras-chaves que esto levando os visitantes at as suas pginas.
Densidade das palavras-chaves
Uma vez que voc tenha um tpico para escrever para seus leitores, ajude os buscadores a encontr-lo. Densidade das palavras-chaves o nmero de
vezes que uma palavra-chave aparece em uma pgina em relao ao nmero total de palavras. Tenha certeza de que as suas palavras-chave iro
aparecer em reas cruciais:

Na tag tigle.
No URL da pgina (URL amigvel).
No cabealho da pgina (H1 ou H2).
No primeiro pargrafo de contedo.
Pelo menos 3 vezes no corpo da pgina (dentro da tag body). Colocar mais ou menos palavras ir depender da quantidade de contedo, e
somente se, fizer sentido.

Muitas pessoas objetivam uma densidade de palavras-chaves em torno de 2% (por exemplo, 2 palavras para cada 100 palavras). No entanto, se a sua
frase-chave for: SEO para Webdesigners e Webdevelopments (Webdesenvolvedores ou Desenvolvedores Web), quantas vezes voc poder repetir
esta frase, sem que parea artificial? Lembre-se: escreva para seu pblico, no para mquinas. Seguindo estes parmetros, voc ir escrever
naturalmente e obter sucesso com seu pblico leitor e tambm com as mquinas, consequentemente.
Ateno: no coloque a mesma palavra em grande quantidade na sua pgina. Este tipo de prtica poder ser tomado como keyword stuffing
(excesso de palavras-chaves) e ser penalizado pelos buscadores.
No ignore as relaes
Neste artigo, faz sentido mencionar palavras como: busca de palavras-chave, mecanismos de busca, uso da tag title. No entanto, se mencionarmos a
palavra-chave, compra de celulares (de forte apelo em buscadores) ser que estaramos utilizando este termo dentro de um contexto correto? Somente
utilize palavras-chave e tpicos que faam sentido para sua audincia. Mecanismos de busca medem a relao entre as palavras-chave do site para
determinar a relevncia durante as pesquisas realizadas por usurios. Veja estes exemplos:

Carros e pneus (tima relatividade)

Webdesign ou Design e Macacos voadores (notalvez, poucas vezes)

No tenha medo de links internos

Voc gostaria que os mecanismos de busca encontrassem cada pgina do seu site? Ajude-os a cumprir esta tarefa. Isto pode ser feito atravs de
sitemaps ou arquivos de blog que contm uma listagem do contedo do seu site. preciso existir uma pgina denominada sitemap, por exemplo, que
tenha links para todas as pginas do seu site.
Dica: voc pode promover as pginas mais importantes do seu site colocando dentro do corpo (body) das pginas links realmente relevantes para
outras pginas. Ao invs de utilizar o recurso empobrecido, clique aqui, que tal mencionar os nomes das pginas para o qual deseja maior
expressividade?
No ignore links quebrados
404 erro de arquivo ou pgina no encontrada

Evite links quebrados em seu site. Busque incansavelmente por links quebrados em seu site e elimine-os. Se voc remover uma pgina ou seo do
seu site, configure o mecanismo robot.txt para prevenir que os mecanismos de busca venham a indexar links quebrados. Se voc mover uma pgina
ou um site inteiro, utilize o mtodo 301. .htacces para redirecionar para a nova URL.
Dica: utilize o Google Webmaster Tool para encontrar links quebrados e erros do tipo 404.
Seja consistente com ao fazer referncia ao seu domnio
Para os mecanismos de busca, www.dominio.com e dominio.com so dois endereos URL diferentes. Portanto, importante manter a consistncia do
seu domnio. Se voc iniciar a promoo do seu site utilizando a referncia www.dominio.com, mantenha sempre este padro.
No se assuste com a websemntica
Websemntica e padronizao podem, alm de manter seu site mais inteligvel, permitir que mecanismos de busca seja capazes de ler melhor suas
pginas.
Resultado da posio do seu site na busca
Codificar e configurar o seu site para ser amigvel s tcnicas de SEO pode aprimorar o acesso dos mecanismos de busca pginas do seu site. No
entanto, isto no ir garantir seu posicionamento no topo das pginas de busca, uma vez que h diversos outros fatores que podem determinar o seu
posicionamento nas buscas. Alguns destes aspectos so apresentados abaixo:
PageRank
Alguns profissionais de SEO preocupam-se com o PageRank do Google e outros no. Obviamente que muito bom possuir um PageRank de
respeito. uma boa referncia para saber o quo importante o Google considera o seu site. Abaixo apresentados algumas dicas para melhorar seu
pageRank. Outra forma de alavancar o seu PageRank atravs de backlinks (link de retorno). Atravs da colocao de links de qualidade apontando
para o seu site em sites de referncia, em bons sites.
Idade do domnio
Voc ficar supreso em saber que a idade de um domnio um dos fatores que interferem no algortmo utilizado pelos buscadores. Domnios mais
antigos possuem uma histria, e seu contedo visto com maior credibilidade que sites que entraram para o campo de batalha a pouco tempo.
comum domnios mais antigos aparecerem no topo da lista de buscadores.
Seja paciente
Voc pode ter feito tudo certinho, no entanto, seu site pode no estar no topo das pginas dos buscadores para a palavra-chave que voc escolheu. Por
que? Porque tudo leva tempo. Leva tempo para que seu site seja indexado e alcane um posio no PageRank do Google (especialmente para
domnio novos).
Outra razo:

Pode ser que as palavras-chave que voc escolheu utilizar sejam muito competitivas. Tente escolher outras palavras e talvez voc tenha resultados
melhores. Lembre-se: voc est competindo com milhes de sites.

Design inovador em dispositivos eletrnicos e

hardwares
Tornar coisas comuns e aparentemente simples em algo que salte aos olhos, que encante despertando a vontade de degustar caracterstica marcante
para um objeto que tenha a pretenso de ser mais que usvel. O design elegante, diferenciado e muitas vezes chocante capaz de transformar certos
objetos em elementos, no mnimos instigantes.Recentemente aliar funcionalidade, praticidade e usabilidade ao bom gosto e resultado visual exmio
tornou-se o resultado mais interessante para o usurio.Os exemplos abaixo deixam claro que design e funcionalidade podem andar de mos dadas.
Fique vontade e deguste. Afinal de contas uma gostosa viagem por criatividade e certa enloquncia.

Sonys Apple Remote Control Controle remoto Sony Apple

A maa da apple desfarada de controle remoto permite aos usurios funes simples como alterar volume, mudar de canais com gestos e
movimentos (veja imagem abaixo). Quando colocadas sobre a bandeja, as maas-controles iniciam o processo de carregamento. A idia no to
nova assim do ponto de vista tecnolgico, j que o Nintendo Wii j usa recursos parecidos para que seus jogadores possam utilizar o console. Mas
alm de ser maa, controle. Genial.

Optimus Tactus & Optimus Maximus

A Artemy Lebedevs Optimus keyboards, empresa fabricante do excntrico apresentado abaixo oferece uma abordagem diferenciada em termos
de teclados. Um pequeno OLED-display (Organic Display) visor orgnico colocado embaixo de cada tecla para permitir que o usurio possa

definir os caracteres que sero mostrados no teclado e tambm definir a funcionalidade das teclas manualmente. Em outras palavras, o lugar de
cada caractere e elemento do teclado pode mudar ao gosto do usurio.
Optimus Tactus no possui nenhuma tecla fsica, o que significa que no h restries quanto sua rea e tamanho. Qualquer parte do teclado pode
ser programada e passar a ter determinada funo ou apresentar qualquer imagem.

Optimus Maximus (Demo)

Cada uma das 113 teclas pode ser configurada para receber uma funo especfica. O interessante neste modelo que o teclado pode ser
configurado facilmente para uso em qualquer idioma. O uso de smbolos, numerais, caracteres especiais, cdigos HTML e matemticos
praticamente infinito.
O lanamento no mercado foi feito em janeiro de 2008 e o preo ainda amargo para os bolsos brasileiros de 460 dlares.

Configurao do teclado. Voc pode associar imagens e caracteres para serem exibidos no Optimus keyboard.

Nonobject Cmera
A Nonobject Behind the Scenes Camera Nonobject atrs da cena das cmeras, se traduzido ao p da letra apresenta lentes e visores
simultaneamente dos dois lados do aparelho, sendo possvel desta forma fotografar e filmar o que voc v e o que voc no v. A cmera
desenhada para capturar o que est atrs de voc, enquanto, ao mesmo tempo captura o que est a sua frente durante a sua utilizao.

Toast Messenger Mensagem torrada

isto mesmo. Voc no leu errado. O Toast Messenger, como chamado este brinquedinho gourmet possui uma pequena rea sensvel ao toque
de uma caneta digital, como aquelas de certas tablets, destinadas ao desenho no computador. Atravs desta caneta possvel escrever pequenas
mensagens que podem ser instantaneamente impressas na torrada. Simples, mas ainda inovador.

Dual Music Player

As diferenas deste player se comparado aos seus competidores tradicionais ficam evidente. Em primeira anlise, sua anatomia extremamente
simples mostra certa excepcionalidade. Esta uma soluo porttil que suporta tantos CDs quanto Flash memory (funo pen-drive). Voc pode
ouvir os seus mp3 armazenados no seu pen-drive e copiar msicas via USB e tocar seus velhos cds.

Bluetooth Laser Virtual Keyboard Teclado virtual a laser baseado na tecnologia bluetooth
Atravs deste teclado virtual possvel digitar em qualquer superfcie que permita a projeo. Pode ser utilizado para criar textos para seu celular
ou PDA facilitando a operao e criando um espao de digitao consideravelmente maior que o oferecido em geral por estes aparelhos. Contendo
63 teclas o teclado virtual alcana uma velocidade de toque aproximada dos teclados convencionais. O interessante o tamanho do aparelho: um
pouco maior que uma caixa de fsforos. O preo da facilidade: em torno de 150 dlares.

Pock-It
Simplesmente simples e engenhoso. Um pequeno bolso de tickets e lembretes que pode ser acoplado ao seu computador.

O design de cones
Princpios do design de cones
Antes de abordar o design de cones h algumas diretrizes e princpios que precisam ser estudados com grande importncia . Se voc quiser criar
design para cones de maneira eficiente ser necessrio uma viso mais holstica abordando aspectos como: audincia, tamanho, simplicidade,
iluminao, perspectiva e estilo. Este artigo serve de ponto de partida para entender certos conceitos importantes para se criar cones que possam
ilustrar uma boa idia de conjunto e que se ajustem de forma homognea ao projeto de design que se pretenda desenvolver. O assunto amplo no
objetivo deste artigo cercar todas as nuances que envolvem o projeto de design de cones. No entanto, este texto um bom de partida.
Este artigo foi produzido a partir da traduo e adaptao do artigo denominado 7 Principles of Effective Icon Design, Spoonfed Photoshop Tutorials
da PSDTUTS Spoonfed Photoshop.

Abordando o design de cones holisticamente

cones devem se ajustar dentro de sistemas grficos. Sejam eles projetados para aplicaes de desktop ou para sites da web, um cone um dos
muitos elementos grficos que precisam trabalhar juntos e harmonicamente. Considere esta lgica durante a criao do design de cones e este ser
incio de um bom trabalho. cones podem ser apreciados por suas solues estticas, mas lembre-se: eles nunca trabalham sozinhos e visual no
tudo. Leve em considerao o sistema ou espao grfico em que seus cones sero aplicados. Avalie-os. Tenha certeza que cada cone difere dos
cones circunvizinhos, enquanto trabalham todos juntos em equilbrio com o ambiente grfico.
Desde a evoluo dos sistemas operacionais, especialmente, o de propriedade da Microsoft, Windows, em que ficou consagrada a frase: uma imagem
vale mais que mil palavras, criou-se juntamente a este novo patamar um novo sistema de comunicao, uma nova forma de representar idias. Surgiu
a partir da uma linguagem iconogrfica especfica para o universo da informtica. Linguagem esta poderosa capaz de comunicar de maneira rpida e
eficiente.
Se o projeto requer a criao de um conjunto de cones de 5 ou de 100 peas, ser preciso, antes de partir para a criao, realizar uma reflexo sobre
todo o conjunto. Este o ponto central a ser tratado neste artigo. Voc ver que um plano eficiente de construo de um conjunto de cones
extremamente necessrio, pois do contrrio o desperdcio de tempo e o redesign (redesenho) sero inevitveis. Perceber que criar um conjunto de
cones um trabalho complexo, que precisa ser pensado e avaliado para resultar um trabalho de qualidade. Trabalho este que deve ser tratado com a
mesma seriedade com se trata uma pea de design qualquer, como um folder, uma newsletter ou at mesmo a capa de um livro.
Observe a figura 1 em que se apresenta um grupo de cones cujas caractersticas encontram-se em plena harmonia. Verfique o design abordado segue
um padro de cor e uma abordagem simblica coerente denotando claramente a idia de conjunto.

Figura 1: Conjunto harmnico de cones

Leve em considerao seu pblico-alvo

 interessante notar que consideravelmente diferente desenvolver o design grfico de cones para a intranet de uma pequena empresa, por exemplo,
e criar um pacote de cones que far parte de um produto que poder ser comercializado internacionalmente. Ao criar cones, assim como ao criar
qualquer pea grfica preciso levar em conta aspectos culturais e regionais. Smbolos podem representar coisas diferentes em situaes diferentes,
em pases diferentes e em culturas diferentes. preciso estar alerta para este tipo de situao. bom lembrar que cones so uma linguagem grfica
formada por desenhos. E assim como na linguagem escrita formada por vogais e consoantes, tambm h muitas armadilhas na iconografia. Para
tanto, basta observar as diferenas interessantes e muitas vezes caprichosas que existem entre o portugus falado no Brasil e em Portugal. Muitas
vezes a mesma palavra tem significaes completamente diferentes nestes dois pases. Com cones e imagens no diferente. Culturas diferentes
tero uma abordagem diferente para a mesma imagem.
Um artigo denominado: Os dez erros no design de cones aponta erros clssicos que ocorrem em projetos deste tipo e que acabam inviabilizando a
produo do conjunto. Neste artigo so discutidos aspectos nacionais e sociais em sete pontos importantes para se criar o design de cones. Sempre
necessrio levar em conta as condies nas quais seu cone ser usado. Um aspecto importante aqui so caractersticas nacionais. Tradies culturais,
ambientes e gestos radicalmente podem diferir de pas a pas. Um bom exemplo poder ser citado: a representao grfica dos servios de e-mail
associada muitas vezes a correspondncias. A Apple usa o mesmo exemplo em seus dispositivos de Interface Humana.
Dessa forma, projetar um cone de alcane internacional basesado no design de uma caixa de e-mails de motivo/ estilo rural uma pssima idia.
Este um exemplo claro do que no se deve fazer. O exemplo da Apple deixa claro que embora exista no cone uma identificao imediata com a
marca da empresa, a proposta adotada tem universalidade cultural.

Figura 2: Simbologia adotada pela Apple em seu cone de e-mails

Considerando o tamanho do cone a ser criado

Este aspecto de extrema importncia. Muitos projetistas ignoram ou mesmo no conhecem regras bsicas de resoluo levando projetos de cones
bancarrota.
Se o objetivo vetorizar o cone no Adobe Illustrator por exemplo, existe uma tendncia em escalar o design e tentar aplic-lo a qualquer tamanho.
Este o erro mais corriqueiro na criao de projetos de design de cones. Infelizmente, re-escalar ou simplesmente reduzir ou aumentar o tamanho da
imagem no vai funcionar, quando se trata de cones. Um cone que parea bom com um dimenso de 512 px de largura ficar parecido com uma
sujeira borrada se reduzido arbitrariamente para 16 px. cones precisam ter um design bsico como ponto de partida. No entanto, para cada tamanho,
o cone precisar passar por um processo de aperfeioamento buscando torn-lo ntido o suficiente, contemplando alm qualidade grfica e
visibilidade. H projetos de design de cones muito pequenos, como os de 16 e 32 px, muito utilizados em jogos de celular que passam pelas mos de
profissionais de Pixel Art especializados em trabalhos grficos minsculos da ordem pixelar, buscando justamente desenvolver um projeto
iconogfico harmnico.
O design de cones no um desenho que pode ser escalado, ou melhor dizendo: no basta desenhar um cone em um tamanho mdio em seguida
buscar aumentar ou reduzir o seu tamanho para obter os resultados esperados. Isto seria um tanto quanto simplrio. Esta a razo pela qual o
Photoshop uma soluo to boa para a produo de cones tanto quanto outros softwares de edio, uma vez que atravs de seus diversos recursos,
como filtros, possvel produzir cones de diversos tamanhos com resultado grfico bastante aproximado.. Seguramente, designers que fazem cones
no Illustrator ou no Fireworks iro passar por outros softwares, como Photoshop, para alcanar bons resultados ao produzir cones em tamanhos
pequenos. Sendo assim, no acredite no mito de que o design de cone puramente criao de vetores. cones, assim como imagens de maior porte
possuem muitas vezes efeitos de sombra, lights e glows que em geral podem ser produzidos de forma mais eficiente em softwares como o Adobe
Photoshop. Outro ponto importante observar que ao se produzir cones muito pequenos, estamos falando de um trabalho na escala de pixels que
requer um detalhamento quase que artesanal.
Existem diversas ferramentas vetoriais disponveis no Photoshop e mscaras que podem ser utilizadas para obter bons resultados em termos de
escalabilidade, buscando assim um resultado satisfatrio tanto para cones pequenos quanto para cones grandes. Se voc tem familiaridade com o
Illustrator ou outro software vetorial como o Fireworks, interessante tentar estabelecer um fluxo de trabalho entre os dois programas para a criao
e edio dos cones. Atualmente, os aplicativos da famlia Adobe oferecem uma tima integrao sendo possvel por exemplo, carregar arquivos no
formato psd para dentro do Fireworks. No Photoshop, considere o uso dos Smart Objects (traduo ao p da letra: objetos inteligentes) que so
aqueles elementos que podem ser editados separadamente facilitando o trabalho quando se trata de arquivos com muitas partes. Vale a pena estudar
este recurso. Outra alternativa interessante para um trabalho bem produtivo o uso do Photoshop associado a softwares especficos para criao de
cones. Dois bons exemplos so o Icon Builder e o Axialis Icon. Como se pode ver, a abordagem para a criao do design de cones pequenos e
grandes extremamente diferente.

Observe atentamente a figura 3. Verifique o que ocorre na escalabilidade de um mesmo cone e perceba a perda de qualidade e resoluo do design
em cones pequenos.

Figura 3a: Alterao do tamanho dos cones com perda de qualidade

Figura 3b: Alterao do tamanho dos cones sem a perda de qualidade

Faa cones simples e relevantes (icnicos)

A palavra iconografia vem do grego eikon (imagem) e graphia (escrita), ou seja, literalmente: escrita da imagem. Esta definio deixa claro que o
cone, sobretudo aquele do universo da comunicao visual deve primar por estabelecer uma mensagem que possa ser compreendida e verbalizada
mentalmente de forma imediata.
Os sistemas operacionais mais recentes trouxeram a possibilidade de utilizar cones de dimenses grandes: 512 px por 512 px, o que corresponde a
um tamanho praticamente gigante para um cone. Em consequncia disto cresce a tentao de tornar os cones mais ilustrativos. Por mais que se
possa adicionar um nvel maior de realismo ao design de um cone no se deve perder de vista o objetivo principal: comunicar de forma simples e
efetiva. No h vantagem em abrir mo destas caractersticas afim de buscar um detalhamento excessivo do material desenvolvido.
Na web em sites especializados h uma srie de tutoriais e guias sobre dispositivos de interface humana e suas diretrizes. Alguns artigos tratam
especificamente das limitaes do realismo do design de cones e situaes em que o simbolismo torna-se necessrio. No final deste artigo so
citadas algumas fontes de pesquisa que inclusive serviram de construo deste textos. Vale conferir o artigo da Smashing Magazine que trata do
conflito entre realismo e simplicidade no design de cones.
Em linhas gerais bastante til pensar que o design de cones no deve ser complicado. Ser cauteloso antes de colocar muitos detalhes e elementos
grficos em um cone um bom passo para produzir um timo icon design.
Evite ilustrar um cone demais. Nunca demais repetir: seja simples.
A boa comunicao preza pela simplicidade. H algum tempo o RSS vm tomando espao e tornando-se um artifcio de comunicao bastante
eficiente. O cone que representa este servio por consequncia tambm vem se tornando bastante conhecido, embora por muitos ainda seja visto
como uma novidade. Veja o exemplo apresentado abaixo na figura 4.

Figura 4: cone de RSS Feeds

Observe que este cone bastante limitado no quesito ilustrao, ele simples. Entretanto apresenta caractersticas simblicas bem marcantes e
fortes. Uma vez que este cone seja visto e o seu significado entendido, dificilmente algum que o veja novamente no ser capaz de associ-lo ao seu
significado. Deste modo, bom ser cuidadoso ao criar o design de cones evitando o excesso de detalhes.
bvio que h situaes em que o aspecto esttico de um cone torna-se mais importante em detrimento de seu impacto iconogrfico. uma questo
de julgamento e a necessidade ir variar para cada projeto de design. Compare o conjunto de cones mostrados abaixo, na figura 5, com um cone
simples de RSS. Em algumas situaes torna-se interessante utilizar recursos de detalhamento grfico mais arrojados e enfeitados, sobretudo
quando se busca uma maior harmonia com o projeto grfico do website ou aplicativo em questo. Um interessante recurso que deve ser almejado a
todo projeto adicionar interesse e admirao pela proposta grfica abordada sem, no entanto, deixar de lado o aspecto iconogrfico.
Os cones apresentados abaixo so realmente legais. uma questo de julgamento decidir se vale a pena perder a capacidade de reconhecimento
rpido do smbolo em favor dos detalhes e recursos estticos adicionados ao redor do cone. Para cones maiores, recursos estticos mais mais
aperfeioados e detalhistas podem ser utilizados com reduo da perda de acessibilidade visual. Para cones menores prefervel um material mais
simples e esteticamente mais objetivo.

Figura 5: cones de RSS estilizados

Iluminao consistente, reflexo e sombras

 muito importante que o realismo adicionado ao design do cone funcione de forma coerente. Por exemplo, se o objetivo utilizar uma fonte
luminosa vinda de uma determinada direo, ento deixe isso evidente em todo o projeto grfico. Pois do contrrio um efeito luminoso mal
construdo poder dar a impresso de um defeito ou erro de concepo durante a criao. Como se pode perceber o limiar entre o recurso bem aplicado
e o erro banal bem estreito. Outro ponto importante considerar o conjunto em que ser aplicado o design do cone. Se a fonte luminosa aplicada ao
design do site aplicada da direita para esquerda, bom considerar isto na combinao com o design dos cones que usaro efeitos luminosos. Do
contrrio, seu projeto parecer amador.
No guia eletrnico Windows Vista User Experience h um seo que trata especificamente do processo de iluminao e adio de sombras em
cones. O Guia apresenta regras especficas para o conjunto de cones do Windows Vista. Este guia serve de balisamento para designers que venham
a desenvolver cones para este sistema operacional, assegurando a padronizao do projeto e a obteno de um conjunto unificado de modelos que
venha a respeitar a proposta iconogrfica adotada pela Microsoft. Por exemplo, veja a frase: Use shadows to lift objects visually from the
background, and to make 3D objects appear grounded, rather than awkwardly floating in space. Use sombras para erguer objetos visualmente do
fundo, e dar a impresso de objetos 3D bem fundamentados, ao invs de flutuar de forma desajeitada no espao. O assunto rico e h muito mais
dicas neste guia que servem no somente para o design de cones, mas que tambm so requisitos bsicos para um bom projeto grfico.

Figura 6: cones do sistema operacional Microsoft Windows Vista

Delimite a pespectiva
Perspectiva um termo bastante amplo. Em termos geomtricos e por conseguinte associado ao aspecto grfico-design pode referesse a um campo de
estudo da geometria, em especial, da geometria descritiva. usada como um mtodo para representar em planos bidimensionais (como o papel)
situaes tridimensionais, utilizando-se de conhecimentos matemticos e fsicos, decorrentes do fenmeno da percepo visual, buscando simular ao
olho humano a iluso de distanciamento e posicionamento.
A taxa de perspectiva e o design do cone devem trabalhar em conjunto buscando equilbrio. Se os cones produzidos so visto de frente, ento tenha
certeza de que produziu este efeito visando o resultado: ver o cone de frente. Tambm no se esquea de manter o equilbrio com o restante do
projeto grfico ou website. Ou seja, procure manter a harmonia do conjunto, colocando todos os elementos dentro da mesma perspectiva. Embora,
em casos especficos e intencionais no seja problema bagunar a noo de perspectiva do expectador, mas bom ter cuidado para que o resultado
no fique demasiadamente catico. Se uma pessoa ou elemento encontra-se em um ngulo especfico tenha certeza de que todos os cones
funcionaro desta maneira. Uma tcnica bastante simples e muito utilizada imaginar uma cmera fotogrfica colocada em um ponto de vista
especfico visando todos os objetos atravs da mesma perspectiva. Este tipo de raciocnio contribui para manter a consistncia do design dos cones
utilizados.
Um sistema de design de grande escala, como por exemplo um sistema operacional, em geral precisar de maior poder de flexibilidade, ou seja, ser
necessrio mais do que a perspectiva de apenas uma cmera. Elementos colocados em uma barra de tarefas ao p da pgina devero dar uma noo
de pespectiva diferente dos elementos mostrados em uma barra de ttulos na parte superior do vdeo. A Apple apresenta a perspectiva de cones
atravs de um documento denominado: Diretrizes de Interface Humana, abordando aspectos bastante interessantes. As vrias perspectivas so
alcanadas mudando a posio de uma mquina fotogrfica imaginria que captura o cone. A imagem mostrada abaixo apresenta a diferena entre
as perspectivas de um cone de aplicativo que se localiza no topo da pgina e de um conte localizado em uma toolbar (barra de ferramentas)
localizada na parte inferior do vdeo.

Figura 6: Perspectiva de cones em diversos pontos da tela

Criando um estilo consistente para o conjunto de cones

Iluminao e perspectiva certamente contribuem para o estilo e design de um cone. Entrento, h diversos outros fatores que podem contribuir para os
estilo de um conjunto de cones. Por exemplo: Se um website utiliza um formato grunge ou anos 60, provavelmente ser necessrio adicionar
elementos ao cones que faam referncia a este estilo, buscando criar harmonia e idia de conjunto.
Conjuntos de cones tem caractersticas nicas que os tornam singulares. No Guia Echo apresentado pelo Fedora ArtTeam, apresentado um
conjunto de diretrizes que podem ser seguidas para o desenvolvimento de uma iconografia consistente. O guia aborda conceitos que podem ser
utilizados para o desenvolvimento de uma perspectiva dinmica, que apresente-se mais realista preservando o design simples e claro concebido a
partir do contraste eficiente e do uso de cores vibrantes. Tambm abordado o uso de outlines como recurso grfico. Nos prximos artigos irei
tratar sobre este guia apresentado pelo Fedora. Veja alguns exemplos encontrados no site.

Figura 7: Exemplos de cones do site Fedora

Iniciando o design de cones

O design de cones para websistes uma tima forma de iniciar o trabalho de criao e desenvolvimento de cones. Entretanto, apenas alguns cones
que so realmente necessrios no design de um site. Iniciar um projeto web simples com poucos cones, somente o bsico e realmente necessrio
uma boa maneira de ganhar experincia em design de cones.

Em qualquer projeto grfico o importante tormar contato com a proposta terica, relacionar as idias, seguir uma linha de trabalho consistente,
relacionar o projeto com tendncias e aspectos culturais e temporais. Iniciar o processo de criao de design de cones atravs de uma pesquisa uma
tima forma de realizar o trabalho. Deste modo as chances de tudo dar certo so bastante grandes. Se o site trata da histria do Egito antigo
interessante fazer um levantamento dos smbolos e cones utilizados por esta socidade e tentar estabelecer alguma relao com o projeto de forma
equilibrada e limpa. Criar o mximo possvel de esboos do trabalho a ser feito importante para chegar a uma boa idia conceitual. Veja o
exemmplo mostrado abaixo.

Figura 8: Rascunhando o projeto

Inspirao para criar conjuntos de cones profissionais

Uma vez que voc tenha criado um pequeno conjunto de cones para um website, hora de considerar criar alguns cones para outras aplicaes.
Uma vez que voc tenha praticado este processo de criao algumas vezes, naturalmente a capacidade para criar um conjunto maior e mais
profissional de cones surgir. Vender cones pode ser um negcio lucrativo para um designer. H muitas empresas que terceirizam a produo de
cones em projetos grficos maiores e at mesmo na produo de softwares. Sobretudo se o conjunto de cones se destacar por ser nico e
profissional, a facilidade de comercializao torna-se muito maior. Abaixo h dois conjuntos que apresentam o design de cones de forma bastante
profissional e que podero servir de boa fonte de inspirao.

Figura 9a: Pacote de cones 1

Figura 9b: Pacote de cones 2

Concluso
A criao de cones assim como o projeto grfico de outros materiais, sejam eles digitais ou impressos requer bastante estudo, habilidade especficas
e fundamentao terica. A soma de todos estes elementos associados a uma boa dose de experincia adquirida em trabalhos diversos a
apresentao cada vez mais profissional dos seus trabalhos. Conforme mencionado no incio do artigo, este post no tem a pretenso de esgotar o
assunto design de cones, que bastante amplo. Abaixo algums referncias que serviram de base para a traduo e adaptao de post.

Referncias:

http://psdtuts.com/articles/7-principles-of-effective-icon-design/
http://fedoraproject.org/wiki/Artwork/EchoIconGuidelines
http://msdn2.microsoft.com/en-us/library/aa511280.aspx
http://www.firewheeldesign.com/sparkplug/2006/April/icon_design_bitmap_vs_vector.php
http://mezzoblue.com/archives/2007/02/21/icon_design/