Medson Magazine Design

Conheça a nova logo da

MicrosoftDepois de 25 anos, empresa mostra que está disposta amarcar uma nova fase em sua trajetória e renova o visual

EXEM

PLAR

DE

ASSI

NAN

TE

17 DEZ/ 2012Ano 01

Edição 01

MAGAZINE DESIGN

SUMÁRIO

Tipografia

O que éTipografia?

Ilustração

Monstrons do Rock de Jason Edmiston

Fotografia

Afinal, o que é resolução?

Identidade Visual

Conheça a nova logo da Microsoft

Design de Interação

Design de Interação XDesenvolvimento de Interface

Design de Superfície

Processo Criativo

04

06

10capa

08 12

14EXPEDIENTEDIRETOR EDITORIAL: Medson Barros BarretoDIREÇÃO DE ARTE: Medson Barros BarretoPROJETO GRÁFICO: Medson Barros BarretoREVISÃO: Medson Barros BarretoDIAGRAMAÇÃO: Medson Barros BarretoTIRAGEM: 5.000 exemplaresPROCESSO DE IMPRESSÃO: OffsetE-MAIL: [email protected]: (31) 9671-7283

MA

GA

ZIN

E DE

SIG

N

O que significa?

T ipografia é a impressão dos tipos. Tipologia é o estudo da formação dos tipos.

O termo tipo é o desenho de uma determinada família de letras como por exemplo: verdana, futura, arial, etc. As variações dessas letras (lig-th, itálico e negrito, por exemplo) de uma determinada família são as fon-tes desenhadas para a elaboração de um conjunto completo de caracteres

que consta do alfabeto em caixa alta e caixa baixa, números, símbolos e pontuação.

Os tipos constituem a principal ferramenta de comunicação. As faces alternativas de tipos permitem que você dê expressão ao documento, para transmitir instantaneamente, e não-verbalmente, atmosfera e ima-gem.

No uso da tipografia o interesse visual é realizado através da esco-lha adequada de fontes tipográficas, composição (ou layout) de texto, a

sensibilidade para o tom do texto e a relação entre texto e os elementos gráficos na página. Todos esses fato-res são combinados para que o layout final tenha uma “atmosfera” ou “res-sonância” apropriada ao conteúdo abordado.

O conhecimento adequado do uso da tipografia é essencial aos designers que trabalham com diagramação, ou seja, na relação de texto e imagem. Logo a tipografia é um dos pilares do design gráfico e uma matéria necessá-ria aos cursos de design.

Tipografia

O QUE ÉTIPOGRAFIA?Em design só se fala sobre tipografia e tipologia. Afinal, o que é isso? Qual a importância da tipografia na vida do de-signer gráfico? No que consiste a tipografia? Está na hora de responder suas perguntas.

4 Medson Magazine Design • DEZEMBRO 2012

Classificação dasfontes

As fontes são classificadas em 8 grupos: Antigo (serifa triangular), Mo-derno (serifa reta/ fina), Serifa grossa (serfia com esperssura do traço da letra), Sem serifa (não tem serifa), Decorativa (bordadas e detalhadas), Manuscrita (parecem ter sido escritas à mão), Símbolos, Não latinas (alfa-betos orientais, árabes, etc.).

Elementos das fontesToda e qualquer fonte tipográfica

é composto por elementos distintos, tais como:

• Linha de Base (baseline);• Linha Central (meanline ou mi-

dline);• Ascendente (ascender);• Descendente (descender);• Letra Caixa Alta (upper-case);• Letra Caixa-baixa (lower-case);• Altura de x (x-height);

• Cabeça ou Ápice (apex);• Serifa (serif);• Barriga ou Pança (bowl);• Haste ou Fuste (stem);• Montante ou Trave (diagonal

stroke);• Base ou Pé (foot);• Barra (bar);• Bojo (counter).

AlinhamentoHá cinco maneiras básicas de or-

ganizar as linhas de composição em uma página:

1. Justificada: todas as linhas têm o mesmo comprimento e são alinha-das tanto a esquerda quanto a direita.

