Posts Tagged 'página'

Modelos versus originais

Em minhas aulas de webdesign oriento os alunos no uso de modelos de layout no desenvolvimento de sites por diversos motivos:

– Criação de cultura visual. Navegar por entre imagens com grau de similitude (onde não mais se distingue o diverso ou o comum) é diferente de navegar por imagens que carregam grau de semelhança entre si (no conceito, tema ou estrutura). Para quem tem espírito crítico, é oportunidade de perceber que, por exemplo, a cor preta não se aplica normalmente ao tema alimentação. Para quem não tem cultura visual ou talento nato para desenho [*], é a chance de escolher um bom desenho antes de iniciar seu layout para a web.

– Encurtar a estrada entre a criação e a realização. Já tive alunos que insistiram em ficar na frente do Photoshop por uma semana sem produzir literalmente nada (!).

Apesar disso, tenho de reconhecer que do ponto de vista da criação, os templates/modelos padecem de um defeito inerente a sua função: não relacionam o conteúdo escrito com a informação visual. P.ex., por mais que um modelo para “site educacional” seja bonito, ele dificilmente dará conta de comunicar (no seu projeto visual) o conteúdo de minha apresentação (seja ela botânica ou eletricidade elétrica). E a iconografia utilizada dificilmente se justificará mesmo dentro do próprio contexto visual – porque aqueles traços semelhantes a um código de barras estão no topo do meu site, cujo fundo é uma textura de madeira?

Independente dos prós e contras, cada qual – modelo ou criação legítima – cumpre seu papel social. Quem procura ter uma presença na internet nem sempre deseja altos custos, e aí entram os sites de modelos com cadastros de domínio automatizados, e serviços disponibilizados em planos de pagamento. Ter uma presença na internet – assim como ter um cartão de visitas ou portfólio de trabalhos realizados – é o espelho de uma necessidade (por exemplo, se comunicar com os clientes ou ter um mostruário de serviços).

Por outro lado, contrariando o senso comum, os serviços “sob medida” acabam se valorizando em relação aos serviços “empacotados” (os famosos modelos, neste caso). Quem opta por ter um serviço original deseja, entre outras coisas, realizar algo que não existe no mercado, diferenciação ou algum tipo de excelência (no produto ou resultado obtido). Aí o webdesigner pode ver uma oportunidade de remuneração compatível com suas pretensões e anos de estudo, mas apenas se investir continuamente em sua formação. Inovação é diferencial e este só pode existir como fruto de Pesquisa e Desenvolvimento (P&D).

Eu particularmente acredito que o webdesigner pode atuar em pelo menos duas áreas “consagradas”: criação de novos serviços /produtos “empacotados” ou desenvolvimento de soluções customizadas. E ambas passam pela P&D. Um exemplo dentro do contexto deste artigo seria um serviço de construção de sites a partir de de modelos que trouxesse embutido serviços de chat em Flash, conectado a celulares; o outro exemplo já existe na praça: desenvolvimento de sites personalizados para estratégias de comunicação específicas, de grandes empresas. Em resumo, existe espaço para todos, resta a nós escolher sua área de atuação, com ou sem modelos.

_________________________________________________
Nota:
[*] Vale lembrar aqui que, fazer layouts para web não pressupõe necessariamente formação clássica em desenho; muitos webdesigners/projetistas de internet famosos como Hillman Curtis não sabem desenhar à mão livre e isto não os impediu de alcançar prestígio na atividade; isto se explica muito pelo fato de que a geração atual teve acesso às facilidades da informática mais cedo que a geração anterior, e que, desenhar em computador- latu sensu – independe de precisão manual ou formação em desenho, e sim de cultura tecnológica específica – coisa que qualquer adolescente que passa horas navegando na internet possui de sobra, mesmo que não se dê conta disso.

Texto pubicado originariamente no site Catabits

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).