Olá para todos, hoje eu vou falar de @font-face não sei se todos conhecem, mas com essa técnica vocês conseguem colocar font’s não padrões no seu site, chega de falatório e vamos começar a por a mão na massa.

Vou escolher uma font muito usada para layouts a Futura Md Bt abaixo vou fazer um html bem simples.

<h1>Testando @Font-Face</h1>

Depois de criar o código vou gerar as font’s “.eot – .svg – .ttf – .woff vocês tem que usar todos esses tipos para que funcione em todos os browsers.” , eu uso o site http://www.fontsquirrel.com/fontface/generator “atenção este site não funciona o upload da font se for linux somente em windows” .

Para fazer o uploader da font é muito simples, primeiro aperte o botão “add fonts” deixe carregar, depois selecione a opção “optimal” e por final aceite os termos de uso “Agreement” e aperte o botão “Download Your Kit”.

Depois de terminar o download é só descompactar o arquivo gerado e copiar as font’s para dentro do seu projeto, se você quiser crie uma pasta chamada font para que fique mais organizado.

Agora abra a pasta que fizemos download da font e edite o arquivo “stylesheet.css” porque dentro dele já tem o css pronto da nossa font, copie e cole no arquivo no exemplo que estamos fazendo, a única alteração que temos que fazer é colocar o caminho de onde esta nossa font veja o exemplo abaixo.

@font-face {
	font-family: 'FuturaMdBTMedium';
	src: url('font/futura_md_bt_medium-webfont.eot');
	src: url('font/futura_md_bt_medium-webfont.eot?iefix') format('eot'),
	      url('font/futura_md_bt_medium-webfont.woff') format('woff'),
	      url('font/futura_md_bt_medium-webfont.ttf') format('truetype'),
	      url('font/futura_md_bt_medium-webfont.svg#webfontZaJl2R9s') format('svg');
	font-weight: normal;
	font-style: normal;
}

Depois de criar o @font-face no css vamos criar o um estilo para o h1.

h1{
 	font-family: 'FuturaMdBTMedium';
   }

Pronto agora estamos usando uma font não padrão em nosso projeto, vocês viram como é muito simples fazer isto, bom espero que ajude vocês qualquer dúvida ou sugestão é só comentar até o proxímo post.

Exemplo: Visualizar

Arquivos: Download

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 .

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.

http://csscreme.com/

http://cssmania.com/

http://www.cssshowcase.co.uk/

http://www.cssstyle.me/

http://cssorgy.com/

http://www.cssloggia.com/

http://www.designersource.net/

http://cssfreshblend.com/

http://csstea.com/

http://cssproject.cz/

http://www.ucss.pl/

http://www.css-design.fr/

http://www.csselite.com/

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.

Em alguns navegadores como Internet Explorer até a versão 6, só exibem os favicons quando um site é adicionado aos favoritos. Neste caso, apenas no menu correspondente aos favoritos pode-se encontrar a imagem. Em outros navegadores como Firefox, Opera e Internet Explorer 7(+), os favicons podem ser encontrados também nas abas e na barra de endereço.

Os favicons também tem teor de acessibilidade pois ajudam um usuário comum a identificar uma página quando ela está exibida em uma lista ou em uma barra de abas. Visando isto, muitos favicons são imagens simplificadas do logotipo da marca que representam.

Na ausência de um favicon, os navegadores exibem seu próprio ícone ou um ícone padrão como uma folha em branco.

Como transformar meu arquivo em .ico?

Nesses links abaixo são alguns sites que transformam suas imagens em extensão .ico para vocês.

http://www.favicon.cc/

http://www.html-kit.com/favicon/

http://tools.dynamicdrive.com/favicon/

http://www.favicon.co.uk/

E agora como colocar o favicon no meu Site ou Blog ?

Agora que já possui o favicon é necessário fazer o upload da imagem para a pasta principal  “pasta raiz” do seu site ou blog e colocar o código dentro da TAG “head” abaixo eu vou dar um exemplo como fazer.

<head>

<link rel=”shortcut icon” href=”http://www.meusite.com.com/favicon.ico”/>

</head>

Espero que vocês tenham gostado do post… até mais…

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.

Com Serifa:

Palatino Linotype

Courier New

Times New Roman

Sylfaen

Georgia

Sem Serifa:

Verdana

Arial

Tahoma

Trebuchet MS

Microsoft Sans Serif

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

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

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/

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

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