oficina design para quem não é designer

Noções básicas de planejamento visual

Des gn

Des gnerpara quem não é

Oficina

Semana do Calouro de Comunicação Social UFPA 2015

PUBLICITÁRIA E ILUSTRADORA

[email protected]

facebook.com/andrezajackson

andrezajv.wix.com/portfolio

Oficina Design para quem não é designer - noções básicas de planejamento visual

Ministrante:



"Nada deve ser colocado arbitrariamente em um layout".



O planejamento visual é um processo de ordenamentodos elementos visuais num plano visual. E dividem-sebasicamente em 4 princípios:

Proximidade

Alinhamento

Repetição

Contraste

Princípios básicos de design



O propósito básico da proximidade é ORGANIZAR. Osimples agrupamento de elementos relacionados emproximidade cria uma organização.

Informação organizada =

LEITURA FÁCIL E MEMORIZAÇÃO

Proximidade




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 elementoindividual.

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



Se os itens estiveremrelacionados entre si,agrupe-os em proximidade. Separe-os, se eles não estiverem diretamente ligados.

Aproximando o título dosubtítulo, criamos umaunidade bem-definida, nolugar de seis unidadessegmentadas. Ficou nítidoque os dois tópicos estãoligados entre si.Distanciando o nome daministrante e do evento, fica claro que estas informações não fazem parte do título.

Design para quemnão é Designer


Ministrante:Andreza Jackson

Semana do Calouro deComunicação Social UFPA 2015



O maior problema destalista é que tudo está próximo de tudo, dificultando uma relaçãoou organização.

Cores:VermelhoAzulVerdeAmareloFontes:ArialCalibriFuturaHelveticaPapel:CouchêSulfiteCartão

Cores:VermelhoAzulVerdeAmarelo

Fontes:ArialCalibriFuturaHelvetica

Papel:CouchêSulfiteCartão

A mesma lista foi criadapor meio de grupos visuais.

Acrescentamos umcontraste aos títulos e a

linha divisória dá-se maislegibilidade, o que torna

mais fácil uma relaçãoentre o título e seus tópicos.


1. Itens relacionados entre si devem ser agrupados.

2. Quando vários itens estão próximos tornam-se umaunidade visual e não várias unidades individualizadas.

3. Ajuda a organizar as informações e acaba com a desordem.

Regras | Proximidade



1. Analise quantos e quais são os elementos visuaisda sua página.

2. Veja quais podem ser agrupados num mesmoelemento, 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



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




Fique atento a cada elemento que você colocar na página.Alinhe cada objetocom uma parte lateralde outro, para que apágina inteira fiqueunificada.

Mesmo que o nome daministrante e do evento esteja distante do título,existe uma conexão visualentre os dois elementos,criada através do alinhamento lateral, que émais marcante, mais fácil de seguir com os olhos.



Ministrante:Andreza Jackson

Semana do Calouro deComunicação Social UFPA 2015


1. Esteja consciente do posicionamento dos elementosno layout.

2. Encontre sempre algo a mais na página para fazer oalinhamento, mesmo que os dois objetos estejamfisicamente 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



Repetição dos elementos visuais UNIFICA E FORTALECEo layout.

É essencial em documentos de muitas páginas, branding e campanhas. É a repetição que cria CONSISTÊNCIA nos materiais.

Repetição




Repetição é uma formamais marcante de criarconsistência em ummaterial. Avalie se é apropriado fazer comque um dos elementosfique mais marcante e utilize-o como oelemento repetitivo.

Design para quemnão é DesignerNoções básicas de planejamento visual

Ministrante: Andreza Jackson



O ícone de caneta notítulo se repete no nomeda ministrante, fortalecendoa conexão entre ambos. Esse ícone foi acrescentadoespecialmente 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 unificarelementos separados dodesign (da diagramação).

Design para quemnão é DesignerNoções básicas de planejamento visual



1. O elemento repetitivo pode ser uma fonte, uma cor,algum sinal, um elemento gráfico ou qualquer outroitem que se reconheça visualmente.

2. Adapte os elementos a serem repetidos para osdiferentes formatos.

