Arquivo da tag: wireframe

Wirify: um bookmarklet que transforma sites em wireframes

Na minha leitura diária de feeds, encontrei essa coisinha na Wireframes Magazine:

Wireframe do Blog via Wirify

Adivinhem que site é esse.

Trata-se do Wirify, um bookmarklet que transforma qualquer página da web em wireframe. Eles não ficam perfeitos (aparentemente ele usa jquery pra fazer a mágica), mas é bem interessante notar a densidade de informações e a relação dos elementos quando você elimina imagens e palavras. É claramente e admitidamente inspirado no ótimo Web Without Words.

Para usar, é bem simples: basta ir na página do serviço e arrastar o link para a barra de tarefas do browser. Teoricamente é compatível com todos os navegadores, mas, pra variar, funciona melhor no Firefox/Chrome/Safari.

O bookmarklet é uma forma da empresa que fez ele, a Volkside, divulgar seus produtos. Eu gosto dessa tendência, que é muito comum em apps de iPhone/Android, de oferecer algo útil para o consumidor em troca de uma propaganda básica. Bem melhor que um banner.

Como os meus 2 leitores devem ter notado, o blog está em recesso até 2011. Se tudo der certo, volto no início do ano com novidades.

4 UX designers e 1 projeto

Essa apresentação do Russ Unger, co-autor do livro A Project Guide to UX Design é genial.

“If you are still arguing about wireframes and prototypes, you are missing the point. They’re just communication tools.”

E ele prova isso chamando mais 3 designers para trabalhar. O resultado dá pra ver na apresentação:

Jquery, grid fluido, mobile e usabilidade não é coisa de hippie – Coisas legais da Web #06

  • Uma das coisas que eu descobri rapidinho nessa vida de arquiteta de informação é que não dá pra separar o conhecimento em caixinhas e tentar ser dono de uma. Outra coisa que eu descobri é que os desenvolvedores (tanto de interface quanto de sistema) são seus melhores amigos. Um jeito de cair nas boas graças deles é  saber da existência de jquery (um framework de javascript que ajuda e muito no trabalho deles). Esse post apresenta 50 controles fundamentais e componentes de interação em jquery. (via Speckyboy)
  • Você já ouviu falar de “responsive web design“? Não? Devia. É basicamente uma forma de construir seu layout para que ele brinque direitinho com vários tamanhos de tela, de mega-resoluções a mobile. E que tal um template de grid fluido em CSS pra ajudar o pessoal de interface? É bem legal ver o conteúdo se adaptando de acordo com o tamanho da janela. Vai lá, experimenta! (via Think Vitamin)
Exemplo de mobile sketching

Quero um bloquinho desses.

Um dia ainda faço um layout “responsável” pro blog. Mark my words.