Ralph Almeida

Design, UX, SEO, SEM


Desenvolver um site não é uma tarefa fácil, embora algumas pessoas achem o contrário. Óbvio que cada site tem uma complexidade e um objetivo diferente. Mas uma coisa eles tem que ter em comum: a capacidade de atrair o cliente para o objetivo principal, e isso deve ser feito observando o rastreamento padrão do olho humano nas páginas de internet.

Não basta apenas ter um design legal e bonito, o site tem que criar uma excelente experiência para o usuário, baseado em como eles leem as informações da página.

O padrão de visão é baseado no formato das letras E/F, onde o usuário lê horizontalmente e vai descendo e lendo horizontalmente de novo. De acordo com esse infográfico, 80% dos usuários gastam 80% do tempo vendo a informação “above the fold”, ou seja, a primeira parte do site que não requer scroll, e 69% do tempo eles gastam vendo a metade esquerda de uma página.

Read More

Confiram esse ótimo infográfico criado pelo site Quicksprout, que dá diversas dicas de como aumentar o engajamento dos usuários no Instagram.

O Instagram tem hoje mais de 200 milhões de usuários, e tem 15x mais engajamento dos usuários do que o Facebook, e 40x mais que o Twitter, sendo a rede social de mais rápido crescimento.

E as empresas foram nessa onda, sendo a rede social mais investida pelas marcas.

Abaixo algumas das dicas

 

- Imagens com faces geram 32% mais comentários e 38% mais likes

- O engajamento aumenta até 30% as fotos de consumidores reais usando produtos das empresas

- Imagens mais claras geram 24% mais likes do que imagens escuras

Read More

Estava pesquisando sobre sites para fazer wireframes e encontrei um site muito bom, o UXPin.

As funcionalidades dele são ótimas, super fácil de mexer e criar seus wireframes. Uma ótima ferramenta para UX designers. Fiquei mexendo uns dias nele pra testar e meu período trial já expirou, e como encontrei um outro site que me atendeu melhor, paguei o outro. Em breve falo dele aqui.

block-helps-you-draw

E esse site UXPin me ofereceu por e-mail 6 livros de Design de UX para download grátis. Então resolvi compartilhar com vocês esses livros, já que são de graça mesmo :D

 

webdesign_trends2013_uxpin

Web Design Book of Trends 2013-2014

uxpin_the_guide_to_wireframing

The Guide to Wireframing: For Designers, PMs, Engineers and Anyone Who Touches Product

uxpin_mobile_ui_design_patterns_2014

Mobile UI Design Patterns 2014: A Deeper Look At The Hottest Apps Today

uxpin_mobile_book_of_trends_2014

Mobile Book of Trends 2014

ux-design-for-startups-marcin-treder

UX Design for Startups

product_managers_and_ux

The User Experience Guide Book for Product Managers

Vale lembrar que todos os 6 livros de Design e UX estão em inglês e no formato PDF.

Read More

Vai aí uma dica bem útil pra quem trabalha com desenvolvimento de websites e aplicações web: reload automático dos arquivos CSS.

Pra quem trabalha com dois monitores, que é meu caso, é melhor ainda. Em um monitor eu deixo o site aberto e no outro meu editor CSS. Assim quando eu altero uma informação, o site ao lado já atualiza automagicamente, sem precisar ficar dando F5 a cada modificação de cores, fontes, margens, etc.

Os passos são o seguinte;

1) Faça o download desse arquivo JS css_auto-reload.js e inclua no cabeçalho de seu site:

<script type=”text/javascript” src=”css_auto-reload.js”></script>

2) Chame a função na tag <BODY> de seu site:
<body onLoad=”javascript:(document.styleSheets.start_autoreload(2000))”>

Nesse exemplo o reload acontecerá a cada 2 segundos. Para modificar esse tempo, basta mudar o valor que no caso está em 2000 milissegundos.
Pronto, agora você pode trabalhar com mais rapidez e eficiência =)
Fonte: nv.github.com/css_auto-reload
Read More

Um problema que eu sempre encontrava ao desenhar retângulos no Photoshop era as malditas bordas embaçadas que apareciam quando os pixels não se encaixavam corretamente com a grid de pixels.

Aí eu sempre dava um mega zoom na área embaçada e ajustava a largura e altura corretamente até conseguir eliminar esse efeito.

Até que encontrei hoje um post super interessante nesse site (Bjango) e descobri a salvação para esse tipo de problema.

Read More

Navegando na internet, encontrei um site de um designer, russo se eu nao me engano, onde ele mostrava as imagens de seu portfólio com um lindo efeito de transição de imagens, que eu achava ser em flash.
Curioso ao ver que não era Flash, entrei no código fonte e encontrei a mágica: jQuery!

jQuery é uma biblioteca feita em JavaScript que é o bambambam dos webdesigners atualmente. Possui excelentes recursos que deixam seu site super atraente e sem deixar pesado como sites em Flash.

O nome do plugin é Coin Slider, e eu achei nesse site aqui, em inglês. Ótimo site por sinal, com vários post interessantes.

E como esse plugin foi útil pra mim, resolvi postar aqui no blog, que aliás está precisando de atualizações!

Então vamos ao que interessa.

Read More

Busca em tempo real do Google


Posted By on ago 27, 2010

Acabei de ver que o Google lançou um serviço de busca em tempo real. Não sei quando ele lançou, mas descobri hoje =)

Nesse vídeo explicativo que eles lançaram no YouTube você vê com detalhes como funciona:

Você faz a busca e o Google vai atualizando automaticamente de acordo com novos resultados, buscando de diversas fontes de informação, como Twitter, Buzz, WordPress, Facebook, Blogspot e vários outros.

Após realizada a busca, dá pra filtrar pelo horário da notícia, através de um gráfico no topo da página.

Serviço interessante e pelo visto, algo que os demais buscadores vão ter que incorporar em seus resultados daqui pra frente.

Link pra página do Google Realtime: www.google.com/realtime

Read More