O documento discute elementos do design como tipografia, cores e psicologia das cores. A tipografia é classificada de acordo com o formato da letra e da serifa. As cores são classificadas em primárias, secundárias e terciárias de acordo com sua combinação. A percepção das cores depende da luz e pode ser aditiva ou subtrativa.

1. Elementos do DESIGN As partes do todo

2. Elementos do Design TIPOGRAFIA (Aplicação das Letras nos textos). Classificação quanto: Formato da Letra – forma da fonte. Formato da Serifa – forma do filete que aparece na extremidade das hastes de algumas letras.

3. Formato da Letra Gótica – imitam a escrita de época, utilizados na bíblia de Gutemberg. Romana – baseado nas escritas lapidárias, verticais e com serifa, variando a espessura. Cursiva ou itálica – ligeira inclinação para a direita, algumas imitam o manuscrito. Bastão ou grotesca – caracterizam-se por não possuir SERIFA . Fantasia – podem ter características das anteriores, possuem caráter artístico. Fontes para fins específicos como por exemplo uma família exclusiva para um logotipo.

4. Formato da Serifa Elzevier – serifa triangular com leve curvatura em seus lados. Didot – serifa de traços finos. Egípcia – serifas retangulares e grossas. Bastão ou grotesca – caracterizam-se por não possuir SERIFA . Manuscrita – imitam a escrita manual. Fantasia – não se enquadram nas anteriores. Fontes distintas

5. Critérios na escolha dos tipos O projeto deve agradar o público alvo seguindo-se algumas dicas: Maiúsculas e minúsculas Com ou sem serifa Negrito Achatar Mistura de tipos FONTES EM SITES CAIXA ALTA dificulta a leitura, devendo ser usado para títulos ou manchetes O QUE É SERIFA? Na tipografia, as serifas são os pequenos traços e prolongamentos que ocorrem no fim das hastes das letras. As famílias tipográficas sem serifas são conhecidas como sans-serif (do francês "sem serifa"), também chamadas grotescas (de francês grotesque ou do alemão grotesk). NA TIPOGRAFIA, AS SERIFAS SÃO OS PEQUENOS TRAÇOS E PROLONGAMENTOS QUE OCORREM NO FIM DAS HASTES DAS LETRAS. AS FAMÍLIAS TIPOGRÁFICAS SEM SERIFAS SÃO CONHECIDAS COMO SANS-SERIF (DO FRANCÊS "SEM SERIFA"), TAMBÉM CHAMADAS GROTESCAS (DE FRANCÊS GROTESQUE OU DO ALEMÃO GROTESK). Acho que dificultei a leitura! Agora tenho leitura.

6. Critérios na escolha dos tipos O projeto deve agradar o público alvo seguindo-se algumas dicas: Maiúsculas e minúsculas Com ou sem serifa Negrito Achatar Mistura de tipos FONTES EM SITES Fontes com serifa são indicadas para papel, pois aproximam as letras. As SEM SERIFA, facilitam a leitura em meio digital, pois a serifa sofre distorção. Na tipografia, as serifas são os pequenos traços e prolongamentos que ocorrem no fim das hastes das letras. As famílias tipográficas sem serifas são conhecidas como sans-serif (do francês "sem serifa"), também chamadas grotescas (de francês grotesque ou do alemão grotesk). Na tipografia, as serifas são os pequenos traços e prolongamentos que ocorrem no fim das hastes das letras. As famílias tipográficas sem serifas são conhecidas como sans-serif (do francês "sem serifa"), também chamadas grotescas (de francês grotesque ou do alemão grotesk). Estou com serifa, acho que dificultei a leitura! Aqui a leitura é tranqüila.

7. Critérios na escolha dos tipos O projeto deve agradar o público alvo seguindo-se algumas dicas: Maiúsculas e minúsculas Com ou sem serifa Negrito Achatar Mistura de tipos FONTES EM SITES Para a internet este recurso é útil, pois pode ser usado para destacar um link por exemplo. Cuidado com os exageros! Na tipografia, as serifas são os pequenos traços e prolongamentos que ocorrem no fim das hastes das letras. As famílias tipográficas sem serifas são conhecidas como sans-serif (do francês "sem serifa"), também chamadas grotescas (de francês grotesque ou do alemão grotesk). Na tipografia , as serifas são os pequenos traços e prolongamentos que ocorrem no fim das hastes das letras . As famílias tipográficas sem serifas são conhecidas como sans- serif (do francês "sem serifa"), também chamadas grotesca s ( de francês grotesque ou do alemão grotesk ). Acho que existem destaques demais! Negrito e link. Boa combinação

