40 Logos Super Criativos

Dessa vez estou trazendo 40 logos criativos para servir de inspiração na hora da criação de novos logotipos para seus trabalhos.

Se observarem bem, alguns usaram técnicas avançadas de uso de negativo, onde o fundo acaba desenhando e transmitindo o conceito da marca, são vários tipos de aplicações diferentes,
vale a pena conferir.

Qual cores devo utilizar? Qual significado das cores?

Como criar um datashow para celular com 10 reais.

http://www.stumbleupon.com/su/65xXCA/:1iXkZACLj:l6lIZFTU/makezine.com/2013/01/31/how-to-5-mobile-phone-projector/

Cartões de visita criativos

http://www.stumbleupon.com/su/2eBvaS/:1HY3u0!$C:l6lIZFTU/designinspirationmagazine.com/graphic/50-creative-business-cards/550/

O mapa do universo da Internet

http://www.stumbleupon.com/su/17xWJJ/:5ZL0b-06:l6lIZFTU/visualoop.com/br/1134/o-grande-mapa-da-internet/

Gifs Cinematográficos

http://www.stumbleupon.com/su/19kyyb/:63c6mD0k:jq1ay-fc/all-that-is-interesting.com/cinemagraph-gifs/

Mapa de atalhos para Desenvolvedores e Designers

http://www.stumbleupon.com/su/AgWLjZ/:1G$gpK8Ly:iSOtHerk/chocoladesign.com/cheatsheets-para-designers-e-desenvolvedores/

Banco de imagens free

Olá pessoal, 

como comentei no post anterior, vou deixar alguns bancos de imagens free que são bem úteis naquelas horas que precisamos criar um layout, fazer um banner, criar um artigo ou coisas do tipo.

Ah, não esqueçam de atentar sempre as licenças de uso e aplicação de imagens.

Espero ajudá-los bastante ;)

Banco de imagens de fotos exclusivas em alta resolução. Faça download a vontade, sem nenhum custo.

O Stock Xchng é um banco de imagens com milhares de opções de escolha. Oferece imagens grátis e também pagas. Necessita de cadastro básico para fazer downloads.

O Everystockphoto é um banco de imagens com um acervo enorme e bem variado. Os temas que são mais buscados tem um destaque na lateral esquerda do site, que ajuda bastante na escolha da imagem desejada.

Este site é um achado. Dependendo do tipo de busca que você fizer pode encontrar imagens de alta qualidade. Ele está disponível em 20 línguas incluindo o Português.

Ótimo banco de imagens. Tem uma grande variedade de fotos e um banco, além de um banco de tutorial.

O Freerangestock requer cadastro, mas não limita a quantidade de fotos baixadas. Organizado, layout limpo e com sistema de buscas eficiente, ele é perfeito para quem precisa de agilidade na hora de buscar imagens.

Como fazer um layout

Nesse artigo iremos desenvolver um layout desde o wireframe (guia visual básico) até o a arte final. Com isso você poderá ter uma melhor orientação para desenvolvimento de um projeto de interface da concepção ao resultado final.

Vale ressaltar que esse não é uma regra são apenas dicas para servirem como auxílio no começo de um projeto, dicas que servem para criação de layouts para sites, para blogs ou sistemas.

Vamos lá!

Conteúdo - é a cereja do bolo.

Antes de tudo, é importante que você saiba o perfil do seu cliente, qual são fornecedores, concorrentes, qual a história, a identidade visual da empresa, referências de sites positivas, negativas, hardware onde será visto o site, e o mais importante de tudo, qual conteúdo que será apresentado no site.

Para isso existe um amigo muito importante para essa etapa do projeto, chamado Briefing, para quem não sabe o Briefing é nada mais nada menos do que um questionário, que e o seu cliente responde afim de recolher todas essas informações, para que você tenha um layout mais adequado e organize seu projeto em uma estrutura lógica.

Basicamente criaremos um layout da home, com o seguinte conteúdo:

1. Logo
2. Menu de navegação
3. Banner
4. Blocos pequenos com imagem
5. Rodapé

Como começar o layout?

Sabe o photoshop aquele editor profissional de imagens, pois bem, não iremos começar por ele não. Iremos começar nosso layout no papel, pode ser num caderno de desenho, folha sulfite, papel milimetrado, enfim, vamos começar rascunhando o wireframe nesse papel.

Por costume começo desenhando a estrutura do site, onde vai o logo, o menu principal, os banners, dados do site e por fim o rodapé. Vale lembrar que não precisa ficar bonito não, o desenho que você fizer do wireframe vai servir para você definir melhor onde vai cada elemento do site.

Basicamente uso quadrados e retângulos para definir as images, e linhas para representar os textos.

Wireframe

Como havia dito, faremos o layout passo a passo, vamos começar desenhando um layout simples para desktop da página home. Nela vamos inserir um logo no canto superior esquerdo, menu ao lado do logo, um banner grande abaixo 2 destaques com fotos e uma descrição, para finalizar o rodapé.

