Introdução

Print Design:
É uma extensão da prática do design e surge como uma necessidade de projectar e
conceber produtos com intuito de serem impressos.

Portanto print design é a definição que se dá ao design de produtos que serão
impressos como panfletos, flyers, cartazes, cartões de visita e outros… tudo o que é
desenhado para ser impresso e publicado num suporte bidimensional.

Web Design:
É uma outra extensão da prática do design que tem como objectivo desenvolver
Web Sites para a internet.

O web design tende à multidisciplinaridade, uma vez que a construção de páginas
web requer “know how” de diversas áreas técnicas, como programação, projecção de
layout, entre outros.

Áreas como a programação, adopção de webstandards, inovações nos recursos dos
navegadores em conjunto com o design gráfico, estão em constante evolução afectando
directamente esta actividade.

A preocupação fundamental em Web Design é agregar os conceitos de usabilidade
com o planeamento da interface, garantindo que o usuário final atinja seus objectivos de
forma intuitiva.

Apresentação do tema

Falaremos de seguida nas diferenças existentes entre estas duas especialidades do Design. O Print Design e o Web Design. Para um leigo é possível considerar que as diferenças são mínimas, mas é essencial para qualquer designer saber que existem diferenças e que não são tão poucas como se pensa. Assim esperamos ajudar a esclarecer não só quais as diferenças existentes mas também o porquê e em que consistem.

Resolução

A Resolução descreve o nível de detalhe de uma imagem, sejam elas formatos impressos como cartazes e outdoors ou formatos de multimédia como páginas de Internet. Quanto maior a resolução maior o detalhe existindo diversas formas de medição sendo o DPI a medida mais recorrente.

O Print Design está directamente relacionado com os Dots Per Inch ou DPI. DPI é uma maneira de medir a resolução de uma imagem impressa. É medida pelo numero de "dots" que cabem num determinado espaço de imagem (inch). A média de DPIs para a maioria do material impresso é de 300 DPI, mas claro que pode variar.

Visto que Web Graphics é apenas representado em monitores, DPI não se aplica, excepto numa situação: um monitor de computador é de 72 DPI. O computador não quer saber quantos DPIs foram definidos para certa image porque a apresenta sempre a 72 DPI. Tudo o que interessa saber ao computador para apresentar a imagem no monitor é quantos pixeis existem na imagem.

Como resultado, os designers que desenham para impressão devem criar imagens maiores e com mais resolução que os designers que desenham para a Web.

Formatos de Imagem

Uma imagem é formada por uma série de pontos (pixels) na horizontal e na vertical. Para poder transmitir electronicamente ou arquivar uma imagem, é preciso gravá-la num ficheiro, segundo um certo padrão, de modo a poder restaurá-la posteriormente.