8. Critérios na escolha dos tipos O projeto deve agradar o público alvo seguindo-se algumas dicas: Maiúsculas e minúsculas Com ou sem serifa Negrito Achatar e alongar Mistura de tipos FONTES EM SITES Evite deformar as fontes, pois ocorre distorção no seu desenho e perda da legibilidade. Na tipografia, as serifas são os pequenos traços e prolongamentos que ocorrem no fim das hastes das letras. As famílias tipográficas sem serifas são conhecidas como sans-serif (do francês "sem serifa"), também chamadas grotescas (de francês grotesque ou do alemão grotesk). Alguma coisa me acertou! Estou legível e em boa forma!

9. Critérios na escolha dos tipos O projeto deve agradar o público alvo seguindo-se algumas dicas: Maiúsculas e minúsculas Com ou sem serifa Negrito Achatar Mistura de tipos FONTES EM SITES Evite usar diversas famílias tipográficas em um mesmo layout. Pode causar perda de identidade visual. Use a mistura para destacar áreas no layout como menus e títulos. Home Empresa Notícias Serviços Fale Conosco Nunca vi tamanha bagunça! Que harmonia!!! MENU Home Empresa Notícias Serviços Fale Conosco MENU

10. FONTES EM SITES Para a página de um site devemos observar os seguintes pontos quanto ao uso do texto: Texto normal (vetorial). Texto como imagem. O texto vetorial é a forma mais utilizada na internet. Devemos ter cuidado, pois a fonte lida pelo navegador deve estar instalada no computador do usuário. Do contrário o sistema trocará a fonte pela fonte padrão do navegador que na maioria das vezes é a Times New Roman. Para evitar o problema usamos as fontes padrão do sistema operacional exemplificadas abaixo: Lista segura. Fontes instaladas nos sistemas Windows e Mac Fontes padrão instaladas nos sistemas Windows Listas retiradas do site: http://typetester.maratz.com/

11. FONTES EM SITES Para a página de um site devemos observar os seguintes pontos quanto ao uso do texto: Texto normal (vetorial). Texto como imagem. O texto como imagem deve ser usado quando queremos colocar no site fontes não padrão. Neste caso transformamos as fontes em bitmap. Mas, atenção use-as com precaução para que a página não fique pesada(Kbytes). Normalmente usamos este artifício quando queremos criar títulos mais interessantes para as páginas. A tipografia (do grego typos - "forma" - e graphein - "escrita") é a arte e o processo de criação na composição de um texto, física ou digitalmente. Assim como no design gráfico em geral, o objetivo principal da tipografia é dar ordem estrutural e forma à comunicação impressa. Tipografia também é um termo usado para a gráfica que usa uma prensa de tipos móveis. Estou como bitmap (imagem). Posso ser visualizada em qualquer sistema operacional.

12. Elemento COR Cores – emoção humana

13. Cores – LUZ Sem luz não existe cor. Ondas e vibrações percebidas pelos olhos. A luz branca decomposta resulta nas milhões de cores da natureza.(Disco de Newton,1666). Constatou-se o mesmo resultado após a união do vermelho (red – R), verde (green – G), Azul (Blue – B), que formam o sistema RGB (cor-luz), presente nos monitores. Então a cor é característica da Luz. Temos a Cor-Luz (Aditiva) e a Cor-Pigmento (Subtrativa).

14. Cores – LUZ A Cor-Luz é a própria cor (luz) emitida pelos monitores e sua somatória (RGB) resulta nas demais cores observadas. A Cor-Pigmento é a luz, que é refletida pelo material (pigmento). Pode ser obtida pela mistura de pigmentos ou combinação de pontos de tinta. O olho humano perceba esse estímulo como cor. No caso da impressão gráfica a mistura dos pigmentos é obtida pela disposição de minúsculos pontos próximos formadas pelo Ciano (Cyan – C), Magenta (M), Amarelo (Yellow – Y) e o Preto (Black – K), o chamado CMYK.(Revistas, jornais e impressos caseiros)

15. Cores – Luz - combinação Combinação ADITIVA Combinação SUBTRATIVA mistura de luzes Vermelho - R Verde - G Azul - B mistura de pigmentos Magenta Amarelo Ciano

16. Cores – Classificação: Primárias: Cores puras que misturadas obtém as demais cores (compostas). Cor – pigmento Magenta – amarelo – ciano Preto é complemento Cor – Luz Vermelho – verde – azul

17. Cores – Classificação: Secundárias: Obtidas pela combinação de duas cores primárias em igual proporção. Cor - luz Cor - pigmento Ciano Amarelo Magenta Verde Azul Vermelho

