Geoweb +Design +Tecnologia +Educação » Design http://www.geoweb.blog.br +Design +Tecnologia +Educação Mon, 18 Jan 2010 16:19:25 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 20 novas fontes grátis http://www.geoweb.blog.br/2009/11/16/20-novas-fontes-gratis/ http://www.geoweb.blog.br/2009/11/16/20-novas-fontes-gratis/#comments Mon, 16 Nov 2009 13:13:25 +0000 George Campos http://www.geoweb.blog.br/?p=508 A Smashing Magazine, selecionou 20 novas fontes gratuitas, pra inovar em seu layout. É uma melhora que a outra, basta navegar, escolher e baixar.

20 Novas Fontes Gratuitas

Leia também

]]> http://www.geoweb.blog.br/2009/11/16/20-novas-fontes-gratis/feed/ 0 O que aconteceu com luminária da Pixar http://www.geoweb.blog.br/2009/10/20/o-que-aconteceu-com-luminaria-da-pixar/ http://www.geoweb.blog.br/2009/10/20/o-que-aconteceu-com-luminaria-da-pixar/#comments Tue, 20 Oct 2009 13:14:27 +0000 George Campos http://www.geoweb.blog.br/?p=497 A triste história da luminária da Pixar, via College Humor.

Leia também

]]> http://www.geoweb.blog.br/2009/10/20/o-que-aconteceu-com-luminaria-da-pixar/feed/ 0 460 ícones grátis (free icons) http://www.geoweb.blog.br/2009/09/29/design-e-icones/ http://www.geoweb.blog.br/2009/09/29/design-e-icones/#comments Tue, 29 Sep 2009 20:58:30 +0000 George Campos http://www.geoweb.blog.br/?p=491 Designers adoram ícones! Esses pequenos símbolos gráficos que de maneira simples conseguem passar tantas informações e nos poupar um bocado de textos em nossos layout.  Segue abaixo uma coleção de 460 ícones grátis :)

ícones, my precious!

Leia também

]]> http://www.geoweb.blog.br/2009/09/29/design-e-icones/feed/ 0 Sites em Wordpress: Agência USP de Notícias http://www.geoweb.blog.br/2009/08/27/sites-em-wordpress-agencia-usp-de-noticias/ http://www.geoweb.blog.br/2009/08/27/sites-em-wordpress-agencia-usp-de-noticias/#comments Fri, 28 Aug 2009 00:33:36 +0000 George Campos http://www.geoweb.blog.br/?p=467 Site da Agência USP de Notícias, que é responsável pela divulgação aos meios de comunicação a produção científica e atividades como cursos e palestras, exposições e publicações da Universidade.

Este é o primeiro site que comecei a fazer em Wordpress aqui na USP, o primeiro de vários ;)

agencia_usp_noticias

Nele usamos poucos plugins, usamos por enquanto o Gerenciador de capas do Xemelê, porem estamos desenvolvendo um próprio com características que precisamos. Desenvolvemos também um plugin para cadastro e envio de Newsletter que em breve vamos disponibilizar. Estamos documentando ambos e fazendo testes. Também tenho que ressaltar o trabalho sensacional do programador Pedro Cicolin Leme, que trabalha conosco e está desenvolvendo esses plugins.

Fora isso mais nada, só o tradicional layout, php, jquery e muitas functions personalizadas :)

Leia também

]]> http://www.geoweb.blog.br/2009/08/27/sites-em-wordpress-agencia-usp-de-noticias/feed/ 1 Padrões de Design, tipografia e layout para sites http://www.geoweb.blog.br/2009/08/21/padroes-de-design-tipografia-e-layout-para-sites/ http://www.geoweb.blog.br/2009/08/21/padroes-de-design-tipografia-e-layout-para-sites/#comments Fri, 21 Aug 2009 15:14:13 +0000 George Campos http://www.geoweb.blog.br/?p=457 A Smashing Magazine fez um ótimo estudo de padrões de design, tipografia e layout para sites, recomendo a leitura completa. Abaixo segue uma cola que fiz com aquilo que achei mais importante do  que eles pesquisaram.

1. Serifa vs  Sans-serif (sem serifa)

40% usam serifa
60% não usam fontes serifadas

2. Fonte mais  popular serifada pra título e corpo do texto

Georgia

3. Fonte mais  popular não serifada pra título e corpo do texto

Arial, seguida por Verdana e Helvetica

4. Fonte mais utilizada

Georgia, Arial e Verdana

5. Tamanho da fonte pra título

De 18px a 20px e 24px a 26px, empatados.

6. Tamanho da fonte pro corpo do texto

13px disparado e 14px em segundo.

7. Caracteres por linha

82 a 84, seguido por 88 a 90.

Outras dicas

46% dos sites usam underline nos links
96% dos sites não usam texto justificado
A escala tradicional de fontes é 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72

Padrões de escala em pixel

Tamanho da fonte do título ÷ tamanho da fonte do corpo = 1.96
Altura da linha ÷ tamanho da fonte do corpo = 1.48
Tamanho da linha (pixels) ÷ Altura da linha (pixels) = 27.8
Espaço entre parágrafos (pixels) ÷ Altura da linha (pixels) = 0.754

Leia também

]]> http://www.geoweb.blog.br/2009/08/21/padroes-de-design-tipografia-e-layout-para-sites/feed/ 0 50 Outdoors criativos http://www.geoweb.blog.br/2009/08/20/50-outdoors-criativos/ http://www.geoweb.blog.br/2009/08/20/50-outdoors-criativos/#comments Thu, 20 Aug 2009 13:11:27 +0000 George Campos http://www.geoweb.blog.br/?p=447 Uma compilação de 50 Outdoors  muito criativos. Veja aqui os outros 48 – via 10steps.