Ao longo dos anos, foram desenvolvidos muitos padrões, consoante necessidades ou interesses comerciais de empresas ou instituições. Muitos destes formatos, dos quais destacamos seis (falaremos deles a seguir), GIF, BMP, TIFF, PNG, JPEG e Raw, estão disponíveis na maioria dos programas gráficos.
GIF é uma sigla que quer dizer Graphics Interchange Format. Foi criado na década de 70 para permitir a troca de imagens de “alta resolução”, que na altura tinham 256 cores. No formato GIF, as cores da imagem são colocadas numa tabela e um índice é criado para representar cada pixel. É um formato muito utilizado na Web, vocacionado para representar ícones ou desenhos com cores lisas, devido ao pequeno tamanho do ficheiro gerado. Por representar 256 cores é um formato de 8 bits (um bit pode representar dois estados, 0 e 1, logo, 8 bits podem representar 2x2x2x2x2x2x2x2 estados, ou seja, 256).
GIF' tem algumas vantagens como por exemplo ser suportado pela maioria dos web browsers, podem conter fundos transparentes, suportam interlacing, e podem ser usadas como imagem de link (permitindo o user clicar na imagem como se fosse um link para outro website).
JPEG é uma sigla de Joint Photographers Experts Group. Um grupo de especialistas resolveu reunir-se para estabelecer um método de compressão de imagens adequado à representação de fotografias, que gerasse ficheiros de tamanho reduzido. Surgiu então o JPEG ou simplesmente JPG. Deve notar que JPEG é um método de compressão de imagens e não um formato de imagens.
Tecnicamente, a imagem que chamamos de JPEG deveria ser chamada de JFIF (JPEG File Interchange Format), ou seja, imagem JFIF comprimida em JPEG. Agora entende porque quando falamos do TIFF mencionamos a possibilidade de usar compressão em JPEG.
A compressão em JPEG utiliza sempre um processo destrutivo (à excepção do JPEG2000), no qual as cores dos pixels são trocadas por outras, de forma a simplificar a imagem e obter um ficheiro reduzido. Por ser destrutivo, raramente é utilizado em aplicações em que a qualidade máxima é esperada.
TIFF Também conhecido por TIF, é um dos mais antigos formatos de imagem. Permite a gravação de múltiplas imagens no mesmo ficheiro, a representação da imagens em RGB ou CMYK e a possibilidade de compressão por métodos não destrutivos ou até destrutivos como o JPEG. Por ser um formato extremamente flexível, é o preferido no mundo profissional. É usado extensivamente para gráficos tradicionais impressos. Compressões com e sem perdas de informação disponíveis (LZW, ZIP e JPEG) assim como outras opções, apesar de muitos programas não suportarem essas opções para além do padrão TIFF.
PNG é um formato de imagem bitmap (mapa de bits) comprimido sem perdas de informação, originalmente designado para substituir o uso de GIF na web. Livre de patente patent, que venceu em 2003, associado a GIF.
BMP (ou bitmap, que significa mapa de bits em inglês) são imagens que contém a descrição de cada pixel, em oposição aos gráficos vectoriais. É um formato criado pela Microsoft no início também para representar 256 cores, sendo mais tarde ampliado para 16,7 milhões de cores (24 bits). Idealizado para ser um formato de ecrã, não possui grande flexibilidade, além de gerar ficheiros de grandes dimensões. Por isso, raramente é usado em aplicações sérias.
O tratamento de imagens deste tipo requer ferramentas especializadas, geralmente utilizadas em fotografia, pois envolvem cálculos muito complexos, como interpolação, álgebra matricial, etc. Um bitmap pode ser preto-e-branco ou colorido. Há um padrão chamado RGB, do inglês Red, Green, Blue, que utiliza três números inteiros para representar cada uma das cores primárias, vermelho, verde e azul.
RAW palavra que em Inglês, significa “cru”, tem ficado famosa ultimamente, por causa das câmaras digitais. Também não é um formato de imagem. Inserida no contexto, significa “sem modificação” ou “na sua forma mais pura”. É utilizada para indicar que uma imagem foi gravada tal e qual foi capturada pelo sensor da câmara, ou seja, o RAW é uma representação sequencial dos pixels de determinado sensor de imagem. Manter uma dependência com o sensor significa que cada modelo de câmara existente no mercado irá gerar um ficheiro RAW diferente.
A vantagem de trabalhar em RAW é poder transferir imagens entre equipamentos sem perder qualidade, uma vez que a transformação de uma imagem mesmo entre RAW e um formato não RAW pode gerar diferenças de qualidade.

Tipografia

