Rascunhos de layouts e wireframes

Publicado em 04/03/2013

Sketches de layouts e wireframes

A concepção do layout é a minha parte preferida no processo de criação de um novo site. E como eu já disse num dos meus artigos para o InfoWester lááá em 2006, o desenvolvimento de um site começa literalmente no papel, e por isso manter um sketchbook é uma ótima idéia.

Sempre comecei meus layouts rabiscando idéias no papel, e inclusive quando preciso desenvolver um site novo deixo lápis e bloco de anotações ao lado da cama, porque é quando você está quase pegando no sono que as melhores idéias costumam aparecer (essas lindas). Mas adquiri o hábito de manter todos os sketches num lugar só depois de um freela em que desenvolvi o layout do site e do painel administrativo pra uma agência. Por envolver vários profissionais, o processo todo precisava ser muito organizado e documentado – e unindo isso ao meu TOC nasceu um sketchbook que também serve de arquivo pra não perder nenhuma idéia.

Gosto bastante de ver os sketches alheios, sejam eles de layouts, wireframes ou apps. E quanto mais caprichados são os rascunhos de outras pessoas menos neurótica eu me sinto em desenhar cada detalhezinho nos meus xD

Primeiro sketch do Twitter

Sketch do hotsite comemorativo de 5 anos do Firefox

Rascunho do wireframe para o site CommLogix

Rascunho do perfil no Vimeo

Existem cadernos e blocos específicos para fazer sketches, mas você não precisa de nada muito complicado ou caro pra isso. A primeira foto, por exemplo, é o rascunho inicial do Twitter, num bloco de papel absolutamente comum. Eu uso um caderno de desenho sem pauta, com uma folha quadriculada por baixo para orientar as linhas retas (e também proteger a página de baixo). E ando sempre com um caderninho na bolsa, porque a gente nunca sabe quando uma boa idéia vai aparecer.

Também não é preciso saber desenhar (e eu sou a prova disso) ou ser tão neurótico com a perfeição nas medidas e linhas (deixe isso pro Photoshop!). O importante é rabiscar, rabiscar muito, e anotar qualquer idéia que passe pela cabeça para soltar o traço e a imaginação.

Dois links do Web Design Ledger pra você se inspirar: 18 Great Examples of Sketched UI Wireframes and Mockups e Inspiring UI Wireframe Sketches.


Leia mais sobre Web Design, , ,


Nenhum comentário para “Rascunhos de layouts e wireframes”

Deixe um comentário




Seu e-mail não será publicado