Intensificação dos ‘novos’ recursos do CSS3.

Círculos

São elementos que apareceram em menus e na composição de ícones. Border-radius facilita a implementação.

Circulos constantes no Design Web

Text-Shadow

Ajuda no contraste do text com o fundo, deve ser usado com muita inteligência, caso contrário da um ar de amadorismo.

Texto com o efeito text-shadow

Javascript e mais Javascript.

Fading links

Efeito OnHover acontece lentamente

Layout Fluído

Com o destaque que o plugin Isotope teve em 2011, tudo indica que os layouts buscarão cada vez mais ter um design diferenciado e que utilize o máximo de recurso para cada resolução.

Já faz um tempo que vem a utilização deste efeito sofrendo aumento, é suave e agradável aos olhos, tem tudo para continuar.

Sites que contam histórias.

Agora com destaque para o grande publico, sites que em 2011 mais conceituais e utilizados em testes, neste ano tem tudo para alavancar.

Hotsite que contam histórias na globo.com

Exemplos

• Especial Corinthians
• Intacto 10 anos

Pra esse ano, é isso que tende a virar ‘moda’ no Design Web. Mas você o que acha que pode ser tendência? COMENTE

Como é meu primeiro post no ano, um bom 2012 a todos.

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Tendência no webdesign de 2009
• Ascensão Tipográfica – O que faz uma fonte ser lembrada?
• Como melhorar a usabilidade no seu layout

O curso, que é realizado há 8 anos pela Arteccom, inicia o aluno no mundo da criação digital e aborda os requisitos básicos de cores, usabilidade, tipografia, gestalt e tudo mais que envolve o desenvolvimento de layouts para sites.

Para quem já está no mercado, o curso também é uma ótima ferramenta para reciclar conhecimentos e fazer novos contatos profissionais, tornando a troca de experiência entre os matriculados ainda mais interessante.

O curso é composto por 4 módulos, são eles: Design, Interface, Metodologia e Consultoria. Além disso, o curso é totalmente online e tem a duração de quatro meses.

Mais informações pelo site: http://www.arteccom.com.br/cursos/index.php/o-que-e-o-curso. Se você quiser um desconto, entre em contato com eles pelo email: cursos@arteccom.com.br.

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• O lado negro do design
• Sites com 90% de desconto?
• Como conseguir emprego de designer

O que eles fizeram foi criar um script que gera uma barra de atualização para os usuarios que estiverem utilizando um navegador antigo.

Como utilizar o salve a web ?

Para utilizar esta barra basta adicionar o script abaixo no seu site.

<script type="text/javascript" src="http://sawpf.com/1.0.js"></script>

Por que utilizar ?

Esta iniciativa é par ao bem de todos, os navegadores antigos não seguem os atuais padrões W3C e não são seguros o suficiente. Além de evitar hacks no seu css especialmente para estes usuários.

É com esse tipo de iniciativa que podemos evoluir. E aí, vamos construir juntos uma web melhor?

Mais informações: Salve a Web

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Como melhorar a usabilidade no seu layout
• Mega sorteio Design Blog e Adobe!
• Código comentado salva vidas!

Sou um apaixonado pelo Twitter. Minha conta pessoal foi criada em 2007 quando apenas os mais nerds estavam usando a ferramenta. Acompanhei todas as mudanças neste tempo e até a popularização dele. O que mais me impressiona é a mudança no design.

Layout antes das atualizações de 2010

A última atualização foi em setembro 2010 e até então foi a mudança mais significativa que tiveram. Conteúdo relacionado, visualização de midia e rápido acesso ao perfil de cada pessoa foi o que mais marcou. Claro que muita gente não gostou – ninguém gosta de mudanças, mas no geral o design foi bem aceito.

Versão de setembro de 2010

E agora, mudaram de novo. E não mudaram apenas a versão web: a versão web móvel, o Twitter pra iOS e Android e o Tweetdeck (que foi comprado pelo Twitter a pouco tempo) também ganharam mudanças interessantes no visual.

O time de design do novo Twitter mostrou como estão por dentro das últimas novidades e tendências do mercado, e o novo visual demonstra isto bem.