2. Não-justificada á direita: as li-nhas têm diferentes comprimentos e são todas alinhadas á esquerda e irre-gulares a direita.

3. Não-justificada á esquerda: as linhas têm diferentes comprimentos e são alinhadas á direita e irregulares a esquerda.

4. Centralizada: as linhas têm ta-manho desigual, com ambos os lados irregulares.

5. Assimétrica: um arranjo sem padrão previsível na colocação das linhas.

Tipografia

Dicas importantesAlinhamento: Evite alinhamen-

to centralizado em textos longos. O excesso de espaço branco nas laterais tende a fazer a pessoa se perder. Opte por textos alinhados a esquerda, sem justificativa (caso as palavras fiquem com espaçamento grande demais entre elas).

Contraste: Nunca utilize tipo cla-ro em fundo claro, ou tipo escuro em fundo escuro. Opte sempre pelo contraste. Afinal de contas, texto é para ser lido! Para impressos, o me-lhor é sempre letra preta no papel

branco. Já para os computadores, há muita divergência de opiniões: para muitos, letra branca em fundo preto é menor pois na tela o branco é uma luz emitida, enquanto o preto é au-sente (o que supostamente deveria facilitar a leitura além de não consu-mir tanta energia elétrica).

Use apenas uma categoria de fonte: Se você fizer um texto todo com uma fonte serifada, utilize ape-nas fontes serifadas no resto do tex-to. Não mude no meio do caminho, pois isso pode trazer uma confusão

visual ao leitor. Claro que se você quiser usar uma fonte como título de um texto e prosseguir com uma fonte diferente, manda bala.

Se for mudar de fonte, deixe ób-vio a mudança: Dá pra criar um tex-to com título em Georgia e corpo do texto em Helvetica (serifada e sem--serifa, respectivamente). Mas deixe óbvio a mudança – use uma cor di-ferente, um fundo diferente, ou um tamanho de letra diferente. Isto cria um impacto visual melhor.

DEZEMBRO 2012 • Medson Magazine Design 5

Ilustração

MONSTROS DO ROCK DE JASON EDMISTONAs imagens à seguir são da série de ilustrações Monstros do Rock (Monsters of Rock), que estreou no show galeria Undergound em Nova York em 2011, a segunda metade do projeto estreou na Galeria Phone Booth em Long Beach nes-te ano. Vamos a alguns dos trabalhos:


Ilustração

Jason Edmiston é um ilustrador comercial desde 1996. Jason cria trabalhos publicitários, editoriais e embalagens. Ele é um artista tradicional, faz pintura em acrílico, sobre papel aquarela ou painel de madeira. Seu estilo varia do rea-lismo ao exagero, geralmente enfatizando a figura, em um certo grau de humor ou caricatura. Jason é frequentemente solicitado para emular um gênero espe-cífico de ilustração, como cartazes de filmes, capas de celulose ou publicidade estilo retro. Seu gosto por cultura pop, especialmente filmes e brinquedos mui-tas vezes influencia seu trabalho.


Fotografia

AFINAL, O QUE ÉRESOLUÇÃO?Fala-se em uma infinidade de expressões como “resolução”, “tamanho”, “megapixel”, “full-hd” ou “contraste” que mui-tas vezes, até quem vive em contato com esse aparato todo pode ficar confuso.

Quando a resolução influencia a qualidade da imagem?

S oa óbvio e banal, mas ainda en-contro muitos fotógrafos profis-sionais e designers gráficos com

dúvidas sobre o real significado da resolução da imagem. Apesar de ser importante até mesmo na escolha do tamanho de uma TV para nossa casa…

A fotografia desde sua origem his-tórica é constituída mantendo-se o mesmo princípio. Um aglomerado de pontos que variam em quantidade, cor e tonalidades.

