Para quem não sabe o que é o iStock Photos, é um site onde você pesquisa e compra fotos com royalty-free, ou seja, com licença para usos comerciais. Você pode até nunca ter comprado ou entrado no site da iStock, mas dúvido que nunca viu uma foto dessa (conhecida pela marca d’agua) por aí.

O site http://www.istockphoto.com/adobe explica como instalar o plugin. É bastante simples, único ponto ruim é que é só para as versões CS5 para cima. As vantagens são:

• Agilidade na hora de procurar fotos sem precisar sair do photoshop
• Plugin funciona também para InDesign (eca) e Illustrator
• O plugin é gratuito
• Possibilidade de adicionar fotos ao lightbox (galeria pessoal no iStock), selecionar tamanho da imagem e até mesmo comprá-la com seus créditos do site. Essas só são possíveis se você possuir cadastro no iStock Photos, o que também é gratuito.

É mais uma dica super rápida que agregará diretamente no seu projeto. Gostaria mais se esse plugin fosse do Stock.XCHNG que possui muitas fotos gratuitas, mas tá valendo né? Agora o seu photoshop ficará ainda mais poderoso, até mesmo para você parar de ficar criando projetos comerciais com imagens pirateadas né?

Para quem ainda não viu os slides:

O que é uma Landing Page?

Landing Page, como a sua tradução não-literal já diz, é a página de destino, ou seja, a página que o usuário chega através de algum lugar. Geralmente, o mercado trabalha Landing Page para o usuário que clica em um anúncio, seja texto ou um display(banner), existe ainda uma nova frente em que o usuário chega através das redes sociais. A Landing Page, diferente de um website, tem apenas um único objetivo: Levar o usuário para a conversão(explicado no primeiro parágrafo).

Como funciona uma Landing Page?

O processo de conversão geralmente acontece como um funil comercial tradicional. Não entrarei muito a fundo no que acontece antes da Landing Page para não fugir do foco, mas o processo é simples:

O modelo é autoexplicativo, mas ainda sim vamos explicá-lo. Um usuário comum está navegando na internet quando é impactado por um banner interessante, por impulso(função do banner) a pessoa clica no banner, deixando de ser um mero usuário de internet, passando a ser um visitante. O visitante ao clicar no banner cai na Landing Page, onde é impactado por diversas ações focadas em um único objetivo, o clique no botão.

Quando o visitante clicar no botão, ele deixou claro para a empresa que ele está totalmente interessado na compra do produto, ou se tornar um assinante, etc. Isso, o leva para um próximo passo – Interessado. O interessado só se torna um efetivo cliente quando ele chega na página de sucesso da compra ou cadastro. Simples né?

Porém, transformar um usuário de internet (pessoa comum) em um interessado é a parte mais difícil, muitas vezes por uma Landing Page confusa ou ineficiente, as vezes até mesmo muitos passos de cadastro ou de compra podem atrapalhar a conversão de uma Landing Page. Para ajudar um pouco na hora de desenvolver suas Landing Pages, seguem 12 dicas para o Design Centrado na Conversão.

1 – Seu produto não merece 1 Landing Page, ele merece várias

Existem diversas utilidades na criação de Landing Pages, uma delas é a facilidade de pequenas variações, seja de cores, diagramação ou até mesmo de abordagem. Ao invés de tratar a Landing Page como a página do seu produto, dê a ela uma estratégia mais ousada, focando-a em seu “traffic source”, ou seja, você pode criar uma landing page especifica para quem vem do twitter, uma para quem vem dos blogs, outra para facebook, pode ainda criar variações para segmentações de seus anúncios, como uma para o público feminino, uma para o masculino. Sem dúvida essas orientações para o público alvo vai lhe dar muito mais chances de conversão do que uma página genérica com um botão “comprar”.

2 – Sua palheta de cores deve atender a identidade do produto

O visitante pode até não ser designer, mas sem perceber, ele ficará desconfiado ao entrar em uma Landing Page preta para vender serviços médicos, ou uma branca/verde/azul para uma pizzaria. Aplicação de cores é importantíssimo para usabilidade assim como é para a conversão. Cuidado com templates prontos.

3 – Seja claro, objetivo e SEXY!

O que você quer comprar agora? Você tem 5 segundos, CINCO SEGUNDOS para convencer seu usuário a ficar na página e se interessar. Não tente explicar como o produto funciona em seus devidos detalhes. A Função da Landing Page não é detalhar o produto e sim vendê-lo. Você já viu alguém abrindo uma caixa de remédio para dor de cabeça no meio da farmácia para ler a bula antes de decidir a compra? Então, não faça isso!