3. Evite repetir elemento em demasia, para que ele não se torne excessivo e cansativo.

Dicas | Repetição



O objetivo do contraste é evitar elementos meramentesimilares em um layout.

A diferenciação dos elementos que se interrelacionamcria ATRAÇÃO VISUAL E OS VALORIZA.

Contraste




Você concorda com ofato de que esteexemplo atrai seus olhos muito mais doque o anterior ?

Neste caso, o responsável é o contraste do vermelhocontra o branco. Hávárias maneiras de criarcontrastes: linhas fortes,cores, relações espaciais,direções, etc.






O trabalho com o contrasteneste exemplo foi apenas ode acrescentar a caixa vermelha. Realcei um poucoa letra colocando o subtítulono fundo o branco,contrastando-o com a fontedo título e do nome daministrante.








Des gn



Pequenas alterações fazemo design passar de comuma marcante.


1. Aplique contraste em suas opções de tipologia, nasespessuras das linhas, nas cores, nas formas, nos tamanhos, nos espaços, etc.

2. Descubra maneiras de contrastar os itens para criarinteresse visual

3. O importante é criar elementos marcantes.

4. Se você quer criar contrastes, faça-os de maneira forte.

Dicas | Contraste



5. Os espaços vazios são elementos importantes para olayout. Ele funciona para equilibrar espaços, reforçar aunidade de grupos, harmonizar áreas e aumentar o contraste.

Dicas | Contraste



Há milhares de tipos disponíveis. Entretanto, a maior parte dos tipos pode ser classificada em seiscategorias:

Tipografia


Estilo Antigo

Moderno

Serifa Grossa

Sem Serifa

Manuscrito

Decorativa

Categorias de tipos:


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


Design


Os tipos modernos têm serifas, mas são horizontaise não inclinadas, e são muito finas. A estrutura é fortee com uma transição radical do grosso para o fino.

Fonte: Bodoni

Moderno


Design


Os tipos com serifa grossa têm pouca ou nenhumatransição grosso-fino.

Fonte: Clarendon

Serifa Grossa


Design


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êmsempre a mesma espessura.

Fonte: Futura

Sem Serifa


Design


Os tipos manuscritos parecem terem sidos escritos àmão, com uma caneta tinteiro, com um pincel ou, àsvezes, com um lápis ou caneta profissional.

Fonte: Lainie Day SH

Manuscrito


Design


Os tipos decorativos são diferentes e/ou engraçados.Por serem tão diferenciados, seu uso deve ser limitado.

Fonte: Nemo Nightmares

Decorativo


Design


A tipografia é o material básico de qualquer layout. Acombinação de fontes diferentes visa aperfeiçoar acomunicação, porém, algumas vezes esta combinaçãopode confundi-la. Tome cuidado ao utilizar vários tipos de fontes, crie sempre um contraste para melhorar oentendimento. Há seis maneiras claras e diferentes decontrastar a tipografia.

Tipografia


Tamanho

Peso

Estrutura

Forma

Direção

Cor


Um contraste de tamanho nem sempre significa que você deve fazer com que otipo 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.

TamanhoSemana do Calouro de Comunicação Social UFPA 2015


Des gn


Oficina


O peso de uma fonte refere-seà espessura dos traços. Amaioria das famílias é desenhadacom vários pesos: regular, bold(negrito), light, etc. O contrastedos pesos é uma das melhores maneiras de aumentar a estética visual de uma página sem redesenhar algo, mas você nunca poderá alcançar ocontraste belo e forte se não tiver uma fonte com traços grandes e fortes.

PesoSemana do Calouro de Comunicação Social UFPA 2015

Noções básicas deplanejamento visual

Bold (negrito)Noções básicas deplanejamento visual


Regular Noções básicas deplanejamento visual

O peso de uma fonte refere-seà espessura dos traços. Amaioria das famílias é desenhadacom vários pesos: regular, bold(negrito), light, etc. O contrastedos pesos é uma das melhores maneiras de aumentar a estética visual de uma página sem redesenhar algo, mas você nunca poderá alcançar ocontraste belo e forte se não tiver uma fonte com traços grandes e fortes.

LightNoções básicas deplanejamento visual


