Design Web Introduçao

Tamanho: px

Começar a partir da página:

Download "Design Web Introduçao"

Jerónimo das Neves Silva
8 Há anos
Visualizações:

1 Design Web Introduçao TSI Elisa Maria Pivetta Sinto, penso, logo desenho

2 Comunicação olfato, paladar, tato, visão e audição, Geralmente lembramos: 10% do que lemos 20% do que ouvimos 30% do que vemos 50% do que vemos e ouvimos 70% do que dizemos quando falamos 90% do que dizemos quando fazemos algo

3 Processos de comunicação 1 -Comunicação pelo Gosto ou Degustativa (Memória Degustativa) É a comunicação que vem do gosto, pelo toque da língua, bem como pela ação de beber ou comer. O índice de eficiência é cerca de 1%.

4 Processos de comunicação 2 -Comunicação pelo Tato ou Táctil (Memória Táctil) É a comunicação que vem pelo tato, tanto das mãos (mais sensível) como por outras partes do corpo. Isoladamente o grau de eficiência é de 1,5%.

5 Processos de comunicação 3 -Comunicação pelo Olfato ou Olfativa (Memória Olfativa) É a comunicação que vem pelo olfato, ou seja, o nariz sente um cheiro e levado ao cérebro. O índice de eficiência é da ordem de 3,5%.

6 Processos de comunicação 4 -Comunicação pela Audição ou Auditiva (Memória Auditiva) É a comunicação que vem pelo que se ouve, ou seja, os ouvidos transmitem ao cérebro o que ouvem, levando ao cérebro as informações captadas. O índice de eficiência é da ordem de 9%.

7 Curiosidade

8 Processos de comunicação 5 -Comunicação Táctil pela Escrita (Memória Mecânica) É a comunicação que vem pela caligrafia quando se copia ou se registra idéias e fatos que se vê ou imagina, ou seja, o ato de escrever de próprio punho, ativa um mecanismo chamado "memória mecânica". Esta memória combina a memória visual com a do tato, tendo um índice de eficiência da ordem de 10%.

9 Processos de comunicação 6 -Comunicação pela Visão (Memória Visual) É a comunicação que vem pelos olhos e é responsável por cerca de 75% do que se grava na memória.

10 Visual

12 A comunicação através da memória visual pode ser captada por 4 formas diferentes: 6.1 -Comunicação Escrita (Memória Visual) É a comunicação que vem através de um documento escrito, em papel ou numa tela O índice de eficiência da leitura de textos em papel é maior do que em tela.

13 6.2 -Comunicação Gráfica (Memória Visual) É a comunicação que vem através de símbolos, desenhos, plantas, diagramas, ícones, fotos ou outros recursos gráficos isoladamente. É o caso da maioria das placas de trânsito, onde um único símbolo tenta traduzir o que a placa representa, de forma rápida e eficaz. Sabe-se que 80% das coisas que se vê são captadas por símbolos, desenhos, etc.

14 6.3 -Comunicação Visual (Memória Visual) É a comunicação que vem da junção da comunicação gráfica com a escrita, onde um símbolo, desenho, etc., vem acompanhado de palavras-chave ou textos que complementam o símbolo, desenho, etc. Usando o mesmo exemplo de placas de trânsito, há uma placa que significa "cuidado, pista derrapante" mas que pode vir acompanhado da expressão "Em dias de chuva".

15 6.4 -Comunicação Áudio-Visual (Memória Visual e Auditiva) É a comunicação que junta a comunicação Visual, com a auditiva. É considerada a mais eficiente de todas. O dispositivo cognitivo do cérebro ativa os dois principais sentidos, chegando-se a um índice de cerca de 84% de eficiência