Crie um título objetivo e interessante. Cuidado com o humor que só você entende! Seja claro para o público-alvo, como a Marisa para as meninas, a Netshoes para os esportistas, a Apple para os geeks, a Harley-Davidson para os homens brutos, a FARM para mulheres descoladas, acho que já me entenderam

4 – Use fotos, use fotos, USE FOTOS!

Não seja pão duro, compre uma foto, contrate um fotógrafo ou tire você mesmo a foto do que você pretende vender, até mesmo se for apenas uma pessoa sorrindo comendo uma salada. Está provado que utilizar fotos aumenta consideravelmente as chances de conversão, inclusive um estudo de Paras Chopra para o ThinkVitamin, apresenta dois cases para comprovar que fotos reais são mais eficientes até mesmo que ilustração, em todos os testes realizados.

5 – Não use navegação, não use distração

Lembre-se que você tem uma única missão – vender seu produto. Navegação foi feita para websites e não para Landing Pages. Leve o seu visitante para percorrer o mais rápido possível o caminho entre TÍTULO > TEXTO > OFERTA > CALL TO ACTION (botão). Depois pense em elementos que ajudam a decidir pela compra, uma navegação não faz parte desses elementos.

6 – Dê atenção ao que importa

Saiba trabalhar com uma das 4 teorias mais importantes no Design – O Contraste. Estude muito Gestalt e fará uma excelente Landing Page. Sabendo utilizar os espaços vazios para dar mais visibilidade ao que realmente importa. O Call to Action (botão) tem que ser a coisa mais chamativa do seu layout, o que não quer dizer ofensivo, agressivo ou fora da palheta de cores. O tamanho tem que ser o suficiente para o usuário enxergá-lo em frações de segundo e não ter dúvida em nenhum momento que aquilo é um botão.

Uma das táticas mais usadas para Landing Pages é uma seta apontando para o botão, pois a seta pressiona de forma branda o usuário a tomar uma decisão. Tome cuidado para não fazer uma seta vermelha agressiva piscando como uma entrada de Drive-in.

7 – Utilize Vídeo, se possível

Se você tem um vídeo sobre o produto ou apresentação do serviço, não hesite em utilizá-lo. Está comprovado também em estudos de conversão que a utilização de vídeo na Landing Page aumenta a confiança do usuário e consequentemente aumenta o CR (Conversion Rate, ou Taxa de conversão).

8 – Utilize depoimentos e ou avaliações

Uma grande parcela de visitantes mais desconfiados só tomam a decisão quando lêem reviews de outros consumidores, ou especialistas da área (veículos, blogueiros e outros formadores de opinião) dão seu testemunho sobre o produto ou serviço.

9 – Pense na dobra

Existem diversos estudos de Design que derrubam o mito que o conteúdo mais importante de um website tem que estar acima da dobra e não abaixo. Eu, inclusive já fiz diversos experimentos sobre e sempre levo esses estudos comigo, como do Boxes and arrows e esse mais analítico da Clicktale. Porém, tratando-se de Landing Page, existem pequenas regras para a dobra sim, pois 3 elementos precisam estar no primeiro contato, seguindo a regra dos 5 segundos. Assim, o título, a oferta e o botão (Call to action) devem estar antes da dobra. Caso o seu conteúdo seja extenso após a dobra, não tenha medo de repetir o botão mais para baixo, a taxa de cliques também é altíssima.

10 – Senso de urgencia

É a dica/regra que eu mais gosto, quando se trata de Landing Pages. O senso de urgencia é capaz de fazer o usuário tomar uma decisão por impulso, seja pelo título impressionante, pela foto impactante do produto, botão imponente, e principalmente pela oferta que está próxima do botão. Se o seu curso tem vagas limitadas, coloque que são poucas vagas, se tem uma promoção ocorrendo, coloque do lado a data final da promoção e fala que está esgotando, se tiver um produto de brinde, informe que é para quem comprar agora. Todas essas ofertas, descontos, promoções agregam valor na decisão do clique e aumentam significativamente a taxa de conversão.

11 – Página de confirmação

Página de confirmação é a página de “Parabéns! Sua compra foi realizada com sucesso”. Tecnicamente, é nessa página que se coloca o código que vai rastrear a conversão, se o usuário chegou lá é porque o funil funcionou. Infelizmente, poucos designers esquecem uma coisa muito importante quando projetam essa interface: O usuário já se tornou seu visitante, ficou interessado e se tornou cliente, ou seja, todas as barreiras entre sua empresa e ele foram quebradas. Aproveite esse momento para sugerir produtos relacionados, ofereça um desconto pela compra que ele acabara de fazer, a chance dele aceitar é altíssima. Ah! E não se esqueça do social! Aproveite que a compra foi realizada agora e aproxima ele da sua marca, chamando para twitter, facebook e outros canais de relacionamento, afinal ele já faz parte da família, certo?

