Layout da interface
Atividades relacionadas (ao layout do web site)
Esboços (sketches)
Esboços têm um importante papel no design de produtos e da experiência do usuário. Acompanham desde as etapas mais embrionárias até os estágios mais avançados do projeto. São ferramentas poderosas (além de simples e baratas) que ajudam a pensar problemas e soluções funcionais dos mais abstratos aos mais tangíveis.
Normalmente começam a ser criados depois da descrição do caso de uso para o cliente. Partem do que se conhece sobre os usuários, de ideias que vieram à tona em conversas e pesquisas, percepções e impressões pessoais dos designers.
Não necessitam de ferramentas digitais, basta um lápis e uma folha de papel, borracha, canetas hidrográficas, marcadores, um quadro branco, que os desenhos feitos rapidamente, em grande número, se sucedem, se aperfeiçoam, até que se chegue a resultados satisfatórios.
Às vezes são feitos onde menos se espera, no caminho para o trabalho, na mesa de um restaurante, na fila do mercado. Muitos designers e projetistas levam sempre conseguem um caderninho no bolso ou na bolsa, caso precisem rabiscar alguma ideia fora do horário ou do lugar de trabalho.
Nem sempre as ideias esboçadas são boas, também nem sempre são ruins. De modo geral, são desenhadas sem muito julgamento de valor – sua avaliação é feita posteriormente.
E nem sempre os esboços são bonitos, alguns são até feios. Às vezes são compreensíveis apenas para quem os criou, precisam ser explicados através de esboços mais bem acabados. Muitas vezes se detêm apenas numa parte de um problema (um botão, uma página de um site), podem não propor uma solução completa (um processo de compras online do início ao fim, por exemplo). Por serem esboços, são marcados pela incompletude.
Esboços em projetos web
Por envolverem uma série de competências complementares, que se somam até a produção do resultado que vai ao ar, projetos web na maioria dos casos são criações coletivas. Assim, é comum os mesmos esboços serem feitos por mais de uma pessoa, em mesas de reuniões, com marcas de diversas canetas e lápis diferentes.
Em alguns casos, ficam registrados em quadros brancos, e ali descansam como material de consulta, até que não se precise mais deles e sejam apagados.
Produtos de projetos web como wireframes começam como esboços na mesa do arquiteto da informação. E vão aos poucos se transformando em mapas finalizados de percursos e processos online, realizados por usuários e sistemas.
Embora não cheguem ao detalhamento da interface, é importante que sejam inteligíveis, legíveis e compreensíveis por um grupo de pessoas, não devem ficar restritos aos seus criadores. Precisam ser também explicáveis. Neste caso, os esboços precisam se transformar em modelos de comunicação (e não só registros) de ideias – algumas vezes, são acompanhados de textos explicativos.
A criação do layout também começar com esboços, a partir das indicações de wireframes. Estes consideram os elementos necessários à interface, as relações entre eixos horizontais e verticais para a composição dos elementos, as variações do sentido vertical e paisagem da tela, as cores, tipologias, tratamentos gráficos, elementos ocultos e como aparecem.
Caso tenham sido realizados testes de usabilidade com wireframes, o layout considera também a localização, o tamanho, os rótulos de elementos que os testes recomendam, aspectos que também podem ficar indicados nos esboços.
Mesmo sujeitos às exigências do negócio, do público-alvo, das diversas instâncias de decisão, de necessidades técnicas, características de comunicação e linguagem, os esboços de interfaces (e os esboços de um modo geral) mantêm um caráter lúdico. Um lado independente dos condicionantes que restringem o processo de criação, sem se deixar limitar pelo caráter restritivo.
Este lado solto, ágil, aproxima o esboço de uma interface de quem a utiliza – criar e usar estão bastante próximos. E quanto maior a proximidade, mais eficientemente a interface com o usuário se estabelece, como ponto fugaz de transição, mudança, lugar e momento de interlocução e conexão, expressão, afirmação individual e coletiva. Esboços e interfaces se afirmam e se realizam como caminho, que precisa se manter sempre em perspectiva, tanto na criação quanto no uso.
Assuntos relacionados
► Brand board, painel de ideias
► Componentes da interface web
► Lugares comuns dos elementos das páginas
► Wireframes – design estrutural
► Mapas conceituais
► Usabilidade
► Usabilidade – Consistência
► O espaço da página
Mais informações sobre esboços
► The messy art Of UX sketching, Peiter Buick (Smashing Magazine, acesso em 3.2.2012)
► Naughty little scamps – The art of sketching interfaces, Jason Mesut e Sam Smith (acesso em 3.2.2012)
► Livro: Orderning disorder – Grid principles for web designs, de Khoi Vinh. Berkeley: New Riders, 2011.
► Thinking outside the grid, de Molly E. Holzschlag (AlistApart, acesso em 22.6.2010)
► Designing with content in mind (thedesignCubicle, acesso em 7.12.2009)
A publicação de conteúdo deste site
impressa ou online sem autorização
dos autores está sujeita a sanções legais