rdbandeira.com » dicas

7 dicas para se desenvolver um website atraente

rdbandeira — Mon, 27 Jul 2009 18:00:25 +0000

Existem algumas pequenas coisas que são tão importantes no desenvolvimento de um website além de usabilidade, pois a internet é uma espaço de interação e não uma rua de mão única. Você deseja proporcionar uma experiência ao seu usuário, ajudá-lo a tomar decisões simples, ser agradável aos olhos e não apenas excessivo e chamativo. Além disso, o seu visitantes dirá muito sobre a sua empresa apenas a partir do modo como ela olha, carrega e funciona, antes que eles sequer leia uma única palavra. A importância da criação de um atraente e amigável site simplesmente não pode ser exagerada nem deixada de lado.

Por razões que são quase demasiadamente numerosas para listar – marketing, vendas, psicologia, confiança, percepção profissional, etc – a forma como o seu site é vista pelos seus usuários deve estar primeiramente, todo em sua cabeça. Os seguintes 7 lembretes importantes irão lhe ajudar a ir na direção certa, mas você é o único que conhece seus clientes (ou deveria) para os melhores pontos de personalização.

1 – Foco do usuário

É importante nunca perder o foco. Você precisa pensar como o seu usuário. Seus clientes precisam sempre encontrar o que eles procuram, seja para pagar uma conta, encontrar um telefone ou o endereço da sua empresa com extrema facilidade. Faça sempre que possível que a vida de seu usuário seja facilitada. Quanto mais complicado e demorado for para encontrar a informação desejada, mais eles abandonarão seu website, e consequentemente não voltarão.

2 – Compreensão do usuário

Entenda a realidade de seu website. Ele é comercial? Então faça com que ele seja visto desta forma. Não há a necessidade de confundir a cabeça de seu usuário/cliente. Ajude-o a encontrar de forma fácil e rápida o que ele deseja. Uma boa idéia é disponibilizar ferramentas como sitemaps ou sistemas de busca.

3 – Velocidade de carregamento

Sim, seu site precisa carregar rápido, então velocidade é importante. Pra isso, basta reduzir o tamanho/qualidade das imagens, não exagerar no tamanho do flash, scripts, etc. Analise cuidadosamente as funcionalidades para que cada uma delas tenha seu valor.

4 – Layouts simples, às vezes, são a melhor opção

O Flash é uma ferramenta poderosíssima, quanto a isso não há discussão, principalmente quando é para demonstrar algo que é difícil colocar em palavras. Mas ele tem um problema tão forte quanto o seu poder, o peso de suas animações! As vezes suas animações se tornam tão pesadas que as pessoas perdem até a paciencia para carregá-las, mesmo sabendo que será repleto de efeitos, movimentos e etc.
Além disso, ele acaba sendo uma grande distração, o que pode tirar (e vai!) o foco do usuário. Dependendo da sua aplicação, a utilização de animações deste nível não são indicadas.

5 – Necessidade do usuário

Defina antes de desenvolver o layout todo o tipo de pessoa que você espera que visitará seu website e considere tudo o que eles desejam e procuram. Depois desta análise, tende desenvolver um layout que abranja o maior número de usuários (definidos no início do projeto) possíveis a encontrar os itens mais importantes em seu website.

6 – Compatibilidade entre navegadores

Que o site deve funcionar em todos os navegadores, isso já não é mais nenhuma novidade. Porém muitos se esquecem de testar as aplicações javscript. Algumas, infelizmente, não funcionam corretamente em todos os navegadores, então nunca se esqueça de testá-las exaustivamente.

7 – Sem surpresas

Use o óbvio, comum e padrão em elementos padrões de um website. Navegação não é algo que necessite ser muito criativo, pois ele precisa ser imediatamente compreendido e utilizável. Constância no mundo ‘www’ é, atualmente, uma coisa boa. Ela facilida a vida das pessoas pois ao acessar, o usuário se sente num “território familiar”.

