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

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!

A versão 2012 do Design Blog tem várias mudanças. Estamos passando para uma fase mais clean, com foco no conteúdo – o nosso ponto mais forte.

A página inicial do blog tem menos informações na área dos posts, focando no que realmente importa para o leitor. O título e a chamada do post recebem menos espaço e não competem com as informações que não são de importância vital (a data da postagem, o autor ou quantidade de comentários). O destaque para a categoria de cada artigo foi mantido – assim, os leitores podem facilmente encontrar o que procuram.

Nos artigos internos, um espaçamento maior entre as linhas e uma fonte com alto contraste tornam a leitura mais fácil. Outras alterações menores foram: os sub-títulos, universalização do estilo de link entre outras melhorias tipográficas.

No final de cada artigo, temos a seção melhorada de “artigos relacionados” e métodos de compartilhamento para Facebook, Twitter e Google+. Como teremos mais autores convidados, a biografia também ficou melhorada e bem destacada (quer escrever aqui? Entre em contato!).

A seção de comentários também foi melhorada – agora damos foco a comentários feitos pelo Facebook. Isto faz com que a carga no servidor seja menor, além de facilitar na hora de comentar – já que não é necessário digitar sempre seu nome, e-mail e site. E o melhor: isto dá mais segurança para quem acessa o blog, pois nenhum dado é mantido em nossos servidores.

A barra lateral não poderia ficar por fora das atualizações; agora ela possui menos ênfase (sendo um conteúdo secundário), além de uma sub-divisão vertical nova dando mais visibilidade e acesso rápido ao conteúdo lá exposto.

Outras mudanças

Nossa newsletter – o Exército do Design – está sendo migrado para o sistema do Feedburner. Esta decisão foi tomada para que todos recebam os artigos com uma frequencia maior já que o sistema é automático e eu estava relaxando demais no envio das newsletters. Quem estiver cadastrado no Exército do Design, por favor cadastre-se novamente na caixa “Receba via e-mail” ao lado para continuar recebendo as atualizações e concorrendo a prêmios exclusivos.

Outra novidade é o Design Blog Premium – um serviço na fase final de testes que irá recompensar os leitores fiéis do blog, oferecer produtos exclusivos e muita coisa grátis. Pra ficar avisado sobre quando este sistema sair, basta assinar nosso feed ou cadastrar seu e-mail ao lado.

Também temos outras novidades e parcerias para sorteios de vários prêmios, tudo relacionado a design. Isto você verá com o passar do tempo ;)

Caso tenha curtido o novo design, aproveite para assinar o feed, seguir o Design Blog no Twitter ou usar os botões abaixo para tuitar, facebookear ou dar +1. Você também pode deixar 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

• Tendências no Design Web em 2012
• Como melhorar a usabilidade no seu layout
• Regulamentar a profissão de designer – sim ou não?

Pra quem ainda não sabe, a profissão de designer não é regulamentada. Ou seja: qualquer um pode se chamar de “designer” (convenhamos, acontece muito!), mesmo sem ter feito sequer um curso de informática básica. Não existe um registro profissional de designer. Com isto, o governo (poder público municipal, estadual e federal) não pode contratar serviços de um profissional de design através de licitações ou concorrência pública. Além disto, não temos direito a garantias de trabalho por não contribuir com uma sociedade reguladora.

Um dos maiores problemas que temos atualmente é de concorrer cara-a-cara com os chamados “micreiros” ou “sobrinhos“: pseudo-profissionais que não possuem conhecimento algum sobre design e focam-se inteiramente no uso de softwares, criando trabalhos duvidáveis a um preço muito abaixo do que um designer estudado cobraria. Esta lei acabaria com isto.

Resumindo: os designers que possuem diploma de graduação plena e/ou tecnológica, em cursos reconhecidos pelo MEC, os que comprovarem o exercício da profissão por pelo menos cinco anos até a publicação da Lei, ou os que possuem diplomas devidamente validados e reconhecidos no país, ainda que adquiridos em instituições estrangeiras estarão protegidos.

Diploma pra que te quero!

Isto é bom? Não necessariamente. Pessoalmente, conheço ótimos profissionais que nunca fizeram nenhum curso de design, mas isto não quer dizer que não sejam estudados. São pessoas que buscaram o conhecimento através de livros, análises, sites na internet, etc. Eles são profissionais bons no que fazem, criam ótimos trabalhos e muitas vezes são melhores que alguns designers que fizeram 4 anos de faculdade mais pós-graduação. Isto afetaria eles.

