Suportes Digitais (10-2)

Universidade Federal Fluminense
Instituto de Arte e comunicação social

Planejamento visual-gráfico
SUPORTE
ELETRÔNICO
Diano Albernaz
Mário Cajé
Professor: Alexandre Farbiarz
OBJETIVO
Demonstrar como as características físicas e
simbólicas do suporte eletrônico influenciam no
sucesso de uma publicação digital.
“A Web é o ambiente no qual o poder do cliente se manifesta no mais alto
grau. Quem clica no mouse decide TUDO. É tão fácil ir a outro lugar;
todos os concorrentes do mundo estão a um simples toque do mouse”
(Épígrafe do 1º capítulo do livro “Projetando Websites”, de Jacob Nielsen)
Suporte Eletrônico
Parte 1
Características Físicas do suporte
eletrônico
Tamanho da tela
Resolução
Luz emitida
Tela plana x curva
Mobilidade física
Suporte Eletrônico
Parte 1 - Características físicas
Tamanho da tela
Não existe tamanho ou proporção fixa para a interface que
aparecerá na tela, por isso o design deve ser versátil para
acomodar qualquer tamanho.
(RADFAHER in: Design/Web/design, p. 93)
A maioria das páginas da Web funciona bem em um

monitor de 17 polegadas com uma resolução de pelo menos
1024x768 pixels
Suporte Eletrônico
Resolução Parte 1 - Características físicas
Resolução de tela se refere à clareza com que textos e

imagens são exibidos na tela.
O texto é maior e mais fácil de ler em

O texto e as imagens são mais
telas com BAXA RESOLUÇÃO, mas as
nítidos e menores em telas com
imagens são atarracadas e poucos itens
ALTA RESOLUÇÃO.
cabem na tela.
Suporte Eletrônico
Tamanho da tela
e resolução
O princípio básico ao design, independente de resolução, é
nunca usar uma largura de pixel fixa para tabelas, quadros ou
outros elementos gráficos. Em vez de usar tamanhos fixos,
especifique layouts com percentuais de espaço disponível.
A porcentagem resolve as variações de tamanho de tela e
resolução.
Suporte Eletrônico
Este exemplo evidencia a vantagem do desenvolvimento de

elementos da página em porcentagem em vez de pixels
Suporte Eletrônico
Parte1 - Características simbólicas
Observe como o layout se adapta à visualização do usuário
Suporte Eletrônico
<html>
<head>
</head>
<body>
<table width="100%">Exemplo
Exemplo Exemplo Exemplo
</table>
</body>
</html>
Exemplo 2 – Observe o código
Suporte Eletrônico
<html>
<head>
</head>
<body>
<table width="980px">Exemplo
</table>
</body>
</html>
Exemplo 2 – Observe o código
Suporte Eletrônico
Luz emitida
O objetivo do Pretog é reduzir a tensão e os males causados aos olhos em

função do excesso de luminosidade projetada pelos sites de fundo branco e
reduzir o consumo de energia necessária para fazer as suas pesquisas.
Tela Branca - 74 watts / Tela Preta – 59 watts
Suporte Eletrônico
Tela plana x curva
Suporte Eletrônico
Mobilidade física
Suporte Eletrônico
Parte 2
Características Simbólicas do
suporte eletrônico
Privacidade
Virtualidade
Navegação não-linear
Mobilidade/dinamismo
Suporte Eletrônico
Parte 2 - Características simbólicas
Privacidade
A Política de Privacidade de um site diz o que ele faz com as

informações que ele coleta de seus usuários, tais como nome,
e-mail, IP, e outras. Ela é importante para tranquilizar seus
visitantes.
Suporte Eletrônico
Virtualidade
“O virtual não está aí, mas existe. O fato de não pertencer a
nenhum lugar, de frequentar um espaço não designável, ou de
não estar somente no presente, não impede a existência. O
virtual põe em jogo processos de criação, abre futuros, perfura
poços de sentido sob a platitude da presença física imediata".
Existir” aqui significa tornar-se evidente para um