Portanto, mais do que cair em profunda concepção metafórica ou querer mostrar todos os truqes possíveis, você deve concentrar-se em tornar o seu site uma solução para os seus clientes. Tornar a vida deles mais simples e fácil.

Adaptação do artigo: How to create an attractive user friendly

12 dicas e truques para o Firefox 3!

rdbandeira — Wed, 08 Jul 2009 20:03:50 +0000

O Firefox 3 foi lançado, a fase do deslumbramento pelas novidades já passou a algum tempo mas, entre os entusiastas e fanáticos pelo brownser, o desejo de procurar pelas funções escondidas ou não exploradas no software não acaba nunca! E são esses mesmo que trazem essas dicas (úteis? pra alguns!) pra tornar a navegação mais completa.
Conheça agora algumas funções escondidas e não exploradas (pra alguns isso já nem é mais novidade, mas tenho certeza que pra muitos será!). Entre as dicas compiladas abaixo, é possível fazer com que o navegador abra seu Gmail ao encontrar um link mailto ou encontrar uma brincadeira escondida sobre robôs, entre outros truques.

About:config

Antes de começar, um conselho: uma das maneiras mais fáceis de hackear o Firefox 3 é pelo “about:config”, que permite que o usuário altere muitas configurações e preferências do browser. Para usar o “about:config”, você precisará repetir alguns passos básicos:

Na barra de endereços, digite about:config e aperte Enter;
Uma mensagem que diz “Isto pode anular sua garantia!” aparecerá. Ignore o alerta sem muito sentido (não estamos lidando com um software aberto, afinal?) e clique em Serei cuidadoso, eu prometo!;

Na caixa de filtro, digite o nome da propriedade que quer ajustar. Você verá a função aparecer no grande campo central abaixo. (Caso o nome da mudança seja muito longo, a digitação da sua primeira parte gerará uma lista)
Faça as mudanças como instruído.

Klaatu barada nikto!

Você pode não saber, mas o Firefox tem um mascote – um robô que você encontra como “easter egg” (nome para brincadeiras escondidas) no Firefox 3. Na barra de endereços, digite about:robots e você verá o avatar do robô com sua pele prateada e suas antenas vermelhas.

As frases listadas na brincadeira vêm de livros e filmes da cultura pop que tratam de robôs, como “Blade Runner”, “Eu, robô” e “O guia do mochileiro das galáxias”.
Caso preste atenção ao título da página, verá que se trata de uma frase sem muito sentido em português ou inglês, certo? Mais ou menos. A frase foi usada por Helen Benson no clássico de ficção científica “O dia em que a terra parou”, em ordem para que o robô Gort não destrua a Terra.

Firefox 3 integrado ao Yahoo Mail

Sabe quando você clica em um endereço de e-mail na web e imediatamente seu Outlook abre uma tela criando uma nova mensagem para aquele endereço? Com o Firefox você pode fazer o mesmo com o seu webmail.
O navegador já traz integração nativa ao Yahoo Mail – se você souber procurar. Também funciona com o Gmail, extra-oficialmente. Siga os passos:

Selecionar Ferramentas, depois Opções e clicar no ícone Programas
Clicar em “mailto” e selecionar Usar o Yahoo! Mail
Clicar em OK

Firefox 3 integrado ao Gmail na versão 3.5 já possui como opção

O Gmail não aparece na lista do “mailto”, mas você pode usar um truque para configurá-lo. Siga os passos:

