Design de informação: aula 9
A. Mapa de informação
O mapa de informação é um elemento básico de um projeto de design digital. No caso das peças online, este mapa é comumente chamado de 'mapa do site', e mostra basicamente como a informação está distribuida dentro de uma peça digital.
O mapa de informação deste site que você vê agora, o Carambola digital, é este:
Nas caixas estão os nós de informação, no caso, as páginas do site. As nuvens representam grupos de páginas (várias aulas de um curso), e as linhas são vínculos hierárquicos entre as informações. Repare que, na figura acima, as linhas entre os boxes não representam links entre conteúdos, e sim a hierarquia à qual obedecem.
Você vai encontrar linhas representando links entre conteúdos nos mapas de navegação, mas este é outro assunto. Portanto, repare bem nas diferenças entre o mapa de informação e o de navegação.
Os sites costumam publicar seus mapas de informação, geralmente com o nome mapa do site, para ajudar usuários a se localizarem. No caso acima, se colocássemos esta imagem no Flash com botões em cada quadrado, ele se transformaria num mapa do site interativo, pronto para ajudar usuários do site.
B. Wireframe
O wireframe é outro elemento fundamental do projeto de design digital. Assim como o mapa de informação, ele também dispõe trechos de informação, só que não no âmbito do site inteiro, mas sim no da interface.
A principal função do wireframe é simular a disposição destes elementos informacionais, de modo a dar, para os interessados no desenvolvimento do projeto, uma clara idéia do peso destes elementos na interface. Ele tem especial importância no processo de elaboração de sites comerciais, institucionais e documentais, já que nestes sites a quantidade de informação a ser disponibilizada ao usuário é grande e a preocupação com o peso dado a cada área de interface é geralmente alvo de intensos debates e estudos.
O wireframe consiste na simulação em diagrama de caixas (box model) da presença dos diferentes conteúdos na interface. No wireframe, ao invés dos conteúdos reais, são representadas caixas que reservam o lugar destes conteúdos. É fundamental, no entanto, que cada box seja idetificado a fim de fornecer a localização dos conteúdos aos envolvidos no projeto.
A partir da definição e aprovação do wireframe, elabora-se a interface gráfica da peça digital, dando tratamento gráfico aos elementos antes representados por boxes no wireframe. Decorre daí que a interface resultante não tem necessariamente que prender-se à forma de box... pelo contrário! O designer tem a função de, a partir de um wireframe 'quadrado', elaborar uma interface que atenda às necessidades informacionais levantadas mas que também conte com a criatividade gráfica do designer de interface.
Pode-se usar qualquer programa gráfico para elaborar um wireframe. Existem até mesmo softwares específicos para este fim. O site Gliffy, por exemplo, se presta à elaboração online de vários tipos de ilustrações esquemáticas, como fluxogramas, histogramas, etc, podendo ser usado também para a elaboração de wireframes. O site apresenta um exemplo de wireframe de uma página interna de uma music store. Elaborei um exemplo de wireframe usando o Gliffy e disponibilizei para consulta. Este é outro exemplo de wireframe, feito em outro software gráfico.
Se desejar informações complementares sobre o uso de wireframes, consulte o artigo abaixo: