CHR Designer

Michael Jackson

2009-07-09T11:04:00.001-03:00

Olá pessoal eu estava dando uma olhada nos meus “Feeds” e vi essa homenagem ao Michael Jackson, vários “designers” fizeram uma “pequena” homenagem ao M.J. que faleceu recentemente neste mês de Junho. Então vou deixar aqui postado também como uma ulmilde homenagem a ele.

(Leia Mais…)

Michael Jackson

2009-07-09T11:04:00.000-03:00

Novo Comercial do Guaraná Antarctica

2009-07-05T10:40:00.001-03:00

Esse é o mais novo comercial do Guaraná Antarctica que lançou nesse mês de Junho. Presta atenção no “Godzilla” que aparece no comercial…hahahah…

(Leia Mais…)

Havaianas - Leão de Ouro no Festival de Cannes 2009 categoria Design

2009-07-05T10:39:00.002-03:00

É isso ae… por isso que eu me orgulho da profissão que eu escolhi…hahaha… os brasileiros dominão essa área… a Havaianas foi campeã do Leão de Ouro de Cannes 2009 na categoria Design… parabens… abaixo tem a identidade visual da Havaianas…

(Leia Mais…)

Fazendo GIF animado simples com Photoshop e ImageReady

2009-07-05T10:39:00.001-03:00

Olá pessoal mais um post dedicado para alguem e denovo vai para o Guto mas tambem serve para o Fabio JR., que sempre fazem a mesma pergunta “Como faz gif animado mesmo no photoshop?”…hahaah…depois deste post se eles perguntarem denovo eu fico bravo…haahah…

(Leia Mais…)

Desenhando a Mona Lisa no Paint

2009-07-05T10:38:00.002-03:00

Eu sei que esse video já é bem antigo mas toda vez que eu vejo fico impressionado, como o cara consegue desenhar a Mona Lisa no Paint… meu deus já é dificil vetorizar no Photoshop imagina como foi dificil desenhar no Paint.

(Leia Mais…)

Como fazer borda arredondada no FireFox e no IE com css?

2009-07-05T10:38:00.001-03:00

E ai pessoal semana passada eu estava ajudando a Patricia uma menina que trabalha na Lógica Digital na parte de recorte, ela pediu uma ajuda minha para fazer um Moving Boxes precisava que a imagem ampliasse sozinha mas com uma imagem de fundo não dava certo então eu fiz em css mas as bordas arredondadas mas não pegava no IE então eu fiz umas pesquisas no google até que eu achei o site html remix, então eu resolvi deixar postado aqui para ajudar todo mundo que tem essa mesma dúvida e tambem para que eu não esqueça mais.

(Leia Mais…)

Formatos de Banner para Web

2009-07-05T10:37:00.001-03:00

Olá pessoal hoje eu estava fazendo um wireframe de um projeto da Lógica Digital, ai bateu uma dúvida “Qual o tamanho do Super Banner?” comecei a pesquisar até que eu achei o tamanho que é “728px x 90px” então resolvi postar aqui para que eu não esqueça mais e também vai ajudar muita gente que tem a mesma dúvida minha.

(Leia Mais…)

Como iniciar um recorte em Tableless

2009-07-05T10:36:00.002-03:00

E ai pessoal, esse post vai ser dedicado ao Alex um amigo meu que trabalha comigo na Lógica Digital, sempre que vai começar um recorte do zero ele tem muitas dúvidas de como iniciar. Ele não sabe como as DIVs tem que ficar e toda vez eu explico mas agora se ele perguntar para mim eu vou mandar esse link para ele…hahahaha….

(Leia Mais…)

Coleção de latas de cerveja

2009-07-05T10:36:00.001-03:00

É pessoal para quem me conheçe sabe que eu sou viciado em uma cerveja…hahahah…e ontem o Lucas mais conhecido como “Maluko” que trabalha comigo na Lógica Digtital, me mostrou essa coleção e não tem como eu deixar passar essa…e tambem se for pensar direito as latinhas é Designer cada uma tem um detalhe mais bunito doque a outra.

(Leia Mais…)

Google revela novos logos de produtos

2009-07-05T10:35:00.001-03:00

Pode ser uma coisa muito pequena, mas quando é sobre a dimensão do Google, é uma mudança que milhões de pessoas vão notar. A empresa atualizou todos os seus produtos logos - Textos, notícias, mapas, etc…

