www.leocoelho.net/interacao INTERAÇÃO HUMANO COMPUTADOR Abordagens Teóricas IHC Design de Interfaces: Processo de Design, Formas e Cores CONTEÚDO 04 1º SEMESTRE DE 2017 Prof. Leonardo Coelho ABORDAGENS TEÓRICAS INTERFACE HOMEM MÁQUINA SEMIÓTICA Estudo dos SINAIS e como eles são aplicados na COMUNICAÇÃO. - Termo que define a abordagem para o design de linguagens de interfaces (explicativo). - Teoria Semiótica da Interface Homem Máquina (evolução do termo) -Os elementos visuais computacionais são objetos que comunicam uma mensagem (metacomunicação). -Explica a comunicação entre designers, usuários e sistemas. COMO O DESIGNER COMUNICA COM O USUÁRIO 1- Através das Metamensagens definindo: como os usuários podem e devem utilizar o sistema, definindo o por que e com que efeitos. 2- Através dos dois níveis de comunicação -Direta usuário-sistema -Metacomunicação do designer para o usuário via interface Conteúdo da metamensagem: É o entendimento do designer de quem é o usuário, do que ele quer e precisa, de que maneira ele prefere fazer e por que. Portanto o sistema que o designer irá projetar contemplará a forma como o usuário pode e deve utilizá-lo para alcancar os seus objetivos. AÇÃO DO DESIGNER 1- Conhecer e estudar o usuário; 2- Saber o que os usuários precisam e necessitam; 3- Expressar todo o conhecimento através dos elementos visuais de comunicação. AÇÃO DO USUÁRIO DESIGN DE INTERFACES 1- Decodificar e entender as metamensagens disponibilizadas pelo designer; 2- Atribuir sentido nas mensagens (processo de comunicação); 3- Preparar para receber e utilizar as mensagens.
REGRAS BÁSICAS DE DESIGN REGRAS BÁSICAS DE DESIGN 1 2 3 4 5 Coloque conteúdo em todas as páginas O design não deve ser meramente decorativo. Também deve agregar informação. Seja Objetivo Não faça rodeios com a navegação. Conduza as pessoas à informação com o mínimo de cliques possíveis. Nunca aplique muito texto em maiúsculas As fontes foram criadas para serem usadas com as letras maiúsculas e minúsculas. Use no máximo três famílias de tipos Mostre que, em design, quantidade não é sinônimo de qualidade. Faça das cores o carro-chefe do seu site As cores são os olhos do site. 6 7 Enquadre bem suas imagens A imagem é o último recurso de design para uma página. Se ela tiver que aparecer, foque aquilo que vc quer mostrar. Crie uma cara para todo o site Todas as páginas do site devem ter uma identidade consistente. Nunca esqueça que web não é jornal A www tem suas próprias características. Antes de fazer o design de uma página 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 o ferramenteiro tem a dizer. Crie suas regras Nada de copiar fórmula dos outros! Conheça-as, mas crie a sua! DESIGN - PLANEJAMENTO INTERATIVIDADE MARKETING PROBLEMA / NECESSIDADE DO CLIENTE CONTEÚDO (INFORMAÇÃO TRANSFORMAR EM COMUNICAÇÃO VISUAL (DESIGN) LAYOUT USABILIDADE CUSTO / INVESTIMENTO VISIBILIDADE: Esta relacionado diretamente ao tamanho das letras ou blocos de textos Ex: Títulos / subtítulos / texto legenda / corpo do texto LEGIBILIDADE: Esta relacionado a forma e o tipo das letras Ex: para blocos de textos = Letras com serifa LEITURABILIDADE: Esta relacionado diretamente ao texto Ex: O conteúdo do texto (entendimento) As letras e textos são caracterizados e conceituados pelo elemento gráfico tipografia, que tem por objetivo principal transmitir mensagens e informações nas peças gráficas, de forma clara e entendível, respeitando a cultura de cada povo e não deixando dúvidas sobre o teor do seu conteúdo e, a sua representação gráfica, através dos tipos e estilos, são responsáveis por facilitar esta ação. Técnicas de design: 1- Para textos longos é usado de preferências as letras com serifa, muito utilizadas em jornais, livros, cartilhas e outros. 2- Para textos longos em ambiente virtual, é usado de preferência letras sem serifa, facilitando a sua interpretação visual através dos monitores. Proporcionando conforto visual para o usuário. As letras podem ser classificada também por série (estilos). As fontes criadas são disponibilizadas também com a opção de inclinações, tonalidades e larguras diferentes. Inclinações: as letras inclinadas tem o nome de itálicos ou grifos e geralmente são direcionadas para o lado direito, para imitir a letra cursiva. Tonalidades: está ligada a força da letra, é à relação entre a espessura das hastes e seu espaço em branco, são conhecidas como bold ou negrito, com variações como o extrabold e o semibold. E as letras com as hastes mais finas são denominadas light ou extralight. Laguras: as larguras podem ser expandidas ou condensadas. A utilização deste recurso pode prejudicar a legibilidade das letras, porém é um recurso muito utilizado para determinar atributos às mensagens a serem transmitidas. As letras são produzidas para a aplicação em caixas altas (letras maiúsculas), caixas baixas (minúsculas), versaletes (desenhos em maiúsculas, mas com altura de minúsculas) e versal-versaletes (maiúsculas na primeira letra da palavra e versalete na seguintes).
As cores que utilizamos nas interfaces tem como objetivo transferir uma mensagem criando um clima ou ambiente favorável. Cores na nossa conversação para descrever estados mentais e de existência: - Azul de fome - Riso amarelo - Verde de ciúmes - Vermelho de raiva Cores em nossos guarda-roupas: - Cores claras para o verão; - Cores escuras para o inverno; - Branco para casamento; - Preto para funerais. LISTA DE ASSOCIAÇÕES COM AS CORES COMUNS: VERMELHO: quente, pare, erro, aviso, fogo, coragem, agressão. LARANJA: quente, comida, outonal AMARELO: felicidade, ensolarado, alegria, devagar, cuidado, atenção MARROM: quente, outono, sujo VERDE: inveja, ciúmes, novato, pastoral, primaveril, fertilidade, esperança AZUL: paz, água, tristeza CINZA: obscuro, escuridão, velhice BRANCO: puro, inocente, frio, paz As cores tem o comportamento alterado, dependendo da intensidade da luz que é emanada e das características do suporte (impresso ou digital). Não existe cor sem outra cor, os chamados contrastes entre cores são excelentes opções para o uso delas, desde que utilizadas com pesos diferentes. Para aplicar estes conceitos, é necessário conhecer como a mídia impressa e/ou virtual trabalha com as cores. Por definição e direcionamento: as cores com síntese aditiva são aplicadas na mídia virtual/eletrônica (ex: Interface gráfica); e as cores com síntese subtrativa nas mídias impressas (ex: jornais e revistas). CORES ADITIVAS Na mídia digital/eletrônica é usado este princípio para a reprodução das cores. Com a mistura do tom e as variações de tonalidades do vermelho (R Red), do verde (G Green) e do azul-violeta (B Blue) é possível criar novas cores. A escala RGB é utilizada na criação das imagens e objetos com foco na mídia virtual/eletrônica, que tem como princípio de impressão a luz (monitor, televisão, datashow e outros).
CORES SUBTRATIVAS O processo de impressão gráfica das cores é feita através da mistura das tintas. Quando é somado cores subrativas em uma mesma superfície, o resultado é reduzir a cor refletida pela superfície. Se somarmos as três cores básicas subtrativas obteríamos o PRETO, porém isso não acontece porque não exitem pigmentos de tintas suficientemente puros, e então a mistura das três cores criariam um cinza escuro. Por esta característica é que o processo de cores para a mídia impressa incluiu o preto em sua escala, ficando C (ciano), M (magenta), Y (amarelo) e o K (preto). Nas interfaces gráficas as imagens tem lugar garantido, representando momentos, ilustrando ideias ou interagindo com o texto para promover uma melhor comunicação. As imagens são usadas também para instruir ou dar apoio ao entendimento de orientações. Elas são usadas também para criar estímulos visuais. As imagens tem o poder de enfatizar um texto e construir mensagens. Elas podem ser caracterizadas como: Imagem que informa: passar informações ao público sem juízo de valores. Imagem que explica: explicar um momento, uma ação ou uma série de acontecimentos. Imagem direta: indica uma opinião. Imagem de expressão: transmite emoção. Atualmente, após a captura, as imagens podem ser criadas e produzidas em softwares específicos, seguindo orientações e especificações do layout. O conceito e a mensagem que se quer passar pelas imagens, são preparados nestes ambientes gráficos. A produção das imagens são chamadas de imagens digitais, e podem ser copiadas, modificadas e reajustadas conforme a necessidade da peça de comunicação. Imagens bitmap (raster): é formada por uma série de pontos definidos por valores numéricos, formando uma malha de pontos (cada ponto é chamado de pixel). Não é aconselhado redimensionar uma imagem fotográfica, prejudicando assim a sua qualidade visual. Imagens vetoriais: são imagens criadas a partir de objetos como a reta, pontos, curvas, polígonos e outros. Tem como principal característica o redimensionamento e transformação dos objetos criados, sem perder qualidade visual. ELEMENTOS VISUAIS DIAGRAMA DE CONSTRUÇÃO (GRIDE) O designer quando utiliza uma imagem, que não foi criada por ele, sempre tem que citar o criador da mesma, esta ação é denominada crédito das imagens (regulamentado pela lei 9.610, que normatiza a questão do direito autoral). Não pense que as imagens que estão na internet são livres, verifique sempre quem é o dono ou criador, e peça por escrito a autorização para utilizá-las. Outra dica importante é conhecer a lei 9.610, que altera, atualiza e consolida a legislação sobre direitos autoriais e dá outras providências. No site do Governo Federal brasileiro, é possível obter a lei na íntegra: Os diagramas de construção são reflexos da criatividade do designer, na ordenação e estruturação dos elementos visuais (textos, imagens, banners, anúncios e outros) em uma área pré-determinada denominado: INTERFACE GRÁFICA. O layout e/ou protótipo de uma interface gráfica é criado sob um diagrama de construção. Rafe ou rascunho Diagrama de Construção Layout e/ou Protótipo www.planalto.gov.br/ccivil_03/leis/l9610.html (acesso em outubro/2011).
RESPONDA RÁPIDO Quais foram os pontos mais importantes que você aprendeu durante a aula? ATIVIDADE 1 Tema: OS PIORES SITES DO MUNDO - Selecionar UM SITE que o grupo de trabalho considera ruim, tendo como base o conteúdo da disciplina (termos técnicos). - Preparar uma apresentação eletrônica explicando o site selecionado. Data da apresentação: 14 de MARÇO de 2017 Valor: 04 pontos ATIVIDADE 2 Tema: ATIVIDADE PRÁTICA - Etapa1 e Etapa 2 Data de entrega: 28 de MARÇO de 2017 Valor: 05 pontos INTERAÇÃO HUMANO COMPUTADOR 1º SEMESTRE DE 2017 Prof. Leonardo Coelho