Seja Bem-Vindo. Este site tem recursos de leitura de texto, basta marcar o texto e clicar no ícone do alto-falante   Click to listen highlighted text! Seja Bem-Vindo. Este site tem recursos de leitura de texto, basta marcar o texto e clicar no ícone do alto-falante

AULA 10 – INTERFACE HOMEM COMPUTADOR

Design de Sites

Introdução

Segundo Benyon (2011), um produto que o designer de interação certamente fará é o design de um site. Badre (apud Benyon, 2011) identifica quatro principais tipos de site: notícias, compras, informação e entretenimento.

A Arquitetura da Informação é uma área de estudo dedicada à construção de sites, diz Benyon (2011), ela estrutura o site e ajuda os usuários a responder perguntas como onde estou? E aonde posso ir? A arquitetura da informação organiza e classifica o conteúdo dos sites, cria taxonomias, rotula itens e categorias. Para tanto, utiliza técnicas específicas como diagramas de afinidade e card sorts. Além de organizar e classificar o conteúdo, a arquitetura da informação ocupa-se dos mecanismos de navegação.

Construção de sites

O design de sites deve seguir os princípios do bom design de interação e respeitar as etapas do projeto: entendimento – análise PACT, construção de personas e cenários, foco de Design, Antecipação com prototipagem e Avaliação. Um bom design para sites prioriza a informação e a navegação, além disso, deve ser eficiente, aprendível e adaptável.

Jesse James Garrett (apud Benyon, 2011) divide a construção de um site em nesses elementos:

  • Estratégia – É a camada mais baixa e preocupa-se em entender o objetivo geral do site, a natureza dos usuários do site e o que eles esperam do site. Considera as metas de negócios e a marca da empresa.
  • Escopo – Ocupa-se da funcionalidade e do conteúdo, além de definir os requisitos.
  • Estrutura – Trata da arquitetura da informação e da especificação do design. O objetivo aqui é estabelecer um modelo conceitual claro.
  • Esqueleto – Cuida do Design de Informação, da navegação e da interface.

Segundo a enciclopédia digital Wickipédia, Design de Informação ou Infodesign, é uma área do design que lida detalhadamente com a apresentação da informação. Seu objetivo principal é melhorar a forma como o usuário adquire informação em sistemas de comunicação analógicos e digitais.

O wireframe é uma técnica usada para unir os três componentes desse elemento e colocá-los em um leiaute.

Wireframe.

Superfície

Preocupa-se com as questões estéticas do site.

Normalmente, para obter um leiaute claro, lógico e agradável, são utilizadas folhas de estilo – CSS. As folhas de estilo formatam a aparência dos documentos da Web, suas cores e fontes, especificando a linguagem visual.

Design de interface

Cooper (apud Benyon, 2011) argumenta que o design de interface é um componente fundamental do design de interação. Portanto os designers de interação devem ter noção de design
gráfico, formas e cores.

As diretrizes do design de interface são extraídas de estudos sobre percepção, desenvolvidos pela escola Gestalt.

Proximidade e Similaridade

Objetos semelhantes em forma ou função devem permanecer próximos.

Botões organizados por proximidade.
Arquivos organizados pela similaridade.

Continuidade

Objetos que fazem parte de um todo maior e contínuo.

Menu desdobrável.

As cores no design

O uso de cores no design de sistemas interativos é complexo.

Aaron Marcus (apud Benyon, 2011) fornece as seguintes regras para a aplicação da cor:

  1. Use no máximo cinco cores.
  2. Use com parcimônia cores centrais ou periféricas.
  3. As áreas coloridas devem sofrer o mínimo de mudanças de cor ou tamanho.
  4. Não use simultaneamente cores de alta pureza.
  5. Use um código de cores consistente, familiar e com referências apropriadas.

A seguir, a conotação de algumas cores no Ocidente.

Convenção de cores ocidentais.

A seguir, temos um exemplo de mapa de site de Garrett.

Mapa de site de Garret.
Mapa de site de Garret.

Alguns hot sites que são casos de sucesso da desenvolvedora gaúcha W3Haus:

Página inicial do hot site de O Boticário.
Página inicial do hot site da LG.
Página inicial do hot site da Petrobrás.

Fim da aula.

Click to listen highlighted text!