• Sobre
• Cursos Online
• Orkut
• Youtube
• Twitter
• Contato

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.

Leia mais…

01-07-10

7 erros comuns no Web Design

Topei com esse texto muito interessante, do web designer inglês Tom Kenny e resolvi trazer para o nosso blog, devidamente traduzido e comentado por mim.

Tom comenta 7 erros comuns no Web Design das quais eu também concordo. Vamos lá:

Leia mais…

11-26-09

Comparativo de Sites: Azul x WebJet

Porquê hoje todos os sites devem ser retos e quadradões (assim como este blog)? Que tal dar uma quebrada nisso? Ousar um pouquinho sem fugir da regra?

Pensando em comentar essas e outras hoje inicio uma série de comparativos entre sites, bem no estilo dos comparativos das Quatro Rodas.

Começaremos essa série com o comparativo dos sites de duas empresas aéreas brasileiras, a WebJet e a Azul. A primeira faz parte do grupo CVC, está no mercado desde 2005 e hoje é a 4o empresa aérea em participação no mercado brasileiro. Já a Azul é a mais caçula, foi criado no final de 2008 e já está entre as 3 maiores do Brasil, a frente da WebJet.

Antes de comparar os sites é importante entender os objetivos das duas empresas. Ambas são empresas que utilizam as políticas de baixo custo para oferecerem valores menores de passagem. Na realidade hoje toda companhia brasileira segue essa política de baixo custo, oferecendo amendoins, snacks, barras de cereal, e espaço apertado no avião porém nem sempre com baixas tarifas.

Aliás, vamos fazer justiça, na Azul o espaço entre as cadeiras é um pouco maior.

Sabendo quem são as empresas e o que elas propõe, vamos aos sites.

Leia mais…

10-23-09

Conheça o super Logo Bigger

“Ah, achei nosso logo muito pequeno! Não dá nem pra ler!”

Pensei que já tivesse publicado esse vídeo por aqui. Topei com ele de novo esses dias e resolvi trazer pra cá, para vocês que nunca assistiram. Trata-se da propaganda de um produto (aliás, de uns 3 produtos) que promete maravilhas para os seus layouts. Bem, isso no ponto de vista dos seus clientes. Isso mesmo, veja só:

Para o alto e Avante!

10-06-09

Desabafo do Web Designer emociona os quatro cantos do País

O corajoso relato do web designer W.L.D., de 23 anos, emocionou milhares de brasileiros no vídeo publicado na quarta-feira, dia 30/09. Em apenas três dias foram mais de 30 mil visualizações e centenas de comentários. No Twitter, programadores experts lembravam de seus amigos web designers que não entendem bulufas de programação e enviavam twittadas com o link do vídeo dizendo um carinhoso “Ei cara! Lembrei de você quando vi esse vídeo huahuahuahua!”.

Minha caixa de email ficou lotada e talvez por isso alguns notem meus emails chegando as 4 da manhã.  Mas não se preocupem, irei responder todos vocês.

O quê?! Você ainda não viu o depoimento sincero do web designer que apesar de envergonhado e com voz de pato resolveu confessar tudo que não sabe? Ora ora, então assista aqui!

Para o alto e Avante!

07-15-09

É hora de abandonar a resolução 800×600?

Essa semana recebi um email do querido leitor e ex-aluno do curso de Design Web, Lenio Cesar de Varginha-MG, lançando a seguinte dúvida:

A configuração 800×600 hoje ainda é utilizada ?

pergunto isso pois pra fazer sites , ainda estou com dúvida de como fazer, se faço pensando no pessoal que ainda tem 800×600.

Para responder a essa dúvida inquietante não só de Lenio mas da maioria dos webdesigners e programadores desse Brasil varonil, fiz aqui uma breve pesquisa entre as estatísticas de acesso dos meus clientes para que vocês possam comparar com os dados dos seus sites e assim tentarmos chegar a uma conclusão.

Não irei citar os nomes dos sites pois são e clientes e não pedi autorização a eles para apresentar o que vou apresentar aqui. Mas como vocês não sabem o nome desses sites, não tem problema.

Primeiro vamos ver a resolução dos usuários que acessam este blog, o Avante!, durante todo o mês de Junho/2009.

Note que 44%, ou seja, quase a metade utilizam 1024 x 768. Já 16,12% utilizam 1280 x 800 e 12,07% utilizam 1280 x 1024. Já 800 x 600 fica em quinto colocado, com apenas 3,8%.

Mas será que o público condiciona esses resultados? Será que o fato do público do Avante ser composto basicamente de webdesigners, programadores e pessoas que trabalham com tecnologia e criação influencia nesses números?

É o que veremos agora. Trago para vocês as resoluções utilizadas pelos leitores de um site feminino com milhares de visitas/dia, no mesmo período de Junho/2009. Veja os números:

Note a diferença. Mais da metade utilizam 1024 x 768, 12% utilizam 1280 x 800 porém 9% utilizam ainda a resolução 800 x 600.

Vamos fazer só mais uma comparação, agora com um site de viagens, que possui um publico com percentual equilibrado de homens e mulheres. Veja:

Mais uma vez 1024 x 768 disparado na frente com 48%, 1280 x 800 em segundo com 19,18% e 1280 x 1024 em quarto praticamente empatado com 800 x 600, ambos com 6%.

O que podemos concluir com esses dados?

1. O reinado do 800 x 600 acabou faz tempo e deixou de disputar de igual para igual com a resolução 1024 x 768;

2. Presume-se que 1024 x 768 é a resolução utilizada por praticamente metade dos usuários gerais;

3. O tipo de público influencia nos tipos de resolução de vídeo, onde os ligados a tecnologia acabam utilizando mais resolução superiores a 800 x 600;

4. Podemos criar a hipótese de que os novos monitores LCD Widescreen e sua maior qualidade estejam influenciando no uso de resoluções superiores a 800 x 600;

5.Nota-se que, além das resoluções de 1024 x 768 e 800 x 600, apareceram dezenas de combinações diferentes de largura e altura de vídeo, o que nos leva a crer a difusão do uso de monitores de diversos formatos, que vão desde os laptops, netbooks a celulares. E isso parece ser uma tendência que veio para ficar.

Portanto a preocupação dos webdesigners não deve ser mais “se continuo fazendo layouts na resolução 800 x 600″ e sim “esse layout vai ser bem visualizado do laptop ao celular?“. Como sempre, isso vai depender do público, foco, principal meio a ser utilizado e por aí vai.

É, os dados estão aí, as conclusões também e a dúvida foi lançada. Agora a palavra é sua. O que você tem a nos contar sobre resoluções de vídeo? Vamos incrementar esse post com novas informações, seus comentários são bem vindos.

Para o alto e Avante!

04-03-09

Os 5 segredos da criação de um site “clean”

Durante as aulas de Design Web um aluno nos trouxe a crescente demanda pelos clientes por sites “clean”. Todo mundo agora quer site “clean”. Acho muito bom isso, eu também gosto de entrar em sites “clean”. Bem, venho através desta dismistificar algumas idéias que a maioria tem sobre sites clean.

Primeiro, o que é um layout “clean”? Pelo nome já dá pra perceber alguma coisa. Seria um layout “limpo”, sem muita poluição visual. Porém layout clean não quer dizer layout sem conteúdo, com pouco texto na capa. Veja por exemplo os sites de grandes portais, são sites com muito conteúdo mas leves visualmente.

Vou revelar 5 segredos para você criar aquele site “cleanissimo” sem muita frescura:

Segredo 01: as margens. Layout clean tem margem entre os elementos e margens internas de mesmo tamanho. As margens brancas, sem separações visíveis entre os elementos visuais, são um dos maiores segredos. O espaço entre um elemento e outro já faz a separação natural, sem necessidade de barras e linhas separatórias, fazendo com que o layout fique mais leve visualmente.

Segredo 02: as cores. Quer fazer um layout limpo, sem possibilidade de erro? Use e abuse do branco. Use bastante branco no fundo e apenas  toques de cor.

Segredo 03: as fontes. Utilize apenas uma família de fontes. Caso queira uma fonte de título diferente da fonte do texto, utilize as variações de negrito. Por exemplo, fonte de título sendo a mesma fonte do texto, só que com negrito.

Segredo 04: evite muitos banners animados. Um dos elementos que fatalmente deixarão seu layout poluído são os banners animados, principalmente os pequenos que ficam um embaixo do outro. Cuidado pois muitos banners animados não funcionam nem para o cliente nem para o site. Isso porquê a animação serve justamente para destacar. Quando se coloca diversos banners animados juntos, cria-se então uma massa visual. Seria como um grupo de 5 pessoas. Quando uma delas coloca uma melancia na cabeça, ela irá se destacar das demais pois somente ela tem uma melancia na cabeça. Já quando todos resolvem colocar uma melancia na cabeça, as 5 pessoas serão apenas 5 figuras com uma melancia na cabeça e nada mais do que isso. Aquele lá que antes estava destacado, se torna apenas mais um. Por isso que banner animado junto de outros banners animados perdem totalmente o destaque e só tem uma função: poluir sua página e irritar a visão do usuário. Portanto, evite. Se for utilizar animação em banner, coloque apenas um banner animado, com evolução sutil.

