suportes digitais (10-2)
Post on 23-Jun-2015
338 Views
Preview:
TRANSCRIPT
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.
Parte 1 - Características físicas
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.
Parte 1 - Características físicas
Suporte Eletrônico
Este exemplo evidencia a vantagem do desenvolvimento de elementos da página em
porcentagem em vez de pixels
Parte 1 - Características físicas
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
Parte 1 - Características físicas
<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
Parte 1 - Características físicas
<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
Parte 1 - Características físicas
Suporte Eletrônico
Luz emitida
Tela plana x curvaParte 1 - Características físicas
Suporte Eletrônico
Mobilidade física
Parte 1 - Características físicas
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
Parte 2 - Características simbólicas
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)
Parte 2 - Características simbólicas
Suporte Eletrônico
Parte 2 - Características simbólicas
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
Parte 2 - Características simbólicas
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
Parte 2 - Características simbólicas
Parte 2 - Características simbólicas
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.
Parte 2 - Características simbólicas
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
Parte 2 - Características simbólicas
Suporte Eletrônico
Parte 2 - Características simbólicas
O roteiro de navegação do site é uma forma eficaz de manter o usuário ciente de seu percurso na página
Breadcumber
Parte 2 - Características simbólicas
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.
Parte 2 - Características simbólicas
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
Parte 2 - Características simbólicas
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.
Parte 2 - Características simbólicas
Suporte Eletrônico
Parte 2 - Características simbólicas
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
10 qualidades de uma boa navegação web
ESTAR CONTEXTUALIZADO
Suporte Eletrônico
10 qualidades de uma boa navegação web
OFERECER ALTERNATIVAS
Suporte Eletrônico
10 qualidades de uma boa navegação web
GARANTIR ECONOMIA DE TEMPO E AÇÕES
Suporte Eletrônico
10 qualidades de uma boa navegação web
GARANTIR ECONOMIA DE TEMPO E AÇÕES
Suporte Eletrônico
10 qualidades de uma boa navegação web
PROVER MENSAGENS VISUAIS CLARAS
Suporte Eletrônico
10 qualidades de uma boa navegação web
CRIAR NOMENCLATURAS CLARAS
Suporte Eletrônico
10 qualidades de uma boa navegação web
SEGUIR O PROPÓSITO DO SITE
Suporte Eletrônico
10 qualidades de uma boa navegação web
SEGUIR O PROPÓSITO DO SITE
Suporte Eletrônico
10 qualidades de uma boa navegação web
APOIAR E AJUDAR OS OBJETIVOS DO USUÁRIO
Suporte Eletrônico
10 qualidades de uma boa navegação web
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!
top related