Na barra de endereço, digite about:config e aperte Enter e ignore o alerta de garantia;
Na caixa de filtro, digite gecko.handlerservice
Entre as opções da lista, selecione: gecko.handlerServiceAllowRegisterFromDifferentHost (isso mudará o valor de falso para verdadeiro)
Volte à barra de endereços, copie e cole o código abaixo e aperte Enter: javascript:window.navigator.registerProtocolHandler(“mailto”, “https://mail.google.com/mail/?extsrc=mailto&url=%s”,”GMail”)
Abaixo da barra de endereço aparecerá uma mensagem perguntando se você quer adicionar o Gmail como aplicação para o “mailto”. Clique em Adicionar Programa
Repita o procedimento do item anterior, selecionando Usar Gmail.

Usar o botão de identificação de sites para baixar gráficos e mídia

Uma das funções mais legais do Firefox 3 é o botão de identificação do site, à esquerda do link na página da barra de endereços. Além das informações sobre o site, este botão traz alguns outros truques interessantes:

Clique nele e em seguida opte por Mais Informações (nesta tela você verá uma série de botões na parte superior)
Clique no botão de Mídia da Página de Informações.

Ao fazer isso, será exibida uma lista com todos os gráficos da página. É possível ver uma prévia de cada uma delas e salvá-las individualmente (com o botão Salvar Como) ou em grupo, usando a tecla Ctrl e selecionando Salvar Como. Para baixar todos, aperte Ctrl+A e selecione Salvar Como.
Uma das extensões populares da versão anterior do Firefox era o DownloadThemAll, que permitia baixar todos os gráficos da página. Com o Firefox 3, isso pode ser feito sem add-on.

Acessar detalhes de uma página

Se você está no ramo da criação de sites, há muitas informações úteis que você pode saber sobre uma página – a do seu concorrente, por exemplo – e o Firefox 3 dá acesso a elas. Informações como as metatags usadas, quando a página foi alterada ou o tamanho da página (em kilobytes) são dados úteis que podem ser encontrados na aba de informações na aba Geral.

Diminua o botão Voltar

O botão de Voltar do Firefox 3 parece uma flecha “bombada”. Se isso te incomoda, você pode reduzi-la ao tamanho normal. Veja como:

Clique em um espaço em branco com o botão direito, selecione Personalizar
Clique na caixinha Ícones pequenos

O botão Voltar ficará menor, mas todos os demais também.

Encontre todas as suas senhas

Se você é como a maior parte das pessoas, você tem diversas senhas associadas a sites diferentes. O Firefox lembra suas senhas, portanto você será autenticado automaticamente nos sites. Mas e se você precisar se logar em outro PC? Com o Firefox 3 você pode recuperar suas senhas e usuários.

Selecione Ferramentas e clique em Opções;
Depois clique no ícone de Segurança;
Na seção de Senha, clique em Senhas Memorizadas. Aparecerá uma lista com sites e nomes de usuário lembrados pelo navegador;
Clique em Exibir senhas (uma tela de alerta questionará se você quer mesmo exibi-las);
Clique em Sim e você verá a lista de URLs com nomes de usuário e senhas ao lado.

Mude o número máximo de resultados da Barra de Sensacional

A nova barra de endereços do Firefox – que de tão inovadora ganhou da própria Mozilla o modesto apelido de Barra Sensacional – também pode ser personalizada. Antes, algumas informações sobre ela: nas outras versões do Firefox, conforme você digitava um texto, uma lista de URLs começadas da mesma forma aparecia à medida que a digitação progredia. Por exemplo, se você digitasse um “c”, todos os sites começados em “c” eram listados e daí em diante.
Mas em vez de exigir que o usuário lembre a URL da página que visitou, a Barra Sensacional vasculha o endereço, o título, as tags e o conteúdo das páginas atrás de palavras-chave digitadas pelo usuário. No modo padrão, a barra traz até 12 resultados possíveis, mas você pode alterar isso.

Digite about:config na barra de endereço e clique em Serei cuidadoso, eu prometo!;
Copie e cole o texto a seguir no campo de filtro: browser.urlbar.maxRichResults;
Dê um clique duplo no resultado e digite o número de resultados que você deseja visualizar.

Retirar os favoritos da Barra Sensacional

Se por alguma razão você não quer que os seus favoritos apareçam na Barra Sensacional, há uma forma simples de bani-los. Baixe e instale o add-on Hide Unvisited 3 e somente páginas visitadas recentemente aparecerão.
Lembre-se que se você visitou favoritos recentemente, eles entrarão na lista. Se você preferir fazer o procedimento sem a ajuda de add-ons, siga as instruções:

Digite about:config na barra de endereços;
Copie e cole o texto a seguir: browser.urlbar.matchOnlyTyped;
Clique duas vezes no resultado para mudar o valor de falso para verdadeiro
Limpe seu histórico.

A partir de então, só os sites vistos recentemente aparecerão, os favoritos não.

Matando (mais ou menos) a “barra sensacional”

Se você é o tipo de pessoa retrô, é fácil matar a “barra sensacional”, nova barra de endereços do Firefox, o que fará com que ela pareça e tenha as mesmas funções do antigo Firefox. O add-on oldbar fará com que a nova ferramenta pareça com a do Firefox 2.
A mudança, ale avisar, é apenas estética, já que, nos bastidores, o Firefox 3 continuará aplicando um algoritmo para determinar quais endereços serão reproduzidos, apenas tirando os detalhes.

Force antigas extensões a trabalhar com o Firefox 3

Ao ser instalado, o Firefox 3 checa se antigas extensões foram atualizadas para a nova versão do navegador. Se elas ainda não forem compatíveis, são desabilitadas. Se você gosta de viver perigosamente, pode mudar uma série de configurações para forçar o Firefox a usar as antigas extensões.
AVISO: Estas alterações podem causar problemas de compatibilidade e outras questões! Cuidado!

Vá ao about:config e mude ambos os parâmetros para falso clicando duas vezes sobre eles: extensions.checkCompatibility e extensions.checkUpdateSecurity

Se você não quer mexer no “about:config mas ainda assim que forçar antigas extensões a funcionar no Firefox 3, instale a extensão Nightly Tester Tools.

Altere e nova função Zoom do Firefox 3

O Firefox 3 conta com algumas novas funções de zoom muito interessantes, que ampliam tanto imagens como textos. Mas se isto não é tudo que você quer fazer, ou você não gosta e de alguma função, elas podem ser hackeadas.
Você pode aproximar ou afastar de páginas no Firefox usando os comandos Crtl+ ou Ctrl-, ou selecionando o menu Zoom em View. Quando você dá um zoom em uma página específica, a próximo vez que você voltar ao domínio, o Firefox 3 se lembrará da
sua configuração.
Você pode preferir, no entanto, que o navegador sempre reproduza uma página com zoom normal, independente de como ela foi reproduzida na última vez. Para tanto, mude a função browser.zoom.siteSpecific clicando duas vezes sobre ela dentro do about:config.

DICAS

O Firefox 3 traz novos recursos interessantes na Biblioteca de Favoritos, no uso de tags e nas pastas na lista de favoritos. Confira com acessar:

Biblioteca de favoritos: pode ser acessada via menu Favoritos, clicando em Organize seus Favoritos ou pressionando Ctrl-Shift-B.
Uso de Tags (marcadores): eles facilitam a organização dos favoritos por categorias. Elas podem ser acrescentadas com um
clique duplo na estrela que aparece ao lado do endereço do site, na barra de endereços. Uma vez marcado como uma tag, o site pode ser facilmente localizado pela “barra sensacional” digitando o nome da tag na barra de endereços, todos os sits relacionados serão mostrados
Pastas inteligentes: elas agregam novos sites relacionados ao termo que define a pasta automaticamente. Por exemplo, se você criar uma nova pasta inteligente relacionada ao termo “café”, na próxima vez que você visitar um site que tenha a palavra, o link será automaticamente salvo na pasta Café. Para criar, siga os passos a seguir:
1. Na Biblioteca de Favoritos, faça uma busca por um termo ou por uma combinação de termos;
2. Aperte o botão Salvar e dê um nome à sua pasta inteligente
3. A nova pasta aparecerá no menu Favoritos

Bom galerinha, é isso. Muitas dicas e truques interessantes nessa lista e agradeço ao pessoal dedicado a fazer estar descobertas. Gostaria de poder citar o autor desta lista mas infelizmente não sei pois era uma listagem antiga que estava nos meus arquivos do gdocs. Quem souber quem foram os criadores desta lista, por favor, entre em contato comigo para que eu possa estar dando os devidos créditos e claro, se souber de mais dicas legais para incrementar este post, por favor, envie um comentário ou um email!

40 regras para se criar um excelente logotipo

rdbandeira — Thu, 20 Nov 2008 11:59:20 +0000

Estava navegando na internet e encontrei 45 dicas de como se desenvolvar uma excelente logo, nao pude deixar de postar aqui. Traduzi e adaptei a lista de ‘regras’, excluí algumas também. Abaixo tá a listinha e acreditem, são excelentes dicas para seguir no desenvolvimento não só de logotipo, mas também de newsletters, websites, cartazes, enfim, em várias situações. Basta apenas adaptá-las para cada situação.

Não use mais do que 3 cores;
Livre-se de tudo que não é necessário;
O tipo (fonte) deve ser fácil de ler até mesmo para a sua avó;
Ele deve ser de fácilmente reconhecido;
Crie uma unica forma para o design do logotipo;
Ignorar completamente o que pessoas leigas (pais, cônjuge, outros) pensam sobre o desenho;
Confirme a opiniao de mais de 3 pessoas sobre o visual da logo;
Não combine elementos de logotipos populares;
Não use clipart sob quaisquer circunstância;
Ele deve ficar bem em preto e branco;
Certifique-se de que ele é reconhecível quando invertido e redimencionado;
Se o logotipo contém um ícone ou símbolo, assim como textos, cada um deve ter seu lugar para que eles se completem;
Evite as tendências recentes utilizadas no design das logos. Em vez disso, faça com que eles tenham um olhar atemporal;
Não utilize efeitos especiais (incluindo, mas não limitados a: gradientes, sombras, reflexos, outros).
Ajuste o logotipo em um formato quadrado, se possível;
Evite excesso de detalhes;
Considere os diferentes lugares e várias maneiras que o logotipo será apresentado;
Expresse sentimentos de ousadia e confiança, nunca fraqueza e aborrecimento;
Saiba que você não irá criar um logotipo perfeito;
O logotipo deve ter alguma ligação com aquilo que ela está representando;
Você deve surpreender o cliente com a apresentação;
Não use mais de dois tipos (fontes) diferentes;
Cada um dos elementos deve estar alinhado (esquerda, direira, centro, superior ou inferior);
O logotipo deve parecer sólido;
Saiba quem estará olhando para o logotipo antes de você iniciar o desenvolvimento dela;
Sempre escolha função ao invés de inovação;
Se a marca tiver um nome memorável, ela deve ser o logotipo;
Ele deve ser reconhecido quando espelhado;
Mesmo as grandes empresas precisam de pequenas logos;
Todos devem gostar do design da logo, não apenas a empresa que irá utilizá-la;
Crie variaçoes. Quanto mais variações, mais chances você terá de encontrar o design certo;
A logo deve ter um aspecto consistente em diferentes plataformas;
Ela deve ser fácil de se descrever;
Não use taglines na logo;
Faça sketches das suas idéia usando papel e lápis antes de trabalhar num computador;
Mantenha o design da logo o mais simples possível;
Não use nenhum “swoosh” ou “globo” como símbolo;
Ele deve ser visualmente equilibrado;
Evite brilhos, neons, cores escuras ou que causem aborrecimento;
O logotipo não deve quebrar nenhuma das regras citadas acima.

Quem tiver mais dicas, deixe uma mensagem para que eu vá adicionando na listinha. =D