Segredo 05: tamanho. O tamanho também serve como efeito destacador, assim como a animação. Note nos grandes portais que normalmente temos uma imagem grande de notícia destacada, as imagens que vem a seguir são menores e eles vão ficando cada vez menores até o final da página. Trata-se de uma hierarquia visual de importância. Se você colocar várias imagens do mesmo tamanho, irá criar uma disputa entre as imagens e ocorrer o mesmo que ocorre com os banners animados, nada será destacado. Então crie uma hierarquia visual, evitando colocar muitas imagens grandes no mesmo espaço da página, disputando um com o outro.

Pronto, seguindo essas 5 regrinhas dificilmente você terá um site poluído visualmente e assim contribuirá com o nosso meio ambiente virtual.

Para o alto e Avante!

03-17-09

40 opções para ganhar dinheiro vendendo layouts web

Existem muitas formas de se ganhar dinheiro sendo webdesigner ou trabalhando com criação web. Uma delas é vendendo seus trabalhos para sites interessados em comprar suas criações. Você gosta de fazer ilustrações e depois encosta naquela pasta temp de seu HD? Fez 3 layouts diferentes para seu cliente indeciso e gostaria de reaproveitá-lo de alguma forma? Pois então seus problemas acabaram!

Trago para vocês 40 sites que compram suas criações. Pode ser layout, temas, templates, ilustrações, logotipos, animações, enfim, a maioria pago em dólar. Então, junte todos os seus breguetis criativos e venda! venda! venda!

Quer conhecer as 40 opções? Aqui está!

Para o alto e avante!

Fonte: Mashable

10-24-08

Analisando o novo site do UOL

Vocês perceberam que o design do UOL mudou desde a semana passada? Não? Bem, para aqueles que perceberam, meus parabéns, vocês possuem uma visão bem aguçada. Agora, se você não percebeu, que ótimo! Era isso que o UOL queria, que você não percebesse.

As pessoas são avessas as mudanças. Principalmente aquelas novidades que exigem algum aprendizado. A mudança de layout de um portal de notícias como UOL é algo extremamente complicado. Requer bastante critério para que não cause impacto negativo em seus visitantes. Ao mudar o posicionamento de um menu, por exemplo, vocês não imaginam o tamanho da catástrofe. É usuário reclamando aos montes,  perguntando onde está o bendito link que todo dia ele clicava no mesmo canto esquerdo. Clicava até olhando pra cima. Era automático.

Para quem já leu o livro “Não me faça pensar” de Steve Krug, sabe o que estou falando. Krug, comprova, através de testes de navegação que o internauta não gosta de pensar na hora de clicar e navegar. Gostoso é ligar o automático e fazer tudo de olhos fechados. Aí, derrepente, não mais que derrepente, vem a desagradável surpresa: o layout mudou. Completamente. E agora? Cadê a seção de notícias? O menu? A caixa de busca?

Esse fenômeno de repulsa é natural e acontece com todos os sites altamente visitados. O lançamento da última mudança no site do O Globo é um exemplo, que cheguei a comentar em meu site pessoal. Em 2006 O Globo fez uma grande mudança no layout. O impacto visual foi positivo. Porém o de navegação não. Links mudaram de lugar, outros sumiram e chamadas de novela se misturavam a notícias sobre a bolsa de valores. Houve uma tentativa de agrupar o maior número de notícias na primeira tela do site e foi abolido os agrupamentos em seções. Isso deixou o leitor totalmente confuso nos primeiros dias, sem entender o funcionamento do site e como encontrar suas páginas preferidas. Passaram-se 2 anos e as mudanças feitas no layout foram sutis, sem atrapalhar a navegação, ocorrendo de forma gradativa.

Já a mudança de layout do UOL foi diferente. A mudança foi sutil. A maior mudança foram as cores: agora predomina o branco. O branco, todos nós sabemos, favorece a leitura, cansando menos a vista. Além disso, as margens em branco deixam o layout mais leve, com menos barreiras visuais. Foi mantido também o ótimo recurso de seções organizados em editorias. Assim a notícia da novela fica em “entretenimento” e da Formula 1 em “esportes” sem misturar um com o outro. Quer saber sobre o último jogo da Copa? Basta bater o olho na editoria esportes e tá tudo resolvido.

A mudança foi sutil. Os principais elementos, como o menu, ficou no mesmo lugar. O usuário não se perde. E assim UOL vem acertando desde 1999, quando adotou o estilo portal, com página corrida, menu vertical e de topo, seções e muitas chamadas de notícia.

Portanto, se você possui um portal muito visitado ou algum cliente seu deseja mudar o layout do seu portal, cuidado. Seja bastante criterioso e pense 2 vezes antes de mudar seções de lugar. Mire-se no exemplo do UOL. Ter o cabelo preto e resolver pintá-lo de loiro pode lhe causar problemas. Às vezes basta apenas mudar o penteado. Pense nisso.

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!