Seja em um papel, plástico ou numa tela de leds, no caso das TVs atuais, cada imagem é formada por vários pontos. Chamados de “pixels” (abrev. px) nos equipamentos eletrô-nicos como computadores, câmeras digitais e smartphones. A quantidade de pixels determina os detalhes que podem ser mostrados na fotografia, são grandezas diretamente propor-cionais.

A relação da quantidade de pon-tos que formam uma imagem com o tamanho que esta imagem é exibida é chamada de Resolução. Daí a sigla uti-lizada no nosso sistema para definir resolução ser DPI – Dots per inch, que significa Pontos por polegada. Veja o exemplo a seguir:

Temos três imagens medindo 1 polegada x 1 polegada cada, com quantidade de pixels de 1, 2 e 3. Po-demos dizer que elas têm a mesma dimensão e variam a resolução.

Agora veja este exemplo:

Neste caso temos imagens com 1 px cada. Mostradas em tamanhos diferentes: 1, 2 e 3 polegadas. Divi-dindo-se a quantidade de pontos pela área que ocupam temos a resolução de cada uma. À medida que amplia-mos a imagem, a resolução diminui.

E a resolução?Cada um de nós está visualizando

esta imagem de forma diferente. Um monitor de 21” não pode ser compa-rado com um tablet. Considerando--se as impressões em grande formato como banners e uma impressão em A4 de uma impressora comum para uso doméstico, também vamos en-contrar muita variação de tamanho,


Fotografia

portanto, variação de resolução. No entanto, vou calcular a resolução aqui, no meu computador, com mo-nitor de 17” e ajustes de vídeo para 1280 x 1024px.

Cada um de nós está visualizando esta imagem de forma diferente. Um monitor de 21” não pode ser compa-rado com um tablet. Considerando--se as impressões em grande formato como banners e uma impressão em A4 de uma impressora comum para uso doméstico, também vamos en-contrar muita variação de tamanho, portanto, variação de resolução. No entanto, vou calcular a resolução aqui, no meu computador, com mo-nitor de 17” e ajustes de vídeo para 1280 x 1024px.

1. Com uma régua, meço a lar-

gura e a altura da imagem no moni-tor. Encontro os seguintes valores: 13,3cm – largura e 8,2cm – altura.

2. Agora uso a calculadora para converter as unidades de cm para po-legadas, pois é a unidade padrão do nosso sistema de medidas.

E as medidas ficam em 5,2 pol x 3,2 pol.

3. Agora vamos dividir a dimen-são em pixels pela dimensão em po-legadas:

600 / 5,2 = 115,38370 / 3,2 = 115,62Resolução: 115,5Sabendo como a resolução é defi-

nida podemos concluir que não basta uma imagem grande, ela precisa con-ter a quantidade de pontos para se atingir a resolução desejada.

Não se pode afirmar a resolução de uma imagem até esta ser transferi-da para um meio físico, seja uma tela de LCD ou um papel fotográfico.

Seguem algumas resoluções mais comuns:

• Impressão em gráfica: 300 dpi• Jornal: 150 dpi• Banner: 100 dpi• Lonas para fachadas e exterio-

res: 50 dpi• I-pad: 133 dpi• TV de 32” – Full-HD: 70 dpiFaça os cálculos aí no seu monitor

e veja como pode ser diferente!

Fotografia com 600px de largura por 370px de altura


A Microsoft parece disposta a fazer de 2012 um ano de mudanças em sua trajetória.

E, para marcar esse momento, nada melhor do que investir em uma re-novação completa de visual, incluin-do até mesmo a sua logo. A novi-dade segue a tendência do visual do Windows 8.

A empresa não mexia em sua logo há 25 anos. Para explicar como foi o processo criativo para a defi-nição da nova fonte e do novo sím-bolo, a Microsoft disponibilizou um vídeo ilustrando todo o processo. Você pode vê-lo no site oficial da empresa: www.microsoft.com, ou ainda no youtube. Com isso, a inte-gração entre a marca da empresa e as logos utilizadas em seus princi-pais softwares agora está completa.

O novo logo é composto por duas partes. O símbolo é traz quatro quadrados multicoloridos arranja-dos no mesmo padrão da tradicional “bandeira” do Windows, e segundo

