DESIGN PARA QUEM NÃO É DESIGNER - Diego Piovesan ... ?· uma unidade bem-definida, ... Por exemplo:…

  • View
    213

  • Download
    0

Embed Size (px)

Transcript

  • DESIGN EDITORIAL

    Aula #03 - Planejamento visual

    Prof.: esp. Diego Piovesan Medeirosdiego.medeiros@satc.edu.br

    domingo, 22 de agosto de 2010

    mailto:diego.medeiros@satc.edu.brmailto:diego.medeiros@satc.edu.br
  • PRINCPIOS BSICOSVejamos a seguir uma capa de um relatrio comum (e sem criatividade): centralizada, com espaos iguais para preencher a pgina. Se voc no soubesse ler em portugus, pensaria que so seis tpicos separados na pgina, pois cada linha parece ser um elemento individual.

    Tudo o Que

    Vai Volta

    Lies para viajar de

    carona pelo pas

    Robin Willians

    1 de Janeiro de 2001 A seguir aplicaremos os quatro princpios bsicos, acompanhando os resultados:

    domingo, 22 de agosto de 2010

  • PROXIMIDADE

    Tudo o QueVai Volta

    Lies para viajarde carona pelo pas

    Robin Willians1 de Janeiro de 2001

    Se os itens estiverem relacionados entre si, agrupe-os em proximidade. Separe-os, se eles no estiverem diretamente ligados.Varie o espao entre os itens para indicar a proximidade.

    Aproximando o ttulo do subttulo, criamos uma unidade bem-definida, no lugar de seis unidades segmentadas. Ficou ntido que os dois tpicos esto ligados entre si.Distanciando o nome do autos e a data, fica claro que estas informaes no fazem parte do ttulo.

    domingo, 22 de agosto de 2010

  • domingo, 22 de agosto de 2010

  • Proximidade - CD-ROMsCD-ROMsCDs para crianasCDs educacionaisCDs de lazerDiscos laser - EducacionalAprendizado inicialIdiomasCinciasMatemtica - Material do ProfessorLivrosMaterial do professorVdeos - Hardware e AcessriosCabosDispositivo de entradaArmazenamentoMemriaModemsImpressoras e acessriosVdeo e som

    O maior problema desta lista que tudo est prximo de tudo, dificultando uma relao ou organizao.

    CD ROMs

    Educacional

    Material do Professor

    Hardware & Acessrios

    CD ROMsCDs para crianasCDs educacionaisCDs de lazerDiscos laser

    IdiomaisCinciasMatemtica

    LivrosMaterial do professorVdeos

    CabosDispositivo de entradaArmazenamentoMemriaModemsImpressoras e acessriosVdeo e som

    A mesma lista foi criada atravs de grupos

    visuais. Acrescentando um contraste aos ttulos e a linha divisria d-se

    mais legibilidade, o que torna mais fcil uma

    relao entre o ttulo e seus tpicos.

    domingo, 22 de agosto de 2010

  • domingo, 22 de agosto de 2010

  • Alinhamento

    Tudo o QueVai Volta

    Lies para viajar decarona pelo pas

    Robin Willians1 de Janeiro de 2001

    Fique atento a cada elemento que voc colocar na pgina. Alinhe cada objeto com uma parte lateral de outro, para que a pgina inteira fique unificada.

    Mesmo que o nome do autor esteja distante do ttulo, existe uma conexo visual entre os dois elementos, criada atravs do alinhamento.O exemplo anterior tambm est alinhado: o alinhamento a centralizao. Mas como voc pode ver, alinhando esquerda ou direita (como este exemplo) voc cria uma lateral mais marcante, mais fcil de seguir com os olhos.

    domingo, 22 de agosto de 2010

  • domingo, 22 de agosto de 2010

  • domingo, 22 de agosto de 2010

  • domingo, 22 de agosto de 2010

  • Repetio

    Tudo o QueVai VoltaLies para viajar decarona pelo pas

    Robin Willians

    Repetio uma forma mais marcante de criar consistncia em um material. Avalie se apropriado fazer com que um dos elementos fique mais marcante e utilize-o como o elemento repetitivo.

    A fonte diferenciada do ttulo se repete no nome do autor, fortalecendo a conexo entre ambos. Os pequenos tringulos foram especialmente acrescentados para criar uma repetio. Apesar de cada um deles apontar para uma direo diferente, a forma triangular suficientemente especfica para ser reconhecida em todas as suas incidncias na pgina.A repetio ajuda a unificar elementos separados do design (da diagramao).

    domingo, 22 de agosto de 2010

  • domingo, 22 de agosto de 2010

  • Contraste

    Robin Willians

    Voc concorda com o fato de que o exemplo deste slide atrai seus olhos muito mais do que o anterior?Neste caso, o responsvel o contraste do preto contra o branco. H vrias maneiras de criar contrastes: linhas, fontes, cores, relaes espaciais, direes, etc.

    O trabalho com o contraste neste exemplo foi apenas o de acrescentar a caixa preta. Realce um pouco a letra colocando o subttulo em itlico, contrastando-o com a letra normal (sem italizao) do ttulo e do nome do autor.

    Tudo o QueVai Volta

    Lies para

    viajar de

    carona pelo pas

    domingo, 22 de agosto de 2010

  • domingo, 22 de agosto de 2010

  • TipografiaA combinao de fontes diferentes visa aperfeioar a comunicao, porm, algumas vezes esta combinao pode confundi-la. Tome cuidado ao utilizar vrios tipos de fontes, crie sempre um contraste para melhorar o entendimento. H seis maneiras claras e diferentes de contrastar a tipologia:

    No seja

    TMIDOExponha suas

    idias!

    Um contraste de tamanho nem sempre significa que voc deva fazer com que o tipo fique grande; significa que deve haver um contraste. Por exemplo: quando voc v uma pequena linha isolada em uma pgina 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 pgina grande.

    domingo, 22 de agosto de 2010

  • domingo, 22 de agosto de 2010

  • O peso de uma fonte refere-se espessura dos traos. A maioria das famlias desenhada com vrios pesos: regular, bold (negrito), light, etc. O contraste dos

    pesos uma das melhores maneiras de aumentar a esttica visual de uma pgina sem redesenhar algo, mas voc nunca poder alcanar o contraste belo

    e forte se no tiver uma fonte com traos grandes e fortes.

    Helvetica Light

    Helvetica Normal

    Helvetica Bold

    Outro Newsletter

    TtulonononononononononononononononononononononononononononononononononononOnonononononononononononononononononononononononononononononono..

    Outro TtulononononononononononononononononononononononononononononononononononononononononononOnonononononononononononononononononononononononononononononono..

    nononononononononononononononononononononononononononononOnonononononononononononononononononononononononononononononono..

    SubttulonononononononononononononononononononomnononononononononononononononononOnonononononononononononononononononononononononononononononono..

    Outro Newsletter

    TtulonononononononononononononononononononononononononononononononononononOnonononononononononononononononononononononononononononononono..

    TtulononononononononononononononononononononononononononononononononononononononononononOnonononononononononononononononononononononononononononononono..

    nononononononononononononononononononononononononononononOnonononononononononononononononononononononononononononononono..

    SubttulonononononononononononononononononononomnononononononononononononononononOnonononononononononononononononononononononononononononononono..

    domingo, 22 de agosto de 2010

  • domingo, 22 de agosto de 2010

  • Serifado

    EstruturaSerifas

    Contraste grosso-finoSem Serifa

    No h serifas

    No h contraste grosso-fino nos traos

    Existem ainda as categorias: Moderno, Manuscrito, Decorativo, Estilo Antigo.

    Lucida SansHelvetica

    Arial

    A estrutura refere-se maneira atravs de qual uma letra construda e, como podemos ver atravs deste exemplo, a estrutura de cada categoria bastante distinta.

    Dica importante: nunca coloque duas fontes de mesma categoria na mesma pgina. No h como disfarar suas similaridades. Alm disso, existem tantas opes! Por que dificultar as coisas?

    domingo, 22 de agosto de 2010

  • Cuidado!Nunca faam isso pelamordedeus!

    domingo, 22 de agosto de 2010

  • FormaA forma de uma letra refere-se ao seu formato. Os caracteres podem 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 famlia. Entretanto, suas verdadeiras formas ou formatos so muito diferentes. Este um tipo de contraste muito prtico, e aumenta a legibilidade e nfase de uma palavra ou frase.

    G gA aB bH hE e

    As formas de cada uma destas letras

    maisculas so completamente

    diferente das minsculas. Portanto,

    caixa-alta versus caixa-baixa outra

    maneira de contrastar os tipos.

    Usar caixa-alta algumas vezes (no exagere!) faz surgir um

    CONTRASTE

    girafa

    GIRAFA

    tartaruga

    TARTARUGA

    domingo, 22 de agosto de 2010

  • domingo, 22 de agosto de 2010

  • Direo

    PARA CI

    MA!O tipo

    inclinado para cima cria uma energia positiva.

    Girar, inclinar, inverter, etc, as vezes podem ser uma boa maneira de enfatizar e contrastar uma parte de seu texto.

    Ttulo longo nas duas colunas

    Nononononono nonononononononononononononononononononononononononononononononononononononononononononononononononononononononononono.

    Subttulo nononononon ononononononononononoonnonononononononono.ne

    wsl

    ette

    r Nononononononononononononononononononononononononononononononononononononononono.

    Nonononono nononononononononononononononononononononononononononononononononononononononono..

    Segundo Ttulo interessante

    As vezes um redirecionamento marcante do tipo cria um impacto dramtico ou um formato nico, o que justifica plenamente seu uso.

    domingo, 22 de agosto de 2010

  • domingo, 22 de agosto de 2010

  • Referncia bibliogrfica- Design para quem no designer (Robin Willians)