Pintura rupestre (Cova de Altamira, Espanha Os gráficos tiveram avanço com o aparecimento das

16 Histórico Design Diversos materiais para mensagens visuais. Pintura rupestre e desenho em pedra. Pintura rupestre (Cova de Altamira, Espanha Os gráficos tiveram avanço com o aparecimento das linguagens escritas Eram dispostos numa estrutura definida, capazes de transmitir mensagens entendíveis pela comunidade Gravura em pedra com hieroglífico (Egito) Papel Papiro dos mortos

Histórico Design Incunábulo Primeiros livros impressos Importância da "FORMA" (design) para transmitir uma mensagem 1509 - Hermão de Kempis

17 Histórico Design Incunábulo Primeiros livros impressos Importância da "FORMA" (design) para transmitir uma mensagem Hermão de Kempis imprime Ho compromisso e regimento dos officiaes da sancta confraria da Mesericordia. primeira página de um incunábulo da Divina Comedia de 1472

18 Histórico - Design Johann Gutenberg ( ) - inventou a imprensa Artefato capaz de reproduzir em grandes quantidades e de forma cômoda um original. A sua contribuição foi a da introdução de tipos (caracteres) de metal e o desenvolvimento de tintas à base de óleo. Aperfeiçou uma prensa gráfica, inspirada nas prensas utilizadas para espremer as uvas na fabricação do vinho. Johann Gutenberg

19 Histórico - Designer Revolução Industrial convencer o público das vantagens de um produto ou marca mensagens concisas, componentes psicológicos, desenhos bem elaborados apresentar mensagens visuais efetivas grandes investimentos, tornando possível um grande avanço nas técnicas de design e no aparecimento de profissionais dedicados exclusivamente a desenvolvelas e colocá-las em prática: os designers gráficos.

20 Histórico - Designer Design gráfico Design de produto Design automobilístico Design de embalagem Design de mobiliário Design de moda.. Com a Internet Design Web

25 Slogan Marcantes: A gente veio aqui para beber ou conversar Não esqueça da minha Tem mil e uma utilidades Uma boa Idéia Um raro prazer É impossível comer um só De férias para seus pés Vale por um bifinho Parece mas não é Bons momentos pedem um bom café As amarelinhas Legitimas só Terrível contra os insetos Energia que dá gosto.tão Bonitinho Abra a boca é

Design gráfico processo de programar, projetar, coordenar, selecionar e organizar elementos para produzir objetos visuais destinados a comunicar Função - transmitir a informação por meio de

26 Design gráfico processo de programar, projetar, coordenar, selecionar e organizar elementos para produzir objetos visuais destinados a comunicar Função - transmitir a informação por meio de composições gráficas, que chegam ao público através de diferentes suportes, como folhetos, cartazes, trípticos, etc. O resultado final de um design gráfico denominase grafismo, e é uma unidade por si mesma, embora esteja composto por uma infinidade de elementos diferentes. trípticos

Web design Extensão da prática do design Foco na criação de web sites O web design tende à multidisciplinaridade, uma vez que a construção de páginas web requer subsídios de diversas áreas técnicas,

27 Web design Extensão da prática do design Foco na criação de web sites O web design tende à multidisciplinaridade, uma vez que a construção de páginas web requer subsídios de diversas áreas técnicas, além do design propriamente dito. Áreas como a arquitetura da informação, programação, usabilidade, acessibilidade entre outros. Agregar os conceitos de usabilidade com interface, garantindo que o usuário final atinja seus objetivos de forma agradável e intuitiva.

28 Layout O layout precisa transmitir a informação desejada com eficiência. É preciso que o layout seja um elo de comunicação com o usuário que sua linguagem seja condizente com o objetivo do site. Conhecer heurísticas de usabilidade é fundamental para se gerar layouts para a web. Cada elemento inserido em um website deve ter um objetivo, a perfeição de um website se atinge quando não há nada a ser retirado e não quando não há nada mais a ser inserido.

29 Navegadores (Browser) Responsáveis por interpretar o conteúdo web A variedade de navegadores e discrepância entre os recursos fez seus próprios criadores caminharem em direção a um padrão comum. seguir os padrões da W3C (Web Standards) é um bom hábito testar projeto em mais de um navegador (Firefox, Internet Explorer, Netscape,Opera, Safari, Chrome e outros)

30 Programas - construção do código Existe um leque enorme Qualquer editor de texto Há programas com interface WYSIWYG Dreamweaver, Aptana, Expression Web... Na parte visual, os editores gráficos vetoriais Corel Draw, Illustrator ou o Inkscape, GIMP e Fireworks ou Photoshop. Para animações e recursos dinâmicos, o Flash e... HTML5

31 Atenção Em relação ao Flash Usá-lo apenas onde a solução seja impossível de ser reproduzida em HTML Não se usa em menus e áreas de conteúdo por ser um arquivo binário, não ser acessível e estar em desacordo com as recomendações do W3C.

32 Exercícios Em grupo de dois alunos 1. Escolha dois exemplos que você considera um bom design gráfico 2. Escolha dois exemplos de sites que você considera um bom design 3. Escolha dois exemplos que você considera um péssimo design gráfico 4. Escolha dois exemplos de sites que você considera um péssimo design 5. Justifique o porquê da escolha (para todas as situações) e descrevam os itens que levaram a tomada de decisão. 6. Apresentar para toda a turma (uso os recursos que achar necessário para apresentar seja criativo)

33 ml

Documentos relacionados

BRANDING & IDENTIDADE PODE SER DEFINIDO COMO O ATO DE ADMINISTRAR A IMAGEM/MARCA DE UMA EMPRESA. TUDO ISTO ATRAVÉS DO DESIGN DE COMUNICAÇÃO.

BRANDING & IDENTIDADE PODE SER DEFINIDO COMO O ATO DE ADMINISTRAR A IMAGEM/MARCA DE UMA EMPRESA. O OBJETIVO DO BRANDING É ENTRE OUTROS, AUMENTAR O ATIVO E O VALOR MONETÁRIO DA MARCA, E ASSIM AUMENTAR O