12 – Teste

O que mais converte em clique, um botão a direita ou a esquerda? Qual foto converte mais, uma mulher sorrindo comendo uma salada ou um rapaz de camisa social aberta mostrando o abdômen trabalhado? O famoso “achismo” não tem vez no Design, por isso, existem dois testes muito conhecidos focados em conversão, são eles:

Explicação da Faber Ludens sobre Teste A|B
O Teste A/B é um método de teste de websites que consiste em exibir diferentes versões de uma mesma página para diferentes visitantes, podendo, assim, comparar a performance de cada página para atingir os objetivos dos usuários. Frequentemente, a métrica escolhida para o Teste A/B é a taxa de conversão, porém, é preciso considerar também outras medidas. Uma página que tenha taxa de conversão alta, mas pouco tempo de permanência pode indicar conversões canceladas futuramente.

Para minimizar o risco das alterações prejudicarem a métrica de sucesso do site, as versões alternativas costumam ser exibidas em pequenas porcentagens das visitas. Por exemplo: a versão B do site A é mostrada a apenas 5% dos visitantes. Pode-se ter mais versões da mesma página, porém, quanto maior a variação entre elas, mais difícil será interpretar os resultados.

O ideal é que as versões tenham pequenas alterações, para isolar o máximo possível as variáveis. Como exemplo, a página B tem um link a mais do que a página A. A mudança na performance se dará pelo efeito desse link extra.

fonte: http://www.faberludens.com.br/pt-br/node/56

Teste Multivariado
Teste multivariado permite que você teste mais de duas páginas ao mesmo tempo. Você faz pequenas variações e coloca as 5, 10, 20, 30 landing pages para disputarem entre si. Através de uma análise, você descobrirá quais variações estão retornando melhor performance, ganhando inteligência e criando novas variações em cima do que dá certo, sempre em busca da melhor taxa de conversão (CR – Conversion Rate).

Em tempo

Em Dezembro de 2011, nasceu a Melt DSP, uma empresa focada em otimizar sua compra em mídia online. Segue um sobre a Melt:

Olá, bem-vindo à Melt. Somos a primeira empresa DSP (Demand-Side Platform) com tecnologia Real-time Bidding na America Latina, com objetivo de ajudar anunciantes a obterem melhores resultados em seus produtos e serviços através de uma plataforma simples e amigável. Estamos integrados com as principais empresas de publicidade on-line do mundo como Admeld, Yahoo, Microsoft, Appnexus, OpenX, Pubmatic, Google, Rubicon Project e muitas outras. Através de uma inteligencia proprietária, conseguimos oferecer ao mesmo tempo volume de impressão e qualidade de anúncios em sites premium.

Em menos de 4 meses, já conseguimos clientes como Hotel Urbano, Sky, Predicta, Hi-mídia, Editora Globo, Buscapé, Mobly, Kindle e muitos outros. Será um prazer conhecer e ajudar sua empresa a otimizar seu investimento em mídia online, inclusive otimizando em tempo real suas Landing Pages, através de testes AB e multivariados.

Não tenho imagens mais antigas para mostrar que eu sempre tive essa paixão, desde pintar armários, paredes e outros objetos. Quando tinha meus 16 anos tinha uma camisa customizada com um boneco que fiz, aos 20 tinha um armário todo customizado, quando tinha banda, todos meus instrumentos eram customizados (um dia eu tiro as fotos e atualizo o post). Enfim, a vítima da vez foi minha mala, onde não basta só se deslocar, tem que levar a arte com você e continuar impressionando as pessoas.

Para isso, contei com a ajuda do meu grande amigo Henrique Soares, meu parceiro de loucuras e desenhos desde quando criávamos os personagens, desenhávamos e pintávamos as ruas para a copa do mundo. Comprei no Shopping uma mala da Le Postiche de 99,00 e 2 canetas Sharpie preta ponta fina e 2 canetas Sharpie preta ponta grossa, com um belo vinho ao longo da produção. Sigam os passos:

Pensando no personagem

Personagem escolhido

Rascunho

Contorno ponta fina

Contorno ponta grossa usada para dar projetar o personagem à frente (z-index, para os devs)

Resultado final

Finalizamos! Ou melhor, ainda não…