Texturas leves

O mercado está abandonando os gradientes simples em favor da mistura de gradientes com texturas – estamos vendo isto aumentar neste final de ano e algo que com certeza vai entrar com força total ano que vem.

Na barra de cabeçalho do Twitter, a barra dá um ar de algo quase tocável, sem deixar de ser bem leve e quase imperceptível. Uma diferença enorme!

Barra lateral do outro lado

Talvez uma das mudanças mais chocantes é a nova barra lateral da versão web. Desde o surgimento, a barra sempre esteve do lado direito e esta mudança gerou certa confusão (e um pouco de repúdio por parte de alguns).

Mas esta nova barra está mais simplificada e dá acesso rápido aos links de followers, following, favoritos e etc. Agora está bem mais compacto e mais direto ao ponto.

Largura fixa

O design antigo tinha algo que muita gente não gostava – a largura enorme. Tudo bem que ela se adaptava a tela do usuário, mas muita gente tinha pego o costume de criar fundos interessantes com informações importantes.

Com a nova versão, finalmente podemos enxergar o que existe no fundo. Uma jogada interessante que instiga a criatividade de cada um.

Versão móvel

A versão móvel do Twitter também sofreu mudanças. O visual está mais interessante e segue alguns dos mesmos detalhes da versão web.

Minhas únicas duas reclamações são: 1) agora é necessário clicar num tweet e depois clicar no botão de responder, dar RT ou favoritar em vez de simplesmente arrastar pro lado como na versão anterior; 2) pular entre uma conta e outra ficou também mais difícil – antes bastava clicar no botão “Contas” no topo da janela principal para ter acesso aos seus outros perfis.

Conclusão

O design novo do Twitter está seguindo as tendências de 2012 com suas texturas, simplificações e responsive design.

Pessoalmente, eu curti. E você? Aproveite para seguir o Design Blog no Twitter!

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Sites com 90% de desconto?
• Curso online Web para Designers
• jQuery: o básico que todo designer precisa saber – parte I

Nesse artigo, vamos mostrar o básico que todo webdesigner precisa ter desse framework javascript.

Mas espera aí, o que é um framework ?

“Framework é um conjunto de classes que colaboram para realizar uma responsabilidade para um domínio de um subsistema da aplicação.” — Fayad e Schmidt

Resumindo: é um conjunto de classes que fornecem facilidades genéricas, tornando o desenvolvimento cada vez mais rápido e organizado. (write less, do more / slogan do jQuery)

Javascript

Antes de começar com jQuery vamos ver o basicão de javascript:

Concatenando e declarando variáveis

//declarando variáveis
var foo = 'olá';
var bar = 'mundo';
// para concatenar, usa-se "+"
var foobar = foo + ', ' + bar; // resultado: "olá mundo"

Operadores de comparação

var foo = false;
/* as "chaves após o if são obrigatórias
* a condição só é executada se for verdadeira
*/

if(foo) {
//foo é false, esse código não será executado
alert('foo é verdadeiro');
} else {
//esse código será executado
alert('foo não é verdadeiro');
}

Javascript inline (onde vamos escrever os códigos acima)

Javascript inline (onde vamos escrever os códigos acima)

E aí, vamos ao jQuery?

jQuery()

Dependendo da velocidade da internet do usuário (e de alguns outros fatores também) alguns elementos do layout podem demorar um pouco para carregar completamente; com isso os objetos que queremos manipular com jQuery.

Para executar o código apenas quando o Javascript estiver pronto, usamos o $(document).ready:

$(document).ready(function() {
alert('javascript está pronto !');
});

$(function(){
alert('javascript está pronto !');
});

Okay! E agora ?

Se você não conseguiu entender (ou mesmo que tenha) aqui vai uma explicação do que são e para que servem os “seletores” de jQuery.

Um pouco da Estrutura

Em jQuery, vamos sempre usar essa estrutura básica: $(objeto) …

Entenda como objeto aquilo que queremos selecionar para manipular (trocar classe, mostrar, ocultar, animar, etc). “Selecionar” um objeto com jQuery é muito similar ao que fazemos no CSS (incluindo também suas pseudo-classes):