Durante as últimas semanas, escutei argumentos convincentes dos dois lados da moeda. Ambos tem razão. Afinal de contas, quem não quer estar protegido?

Mas vamos analisar exatamente quais os argumentos dos dois lados:

A favor da regulamentação

• Concorrência desleal com profissionais despreparados e sem conhecimento iria diminuir.
• Criação de benefícios trabalhistas para os profissionais.
• O designer torna-se responsável pelo que faz (interessa ao cliente), fazendo com que um trabalho melhor seja feito.
• O designer pode participar de licitações do poder público.
• Com fiscalização proveniente da regulamentação, a má conduta de maus profissionais pode ser punida.
• Melhores benefícios aos designers por causa da exclusão dos profissionais despreparados (o que inclui uma melhora no salário).
• A lei irá melhorar o nível de design ensinado no país.
• Nova ética será instaurada na profissão.

Contra a regulamentação

• Muitos designers bons que nunca pisaram na faculdade mas aprenderam sozinhos, irão perder os empregos.
• Novos encargos serão criados, fazendo com que o custo do design fique maior.
• O governo será o único a beneficiar com os novos encargos.
• Micro e pequenas empresas não poderão pagar pelos serviços mais caros.
• Uma concorrência menor faz com que a qualidade do produto caia e seus preços subam.
• Faculdades podem criar cursos rasos e de baixa qualidade afim de alimentar o mercado.
• Sindicatos irão controlar os pisos salariais dos designers, geralmente trazendo vantagem aos empregadores (ou seja, diminuindo o salário dos designers).
• Menos profissionais no mercado = menos concorrência = queda na qualidade.

Alguns argumentos se contrariam, sem dúvida. Regulamentar melhoraria o nível de ensino? Faria o salário subir? São perguntas aos quais não há como dar uma resposta concreta (números sólidos que comprovem de uma vez qual a melhor escolha pra profissão) e estamos nadando em um mar de incertezas e achismos.

Muitos estão argumentando que em outros países onde é regulamentado, o design não sofre. Outros dizem que sofre. Mas estamos no Brasil; a cultura aqui (como em qualquer outro país) é única. Não dá pra comparar, pois a mentalidade aqui é outra.

Então, regulamentar ou não?

Não existe uma resposta certa. Mesmo quem cursou faculdade pode até acreditar que regulamentar machucaria a profissão (e vice-versa). Não há números concretos que possam nos dar uma luz em relação a isto; o único jeito seria regulamentar em quesito provatório e ver o que acontece. É claro que é uma solução inviável e fantasiosa, mas parece ser a única.

O que você acha? Devemos regulamentar a profissão? Sim? Não? Por quê?

Caso você queira saber mais, sugiro a leitura do site “Reserva de Mercado Não” (contra), este artigo do Choco La Design (a favor) e este outro artigo do andafter.org (que mostra os dois lados).

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

• Mega sorteio Design Blog e Adobe!
• Novo Forum de Design
• Como conseguir emprego de designer

Designer que é designer sabe da importância dos produtos Adobe no nosso dia-a-dia. Photoshop, Illustrator, Fireworks, Bridge, Dreamweaver… quem não usa pelo menos um destes produtos?

Agora é sua chance de ter o pack completo do CS5.5 Web Premium original, fornecido pela Adobe! Só pra você ter idéia dos softwares que estão inclusos:

• Dreamweaver® CS5.5
• Flash® Catalyst® CS5.5
• Flash Professional CS5.5
• Flash Builder® 4.5 Premium Edition
• Photoshop® CS5 Extended
• Illustrator® CS5
• Acrobat® X Pro
• Fireworks® CS5
• Contribute® CS5
• Bridge CS5
• Device Central CS5.5
• Media Encoder CS5.5

Tudo o que você precisa para fazer sites, impressos ou o que quiser. E a Adobe, ao contrário de outras empresas, não é uma daquelas que estão paradas no tempo. Acha que o Flash tá desaparecendo? Pense de novo. Bam! A Adobe fornece soluções em HTML 5 e Air.