Leia também

]]> http://www.geoweb.blog.br/2009/08/20/50-outdoors-criativos/feed/ 1 Sites em Wordpress: 13º Festival de Cinema Judaico http://www.geoweb.blog.br/2009/08/01/sites-em-wordpress-13%c2%ba-festival-de-cinema-judaico/ http://www.geoweb.blog.br/2009/08/01/sites-em-wordpress-13%c2%ba-festival-de-cinema-judaico/#comments Sat, 01 Aug 2009 15:55:11 +0000 George Campos http://www.geoweb.blog.br/?p=413 Pela terceira vez eu produzo o site 13º Festival de Cinema Judaico, é sempre um trabalho legal de ser feito, tirando o prazo apertado (que é algo normal). O desse ano embora não contratado pelo “A Hebraica” assumi como um desafio em produzir ele dentro de um CMS, queria que o conteúdo do site ficasse em banco de dados para que se mantivesse um histórico desse ano e dos próximos. O projeto gráfico do site segue o tema proposto e produzido por eles para o encarte do festival.

festival_de_cinema

O grande desafio pra mim nesse trabalho foi produzir do zero todo o desenvolvimento do mesmo em Wordpress, além de layout e programação. No fim pela primeira vez não usei um template como referência e usei o framework wp-framework. Nunca mais uso um template de referência, a facilidade que o wp-framework proporciona é sensacional sem contar que você conhece exatamente todo os css porque é você quem faz.

Diferente do que muita gente pensa o Wordpress é um verdadeiro gerenciador de conteúdo e não se limita a produção de blogs, vide o layout do site que ficou com cara de um pequeno portal.

O que utilizei:
• Wordpress
• Wp-framework
• Jquery
• Plugin wp-postratings
• E muito CSS e PHP :)

Leia também

]]> http://www.geoweb.blog.br/2009/08/01/sites-em-wordpress-13%c2%ba-festival-de-cinema-judaico/feed/ 3 Personalizando a tag HR pro IE, Firefox, etc.. http://www.geoweb.blog.br/2009/07/24/personalizando-a-tag-hr-pro-ie-firefox-etc/ http://www.geoweb.blog.br/2009/07/24/personalizando-a-tag-hr-pro-ie-firefox-etc/#comments Fri, 24 Jul 2009 16:08:32 +0000 George Campos http://www.geoweb.blog.br/?p=403 O Internet Explorer 6 que no passado foi um grande browser quando existia apenas o Netscape, hoje é o grande vilão entre designers e programadores. Talvez na época pela falta de profissionalização da área o IE era um sonho, ele aceitava tudo, tags fora de ordem, tags sem fechar, etc.. o IE não tava nem ai e mostrava tudo bonitinho.

Hoje felizmente a web já é mais profissionalizada e reina o xhtml, tableless e css validados e  o IE é o grande  temor de qualquer webdesigner, já que você tem que se desdobrar pro layout ficar correto nele.

Abaixo um truque pra que a feiosa tag <hr /> seja trocada por uma imagem e funcione em qualquer browser.

Esse é o modo tradicional que usava até então mas não funciona no IE.

hr {
  border : 0;
  height : 15px;
  background : url(hr.gif) 0 0 no-repeat;
  margin : 5px;
}

E esse é novo modo que descobri que funciona em todos os browsers inclusive o IE.

hr {
  display : list-item;
  list-style : url(hr.gif) inside;
  filter : alpha(opacity=0);
  width : 0;
}

Descobri no site borgar.net essa solução limpa em css, sem javascripts, jquery, etc..

Leia também

]]> http://www.geoweb.blog.br/2009/07/24/personalizando-a-tag-hr-pro-ie-firefox-etc/feed/ 0 Logotipo – Definindo o conceito do logo http://www.geoweb.blog.br/2009/07/23/logotipo-definindo-o-conceito-do-logo/ http://www.geoweb.blog.br/2009/07/23/logotipo-definindo-o-conceito-do-logo/#comments Thu, 23 Jul 2009 20:55:47 +0000 George Campos http://www.geoweb.blog.br/?p=394 Há tempos atrás quando o Bradesco lançou seu novo logotipo, lembro que eles lançaram uma cartilha para explicar o seu novo logo. Não gosto de cartilhas, folders, prospectos, etc.. explicando o logotipo. Acho que se o logotipo não está claro e as pessoas não entendem a ilustração que o acompanha é melhor refazer o mesmo.

Porém, se você tem dúvida pra embasar o conceito do seu logotipo, veja abaixo e aprenda ;) Vi no Piores Briefings do Mundo.

defesamarca

Leia também

]]> http://www.geoweb.blog.br/2009/07/23/logotipo-definindo-o-conceito-do-logo/feed/ 0 Comercial do Novo Golf VI (alemão) baseado no filme Matrix http://www.geoweb.blog.br/2009/04/02/comercial-do-novo-golf-vi-alemao-baseado-no-filme-matrix/ http://www.geoweb.blog.br/2009/04/02/comercial-do-novo-golf-vi-alemao-baseado-no-filme-matrix/#comments Thu, 02 Apr 2009 13:48:17 +0000 George Campos http://www.geoweb.blog.br/?p=272 “Surprised to see me?” O chef  designer da Volkswagen enfrenta seus clones. Via bluebus.


Leia também

]]> http://www.geoweb.blog.br/2009/04/02/comercial-do-novo-golf-vi-alemao-baseado-no-filme-matrix/feed/ 0