Posts Tagged 'internet'

Design além da forma

livro-ebook

Imagem – fonte: http://www.imagens.usp.br/wp-content/uploads/06082012ebookFotoMarcosSantos024-240×135.jpg

Wallace Vianna é web designer e designer gráfico

Uma colega de trabalho me fez uma observação que na verdade era mais um alerta profissional do que ensinamento. “Voce é de web, mas observe estas questões ao diagramar um trabalho gráfico…”
Eram questões de design: equilíbrio, simetria, proximidade, direção, similaridade, cor, tipologia, e é claro, desenho. Estava num dia pouco inspirado, e isso realmente estava afetando a qualidade final de meu trabalho.

Fazer design para web ou gráfica é design. O que muda são algumas ferramentas, mas o ato de desenhar considerando questões e projeto é igual em qualquer área do design, seja uma página de internet, página impressa, painel de carro ou de um avião.

Vamos tomar como exemplo uma página de internet/digital e uma página de livro, revista ou  jornal, como na foto acima. O que elas tem de diferente?

Hifenização: página de internet não tem separação de sílabas ainda, mas acredito que possa ter, do mesmo jeito que os navegadores possuem verificador ortográfico para textos digitados em campos de formulário, por exemplo. Até por que se o layout for fixo, a mudança de espaçamento em blocos de texto hifenizados pode comprometer o layout visível. Mas isso – texto extrapolando ou aquém do espaço disponivel – sempre será um problema em projetos/páginas que não consideram aumento do tamanho do texto, por exemplo.

Versão em mais de um idioma, na mesma página, no mesmo espaço. Na internet pode-se traduzir todo o texto de uma página, na mídia impressa tem de existir versões, muitas vezes, em páginas distintas ou em resumo.

Multimídia: evidentemente colocar multimídia em mídia impressa é tarefa praticamente impossível. O máximo que se pode é variar o papel, tipo de impressão ou acabamento. O mais longe que já ví em mídia impressa foi impressão de tinta com perfume (!).

Interface: apesar do senso comum, ambas mídias – impressa e digital – tem suas limitações muito bem claras no tocante ao acesso da informação. Apesar do desenho das páginas de internet poder ser variado, o acesso ainda se dá por teclado e mouse (agora tela de toque/touch screen, que é como o mouse sobre a tela).
Os livros podem no máximo ter um formato (termo técnico, faca) diferente, diagramação menos convencional (se bem que tentar trazer a leitura de hipertexto para a página impressa virou moda, desde que criaram as “notas de parágrafo”).

Portabilidade: dentro das mídias eletrônicas o e-book/livro eletrônico parece ser uma tentativa de trazer o digital para o analógico; aparelhos como o Ipad,  Kindle e o Kobo tentam a todo custo fazer com que a leitura de um livro em tela seja confortável e prática como o livro de papel. Baterias auxiliares (ou solares) para equipamentos eletrônicos entram nesse contexto para prover energia – e uso – por longos períodos de tempo. Novas tecnologias como o papel eletrônico e tinta digital entram nesse contexto. Mas o livro impreso ainda ganha no quesito portabilidade (falo aqui também no sentido de resistência a danos como quedas) e consumo de energia.

Revisão: isso pode considerar o perídodo de pré ou pós editoração. Durante a editoração (hoje eletrônica) a revisão do trabalho a ser impresso é das mais simples, em relação aos tempos de “editoração de mesa” (desktop). Após a impressão a revisão somente pode se dar com inclusão de anexos/erratas; após a distribuição, só na edição seguinte.
Na mídia eletrônica (internet) a revisão pode se  dar a qualquer momento, sem grandes custos; pode-se ainda manter um histórico de versões de um  mesmo conteúdo (se o material for produzido em CMS – gerenciadores de conteúdo ou Wikis), ou, como no caso dos blogs, fazer das marcas de revisão (texto riscado) parte do texto, assinalando que o conteúdo mudou ao longo do tempo.

Leitura: o hipertexto é bem diferente do texto impresso, apesar do texto digital ter o impresso como base. A diferença está mais na agilidade do que no conceito: se você tem as referências de seu texto (impresso ou na internet) disponíveis no momento da leitura você tem um sistema de hipertexto em funcionamento.

Poderia prosseguir com a lista mas na essência todo o processo de editoração de uma página (de internet ou impressa) seguem os mesmos paradigmas de design. De um lado a inspiração e arte para fazer o trabalho caminham de mãos dadas com a tecnologia disponível para a realização. O design estará presente até no dia em que a página de revista puder ser lida na tela do óculos ou na lente de contato.

Anúncios

Layout versus resolução de tela (2)

Retomando o tema e a pergunta freqüente em curso de webdesign: meu site deve ser feito em que tamanho (melhor dizendo, dimensão = largura e altura)?
Primeiro, vamos definir as resoluções de tela mais utilizadas: 800×600, 1024×768 e 1280×1024 pixels