a empresa representa seu diverso portfolio de produtos. Já o logoti-po traz apenas o nome da empresa, sem uma “tagline” ou frase associa-da como no passado. A fonte é a Se-goe, a mesma usada na interface do Windows.

Ao contrário da versão anterior, neste logotipo o nome da empresa é acompanhado de um símbolo que remete ao Windows, sistema que terá uma nova edição lançada no fi-nal de outubro.

Este é o quinto logo adotado pela empresa fundada em 1975. “É a hora perfeita para uma mudança”, escreveu Jeff Hansen, diretor de marketing, em um blog da empresa. “O novo logo representa uma nova era. Ele deve evoluir para acentuar visualmente este recomeço.”

Vale lembrar: por “logo” enten-de-se todo o conjunto (símbolo e texto). No Brasil, o termo “logomar-ca” também é aceito pelos dicioná-rios como referência à mesma coisa.

Já o termo “logotipo” diz respeito apenas à parte textual de uma mar-ca. Ainda nesse caso, a Microsoft utiliza em sua comunicação o termo “logo” e, por conta disso, optamos por essa grafia.

Segundo a empresa, o novo logo será usada de forma proeminente a partir de então, em seu software, seu site, suas lojas próprias e no fi-nal de todos os novos comerciais de TV. Mas as mudanças levam algum tempo, e o antigo logo ainda poderá ser vista ocasionalmente por algum tempo. Falando em tempo, compare o novo design com os logos anterio-res utilizados pela empresa na pró-xima página:

Identidade Visual

CONHEÇA A NOVA LOGO DA MICROSOFTDepois de 25 anos, empresa mostra que está disposta amarcar uma nova fase em sua trajetória e renova o visual.

10 Medson Magazine Design • DEZEMBRO 2012 DEZEMBRO 2012 • Medson 10

Identidade Visual

1975 a 1979

1982 a 1986

1987 a 2012

1980 a 1981


A foto abaixo, tirada no modo macro, mostra a pequena flor do melão-de-são-caetano

(Momordica charantia) com as péta-las parcialmente translúcidas devido ao desgaste natural.

Muito mais delicadas do que as flores, as folhas da planta não resis-tem nem um minuto depois de corta-das, murchando quase que imediata-mente. Como eu pretendia escanear a folha a fim de obter a frente e o verso, acabei utilizando a folha de outra es-pécie vegetal (não-identificada), mas, de certa forma, similar à folha da da planta original.

A partir das impressões da flor, com o auxílio da mesa de luz, desen-volvi desenhos à mão livre usando as fotos sob o papel a se pintado. Fiz alguns experimentos com aquarela, e aguada de nanquim procurando re-produzir detalhes da flor consideran-do seus contornos e preenchimentos.

Como a flor tinha uma forma mais elaborada, em relação à folha resolvi desenvolver um desenho mais sim-ples, tirando partido apenas de sua forma básica. Ainda assim achei in-teressante também considerar con-tornos e preenchimentos. Usando a mesa de luz, dispus a folha seca sob o papel a ser pintado e tentei captar de maneira simplificada seu formato original.

Escaneei os desenhos pintados da flor e, no Photoshop, destaquei-os do fundo. Com os elementos “soltos” existe maior liberdade na hora de ela-borar a composição. Eu poderia ter adotado as nuances da pintura origi-nal, mas achei que ficaria demasiado detalhado e resolvi usar uma cor cha-pada para os motivos pintados.

Como, apesar de usar a mesma base, pintei separadamente o contor-no e o preenchimento da flor acabei ficando com desenhos que não se encaixavam perfeitamente. Minha


PROCESSO CRIATIVOVeja a seguir uma demonstração do processo de produção de uma estampa. O projeto foi apresentado no stand do SENAI-CETIQT na Olimpíada do Conhecimento 2012.


intenção era, no momento de unir os dois motivos obter ainda alguma “transparência” pela irregularidade dos motivos sobrepostos — que reve-lariam parte do fundo.