Ainda sobrava o restante da mala, daí eu e Henrique ficamos conversando o que poderíamos fazer, enquanto isso ficávamos rabiscando no papel, até que identifiquei um bonequinho simples que o Henrique rabiscou e sugeri de tentarmos criar diversas expressões para ele.

Cortei o molde da cabeça do bonequinho e comecei a marcar os espaços na mala, enquanto o Henrique começou a criar diversos rostos para nosso boneco.

E vejam como ficou

Os últimos resolvemos brincar um pouco com alguns personagens

Agora sim, o resultado final!

Espero que tenham gostado Sejam criativos com as coisas mais comuns que existem, no mínimo elas lhe garantirão belas risadas.

Então, o amigo CristianoWeb dará um curso online no Tudo para WordPress explicando toda a filosofia do GTD – GESTÃO DE PRODUTIVIDADE PESSOAL e como usar isso no seu dia-a-dia.

Além de aprender a filosofia GTD, você aprenderá a mexer em muitas das ferramentas mais conhecidas no mundo para controle de tarefas, tudo isso por um preço bastante acessível. Dúvido você fazer e me falar que isso não mudou sua vida

Esse post veio da sugestão do amigo Rafael Cardoso por skype, eu achei a sugestão ótima e resolvi criá-lo essa semana.

Criando o HTML

Dentro do seu body, você vai inserir o código da tabela:

<table>
	<thead>
		<tr>
			<td>Produto</td>
			<td>Preço</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Biscoito Presuntinho</td>
			<td>R$ 2,77</td>
		</tr>
		<tr>
			<td>Queijo Cottage</td>
			<td>R$11,99</td>
		</tr>
		<tr>
			<td>Queijo Cheddar 150g</td>
			<td>R$3,66</td>
		</tr>
		<tr>
			<td>Lasanha Verde à Bolonhesa 650g</td>
			<td>R$8,99</td>
		</tr>
		<tr>
			<td>Pernil Suíno com Molho e Vegetais 500g</td>
			<td>R$10,80</td>
		</tr>
	</tbody>
	</table>

a tabela fica crua e diferente para cada navegador, vamos igualar o nosso estilo com um reset básico, deixando o nosso html assim:

	
	








Produto
Preço




Biscoito Presuntinho
R$ 2,77


Queijo Cottage
R$11,99


Queijo Cheddar 150g
R$3,66


Lasanha Verde à Bolonhesa 650g
R$8,99


Pernil Suíno com Molho e Vegetais 500g
R$10,80

Estilo básico para tabela

Mostrarei como em 1 minuto você já consegue estilizar sua tabela.

.tbl table {
	width: 520px;
	background:#f5f5f5;
	border-collapse:collapse;
	border:1px solid #ccc;
	font-size:1.4em;
}
.tbl table td{
	padding:10px;
	border:1px solid #ccc;
}
.tbl thead {
  border-color:#e9e9e9;
  background:#2b2b2b;
  color:#f5f5f5;
}
.tbl table thead th{
	padding:10px;
	text-align:left;
  font-weight: normal;
}

Nossa tabela ficaria assim:

Primeira Customização

Criaremos uma tabela um pouco mais interessante agora. Perceba que para esse estilo funcionar, você precisa colocar a classe “clean” na table.

