Links

Viagens recomendadas e textos consultados...
• Level Ten Web design
• 123 Clipart.com
• 420 Design
• Portal das Artes Gráficas
• Grantastic Designs
• Useit.com – Jakob Nielsen’s Website
• Programa Prof2000
• AH Digital FX Studios
• Artífice da Web
• http://en.wikipedia.org/
• Lynch, Patrick e Sarah Horton (2004) Guia de estilo da web. Princípios básicos de design para a criação de websites. Editorial Gustavo Gili, SA. Disponível @ Web Style Guide

Imagem

O número de formatos de imagem, é muito grande (atingindo cerca de 40 tipos diferentes), sendo que são utilizados para diferentes fins. A resolução utilizada em impressão é muito superior à do suporte web (150dpi), visto que é necessário uma qualidade mais alta para impressão, devido aos diferentes tamanhos em que será impresso. No caso do web design, trabalha-se com 72 dpi de resolução.

Podemos constatar as diferenças na seguinte imagem:















.

Resolução

A resolução é a medida do detalhe de uma imagem que um dispositivo pode capturar ou reproduzir.

Para determinar a resolução de uma imagem, a industria gráfica adoptou a seguinte regra básica: 2 pixéis por ponto de trama no tamanho final fornecem o grau de detalhe necessário para reprodução. A cada unidade de lpi deverão corresponder 2 pixéis de imagem:
Se pretendermos utilizar uma lineatura de 150 lpi (impressão offset em papéis couché) a resolução ideal para imagens em quadricomia é de 300 ppi (150 lpi x 2 pixéis).

Se pretendermos utilizar uma lineatura de 133 Ipi (impressão offset em papéis não revestidos), deveremos digitalizar uma imagem a cores a 266 ppi (133 x 2 px).

Publicação Web / Impressão
A publicação na Web tem características muito particulares. A resolução gráfica de um monitor de computador é significativamente menor do que a resolução de uma impressora e o volume de uma imagem de alta resolução (medido em bytes) é excessivamente grande para ser viável na Web. Antes de publicarmos uma fotografia na Web nós somos sempre obrigados a reduzir a resolução (redimensionar) e até a recortá-la.

Na web não são precisos mais que 72 Dpi. Mais do que este valor não melhora a qualidade da imagem, aliás até é prejudicial pois os downloads tornam-se mais demorados.

As impressoras têm resoluções bastante maiores. Actualmente até as impressoras baratas conseguem imprimir pixels tão pequenos que são necessários milhares deles para ocupar uma polegada. Elas têm resoluções de milhares de pixels por polegada.

A imagem da esquerda tem quatro vezes mais pixels do que a imagem da direita.
Por ter resolução maior ela consegue mostrar mais detalhes.

Imagem retirada do site: http://www.artifice.web.pt/redir.html#pag=00/imagens-digitais/12-01-2006-redimensionar-imagens.html

Fonte

Em web o texto deve distribuir-se em blocos pequenos, de parágrafos curtos, e com um comprimento de linha que não ultrapasse os oito cm. A baixa resolução dos monitores exige o cumprimento destas regras para que o cansaço visual não se imponha e leve o leitor a abandonar a página. É também crucial definir os espaços em branco, que permitem equilibrar os conteúdos dentro da página, com frequência mais diversificados e menos estáticos. O alívio visual patente nesta técnica é também necessário no print design, mas de modo menos premente.

Tipos de fonte




Serifadas - Times New Roman, Georgia - ideais em longos blocos de texto.

Não serifadas - Verdana, Arial - em títulos, para contrastar com fontes com serifa.

Alguns estudos indicam que as fontes sem serifa são ideais para a leitura online, ao permitirem uma leitura mais fluida, enquanto as fontes com serifa são mais adequadas à impressão em alta resolução.

Altura-x

