Oficina Design para quem não é Designer

705 visualizações

Publicada em

Slides da oficina "Design para quem não é Designer", ministrada durante a Semana do Calouro 2015 do curso de Comunicação Social da Universidade Federal do Pará (UFPA), e teve como objetivo mostrar os diversos caminhos criativos do design gráfico nas duas habilitações (Publicidade e Jornalismo), por meio de noções básicas de algumas técnicas e recursos de planejamento visual e direção de arte. Pretendeu-se apresentar, de forma simples e didática, formas mais harmônicas e compreensíveis da comunicação visual.

Publicada em: Design
0 comentários
5 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
705
No SlideShare
0
A partir de incorporações
0
Número de incorporações
6
Ações
Compartilhamentos
0
Downloads
49
Comentários
0
Gostaram
5
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Oficina Design para quem não é Designer

  1. 1. Noções básicas de planejamento visual Des gn Des gner para quem não é Oficina Semana do Calouro de Comunicação Social UFPA 2015
  2. 2. PUBLICITÁRIA E ILUSTRADORA andrezajacksonv@gmail.com facebook.com/andrezajackson andrezajv.wix.com/portfolio Oficina Design para quem não é designer - noções básicas de planejamento visual Ministrante: Semana do Calouro de Comunicação Social UFPA 2015
  3. 3. Oficina Design para quem não é designer - noções básicas de planejamento visual "Nada deve ser colocado arbitrariamente em um layout". Semana do Calouro de Comunicação Social UFPA 2015
  4. 4. Oficina Design para quem não é designer - noções básicas de planejamento visual O planejamento visual é um processo de ordenamento dos elementos visuais num plano visual. E dividem-se basicamente em 4 princípios: Proximidade Alinhamento Repetição Contraste Princípios básicos de design Semana do Calouro de Comunicação Social UFPA 2015
  5. 5. Oficina Design para quem não é designer - noções básicas de planejamento visual O propósito básico da proximidade é ORGANIZAR. O simples agrupamento de elementos relacionados em proximidade cria uma organização. Informação organizada = LEITURA FÁCIL E MEMORIZAÇÃO Proximidade Semana do Calouro de Comunicação Social UFPA 2015
  6. 6. Semana do Calouro de Comunicação Social UFPA 2015 Oficina Design para quem não é designer - noções básicas de planejamento visual Vejamos a seguir o layout (sem criatividade), centralizado, com espaços iguais para preencher a página. Parecem seis tópicos separados na página, pois cada linha parece ser um elemento individual. Design para quem não é Designer Noções básicas de planejamento visual Ministrante: Andreza Jackson Semana do Calouro de Comunicação Social UFPA 2015
  7. 7. Semana do Calouro de Comunicação Social UFPA 2015 Oficina Design para quem não é designer - noções básicas de planejamento visual Se os itens estiverem relacionados entre si, agrupe-os em proximidade. Separe-os, se eles não estiverem diretamente ligados. Aproximando o título do subtítulo, criamos uma unidade bem-definida, no lugar de seis unidades segmentadas. Ficou nítido que os dois tópicos estão ligados entre si. Distanciando o nome da ministrante e do evento, fica claro que estas informações não fazem parte do título. Design para quem não é Designer Noções básicas de planejamento visual Ministrante: Andreza Jackson Semana do Calouro de Comunicação Social UFPA 2015
  8. 8. Semana do Calouro de Comunicação Social UFPA 2015 Oficina Design para quem não é designer - noções básicas de planejamento visual O maior problema desta lista é que tudo está próximo de tudo, dificultando uma relação ou organização. Cores: Vermelho Azul Verde Amarelo Fontes: Arial Calibri Futura Helvetica Papel: Couchê Sulfite Cartão Cores: Vermelho Azul Verde Amarelo Fontes: Arial Calibri Futura Helvetica Papel: Couchê Sulfite Cartão A mesma lista foi criada por meio de grupos visuais. Acrescentamos um contraste aos títulos e a linha divisória dá-se mais legibilidade, o que torna mais fácil uma relação entre o título e seus tópicos.
  9. 9. Oficina Design para quem não é designer - noções básicas de planejamento visual 1. Itens relacionados entre si devem ser agrupados. 2. Quando vários itens estão próximos tornam-se uma unidade visual e não várias unidades individualizadas. 3. Ajuda a organizar as informações e acaba com a desordem. Regras | Proximidade Semana do Calouro de Comunicação Social UFPA 2015
  10. 10. Oficina Design para quem não é designer - noções básicas de planejamento visual 1. Analise quantos e quais são os elementos visuais da sua página. 2. Veja quais podem ser agrupados num mesmo elemento, para que se tornem uma unidade visual. 3. Evite muitos elementos separados em uma página. 4. Não coloque os itens somente nos cantos ou no meio da página. 5. Não relacione elementos que não dever ser agrupados. Dicas | Proximidade Semana do Calouro de Comunicação Social UFPA 2015
  11. 11. Oficina Design para quem não é designer - noções básicas de planejamento visual Cada elemento deve ter uma ligação visual com outro elemento do layout, criando AMARRAS VISUAIS. Cria uma aparência LIMPA, SOFISTICADA E SUAVE Alinhamento Semana do Calouro de Comunicação Social UFPA 2015
  12. 12. Semana do Calouro de Comunicação Social UFPA 2015 Oficina Design para quem não é designer - noções básicas de planejamento visual Fique atento a cada elemento que você colocar na página. Alinhe cada objeto com uma parte lateral de outro, para que a página inteira fique unificada. Mesmo que o nome da ministrante e do evento esteja distante do título, existe uma conexão visual entre os dois elementos, criada através do alinhamento lateral, que é mais marcante, mais fácil de seguir com os olhos. Design para quem não é Designer Noções básicas de planejamento visual Ministrante: Andreza Jackson Semana do Calouro de Comunicação Social UFPA 2015
  13. 13. Oficina Design para quem não é designer - noções básicas de planejamento visual 1. Esteja consciente do posicionamento dos elementos no layout. 2. Encontre sempre algo a mais na página para fazer o alinhamento, mesmo que os dois objetos estejam fisicamente distantes. 3. Evite usar mais de um alinhamento de texto por página. 4. Evite o alinhamento centralizado. 5. Escolha o alinhamento centralizado consciente e não por automação. Dicas | Alinhamento Semana do Calouro de Comunicação Social UFPA 2015
  14. 14. Oficina Design para quem não é designer - noções básicas de planejamento visual Repetição dos elementos visuais UNIFICA E FORTALECE o layout. É essencial em documentos de muitas páginas, branding e campanhas. É a repetição que cria CONSISTÊNCIA nos materiais. Repetição Semana do Calouro de Comunicação Social UFPA 2015
  15. 15. Semana do Calouro de Comunicação Social UFPA 2015 Oficina Design para quem não é designer - noções básicas de planejamento visual Repetição é uma forma mais marcante de criar consistência em um material. Avalie se é apropriado fazer com que um dos elementos fique mais marcante e utilize-o como o elemento repetitivo. Design para quem não é Designer Noções básicas de planejamento visual Ministrante: Andreza Jackson
  16. 16. Semana do Calouro de Comunicação Social UFPA 2015 Oficina Design para quem não é designer - noções básicas de planejamento visual O ícone de caneta no título se repete no nome da ministrante, fortalecendo a conexão entre ambos. Esse ícone foi acrescentado especialmente para criar uma repetição, apesar de cada um deles apontar para uma direção diferente, a sua forma é suficientemente específica para ser reconhecida em todas as suas incidências na página. A repetição ajuda a unificar elementos separados do design (da diagramação). Design para quem não é Designer Noções básicas de planejamento visual Ministrante: Andreza Jackson
  17. 17. Oficina Design para quem não é designer - noções básicas de planejamento visual 1. O elemento repetitivo pode ser uma fonte, uma cor, algum sinal, um elemento gráfico ou qualquer outro item que se reconheça visualmente. 2. Adapte os elementos a serem repetidos para os diferentes formatos. 3. Evite repetir elemento em demasia, para que ele não se torne excessivo e cansativo. Dicas | Repetição Semana do Calouro de Comunicação Social UFPA 2015
  18. 18. Oficina Design para quem não é designer - noções básicas de planejamento visual O objetivo do contraste é evitar elementos meramente similares em um layout. A diferenciação dos elementos que se interrelacionam cria ATRAÇÃO VISUAL E OS VALORIZA. Contraste Semana do Calouro de Comunicação Social UFPA 2015
  19. 19. Semana do Calouro de Comunicação Social UFPA 2015 Oficina Design para quem não é designer - noções básicas de planejamento visual Você concorda com o fato de que este exemplo atrai seus olhos muito mais do que o anterior ? Neste caso, o responsável é o contraste do vermelho contra o branco. Há várias maneiras de criar contrastes: linhas fortes, cores, relações espaciais, direções, etc. Noções básicas de planejamento visual Ministrante: Andreza Jackson Design para quem não é Designer
  20. 20. Semana do Calouro de Comunicação Social UFPA 2015 Oficina Design para quem não é designer - noções básicas de planejamento visual O trabalho com o contraste neste exemplo foi apenas o de acrescentar a caixa vermelha. Realcei um pouco a letra colocando o subtítulo no fundo o branco, contrastando-o com a fonte do título e do nome da ministrante. Noções básicas de planejamento visual Ministrante: Andreza Jackson Design para quem não é Designer
  21. 21. Semana do Calouro de Comunicação Social UFPA 2015 Oficina Design para quem não é designer - noções básicas de planejamento visual Ministrante: Andreza Jackson Noções básicas de planejamento visual Des gn Des gner para quem não é Noções básicas de planejamento visual Pequenas alterações fazem o design passar de comum a marcante.
  22. 22. Oficina Design para quem não é designer - noções básicas de planejamento visual 1. Aplique contraste em suas opções de tipologia, nas espessuras das linhas, nas cores, nas formas, nos tamanhos, nos espaços, etc. 2. Descubra maneiras de contrastar os itens para criar interesse visual 3. O importante é criar elementos marcantes. 4. Se você quer criar contrastes, faça-os de maneira forte. Dicas | Contraste Semana do Calouro de Comunicação Social UFPA 2015
  23. 23. Oficina Design para quem não é designer - noções básicas de planejamento visual 5. Os espaços vazios são elementos importantes para o layout. Ele funciona para equilibrar espaços, reforçar a unidade de grupos, harmonizar áreas e aumentar o contraste. Dicas | Contraste Semana do Calouro de Comunicação Social UFPA 2015
  24. 24. Oficina Design para quem não é designer - noções básicas de planejamento visual Há milhares de tipos disponíveis. Entretanto, a maior parte dos tipos pode ser classificada em seis categorias: Tipografia Semana do Calouro de Comunicação Social UFPA 2015 Estilo Antigo Moderno Serifa Grossa Sem Serifa Manuscrito Decorativa Categorias de tipos:
  25. 25. Oficina Design para quem não é designer - noções básicas de planejamento visual Os tipos estilo antigo baseiam-se na escrita manual dos escribas, que trabalhavam com uma pena na mão. Os estilos antigos sempre têm serifas. Fonte: Garamond Estilo Antigo Semana do Calouro de Comunicação Social UFPA 2015 Design
  26. 26. Oficina Design para quem não é designer - noções básicas de planejamento visual Os tipos modernos têm serifas, mas são horizontais e não inclinadas, e são muito finas. A estrutura é forte e com uma transição radical do grosso para o fino. Fonte: Bodoni Moderno Semana do Calouro de Comunicação Social UFPA 2015 Design
  27. 27. Oficina Design para quem não é designer - noções básicas de planejamento visual Os tipos com serifa grossa têm pouca ou nenhuma transição grosso-fino. Fonte: Clarendon Serifa Grossa Semana do Calouro de Comunicação Social UFPA 2015 Design
  28. 28. Oficina Design para quem não é designer - noções básicas de planejamento visual Os tipos sem serifa são quase sempre de peso igual, o que significa que - virtualmente - não há uma transição grosso-fino visível nos traços, as letras têm sempre a mesma espessura. Fonte: Futura Sem Serifa Semana do Calouro de Comunicação Social UFPA 2015 Design
  29. 29. Oficina Design para quem não é designer - noções básicas de planejamento visual Os tipos manuscritos parecem terem sidos escritos à mão, com uma caneta tinteiro, com um pincel ou, às vezes, com um lápis ou caneta profissional. Fonte: Lainie Day SH Manuscrito Semana do Calouro de Comunicação Social UFPA 2015 Design
  30. 30. Oficina Design para quem não é designer - noções básicas de planejamento visual Os tipos decorativos são diferentes e/ou engraçados. Por serem tão diferenciados, seu uso deve ser limitado. Fonte: Nemo Nightmares Decorativo Semana do Calouro de Comunicação Social UFPA 2015 Design
  31. 31. Oficina Design para quem não é designer - noções básicas de planejamento visual A tipografia é o material básico de qualquer layout. A combinação de fontes diferentes visa aperfeiçoar a comunicação, porém, algumas vezes esta combinação pode confundi-la. Tome cuidado ao utilizar vários tipos de fontes, crie sempre um contraste para melhorar o entendimento. Há seis maneiras claras e diferentes de contrastar a tipografia. Tipografia Semana do Calouro de Comunicação Social UFPA 2015 Tamanho Peso Estrutura Forma Direção Cor
  32. 32. Oficina Design para quem não é designer - noções básicas de planejamento visual Um contraste de tamanho nem sempre significa que você deve fazer com que o tipo fique grande, significa que deve haver um contraste. Por exemplo, quando você vê uma pequena linha isolada em uma página grande de jornal, fica com vontade de lê-la, certo? Grande parte do que o convida a fazê-lo é o contraste do tipo muito pequeno colocado em uma página grande. As informações menos importantes, ficam em tamanho menor. Tamanho Semana do Calouro de Comunicação Social UFPA 2015 Noções básicas de planejamento visual Des gn Des gner para quem não é Oficina
  33. 33. Oficina Design para quem não é designer - noções básicas de planejamento visual O peso de uma fonte refere-se à espessura dos traços. A maioria das famílias é desenhada com vários pesos: regular, bold (negrito), light, etc. O contraste dos pesos é uma das melhores maneiras de aumentar a estética visual de uma página sem redesenhar algo, mas você nunca poderá alcançar o contraste belo e forte se não tiver uma fonte com traços grandes e fortes. Peso Semana do Calouro de Comunicação Social UFPA 2015 Noções básicas de planejamento visual Bold (negrito) Noções básicas de planejamento visual Noções básicas de planejamento visual Regular Noções básicas de planejamento visual O peso de uma fonte refere-se à espessura dos traços. A maioria das famílias é desenhada com vários pesos: regular, bold (negrito), light, etc. O contraste dos pesos é uma das melhores maneiras de aumentar a estética visual de uma página sem redesenhar algo, mas você nunca poderá alcançar o contraste belo e forte se não tiver uma fonte com traços grandes e fortes. Light Noções básicas de planejamento visual
  34. 34. Oficina Design para quem não é designer - noções básicas de planejamento visual A estrutura refere-se à maneira através de qual uma letra é construída e, como podemos ver através deste exemplo, a estrutura de cada categoria é bastante distinta. Dica importante: Nunca coloque duas fontes de mesma categoria na mesma página. Não há como disfarçar suas similaridades. Estrutura Semana do Calouro de Comunicação Social UFPA 2015 Design Design Design
  35. 35. Oficina Design para quem não é designer - noções básicas de planejamento visual A forma de uma letra refere-se ao seu formato. Os caracteres pode ter a mesma estrutura, mas suas formas podem ser diferentes. Por exemplo, a letra G (em caixa alta) tem a mesma estrutura da letra g (em caixa baixa) da mesma família. Entretanto, suas verdadeiras formas, ou formatos, são muito diferentes. Este é um tipo de contraste muito prático, e aumenta a legibilidade e ênfase de uma palavra ou frase. Semana do Calouro de Comunicação Social UFPA 2015 Forma G g A a B b H h As formas de cada uma destas letras maiúsculas são completamente diferentes das minúsculas. Portanto, caixa- alta versus caixa-baixa é outra maneira de contrastar os tipos.
  36. 36. Oficina Design para quem não é designer - noções básicas de planejamento visual Uma interpretação óbvia da direção do tipo é sua inclinação. Só faça se você puder explicar por que determinado título está inclinado. Por exemplo: o tipo inclinado para cima cria uma energia positiva. Já o inclinado para baixo cria uma energia negativa. Semana do Calouro de Comunicação Social UFPA 2015 Direção Design Noções básicas de planejamento visual Uma interpretação óbvia da direção do tipo é sua inclinação. Só faça se você puder explicar por que determinado título está inclinado. Por exemplo: o tipo inclinado para cima cria uma energia positiva. Já o inclinado para baixo cria uma energia negativa.
  37. 37. Oficina Design para quem não é designer - noções básicas de planejamento visual As cores quentes (vermelho, laranjas) vêm na frente e comandam nossa atenção. Por sua vez, as cores frias (azuis, verdes) desaparecem gradualmente diante dos nossos olhos. Grandes áreas de cores suaves são ótimas, na verdade, elas são necessárias para criarmos um contraste eficaz. Semana do Calouro de Comunicação Social UFPA 2015 Cor Noções básicas de planejamento visual Des gn Des gner para quem não é Oficina
  38. 38. Oficina Design para quem não é designer - noções básicas de planejamento visual 1. Não utilize muitas fontes diferentes no mesmo layout. 2. Evite usar apenas caixa-alta. O seu uso dificulta a leitura do texto. é melhor usar caixa mista. 3. Evite justificar e centralizar o texto. É preferível alinhar o texto à esquerda ou à direita para não gerar espaços vazios. 4. Não alongue ou aperte as letras (serve para imagens, e qualquer elemento visual). Dicas | Tipografia Semana do Calouro de Comunicação Social UFPA 2015
  39. 39. Oficina Design para quem não é designer - noções básicas de planejamento visual Quando compomos visualmente elementos gráficos num mesmo suporte devemos ter o cuidado de os combinar, em termos cromáticos, de uma forma que não afete a sua legibilidade e de forma que, esteticamente, tenhamos uma combinação agradável. Como? Cores Semana do Calouro de Comunicação Social UFPA 2015 Combinações com contraste Cores complementares Consultar sistemas online de combinações cromáticas
  40. 40. Oficina Design para quem não é designer - noções básicas de planejamento visual Semana do Calouro de Comunicação Social UFPA 2015 Combinações com contraste Combinações sem contraste Design Design Design Design
  41. 41. Oficina Design para quem não é designer - noções básicas de planejamento visual Semana do Calouro de Comunicação Social UFPA 2015 Cores complementares Espectro de cores
  42. 42. Oficina Design para quem não é designer - noções básicas de planejamento visual Semana do Calouro de Comunicação Social UFPA 2015 Sistemas online de combinações de cores color.adobe.com color.adobe.com color.adobe.com colrd.com/aphere paletton.com colr.org
  43. 43. Oficina Design para quem não é designer - noções básicas de planejamento visual A coerência e unidade visual obtém-se quando somos coerente a vários níveis do elementos gráficos que utilizamos. Princípios de coerência e unidade visual Semana do Calouro de Comunicação Social UFPA 2015 Ao nível da tipografia Ao nível da relação da linguagem da tipografia com a linguagem da imagem Ao nível da linguagem gráfica e formal utilizada
  44. 44. Oficina Design para quem não é designer - noções básicas de planejamento visual Semana do Calouro de Comunicação Social UFPA 2015 Ao nível da tipografia Em um material gráfico, devemos utilizar a mesma fonte do início ao fim. Utilizar uma no início, outra no meio e outra no fim, quebra a unidade visual desejável que geralmente origina a identidade visual de qualquer peça de caráter gráfico.
  45. 45. Oficina Design para quem não é designer - noções básicas de planejamento visual Semana do Calouro de Comunicação Social UFPA 2015 Ao nível da relação da linguagem da tipografia com a linguagem da imagem Quando utilizamos elementos gráficos com uma linguagem muito específica, adequar a tipografia a essa mesma linguagem é uma forma de fazer com que a composição visual seja mais coerente no seu todo e a sua identidade visual reforçada.
  46. 46. Oficina Design para quem não é designer - noções básicas de planejamento visual Semana do Calouro de Comunicação Social UFPA 2015 Ao nível da relação da linguagem da tipografia com a linguagem da imagem Ao nível da cor pode também haver coerência e correspondência no tratamento da tipografia e da imagem ou elementos gráficos.
  47. 47. Oficina Design para quem não é designer - noções básicas de planejamento visual Semana do Calouro de Comunicação Social UFPA 2015 Ao nível da relação da linguagem da tipografia com a linguagem da imagem Quando usamos imagens que depois serão combinadas com a tipografia e elementos gráficos, podemos ir sempre buscar cores para utilizar nos outros elementos.
  48. 48. Oficina Design para quem não é designer - noções básicas de planejamento visual Semana do Calouro de Comunicação Social UFPA 2015 Ao nível da linguagem gráfica e formal utilizada Não devemos misturar elementos gráficos que não tenham o mesmo tratamento gráfico ou linguagem visual.
  49. 49. Noções básicas de planejamento visual Des gn Des gner para quem não é Oficina Semana do Calouro de Comunicação Social UFPA 2015

×