4ª e 5ª aulas

7/31/2019 4 e 5 aulas

1/5

26/08/20

INTERFACE HOMEM MQUINAAbordagens Tericas IHCDesign de Interfaces: Processo de Design, Formas e Cores

4 aula Interface Homem Mquina5 aula Interface Homem MquinaLeonardo Coelho

ABORDAGENS TERICAS INTERFACE HOMEM MQUINA

SEMITICA

Estudo dos SINAIS e como eles so aplicados na COMUNICAO.

ENGENHARIA SEMITICA

- Termo que define a abordagem para o design de linguagens de interfaces (explicativo).

- Teoria Semitica da Interface Homem Mquina (evoluo do termo)

-Os elementos visuais computacionais so objetos que comunicam uma mensagem(metacomunicao).

-Explica a comunicao entre designers, usurios e sistemas.

ENGENHARIA SEMITICA

COMO O DESIGNER COMUNICA COM O USURIO

1- Atravs das Metamensagensdefinindo: como os usurios podem e devem utilizaro sistema, definindo o por que e com que efeitos.

2- Atravs dos dois nveis de comunicao-Direta usurio-sistema-Metacomunicao do designer para o usurio via interface

Contedo da metamensagem:

o entendimento do designer de quem o usurio, do que ele quer e precisa, de quemaneira ele prefere fazer e por que.

Portanto o sistema que o designer ir projetar contemplar a forma como o usurio

pode e deve utiliz-lo para alcancar os seus objetivos.

ENGENHARIA SEMITICA

AO DO DESIGNER

1- Conhecer e estudar o usurio;2- Saber o que os usurios precisam e necessitam;3- Expressar todo o conhecimento atravs dos elementos visuais de comunicao.

AO DO USURIO

1- Decodificar e entender as metamensagens disponibilizadas pelo designer;2- Atribuir sentido nas mensagens (processo de comunicao);3- Preparar para receber e utilizar as mensagens.

DESIGN DE INTERFACES

REGRAS BSICAS DE DESIGN

Coloque contedo em todas as pginasO design no deve ser meramente decorativo.

Tambm deve agregar informao.

Seja ObjetivoNo faa rodeios com a navegao.

Conduza as pessoas informao com o mnimo de cliques possveis.

Nunca aplique muito texto em maisculasAs fontes foram criadas para serem usadas com as letras maisculas e minsculas.

Use no mximo trs famlias de tiposMostre que, em design, quantidade no sinnimo de qualidade.

Faa das cores o carro-chefe do seu siteAs cores so os olhos do site.

1

2

3

4

5

7/31/2019 4 e 5 aulas

2/5

26/08/20

REGRAS BSICAS DE DESIGN

nqua re em suas magensA imagem o ltimo recurso de design para uma pgina.

Se ela tiver que aparecer, foque aquilo que vc quer mostrar.

Crie uma cara para todo o siteTodas as pginas do site devem ter uma identidade consistente.

Nunca esquea que web no jornalA www tem suas prprias caractersticas. Antes de fazer o design de uma pgina na web,pense nisso!

Voc o webdesigner e ele o webmaster.Cada macaco no seu galho. Saiba como funcionam as ferramentas mas escute o que oferramenteiro tem a dizer.

Crie suas regrasNada de copiar frmula dos outros! Conhea-as, mas crie a sua!

6

7

DESIGN - PLANEJAMENTO

TRANSFORMAR EM COMUNICAO VISUAL (DESIGN)

LAYOUT

PROBLEMA / NECESSIDADE DO

CLIENTE

INTERATIVIDADE USABILIDADE

MARKETING CUSTO /INVESTIMENTOCONTEDO