A estrutura refere-se à maneira através de qual uma letra éconstruída e, como podemosver através deste exemplo, a estrutura de cada categoria ébastante distinta.

Dica importante:Nunca coloque duas fontes demesma categoria na mesma página. Não há como disfarçarsuas similaridades.

EstruturaSemana do Calouro de Comunicação Social UFPA 2015

Design

Design

Design


A forma de uma letra refere-seao seu formato. Os caracterespode ter a mesma estrutura,mas suas formas podem serdiferentes. Por exemplo, a letraG (em caixa alta) tem a mesmaestrutura da letra g (em caixabaixa) da mesma família. Entretanto, suas verdadeirasformas, ou formatos, sãomuito diferentes. Este é um tipode contraste muito prático, e aumenta a legibilidade e ênfase de uma palavra ou frase.


FormaG gA aB bH h

As formas decada uma destas letrasmaiúsculas sãocompletamentediferentes dasminúsculas. Portanto, caixa-alta versus caixa-baixa éoutra maneirade contrastaros tipos.


Uma interpretação óbvia dadireção do tipo é sua inclinação. Só faça se você puder explicar por que determinado título estáinclinado. Por exemplo: o tipoinclinado para cima cria uma energia positiva. Já o inclinadopara baixo cria uma energia negativa.


Direção

Design


Uma interpretação óbvia dadireção do tipo é sua inclinação.Só faça se você puder explicarpor que determinado título estáinclinado. Por exemplo: o tipoinclinado para cima cria uma energia positiva. Já o inclinadopara baixo cria uma energia negativa.


As cores quentes (vermelho,laranjas) vêm na frente e comandam nossa atenção. Porsua vez, as cores frias (azuis,verdes) desaparecem gradualmente diante dos nossos olhos. Grandes áreasde cores suaves são ótimas, na verdade, elas são necessárias para criarmos um contraste eficaz.


Cor


Des gn


Oficina


1. Não utilize muitas fontes diferentes no mesmo layout.

2. Evite usar apenas caixa-alta. O seu uso dificulta aleitura do texto. é melhor usar caixa mista.

3. Evite justificar e centralizar o texto. É preferível alinhar o texto à esquerda ou à direita para não gerarespaços vazios.

4. Não alongue ou aperte as letras (serve para imagens, e qualquer elemento visual).

Dicas | Tipografia



Quando compomos visualmente elementos gráficosnum mesmo suporte devemos ter o cuidado de os combinar, em termos cromáticos, de uma forma quenão afete a sua legibilidade e de forma que, esteticamente, tenhamos uma combinação agradável.

Como?

Cores


Combinações com contraste

Cores complementares

Consultar sistemas online de combinaçõescromáticas



Combinaçõescom contraste

Combinaçõessem contraste

Design

Design

Design

Design



Cores complementares

Espectro de cores



Sistemas online de combinações de cores

color.adobe.com

color.adobe.com

color.adobe.com

colrd.com/aphere

paletton.com

colr.org


A coerência e unidade visual obtém-se quando somoscoerente a vários níveis do elementos gráficos queutilizamos.

Princípios de coerênciae unidade visual


Ao nível da tipografia

Ao nível da relação da linguagem da tipografiacom a linguagem da imagem

Ao nível da linguagem gráfica e formalutilizada



Ao nível da tipografia

Em um material gráfico, devemos utilizar a mesmafonte do início ao fim. Utilizar uma no início, outrano meio e outra no fim, quebra a unidade visualdesejável que geralmente origina a identidade visual de qualquer peça de caráter gráfico.



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 aessa mesma linguagem é uma forma de fazer com que a composição visual seja mais coerente no seutodo e a sua identidade visual reforçada.




Ao nível da cor pode também haver coerência e correspondência no tratamento da tipografia e daimagem ou elementos gráficos.




Quando usamos imagens que depois serão combinadascom a tipografia e elementos gráficos, podemos irsempre buscar cores para utilizar nos outros elementos.



Ao nível da linguagem gráficae formal utilizadaNão devemos misturar elementos gráficos que nãotenham o mesmo tratamento gráfico ou linguagemvisual.


Des gn


Oficina
