Um guia completo sobre responsive design em um único link

Responsive Design

Os caras do uGurus criaram um repositório online sobre Responsive Design: definições, conceitos, exemplos, tutoriais, ferramentas, frameworks, processos e tudo o que você precisa saber para começar de vez a desenvolver sites responsivos. Vale a visita e o bookmark.

Link: Responsive Design from uGurus

Luminosidade Responsiva

Luminosidade responsiva

Layout responsivo, tipografia responsiva. Que tal luminosidade responsiva?

CSS Level 4 Luminosity permite que o HTML “perceba” a luminosidade do ambiente (usando os sensores do hardware) para adaptar afetar o CSS da página (mexendo na cor, luminosidade, contraste, tamanho de fontes etc.). Compatível com versões mais recentes de Chrome e Firefox.

O código está disponível em codepen.io/girliemac/pen/pvmBs

O divórcio entre o PSD e o HTML

Exportar para web

Alguns estão chamando de “morte”, mas preferi chamar de “divórcio”. Eles continuam vivos, fortes e saudáveis. Só não moram mais juntos. O caminho PSD to HTML que durante anos foi o mais certeiro (às vezes único) no processo de design para web, parece estar com seus dias contados.

Primeiro você desenha uma página no Photoshop. Layout impecável, representando exatamente como é que você quer que a página se comporte quando for aberta no browser. Depois um programador front-end transforma aquele arquivo PSD em HTML, CSS e Javascript. Os assets são recortados, um a um, exportados do Photoshop, importados no código. Novas ferramentas e plugins estão sendo criados para tentar facilitar esse processo, e tem até algumas empresas no oriente que cobram cerca de 100 dólares para fazer esse processo para você.

Continue lendo »

Responsive Design: a impressora também é um dispositivo

Responsive Design - dispositivos

Belo lembrete do pessoal do RD.is: quando falamos em Design Responsivo nós costumamos pensar muito nos novos dispositivos (como smartphones, tablets e TVs com navegadores web), mas esquecemos de uma velha companheira que está com a gente há vários anos – a impressora.

Afinal, quando você está pensando nas variações de como um determinado layout deve se comportar em diferentes resoluções de tela, é preciso ser cuidadoso para que a diagramação e apresentação dos elementos da página sejam otimizados para o contexto em que ela está sendo visualizada: localização geográfica, hora do dia, tipo de dispositivo, ergonomia, distância entre o usuário e a tela, contraste etc. Mas muitas vezes esquecemos de dar atenção a como  aquela mesma página será mostrada quando o usuário decide “abri-la” em uma folha sulfite.

Impressora é um dispositivo

É claro que para grande parte dos sites, a versão de impressão é bastante parecida com a versão que o usuário vê em computadores desktop ou laptop – até porque coincidentemente a proporção das fontes funciona de forma similar nos dois casos. Mas existem sites em que é possível otimizar a versão para impressão para o contexto em que o usuário irá consumi-la.

Continue lendo »

Desenvolvedores front-end são designers

ux_idea

Do sempre visionário Brad Frost, programador front-end:

“Mesmo quando meu cargo era nomeado ‘web developer’ ou ‘open standards developer’, eu costumava me nomear ‘front-end designer’. Agora eu simplesmente me nomeio ‘web designer’. Algumas vezes eu até prefiro deixar mais amplo e dizer simplesmente que ‘eu faço websites’.

Eu especificamente evito chamar meu cargo de desenvolvedor porque as pessoas acabam assumindo que eu posso programar em Ruby ou normalizar alguns bancos de dados. Eu nunca tive nenhuma aula de ciência da computação. (…) Quase todo trabalho de programação que eu fiz era para manipular elementos em uma tela. Apesar de aos poucos continuar aprendendo coisas sobre programação, eu não ousaria me chamar de programador.

HTML não é programação. CSS não é programação. Mas porque eles ainda assim são códigos, desenvolvedores front-end muitas vezes são colocados na mesma gaveta dos desenvolvedores Python, Java, PHP, Ruby, C#, C++, Objective C etc, ao invés de ser colocado junto do time de design. Isso é um grande problema.

Continue lendo »

A Web Responsiva será 99,9% tipográfica

Typography

