Arquivo da Categoria ‘Dicas’

Flash Catalyst: Facilitando o design de sites em Flash

23-02-2010

Em tempos de SEO e HTML 5, muitos declaram que o Flash está com os dias contados. De fato, sites 100% em Flash sairam de moda há algum tempo, e são tendência ultrapassada, graças às novas exigências de marketing digital da web 2.0, que praticamente ordenam que o site seja leve, acessível e, acima de tudo, legível pelos mecanismos de pesquisa.

O HTML 5, conforme comentamos em posts anteriores, promete ser um punhal no coração do Flash, já que grandes sites de vídeos como o Youtube provavelmente abandonarão a ferramenta graças aos novos recursos de inclusão de vídeos direto no código.

Apesar de tudo, quem pensa que a Adobe desistirá fácil da fascinante tecnologia Flash está enganado. Talvez, apenas talvez, ela esteja apostando suas fichas em outros meios, como games e interfaces offline… ou será que ela investiria tempo, recursos e esforços em uma belezinha muito atraente chamada Flash Catalyst se não fosse por um bom motivo?

Conceituando a novidade, trata-se de um novo software voltado especialmente aos designers que não programam. Simples e objetivo. O Flash Catalyst permite criar e implantar interfaces com os mais sofisticados recursos de interação, coisa que só quem programa muito bem a linguagem Actionscript consegue executar. Pois bem, o Catalyst chega para os designers  que não investiram tempo em programação AS mas que desejam criar projetos interativos com animações e ações sofisticadas, sem gastar seus dedinhos digitando e corrigindo código. Lindo! :)

É uma excelente aposta da Adobe, que espera alcançar agora um público específico, e reconquistar possíveis “desertores” do Flash.

Confira o vídeo com as funcionalidades, recursos e benefícios do Catalyst na página do programa no Adobe Labs. É possível baixar uma versão beta para testes, e participar da discussão sobre o programa nos fóruns :)

Opiniões sobre o Flash Catalyst? Comente!

Até o próximo post!

Construindo páginas de entrada (landing pages) para o Google AdWords

07-01-2010

Todos sabemos a importância de construir boas páginas de entrada em um site, e isso já é consenso mundial entre profissionais desde que a web é web. Entretanto, quando o assunto envolve cliques do AdWords, essa importância tende a ganhar um peso ainda maior. Afinal, há dinheiro envolvido, e as conversão do clique em venda depende unicamente da perfeita integração entre o seu anúncio e o que o usuário irá encontrar se decidir clicar nele.

Preparamos algumas dicas para auxiliar o designer a otimizar suas páginas de entrada para os anúncios do AdWords, ou ainda ajudar o dono do site a identificar problemas no design (e descobrir porque as vendas não estão acontecendo…). Lembramos, aqui, que “página de entrada” (landing page) é onde o clique no anúncio nos leva, podendo ser a página inicial do site ou outra preparada exclusivamente para a campanha.

1. Aprenda com quem entende.

Otimização de páginas de entrada é um ramo que possui um alcance muito maior do que você possa imaginar. Existem empresas especializadas apenas em otimizar páginas de entrada, e centenas de artigos e livros que tratam do tema. Portanto, uma boa dica é conferir o que as “vozes da sabedoria” tem a dizer sobre o assunto.

2. Observe sua concorrência.

Observar seus concorrentes diretos pode ser uma boa pista para determinar qual a melhor forma de abordagem para a sua página de entrada.

3. Faça testes.

É impossível algo dar 100% sem testes (claro, sempre há a sorte…). Testar veiculação de mídias na web é absurdamente barato, e você deve se utilizar dessa vantagem e outros recursos para verificar qual o melhor caminho a ser seguido. Nesta parte, sugerimos a boa e velha Ferramenta de Otimização de Sites do Google. Lá, você poderá testar diversas versões de diferentes páginas de entrada e ver qual delas é mais eficiente.

4. Construa designs para o comportamento da maioria dos usuários.

Tenha em mente que a maior parte das pessoas não lê sites, a não ser em casos específicos (estudo e pesquisa). Um comprador, por exemplo, no máximo “escaneia” a página em busca do que deseja; se houver algo similar ao que ele busca, então ele dedicará um pouco mais de atenção ao restante do conteúdo. Construa páginas de entrada que cativem o seu público-alvo ainda nos primeiros segundos. Montes de textos não vão ajudar muito nesse caso.

5.  Foque no cabeçalho, pois é lá que as atenções se concentram.

O cabeçalho de uma página é o seu local mais chamativo. Utilize-o como ponto-chave para as suas informações mais importantes, e foque nele para conquistar as suas conversões.

6. Venda o que o seu anúncio promete.

Uma receita para o fracasso é criar anúncios com keywords que nada tenham a ver com o seu site. Seja objetivo. Trazer visitantes para o seu site, quando eles na verdade procuram por algo totalmente diferente, será decepcionante para você, e não tanto para eles. Afinal, em alguns segundos eles esquecerão o que viram, e você terá perdido o dinheiro do clique. Anúncios objetivos e páginas de entrada de acordo garantem o clique e a conversão do público-alvo de interesse.

