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.

Como criar um blog facilmente

Acredito que você por diversas vezes já pensou em criar seu blog pessoal, mas não sabe por onde começar. Aqui vou apresentar algumas tecnologias e formas para você criar um blog facilmente.

Como criar um blog no wordpress

Acesse pt-br.wordpress.com e clique em “Comece por Aqui“. Se você iniciar por www.wordpress.com o tutorial é o mesmo, mas os passos para a criação serão em inglês.

O primeiro campo é o mais importante. Ele será o endereço de seu blog. Escolha o endereço que desejar e o wordpress informará sobre a disponibilidade ou não do mesmo.

Preencha os outros campos com a senha desejada, seu email, idioma (escolha pt-br – Português Brasileiro ou o idioma de sua preferência). Após terminar, siga para o final da tela e clique em “Create Blog” na opção gratuita.

Um e-mail será enviado para o endereço que cadastrou no passo anterior para confirmação. Para que sua conta seja ativada, acesse esse e-mail, clique no link indicado e pronto!
Com a conta ativada, volte para a página principal do wordpress.com, clique em “Login” e entre com os dados que preencheu no formulário de criação do blog.

Dentro da administração poderá ver todos os blogs que possui (por enquanto apenas um). Clique sobre “Painel” logo abaixo do nome de seu blog para administra-lo.

A administração é bastante simplificada. Na lateral esquerda está a barra de menu onde é possível personalizar o tema, escolher plugins e o principal, criar novos Posts! Vamos fazer isso agora.
Clique em “Posts” e depois em “Adicionar Novo Post”.

Coloque o título do post no campo indicado e abaixo pode começar a escrever. Para publicar, clique em “Publicar” na lateral direita. Simples não?

O wordpress além de um blog, é um gestor de conteúdo completo e permite muita customização (um pouco menos nessa versão online já que ela bloqueia a instalação de plugins).
Existem milhares de temas gratuitos disponíveis, muitos deles customizáveis que permitem deixar seu blog único na internet. Para alterar o tema clique em “Aparência” na lateral esquerda. Basta escolher o tema e clicar em “Ativar” no tema desejado (note que existem temas pagos que podem ser ativados apenas mediante compra).

Se você chegou até aqui, já pode se considerar proprietário de um blog wordpress.
Abaixo vou apresentar outras formas.

Como criar um blog no Blogspot

Primeiro, entre com a sua Conta Google no site do Blogspot (www.blogspot.com) . Caso você ainda não tenha uma Conta Google, entre no site www.google.com.br e clique na parte superior direita da tela em “Efetuar Login”, em seguida clique em “Crie uma conta agora” e preencha os dados. Feito isso, vá ao site do Blogspot e entre com seu login e senha.

Vale lembrar que muitos sites chamam o Blogspot de “Novo Blogger” ou até mesmo “Blogger”. Não se deve confundir os endereços, afinal o “Blogspot” é de propriedade da Google e é inteiramente gratuito. O Blogger é de propriedade de outra empresa e é preciso ser assinante para criar uma conta.
Agora que você já criou a sua Conta Google e já se registrou no Blogspot, é hora de criar o seu blog.  O primeiro passo é clicar em “Criar um blog”. Depois você deve dar nome ao blog e criar um endereço.

A URL do seu blog dependerá do tipo de blog que você deseja ter. O Blogspot permite que você use um domínio que já tenha comprado para publicar seu blog. Neste caso, seu endereço fica de acordo com o seu domínio, por exemplo, www.nomedoseublog.com. Contudo, se você não possuir um domínio, o Blogspot vai fornecer um, o resultado é parecido com este: http://nomedoseublog.blogspot.com.

Depois de ter preenchido todos estes dados corretamente, é hora de escolher um modelo de layout para o seu blog. Não se preocupe, neste primeiro momento você pode escolher qualquer um – existem muitos outros modelos para você deixar o seu blog com a sua cara. Quando você já tiver escolhido qual será o primeiro layout, clique em “Continuar” e voilà! Seu blog está pronto!

Com o blog já criado, é hora de postar seu primeiro texto ou imagem. Clique em “Começar a usar o blog” para dar o pontapé inicial no seu transmissor de idéias. Você será redirecionado automaticamente para a página de novas postagens. Digite o que quiser nos campos de postagem, mas lembre-se de não violar nenhuma das regras de conduta do Blogspot e da Google – caso contrário, seu blog será banido. Quando terminar a edição do seu texto, basta clicar em “Publicar Postagem” para que o conteúdo seja enviado para a página principal do seu blog.