No ecrã de computador a legibilidade de um tipo de letra é influenciada pela altura-x (a altura da letra "x" minúscula) e pelo tamanho geral da fonte em causa. Existem tipos de fonte criados especificamente para serem lidos nos monitores, como é o caso da Verdana e da Georgia, que têm ambas alturas-x elevadas e um tamanho grande, o que por outro lado as desadequa para uma impressão em papel.

Resolução
Em material impresso as fontes são processadas em 1200 dpi. Os monitores não têm ainda capacidade para processar as fontes em alta resolução.

Escolha da fonte
A fonte escolhida para ser impressa mantém-se exactamente como foi concebida. Pelo inverso, a visualização das fontes escolhidas para websites está dependente da existência dessa fonte no computador do utilizador. Em caso negativo, o browser vai substituí-la por outra. Isto limita a escolha de fontes em variedade, e o respectivo estilo do site. Existe a possibilidade de embeber a fonte, mas para fazê-lo convertemos o texto em imagem, o que leva a que não seja reconhecido pelos motores de busca, para além de colocar alguns impedimentos ao nível da acessibilidade.

Tamanho
O corpo da fonte definido pelo webdesigner não é visualizado nas mesmas condições pelos utilizadores. A título de exemplo, esse tamanho pode variar conforme a resolução do monitor, as definições do browser, ou o sistema operativo. Uma forma de contornar isto é definir o corpo da fonte em unidades de pixel, mas esta opção levanta problemas de acessibilidade a utilizadores que necessitem de aumentar o tamanho da letra por terem problemas de visão.

Alinhamento do texto
O texto justificado é espaçado de forma mais imprecisa no web design do que no design impresso, pelo que deve ser usado com cautela. A opção ideal recai sobre o alinhamento à direita, que facilita a leitura cadenciada do texto.

Cor
As cores aplicadas ao texto na internet devem ser usadas com cautela, uma vez que determinadas cores estão associadas a uma função. Temos por exemplo o azul escuro para os links activos e o roxo para os links visitados. No papel impresso já só estão em causa a função estética e uma possível significação simbólica da cor (branco = pureza, etc.).

Cor

CMYK

RGB

RGB – sistema de cores de visualização no monitor

CMYK – sistema de cores de impressão

A principal diferença que existe entre “print” e web, não é só ecrã versus papel, mas essencialmente luz versus tinta. Quando se fala de cor, há que distinguir entre a cor obtida aditivamente (cor luz) ou a cor obtida subtractivamente (cor pigmento). No primeiro caso, chamado de sistema RGB, temos os objectos que emitem luz (monitores, televisão, sol, etc.) em que há adição de diferentes comprimentos de onda das cores primárias de luz Vermelho + Azul (cobalto) + Verde = Branco.

O padrão RGB foi adoptado porque é implementado pela grande
maioria dos fabricantes de dispositivos de vídeo, e desta forma,
garantem a uniformidade de referências a cor.

O sistema CMYK é utilizado pela Industria gráfica nos diversos processos de impressão, como por exemplo: o Offset e o processo Flexográfico, bastante usado na impressão de etiquetas e embalagens.

Algumas cores podem ser exibidas nos monitores de vídeo, mas não podem ser impressas e algumas cores podem ser impressas, mas não exibidas em monitores. Além disso existem cores que podem ser vistas pelo olho humano, mas não podem ser produzidas por monitores nem impressoras.

Vantagens:

WEB -Mais barato. -Tecnicamente é possível produzir milhões de cores no ecrã, se tiver um monitor de boa qualidade .

PRINT -Tecnicamente mais perfeita

Desvantagens:

WEB-Actualmente ainda só existem 216 cores seguras na web (significa que há monitores que não atingem mais do que esse nº de cores).

PRINT-Tem custos elevados

Navegação

O principal diferenciador entre a navegação no print design e a navegação no web design é a interactividade. O design é impresso num suporte estático, enquanto a web permite gerar animação.