.tbl .clean{
  font-size: 1.4em;
  line-height:1.1em;
  color:#777;
	width: 520px;
	background:#f5f5f5;
	border-collapse:collapse;
	border:1px solid #ccc;
}
.tbl .clean thead {
  border-color:#e9e9e9;
  color:#2b2b2b;
  background:#fff;
  border-top:3px solid #2b2b2b;
}
.tbl .clean thead th {
	font-weight: normal;
	border-left:0 !important;
	border-right:0 !important;
}
.tbl .clean tbody tr {
  border-color: #f0f0f0;
  /* radius */
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
.tbl .clean tbody td {
	color:#444;
	border-left:0;
	border-right:0;
}
.tbl .clean tbody tr:hover {
  background: rgba(0,0,0,.05);
}

Nossa tabela já ganha uma nova roupagem, veja abaixo:

Reparem que o hover da linha no CSS é um RGBa, ou seja, trabalha com a camada de transparencia, ficando lindo fazer combinações desse jeito:

ou por que não colocar uma imagem de fundo na tabela?

luz, sombra e degradee

Vamos fazer uma tabela com um pouco mais colorida

.tbl .effect{
	background:#fff;
  -moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,.1);
  -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.1);
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.1);
}
.tbl .effect thead {
  border-color:#c8d1d8;
  color:#ffffff;
  background-color:#4dadfe;
  /* gradient */
  background: -moz-linear-gradient(top, #4dadfe 40%, #4495d9);
  background: -webkit-linear-gradient(top, #4dadfe 40%, #4495d9);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4dadfe', endColorstr='#4495d9');
}
.tbl .effect thead th {
	font-weight: normal;
	border-left:0 !important;
	border-right:0 !important;
	text-transform: uppercase;
}
.tbl .effect tbody tr {
  border-color: #f0f0f0;
  background:#fff;
  /* gradient */
  background: -moz-linear-gradient(top, #ffffff 40%, #e5edf4);
  background: -webkit-linear-gradient(top, #ffffff 40%, #e5edf4);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e5edf4');
  /* radius */
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
.tbl .effect tbody td {
	border-left:0;
	border-right:0;
}
.tbl .effect tbody tr:hover {
	color:#4495d9;
  background: rgba(255,255,255,.3);
  -moz-box-shadow: 0 0 3px 1px #4dadfe;
  -webkit-box-shadow: 0 0 3px 1px #4dadfe;
  box-shadow: 0 0 3px 1px #4dadfe;
  border-color:#4dadfe;
}

Existem 3 coisas que valem a pena considerar nesse estilo, A sombra da tabela que dá volume 3d a mesma, os degradees feitos com linear-gradient CSS3 e o efeito do HOVER na tr, que aciona a luz azul em volta que é box-shadow, mesmo recurso da sombra da tabela. O resultado é esse:

Existem restrições no webkit com alguns estilos para a TR, por isso, coloquei para mudar a cor da borda, garantindo a atenção parecida com a luz do box-shadow que aparece no firefox.

Estilizando linhas pares e ímpares

Antigamente isso só era possível com javascript e via programação, já tem alguns anos que isso é totalmente possível através de seletores, veja como é simples:

.tbl .odd tbody tr:nth-child(odd) {background: rgba(0,0,0,.05);}

Veja como fica:

É possível brincar bastante com tabela, só é necessário testar compatibilidade e usar a criatividade. Não se esqueça de sempre tentar seguir o layout enviado pelo designer, porém caso não haja um, segue essa galeria de estilos de tabela para inspiração.

Esse site apesar de BASTANTE ANTIGO, tem muitas contribuições de feras, inclusive do grande amigo Maujor, criando uma réplica do Gmail da época.

O curso acontecerá nos dias 29 de março, 03, 05 e 10 de abril (19:00 as 22:00 hrs).

Só não vou dar desconto para leitores e seguidores porque já está tão barato que vocês não precisam disso

Tem limite de usuários por turma, então é melhor você correr! Depois vai ficar falando “Aii eu não sabia, mimimimi”

Veja mais informações sobre a ementa e o curso aqui

Edu, conte um pouquinho do seu começo…

Bem, tudo começou em 1998 quando fui me interessar mais profundamente pela tal da Internet, e comecei a estudar HTML por conta própria, para no ano seguinte publicar o meu primeiro site no extinto Geocities. Na mesma época comecei a estudar edição de imagens, e por consequência comecei a me interessar por design. Mas nessa época tudo ainda funcionava apenas como um hobby.

Entre 2003 e 2004, quando fechei um escritório de produção de eventos, comecei a me questionar sobre o design, e como eu poderia transformar um hobby em profissão. Acabei indo parar em uma empresa de brindes, onde eu trabalhava com serigrafia e com alguns tipos de materiais impressos como catálogos e cartões de visita. Trabalhei ainda em uma outra agência criando catálogos de livros e elementos de PDV. Mas ao acabar me deparando novamente com a área da web em alguns freelas que acabaram surgindo, fui descobrindo do que eu realmente gostava.

A partir daí me voltei inteiramente para o design na web, comecei a ministrar aulas – o que contribuiu bastante na minha formação profissional – ministrar palestras e escrever artigos. Comecei a estudar com mais atenção as web standards e acessibilidade, e mais ainda a arquitetura de informação, as questões de usabilidade e as interações sociais nos meios digitais.

Passei por diversas agências e empresas, de design, publicidade, marketing esportivo e TI. Essas experiências profissionais juntamente com os rumos dos meus estudos me direcionaram cada vez mais para a minha área atual – o UX Design.

Você se considera um designer que também codifica, um codificador que também projeta, os dois, ou tem alguma outra definição?

Bem, comecei a trabalhar com design profissionalmente no meio impresso, sem código. Quando migrei para a web, eu aprofundei meus estudos em codificação por considerar esse conhecimento essencial na concepção de qualquer projeto para web, tanto para entender os limites e as possibilidades visuais do CSS a serem exploradas em um layout, quanto para compreender os limites e as possibilidades do HTML a nível de semântica e acessibilidade para o projeto. Me considero um designer que também codifica. Não sei se posso dizer que todo designer que trabalha com web deveria saber codificar, talvez não seja necessário, mas eu acho importante.

Acho que todos que te conhecem em eventos e pelo twitter ficam assustados com sua atividade frenética em twittar o que está acontecendo, você gosta dessa proximidade com pessoas da área ou é apenas uma compulsão em ter que divulgar tudo?

Não sei se minha atividade é tão frenética assim… Minha irmã de 13 anos tuita quatro ou cinco vezes mais do que eu que trabalho com internet o dia todo. Isso sim me assusta (rs).

Na verdade, por eu dar aulas e ministrar muitas palestras em faculdades, boa parte das pessoas que me seguem no Twitter são estudantes ou profissionais iniciantes, e dessa forma gosto sempre de divulgar alguns feeds que considero boas referências para estudos. Também acho que o Twitter é um canal de relacionamento bem prático e informal para trocar informações rápidas. Mas o tempo que eu gasto de fato com o Twitter não chega a ser nada compulsivo.

Recentemente você tem levado um pouco do termo “social interface design” para pessoas e empresas, pode contar um pouco sobre o que significa isso?

No início de 2011, baseado em estudos que eu vinha fazendo a mais de um ano, ministrei uma palestra sobre “Social Interface Design” na Campus Party, e no decorrer do ano mais cinco vezes em algumas faculdades. Essa palestra comenta basicamente sobre como as pessoas utilizam a internet para suprir suas necessidades sociais, e como podemos explorar isso para projetar interfaces que promovam a interação entre pessoas, e não apenas entre pessoas e máquinas (IHC).

Não se trata apenas de projetos para redes sociais, mas da concepção de qualquer projeto digital hoje em dia. O que as empresas precisam compreender é que sendo a internet uma mídia social, é de extrema importância que sejam criados espaços em que o público possa se relacionar em torno das marcas, produtos e conteúdos. Todos os projetos que estejam conectados a internet de alguma forma possibilitam interfaces sociais, em diferentes níveis.

Para quem estiver interessado em conhecer um pouco mais sobre esse assunto, pode acessar os slides e vídeo dessa palestra no meu blog no endereço http://www.agni.art.br/palestra-social-interface-design/

Como vê o cenário do Design de interfaces no Brasil? E de front-end em geral?

Apesar de eu perceber um grande interesse e um bom nível de discussão a nível acadêmico, não vejo o cenário do design de interfaces tão evoluído no Brasil. Com excessão de algumas grandes agências e empresas que têm essa área bem consolidada, no geral vejo os projetos de interface sendo subestimados ou desfigurados. O primeiro caso acontece quando os resultados do projeto não são associados aos estudos de interface, rebaixando o design a questões meramente estéticas. Já o segundo caso acontece ao se ignorar o usuário na concepção dos projetos, quando ele deveria ser o elemento central. Nenhum projeto de interface pode verdadeiramente acontecer sem que voltemos nossas atenções ao usuário, e se isso acontece está errado. Estética não resolve problemas funcionais. Muito disso acaba acontecendo até mesmo por questões de politicagem nas empresas, como bem frisou o Luiz Agner num artigo há alguns anos (http://bit.ly/ifybUS). Acho que no Brasil o cenário aponta sim para uma evolução desse pensamento, mas não vejo isso a curto prazo.

Na questão do front-end a minha visão também não é das mais otimistas. Vejo ótimas discussões entre profissionais nas comunidades, listas de discussões e eventos, mas não vejo isso implementado nos projetos de fato. Muitos profissionais ainda acham que trabalhar com web standards é apenas uma questão de trocar tabela por div, e ignoram questões relativas a semântica e a acessibilidade. O próprio HTML5 vem gerando um grande volume de discussão, porém os profissionais estão mais interessados em criar efeitos interativos que afrontem o Flash do que se aterem a real evolução da linguagem, que foi a semântica. Cansei de ver projetos anunciados como HTML5, que traziam apenas o novo Doctype com uma porção de div’s. Código não é sopa de tag’s, e precisa ter significado.

O que seria o projeto perfeito para ti?

A pergunta anterior já me ajudou a responder em parte essa pergunta. O projeto ideal para mim é aquele que possui foco no usuário, semântica e acessibilidade. Acredito que se dermos foco nesses três quesitos, resolvemos praticamente todos os outros problemas. Qualquer projeto de interface, plano de negócio ou meta de conversão funciona quando nos preocupamos em compreender as necessidades do usuário e criamos soluções para elas. A preocupação com a semântica pode impactar positivamente o trabalho de SEO, de webwriting, de compartilhamento em redes sociais e de intercâmbio de informações entre diferentes sistemas. A acessibilidade para mim é algo que vai muito além de fornecer acesso a pessoas com algum tipo de deficiência. Quando criamos uma campanha crossmedia por exemplo, essa preocupação em atingir todos os públicos é uma questão de acessibilidade. Quando criamos um design responsivo, com um layout que se adapta a diferentes dispositivos, estamos nos atendo a uma questão de acessibilidade também. Algumas coisas ganham novos nomes, mas continuam tendo a mesma natureza.

Essas questões funcionais bem resolvidas solucionam a maioria dos problemas do projeto, deixando para a estética apenas o seu papel de cativar o uso e criar paixão pelo produto final.

Para um desenvolvedor front-end e (ou) designer que está começando agora, qual seria sua mensagem para ele? Qual seria a melhor forma de começar?

Primeiramente, nunca deixe de ler livros, neles você encontra os melhores conteúdos para embasamento no trabalho. A internet nos trás informações rápidas que podem nos atualizar sobre algum assunto ou mostrar alguma rápida solução para alguma questão pontual, mas não substitui os livros.

Outra dica é para que você nunca deixe a faculdade e outros cursos atrapalhar seus estudos. Isso que estou dizendo parece contraditório, mas muitas vezes o meio acadêmico acaba girando em torno de uma perspectiva limitada, o que acaba por vezes iludindo o futuro profissional do que preparando-o. O embasamento que uma faculdade pode nos trazer é essencial, mas nunca deixe de estudar cases reais, nem de fazer contato com profissionais da área para trocar informações sobre o que realmente acontece fora da caverna acadêmica.

Agora é com você

Primeiramente queria agradecer ao Bernard o espaço aqui no blog. Em seguida, queria dizer à vocês que quase sempre o mundo real pode nos ensinar muito mais sobre interfaces e significado do que a Internet. Não se limitem dando mais atenção as telas do que as pessoas, pois é com essas que vocês podem aprender tudo que precisam sobre interfaces.

E quem quiser trocar alguma idéia rápida ou fazer algum contato comigo, basta me seguir no Twitter – @eduagni

Valeu

Seguem alguns projetos já feitos pelo querido amigo @eduagni:

Estava desde o ano passado pesquisando alguns livros para comprar para 2012, 4 deles chegaram essa semana (sempre compro na Amazon) e gostaria muito de compartilhar com vocês.

Quase todos os livros que eu compro sobre design e front-end (exceto os livros do maujor) são em inglês. Infelizmente o Brasil ainda carece de profissionais que investem seu tempo em compartilhar conhecimento, gerando uma dicotomia, pois os que lançam livros muitas vezes são acadêmicos que não fazem a mínima ideia de como é o processo do Design em sua prática. Lá fora, o FUNCIONALISMO é incorporado às universidades, levando projetos acadêmicos da teoria ao processo de execução, no Brasil agora é que o governo está incentivando essa iniciativa em universidades, o que me alegra muito.

Rocket Surgery Made Easy (Steve Krug)

Steve Krug é considerado atualmente um dos maiores autores atuais de Design no mundo, tudo isso por causa do seu best-seller chamado Don’t make me think (Não me faça pensar) lançado em 2000. Esse livro para mim foi uma coisa fantástica pois ele me mostrou o quão simples é pensar sobre design sem precisar de diagramas conceituais nem nada extremamente complexo, bastando apenas pensar na prática, se colocar no lugar do usuário e realizar testes. Quem leu o don’t make me think deve lembrar que quando chega no fim do livro que ele cita um pouco sobre os testes de usabilidade econômicos, pois bem, acredito que o Rocket Surgery Made Easy é a continuação, onde Steve ensina sobre a facilidade na hora de você realizar testes para identificar e resolver problemas de usabilidade em interfaces.

This is service design thinking

Marc Stickdorn e Jakob Schneider são os autores desse livro que conta com a colaboração de mais de 20 outros autores da comunidade de Design de serviço. Para entender um pouco o que é design de serviço, utilizo a definição dada pelo Uk Design Council:

“Service design is all about making the service you deliver useful, usable, efficient, effective and desirable. (Traduzindo não literalmente, Design de serviço é tudo a respeito de como tornar o serviço que você entrega útil, usável, eficiente, eficaz e desejável.)”

O Brasil é um dos países onde existe o maior descaso dos serviços com seus clientes, gerando a não só uma avalanche de reclamações, como gerando um buzz positivo para empresas que se posicionam diferentemente, com um atendimento humano e positivo, cumprimento e atecipação do prazo, site focado em agradar e surpreender o usuário positivamente, ou seja, desde o primeiro contato até o pós-venda com o cliente. Pensar em Service Design no Brasil é sair MUITO na frente.

Agile Experience Design

Saber da existência desse livro foi a coisa que mais me encantou, pois eu sempre discuti muito em posts, podcast e em empresas que eu já trabalhei e já prestei consultoria, sobre o papel do designer em um desenvolvimento ágil, comuns no Brasil com a utilização do XP e Scrum. A verdade seja dita, a maioria das empresas que entraram para métodos ágeis são de TI, onde o gerente de produto está focado no desenvolvimento, não dando a mesma importância para o Design. Por diversas vezes, o PO, SM são ex ou atuais desenvolvedores, que ainda tem a cabeça nos anos 90, acreditando em fábrica de software e não em projeto + desenvolvimento. O resultado final é entregar o que foi levantado como pre requisito do cliente, gerando equipes onde o design não tem vez. Em grandes empresas onde o design é visto como peça fundamental, o processo se inverte, o design projeta em uma camada, se integrando com o desenvolvimento, não só atendendo requisitos, como gerando uma excelente experiência para o usuário e ROI para o cliente.

O livro Agile Experience Design é escrito por Lindsay Ratcliffe e Marc McNeill, que conceituam e dão dicas de como inserir o Design de interfaces dentro do processo ágil, inclusive dando dicas de como criar uma disciplina no método ágil para design. Fantástico né? O mais interessante é que não é um livro que coloca o design como Deus, como muitos as vezes acreditam, e sim dizendo como o designer tem que estar ao lado do analista de negócio.

Visual Teams, Graphic tools for commitment, innovation, & high performance

O título por si só já diz tudo, times visuais, ferramentas gráficas para comprometimento, inovação e alta performance. O livro escrito por David Sibbet prometer ser uma aula de liderança, de como utilizar papel e quadro no processo de criar um time comprometido e confiante em melhorar a qualidade e a velocidade de entrega do produto. Recomendado para todos que tem perfil de liderança, gerentes, coordenadores e palestrantes. Além de inúmeros exemplos gráficos, o livro vem recheado de exercícios para você fazer e praticar com a sua equipe, além de sugestões de livros para desenvolver ainda mais seu poder de liderança. Comece a guardar papeis de rascunhos, pendure logo aquele quadro na parede e comece agora mesmo a motivar sua equipe.

Existem muitos outros livros que eu já li, mas achei interessante mostrar essa nova safra de livros que podem ajudar muito a profissionais da área, espero que tenham gostado. Estou esperando mais 2 livros novos que encomendei, quando chegar eu faço um post sobre um deles ok? Abraços e boa leitura a todos!

WebInk é um plugin gratuito da Extensis, com a missão de integrar sites de webfontes (pagas ou nao) para o photoshop. Ele tem a versão paga que expira, mas daí só as fontes pagas do site que não poderão ser baixadassó o Suitecase Fusion 3 (programa de preview de fontes) para de funcionar, não interferindo no funcionamento do plugin para as fontes gratuitas do Google WebfontsQualquer fonte. Cool han?!

Acho que esse é o começo da integração de fontes que eu sempre cito em meus posts como esse sobre font-face e esse sobre css animation. Hoje em dia o designer precisa procurar uma fonte interessante para utilizar em um projeto, a partir do momento que tem o google webfonts integrado, o trabalho é muito mais otimizado, além de ter um próprio Preview das fontes no photoshop, muito melhor que o original do photoshop, diga-se de passagem.

O interessante é que quando se utiliza uma das fontes a primeira vez, ela é adicionada a sua lista de fontes normais, não fisicamente mas visualmente pelo Photoshop. Como o google webfonts está aumentando cada vez mais, ele tem um search para facilitar a busca por qualquer fonte específica que esteja procurando.

Para ativar o WebInk é bastante fácil, é só baixar o plugin que pode ser achado aqui. Instalá-lo em seu computador e depois abrir seu photoshop. Para achar o painel do webink, é só ir em janela (window) > Extensões (extensions) > Extensis. Prontinho

Como eu disse, é uma dica rápida. Então desenvolvedores front-end, CORRAM e contem aos seus devidos designers que agora usar font-face é mais fácil do que procurar fonte em sites convencionais. Agora cá entre nós, seria mais interessante ainda se ele também estivesse integrado com o http://www.fontsquirrel.com né?