// selecionando tags
$('p');
$('h1');

// usando pseudo-classes
$('div:first'); // selection o primer div
$('div:visible'); // div's visiveis
$('#form :input'); // inputs dentro de form

Sendo assim, quando escrevemos $(document).ready(); o objeto em questão é o documento (document) chamando o evento ready() ;  que verifica se o documento está pronto. São os eventos e efeitos que fazem a “mágica” do jQuery acontecer.

Alguns dos eventos e efeitos mais usados

click()

Como o nome sugere, esse evento é ativado quando clicar  no objeto selecionado;

toggleClass() e toggle()

Esse evento serve para trocar a classe (toggleClass) ou o estado de visibilidade (toggle) de um determinado objeto;

fadeIn() e fadeOut()

Fazem o mesmo que show() e hide() – respectivamente – porém de forma mais elegante e menos “dura”.

css()

Com esse, é possível alterar qualquer prioridade css do objeto !

animate()

Esse é um dos mais legais. Faz animações com o objeto.

attr()

Funciona como um seletor, que “pega” o valor de determinado atributo ou “define” o seu valor.

html()

Define ou “pega” o valor que está entre as tags do objeto.

No próximo post vamos sair do lero-lero, colocar em prática o que vimos e criar alguns efeitos usando botões e formulários !

Até lá ;)

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• A importância de parceiros confiáveis
• Design de mensagens de erros
• Workflow – sites e softwares

O objetivo do designer é transmitir uma mensagem: seja uma idéia, um aviso ou até um pedido de ação. Este último pode ser feito para manipular o usuário, especialmente na web atual.

Um exemplo clássico é o botão de “download” de algum arquivo. O usuário procura um arquivo específico para download, encontra o site e clica no primeiro botão de download que ele vê. Aí vem a surpresa: abre um site que pode ter vários objetivos malignos diferentes – desde forçar ao cliente inserir informações sensíveis (dados bancários, senhas, etc) a baixar um vírus achando que é o arquivo desejado. Existem até alguns sites que usam destes botões de download para enganar o usuário a visitar um outro site totalmente diferente, apenas para aumentar as suas visualizações de páginas.

Embora o Google já esteja punindo ações assim, alguns humanos não são tão inteligentes quanto as máquinas e dependem dos seus olhos para tomar ações em sites.

Como designers fazem isto?

Usando de princípios básicos do design e um pouco de psicologia. Ele sabe que o usuário vai acessar o site querendo fazer o download de algo, então ele deixa o botão verdadeiro de download mais escondido e coloca um outro botão, maior e mais chamativo, com o link para a página maligna.

Empregos brasil

No exemplo acima, o link falso está perto do texto corrido e possui uma área de respiro maior (note como os elementos estão mais afastados do botão, dando um destaque maior). Além disto, ele é maior que o botão original. E mesmo depois de clicar no botão correto, o usuário é levado a uma página onde ele pode clicar novamente no link de download falso:

Aposto que você viu primeiro o botão grande de download, certo?

No outro exemplo abaixo, o usuário lê a descrição do arquivo que ele quer baixar e clica no link errado. Por quê? Simples: lemos de cima para baixo da esquerda pra direita. O primeiro link escrito “download” que vemos, é o errado:

Além disto, estamos acostumados a dar mais atenção ao lado esquerdo da tela.

Isto é errado?

Depende da visão de cada um. Pro designer (ou pro cliente dele) que sobrevive destes clicks errados (ganhando dinheiro com publicidade, por exemplo), não há nada de errado. Pro designer que não criou, talvez seja. Pro usuário, sim. Se é imoral ou não, não cabe a mim julgar.

O mundo seria melhor sem gente querendo se aproveitar da ingenuidade dos outros? Sim, com certeza. Você acha isto certo? Comente!

Inspiração

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Curso online Web para Designers
• Sites com 90% de desconto?
• Como conseguir emprego de designer

Design interativo

