Wireframes que nos inspiram
Inspirações

Wireframes que nos inspiram — e algumas ferramentas para criação

Quem trabalha com design de interfaces* já está acostumado com o termo wireframe. Ele é utilizado para cunhar o desenho básico (“esqueleto”) que serve de guia para a interface que estamos projetando – seja um site ou aplicativo, por exemplo – e para organizar visualmente os elementos fundamentais do projeto antes de desenvolver.

No mundo ideal do design de interfaces, o cliente aprova o wireframe antes do designer continuar com o projeto. Isso evita (ou pelo menos diminui) dores de cabeça como “não queria o menu nesta posição” ou “esse botão deveria ficar na em cima e não ali no meio”. Se você trabalha em conjunto com um desenvolvedor, mostre a ele o wireframe também e mantenha-o sempre a par com o projeto.

Existem ferramentas que ajudam a criar esboços rápidos e que permitem a colaboração de outros membros do projeto. Seguem algumas dicas de algumas delas que são gratuitas.


Wireframe.cc

Wireframe.cc

Moqups

Moqups

Pencil Project

Pencil Project

Frame box

Frame box

Froont

Froont

inVison

inVision

 

Sinceramente, ainda sou adepto ao wireframe feito na mão mesmo. Então vou deixar alguns exemplos para você se inspirar a fazer no seu sketchbook.

Close –  Eddie Lobanovskiy

Close -  Eddie Lobanovskiy

Mac App – Oykun Yilmaz

Mac App - Oykun Yilmaz

Dashboard – Kerem Suer

Dashboard - Kerem Suer

Website – Bjarni Wark

Website - Bjarni Wark

Portfolio pessoal – Leonardo Maia

Portfolio pessoal - Leonardo Maia

Landing Page – Kerem Suer

Landing Page - Kerem Suer

Biosensor – Lance Cassidy

Biosensor - Lance Cassidy

 

Tem algum wireframe bacana ou alguma ferramenta para recomendar? Deixe nos comentários! (:

Clique aqui para comentar ( )