Para o publico ver o mesmo tipo de letra que vemos nos nossos ecrãs, terão que ter o mesmo tipo de letra instalado nos seus computadores. Caso contrário, o seu browser vai substituir o tipo de letra por um que esteja instalado no computador, sobre o qual os designers não têm qualquer controlo. Por esta razão, deve-se ser mais conservador na escolha dos tipos de letra. Usar apenas as fontes que o publico geral já tem nos seus computadores pessoais. É possível fazer com que o publico veja o seu tipo de letra pessoal mas para isso é necessário fazer a conversão para gráfico. Esta situação deve ser usada de maneira moderada visto que vai aumentar o tempo de download para aceder ao site. O web design é muito menos sofisticado em termos de possibilidades comparado com o print design. A escolha da fonte, do tamanho de um texto, onde termina e recomeça, e como ele se lê – são tudo aspectos de Tipografia. E numa web page, eles são geralmente determinados pelo web browser, não pelo criador do web site. Numa resolução de apenas 72 dpi’s, os textos não é de modo algum tão definido num ecrã como será numa impressão. Por esta razão, no caso do web design deve-se ter muito cuidado para não sobrecarregar os leitores com muito texto e permitir alguns espaços vazios entre os textos. Outro aspecto importante relaciona-se com o lettering em si, sendo as de percepção mais simples, como o arial, escolhas mais acertadas para uma leitura que tem como suporte o monitor.

Navegação

O aspecto N-dimensional do web design provem da navegação hyptertext que é a essência da Web. Movimento e navegação é o que define a Web. Quando se analisa o "look-and-feel" de um website, o sentimento domina completamente a experiência do user. Afinal de contas, fazer é mais memorável e cria um maior impacto emocional do que ver apenas.

Em Print, a navegação consiste somente em virar páginas: um interface ultra simples que é um dos grandes benefícios dos suportes de impressão. Porque o virar a página é tão limitado, que muitas vezes nem é pensado como um elemento do design. Em contraste, navegação hypertext é a maior componente do Web Design, que requer decisões como:

* Aparência dos links.
* Como explicar aos users onde podem ir e onde cada link irá dar.
* Visualização do local onde o user se encontra.
* Arquitectura de informação.

CSS

Cascading Style Sheets, ou simplesmente CSS, é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.

Ao invés de colocar a formatação dentro do documento, o programador cria um link (ligação) para uma página que contém os estilos, procedendo de forma idêntica para todas as páginas de um portal. Quando quiser alterar a aparência do portal basta portanto modificar apenas um arquivo.

Esta linguagem moderna veio encurtar a ponte entre o Print Design e o Web Design. Graças aos CSS já é possível o Web Design ter um formato de texto mais idêntico ao do Print Design.

Modelos de Cor (CMYK vs RGB)

Outra diferença entre Print Design e Web Design é a maneira como as cores são usadas. Print Design recorre a uma síntese subtractiva de cores obtido por mistura de pigmentos, que é o caso do sistema CMYK (Cyan Magenta Yellow Black) enquanto que o Web Design usa um sistema aditivo de cores que consiste na projecção de luz como é o caso do sistema RGB (Red Green Blue).

Na realidade, existem inúmeras diferenças subtis na forma como os diferentes equipamentos produzem um determinado espectro de cores. Materiais impressos utilizam o sistema de quatro cores CMYK, enquanto que ecrãs de computador usam o sistema RGB, e o acerto entre os dois pode ser extraordinariamente difícil. Enquanto que o sistema Pantone funciona bastante bem entre equipamentos de diferentes tipos, a transição de ecrã para impressão - a forma como a maioria da publicações são hoje produzidas - ainda é vista por muitos como um acto de tentativa e erro.

CMYK é um sistema de quatro cores usado para criar as cores que serão impressas. Misturando todas as cores num sistema de padrões, os designers criam uma ilusão óptica que faz o olho humano pensar estar a ver outra cor. Por exemplo se agarramos num jornal, revista ou livro de banda desenhada e usar-mos uma lupa numa imagem colorida veremos um padrão de pontos aglomerados para criar uma cor quando vista a olho nu.