18. Cores – Classificação: Terciárias: Obtidas pela combinação de uma primária com uma ou mais secundárias. Melhor observadas no circulo cromático (relação entre as cores).

19. Cores – Classificação: Complementares (opostas): Cores opostas no circulo cromático. Dão força e equilíbrio a um trabalho criando contrastes. Raramente se usa apenas cores complementares em um trabalho, o efeito pode ser desastroso. Possuem maior contraste entre si.

20. Cores – Classificação: Quentes e frias: Sensação a nossa percepção por uma cor. Quentes remetem ao sol, fogo e calor, nos trazem maior intensidade(agito, atenção). As frias estão ligadas a água e as temperaturas baixas(calma e tranquilidade). A sensação das cores está ligada ao meio onde está inserida. Ex: Magenta ao lado do laranja é frio, já com o azul torna-se quente. Cores quentes são estimulantes. Servem para chamar a atenção pois são contrastantes. Cores frias são relaxantes. Servem para trazer equilibrio.

21. Cores – terminologia: Matiz: Matiz é a cor em sua máxima intensidade. É a própria cor. Luminosidade: Iluminação de uma cor aproximando-a mais ou menos do branco ou do preto. Saturação: Pureza da cor dentro da escala do cinza a variante mais viva da cor. Tonalidade: Graduação de uma cor com porcentagens de branco ou preto. Matiz Saturação Luminosidade

22. Psicologia das Cores

23. Psicologia das Cores http://www.mariaclaudiacortes.com

24. RGB x CMYK RGB – Cores nos monitores que correspondem a três valores: R ( Red ), G ( Green ), B ( Blue ), varia de 0 (mais escuro) a 255 (mais claro). Ex. Preto (R=0, G=0, B=0). Branco (R=255, G=255, B=255). CMYK – cor de pigmentos no papel, correspondem a 4 valores: C (Cyan), M (Magenta), Y (Yellow), K (BlacK).Varia de 0 a 100%. RGB gera arquivos 30% menores que o CMYK

25. Cor hexadecimal Modo de reconhecimento de cores pela linguagem HTML, composta por 16 caracteres (0,1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F) O mínimo de uma cor é #00 e o máximo é #FF (=255 em RGB). Ex: A cor branca equivale a #FFFFFF. A cor preta equivale a #000000.

26. Até meados da década de 90, muitos sistemas trabalhavam com até 256 cores utilizados no RGB. Os browsers usavam apenas 256 cores para simular todas as cores que não conseguiam apresentar , destas 40 eram utilizadas pelo sistema operacional (20 para o Windows e 20 para o Macintosh) e as outras 216 chamadas de cores seguras da web, garantiam ser visualizadas tanto no Windows como no Macintosh. Utilização Utilizar em cores hexadecimais. Cores para compactação no formato GIF (256 cores). Cores seguras na web 216 cores seguras para a web!

27. Há harmonia entre as cores quando existe equilíbrio entre duas ou mais cores, podendo ser: Harmonia das cores Cores Análogas: Estão lado a lado no circulo de cores e possuem a mesma cor base. Podemos formar composições com degrades de cores vizinhas formando uma escala de cores análogas. Em geral é uma composição elegante.

28. Há harmonia entre as cores quando existe equilíbrio entre duas ou mais cores, podendo ser: Harmonia das cores Cores Triádicas: - Três cores eqüidistantes no círculo das cores. Um triângulo eqüilátero dentro do círculo das cores indica quais são elas. - São vibrantes, contrastantes. Equilibram as cores quentes e frias.

29. Há harmonia entre as cores quando existe equilíbrio entre duas ou mais cores, podendo ser: Harmonia das cores Cores Contrastantes(Quente X Fria): Cores opostas no circulo de cores, sempre com cores quentes e frias. Deve-se considerar qual cor será dominante para atingir o equilíbrio, em geral as cores frias predominam pois as cores quentes são intensas (contrantantes).

30. A cor atrai o usuário para permanecer em um site. Ela deve estar em harmonia com o conteúdo para que o olhar do internauta seja direcionado para regiões específicas do site. O desenho de um site deve levar em conta o publico alvo. A cor deve contribuir para a dinâmica da leitura assim como em harmonia com as imagens para que não concorra com as mesmas. Escolha combinações agradáveis e com vida. Use cores análogas(cores próximas no circulo cromático)com variações de intensidade. Cores contrastantes – visibilidade da cor em relação ao meio que está inserida (ex.: preto e amarelo). Escolher cores adequadas a empresa e as exigências do mercado atual. A maioria dos websites profissionais opta por cores mais claras com cerca de 70 a 80% da área de tela.(destacar o texto) Um website com muitas áreas escuras dificulta a leitura. Prefira sempre as cores mais claras para a maior parte do site, e cores escuras para detalhes do Layout (contraste). Ex. www.dove.com.br (claras) www.espn.com (escuras) Combinação de cores