Preste atenção nas três abas na parte superior da tela. Por elas você navega nas configurações do seu blog. Na aba “Configurações” você altera as principais opções do seu blog como importação e exportação de conteúdo ou até mesmo excluir o seu blog. As ferramentas de importação e exportação são importantes para fazer backups do seu conteúdo. Quando você exporta o conteúdo do seu blog, além de garantir que terá uma cópia de tudo para o futuro, ainda pode utilizar este mesmo conteúdo quando for trocar o endereço para um outro sistema, como o WordPress.

Basta exportar e na interface do outro blog, clicar em importar e carregar o arquivo XML.  Ainda falando sobre as configurações do seu blog, você pode moderar e trocar permissões referentes aos comentários.  Nesta tela, você ainda pode controlar suas opções de feed RSS. Caso você queira, pode inserir aqui o endereço do seu burner de feeds. Um dos mais populares é o FeedBurner (www.feedburner.com). Estas feeds servem para que os usuários possam receber suas atualizações dos leitores de feeds deles. São vários leitores; o Google Reader é um dos mais utilizados e fáceis de mexer na hora de adicionar feeds. Estes leitores permitem que os seus visitantes leiam vários blogs simultaneamente.

Na aba “Layout” é possível alterar a ordem dos seus gadgets, ou seja, dos complementos da barra lateral do seu blog. Um exemplo bastante simples do que são estes gadgets é a área de perfil, onde você conta um pouco da sua história ou a sua relação com o blog; o arquivo do blog que vai listar os seus posts de acordo com a data em que foram publicados e várias outras ferramentas que podem ser fornecidas pelo próprio Blogspot ou por sites externos – basta copiar o código e colar em uma nova janela de HTML dos seus gadgets.

Com esta aba ativa, você vê quatro funções diferentes: “Elementos da página”, “Fontes e cores”, “Editar HTML” e “Escolher novo modelo”. Se você abrir a opção “Fontes e cores” vai se deparar com uma janela de personalização do tema atual do seu blog. Nela, é possível mudar as cores do texto, plano de fundo, links e muito mais. Em “Editar HTML”, é preciso dominar pelo menos o básico desta linguagem para operar algumas mudanças no seu layout.

“Escolher novo modelo” já é auto-explicativo – nesta janela, há uma lista com diversos temas para que você escolha qual deles combina mais com o estilo do seu blog. Se você não gostar de nenhum dos temas que o Blogspot oferece, uma pesquisa no Google bastará para encontrar o tema perfeito. Lembre-se de salvar todas as alterações que fizer para que elas tenham efeito no seu blog.

Segue um vídeo que poderá ajudá-lo também.:

Youtube - Como criar um Blog 

É isso aí pessoal, espero que tenham gostado do material, criem materiais de qualidade na web, e sejam ótimos blogueiros.

Set de ícones completo grátis

Como designer, você tem a necessidade de ser versátil e rápido quando se trata de projetar para os clientes. Às vezes você pode não ter o tempo para elaborar algo totalmente sozinho, ou pode achar que você está perdendo um certo elemento. Tendo conjuntos de ícones pode ajudá-lo a criar anúncios, banners, cabeçalhos de blog, imagens de campanhas e de design web em um piscar de olhos. Use os ícones para destacar informações importantes, como parte de imagens de fundo.

Você deve começar usando um com conjuntos de ícones a partir de um único pacote e tentar chegar em várias maneiras que você pode usá-los. A partir daí, tente usar conjuntos de ícones de diferentes estilos e descobrir maneiras de incorporá-los em projetos diferentes.

Vou deixar um set de ícones completo que irá ajudá-lo bastante em seus projetos.

Icons8 (+ de 1400 ícones grátis)

Clique aqui para baixar o set de ícones completo.

É isso aí, e não esqueçam de curtir o post galera.

Até a próxima!

Teste de layout responsivo

Você está criando algum site responsivo e precisa testar em vários dispositivos? Já encontrou alguma ferramenta que facilita esse tipo de teste com maior rapidez?

Pois bem, seus problemas acabaram! Apresento a vocês o Screenqueri. Com o Screenqueri você pode arrastar linhas guia, ver seu site em vários dispositivos como smartphones, tablets e tudo em uma interface muito simples e prática e o melhor tudo via web.

É só fazer um cadastro pequeno e rápido e pronto, aí é só começar seus testes.

Acesse: screenqueri.es