suportes digitais (10-2)

SUPORTE ELETRÔNICO

Diano AlbernazMário Cajé

Professor: Alexandre Farbiarz

Universidade Federal Fluminense

Instituto de Arte e comunicação social

Planejamento visual-gráfico

OBJETIVODemonstrar 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 telaResoluçãoLuz emitidaTela plana x curvaMobilidade 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

O texto e as imagens são mais nítidos e menores em

telas com ALTA RESOLUÇÃO.

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

RESOLUÇÃO, mas as imagens são atarracadas e poucos itens

cabem na tela.


Suporte Eletrônico

ResoluçãoResolução de tela se refere à clareza com que textos e imagens são exibidos na tela.

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

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

Parte1 - Características simbólicas

Suporte Eletrônico

Exemplo 2 – Observe o código

Suporte Eletrônico


<html><head></head><body><table width="100%">Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo </table></body></html>

Exemplo 2 – Observe o código

Suporte Eletrônico


<html><head></head><body><table width="980px">Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo Exemplo </table></body></html>

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

Luz emitida

Tela plana x curvaParte 1 - Características físicas

Suporte Eletrônico

Mobilidade física


Suporte Eletrônico

Parte 2

Características Simbólicas do suporte eletrônico

PrivacidadeVirtualidadeNavegação não-linearMobilidade/dinamismo

Suporte Eletrônico

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.

PrivacidadeParte 2 - Características simbólicas

Suporte Eletrônico

Virtualidade

Suporte Eletrônico

Parte 2 - Características simbólicas

“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.

1) Narrativa não-linear entre sites2) Narrativa linear em um mesmo site

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


Suporte Eletrônico

Navegação não-linear

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


Mobilidade/dinamismo

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


Suporte Eletrônico

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.

Mobilidade/dinamismo 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



Suporte Eletrônico

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.

Cross Browser

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

Beta Constante

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


Suporte Eletrônico


O roteiro de navegação do site é uma forma eficaz de manter o usuário ciente de seu percurso na página

Breadcumber


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

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


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 .

Parte 3

10 Qualidades de uma boa navegação

Ser facilmente aprendido

Ter consistência

Dar retorno

Estar contextualizado

Oferecer alternativas

Garantir economia de tempo e ações

Suporte Eletrônico

Prover mensagens visuais claras

Criar nomenclaturas claras

Seguir o propósito do site

Apoiar e ajudar os objetivos do usuário

SER FACILMENTE APRENDIDO

Suporte Eletrônico

10 QUALIDADES PARA UMA NAVEGAÇÃO DE BOM FUNCIONAMENTO (JENNIFER FLEMING)

TER CONSISTÊNCIA

Suporte Eletrônico

10 qualidades de uma boa navegação web

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


PROVER MENSAGENS VISUAIS CLARAS

Suporte Eletrônico


CRIAR NOMENCLATURAS CLARAS

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ÁFICASLÉ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)

Documents