31. Combinação de cores – metálicos e claros amarelo x azul Verde x branco

32. Combinação de cores cinza x vermelho azul x cinza

33. Combinação de cores cinza x preto preto x vermelho

34. Combinação de cores amarelo x cinza x Laranja bege x branco Site de combinação de cores http://wellstyled.com/tools/ Hexadecimais http://www.colorschemer.com/online.html Combinações de usuários: http://www.colourlovers.com Sites por cores: http://pages.blueidea.com/

35. Recomendações gerais Cuidado ao utilizar o preto - evite utilizar como cor de fundo - sugere amadorismo e dificulta a leitura; Evite misturar dois tons quentes na aparência geral de um layout, procure sempre equilibrar a cor quente com algum tom frio (indicado 1/3 de ton quente para 2/3 de frio); Tons muito luminosos em grande área do layout (por exemplo, branco e amarelo), tendem a incomodar a vista. Evite usar apenas preto e cinza em um site. Quebre a monotonia utilizando uma terceira cor mais alegre; Observe o público-alvo de seu site. Isso determinará a utilização de cores através do estudo das características do público (usuário).

36. Referências sobre cores Cor - http://pt.wikipedia.org/wiki/Cor . Teoria sobre cores (inglês) - http://www.worqx.com/color/index.htm Animações sobre cores - http://www.mariaclaudiacortes.com . Aprenda um pouco sobre a teoria da cor e sua importância no dia-a-dia - http://www.mundocor.com.br/cores.htm . Teoria do design - http://www.imasters.com.br/secao/teoria . Mais teoria de cores - http://www.geocities.com/strani_felicita/teoria.htm . Cor para a web - http://www.artifice.web.pt/tutoriais/cntd/tut_html10.html . Experimentos com cores (inglês) - http://poynterextra.org/cp/colorproject/color.html . Gerador de esquema de cores (inglês) - http://www.wellstyled.com/tools/colorscheme2/index-en.html . Combinação de cores (inglês) - http://www.colourlovers.com .

37. GESTALT: A Gestalt é a escola de psicologia experimental. Estudos sobre a percepção humana criando a psicologia da forma. Leis de Gestalt: É o ABC da leitura visual que permite a análise e interpretação da forma do objeto. Princípios do design

38. Leis da Gestalt: São conclusões sobre o comportamento natural do cérebro, quando age no processo de percepção. Os elementos são agrupados de acordo com as características que possuem entre si. Princípios do design

39. Unidade Nestes objetos a unidade encerra em si mesma, ou seja, em um único elemento, o primeiro a lupa e o segundo a lâmpada. Nesta imagem podemos segregar as seguintes unidades principais: o céu, as arvores, o prédio, o teatro, o chão e a arquibancada. Cada unidade pode ser segregada em subunidades, como as nuvens do céu, o palco do teatro, as sacadas do edifício, os semicírculos do chão e outros.

40. Segregação Nesta cena podemos observar a segregação das unidades principais: o carro, o solo, o céu e as montanhas. Para o veículo pode-se segregar as rodas, a porta, janelas, e outros. Pode-se repetir o processo sucessivamente até se esgotar a percepção das unidades visíveis ou considerá-las suficientes para uma leitura visual. Nesta cena podemos observar unidades segregadas por pontos, linhas, planos, volumes, sombras cores e outros, consubstanciadas pelos objetos do cenário urbano. Como unidades evidentes podemos destacar os prédios, carros, asfalto, calçadas e pedestres.

41. Unificação O símbolo de ying-yang demonstra o fator de unificação pelo equilíbrio simétrico, com pesos visuais contrabalançados e distribuídos homogeneamente. Demonstra harmonia e contraste dos seus elementos tornando a figura mais expressiva. Nesta imagem a torre possui unificação pelos fatores de proximidade e semelhança, em função dos pesos visuais simetricamente contrabalançados e distribuídos homogeneamente. A harmonia da figura apresenta alto grau de ordenação. O contraste de verticalidade confere leveza e elevação à torre.

