Aula_09 - AI

Prévia do material em texto

Aula 09
Prof.ª Bruna Patrícia da Silva Braga
brunapbraga@gmail.com
Arquitetura da Informação
Design Visual
Design Visual
Um de seus principais motivos é proporcionar aos
usuários uma sensação de localização. Eles precisam
saber onde eles estão no site, por onde eles já
passaram, e como chegar onde eles querem.
Uma boa estrutura combinada com um design
visual eficiente possibilita que os usuários
construam uma imagem mental do mapa do site.
• Deve-se tomar certos cuidados durante o projeto de um
sistema hipermidiático;
• Caso contrário projeto de hipermídia poderia ter um
resultado equivocado, tornando-se um labirinto confuso e
tortuoso;
• Assim, a tarefa que o usuário estaria tentando executar não
seria finalizada com sucesso;
• Isso se deve ao fato de haver uma grande quantidade de
informações disponíveis no ciberespaço, uma espécie de
dilúvio informacional.
Design Visual
• Um projeto hipertextual não pode ser criado sem seguir
uma estrutura lógica;
• O papel do designer da informação:
Design Visual
– É responsável pela base de um sistema
de hipermídia;
– Tem papel importante no
desenvolvimento de projetos hipermídia;
– Essa contribuição do designer gráfico ao projeto pode se iniciar na
fase de layout do sistema e é importante para o sucesso do
sistema.
• Esse tipo de preocupação busca garantir o bom aspecto
visual de um sistema e a possibilidade de que os usuários o
entendam.
Design Visual
A interface deve ser pensada de maneira que fundamentos
do design da informação sejam aplicados, como estudo de
cor, formas, disposição dos elementos gráficos e
hierarquização da informação (MOURA, 2007).
Grids de Layout
• Os grids de layout definem a
estrutura e organização do site em
relação a como uma página irá
aparecer.
• Então, esboços de design irão
estabelecer um estilo visual geral.
Grids de Layout
Os grids de layout combinados com os esboços de design
irão trazer modelos de página, os quais por sua vez
levarão à construção de protótipos funcionais na Web.
• Grids de layout são padrões (moldes) que descrevem
páginas Web.
• Deve ser analisado:
Grids de Layout
Conteúdo
(Foco)
Blocos de espaço 
para navegação 
global e local
Marca Publicidade
Requer 
posicionamento 
proeminente. 
Deve integrar os 
demais aspectos 
do site que podem 
não fazer parte da 
estrutura do site. 
Precisa estar 
presente em cada 
página. 
E chamadas de 
patrocínio devem 
ser incorporadas 
ao design.
• Como estruturar o site:
– Listar todos os tipos de página
possíveis que serão utilizadas;
– Analisar as páginas individuais dentro
do site que devem ser muito similares
na forma através de todas as seções
principais;
• Como estruturar o design:
Grids de Layout
– Pesquisar o inventário de conteúdo, e então ficar com dois ou três
tipos genéricos de página;
– Após essa análise inicial deve-se começar fazendo o design para
esses tipos e então usá-los como base para todos os demais tipos
de página.
– Criar um bloco de esboços ou um programa gráfico;
– Criar um retângulo representando a página, e delinear blocos para
os elementos do design.
– Considerar o conteúdo como o elemento mais importante
(começar por ele).
• Outros elementos precisam ser considerados:
– Branding (marca, logotipo, slogan);
– Publicidade e patrocínio,
– Navegação,
– Títulos da página,
Grids de Layout
– Gráficos do cabeçalho e rodapés;
– Copyrights.
Grids de Layot
Branding (que inclui marca, logotipo,
slogan) representa um papel muito
proeminente em todas as páginas porque
informa o usuário que eles ainda estão no
site. Um lugar comum para o branding é o
canto superior esquerdo da página.
Publicidade e patrocínio podem ser
integrados de diversas maneiras.
Geralmente banners comerciais é utilizado
no tamanho completo (tipicamente 468 por
60 pixels) em todas as páginas.
Grids de Layot
A navegação também tem um papel muito proeminente. A
navegação global precisa ser consistente através de todas as
páginas do site. Sistemas de navegação local podem mudar,
dependendo do conteúdo, mas tente ser o mais consistente
possível.
Esboços e Modelos
Esboços de design:
• Frequentemente, eles são feitos simultaneamente aos
demais procedimentos da arquitetura da informação;
• Talvez já possa ter os esboços de design prontos e
aprovados pelo cliente.
Esboços e Modelos
São usados para estabelecer o visual e o estilo do site.
Eles podem ser integrados à metáfora ou ideia da
estrutura do site, mas isso nem sempre é necessário.
Esboços de design:
• Os esboços não têm que
necessariamente representar
a estrutura ou organização.
• No entanto, os designers
gráficos têm que saber o
tamanho dos arquivos
gráficos, bem como quaisquer
outras restrições técnicas.
Esboços e Modelos
Modelos de página:
• Os modelos de página são a base para um protótipo
baseado na Web;
Esboços e Modelos
Representam o site de fato, integrando os esboços de design
com os grids de layout. Os modelos precisam ser o mais
parecidos possível com as páginas reais do site.
Eles precisam ser aprovados pelo cliente, apesar de poder
ser suficiente ter a aprovação da estrutura do site e dos
esboços de design para avançar com os protótipos.