“We’re reaching the point already where there are more hacks, poly-fills and crimes against UI design than there have ever been in order to make a site work on even a small range of devices. 12 months down the line, us, the designers of these sites will be maintaining an increasingly flaky set of templates and nested media queries to deal with screen sizes  retina displays and whatever appears on the device market next year.”

Link: The responsive web will be 99,9% typography

Dados e estatísticas sobre mobile commerce

Mobile Commerce Facts and Statistics

Mobile Commerce Facts and Statistics2

Mobile Commerce Facts and Statistics3

Uma apresentacão com 50 fatos, dados e estatísticas sobre Mobile Commerce. Dá pra ficar uns 10 minutos em cada slide só refletindo nas implicações de cada fato apresentado nos projetos em que você está trabalhando :)

(Se você estiver lendo este por post RSS ou email e a apresentação acima não abrir, veja-a no blog)

Axure 7: a ferramenta mais completa nem sempre é a certa

Axure_7

Lembro até hoje a emoção do meu primeiro drag and drop assim que eu baixei o beta do Axure 6 em 2010. Mas, há um mês, quando baixei o beta da versão 7 do meu software oficial de wireframes, não me emocionei tanto assim.

A nova versão tem várias novas funcionalidades, como um widget realmente útil, a simulação de interações básicas de JavaScript e, o melhor de tudo, o protótipo pode ser  responsivo. Enfim, tudo que a gente precisa para fazer protótipos mais realistas. Só que não acho que seja isso (ou só isso) que estamos precisamos agora.

De uns tempos para cá, o nosso papel de UX/AI amadureceu e ganhou uma forma mais clara do que somente ser um fazedor de wireframes: emagrecemos, viramos diretores e começamos a abrir mão de uma documentação extensa. Isso porque aprendemos que nosso trabalho é mais do que ficarmos horas com o fone de ouvido escovando uma interação no prótotipo: precisamos levantar da cadeira e ir falar com usuários, gestores, colegas e estar presentes com a visão da experiência do usário em todos os estágios de um projeto. Quanto antes começarmos a receber feedback, melhor. E o Axure, na contra mão disso, está ficando tão mais sofisticado e complexo que passa a exigir verdadeiros especialistas para “programarem” uma interação no protótipo, em vez de apresentar uma solução que permita você criar e compartilhar rapidamente um wireframe.

Vocês sabem o quão complicado isso pode ficar

Vocês sabem o quão complicado isso pode ficar

Por outro lado, as ferramentas de prototipação online que vêm pipocando por aí seguem justamente o outro caminho: estão na nuvem, acessíveis de qualquer lugar; focam na facilidade e simplicidade de uso, para qualquer um poder usar; e muitas são colaborativas ou mesmo permitem o feedback de outros pessoas em poucos cliques. Wireframe.cc, Mockingbird, Cacoo e Invision são algums exemplos. Essa abordagem está muito mais alinhada com a ideia do UX designer como alguém presente em todo o processo de desenvolvimento de um produto e que usa wireframes e outras ferramentas só para facilitar a conversa com colegas de trabalho e clientes. Alguém mais focado em colher feedbacks e facilitar a colaboração de todos do que só nas ferramentas que utiliza.

Continue lendo »

Pausa para o game

Battlefield 4

Battlefield 4 fazendo ótimo uso da segunda tela e da responsividade para os jogadores mais engajados viciados.

O cara sai do trabalho ansioso pra chegar em casa e jogar Battlefield. No caminho pra casa, ele já consegue ir configurando seus equipamentos, personagens, armas e estratégia. Chegando em casa é só começar a jogar, direto, sem precisar perder tempo com esse tipo de configuração.

Consumidores preferem o design adaptável

Uma pesquisa feita pela Netbiscuits mostrou que as pessoas preferem navegar em celulares, smartphones e tablets, encontrando o conteúdo procurado em sites adaptados, ao contrário do que muitas marcas pensam (quando criam aplicativos que duplicam o site no intuito de tornar a navegação no conteúdo mais amigável).

Isso mostra que amigável mesmo é navegar no site original, portanto é muito importante estruturar o site para ser visto por vários devices. Talvez os aplicativos possam ficar restritos a apoio de marca em promoções e destaques de produtos/serviços.

Foram entrevistados 5000 consumidores de informação online em 10 mercados, incluindo o Brasil, para entender o comportamento destes dentro deste universo.

Alguns pontos interessantes desta pesquisa:

Continue lendo »

Google+