A navegação num suporte impresso é mais previsível, enquanto num website a estratégia de navegação é mais idiossincrática, até porque a WWW se baseia na associação de páginas (e respectiva informação) através de links.

Um livro, por exemplo, organiza-se de acordo com uma estrutura de navegação linear, em que existem uma paginação e uma ordem sequencial de leitura relativamente rígidas. As potenciais quebras neste regime são fornecidas pelos índices que, numa formulação alternativa, funcionam como links para zonas específicas do texto. Um índice onomástico será, nessa linha de pensamento, a fórmula mais aproximada às hiperligações da Internet.

A organização de um website pode estar sujeita a várias tipologias, e muito raramente se prevê a sua consulta "de fio a pavio", numa leitura sequencial linear. O visitante nem sempre entra pela homepage do site, e é com frequência um motor de busca que o conduz a uma página interior e a uma zona específica. Dentro de cada página, e apesar das tendências gerais de leitura visual, a variedade de links pode exercer diferentes níveis de interesse sobre leitores diversos, conduzindo-os para zonas distintas do site.

Devido à possibilidade de dispersão do utilizador no meio do manancial de informação que a Internet lhe proporciona, uma estrutura de navegação na web deve ser mantida o mais simples e intuitiva possível, sem ser simplória. O print design, por estar assente num suporte estático e intrinsecamente previsível, permite um jogo mais arrojado com os elementos gráficos.

É muito mais fácil um utilizador perder-se num website do que num suporte impresso. Como tal, torna-se necessário recorrer a alguma redundância em elementos-chave que lhe sirvam de referência. São exemplos o menu principal, os contactos, títulos e subtítulos de secção.

A Internet vive da interactividade e como tal devem evitar-se os "becos sem saída", páginas sem hiperligações. Por isso e porque se trata de um ambiente em constante actualização, os "dead links" aumentam de facto o índice de mortalidade de um site, pelo que se recomenda uma revisão frequente dos conteúdos e hiperligações das páginas. Num documento impresso a desactualização dos conteúdos é uma característica inevitável, porque uma vez impresso o conteúdo não pode ser alterado senão através de uma nova edição e impressão.

Finalmente, há que ter em conta que quando lemos uma revista, é apenas essa e não outras que seguramos nas mãos. Quando navegamos na web é raro permanecermos um período de tempo equivalente num único site porque o apelo irresistível para seguirmos um link de saída está a apenas a um clique de distância.

Layout

Considera-se que este critério do design assente em dois pontos principais, que o caracterizam, como sejam a dimensão do espaço por onde iremos distribuir o conteúdo, e a disposição que fazemos dele, nesse mesmo espaço.

Exemplo de layout:


















As dimensões no caso de print design serão
diversas, dependendo do suporte específico que se utiliza (cartazes, folhetos, cartões, etc), em oposição ao web design que se limita ao tamanho do monitor (14’’ a 20’’).

Na distribuição do conteúdo pelo espaço, há maior rigor no caso da impressão, pois o tamanho da tela é sempre o mesmo, visto que é um suporte físico, palpável.

Enquanto que em webdesign, que depende de diferentes variáveis, como sejam tipo de browser e resoluções dos monitores, o que poderá alterar radicalmente o layout de uma página.

Intro

Partilham o apelido, mas cultivam entre si diferenças incompatíveis. Web design não é design "impresso" no ecrã. E um Print Screen não é a conversão do web design para o papel. Parafraseando McLuhan, o meio define a mensagem, pelo que a mesma mensagem nunca é a mesma quando patente em contextos diferentes.

A web é intrinsecamente dinâmica, o papel é predominantemente estático. O espaço útil de visualização varia, como mudam as características da navegação. O utilizador necessita de desenvolver conhecimentos diferenciados para a visualização de cada um em consonância com as respectivas propriedades.

A experiência proporcionada pelo web design é, por isso, distinta da que o print design promove. Não apenas no resultado final, mas logo a partir da concepção. Vejamos porquê.