06-30-10
Você já decorou todas as cores hexadecimais?
Você lembra daquelas aulas maravilhosas de química quando tínhamos que decorar toda a tabela periódica? Pois é, aquilo hoje é fichinha pra gente. Afinal tem coisa mais difícil do que decorar a tabela de cores hexadecimais?
04-05-10
Erros e Acertos no Design de Sites Famosos
Costumo dizer que uma boa forma de aprendizado é a observação. É a forma mais barata e eficiente de ensino. Por isso convido você, caro leitor de Avante, para passear junto comigo por alguns sites de celebridades e empresas famosas, tentando identificar seus erros e acertos no design voltado para web.
03-19-10
Ótima ferramenta de combinação de cores
Você continua sem saber qual cor combina mais com o azul ou com o vermelho? Tem dúvidas sobre harmonia de cores? Mesmo depois de ter lido esse post? Pois então trago um software online muito bacana que vai lhe ajudar a combinar as cores de suas criações. E o melhor, foi criado por uma grande empresa de software da qual muitos web designers gostam.
01-07-10
Identificando um layout amador
O que faz a gente bater o olho num site e perceber: esse design está amador? Quando essa dúvida vem, muitas vezes não sabemos explicar o porquê. Foi pensando em responder essa intrigante pergunta que resolvi escrever esse artigo.
Um layout, para ser considerado amador, deve possuir algumas características em comum. As possibilidades são inúmeras mas existem alguns erros que aparecem freqüentemente nesses layouts. São esses erros que apresento agora. Atenção, você, webdesigner, jamais faça o que irei relatar a partir de agora. 
07-08-09
Como validar as cores do seu site
Será que a harmonia de cores do meu site está correta? Será que combinei bem as cores? Essas dúvidas são muito recorrentes a todos webdesigners e programadores. Mas até hoje nunca apareceu um validador de cores, assim como temos o W3C e seu validador de html e css.
Porém, para sua surpresa, há na internet um validador de cores. Isso mesmo que você leu: trata-se do Check My Colours. Basta colocar a URL nessa ferramenta simples e útil que aparecerá em segundos uma tabela mostrando todas as combinações de cores do seu site, informando se o contraste e luminosidade dos elementos estão ok e se a diferença de cor e brilho entre os elementos estão adequados.
Faça o teste! Fiz o teste no Avante e no meu site pessoal e deu tudo ok, graças a Deus. Se não desse certo, imagina o mico que eu pagaria.
Para o alto e Avante!
Fonte: Delicious
05-26-09
5 Truques Simples de Luz e Sombra (Efeitos de Gradiente)
É comum notar nos primeiros trabalhos dos alunos do Curso de Design Web um excesso de gradiente em seus layouts, geralmente mal aplicados. São efeitos de degradê que fogem da realidade, não respeitando um ponto central de emissão de luz ou ficando pesados, carregados.
A idéia desse post é trazer para o público brasileiro os 5 truques sugeridos pelo australiano Rob Morris na alemã Smashing Magazine, com tradução e comentários deste senhor que vos fala. São idéias simples que vão melhorar sua visão sobre gradientes, luz e sombras.
Então vamos lá!
Luz e sombra, no mundo real, está em toda parte que você olha. Tudo que você vê, reflete a luz e consequentemente geram sombras. Visualmente, luz e sombra nos ajudam a dar sentido aquilo que vemos e nos ajudam a compreender textura, dimensão e perspectiva.
Então, para tentarmos fazer com que nossos layouts web fiquem o mais natural possível, um bom entendimento de luz e sombra é muito importante. Aqui estão 5 maneiras de utilizar melhor luz e sombra para destacar seu layout, fazendo-os saltarem da tela.
Uma rápida anatomia da luz e sombra
Na figura abaixo podemos ver que a fonte de luz vem da esquerda. O destaque é o lugar onde a luz é mais forte e as sombras surgem sobre o lado mais distante da fonte luminosa. Luz e sombra nos diz muito sobre as superfícies e texturas da imagem.
Mas vocês devem estar se perguntando, “o que tem isto a ver com Web Design”?
Se você estiver tentando criar um design rico, interfaces táteis, luz e sombra serão seus amigos. Da mesma forma que muitos artistas clássicos fizeram pinturas saltarem para fora da tela, você pode usar luz para dar profundidade aos seus desenhos e um maior interesse visual.
1. Utilizando uma fonte de luz
Talvez a parte mais importante do trabalho com iluminação é saber de onde a luz é proveniente.
A fonte de luz irá determinar onde ficarão os destaques e sombras. Se você estiver trabalhando no Photoshop, você poderá usar o “global light”, efeito de modo que todos os seus efeitos de iluminação seguirão a mesma direção de luz.
Controlar a fonte de luz em seus projetos (mesmo só com um gradiente linear ou radial) pode ajudar a criar a melhor atmosfera para o layout. Ela também pode ajudar a direcionar os olhos para um ponto focal.
Exemplos na Web
Campaign Monitor usa uma explosão de raios luminosos que transmite a sensação de um nascer do sol por trás do projeto.
Icebrrg usa luz para submergir seu website numa profundidade subaquática.
Mike Precious usa mais de uma fonte de luz para adicionar interesse visual, se assemelhando ao estilo da luz direcional do desk-lamp.
Deaxon utiliza uma fonte de luz por detrás do seu sutil logo para dar seu devido destaque.
2. Gradientes
No mundo real, poucas coisas têm um tom de cor plano. Luz e sombra estão em tudo. Utilizar gradientes suaves é uma ótima maneira de proporcionar profundidade e trazer vida ao seu design.
O segredo do uso dos gradientes é não exagerar na mudança de tons, prefira gradientes entre tons próximos, um escuro para um menos escuro, um tom claro para um menos claro, sempre da mesma cor, modificando apenas os tons.
Exemplos na Web
nclud é uma lição do uso de gradientes sutis e uma utilização eficaz dos gradientes para separar e organizar o conteúdo.
CSS Ninjas parece utilizar cores planas à primeira vista, mas cada área tem um sutil gradiente, o que lhe confere textura.
3. Linhas de Destaque
As linhas de destaque podem ajudar a equilibrar sombras e devem ser usados nas bordas de objetos mais próximos à fonte luminosa. Essas linhas normalmente são esquecidas. Porém, uma pequena mudança na cor dessas linhas podem fazer toda a diferença no seu design, destacando ainda mais o local.
Para percebermos melhor as linhas de destaque, temos que ampliar o layout. Um bom truque para adicionar essas linhas é trabalhar com um zoom de 200% ou mais, porque a 100% pode ser difícil ver o que está se fazendo.
Exemplos na Web
Icon Dock e Newism: ambas utilizam uma semi-transparente linha branca no topo da página, elemento que lhe confere destaque. É pouco perceptível, mas acrescenta um balde de polimento a sua concepção.
Você provavelmente já acessou o site da Apple porém talvez não tenha notado a adorável linha de destaques na parte inferior aos itens de navegação, que ajudam a tornar as palavras mais destacadas.
4. Sombras Básicas
Sombras podem realmente acrescentar profundidade visual e textura quando utilizada da maneira correta. A chave é não exagerar.
As qualidades de uma sombra dependem da direção da luz e sua intensidade, assim como a distância entre os objetos e a superfície onde a sombra irá se espalhar. Quanto mais forte for a luz, mais escura e nítida será a sombra. Já se a luz for suave, a sombra também será.
Exemplos na Web
Quando se trata de exemplos online de sombras, há muitos sites para você escolher. Quando usados habilmente, eles podem adicionar um toque de dimensão a sua concepção.
LinkedIn adiciona uma sombra muito sutil para o fundo da sua barra lateral, criando uma ilusão de profundidade.
O Google, talvez o mais simples trabalho de página na Internet, ainda investe na sutil utilização de sombra em seu logotipo.
5. Sombras Avançadas
Você pode fazer muita coisa além da básica sombra, dando aos elementos uma terceira dimensão. Longas sombras são uma ótima maneira de alterar a relação espacial entre os objetos em uma página.
Nos exemplos abaixo, a mesma latinha de Coca-Cola pode ter suas posição completamente alterada, dependendo da sua sombra.
Exemplos na Web
Emotions by Mike utiliza sombra (e luz) para transformar a página em um piso plano.
Superkix utiliza sombra para flutuar o tênis “acima” do Web site. A sombra se move quando você redimensiona a página, como se a luz estivesse se deslocando.
Sofá cria uma palavra sobre o fundo branco, com grande utilização de luz e sombra.
Para o alto e Avante!
02-19-09
Descobrindo a paleta de cores do site
Você quer descobrir todas as cores utilizadas por um determinado site? Agora ficou muito fácil de descobrir com a dica do nosso querido leitor Neto Scarpari, de Piracicaba, São Paulo. Ele nos trouxe essa ferramenta bem curiosa, o I Like Yours Colors.
Através dele você poderá saber, visualmente, todas as cores utilizadas no site. Claro que você poderia fuçar no html ou no css e descobrir, mas o interessante dessa ferramenta é que o resultado é visual.
Quer brincar? Então conheça este utilitário.
Para o alto e Avante!
10-08-08
18 Livros em PDF sobre Design Gráfico, Photoshop, Fontes, Cores e Logotipos
Navegando pela net encontrei esta fantástica lista com 18 livros no fórum espanhol Vagos. Os livros são todos em inglês e vão desde Photoshop de A a Z até A bíblia de logotipos e fontes. Mesmo que você não seja o fera em inglês, pegue esses livros pois muita coisa você irá entender e captar. Garanto a vocês que são excelentes livros. Aqui vão os links:
Hacking Photshop CS2
http://rapidshare.com/files/128263876/H_Ps_Cs2_pachikno.rar
How To Cheat In Photoshop CS3
http://rapidshare.com/files/128381516/HTC_in_PSCS3_pachikno.rar
Graphic Design For The 21st Century – Taschen
http://rapidshare.com/files/128285609/Taschen_Graph_pachikno.rar
Design Elements – A Graphic Style Manual
http://rapidshare.com/files/128482001/DE_pachikno.rar
Logo, Font and Lettering Bible
http://rapidshare.com/files/128508335/LFLB_pachikno.rar
Dutch Type
http://rapidshare.com/files/128746049/Dutch_pachikno.rar
2Oth Century Advertising
http://rapidshare.com/files/128683629/20TH_century_pachikno.rar
Photoshop CS3 A – Z
http://rapidshare.com/files/128765801/pscs3_a-z_pachikno.rar
Logos : Making a Strong Mark
http://rapidshare.com/files/128804137/Logos_pachikno.rar
A Century Of Graphic Design
http://rapidshare.com/files/129225554/century_gd_pachikno.rar
Colour Management – A Comprehensive Guide for Graphic Designers
http://rapidshare.com/files/129507417/cm_pachikno.part1.rar
http://rapidshare.com/files/129532456/cm_pachikno.part2.rar
The Complete Guide To: Digital Graphic Design
http://rapidshare.com/files/129796354/GGD_pachikno.rar
Design Dictionary
http://rapidshare.com/files/129940714/dictionary_pachikno.rar
The Fundamentals Of Creative Design
http://rapidshare.com/files/130382132/fundsofgd_pachikno.rar
50 Trade Secrets of Great Design Packaging
http://rapidshare.com/files/129734724/50tp_pachikno.rar
How To Be a Graphic Designer Without Losing your soul
http://rapidshare.com/files/129939098/HTGF_pachikno.rar
Dos Logos
http://rapidshare.com/files/130012789/2logos_pachikno.rar
The Fundamentals of Typography
http://rapidshare.com/files/130215870/Fundstypo_pachikno.part1.rar
http://rapidshare.com/files/130535967/Fundstypo_pachikno.part2.rar
http://rapidshare.com/files/130549460/Fundstypo_pachikno.part3.rar
E aqui o link do post onde encontrei essa lista.
Boa leitura!
Para o alto e Avante!
09-16-08
A melhor combinação de cores
Essa dica é de nosso querido leitor Romulo Villela , de São Paulo. É uma dica para você, programador ou webdesigner que está cansado de tentar combinar cores e nada lhe agradar. Rosa com amarelo? Amarelo com azul? Azul, vermelho e verde? Oh! dúvida cruel!
Mas não se preocupe, na internet temos diversos sites abençoados que foram criados para lhe ajudar. Um deles é o Color Combos. Este site fornece uma série de combinações de cores, seguindo técnicas de harmonização. Clicando em cada opção você poderá ver os códigos hexadecimais dessas cores, alterar sua ordem ou incluir/excluir cores.
Uma ferramenta bem legal do site é a busca por cores, o Grab Website Colors. Basta colocar o endereço do site e pronto, ele lhe dirá as cores principais do site. Nem todos os sites o sistema consegue ler mas experimente colocar o endereço do UOL.
Quer brincar de combinar cor? Isso vai lhe ajudar bastante, olha aí.
Para o alto e Avante!
Procurando por
Cursos?
Conheça os cursos ministrados por mim, através da Internet
|
Receba todas as dicas do blog AVANTE no seu e-mail, de forma prática e rápida. Fique sabendo sempre que novos textos forem publicados. Para isso, cadastre seu e-mail no campo abaixo |
BUSCA
CATEGORIAS
- Backgrounds
- Banco de Imagem
- Botões
- Comparativos
- Comunicação
- Cores
- CSS
- Curso Grátis de HTML
- Cursos
- DreamWeaver
- Fireworks
- Fontes
- HTML 5
- Ícones
- Identidade Visual
- Ilustração
- Inspiração
- Internet
- Joomla
- Livros
- Logotipos
- Menus
- Mercado
- Motivação
- Outros
- Palestras
- Photoshop
- Pincéis/Brushes
- Publicidade
- Texturas
- Tipografia
- TV Avante
- Usabilidade
- Utilitários
- Vetoriais
- Webdesign
- Wordpress