sujeito e passar para a instância do dizível, instância
que permite ao sujeito tomar consciência desse objeto.
Suporte Eletrônico
Navegação não-linear
Esquema hipotético de navegação não-linear

1) Narrativa não-linear entre sites
2) Narrativa linear em um mesmo site
Suporte Eletrônico
Uma série de elementos característicos da linguagem web
contribui para a escolha dos pontos de conexão:
 os textos junto aos links

 a organização interna de cada página selecionada
 seus elementos funcionais
 as ferramentas de navegação
 o layout
 a publicação do conteúdo
O usuário articula/modula suas ações de acordo com estas

indicações. O percurso do usuário não altera a estrutura,
apenas a reorganiza segundo seu ponto de vista
(REPERTÓRIO)
Suporte Eletrônico
O design digital combina elementos estáticos com
animações, vídeos, leituras e com a própria movimentação
que o usuário faz de todos esses elementos. Essa harmonia
é delicada (os outros veículos de comunicação são
inteiramente estáticos ou dinâmicos) e deve ser levada em
conta na criação de uma interface, para que o resultado final
não incomode.
Suporte Eletrônico
Mobilidade / dinamismo
 Evitar o excesso de extravagâncias que tirem o foco do conteúdo
 Quanto mais amplo e heterogêneo o público, maiores as
restrições técnicas para a estruturação das páginas.
 Desenhar o modelo básico do layout e testá-lo em diferentes
situações de uso (browsers, plataformas, resoluções, tamanho do
monitor).
 Testar o layout com usuários representativos do público-alvo, de
preferência no lugar de acesso das pessoas, de modo a emular as
situações de uso mais comuns.
Suporte Eletrônico
 Liberdade de movimentação
 Conteúdo versus navegação
 Leitura online
 Otimização da exibição de acordo com as circunstâncias de
cada usuário
Suporte Eletrônico
Cross Browser
Uma das preocupações do designer é fazer com que o conteúdo seja acessível a
um número tanto maior quanto possível de usuários. Esta página abusa das
animações e torna o site distante da realidade de alguns navegantes, em
termos, principalmente, de velocidade de conexão.
Suporte Eletrônico
Beta Constante
O conhecimento do público-alvo permite ao designer de interfaces

web criar layouts que estabeleçam identidade afetiva, cultural,
simbólica, com os principais segmentos a quem o site se dirige, a
fim de criar uma conexão semântica.
Suporte Eletrônico
Aqui, o menu de navegação é confuso. Quando o usuário

seleciona a opção desejada e vai clicar, a animação altera a
imagem e desfaz o menu
Suporte Eletrônico
Breadcumber
O roteiro de navegação do site é uma forma eficaz de manter o

usuário ciente de seu percurso na página
Suporte Eletrônico
A navegação (parte destacada) ocupa cerca de 20% da página.

Perceba a posição do logo e da publicidade. Essa é uma tendência
bastante perceptível na Web.
Suporte Eletrônico
A facilidade na
movimentação está
presente neste
exemplo. Os ícones
que fazem
referência ao título
da página garantem
o retorno à home a
qualquer momento.
Geralmente nos
blogs, o conteúdo
fica restrito a uma
coluna central
Suporte Eletrônico
Exemplo de navegação horizontal
Suporte Eletrônico
Viu-se na navegação horizontal um jeito diferente e original de

exibir o conteúdo, facilitando, por exemplo, a criação de sites de
uma única página, com layouts arrojados. Com criatividade, este
tipo de rolagem pode resultar em trabalhos bonitos, diferentes e
de fácil navegação.
Suporte Eletrônico
Sites antigos
utilizavam fios para a
divisão do conteúdo.
Imagine o portal do
Globo Esporte desta
forma.
O espaço em branco não é