Por enquanto é isso! Esperamos que aproveitem estas dicas básicas. Apreciamos comentários, também ;)

Até o próximo post!

Botões lindos com CSS3 – Adeus às imagens!

08-12-2009

Conforme já comentamos em posts anteriores aqui do blog, o CSS3 é uma maravilha que veio para facilitar nossa vida e tornar a formatação visual de elementos algo simples, rápido, acessível e otimizável.

Hoje vamos mostrar a vocês como criar botões de cair o queixo apenas utilizando algumas linhas simples de código. Acredite, não são imagens, é puro CSS! Alguns browsers, no entanto, podem não suportar o CSS3 e se você estiver usando uma versão de navegador mais antiga, provavelmente não conseguirá ver o que essa maravilha é capaz de fazer. Um exemplo testado aqui na Agência foi o Firefox 3.0 para Mac, que não exibiu os efeitos de sombra; já na versão 3.5, ficou perfeito.

O CSS3 conta com alguns recursos fantásticos como a possibilidade de aplicar sombra aos elementos (Box-Shadow e Text Shadow), novas opções de aplicação de cores e a possibilidade de criar boxes com bordas arredondadas. Para este exemplo, utilizaremos recursos do CSS3 e HTML 5.

Podemos criar botões facilmente com a tag button. Assim, para incluir um botão em nossa página, bastaríamos escrever um código do tipo:

<button type="submit" class="btsombra">Ver mais detalhes</button>

Sem formatação, ele aparece assim no Safari do Mac OS:

1. Utilizando o recurso Box Shadow e RGBa para ajustar a tonalidade da sombra:

O modelo de cor RGBa é suportado por browsers novíssimos, e você pode aplicá-lo juntamente com a propriedade Box Shadow para definir a cor da sombra de seus botões e outros elementos. Observe os exemplos abaixo:

Para definirmos uma sombra escura básica para os nossos botões, o exemplo de código a ser aplicado na classe seria:

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

Os valores dentro dos parêntesis podem ser alterados para números entre 0 a 255 na escala RGB, sendo os três primeiros referentes às tonalidades da sombra e o último à sua opacidade (zero é totalmente transparente, “1″ totalmente opaco); para a sombra ciano, colocamos um valor de 0 para o primeiro campo e 255 para as demais cores, mais o valor “1″ para a opacidade:

-moz-box-shadow: 0 1px 3px rgba(0,255,255,1);
-webkit-box-shadow: 0 1px 3px rgba(0,255,255,1);

Apenas uma observação: os parâmetros de CSS “-moz” aplicam os estilos ao Mozilla Firefox e “-webkit” ao Safari.

Para aplicarmos sombra ao texto adicionamos a seguinte linha de código aos estilos:

text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

2. Bordas arredondadas!

Chega de imagens, recortes complicados, planos de fundo! Utilize o recurso Border-Radius para arredondar os vértices de seus botões e criar efeitos surpreendentes.

O código usado para o botão acima foi:

-moz-border-radius: 25px;
-webkit-border-radius: 25px;

Outros exemplos:

Você ainda pode usar o CSS para aplicar efeitos de roll over de cursor sobre os botões.

Esperamos que tenham gostado! Confira aqui os botões funcionando e faça o download dos exemplos aqui.

As dicas são do site Zurb.

Obs#2: O Internet Explorer 8 não suporta o recurso de bordas arredondadas.

Um super abraço e até o próximo post :)

Design de interação – Ferramentas úteis

03-12-2009

Nós, desenvolvedores de interfaces para a web e desktop, sabemos o quanto é importante para o sucesso do projeto que tudo esteja funcionando de acordo. Mais do que isso, definir bons padrões para a experiência do usuário, seja qual for o seu nível de conhecimento, não é apenas legal mas uma responsabilidade que devemos ter com nosso trabalho e nossas funções.

Mesmo os “projetistas” mas experientes podem encontrar certas dificuldades em criar o escopo da estrutura de um projeto digital, dependendo de sua amplitude. Entretanto, para ajudar a todos, existem ferramentas ou uilitários bacanas que você pode usar para organizar e prever disposições de elementos que farão toda a diferença em um projeto.

Conheça as dicas de utilitários do UX Booth, utilizadas pelos maiores nomes no ramo de interação digital, para os profissionais interessados em otimizar seu rendimento com a estruturação do design de seus projetos. Aproveite bem ;-)

1. OmniGraffle

Aplicativo para Mac OS que permite focar exclusivamente nos processos de interação por trás do design do site, e que permite o envolvimento de toda a equipe. Ele contém uma série de funcionalidades, como ferramentas de desenho vetorial para esquematização dos gráficos, funcionalidades ‘click-to-reveal’ (clicar para revelar conteúdo) e esboços. Muito legal! :D Quem adquire o programa ganha de brinde uma série de UI Components adicionais, como botões, stickers e outros. Veja aqui.

2. Balsamiq Mockups