42. Fechamento O fator de fechamento destas imagens dirigem-se para uma ordem espacial lógica. Existe aqui um fechamento apenas sensorial, integrando as partes. O fator de fechamento destas imagens dirigem-se para uma ordem espacial lógica. Existe aqui um fechamento apenas sensorial, integrando as partes. O fator de fechamento destas imagens dirigem-se para uma ordem espacial lógica. Existe aqui um fechamento apenas sensorial, integrando as partes.

43. Continuidade A repetição ordenada de objetos é uma boa representação de como as unidades se organizam obtendo o efeito de continuidade. Estas estruturas aparecem como um todo, onde a configuração sinuosa passa a sensação de movimento em sintonia com a sua função de proteção valorizando o equilíbrio e a harmonia visual.

44. Proximidade As teclas pretas estão em 2 unidades triplas e 2 unidades duplas intercaladas reforçando o fator proximidade. As brancas reforçam o equilíbrio e a harmonia do objeto como um todo Na carta os símbolos de espadas na área central estão em concordância com o fator proximidade e semelhança.Constituindo unidades dentro do todo.

45. Semelhança Neste celular as teclas são segregadas por suas cores semelhantes tanto na parte superior formadas por duas teclas intermediadas pelo elemento circular, quanto pelas teclas de 1 a #, que proporcionam juntas uma boa unificação do objeto Estes peixes formam um agrupamento por possuir formas semelhantes mesmo que não sendo de mesmo tamanho, o que confere ao conjunto harmonia, ordem e equilíbrio visual.

46. Pregnância da forma Este palácio (Taj Mahal) apresenta elevada pregnância devido a harmonia e equilíbrio visual e simetria. Sua leitura é rápida e imediata. Esta imagem possui baixa pregnância, pois, sua harmonia visual e perturbada por irregularidades e sobreposições de elementos. Exigindo um tempo maior para sua leitura.

47. Harmonia(equilíbrio,ordem,regularidade) Nestas imagens, podemos observar fatores como continuidade, proximidade e semelhança, ordem e sobretudo equilíbrio simétrico com boa distribuição dos pesos visuais Os aviões formam o desenho de um triângulo pelo fator de fechamento, fica claro a harmonia pela ordem, através de sua organização no espaço. Esta parede apresenta um ordem regular pelo alinhamentos dos tijolos, favorecendo a uniformidade dos elementos que estão nivelados em termos de equilibro visual.

48. Equilíbrio

49. Atração:

50. Proporção Pelas dimensões da mão pode-se imaginar a escala do presente. A harmonia e bem ordenada e o contrastes entre o objeto e o fundo torna a composição atraente. É possível avaliar as dimensões do veículo e de suas partes pela referência da figura humana. Visualizamos o contraste pelos pesos de cores estabelecidos pelos tons de cinza em contrastes com as cores quentes e frias conferindo equilíbrio e clareza visual.

51. Movimento Estas imagens o movimento é percebido pelos fatores de sentido, direção realçado pelas figuras estarem numa postura de flutuação conferindo as imagens forte expressividade.

52. Simplicidade Nestas imagens, podemos observar o baixo numero de informações ou unidades visuais organizadas de forma a serem assimiladas , lidas e rapidamente compreendidas.

53. Formas e suas funções: “ A forma pode ser definida como a figura ou imagem visível do conteúdo. De modo mais prático, ela nos informa sobre a natureza da aparência externa de alguma coisa. Tudo que se vê possui forma” Elementos de sinalização. Meio abrangente para representar a função de determinado elemento. Ex: Princípios do design

54. Obs : O estudo das formas da natureza e dos objetos e um grande senso de percepção permitem a criação e reprodução de objetos complexos utilizando formas puras. As formas geométricas são as que são facilmente recordadas pela levando em conta a percepção humana. Triângulo (estabilidade, imponência, equilíbrio, desequilíbrio, dinâmica, impulsividade). Retângulo (centralizador, abrangente) – forma mais utilizada pois respeita a proporção áurea . Quadrado (Simetria e Solidez e igualdade). Circulo (eternidade, estável e neutra, enfatizar elementos) Elipse (Feminina, dinâmica). Polígonos e formas sinuosas (design divertido e até mesmo elegante se utilizados com moderação). Formas e suas funções:

55. Formas e suas funções

56. Referências sobre princípios do design Gestalt – http://pt.wikipedia.org/wiki/Gestalt . Percepção - http://pt.wikipedia.org/wiki/Percepção . Ilusão de óptica - http://pt.wikipedia.org/wiki/Ilusão_de_óptica . Proporção àurea - http://pt.wikipedia.org/wiki/Proporção_áurea . Comunicação gráfica: http://www.ligiafascioni.com.br/artigos/Ponencia41.pdf . Estética - http://usabilidoido.com.br/cat_estetica.html .