Não sou de ficar puxando-saco de ninguém, mas vai me dizer que você nunca sonhou em ter esse monte de software de graça? Mas vamos ao que interessa, e se você quiser saber mais sobre os produtos Creative Suite, acesse o Facebook deles ou veja o Twitter do @CreativeSuiteBR.

Ah, além do Adobe CS5.5 Web Premium*, estamos também sorteando a 2 kits com:

• 1 caneca
• 1 pen drive de 2 Giga
• 1 limpador de tela
• 1 bolinha anti estresse
• 1 boné preto
• 1 luminária para notebook
• 1 caneta
• 1 caderno de anotações
• 1 mochila

Tudo personalizado pela Adobe!

Como que faço para concorrer a essas maravilhas?

Pra concorrer, é mega fácil. Basta:

1. Curtir o Design Blog no Facebook
2. Curtir o Creative Suite no Facebook
3. Seguir o Design Blog no Twitter
4. Seguir o Creative Suite no Twitter

E twittar o seguinte link:

Eu quero a #Adobe #CS5.5 Web Premium que o @design_blog está sorteando http://kingo.to/IMF @CreativeSuiteBR

Lembre-se que precisa ser twittado exatamente como consta acima e você precisa ter curtido as duas páginas no Facebook e seguir as duas contas de Twitter! Vale lembrar que múltiplas tuítadas com o mesmo links serão contabilizados como uma só.

Achou muito complicado? Ué, quer coisas de graça ou não? :D

A promoção começa hoje, dia 13 de julho e será encerrada as 23:59 do dia 27 de julho. Os vencedores serão anunciados pelo nosso Twitter no dia 28.

Aproveite para conferir aqui o regulamento da promoção.

Participe e boa sorte!

* – O Voucher dá direito a um produto Adobe CS5.5 Web Premium. A Adobe, por meio da sua agência de comunicação no Brasil – IMS Brasil –, irá entrar em contato com o vencedor do primeiro prêmio do sorteio realizado pelo Design Blog com a finalidade e colher informações base para o licenciamento do aplicativo. Será necessário fornecer os seguintes dados: Nome, Endereço, Telefone, e-mail, RG e CPF bem como a plataforma utilizada – MAC OSX ou Windows. Os dados são para efeito da emissão da nota fiscal do produto. O produto será entregue assim que estiver disponível para remessa, no endereço informado à agência.

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

• Regulamentar a profissão de designer – sim ou não?
• Novo Forum de Design
• Como conseguir emprego de designer

O comentário (na programação web) é algo desnecessário ao funcionamento do site. Ele serve apenas para indicar algo a quem está lendo o código fonte ou trabalhando no back-end (por exemplo, em scripts de PHP ou JavaScript). O usuário final não vai ver esses comentários no site, então a utilidade deles é exclusivamente ao programador / web designer.

Um código comentado salva muito tempo quando você for editar algo num site e precisa saber o que você está editando. Por exemplo, um site pode conter várias DIVs dentro de outras DIVs. E pra saber onde que fecha um e abre outro? Código indentado pode ajudar e alguns softwares até indicam qual é a DIV sendo fechada – mas e quando você está usando o bloco de notas só para fazer algumas alterações mínimas?

Outro exemplo seria o uso de comentários nos arquivos CSS; fica mais fácil de encontrar as IDs e classes usadas em determinadas áreas de um site (cabeçalho, barra lateral, menu, etc). Lembre-se que “organização = produtividade”.

Código comentado não facilita apenas a sua vida, mas a de um possível futuro programador ou web designer que precise alterar algo no site.

Se você não usa código comentado, comece a usar! Você talvez não note a diferença na sua produtividade de início, mas veja daqui a um mês quando tiver que editar aquele código novamente.

Você usa códigos comentados nos seus sites? Se não, por quê? Comente!

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 internet do futuro tem lugar para web designers?
• Mega sorteio Design Blog e Adobe!
• Design Blog Podcast – Episódio 04

Se você não sabe o que é SEO, quer saber mais sobre SEO, quer viver de SEO, escute nosso podcast sobre SEO ;)

Alguns links relacionados a este episódio:

• MestreSEO
• SEOmoz
• O que é Black Hat SEO?
• Site do Nagüeva
• Twitter do Nagüeva

Nova capa do podcast

Pra quem não estava sabendo, pedimos aos designers que acompanham o Design Blog para que enviassem artes para a capa do podcast. E o ganhador foi: Thallez Melo! Eis a capa criada por ele:

Tivemos outros que chegaram perto de serem escolhidos; Bruno Lima, Daniella Etinger (que forneceu uma defesa bacana) e Eduardo Oliveira respectivamente.

A todos os outros que participaram, meus sinceros agradecimentos! Teve muita capa boa, mas não tínhamos como escolher todos.

Download do podcast

Este episódio tem 38:52 de duração, pesa aproximadamente 28mb (formato MP3) e está em qualidade de 96kbps. Esse é o link direto para o download (caso você esteja lendo o feed), e caso você queira escutar direto no site acesse o post aqui.

Aproveite para assinar o feed exclusivo do podcast aqui ou pegar o podcast direto no iTunes por este link. Ou se preferir, assine o feed do site inteiro neste link.

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

• Regulamentar a profissão de designer – sim ou não?
• Mega sorteio Design Blog e Adobe!
• Código comentado salva vidas!

Fonte: todas as informações contidas nesse artig foram baseadas nos estudos da fundação Nielsen Normam Group.

Feedback: Interfaces devem fornecer feedback sobre o seu estado atual. Por exemplo, se algo está processando e em qual nível do processo está, quantificar o tempo para a execução ou finalização de algo.

Implementação: Interfaces não devem ser organizadas em torno da implementação da tecnologia ou exigir que o usuário tenha acesso a informações adicionais que não são encontradas na própria interface.

Como voltar/desfazer: As ações voltar/desfazer da interface devem estar claras, explicando como voltar para o início ou desfazer a ação. O usuário deve ter acesso aos meios necessários para ter o controle da ação.

Recuperação/entendimento de informações: Uma interface pró-ativa deve ajudar os usuários a recuperar/informar sobre erros de tecnologia, por exemplo, instalar o Shockwave.

Interação: Os usuários devem ser capazes de descobrir funcionalidades e informações explorando a interface naturalmente, ou seja não deve ser forçados a recordar informações da memória.

Eficiência: Interfaces devem ser o mais eficiente possível, minimizando a complexidade das ações e do tempo total para completar uma tarefa. O que puder, deve sim ser simplicado, afim de melhorar a experiência final do usuário.

Além destes itens, existem outros de metodos para se identificar ou previnir erros para proporcionar meios coerentes para uma experiência perfeita. Claro, cada UX Designer acaba por criar metodologias próprias, mas novas dicas são sempres bem vindas ;D

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!

Em vez de você ficar procurando por imagens que tenham a ver com o site do seu cliente, o Flickholdr já te retorna uma imagem no tamanho certo e com um tema relacionado ao site que você está criando. A imagem acima, por exemplo, foi gerada usando ele.

É só inserir uma tag de imagem (“<img>”) e escolher a tag (ou palavra-chave) que melhor define seu site. O Flickholdr vai buscar no banco de dados do Flickr uma imagem com sua tag e mostrar no seu site.

Basta usar a seguinte fórmula:

http://flickholdr.com/largura/altura/tag

Na imagem acima, por exemplo, digitei o seguinte: http://flickholdr.com/620/150/webdesign (620 pixels de largura por 150 pixels de altura, com a tag “webdesign”). Se quiser adicionar mais tags, basta adicionar uma vírgula e escrever a outra tag (sem espaço entre as tags!). Caso queira uma imagem em preto e branco, basta colocar /bw no final do endereço.

Ah, e caso você seja iniciante e não saiba como colocar isso numa tag de imagem, basta digitar <img src=”http://flickholdr.com/620/150/webdesign” /> (usando o meu exemplo).

Lembre-se que não precisa colocar nenhuma extensão no final. E além disto, o site não requer registro – basta usar o endereço e ser feliz!

Ah, vale informar que não é uma boa idéia usar esse serviço em sites abertos – nunca se sabe quanto tempo um serviço assim vai durar, então use ele apenas como maneira de popular temporariamente o site do seu cliente!

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

• Regulamentar a profissão de designer – sim ou não?
• Mega sorteio Design Blog e Adobe!
• Código comentado salva vidas!

Veja a lista completa das tirinhas no Webdesigner Depot em inglês.

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

• Regulamentar a profissão de designer – sim ou não?
• Mega sorteio Design Blog e Adobe!
• Design Blog Podcast – Episódio 04