Especificamente, todos os logotipos (além de produtos com sua própria marca, como o do Gmail agora incluem padrão logotipo do Google, além do nome do produto na mesma “limpa”. Veja alguns dos novos logotipos:

(Leia Mais…)

Alguns logos feitos com Helvética

2009-07-05T10:34:00.001-03:00

E ai pessoal outro dia eu assisti o “Helvetica Film” e achei interessante saber quais logos era feitos com ela e eu achei muitos logos como a Microsoft, 3M, Nestlé, BMW, GM, Harley Davidson, etc… são escritos com Helvética e varias outras grandes marcas como nesse post vai mostrar.

(Leia Mais…)

Desenho com Pritt

2009-07-05T10:33:00.002-03:00

Olá pessoal eu estava dando uma olhada no blog Caligraffiti e ví esse video eu achei incrível como a imaginação dos seres humanos pode fazer. Esse video foi o artista chamado Michael C. Page que fez para um comercial da “Pritt” ele usou tinta, papel e marcadores Pritt. Vale a pena dar uma olhada nesse video.

(Leia Mais…)

Fontes de Filmes, Marcas, Logos, Bandas e Games

2009-07-05T10:33:00.001-03:00

Olá pessoal eu sou viciado em Fontes não tem como esconder isso, eu estava dando uma olhada na galeria de fonts que tenho aqui no meu pc e achei umas fontes muito interessantes que são utilizadas em Filmes, Marcas, Logos, Bandas e Games, então eu resolvi colocar aqui no meu blog para quem quiser fazer download delas é só clicar na imagem, abaixar e aproveitar…hahahahah…tomara que vocês gostem…

(Leia Mais…)

Novo Layout - Dahruj Honda

2009-07-05T10:32:00.001-03:00

Olá pessoal esse layout da Dahruj Honda deu muito trabalho para desenvolver, nossa foram muitas pesquisas e tambem muita ajuda, principalmente do Cold e Camilo que foram dando “palpites” noque eu poderia melhorar mais o layout .

(Leia Mais…)

Como obter uma melhor indexação - Flash

2009-07-05T10:31:00.002-03:00

Eu estava lendo no blog do Fabio Ricotta e vi esse artigo muito bom falando sobre como melhorar a indexação de Sites em Flash, na Produtora Web que eu trabalho “Lógica Digital” eu sempre converço com o responsável em flash “Fabio JR.” como nos podemos melhorar a indexação. Abaixo vai ter uma breve descrição como podemos melhorar isso.

(Leia Mais…)

Recordes Mundiais

2009-07-05T10:31:00.001-03:00

E ai pessoal no outro dia eu estava dando um olhada no G1 vi esses recordes mundias de tamanho, nossa as vezes eu fico pensando como que tem pessoas com tanta imaginação assim…hahahaha….

(Leia Mais…)

Logos de Grandes Emissoras Nacionais e Internacionais

2009-07-05T10:30:00.000-03:00

E ai pessoal, no outro dia eu estava assistindo Discovery Channel , e vi que eles mudaram o logo deles ai então eu comecei a pesquisar quais mais Emissoras tinham reformulado seus Logos, mais abaixo vou colocar alguns Logos que eu achei de Grandes Emissoras Nacionais e Internacionais, mas com o tempo eu vou colocando mais.

(Leia Mais…)

Quer postar seu portfólio ou blog em Sites de CSS

2009-07-05T10:29:00.000-03:00

Olá pessoal olha eu aqui denovo, esse post vai ser mais interessante para quem tem um Portfólio ou Blog e quer que tudo mundo veja o seu trabalho ou até mesmo para você ver layouts de outras pessoas para tirar “Inspirações” para criar o seu, eu onde trabalho “Lógica Digital” sempre entro nesses sites para tirar umas idéias e ver o que tem de novo. Abaixo eu vou postar uns sites de css que eu sempre acesso, tomara que vocês gostem.

(Leia Mais…)

Imagens que desafiam o Photoshop

2009-07-05T10:28:00.002-03:00

Olá pessoal eu estava dando uma navegada ai eu entrei no Planeta Bizarro da Globo.com ai me deparei com essas imagens, nossa até parece que é montagem essas fotos não da para acreditar que é tudo de verdade…hahahah, então vamos dar uma olhada.

(Leia Mais…)

O que são Favicons e como colocar no seu site

2009-07-05T10:28:00.001-03:00

Olá pessoal neste post nos vamos tratar de uma coisa muito importante, “Favicons” vamos saber “O que é” e “Como colocar no seu site o blog”.

Favicons (palavra derivada de favorite (favorito) e icon (ícone)) são pequenas imagens no formato *.ico com de cerca de 16×16 pixels que ficam guardados em um site para visualização pelo navegador.

(Leia Mais…)

Qual fonte colocar? Com Serifa ou Sem Serifa?

2009-07-05T10:27:00.000-03:00

Olá pessoal, já faz um tempinho que o Guto sempre fica perguntando para mim quais fontes seriam boas para colocar no recorte de um certo site, então eu resolvi fazer este post para ele, sempre quando tiver ele uma dúvida “Qual fonte seria boa para colocar neste recorte?”.

Abaixo eu vou dar exemplos de fontes com serifa e sem serifa padrões do Windows todas com 11px de altura.

(Leia Mais…)

O que são Meta tags

2009-07-05T10:25:00.001-03:00

Neste post vai explicar um pouco mais sobre o que é “Meta Tags” é muito importante saber para que serve cada “Meta” para o posicionamento do seu site ou blog nos sites de busca.

Meta Tags são linhas de código HTML, também conhecidas como “etiquetas” e sua função é falar para os robôs buscadores do que se trata o conteúdo do seu site. Nelas você vai inserir as palavras que facilitarão o entendimento dos usuários que estiverem à sua procura, além de informar a qualquer um que veja seu código-fonte que você é o autor do mesmo.

(Leia Mais…)

O Poder das Fontes

2009-07-05T10:24:00.002-03:00

Eu sou fissurado por Fontes da para fazer muitas coisas com elas só saber como utilizá-las e esses caras abaixo sabem como usá-las. Vamos dar uma olhada:

(Leia Mais…)

O que é A Web Semântica

2009-07-05T10:22:00.001-03:00

Um post muito interessante que eu li no Tableless e achei importante postar aqui no meu blog, então vamos começar intender um pouco sobre Web Semântica.

Web Semântica é nada mais nada menos, que uma web com toda sua informação organizada de forma que não somente seres humanos possam entendê-la, mas principalmente máquinas. Disse principalmente máquinas, porque elas nos ajudarão, de fato, em tarefas que hoje, invariávelmente temos que fazer manualmente.

(Leia Mais…)

Novo Blog

2009-04-19T17:22:00.003-03:00

Ae pessoal mudamos de endereço agora estamos com um dominio proprio, acessem http://chrdesigner.com/blog/

SEO - Posicionamento em Sites de Busca

2009-04-05T17:08:00.003-03:00

Esse video foi desenvolvido pela Lógica Digital para mostrar mais sobre o que é SEO? Hoje em dia é muito importante esse assunto para deixar seu site no topo dos Sites de Busca...

Tipografias Famosas

2009-04-05T16:13:00.007-03:00

Neste post eu vou mostrar as oito fontes mais conhecidas e mais usadas pelos Designer e tambem mostrar para um cliente que teimou comigo falando que as fontes mesmo em "Familia" diferentes não muda a sua altura e largura, então vou mostrar pra ele...hahahah...todas as fontes estão no tamanho "50px".

Referência: Wikipédia

Classificação das fontes Tipográficas

2009-04-05T12:55:00.006-03:00

As Fontes Tipográficas, ou simplesmente fontes, ou tipos, são classificadas segundo suas principais características, as Serifas. Na tipografia, as Serifas são os pequenos traços e prolongamentos que ocorrem no fim das hastes das letras. Temos como exemplo mais comuns a fonte Times New Roman.

Porém, ainda temos outros 5 tipos de fontes, umas derivam das serifadas, outras não se encaixam nas características acima citadas e são: Moderna, Script, Display, Black Letter e Não Latinas. Estas serão explicadas ao longo deste artigo.

Fontes Serifadas:

Tipicamente, os textos serifados são usados em blocos de texto (como em um romance), pois as serifas tendem a guiar o olhar através do texto: o ser humano lê palavras ao invés de letras individuais, assim as letras serifadas parecem juntar-se devido aos seus prolongamentos, unindo as palavras.Por outro lado, as fontes sem serifa costumam ser usadas em títulos e chamadas, pois valorizam cada palavra individualmente e tendem a ter maior peso e presença para os olhos ("chamando a atenção"), já que parecem maislimpas.
Ex: Times new roman, Garamond, Bodoni, Didot e Caslon.

Fontes não Serifadas (Sans-Serif ou Sem Serifa):

As famílias tipográficas sem serifas são conhecidas como sans-serif (do francês "sem serifa"). O primeiro tipo sem serifa apareceu em 1816, pela casa fundidora Caslon e foi considerado bem avançado para a época, que era dominada pelos tipos de serifa quadrada. Foi um fracasso comercial. Pouco tempo depois, Willian Thorowgood produziu o primeiro alfabeto sem serifa com minúsculas, que ficou conhecido como Grotesque, base dos alfabetos sem serifa mais conhecidos.

Elas são perfeitas para exibição de textos no monitor pois transmitem sensação de limpeza, clareza, organização, fatores primordiais para atrair o visitante à leitura.
Ex: Helvética, Arial, Eurostile, Franklin, Optima, Univers, Kabel, Futura, Gill Sans, Avantgarde, Optima, Fruitiger.

Fontes Modernas:

As fontes tipográficas são classificadas como Moderna (ou ainda Didone) quando no seu desenho estrutural se percebe grande diferença entre espessura fina e grossa. Essa diferença acentuada não exclui a fonte daclassificação com ou sem Serifa, sendo assim, existem fontes Modernas com e semSerifa.
Ex: East Side, Elif.

Fontes Script:

São consideradas fontes Script todas que imitam a escrita humana. Essas fontes são largamente utilizadas em trabalhos gráficos como Convites, pois seguem tendências tradicionais vindas da Idade Média, seu desenho sugere classe, tradição, elegância, antiguidade. Devem ser usadas com cuidado quando se trata de mídia interativa.
Ex: English111 Vivace BT, TypoUpringht BT e Amazone BT.

Fontes Display:

Toda fonte que foge completamente das descritas acima é tida como fontes Display. São todas as fontes comemorativas, enfeitadas, tipos como"Wingdings" que nem representam letras, mais símbolos, são classificados como Display. Essas fontes também são conhecidas como fontes comemorativas, isso devido aos desenhos curiosos de algumas delas, algumas imitam bixos, objetos, pessoas, neve, desenhos animados, outras ainda remetem a idéia de festa, comemoração, quadrinhos, tecnologia, etc.
Ex: Zebrawood Fill, Zipty Do, Khaki Two, Giddyup, Cutout.

Fontes Black Letter's:

É um caso particular de fontes Display, se originaram das fontes Serifadas, são as
chamadas fontes Góticas. Lembramos dela sempre naqueles livros de "Era uma vez..." onde a primeira letra do parágrafo é capitulada com uma letra black Letter.
Ex: OldEnglish, Goudy Text, Wilhelm Klingspor-Schrift.

Fontes Não Latinas:

Todas as fontes que representam uma língua cuja escrita não emprega caracteres latinos, pertencem a este grupo. Entre outras estão à escrita árabe, a cirílica e a japonesa.

Referência: Web Design Total

Dois Layouts Novos

2009-04-02T21:45:00.005-03:00

Ae pessoal comecei com tudo esse mês...hahaha..mais dois layouts desenvolvidos pela produtora Web Lógica Digital que são Simco Maq e Yamaguchí vamos dar uma olhada...

Simco Maq

Yamaguchí

Type Faces - Retratos com Tipográfica

2009-04-01T22:33:00.006-03:00

Eu estava navegando e deparei-me com esse post no Abduzeedo e eu achei muito legal os efeitos que da pra fazer com as fontes...na minha opinião esse post é muito bom vale a pena dar uma olhada.

Bill Gates vs. Steve Jobs - Essa briga nunca acaba...hahaha

2009-03-31T21:56:00.003-03:00

É pessoal esses dois nunca vão para de brigar...hahahaha....vamos dar uma olhada nessa sátira que a SuperNews fez sobre Bill Gates e Steve Jobs.

Antes e Depois, Grandes Reformulações em Grandes Sites

2009-03-30T21:57:00.005-03:00

Olá pessoal já fazia um tempinho que eu queria postar isso, nesse post vou mostrar Grandes Reformulações de Sites muito conhecidos pelo público para entrar na nova era da Web 2.0

UOL

Antes

Depois

Globo.com

Antes

Depois

Terra

Antes

Depois

Yahoo

Antes

Depois

Google.com

Antes

Depois

Logos com duplo sentido...hahahah

2009-03-30T20:01:00.004-03:00

Olá pessoal eu estava navegando e vi esses logos com duplo sentido...já fazia um tempinho que eu tinha visto isso lá na Lógica Digital...

Remodelação de Grandes Marcas

2009-03-29T12:53:00.007-03:00

Olá pessoal eu estava navegando por ai e me interessei sobre esse post que eu vi no site Function que é grandes remodelações de Marcas, Sites, Designers de Carros e de Produtos, etc... vamos dar uma olhada.

01. AT&T Inc.

02. BP Garage

03. Sprint

04. Mindshare

05. Mustang 2010

06. Adobe Photoshop CS4

07. Discovery Channel

08. Fanta

09. Johnsons Baby

10. Fiat Bravo

11. Steinlager

12. Applebee’s

13. Firefox / Firebird

14. QVC

15. Vauxhall

16. MSNBC

17. Ford

18. Ford Fiesta

19. The BBC

20. Direct TV

21. Barack Obama

22. Grooveshark

23. BusinessWeek

24. Viget Labs

25. Toys”R”Us

26. Seat Leon

27. N Design Studio

28. The BBC website

29. Wordpress.org

30. Microsoft

31. MailChimp

32. CNET

33. Wembley Stadium

34. Apple iPod

35. The Simpsons

36. XBOX

37. Design Shard

38. KFC

39. Walmart

40. Envato

41. Best Buy

42. Macmillan

43. Holiday Inn

44. British Telecom

45. Vicks

46. Fuel Your Creativity

47. Amazon

48. Virgin Media

49. Macbook Pro

50. HP

Referência: Function

SEO - Como Estruturar um Site

2009-03-25T20:47:00.006-03:00

Como eu sou novo nesse papo de SEO eu ando pesquisando muito em vários sites como Mundo SEO, Brasil SEO e vários outros. O mais importante no SEO é sabe como estruturar um Site corretamente nesse post vai ter as principais técnicas do que devemos saber.

1. Defina o tema do site.
Através do tema será possível escolher o melhor design, títulos, meta tags e conteúdo para o site. Atente para títulos e meta tags que devem ser diferentes para cada página, isso parece lógico, mas muita gente esquece disso. Outra coisa é não repetir conteúdo. As ferramentas de buscas possuem algoritmos que verificam a existência de conteúdo duplicado em suas páginas.

2. Trabalhe com texto de âncora em seus links.
Texto de âncora (Ancor Text) é a palavra ou frase usada como link na sua página. É importante trabalhar esse texto de âncora usando palavras-chave, pois ele está diretamente relacionado com a página a qual está relacionada.

3. Mantenha o usuário no site.
Sites feitos de qualquer jeito, mal organizados e com apresentação ruim, podem fazer com que um possível usuário nem navegue seu site. Portanto, ao criar ou otimizar um site, não esqueça de verificar se seu design é moderno, chamativo e se está bem feito.

4. Use as tags H1, H2 ou H3 para definir títulos e subtítulos.
É fundamental estruturar o conteúdo de forma correta.

5. Posicione suas informações de forma a facilitar a visualização do usuário.
Conteúdo ou informações posicionadas de forma errada podem fazer com que o usuário não as encontre. Isso faz com que ele acabe desistindo de navegar o site. Então evite que aconteça isso, faça um estudo de usabilidade para a construção do seu site.

6. Evite formatações in-line nas páginas.
Use um arquivo CSS para separar o código da formatação. Isso ajuda manutenção e deixa o código mais limpo.

7. Problemas com navegadores diferentes.
Atualmente, existem no mercado vários navegadores diferentes e cada um deles faz a leitura e interpretação de suas páginas de maneiras diferentes. Portanto, faça um teste com suas páginas em alguns navegadores com configurações e resoluções da tela para testar a sua compatibilidade. Recomendo verificar as páginas no IE (Internet Explorer) e Firefox que são os navegadores mais usados atualmente.

Referências: Mundo SEO e Brasil SEO

Eu sou Designer, hahahahaha

2009-03-25T20:29:00.003-03:00

É pessoal para descontrair um pouco vou colocar um video aqui, nos que somos Designer já temos a má "fama" ainda por cima os caras fazem uma música tirando sarro da nossa profissão...hahahaha

SEO - Black HAT

2009-03-24T20:40:00.007-03:00

No outro dia eu e o Marcelinho estávamos converçando sobre esse assunto ai resolvi dar uma pesquisa sobre oque é "Black HAT" ai eu achei esse post no site Mundo SEO muito bom. Basicamente há 3 técnicas-chave dentro do SEO:

White Hat SEO: Técnicas permitidas que realmente otimizam seu site deixando-o mais atraente pelos mecanismo de busca.

Gray Hat SEO: Técnicas de procedência duvidosa, embora não sejam consideradas técnicas de Black Hat, atuam no limiar. O uso excessivo das mesmas pode levar a punição pelos mecanismos de busca.

Black Hat SEO: Técnicas de Otimização de sites mal vistas pelos mecanismos de busca. Embora tragam resultados a curto prazo para o seu site, mais cedo ou mais tarde este será penalizado pelas search engines.

Vamos tratar neste post, algumas técnicas de Black Hat. Desaconselhamos ao extremo o uso das mesmas, porém é importante ter consciência, para eventualmente evitá-las. Pois quem nunca teve uma idéia genial de subir o rankeamento do site rapidamente, não é mesmo? Então é bom ter noção de como poderá ser penalizado pelo uso da mesma!

As principais técnicas black hat são:

Keyword Stuffing: Basicamente é um spam de palavras-chave ( keywords ) durante todo conteúdo da página.

Invisilbe Text: Técnica em que deixa o texto escondido, camuflado com a mesma cor da página de fundo. Assim fica imperceptível ao usuário porém relevante ao mecanismo de busca. Geralmente usam palavras-chaves mais visadas sem relação com o texto.

Cloaking Page: Finalidade de exibir páginas distintas para as search engines do que para os usuários normais. Direcionam o acesso checando o IP ou o navegador do visitante.

Doorway page: Semelhante a Cloaking Page, porém ao invés de utilizar do navegador ou o IP do usuário, utilizam de javascript, meta ou ocasionalmente de cliques feitos pelo mesmo.

Link Farms: Processo onde várias páginas são criadas em sites distintos e nelas há vários links apontados mutuamente. Ou mesmo uma única página apontando para várias outras. Este processo de troca de links não é bem vista e passiva de punição.

Over-Submitting: A utilização de ferramentas de divulgação que constam de processos automáticos, pode levar envios redundantes ao mesmo local, e desta forma são considerados spam.

Duplicated Content: Sabe-se a relevância que os mecanismo de busca dão a unicidade da informação apresentada, então é necessário tomar cuidado para evitar conteúdo duplicado da mesma.

Misrepresenting Content: É mostrado um conteúdo diferente do que a página deveria mostrar. Desta forma tenta enganar o usuário, que buscaria tal informação e tem uma surpresa.

Referência: Mundo SEO

Helvetica e Arial

2009-03-23T21:00:00.009-03:00

Nesse post vai explicar um pouco da história das Fontes mais famosas do Mundo Designer, "na minha opinião" Helvetica e Arial.

Helvetica
A Helvetica é uma fonte sem serifas desenvolvida em 1957. O nome Helvetica é uma referência ao nome da Suíça em latim, pois esta é a pátria de seu autor (Max Miedinger) e também do Estilo Suiço, nome alternativo do Estilo Tipográfico Internacional, do qual a Helvetica é representante.

Trata-se de uma das famílias de tipos mais populares no mundo contemporâneo, sendo representada nos logotipos de empresas como 3M, AGFA, BASF, American Airlines, BMW, Lufthansa, Microsoft, Mitsubishi Electric, Nestlé, Panasonic, Parmalat, Saab, Samsung, Seagate, Target e Texaco, bem como nos mais variados produtos - Se você tem os jogos Metal Gear Solid 2: Sons of Liberty ou Metal Gear Solid 3: Snake Eater, confira os seus logos: a Helvetica estará lá.
Criada para ser uma alternativa à então popular Akzidenz Grotesk (nascida em 1896), a Helvetica alcançou o sucesso rapidamente, e no começo dos anos 80 passou a ser uma das 4 fontes incluídas junto aos interpretadores Postscript originais (em todas as impressoras laser “clássicas” e de primeira linha), bem como ser por default no Mac OS, por exemplo - porque a Apple não viu nenhum problema em obter (e pagar) a licença para isto.

Arial
A mais popular das fontes sem serifa no mundo Windows, a Arial foi projetada pela Monotype em 1982 a partir da própria Grotesk (compartilhando as raízes da Helvetica, portanto), mas tomando cuidados especiais para ter exatamente as mesmas proporções e peso da bem-sucedida Helvetica, para que documentos feitos para uso da Helvetica pudessem ser impressos ou visualizados com a Arial sem maiores alterações.

É como um clone, embora seja possível diferenciar as duas por pequenos detalhes, como a presença ou não de uma pequena cauda no A minúsculo - algo simples e trivial para os versados nestas artes, mas muito além da percepção do dia-a-dia da maioria dos usuários de computador - a não ser quando eles recebem uma amostra de cada uma das duas fontes, em tamanho 72, e a instrução clara de que devem procurar diferenças.
Este tipo de “clonagem” não era incomum na época. Outros fabricantes tinham seus próprios clones da Helvetica, com nomes como Triumvirate, Helios, Megaron ou Newton - e muitos deles eram cópias fiéis da Helvetica original, e não apenas redesigns criados para ser substitutos intercambiáveis.

Mas quando a Microsoft adotou definitivamente o padrão TrueType (no Windows 3.1), ela não seguiu a trilha da Apple, e preferiu adquirir o direito de distribuir a mais barata Arial, do que a original Helvetica. Certamente ela sabia que a maioria dos usuários não perceberia a diferença. Hoje o clone se tornou muito mais conhecido, e certamente há pessoas que, ao conhecer a Helvetica, invertem o sinal e acreditam que ela seja parecida com a Arial.

Assista o trailer sobre a Helvetica

Referência: Efetividade

Três Princípios básicos do Design

2009-03-23T20:36:00.005-03:00

Ae pessoal um artigo muito bom que eu li no site Digital Paper Web vale a pena dar uma olhada principalmente quem esta começando agora na vida de Designer, então vamos lá.

Existem três princípios básicos no design. Estes princípios estão sempre presentes em todas as obras de design (salvo as excessões do design-arte). Estes princípios são: proximidade, alinhamento e contraste. Vamos explicar um pouco sobre cada.

Comecemos com este exemplo; uma simples capa de livro amadora.

Agora, aos três princípios básicos…

Proximidade

Elementos similares devem estar próximos. Por exemplo, acima deste de parágrafo existe o título “Proximidade”. Se eu colocasse o título três linhas acima do início deste parágrafo, isso poderia gerar certa confusão pra você leitor; você estaria se perguntando “O que essa palavra tá fazendo aí no meio do texto? É uma palavra-chave? Qual a relação dele com o resto do texto?”. A lei é: não faça a pessoa ter que pensar nisso. Se ela ficar se questionando o por que desta distância, ela não vai conseguir concentrar-se no conteúdo. O mesmo vale para imagens: se uma imagem não têm nexo nenhum com uma segunda, por que deixá-los próximos? Vamos manter uma distância para não confundir a pessoa que está visualizando a obra. Aproximando elementos similares, você diminui a confusão, e deixa a informação mais clara e direta.

Alinhamento

Aqui no ocidente, sempre começamos a olhar algo começando do canto superior esquerdo descendo pela lateral. Se eu alinhasse apenas este parágrafo do centro pra direita da página (deixando o resto do texto como está), possivelmente seus olhos iriam ignorar este parágrafo e passar adiante. Se começar a alinhar algo pela esquerda, alinhe tudo pela esquerda. Se for pra alinhar tudo a direita, alinhe tudo pela direita. Se alinhar a um, dois ou quatro centrímentros da borda, alinhe tudo a um, dois ou quatro centímetros da borda. Evite a todo custo alinhar text pelo centro: isto dá um ar de desordenado e a pessoa se perde facilmente quando vai de uma linha pra outra, já que ela não têm um ponto de referência fácil (no caso, o início da última linha lida). E você não gosta de se sentir perdido ao ler um texto ou ver uma image né? Ninguém gosta.

Contraste

Não é incomum de ver gente usando fundo amarelo com letra branca. Pessoal, amarelo é muito próximo do branco. Se você colocar aquilo no sol, o pessoal não vai conseguir ler nada. Contraste é algo importantíssimo, ainda mais quando existe uma figura e um fundo. Convenhamos, até quando não existe um fundo, existe uma cor da mídia (por exemplo, o papel ou a tela do PC). Claro, dá pra colocar um texto preto sobre um papel branco. É uma ótima forma de contraste. Mas se quiser destacar algo em amarelo, por que não colocar uma tarja preta no fundo desta palavra? É uma ótima forma de contraste; faz aparecer bem aquilo que você quis que se destacasse e não acabou sumindo no fundo.

Referência: http://digitalpaperweb.com.br/

Paged Comments, Amigos ou Inimigo? Usabilidade vs SEO

2009-03-22T18:07:00.015-03:00

Com o lançamento do WordPress 2,7 paged comments tornou construído em um recurso. Por padrão, eles são ativados em ambas as novas instalações e atualizações. Onde ele pode ser bom para a usabilidade, pode não ser bom para SEO.

De uma perspectiva usabilidade, paged comments que são bons lugares para obter uma série de observações. Por padrão, o WordPress corta-las em 50 comentários por página. Os usuários, então não temos de esperar por mais de 100, ou até 1000, comenta a carregar. Sim, eu já vi lugares com mais de 1.000 comentários. O tempo que leva para uma página com muitas das observações a carga pode ser muito maior do que o utilizador está disposto a esperar. Quebra-los em páginas acelera página carga tempo e torna o site mais amigável.

De um SEO vista, paged comments podem dificultar a postagem. Com paginável comentários, cada página tem um URL separado e do próprio posto é duplicada entre cada página. Isto pode causar problemas conteúdo duplicado e visitantes do site poderão ser introduzidos na página 3 comentário de uma postagem. Idealmente, eles entram em todos os principais pós página.

Um blog proprietário poderia bloquear comentar páginas dos mecanismos de pesquisa, mas o conteúdo a ser criada pelos comentários na página dois + então não pode ser usado para ajudar a impulsionar o tráfego para o cargo. Os comentários são realmente uma ótima maneira de obter os usuários criem conteúdo adicional para um blog e não queremos que a solta.

Então, qual é a melhor solução? Minha recomendação seria configuração paged comments e colocar 100 comentários por página. Dessa forma, você precisará de um primeiro lote de comentários em uma postagem individual antes de comentar páginas começam a aparecer. Quando você tem mais de 100 comentários e, em seguida, o foco deveria ser mais sobre usabilidade, uma vez que é bastante óbvio que o lugar é muito popular. , Poderá haver ainda algumas implicações SEO, mas por esta altura, os usuários são mais importantes.

Se você ainda quiser ter paginado comentários, e estão preocupados que o SEO implicações são grandes para a ignorar e, em seguida, check-out Pressed Words' SEO for Paged Comments plugin. Eu não tentei isso sozinho, mas ele alega que ponha pós cantadas em todas as páginas do comentário e apenas mostrar o post completo sobre os principais post URL. Esta parece ser uma solução lógica.

Há um monte de usabilidade vs SEO debates lá fora. Cada um deve ser tomada numa base caso-a-caso e a verdadeira solução é até o proprietário do site. No caso dos comentários paginado, colocando 100 comentários por página e, em seguida, criar paginável comentários, é a melhor solução, como usabilidade vitórias fora, neste cenário, em minha opinião.

Referência: Blogger Design

O que é Twitter??? hahahaha

2009-03-22T16:08:00.004-03:00

Um video muito "engraçado" sobre o Twitter...

Rastreamento Ocular: como se lê na web

2009-03-22T15:17:00.006-03:00

Duas linhas na horizontal e uma na vertica: é assim que a maioria dos internautas lê os textos na web, conforme a pesquisa de rastreamento ocular feita pelo Nielsen/Norman group em 2006 (isso mesmo, o bom e velho Jakob Nielsen). Realizado com 232 usuários que visitaram milhares de páginas, o estudo concluiu que o internauta médio movimenta os olhos pelos websites de forma muito mais rápida do que quando folheia um livro.

Ao entrar num site, os internautas primeiro fazem um movimento horizontal, normalmente na parte superior da área de conteúdo do site. Depois, os olhos fazem um segundo movimento na horizontal, abaixo do primeiro movimento. Por último, os olhos descem numa linha vertical, que, por vezes, pode ser mais lenta do que a “olhada” horizontal. Esse movimento foi apelidado de “F”, já que se parece com o desenho da letra. F de fast.

Como já discutimos lá no iMasters, agora você já sabe que ninguém vai ler o seu texto de ponta a ponta. Para fisgar os leitores use dois estratagemas: concentre as informações mais importantes nos dois primeiros parágrafos do texto. Comece os parágrafos e os subtítulos com palavras de impacto. Assim, quando ele estiver fazendo o escaneamento vertical pode se interessar pelo tópico e optar por ler todo o texto.

A cor vermelha do gráfico mostra as partes que foram lidas; a amarela são as olhadinhas; as azuis receberam pouca atenção e a cinza nenhuma.

Referência: Agência Pro

Web Design - Tendências para 2009

2009-03-22T12:00:00.023-03:00

Vamos primeiro dar um olhar mais atento a algumas das tendências que identificámos, descobertos e observados ao longo dos últimos meses. Nesta visão geral, você encontrará uma revisão de cada tendência e mais belos exemplos que podem inspirar você em seu próximo projeto.

1° Out-of-the-box layouts

2º Uma página de layouts

3° Multi-coluna layouts

4° Enorme ilustrações e gráficos vibrantes

5º Mais espaço branco do que nunca

6° Social design elements

7º "Falar" Navegação

8° Separadores

9° Grandes Caixas

10° Categoria visuais

11° Ícones do Autor

12° Ícones Visuais

13° Nuvem de Tags

14° Ilustrações de Postagens

15° Aquarela

16° Caligrafia / Escrita / Letra

17° Retro e Vintage

18° Orgânicos texturas, azulejos e fotográficos backgrounds

19° Crachás

20° Etiqueta de Preço

21° Fitas

22° Gofragem Impressão Tipográfica

23° Interfaces Ricas

24° PNG Transparente

25° Tipografia Grande

26° Fontes não Padra (sIFR, etc.)

27° Caixas Modeladas

28° Caixa de Media

29° Aparência de Revista

30° Carrossel

31° Caixa de Introdução

Site de referência: Smashing Magazine

10 coisa que todo Designer deve saber mas nunca vão ensinar num curso de Design.

2009-03-22T11:31:00.005-03:00

Ae pessoal esse texto é muito importante pra quem trabalha ou ainda vai trabalhar na area de designer...

1. Talento não é tudo
Talento é importante em qualquer profissão, mas também não é garantia de sucesso. Trabalho duro e sorte são fatores igualmente essenciais. Na verdade, se você não é muito talentoso, pode ainda se dar bem se investir nos outros dois fatores - não me pergunte como investir na sua sorte, tente um guru.

2. A maior parte do trabalho é um saco
Na faculdade pode parecer que todo o trabalho do designer é super-legal. Já na vida real, na maioria do tempo temos que mexer com papelada, rascunhar coisas chatas, checar fatos, negociar, vender, juntar dinheiro, pagar taxas, e por aí vai. Se você não aprender a gostar do trabalho chato, nunca terá sucesso.

3. Se tudo é igualmente importante, então nada é realmente importante
Quais dessas máximas um designer deve seguir: “não se atenha apenas aos detalhes” ou “Deus está nos detalhes”? A palavra de ordem deve ser hierarquia. Tudo é importante, sim. Mas algumas coisas são mais do que outras.

4. Não pense demasiadamente num problema
Designers são obsessivos por natureza. Não tente prolongar ou complicar um problema quando você já tiver a solução. Bola para frente!

5. Comece com o que você sabe
Na língua do design isso significa “desenhe o que você sabe”. Comece pelo começo: coloque no papel, ou tela, aquilo que você sabe e compreende. Depois, trabalhe sobre o que desconhece, resolvendo as questões complexas e removendo-as uma por uma. Todo designer deveria seguir esse princípio.

6. Não esqueça seu objetivo
Estudantes e jovens designers geralmente encontram soluções brilhantes para os problemas, mas na seqüência acabam perdendo o foco e despendendo esforços em vão. Um pensamento original é um presente dos deuses, principalmente quando você se atém a seu objetivo.

7. Equilibre seu ego
Excesso de confiança é tão prejudicial quanto baixa auto-estima. Seja humilde ao lidar com um problema. Identifique e aceite sua ignorância. Não abuse de seu poder de criar coisas, nem subestime suas dificuldades, caso contrário você poderá ser surpreendido - e não será uma surpresa agradável.

8. Defenda suas idéias ou “de boas intenções o inferno está cheio”
Inovação e idéias brilhantes vão contra a natureza do contrato social. Para que elas sejam bem-sucedidas você terá que defendê-las e terá que envidar grandes esforços. Entretanto, a maioria fracassa. Prepare-se para trabalhar duro, prepare-se para falhar algumas vezes e também para ser rejeitado. O trabalho do designer tem muito em comum com as artes marciais: assim como um judoca no tatame, você nunca deve subestimar seu oponente. E se você acredita na excelência e na criatividade, seus oponentes serão inúmeros.

9. Resultado
Não importa o quão eficaz são suas habilidades diante de um computador, o quão brilhante é a sua escrita ou o quão excepcional qualquer habilidade sua é; se você não conseguir vinculá-las ao resultado, basicamente elas não existirão. Resultados. Lembre-se disso: vincule suas habilidades aos resultados.

10. O resto do mundo é importante
Se você espera realizar alguma coisa em sua vida, você vai inevitavelmente precisar de todas aquelas pessoas que você odiava no colegial e na faculdade. Um terno não faz de você um gênio. Não importa o quão espetacular é o seu design: alguém terá que construir ou manufaturar a peça para você. Alguém terá que assegurá-la. Alguém terá que comprá-la. Respeite todas essas pessoas. Afinal, você precisa delas.

Fonte: Curso Abril | Prof. Arnaldo Xavier

Teaser - TecMach

2009-03-07T22:15:00.007-03:00

E ae pessoal mais teaser para a minha coleção...hahahahahah.....apesar desse projeto dar uma trabalho foi muito bom fazer esse teaser...

N Camisetas Promocionais

2009-02-08T17:15:00.003-02:00

E ai galera mais um layout pra minha coleção...nesse layout eu tentei passar um aspecto de tecido utilizando texturas de tecidos junto com costuras...ahhhh naum posso esquecer de falar que o Camilo de uns palpites como sempre...hahahahah....

Scopus Tecnologia Ltda

2009-02-01T17:47:00.002-02:00

Ae pessoal eu tive muito orgulho de ter feito esse layout, pq a Scopus é umas das maiores empresas de Tecnologia do Brasil, esse layout foi feito com muitas mãos principalmente do Cold e da Van...porque nos desenvolvemos o wireframe juntos e depois da aprovação eu desenvolvi o layout final...vlw ae pessoal

Layout - Elus Ambiental

2009-01-25T12:57:00.002-02:00

Olha ae pessoal....esse layout eu tenho que falar hemmm....ficou muito bom.....mas tenho que deixar um credito muito especial pro Camilo.....se eu não falar dele ele me mata.....hahahahah....brincadeira hem Camilo....

ahahahah....demoro mais consegui.....

2009-01-23T00:08:00.004-02:00

Olha só pessoal no número de "Exibições de página" ...hahahahahah......mas tambem da uma olhada como o meu portfólio esta voando...hahahaa......os numeros só aumentando...

Estou ficando famoso...hahahahhaha.......

2009-01-19T22:21:00.002-02:00

Olha só pessoal estou ficando famoso....hahahhahaha.....meu portfólio já teve mais de "127" visitas de pessoas diferentes em "16" países....hahahahahha....não tenho limitis....

Primeiro layout do Ano...

2009-01-19T19:57:00.002-02:00

Olha só o primeiro layout do ano...só de pensar que vem muitos ainda nesse ano até doi a minha cabeça....hahahahah...brincadeira.....que veja cada vez mais layouts....ahahah

Sweet Bee

2009-01-19T19:51:00.002-02:00

Na minha opnião é uns dos meus melhores layouts que eu desenvolvi em 2008 não teve nenhuma alteração interna...hahahahahah.....milagre.....

Um pouco sobre mim

2009-01-18T17:15:00.001-02:00

César Ribeiro, 22 anos, natural de Campinas-SP. Trabalho atualmente na área de Designer da produtora Web - Lógica Digital, "Campinas - SP" a dois anos. Inicialmente entrei na área de manutenção em html e css, depois para recorte e por último em Designer que devo muito a minha experiência pela "antiga" equipe de criação Bruno, Thales Ribeiro e Sanchez, que hoje eles já tomaram rumos diferentes. Eu tenho experiência na seguintes ferramentas Photoshop, Corel, Flash e Dreamweaver, e nas linguagens HTML, Tableless, CSS, Java Script, XML e Action Script.