Este incrível aplicativo do Adobe Air torna o ato criar wireframes divertido, fácil e muito mais compreensível. Sua biblioteca trás inúmeros elementos já prontos e alguns dos itens mais utilizados nas mídias e interfaces da atualidade. O site contém um vídeo demonstrativo e no blog oficial deles você pode ver do que a ferramenta é capaz a partir de esquemas criados pelos próprios usuários do programa. Confira as reproduções em wireframe da interface do Google Wave e do Facebook, imperdíveis!

3. Adobe InDesign

Calma, nem só de livros vive o InDesign. A coleção de templates EightShapes Unify e mais algumas bibliotecas permitem a construção de wireframes interativos pra lá de eficientes. O bom é que a maioria dos profissionais de desenvolvimento estão familiarizados com as ferramentas da Adobe, então manusear o InDesign, mesmo os que nunca o fizeram, é quase que intuitivo.

Confira a biblioteca EightShapes e utilize o InDesign muito além da mera editoração gráfica!

4. Bloco de Anotações

Pensou que esqueceríamos dele? Nada como um bom bloco de anotações para aquelas longas reuniões com o cliente. Apesar de a fonte original ter sugerido o bom e velho Moleskine, sabemos que o seu inseparável (e organizado) caderno pode ser o seu melhor amigo quando o seu latop estiver indisponível ou para aquelas conversas bate-e-volta com a equipe de desenvolvimento. Não o subestime!

Esperamos que tenham gostado das dicas. Um grande abraço e até o próximo post! ;-)

Google Wave – Seis dicas para usá-lo bem em seu projeto

30-11-2009

O Google Wave é, hoje, uma das grandes promessas da Google para um futuro próximo. Os poucos que tiveram a oportunidade de testá-lo já tiveram uma idéia do que será possível fazer em breve, quando ela for finalmente liberada ao público com suas funções definitivas e permitindo a entrada de todos os que desejarem.

Google Wave para gerenciamento de projetos: um sonho virando realidade

Google Wave para gerenciamento de projetos: um sonho virando realidade

Embora os poucos desbravadores da ferramenta ainda estejam engatinhando com as possibilidades, o certo é que já é possível começar a controlar projetos e compartilhar dados entre pessoas e mesmo com o cliente, unindo os vários programas para fazer isso em um só (chat, ferramenta de gerenciamento, skype, etc). E várias pessoas já estão fazendo isso!

O blog Web Worker Daily criou um pequeno “manual de uso” do Wave para gerenciamento de projetos e relacionamento com o cliente. O autor aceitou fazer a experiência com um de seus clientes e, a partir dos resultados positivos, elaborou alguns tópicos legais para ajudá-lo com a sua primeira experiência profissional no Google Wave. Vamos a elas? :)

1. Vá com calma, no começo.

Como dissemos antes, o Wave ainda está em fase “beta beta”, ou seja, é um preview com acesso muito limitado de usuários, justamente por estar em fase de testes. Os primeiros usuários são como “cobaias” do sistema. Assim, como nós da Agência já pudemos ver, o Wave ainda é lento e cheio de pequenos bugs, portanto, ainda não se pode esperar excelência em sua performance e confiar 100% nele para tudo.

2. Utilize o Wave para troca de idéias em tempo real e para manter um histórico dos seus “debates”.

A proposta do Wave é unir o e-mail e um mensageiro eletrônico comum (como o MSN, por exemplo), e manter ao seu alcance duas poderosas ferramentas de comunicação que podem ajudá-lo a organizar aquela “troca de figurinhas” com o seu cliente. Organize seus pedidos e idéias, guarde as mensagens, inclua anexos e converse em tempo real com seus contatos. Sua produtividade vai melhorar!

3. Controle suas Waves, para o bem da sua cabeça!

No começo é assim mesmo: Waves para todo o lado. Entretanto, para facilitar sua vida, crie uma Wave para cada novo projeto que estiver gerenciando. Será muito mais fácil encontrar solicitações e rever assuntos anteriormente tratados.

4. Organize seu conteúdo com pastas e tags.

A interface do Wave assusta um pouco, e é difícil se acostumar com ela. Uma dica para se familiarizar, e até se acostumar, é usar pastas e tags para marcar seus conteúdos importantes.

5. Na fase beta, faça escolhas entre anexos e edição on line de documentos.

O Wave combina muito bem seu e-mail com um processador de textos. A possibilidade de enviar anexos também o torna a oitava maravilha dos últimos anos no meio digital. No entanto, a fase beta ainda possui uma capacidade precária no trabalho com certos tipos de documentos. Testar quais extensões são viáveis e usar as ferramentas do Wave em conjunto é questão de bom senso e deve ser analisada criteriosamente em cada caso.

6. Tenha um plano B.

Não podemos esperar que uma ferramenta beta tenha um desempenho excepcional 100% do tempo. Portanto, se algo der errado, conte com seu plano B para colocar tudo em ordem novamente.

Esperamos ansiosamente pelos novos aplicativos do Wave e uma melhoria ainda mais significativa em sua performance, interface e possibilidades. Se tudo correr como se espera, em breve os e-mails se tornarão coisa do passado, assim como os discos de vinil.

Um grande abraço e até o próximo post! :)