necessariamente inútil. Ele
pode orientar o olhar e
ajudar os usuários a
entender o agrupamento de
informações .
Suporte Eletrônico
Parte 3
10 Qualidades de uma boa
navegação
Ser facilmente aprendido Prover mensagens visuais claras
Ter consistência
Criar nomenclaturas claras
Dar retorno
Seguir o propósito do site
Estar contextualizado
Oferecer alternativas Apoiar e ajudar os objetivos do
usuário
Garantir economia de tempo e ações
Suporte Eletrônico
10 QUALIDADES PARA UMA NAVEGAÇÃO DE BOM
FUNCIONAMENTO (JENNIFER FLEMING)
SER FACILMENTE APRENDIDO
Suporte Eletrônico
10 qualidades de uma boa navegação web
TER CONSISTÊNCIA
Suporte Eletrônico
DAR RETORNO
Suporte Eletrônico
ESTAR CONTEXTUALIZADO
Suporte Eletrônico
OFERECER ALTERNATIVAS
Suporte Eletrônico
GARANTIR ECONOMIA DE TEMPO E
AÇÕES
Suporte Eletrônico
GARANTIR ECONOMIA DE TEMPO E
AÇÕES
Suporte Eletrônico
PROVER MENSAGENS VISUAIS CLARAS
Suporte Eletrônico
CRIAR NOMENCLATURAS CLARAS
Suporte Eletrônico
SEGUIR O PROPÓSITO DO SITE
Suporte Eletrônico
SEGUIR O PROPÓSITO DO SITE
Suporte Eletrônico
APOIAR E AJUDAR OS OBJETIVOS DO
USUÁRIO
Suporte Eletrônico
REFERÊNCIAS
BIBLIOGRÁFICAS
LÉVY, Pierre. O que é o virtual? São Paulo: Ed. 34, 1996.
160 p.
MEMÓRIA, Felipe. Design para a Internet: projetando a

experiência perfeita. Rio de Janeiro: Elsevier, 2005.
NEITZEL, Adair de Aguiar. O jogo das construções

hipertextuais. Tese de doutorado. UFSC, 2002.
PEIRCE, Charles S. Semiótica. 3ª ed. Série Estudos. v. 46.

São Paulo: Perspectiva, 1999.
Obrigado!
Thank you!
Merci!
Dank!
Gracias!
Bedankt!
Grazie!
Tack!
Díky!

Suportes Digitais (10-2)

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Suportes Digitais (10-2)

Enviado por

Direitos autorais:

Formatos disponíveis

Universidade Federal Fluminense

Instituto de Arte e comunicação social

“A Web é o ambiente no qual o poder do cliente se manifesta no mais alto

todos os concorrentes do mundo estão a um simples toque do mouse”

(Épígrafe do 1º capítulo do livro “Projetando Websites”, de Jacob Nielsen)

A maioria das páginas da Web funciona bem em um

Resolução de tela se refere à clareza com que textos e

O texto é maior e mais fácil de ler em

Este exemplo evidencia a vantagem do desenvolvimento de

Observe como o layout se adapta à visualização do usuário

Exemplo 2 – Observe o código

Exemplo 2 – Observe o código

O objetivo do Pretog é reduzir a tensão e os males causados aos olhos em

Tela plana x curva

A Política de Privacidade de um site diz o que ele faz com as

Existir” aqui significa tornar-se evidente para um

Esquema hipotético de navegação não-linear

 os textos junto aos links

O usuário articula/modula suas ações de acordo com estas

O conhecimento do público-alvo permite ao designer de interfaces

Aqui, o menu de navegação é confuso. Quando o usuário

O roteiro de navegação do site é uma forma eficaz de manter o

A navegação (parte destacada) ocupa cerca de 20% da página.

Exemplo de navegação horizontal

Viu-se na navegação horizontal um jeito diferente e original de

O espaço em branco não é

SER FACILMENTE APRENDIDO

PROVER MENSAGENS VISUAIS CLARAS

CRIAR NOMENCLATURAS CLARAS

SEGUIR O PROPÓSITO DO SITE

SEGUIR O PROPÓSITO DO SITE

MEMÓRIA, Felipe. Design para a Internet: projetando a

NEITZEL, Adair de Aguiar. O jogo das construções

PEIRCE, Charles S. Semiótica. 3ª ed. Série Estudos. v. 46.

Você também pode gostar