(INFORMAO

ELEMENTOS VISUAIS - TIPOGRAFIA

VISIBILIDADE:

LEGIBILIDADE:

LEITURABILIDADE:

Esta relacionado diretamente ao tamanho dasletras ou blocos de textosEx: Ttulos / subttulos / texto legenda / corpo do texto

Esta relacionado a forma e o tipo das letrasEx: para blocos de textos = Letras com serifa

Esta relacionado diretamente ao textoEx: O contedo do texto (entendimento)


As letras e textos so caracterizados e conceituados peloelemento grfico tipografia, que tem por objetivo principaltransmitir mensagens e informaes nas peas grficas, de formaclara e entendvel, respeitando a cultura de cada povo e nodeixando dvidas sobre o teor do seu contedo e, a suarepresentao grfica, atravs dos tipos e estilos, soresponsveis por facilitar esta ao.

Tcnicas de design:

1- Para textos longos usado de preferncias as letras comserifa, muito utilizadas em jornais, livros, cartilhas e outros.

2- Para textos longos em ambiente virtual, usado de preferncia

letras sem serifa, facilitando a sua interpretao visual atravsdos monitores. Proporcionando conforto visual para o usurio.


As letras podem ser classificada tambm por srie (estilos). As fontes criadas so

disponibilizadas tambm com a opo de inclinaes, tonalidades e larguras diferentes.Inclinaes: as letras inclinadas tem o nome de itlicos ou grifos e geralmente sodirecionadas para o lado direito, para imitir a letra cursiva.

Tonalidades: est ligada a fora da letra, relao entre a espessura das hastes eseu espao em branco, so conhecidas como bold ou negrito, com variaes como oextrabold e o semibold. E as letras com as hastes mais finas so denominadas light

ou extralight.

Laguras: as larguras podem ser expandidas ou condensadas. A utilizao desterecurso pode prejudicar a legibilidade das letras, porm um recurso muito utilizadopara determinar atributos s mensagens a serem transmitidas.

As letras so produzidas para a aplicao em caixas altas (letras maisculas), caixasbaixas (minsculas), versaletes (desenhos em maisculas, mas com altura deminsculas) e versal-versaletes (maisculas na primeira letra da palavra e versalete naseguintes).

ELEMENTOS VISUAIS - CORES

As cores que utilizamos nas interfaces tem como objetivo transferir uma mensagem

criando um clima ou ambiente favorvel.

7/31/2019 4 e 5 aulas

3/5

26/08/20


Cores na nossa conversao para descrever estados mentais e de existncia:

- Azul de fome

- Riso amarelo

- Verde de cimes

- Vermelho de raiva


Cores em nossos guarda-roupas:

- Cores claras para o vero;

- Cores escuras para o inverno;

- Branco para casamento;

- Preto para funerais;

- Azul para meninos e rosa para meninas.


LISTA DE ASSOCIAES COM AS CORES COMUNS:

VERMELHO:quente, pare, erro, aviso, fogo, coragem, agresso.

ROSA: feminino, gracioso

LARANJA: quente, comida, outonal

AMARELO: felicidade, ensolarado, alegria, devagar, cuidado, ateno

MARROM: quente, outono, sujo

VERDE: inveja, cimes, novato, pastoral, primaveril, fertilidade, esperana

AZUL: paz, gua, tristeza, masculino

PRETO:mal, fantasmagrico, morte, medo, lamentao, noite

CINZA: obscuro, escurido, velhice

BRANCO: puro, inocente, frio, paz


As cores tem o comportamento alterado, dependendo da intensidade da luz que emanada e das caractersticas do suporte (impresso ou digital).

No existe cor sem outra cor, os chamados contrastes entre cores so excelentesopes para o uso delas, desde que utilizadas com pesos diferentes.

Para aplicar estes conceitos, necessrio conhecer como a mdia impressa e/ou virtualtrabalha com as cores.

Por definio e direcionamento, as cores com sntese aditiva so aplicadas na mdiavirtual/eletrnica (ex: Interface grfica), e as cores com sntese subtrativa nas mdiasimpressas (ex: jornais e revistas).


CORES ADITIVAS

Na mdia digital/eletrnica usado este princpio para a reproduo das cores.

Com a mistura do tom e as variaes de tonalidades do vermelho (R Red), do verde(G Green) e do azul-violeta (B Blue) possvel criar novas cores.

A escala RGB utilizada na criao das imagens e objetos com foco na mdiavirtual/eletrnica, que tem como princpio de impresso a luz (monitor, televiso,datashow e outros).


CORES SUBTRATIVAS

O processo de impresso grfica das cores feita atravs da mistura das tintas.Quando somado cores subrativas em uma mesma superfcie, o resultado reduzir acor refletida pela superfcie. Se somarmos as trs cores bsicas subtrativas obteramoso PRETO, porm isso no acontece porque no exitem pigmentos de tintassuficientemente puros, e ento a mistura das trs cores criariam um cinza escuro.

Por esta caracterstica que o processo de cores para a mdia impressa incluiu o pretoem sua escala, ficando C (ciano), M (magenta), Y (amarelo) e o K (preto).

7/31/2019 4 e 5 aulas

4/5

26/08/20

ELEMENTOS VISUAIS - IMAGENS

Nas interfaces grficas as imagens tem lugar garantido, representando momentos,ilustrando ideias ou interagindo com o texto para promover uma melhor comunicao.

As imagens so usadas tambm para instruir ou dar apoio ao entendimento deorientaes. Elas so usadas tambm para criar estmulos visuais.

As imagens tem o poder de enfatizar um texto e construir mensagens.

Elas podem ser caracterizadas como:

Imagem que informa: passar informaes ao pblico sem juzo de valores.

Imagem que explica: explicar um momento, uma ao ou uma srie deacontecimentos.

Imagem direta: indica uma opinio.

Imagem de expresso: transmite emoo.


Atualmente, aps a captura, as imagens podem ser criadas e produzidas em softwaresespecficos, seguindo orientaes e especificaes do layout.

O conceito e a mensagem que se quer passar pelas imagens, so preparados nestesambientes grficos.

A produo das imagens so chamadas de imagens digitais,

e podem ser copiadas, modificadas e reajustadas conformea necessidade da pea de comunicao.


Imagens bitmap (raster): formada por uma srie de pontos definidos por valoresnumricos, formando uma malha de pontos (cada ponto chamado de pixel). No aconselhado redimensionar uma imagem fotogrfica, prejudicando assim a suaqualidade visual.

Imagens vetoriais: so imagens criadas a partir de objetos como a reta, pontos,curvas, polgonos e outros. Tem como principal caracterstica o redimensionamento etransformao dos objetos criados, sem perder qualidade visual.


O designer quando utiliza uma imagem, que no foi criada por ele, sempre tem que citaro criador da mesma, esta ao denominada crdito das imagens (regulamentado

pela lei 9.610, que normatiza a questo do direito autoral).

No pense que as imagens que esto na internet so livres, verifique sempre quem odono ou criador, e pea por escrito a autorizao para utiliz-las.

Outra dica importante conhecer a lei 9.610, que altera, atualiza e consolida a

legislao sobre direitos autoriais e d outras providncias. No site do Governo Federalbrasileiro, possvel obter a lei na ntegra:

www.planalto.gov.br/ccivil_03/leis/L9610.html (acesso em outubro/2011).

ELEMENTOS VISUAIS DIAGRAMA DE CONSTRUO (GRIDE)

Os diagramas de construo so reflexos da criatividade do designer, na ordenao eestruturao dos elementos visuais (textos, imagens, banners, anncios e outros) em

uma rea pr-determinada denominado: INTERFACE GRFICA.

O layout e/ou prottipo de uma interface grfica criado sob um diagrama deconstruo.

Rafe ou rascunho Diagrama de Construo Layout e/ou Prottipo

ATIVIDADE PRTICA EM DUPLA

Valor: 02 pontosEntregar na prxima aula

1) Pesquisar 04 sites, considerados bons naaplicao das tcnicas de design.

2) Pesquisar 04 sites, considerados ruins naaplicao das tcnicas de design.

3) Explicar, conforme as tcnicas de design, oporque da escolha e as principaiscaractersticas e defeitos dos 08 sites.

4) Escolher um site, considerado ruim naaplicao das tcnicas de design, e proporuma reestruturao, atravs da tcnica dorafe em uma folha de diagrama.

5) Entregar o relatrio contendo: capa, textoda pesquisa e a reestruturao (impresso).

7/31/2019 4 e 5 aulas

5/5

26/08/20

Aula 4 e 5 prof. Leonardo CoelhoInterface Homem Mquina

4ª e 5ª aulas

Documents

Transcript of 4ª e 5ª aulas