Existe também, no Print Design, um sistema de cores conhecido como Pantone.
Entre os primeiros produtos estavam os Guias Pantone, que consistiam num grande número de pequenos e finos cartões (aproximadamente com 5 cm), impressos num dos lados com uma série de cores relacionadas e então unidos num pequeno livro. Por exemplo, uma determinada página poderia conter certo número de amarelos variando em luminância desde claro a escuro. Edições anuais dos Guias Pantone são editadas visto que as tintas utilizadas em cada edição com o tempo degradam-se. Em teoria, a ideia do sistema Pantone é escolher as cores desejadas dos guias e então utilizar os números para especificar de que forma é que se vai imprimir o output. Por exemplo, podemos pedir à empresa que impressa o trabalho utilizando a cor Pantone 655 e a empresa terá instruções sobre como produzir a cor 655 no seu equipamento. Desta forma, o produto final será exactamente o pretendido. Os Guias Pantone de diferentes edições muitas vezes têm cores diferentes de outras edições. Uma solução é a digitalização, com a utilização da livraria Pantone em espectro fotómetros. Desta forma, os utilizadores poderiam medir o valor da cor e compará-lo com o valor Pantone directamente, sem ter que o comparar com a versão impressa do guia.

RGB é um sistema de cores utilizado para suportes multimédia, como páginas web, cd-roms interactivos, entre outros. O sistema RGB é usado pela vasta gama de cores obtidas pelas suas misturas - 16.7 milhões de cores, para ser exacto.

A razão pelo qual o sistema de cores CMYK é utilizado, deve-se ao facto de ser impossível para a industria de impressão gráfica ter diferentes tintas para cada cor. Recorrendo então a um sistema mais barato que consiste na mistura de quarto cores, obtendo a ilusão de existirem várias cores.
Os computadores não têm essa desvantagem pois as cores resultantes do sistema RGB funciona com a mistura de luz colorida, mas isso agora dava para escrever um livro por isso não vamos aprofundar. É importante referir também que as cores impressas não podem ser transferidas para o computador. Muitas variáveis de impressão – espessura do papel, textura, cor, absorvência; tintas – não estão disponíveis num monitor de computador. Pode-se é obter efeitos semelhantes jogando com as cores que induzem uma ilusão dessas texturas, espessuras e afins.
Também, excessos de cor e aglomerados de elementos numa página web pode ser distractivo e contra-produtivo. A melhor estratégia será usar a cor de uma forma moderada, recorrendo a espaços em branco, ajudando os users a concentrarem-se nos items de interesse.

Layout

No Web Design o layout de uma página web, de forma geral implica a definição precisa de conteúdos, tendo em conta um interface agradável e de fácil compreensão e sobretudo um grafismo cuidado para que a sua consulta não se torne cansativa ou demasiado lenta, baseando-se em questões de ergonomia, arquitectura de informação; que consiste em aceder e visualizar os diferentes elementos de um site e suas páginas, recorrendo para isso a grelhas e disposição de elementos de forma estudada seguindo as regras acima descritas em relação ás cores, tipografia, etc...

O Print design também se rege pelos mesmos princípios, mas existem diferenças a começar pelo tipo de suporte (físico), revistas, outdoors, posters, flyers e por adiante e, a forma como a visão explora essas superfícies bidimensionais. Exemplo disso é a forma como as pessoas lêem revistas, uns de trás para frente, outros começam pelo índice e ainda uma minoria que começa pela primeira pagina em que abriu a revista, sem nunca perder noção da sua localização. Todos os elementos desde a disposição do texto, número de caracteres por colunas, tamanho da letra localização de publicidade diferem consoante esses suportes.

Conclusão

Respeitar as diferenças:

Algo que seja um óptimo trabalho de Print Design é provável ser um mau trabalho para Web Design.
Existem tantas diferenças entre as duas áreas que são necessárias diferentes abordagens a nível de design para aproveitar os pontos fortes de cada área e minimizar as suas fraquezas.

Print design baseia-se em deixar os olhos rolarem sobre a informação, seleccionando objectos de informação e usando justaposição espacial para fazer os elementos da página interligarem-se e fazerem sentido.
Web design funciona deixando as mãos moverem a informação (scrolling e clicking); a relação entre a informação é temporariamente expressa como parte da interacção e movimentação do user dentro das páginas de um site.

Print design é altamente refinado, claramente evidenciado por inúmeros trabalhados referenciados e reconhecidos mundialmente. Web design é pobre porque muitos sites baseiam-se em standards que fazem sentido no mundo do Print Design mas que resultam mal a nível de Web Design, por ser um formato diferente.