Acompanhe abaixo o rascunho do wireframe.

Agora passando para o photoshop:

Mockup

Agora vamos criar a interface gráfica, aplicação de elementos de cores, fontes, imagens e acabamento para apresentação do resultado final do layout.

Para melhor distribuição e melhor equilíbrio das medidas, aconselho o uso de grids, para quem nunca ouviu falar nesse termo, grids, são medidas pré definidas para distribuição dos elementos no layout, afim de deixá-lo mais organizado.

Vou deixar alguns exemplos de grids, é só acessar os links e fazer o downloads.

960 Grid System
http://960.gs/

Responsive Grid PSD
http://dribbble.com/shots/410635-Responsive-Grid-PSD/


Quanto ao uso de cores, use cores seguindo a identidade visual de seu cliente, lembrando que existem várias possibilidades para variação de cores, podendo usar cores monocromáticas, compostas, usar a triad de cores. Para melhor ajudá-los vou deixar uma ferramenta muito útil, chamada Kuller. 

Kuller é uma ferramenta gratuita da Adobe que você encontra várias paletas de cores pré-definidas, onde você pode usar na composição de seu layout, existe a possibilidade de criação de paletas a partir de cores que você define no site. Confira no link abaixo:

Kuller
https://kuler.adobe.com/

Apresentação do layout

Essa é a etapa final, onde todos processos desenvolvidos até aqui são apresentados ao cliente através de uma imagem estática, mas com acabamento final, não deixe de fazer tudo com capricho, evite erros de escrita, imagens e elementos desalinhados, confira tudo antes da apresentação.

Vale lembrar que embora o cliente ainda não tenha lhe enviado todas informações para apresentar no layout é bom prever informações mais próximas do real, evite apresentar aqueles textos em loren ipsum ou imagens não condizentes com o projeto, como pirâmides do Egito em um site sobre maquiagem. Garanto que seguindo essas dicas o cliente irá enxergar seu layout com outros olhos.

Vou apresentar esse layout usando uma empresa fictícia.

Como vocês viram, esse é um processo básico para construção de um layout que conforme for executado várias vezes se torna natural. Claro que alguns passos podem ser alterados ou nem se quer executados, nem todas telas ou projetos necessitam de criação de wireframe, ou um layout detalhado, basta apenas observar e estudar a necessidade de seu cliente e a complexidade de cada projeto.

No próximo post irei comentar sobre o uso de imagens e citar vários bancos de imagens gratuitas.

É isso aí pessoal, qualquer dúvida só falar, se gostarem, compartilhem.

Efeito fade com CSS3

Houve um tempo em que a única maneira de fazer aparecer ou desaparecer um elemento ou imagem com suavidade era usando JavaScript / jQuery. Com CSS3, você pode facilmente criar um efeito de fade com nada mais do que um pouco de CSS. 


Vamos começar com um elemento de texto (HTML):

<p class="fade">Este é o elemento que vai desaparecer quando você passar o mouse sobre ele</p>

Agora com (CSS):

 .fade {

      opacity: 1;
      transition: opacity .25s ease-in-out;
      -moz-transition: opacity .25s ease-in-out;
      -webkit-transition: opacity .25s ease-in-out;
     }

     .fade:hover {
      opacity: 0.5;
     }

Passe o mouse sobre o texto abaixo para ver a demonstração: 


Este é o meu elemento de texto que vai desaparecer quando você passa o mouse sobre ele.
Vamos fazer a mesma coisa com uma imagem:

Podemos usá-lo também para alterar uma cor de fundo. Vamos criar um menu simples, usando uma lista simples (HTML):

<ul class="nav-fade">  <li>Home</li>  <li>Quem Somos</li>   <li>Contato</li> </ul>
Novamente o (CSS):

.nav-fade li {background: #fff; padding: 5px 10px; display: inline-block; transition: background .25s ease-in-out; -moz-transition: background .25s ease-in-out; -webkit-transition: background .25s ease-in-out;color:#000;  }


.nav-fade li:hover { background: #ddd; }
Confira o resultado abaixo:

• Home
• Quem Somos
• Contato

Como você pode ver, com esse recurso CSS3 você pode usar para uma infinidade de aplicações. 

Se tiver alguma dúvida ou sugestão não deixe de comentar, se gostou compartilhe. 

PSD para HTML5 - Converta layouts para html online!

Por quantas vezes você teve que estilizar um layout do psd para html5 e css? Já pensou em transformar tudo isso com apenas alguns cliques?

Pois bem, apresento a vocês uma solução inovadora, é o PSDTOWEB! Esse sistema promete facilitar demais na implementação de projetos em html5 e css, basta fazer upload do seu layout em PSD (fonte do photoshop) para o site, selecionar os itens que são imagens e textos e só baixar o projeto com tudo separado em pastas.

Vale a pena conferir!

Se gostou não esqueça de fazer seus comentários e compartilhar com seus amigos.

Abraço, até a próxima.