Sistemas Multimídia e Interface Homem-Máquina
This presentation is the property of its rightful owner.
Sponsored Links
1 / 15

Sistemas Multimídia e Interface Homem-Máquina Sistemas de Informação Prof. Aroldo Luis PowerPoint PPT Presentation


  • 38 Views
  • Uploaded on
  • Presentation posted in: General

Sistemas Multimídia e Interface Homem-Máquina Sistemas de Informação Prof. Aroldo Luis [email protected] Princípios Básicos de Design.

Download Presentation

Sistemas Multimídia e Interface Homem-Máquina Sistemas de Informação Prof. Aroldo Luis

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Sistemas multim dia e interface homem m quina sistemas de informa o prof aroldo luis

Sistemas Multimídia e Interface Homem-Máquina

Sistemas de Informação

Prof. Aroldo Luis

[email protected]


Princ pios b sicos de design

Princípios Básicos de Design

  • Tanto a diagramação de materiais para o suporte impresso quanto para o online está submetida a princípios básicos de design. A questão é saber em que grau os princípios válidos para papel estão sendo aproveitados também na Web.

  • A designer Robin Williams destaca quatro destes princípios que regem o design gráfico de páginas em geral. São eles: proximidade, alinhamento, repetição e contraste.


Proximidade

Proximidade

  • O princípio da proximidade é baseado no agrupamento de itens que têm relação entre si.

  • Itens relacionados entre si devem ser agrupados e aproximados uns dos outros, para que sejam vistos como um conjunto coeso e não como um emaranhado de partes sem ligação. Itens ou conjuntos de informações que não estão relacionados entre si não deveriam estar próximos; isto oferece ao leitor uma pista visual imediata da organização e do conteúdo da página. (Williams, p.15, 1995)


Proximidade1

Proximidade

  • Acima temos um exemplo de cartão de visitas dando um endereço. É baseado num exemplo do livro de William.

  • Neste cartão, o seu olho pára cinco vezes, pois há cinco itens separados. Onde você começará a ler? No meio, provavelmente, pois a letra é mais grossa. Onde você vai ler depois? Em geral, da esquerda pra direira, porque somos ocidentais. Quando você chega ao canto inferior direito, onde seus olhos vão?


Proximidade2

Proximidade

  • Exercício 1: Resolva o problema de proximidade do cartão.


Alinhamento

Alinhamento

  • O princípio do alinhamento é, segundo Williams, uma forma de conexão visual entre os elementos de um material gráfico, e, portanto, nada deve ser colocado arbitrariamente em uma página.

  • Quando os itens são alinhados na página, há uma unidade coesa, mais forte. Mesmo quando os elementos estiverem fisicamente separados uns dos outros, se estiverem alinhados, haverá uma linha invisível conectando-os, tanto em relação aos seus olhos quanto a sua mente. (...) é o princípio do alinhamento que avisará ao leitor que, mesmo não estando próximos, os itens fazem parte do mesmo material. (Williams, p. 27, 1995)


Alinhamento1

Alinhamento

  • Exercício 2: Resolva o problema de alinhamento do cartão.


Repeti o

Repetição

  • A repetição é o princípio que prega que algum aspecto do design deve repetir-se no material inteiro, conforme diz Williams. Este aspecto pode ser qualquer elemento que o leitor reconheça visualmente.

  • O elemento repetitivo pode ser uma fonte em bold (negrito), um fio (linha) grosso, algum sinal de tópico, um elemento do design, algum formato específico, relações espaciais etc. (Williams, p. 43, 1995)

  • Williams coloca no seu livro que elementos de repetição como fonte em negrito, linhas grossas, marcadores de litas, color, elementos de design, formato, relações espaciais e outros podem dar um reconhecimento visual ao relacionamento dos elementos. 


Repeti o1

Repetição

  • Exercício 3: Resolva o problema de repetição do cartão.


Contraste

Contraste

  • Contraste é o princípio que funciona como um atrativo visual e cria uma hierarquia organizacional. Williams define o contraste como algo que realmente faz com que uma pessoa queira olhar para um determinado produto gráfico.

  • ... para o contraste ser realmente eficaz, ele deve ser forte. (...) Cria-se o contraste quando dois elementos são diferentes. Se eles diferirem um pouco mas não muito, não acontecerá contraste e sim um conflito. (Williams, p.53, 1995)


Contraste1

Contraste

  • Contraste pode ser criado em várias maneiras, como por exemplo:

    • Letras grandes e pequenas;

    • Linhas finas e grossas;

    • Cores quentes e cores frias;

    • Elementos horizontais e verticais;

    • Figura pequena e figura grande.

  • O exemplo pode ser visto no próximo slide. Observe que a figura da direita é muito mais fácil de ler que a da esquerda. 


Contraste2

Contraste


Princ pios b sicos de design1

Princípios Básicos de Design

  • Estes conceitos básicos aqui apresentados podem dar soluções muito simples que vão auxiliar imensamente na leitura e visualização da maioria das telas.

  • Tais ferramentas são extremamente úteis no começo, portanto, pratique bastante e compare seus trabalhos com os de profissionais. Vá atrás e estude bastante para poder melhorar sempre.


Exerc cio

Exercício

  • Aplique os conceitos de design para a construção de uma tela de cadastro (Web) no Visual Studio .Net.

  • Cadastro de carros a venda – Loja de veículos:

    • Dados da Loja

      • Nome, Logo..

    • Dados pessoais

      • Nome, endereço, CEP, cidade, estado, telefone, e-mail, celular

    • Dados do Carro

      • Marca, ano, cor, modelo, kilometragem, foto

    • Ações


Bibliografia

BIBLIOGRAFIA

Básica:

  • JAKOB NIELSEN, Projetando Websites. São Paulo. Campus, (2000). ISBN 8535206566.

  • OLIVEIRA NETTO, A. A. IHC - Modelagem e Gerência de Interfaces com o Usuário. Visual Books, (2004). ISBN 8575021389.

  • Williams, Robin / Tollett, John, Web Design para Não Designers. Ciência Moderna (1995) ISBN: 8573931485

    Complementar:

  • PAULA FILHO, W. P. Engenharia de Software: fundamentos, métodos e padrões. Rio de Janeiro. LTC, (2003). ISBN 8521613393.

    Apoio:

  • Prof. Daniel Di Domênico pelo material e orientação.


  • Login