E a Área útil de cada resolução, sem barra de rolagem: 760 x 410, 1000×600 e 1260×856

Áreas úteis para resolução de monitor de 800×600, 1024×768 e 1280×1024 pixels.

Atenção apenas a dois detalhes:

  1. As resoluções de monitor 800×600 e 1024×768 são proporcionais entre sí, já a resolução 1280×1024 não é proporcional em relação às anteriores. Isso significa que um layout feito para as duas primeiras resoluções, se for visto na terceira, irá aparecer com faixas vazias acima e abaixo (ou cortado nas laterais, como nos filmes da TV tradicional).
  2. As dimensões de área útil aqui citadas são apenas uma referência, pois é impossível prever qual navegador, monitor (14”, 15”, 17”, 21”, 29”) e barras do navegador o usuário está usando, o que pode ampliar ou reduzir a altura (área útil vertical) do navegador.

A variável mais fácil de controlar é a largura (área útil horizontal) tomando o cuidado de definir se seu layout terá ou não borda na página (HTML); neste texto vamos considerar que essa borda já foi retirada de seu layout.

Vamos colocar as situações mais comuns, dentro do que se convencionou chamar de melhores práticas, mas que não chegam a ser definitivas.

Layout encaixado na tela

– Layout fixo

Normalmente esse layout pressupõe ser visto sem alterações de forma, em escala (proporcional).

Assim sendo, seu layout tem de ser feito pensando minimamente para o usuário de 800×600 (área útil em torno de 760×410 pixels) e não deve ter barras de rolagem em nenhuma das “resoluções mais utilizadas”.

Layout em 800×600, 1024×768 e 1280×1024 pixels.



– Layout líquido (ou fluido) encaixado na tela

Nesse caso o layout se ajusta tanto horizontal quanto verticalmente, nas três resoluções de monitor (1024×768 e 1280×1024 pixels). Normalmente desenvolvido em Flash ou HTML (com programação). Se destina a páginas que devem ser vistas por inteiro, ocupando toda a área útil da janela do navegador, sem reduções de escala.


Layouts em 800×600 e 1024×768 pixels.



Layout vertical

– Largura fixa, alinhado à esquerda

Layout em 1280×1024 pixels.

Aqui apenas temos de ter o cuidado de dividir o layout em áreas de maior, médio e menor interesse.

Destina-se a sites onde o conteúdo pode ser distribuído (e exibido) em camadas de relevância sem alterar o layout.
O conteúdo mais relevante deve poder ser visto, sem rolagem (horizontalmente), em resolução de tela 800×600 (largura da área útil em torno de 760 pixels);
o conteúdo de médio interesse (também horizontalmente) em 1024×768 (largura da área útil em torno de 1000 pixels) e 1280×1024 pixels (largura da área útil em torno de 1260 pixels).
O conteúdo de menor interesse a partir de 1280×1024 pixels, com rolagem.

     

Layout projetado para duas resoluções de tela: 800×600 e 1024×768 pixels.

– Largura fixa, centralizado

Aqui recaímos quase que na mesma situação, a área útil horizontal (mínima)deverá ser para 800×600 (largura de 760 pixels); nas demais resoluções as laterais ficam em branco (ou com fundo de página preenchido com cor ou imagem).

Se destina a sites que:

  • precisam ter desenvolvimento rápido
  • podem ter seu conteúdo em escala
  • necessitam ter mesma diagramação, em qualquer situação
Layouts em 800×600, 1024×768 e 1280×1024 pixels.



– Layout líquido horizontal:

No sentido horizontal, se aplica em qualquer resolução. Normalmente feito em tabelas ou CSS, eventualmente em Flash.

Destina-se a sites que precisam ter seu conteúdo principal visto em qualquer resolução – mínima ou máxima – mesmo com alguma alteração no layout.

Layouts em 800×600, 1024×768 e 640×480 pixels (ou nas duas primeiras resoluções de monitor, com largura da janela do navegador reduzida).



Outras tendências

Uma das novidades na área de web, além da acessibilidade, tableless, webstandards é o design “Full flash browser” (numa tradução livre, “Flash em toda a tela do navegador”) que é um layout onde a navegação ocorre sem a tradicional barra de rolagem do navegador, mas percorre (ou “rola”) além da tela visível, em todas as direções como neste exemplo ou neste outro exemplo:

Esse tipo de navegação é uma evolução dos sites com “navegação horizontal“, uma vez que

sugere navegação em qualquer sentido, além (e dentro) da tela do navegador, sem rolagem tradicional.

Uma outra tendência é o design em camadas múltiplas, onde as páginas ocorrem umas sobre as outras. O site da criadora do Harry Potter é um bom exemplo dentro desta tendência.

Como esse assunto evolui, em breve discorrerei sobre layouts para dispositivos móveis e telas wide-screen (panorâmicas).