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é?

O meu lado programador começou cedo.. com 10~11 anos eu já fazia joguinhos no RPG Maker e jogava muito MUD, um MMORPG onde você “interage” com o mundo através de comandos e recebe a resposta via um output de terminal… sem imagens ou sons… Só os MUDs mais avançados tinham output colorido e – talvez – um site.

Naquela época eu tive a brilhante idéia de criar o meu próprio MUD, e você encontrava por ai o código-fonte de uma das distribuições mais famosas: o CircleMUD (por favor, vejam o site!) que era feito em C, criado lá por volta de 1990… Foi aí que tive meu primeiro contato com programação de verdade: compilando C, no Windows (cygwin) com 12 anos de idade.

Até então eu só tinha brincado com o famigerado FrontPage, e o PHP veio no ano seguinte, quando precisei fazer um site pra um servidor de Tibia que eu inventei de criar.. e aí entrei alguns sites prontos, feitos em PHP… Não vou dizer que me apaixonei pelo PHP ali, mas comparado ao C.. aquilo era uma maravilha de simples. Foi nessa mesma época que aprendi a fazer HTML direto no source, sem usar um editor visual.

Qual a importância que você vê na linguagem PHP no Brasil e no exterior?

O PHP é uma linguagem com uma curva de aprendizado muito curta, você pode começar a fazer sites-colcha-de-retalho em menos de uma semana… isso tem um impacto muito grande na qualidade dos projetos (e na quantidade de sobrinhos) que você encontra por ai, mas ao mesmo tempo é tem uma das maiores comunidades de desenvolvimento do mundo… Você encontra blogs e tutoriais sobre PHP à torto e à direito.

No Brasil eu não vejo uma comunidade muito ativa e preocupada com o futuro da linguagem, visto que nem as empresas de hospedagem estão preocupadas com as últimas versões… Por aqui impera muito o “time que tá ganhando não se muda”. Já no exterior você vê as coisas acontecerem, projetos open-source ousados e bastante inovadores.

Eu diria que o conceito de “comunidade” está crescendo no Brasil, as pessoas estão começando a se juntar pra discutir entre si a melhoria da linguagem ou projetos, ao invés de discutir qual linguagem ou projeto é melhor.

Atualmente você tem um dos blogs mais conhecidos de PHP, o que significa essa responsa para ti? Alguma dica para quem quer começar a escrever seu próprio blog sobre alguma linguagem?

Quando eu criei meu blog eu queria algo que um desenvolvedor menos experiente pudesse consultar, queria resolver os problemas do dia-a-dia que todo desevolvedor PHP passa: formulário de login, pesquisa no banco de dados, autenticação de usuários, envio de email e etc. Sem dúvida é uma responsabilidade muito grande, até por que alguns desses artigos foram escritos a 2~3 anos e ainda estão em primeiro lugar no Google, mesmo seguindo uma programação procedural sem boas práticas.. meu intuito com o blog não é mostrar o melhor código, e sim uma boa solução, que tente fazer a coisa certa e ser compreensível ao mesmo tempo.

Criar um blog é algo que eu recomendo pra qualquer pessoa que queria trabalhar com programação…. é essencial botar suas idéias e convicções pra fora e dar a cara à tapa… Colocar uma idéia na mesa e ficar aberto à criticas é extremamente enriquecedor.

Eu vejo o blog como um “Hello World” dessa vida de “pessoas que trabalham com computador”… É a forma de você mostrar ao mundo à que veio.

Ano passado você criou um novo projeto, um treinamento de Cake PHP, o que te motivou a isso?

Sempre me senti incomodado com a qualidade de código e dos projetos que eu encontro por aí… E o meu blog não estava ajudando muito nesse ponto… a maioria das pessoas encontravam o que queriam e depois continuam a fazer a mesma coisa…

O Assando Sites é uma tentativa minha de profissionalizar o desenvolvedor PHP, que já trabalha no mercado mas ainda faz sites como em 1990: pegando scripts prontos ou misturando lógica de apresentação com lógica de negócio, fazendo tudo misturado e garantindo a não manutenabilidade do projeto… O velho código-spaghetti.

Uma coisa legal de falar é que eu (Bernard De Luna) tive o prazer de fazer o design do Assando Sites para o Thiago Belem, com a participação do ilustrador que vocês já viram eu comentar umas 70 vezes no Blog, site e twitter, que é o ilustrador Eddie Souza. O resultado foi interessantíssimo:

Ainda sobre framework, na hora de escolher um framework PHP, você prefere o Cake PHP? Por que? Como identificar o melhor framework para um projeto?

Frameworks são ferramentas, e cada ferramenta tem seu propósito… Você não cortar um tronco de árvore usando um martelo ou uma sarra de cano.

Eu prefiro o CakePHP por três motivos: simplicidade, diversão e comunidade.

É muito simples começar a trabalhar com o CakePHP, que é extremamente amigável e facilitador com você… Ele te ajuda no processo de desenvolvimento, até na hora de “deu um erro e eu não sei o que houve” ele tem mensagens de erro fáceis de entender, que em alguns casos trazem um trace-back ou te dizem o que fazer (que arquivo criar ou qual código usar).

Também adoro a comunidade do CakePHP que, por causa da recente versão 2.0, está MUITO ativa… muitas coisas acontecem na lista de discussão oficial do framework, dá gosto ver o projeto crescendo e novas funcionalidades surgindo.

Eu não vejo muita diferença – pro projeto – entre os frameworks atuais… Sempre recomendo “vai com o [framework] que te faz feliz”, porém você pode acabar escolhendo um micro-framework pra um projeto menos robusto, com poucas páginas e conteúdo mais simples.

O que seria o projeto perfeito para ti?

Antes de tudo: um projeto onde o cliente participe, como parte da equipe (mesmo fazendo seu papel de cliente-chefe), mas que participe de todo o processo, acompanhando o projeto.

Do lado tecnológico, imagino um projeto onde eu possa ter tempo pra documentar o código, refatorar todos os processos e estudar melhores soluções… O problema da maioria dos projetos é que eles são orientados à prazo.. Falta muita preocupação (principalemente por parte do cliente) com a qualidade ou satisfação do usuário.

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

Pratique muito, diariamente… Estude novas soluções, abra mão do que você acha que sabe e tente entender o ponto da outra pessoa… Assista outras pessoas trabalhando, discuta soluções e revise seus conceitos todos os dias.

Pro computador, “A é igual B” e pronto… Só existe preto e branco.. mas ele só pensa em 0 e 1, e você? Como diria meu amigo Henrique Bastos, “entre o branco e o preto existe um caralhão de tom de cinza”.

Vocês que querem saber um pouco mais sobre o Thiago Belem, podem encontrá-lo em seu site http://thiagobelem.net, pelo seu blog e o twitter @TiuTalk.

http://fiddle.jshell.net/felipenmoura/28fhY/1/show/light/

Então, depois daquela conversa, decidi pegar uma das etapas do treinamento que dou e mostrar pra vocês por aqui como fazer. Vamos nessa?

Começamos pelo fim, vejamos primeiro o que vamos fazer:

ver demo

Usaremos a técnica de font-face do CSS3 para usarmos uma fonte bem elegante.

Criando um título elegante com font-face do CSS3

Eu sempre recomendo utilizar o http://www.fontsquirrel.com ou o http://www.google.com/webfonts para utilizar uma fonte diferenciada, preciso dizer que prefiro o Font Squirrel, por me dar uma gama melhor de fontes, além de gostar mais da usabilidade do site na hora da navegação e visualização das fontes escolhidas. Caso você ainda esteja começando a se interessar sobre font-face e(ou) fontes externas, criei um post que fala um pouco sobre isso.

Primeiro passo: colocar no css o trecho de código para chamar as fontes externas

O google webfonts lhe dá um css externo (o link) que chama essa fonte diferenciada, assim você não precisa armazenar os arquivos no seu servidor, por outro lado, fica tudo dependendo de uma requisição a um serviço que não é seu. O font squirrel lhe dá todos os arquivos e no mesmo zip vem já o css chamando essas fontes e um exemplo prontinho para você começar a utilizá-la.

O código que você vai colocar no CSS é esse:

@font-face {
    font-family: 'WalkwayBoldRegular';
    src: url('Walkway_Bold-webfont.eot');
    src: url('Walkway_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Walkway_Bold-webfont.woff') format('woff'),
         url('Walkway_Bold-webfont.ttf') format('truetype'),
         url('Walkway_Bold-webfont.svg#WalkwayBoldRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Esse código @font-face, como vocês podem ver, chama vários arquivos diferentes da mesma fonte, isso é necessário para compatibilidade em browsers e devices (Dispositivos) diferentes.

Segundo passo: Fazer a seguinte chamada no CSS

h1 {
	font-family: 'WalkwayBoldRegular';
}

Fácil, né? Okay, vamos então fazer a aparencia da página.

HTML da página

O HTML desse exemplo é bem simples, é só inserir dentro do body:

Cow ball tip corned beef meatball
swine filet mignon, boudin turducken ribeye shankle

Tenderloin turducken rump filet mignon, bresaola pancetta jowl brisket sirloin. Drumstick venison jowl swine kielbasa chuck, sausage leberkäse tongue rump shankle ham corned beef tail ribeye. Strip steak andouille chuck ball tip ham brisket, pancetta prosciutto shoulder drumstick short ribs. Capicola bresaola flank pork belly spare ribs shank, jerky beef ribs jowl meatball pork loin tail. Turkey boudin swine, flank fatback tenderloin corned beef t-bone ground round venison jowl short loin leberkäse drumstick. Ball tip frankfurter fatback chicken shoulder hamburger boudin, pancetta strip steak pork ham pork loin capicola turkey pastrami.

Feito isso, vamos colocar o CSS padrão.

CSS simples da página com font-face (sem animações)

@font-face {
    font-family: 'WalkwayBoldRegular';
    src: url('Walkway_Bold-webfont.eot');
    src: url('Walkway_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Walkway_Bold-webfont.woff') format('woff'),
         url('Walkway_Bold-webfont.ttf') format('truetype'),
         url('Walkway_Bold-webfont.svg#WalkwayBoldRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
	font: normal normal 10px/1em arial;
}
.box {
	width:480px;
	margin:50px 50px 50px 40px;
	padding-left: 40px;
	border-left:10px solid #bbb;
	position:relative;
  left:0;
}
h1 {
	font: normal normal 6em/.8em 'WalkwayBoldRegular';
	margin:0;
	text-transform: lowercase;
	margin-bottom: .4em;
	letter-spacing: -.02em;
}
h2 {
	font-size:3em;
	font-weight: normal;
	color:#777;
	line-height:1em;
}
p {
	font-size:1.6em;
	line-height: 1.4em;
	margin-bottom:.8em;
	color:#777;
}

A borda lateral ficará cinza claro, o título ficará já com a fonte bacana (lembrando que você precisa baixar a fonte que você deseja, como foi falado no primeiro passo.

Fazendo o efeito HOVER (passar do mouse) ficar mais sexy através do CSS ANIMATION

Para isso precisamos colocar o status de como o elemento ficará com o hover e depois disso colocar os atributos de animação nos devidos seletores.

Primeiro passo: colocando o :hover no texto

.box:hover {
	border-color:#F90;
	border-left-width:20px;
}
.box:hover p {color:#2b2b2b;}

Não fizemos nada de CSS3 nem nada inovador, apenas mudamos a cor e espessura da borda da div com a classe BOX, e a cor da letra do paragrafo, agora vamos colocar o CSS animation para dar movimento a esse efeito.

Segundo passo: Incluindo CSS ANIMATION

Como vocês perceberam, criamos os hovers em 2 seletores, o .box e o P que está dentro dele, então, vamos ACRESCENTAR essas linhas nos dois itens QUE JÁ EXISTEM no nosso CSS:

-moz-transition:all .3s linear;
-webkit-transition:all .3s linear;
transition:all .3s linear;

ficando assim:

.box {
	width:480px;
	margin:50px 50px 50px 40px;
	padding-left: 40px;
	border-left:10px solid #bbb;
	position:relative;
  left:0;
  -moz-transition:border .3s linear;
  -webkit-transition:border .3s linear;
  transition:border .3s linear;
}

p {
	font-size:1.6em;
	line-height: 1.4em;
	margin-bottom:.8em;
	color:#777;
  -moz-transition:all .3s linear;
  -webkit-transition:all .3s linear;
  transition:all .3s linear;
}

Embora já existam vários sites, blogs, livros que explicam o que é a sintaxe TRANSITION no css3, deixa eu rapidamente dizer o que eu utilizei para fazer a animação.

No seletor .box eu coloquei que a transição só vai ocorrer na mudança de valores do atributo BORDER, é interessante avisar isso, pois foi bem observado pelo Zeno Rocha em um treinamento que demos juntos, que se deixar como ALL, o CSS ANIMATION pode acabar dando conflito com o CSS TRANSITION, por isso, tomem cuidado. O segundo item é a velocidade em que ocorrerá essa animação, optei por 0.3 segundos, uma dica no CSS é que valores decimais não precisam ter 0 na direita, podendo apenas usar .3 ou qualquer outro valor. Por fim escolhi a animação linear que indica o que chamamos de “easing” da animação, basicamente se há alguma aceleração ou redução da velocidade ao longo da animação, como não desejo isso, mantive o linear.

Reparem que no seletor P eu deixei o ALL, já que não pretendo utilizar nenhum animation nele, ou seja, não havendo chance de conflito

Testem e vejam que ao passar o mouse na div, a borda está ganhando cor e tamanho, enquanto o texto do parágrafo fica mais escuro, já está bastante elegante e nem por isso pobre, pense na quantidade de efeitos que você pode fazer com isso.

Por fim, o CSS ANIMATION

O CSS animation é sempre bárbaro, mesmo ainda consumindo muito do desempenho do CPU para acontecer. Vamos agora criar a CHEGADA do conteúdo para o usuário. O efeito acontece apenas no seletor .box, ou seja, precisamos primeiro chamar a animação que vai ocorrer nesse seletor, ACRESCENTANDO as linhas a seguir no .box

-moz-animation: box 1400ms 1 linear;
-webkit-animation: box 1400ms 1 linear;
animation: box 1400ms 1 linear;

Ficando assim:

.box {
	width:480px;
	margin:50px 50px 50px 40px;
	padding-left: 40px;
	border-left:10px solid #bbb;
	-moz-animation: box 1400ms 1 linear;
	-webkit-animation: box 1400ms 1 linear;
	animation: box 1400ms 1 linear;
	position:relative;
  left:0;
  -moz-transition:border .3s linear;
  -webkit-transition:border .3s linear;
  transition:border .3s linear;
}

Explicando rapidamente também a linha do CSS ANIMATION (box 1400ms 1 linear), BOX é o nome da animação, eu fiz o mesmo nome da class da div para ficar subentendido que animarei aquela parte, mas vale lembrar que poderia ser qualquer outro nome, eu só preciso na hora de escrever a animação propriamente dita, usar O MESMO NOME dessa chamada, ou seja, se usar BANANA aí, tenho que usar BANANA quando escrever a animação ok? Depois disso, temos o 1400ms que é o tempo em que ocorrerá a animação, após isso temos o número “1″ que é quantas vezes quero que aconteça essa animação, e por fim é o “linear, que, assim como já expliquei no TRANSITION, indica o que chamamos de “easing” da animação, basicamente se há alguma aceleração ou redução da velocidade ao longo da animação.

FIM! Veja o resultado final

ver demo

Aproveito o espaço final para dizer que, diversas coisas podem ser feitas através do bom senso da animação utilizando CSS3. Cabe, acredito eu, mais ao design de interfaces pensar em uma interação elegante e sexy utilizando-as do que o desenvolvedor inventando-a. Design que conhece código e desenvolvedor antenado em design formam um belo time, pensem nisso.

Começarei com o amigo Ricardo Saavedra que hoje em dia é Arquiteto de Informação da Globo.com

Fala Ricardo tudo bem? Bom, conte-me um pouquinho da sua caminhada nessa área e como você acabou caindo onde você está hoje.

Sempre estive envolvido no processo criativo de alguma forma. Me formei em publicidade e propaganda, portanto, minhas primeiras experiências acabaram sendo em agências de publicidade. Alguma delas digitais, outras nem tanto. Sempre foquei mais na área digital. Comecei a estudar e correr atrás de todo o conhecimento que podia na época: de front-end, marketing digital, usabilidade, design de interfaces e por ai vai…

Assim, em um caminho meio que natural, em virturde das propostas de trabalho que eu acabei recebendo, me especializei na disciplina de Arquitetura de Informação e Design de Interação.

Dentro das separações da profissão de Design no Brasil e no exterior, quais você vê que estão ganhando mais destaque e qual a importancia delas para ti?

A disciplina de UX vem ganhando espaço no Brasil e Fora. Dentro da sigla eu vejo alguns grandes campos: Arquitetura de Informação, Design de Interação, Usabilidade e Pesquisa e por último a àrea de Estratégia/Business.

Acredito que todos os pontos são importantes para um bom resultado final. É legal se inteirar sobre esses quatro pontos, mas eu recomendo focar em algum deles, só assim é possível dar tempo de ler o que vem acontecendo aqui e lá fora.

E como é o seu dia-a-dia na Globo

A globo.com é uma empresa jovem e descolada, assim como muitas empresas do Vale do Silício. Aqui, nós utilizamos Scrum. Cada time conta em média com 4 devs, 1 Designer de Interação, 1 Arquiteto de Informação, 1 P.O. e um S.M.

Quando vamos iniciar um novo projeto, a equipe de UX (Designer e AI) junto do P.O. tenta responder algumas perguntas antes de iniciar o desenvolvimento de fato. Um dos maiores desafios é alinhar com todos os stakeholders envolvidos no processo a visão do produto.

Uma vez fechada essa etapa incial, começamos de fato a execução do projeto. A partir dai, o tempo se divide em reuniões de planejamento, retrospectiva e reuniões diárias para acompanhamento dos projetos.

A equipe de UX tenta ficar um Sprint à frente do desenvolvimento, para conseguir amadurecer as propostas de interação, design visual e fluxos. O que nem sempre acaba acontecendo, dependendo dos prazos.

Tem como nos contar um pouco mais do projeto?

Em novembro lançamos 20 apps de todos os times da primeira divisão para iPad. O conceito da app foi sendo construído dentro do processo que eu citei logo acima. O objetivo do aplicativo era que em um só lugar o torcedor pudesse acompanhar o seu time do campeonato Brasileiro e ainda assistir a jogos ao vivo.

Você pode baixar um dos apps aqui (o Ricardo sugeriu o do Flamengo, ecouti :p)

O que seria o projeto perfeito para ti?

Dentro de um projeto, tenho muito claras as etapas:

1. Pesquisa e Estratégia
2. Design e Desenvolvimento
3. Lançamento e Validação

Um projeto ideal é aquele que consegue otimizar a pesquisa e estratégia, sendo capaz de incluir ciclos iterativo na etapa de design.

Uma vez lançando o produto em um tempo hábil, é possível rapidamente testar hipóteses. Tendo recursos para amadurecer as soluções é possível construir algo que seja de fato relevante para os usuários, quem realmente importa no final das contas.

Para um designer que está começando agora, qual seria sua mensagem para ele? Qual seria a melhor forma de começar?

Uma boa notícia: falta gente boa! O número de vagas que eu recebo à procura de indicações de Designers por email é assustador.

Tenho visto que o mercado Brasileiro entendeu que não basta apenas o cara sem bom de Design Visual e está buscando cada vez um profissional que seja capaz de cobrir todas as etapas do Design UX (as que citei acima).

Quem está começando agora, sugiro que liste todos os “skills” que possui e tente identificar em quais áreas ele deve buscar mais conhecimento e em qual àrea ele vai optar se especializar.

Lá fora eu vejo empresas recrutando designers UX que saibam implementar suas interfaces (front-end). Ou seja: quem foca demais em uma fase inicial pode acabar se prejudicando. Buscar conhecimento em outras áreas com certeza ajuda a encontrar soluções mais maduras mais rápido.

Agora é com você

Quem quiser quiser saber mais sobre outros projetos ou tiver alguma dúvida, pode me mandar um email ou um reply no twitter que a gente troca uma ideia!

ricardosaavedra.net
twitter.com/ricardosaavedra

Seguem algumas telas bacanas que o Ricardo separou pra gente, confiram:

Próxima entrevista semana que vem com alguém de código

Aproveito para colocar uma lista dos 7 itens que espero que aconteçam em 2012:

1. Vamos parar de achar que Design é a área de deixar um site ou aplicativo BONITO, a evolução já está mais que evoluída e consolidada, vamos aceitar que existe profissionais que entendem bem de UX e usabilidade e vamos utilizá-los para aumentar a amigabilidade e performance de nossas interfaces mundo a fora.
2. Qualquer profissão tem seus sobrinhos, não só a área de WEB. Já tem 10 anos que ouço de profissionais que não tem como competir com pessoas que cobram 300,00 para fazer um site. Como diz Júlio Cesar, Veni, vidi, vici (Vi, vivi e venci). Conheço muitos outros que venceram, outros que estão vencendo e muitos que vencerão. Vamos continuar evoluindo nossa qualidade e profissionalismo, pois como diz um amigo meu dentista: O cara escolhe fazer o canal em um dentista popular, não dá nem 2 meses e ele vem com a cara inchada e morrendo de dor ao meu consultório para que eu faça o trabalho direito. Percebem alguma semelhança com a nossa área?
3. HTML5 é uma realidade, assim como CSS3. Porém, não se esqueça, um implementador ruim é ruim em qualquer linguagem. Aprenda a fazer o seu código o melhor possível e focado no ROI do cliente, depois você aprende novas tecnologias, já falei um pouco sobre isso aqui
4. Só porque você aprendeu CSS animation e quer mostrar que você já sabe utilizá-lo, não precisa fazer a esmo no seu website ou de um cliente. Lembre-se que fizeram isso com gifs animados nos anos 90, flash nos anos 2000, todos se tornaram anti-cases.
5. Se você é um implementador de websites e ninguém nunca te deu esse conselho, eu faço isso por ti: Tire 2012 para aprender uma nova área, ou design de interfaces ou programação. Você nunca alcançará um cargo/salário de prestígio apenas sabendo codificar html+css. Aprenda javascript pra valer, aprenda wordpress para valer, faça um curso PHP, Python, Django, Java, etc.. e você será um verdadeiro desenvolvedor front-end. Se preferir a carreira de designer + front-end(er), aprenda UX, usabilidade, acessibilidade, gestalt, prototipagem, sketch, testes com usuários e etc. Assim você será responsável pelo projeto e operação do mesmo.
6. Isso foi repetido 54309572309 de vezes ano passado e retrasado e pretendo falar isso a última vez (sei que não será possível, mas a gente tenta né?). Pare um pouco de se preocupar com SEO! Se preocupe menos com as máquinas e comece a se preocupar com os humanos. Se você otimizar ao máximo o seu site para as pessoas, seu site será totalmente otimizado para os robôs do Google. É só isso que você precisa saber.
7. Aprenda a dizer não. Poderia explicar esse desejo, mas o Cristiano já fez isso muito bem

Espero que todos tenham um 2012 maravilhoso, afinal eu terei e não quero comemorá-lo sozinho

Banners são como vitrines de uma loja, convidam pessoas que estão transitando por uma área a entrar e conhecer melhor o produto. Para que esse convite seja eficiente, a vitrine precisa oferecer seus melhores produtos, sempre maquiados em alguma promoção temática que mostre com clareza para o usuário a vantagem de efetuar a compra, tudo isso ganha ainda mais poder de persuasão quando se insere na vitrine o “senso de urgência” onde o visitante tem 24 horas, 3 dias, 1 semana para tirar vantagem da promoção.

Porém, sabemos que uma vitrine não faz a venda, ela apenas transforma um simples expectador em um cliente em potencial. Para que esse processo se consume, é necessário reunir diversos fatores como formas de pagamento, ambiente da loja, atendimento e a experiência do usuário com o produto, isso é o que chamamos de Landing Page.

“A vitrine acaba funcionando como uma sala de visitas. É ela que dirá o que a loja tem a oferecer. A função dela é seduzir, porque a efetivação da compra acontece no interior do estabelecimento”

Wilson de Oliveira Souza http://www.mundocor.com.br/cores/cor_vitrine.asp

Outro trecho que vale a citação é:

A boa combinação da cor e da iluminação nas vitrines pode elevar em até 75% as vendas das lojas de varejo

Wilson de Oliveira Souza http://www.mundocor.com.br/cores/cor_vitrine.asp

Caso uma vitrine não esteja integrada com o interior e comunicação da loja, o mesmo gerará um conflito na experiência do usuário, podendo o fazer dar mais uma andada pelo shopping ou simplesmente não querer mais o produto. Outra forma de espantar clientes é ao entrar o cliente ser bombardeado com um vendedor que não quer resolver o problema ou atender ao desejo do cliente e sim entulha-lo com o máximo de itens possíveis, preocupado apenas com a sua própria meta. O que dizer então de quando você entra numa loja pelo lindo chapéu que você viu no manequim compondo a roupa e ao entrar descobre que aquilo que mais chama a atenção lá fora é puramente acessório e não é vendido pela loja? Como viver com tamanha frustração?

Projetar um banner e não dar atenção à landing page é o mesmo que contar uma história pela metade, não tem fim assim como não há vendas. Projetar a experiência do usuário, é convidá-lo e seduzi-lo até o momento da compra. Alguns estudos ainda mostram que no momento que o usuário aceitou a compra do produto, você aumenta suas chances de oferecer ainda mais produtos ou até mesmo propor uma interação social através de twitter, facebook e outros canais.

Jogar seu usuário para uma landing page genérica ou até mesmo uma página comum do seu site não é economizar dinheiro com a produção de landing pages eficientes e sim gastar dinheiro com banners.

Tive uma missão um pouco tensa que era falar sobre wireframes de projetos sem mostrá-los muito, visto que a maioria dos projetos que trabalhei, as sketchs e etc ficam no próprio escritório por questões de confidencialidade. Tive 1 semana e meia para organizar minha apresentação, mas o pior era saber que para palestrar nesse grande evento, teria que abrir mão de ir na Oktoberfest que já tinha inclusive comprado. Claro que aceitei com o coração partido, mas extremamente feliz.

Para os que me assistiram, sim, eu sou louco, sou um poço de contradições, mas não as aplico nos meus projetos, pois ideias vem para somar e não confrontar. Qualquer aplicativo encarado como projeto traz consigo processos de engenharia de produto que são vitais para um aplicativo sustentável, concreto, estudado e focado. Por sua vez, um aplicativo que é apenas um projeto nada mais é do que um sistema, uma plataforma, palavras tão tristes que parecem que ele só funciona em windows e para Internet Explorer. Daí nasce a ideia de “sexy web projects”.

Sexy Web Projects

Tornar um projeto sexy é tão fácil quanto conhecer a fundo o seu usuário. Vai depender do quão profunda sua pesquisa é, de quantos testes você fez e faz, quão focado na experiencia do usuário você está e o quanto quer se aproximar.

O maior erro dos designers projetistas é se preocupar com a visão e esquecer a função. Representei essa ideia logo no começo da palestra, mostrando erros ridiculamente engraçados de aplicação do design, se é que podemos chamá-lo assim. Isso fica muito claro com um único slide mostrado depois que traz as seguintes frases:

GOAL first, then Behavior

Você não cria um aplicativo para o usuário, você cria pensando em um único objetivo: ROI. Infelizmente a maioria dos profissionais da área esquecem isso por estarem extremamente focados (o que é muito errado) apenas em User-centered Design. Ao menos que seu projeto seja filantrópico, seu GOAL não é agradar o usuário e sim visar o lucro, seja através de comércio, branding ou o que for. Agradar o usuário é apenas um dos meios no qual você utilizará para conseguir isso. Deixa eu representar isso com um exemplo:

Osbar – Um bar/restaurante no Centro do Rio de Janeiro

É fácil procurar no Google algo sobre esse botequim do RJ, Tirei um pequeno trecho para contextualizar melhor meu ponto:

Então vamos falar do OsBaR – Um botequim pequeno (duas portinhas), mas cheio de estilo.
OSBAR tem tudo de bom que um verdadeiro botequim pode oferecer: balcão no bar todo, clientes do lado de fora do bar (por motivos óbvios) em mesinha que são colocadas a partir do cair da tarde, faixa na calçada delimitando onde os clientes podem ficar e onde os pedestres passam (uma vez que além da calçada ficar lotada ainda fica em baixo de um prédio comercial), cerveja gelada, ótimos pesticos, cachaça, vinho (em garrafa pet ou para os mais exigentes garrafas que são guardadas cuidadosamente deitas).

http://guiafemininodebares.blogspot.com/2009/07/osbar-centro-rio-de-janeiro.html

O Osbar é um SUCESSO de público, pois oferece tudo com muita qualidade, mas e a experiência do usuário, que é o nosso tema?

O Osbar é conhecido por maltratar TODOS seus clientes, dando foras o tempo todo, se negando a responder algumas perguntas, se recusando a atender alguns que estão em pé, brigando com quem deixa comida no prato ou faz cara feia ao beber uma das batidas que ele serve, inclusive briga se você demorar muito a escolher algo, um verdadeiro gentleman.

Como então você pode aceitar que um mal atendimento pode gerar uma UX a ponto de tornar esses botequim super famoso? Função e manipulação!

Função e manipulação

Função simples do Osbar: Comida de extrema qualidade e abundância, Bebida extremamente gelada, Preço totalmente acessível.
Manipulação: O dono (osbar) é a alma do bar, quando ele sofreu um pequeno acidente, o seu bar/restaurante simplesmente não abriu. O bar é temático com muitas bebidas e coisas antigas, seu bigode meio anos 70 e suas músicas sempre muito antigas como anos 30, 40, 50 até 70 (rock e até mesmo samba).

Reunindo a obra

Quando você junta qualidade de serviço com um atendimento personalizado, você consegue manipular sua User Experience de forma ímpar, não mais perdendo pontos por ser rabugento e sim virando uma personalidade para os que vão na primeira vez e contam os dias da semana para voltarem lá e engordarem ainda mais. Temos muitos exemplos de personagens rabugentos que são adorados como o Erick da Caverna do Dragão, Seu Madruga e Dona Florinda, Professor Raimundo, papai smurf, Rafiki (babuíno do Rei Leão) e MUITOS, muitos outros…

ser maltratado é sempre ruim, ao menos que você identifique algo caricato nisso, que é o caso do Osbar.

Ok Bernard, já entendi e já anotei que vou visitar o Osbar no RJ, pode voltar ao assunto?

Tá bom! Quando você conhece user goal e o seu business goal, você permite construir interações com o seu usuário a forma de criar novas experiência, e é aí que o seu aplicativo pode se diferenciar e se tornar um querido do usuário.

Você não quer criar um aplicativo para ser commodity, você quer que ele faça parte da vida do usuário

Você tem diversas formas de fazer isso, mas sempre tem que se focar no objetivo do seu negócio, a partir daí você criará a forma que seu produto deseja ser visto e interagir com o seu usuário: Um grande amigo, um guia, um zoador, um velho mal humorado, uma gostosa(o) e por aí vai.

A partir daí, apresentei algumas formas de atingir esse objetivo de forma sexy, surpreendendo o usuário desde sua chegada (blank slate) até suas mensagens de erro, pois é isso que faz a diferença, visto a palestra do Vitor Lourenço do Twitter.

Gostaria de dizer que foi supimpa e que agradeço muito pela experiência de pelo menos fazê-los rir por alguns minutos

Segue a minha palestra no slideshare:

Ontem, dia 20/09 foi lançado o Coding On Weekend, ou se preferirem, COW(vaca em inglês). O www.codingonweekend.com.br será um Workshop que será dado dia 28 e 29 de Outubro (2011) em Belo Horizonte. Serão ao todo 24 vagas, sendo 12 para cada dia. O workshop durará 6 horas, das 10 às 18 e será dado na Agencia Surf.

A ideia nasceu com uma conversa com o grande amigo Giovanni Keppelen, o idealista e organizador do Frontinbh, evento que foi um sucesso esse ano de 2011. Vimos que a palestra sobre “como ser ninja” despertou muita curiosidade e que poderia ser interessante um treinamento avançado e prático sobre as melhores práticas de codificação web.

Lançamos o site e começamos a divulgar o evento e metade da primeira turma já está fechada, essa marca para os primeiros 2 dias nos anima muito e esperamos que as duas turmas bombem

O conteúdo programático está sendo fechado e até semana que vem o mesmo já estará pronto e disponibilizado no site.

O layout veio para reforçar a ideia da Vaquinha (COW) e na mesma hora fui contratar os seviços do Eddie Souza como ilustrador. Depois de algumas conversar, ele fez A VAQUINHA que se tornou nosso mascote do workshop. Daí criamos o conceito de uma paisagem e animamos usando o poderoso CSS animation, além de usarmos uma fonte diferenciada através de font-face. Tudo focado na estrategia do design da divulgação do workshop

Espero que ajudem a divulgar esse workshop, pois já vieram pedidos para outras capitais e se esse for um sucesso ( e esperamos que seja) levaremos para outros lugares