A seguir, o resultado dos 2 moti-vos sobrepostos deixando aparente parte do fundo. O interessante quan-do se trabalha com elementos isola-dos é que existem 3 possibilidades das quais se pode tirar partido: o uso apenas do contorno, o uso do preen-chimento e ambos sobrepostos.

Com a folha adotei o mesmo prin-cípio da flor, isolando o contorno e o preenchimento do fundo e pintado-os com cores sólidas. Neste caso, eu não pensava em usar os dois elementos sobrepostos. Abaixo, o motivo corres-pondente ao contorno da folha.

Veja agora o resultado da com-posição pronta e devidamente repli-cadas e posicionadas. Escolhi cores marcantes a fim de obter certa “dra-maticidade” em termos estéticos.


Resultado final da estampa impressa em poliéster.

Detalhe da estampa.


C laro que existe uma sobrepo-sição necessária entre os con-juntos de habilidades desses

papéis, o que é algo bom. E alguns indivíduos têm uma cobertura maior de habilidades do que outros. No en-tanto, as pessoas que estão de fora desses papéis nem sempre valorizam as habilidades e os focos necessários para trabalhar em cada um deles.

Isto foi o mais simples que conse-gui descrever para as habilidades di-ferentes necessárias para cada papel:

Designer de interação = pesquisa + design;

Desenvolvedor de interface = de-sign + HTML/ CSS/ JS;

Desenvolvedor de aplicações = codificação de back-end + HTML/ CSS/ JS e etc.

Essas diferentes combinações de habilidades trazem com elas diferen-tes perspectivas e focos sob o que cada pessoa faz.

Os designers de interação com-binam sua pesquisa e habilidades de design para compreender as necessi-dades do usuário e produzir concei-tos, soluções e designs que as pes-

soas querem usar. Isso requer o foco nos comportamentos humanos, na psicologia e na compreensão do por que as pessoas fazem o que fazem. São todas as coisas criativas e piegas do lado direito do cérebro. A maior parte dos designers de interação con-seguem te falar o que isso deve fazer e porque, mas não conseguem de fato construir algo que funcione.

Os desenvolvedores de aplicações (o que é algo bastante abrangente e que inclui seu conjunto razoável de habilidades) constroem a funciona-lidade subjacente que faz o produto funcionar. Tudo é código, lógica e o lado esquerdo do cérebro. Muitas ve-zes, o que ouvimos dos desenvolve-dores é “eu consigo fazer funcionar, mas não vai ficar bonito”. Isos sig-nifica que eles podem criar o HTML que irá funcionar tecnicamente, mas pode não causar uma boa impressão naqueles que são influenciados pela beleza da coisa (o que significa seu usuário final normal).

Já os desenvolvedores de interfa-ce preenchem o meio de campo ao combinar tanto as sensibilidades de

design, quanto as habilidades téc-nicas. Eles são bons em deixar algo bonito e funcional em um navega-dor/ dispositivo ao mesmo tempo. Eles têm habilidades produtivas para fazer maravilhas com as com-patibilidades dos navegadores. Isso requer uma compreensão profunda de como a renderização dos navega-dores se comporta para serem capa-zes de implementar um design para a web que renderize corretamente e faça com que todos aqueles pixels in-cômodos se alinhem perfeitamente.

Existe uma velha discussão que trata dos designers terem, ou não, que saber codificar. Muitos dizem que sim. É claro que isso é uma gran-de generalização e é possível encon-trar pessoas que trabalham sem fazer esforço através desses conjuntos de habilidades diferentes. Preciso res-saltar que cada pessoa tem forças e fraquezas diferentes. Meu ponto aqui é sobre os pontos em comum que de-finem os designers de interação, ao invés de diferenças individuais.

Design de Interação

DESIGN DE INTERAÇÃOX

DESENVOLVIMENTODE INTERFACE

A diferença entre um designer de interação e um desenvol-vedor de interface

14 Medson • DEZEMBRO 2012

Documents

Medson Magazine Design