Modelo de processo mais simples de pensar no design centrado no usuário. Quanto mais interação (interação = transmitir informações claras) o site tiver com o usuário final, melhor ficará. A medida que o usuário navega e busca por informações, o site responde para o navegante o seu status atual. Por exemplo: informar se encontrou ou não algo, mensagens de validações de formulário, pré-loading, sugestões de informações, dar um feedback para qualquer ação do usuário e etc.

Design paralelo

Esse modo não é tão complexo como se imagina, porém demanda mais tempo de planejamento, pois pode e deve ser feito pelo menos duas opções de wireframes. Depois, basta combinar o que todos os wireframes tem de melhor e produzir um design único para o site. Baseado nesse resultado, começar a pensar na navegação, como serão os feedbacks, interações, etc.

Conclusão

Os dois métodos compartilham uma idéia básica: não há um meio certo para criar a interface perfeita, e você pode não obter uma boa usabilidade comprando a primeira ideia. Você deve testar varias ideias, combinar… o importante é pensar no usuário final.

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Princípios e meios para melhorar a experiência do usuário
• Hierarquia visual de elementos
• Mega sorteio Design Blog e Adobe!

O braup.com foi criado para facilitar a vida dos designers e de seus clientes, que a partir de agora podem ter um gostinho de como irão ficar os layouts de seus sites no navegador antes de ter de escrever o HTML.

É muito simples. Funciona assim:

1. Você cria o layout do site no photoshop, no illustrator ou em qualquer outro programa que você utiliza.
2. Salva o layout no formato jpeg, png ou bmp.
3. Acessa o braup, clica em ‘Carregar layout’, escolhe o arquivo e pronto!

O braup exibe seu layout no navegador da maneira como ele vai ficar depois de publicado.

Além disso, o layout ganha um endereço próprio, como este: braup.com/JmL5, que você pode enviar para seu cliente e ele acessa como se fosse uma página normal.

É uma maneira profissional de apresentar layouts de sites para o cliente. Muito melhor que enviar o arquivo por email.

Outro ponto interessante é a opção de ‘layout de várias páginas’, na qual é possível carregar os layouts das diversas páginas do site, como a página inicial, a página de contato e a vitrine de produtos por exemplo, e simular uma navegação por elas. Basta ir clicando na tela para avançar para a próxima.

O braup.com é ótimo e muito útil. Tenho certeza que vocês não irão apresentar layouts de outra maneira.

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Como criar apresentações fantásticas
• Como conseguir emprego de designer
• Edted Curitiba – sorteio relâmpago de ingressos

Este eBook (um PDF que você pode baixar e ler onde estiver) é direcionado aos web designers que já possuem um conhecimento básico do HTML4 ou XHTML, mas pode ser útil para quem está começando a programar.

É um eBook simples e rápido (1400 palavras) e prometo que você vai aprender HTML5 em 15 minutos ou menos :)

Você pode fazer o download deste eBook grátis clicando aqui (clique com o botão direito e selecione “Salvar como…”). Você pode distribuir ele gratuitamente desde que mantenha os créditos originais.

Caso queira demonstrar sua apreciação pelo presente, basta twittar:

Fiz o download do livro grátis “HTML5 em 15 minutos” do @design_blog em http://desgn.me/html5

Ou compartilhe no Facebook, envie o link pra um amigo, etc.

Espero que gostem!

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Leia também:

• Fluxograma: Quando usar introduções em Flash
• Texturas que todo designer deve ter
• Como Steve Jobs moldou o design moderno

O que é uma biblioteca de recursos?

Nada mais é que um monte de recursos em uma só biblioteca. Dã.

Explicando melhor: texturas, brushes, PSDs, ícones, fontes e imagens para te inspirar. Estes são os principais recursos para designers. Eles servem para agilizar o desenvolvimento de novos jobs além de fornecer inspiração específica naqueles momentos que você mais precisa.

Como monto minha biblioteca de recursos?

Existem ferramentas que podem ser utilizadas para facilitar isto, e são das mais variadas. Eu vou mostrar aqui as que eu mais utilizo, e se você tiver uma, não deixe de comentar.

Zootool

Este aplicativo online foi feito para juntar tudo quanto é imagem inspiracional em um lugar só. O Zootool é perfeito pra isto; ele tem ferramentas para Safari, Chrome e Firefox que permite que você guarde imagens que você encontre em um só lugar.

Além disto, é possível de inserir tags e até uma descrição para facilitar a busca por aquela imagem mais tarde. Seu perfil pode ser acessado de qualquer lugar e você também pode fazer um networking com outros usuários (ou seja, ver o que eles favoritaram e deixar comentários).

Página de perfil do Zootool

É possível salvar imagens, vídeos, documentos e páginas inteiras. No meu perfil, por exemplo, coloco prints de sites que eu goste, detalhes de imagens que eu acho legal e exemplos de logos que podem me dar a inspiração que eu precise na hora certa.

Se você tiver interesse, basta criar uma conta e me “seguir” lá.

Delicious

A famosa ferramenta do Delicious serve como compartilhamento de favoritos. É bem similar ao Zootool, mas é focado em texto (não tanto em imagens).

Assim como o Zootool, ele também possui plugins para os navegadores mais comuns que permite salvar e compartilhar instantaneamente links que você acredite serem de interesse. Também é possível inserir uma descrição e tags para facilitar a busca, além de poder recomendar um link diretamente para um conhecido.

Página de perfil do Delicious

Eu uso bastante para guardar artigos interessantes, sites que possuam a opção de baixar recursos, e tutoriais que pretendo ler ou que já li e achei interessante.

Seus favoritos podem ser acessados de qualquer computador e serve como substituto ao “Bookmarks” (“Favoritos”) do seu navegador, com o bônus de sincronizar entre os navegadores – ou seja, nada mais de perder links só por que você salvou em casa mas quis acessar do escritório.

Claro que existem outras ferramentas que favoritam e sincronizam entre computadores como o Google Bookmarks (que possui o bônus dos seus links aparecerem na página de busca do Google) e o Xmarks, mas o principal diferencial é a possibilidade de poder acompanhar links favoritados de amigos através do sistema de networking do Delicious.

Se tiver interesse, crie uma conta lá e me adicione ;)

Logospire

Embora não tenha toda a parte social das outras duas ferramentas e seja apenas um site, o Logospire reúne logos que servem para te inspirar naquelas horas. Ele não possui a opção de busca por tags (o que é uma pena), mas pelo menos tem conteúdo de qualidade.

Iconfinder

O Iconfinder faz exatamente o que diz que faz: procura ícones. Um sistema de busca bem completo facilita na hora de procurar aquele ícone específico para seu projeto. Além disto, você pode limitar o tamanho dos ícones buscados e tem a opção de baixar em formato ICO ou PNG transparente.

Arquivos

Sempre que encontro um site que tenha arquivos interessantes para download (fontes, brushes, PSDs, etc), procuro sempre postar o link no Twitter do Design Blog e guardar no meu computador.

Tenho uma pasta específica para isto, onde guardo separadamente os brushes, as fontes, patterns, texturas, ícones mais usados, etc. Assim não tenho que ficar procurando na web quando eu precisar de algo específico. Procuro sempre guardar estes arquivos num pendrive para poder levar comigo onde eu for – e como são arquivos que não ocupam muito espaço, facilita bastante.

Outra dica de onde guardar os arquivos é no seu Dropbox – uma pasta virtual que sincroniza com todos os seus aparelhos (computadores, smartphones, notebooks, etc) e ainda possui uma interface web para fazer download dos arquivos. Você também pode compartilhar pastas com outras pessoas – se você tiver interesse, compartilho minha pasta com você, basta deixar seu email usado no cadastro do Dropbox abaixo ;)

Concluindo

Uma biblioteca de recursos é ideal para manter controle de tudo que você precisa no seu dia-a-dia, e recomendo a todos terem uma.

Se você tiver alguma sugestão de site ou aplicativo que facilite isto, deixe um comentário abaixo!

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Como criar apresentações fantásticas
• Dia Internacional do Design Gráfico + fontes grátis!
• Download: Pack de brushes para pintura digital