Web Design 2 - layout - Home Page de José Manuel Russoarterusso.net/assets/textos/web_design_layout.pdf · Antes de passar ao desenho da página, pense para que Resolução de Écran

José Manuel RussoEscola Secundária Padre Alberto Neto

2005

Parte 2

WEB DESIGN

LAYOUT DE PÁGINA

Design de uma Página: Estrutura e Elementos 8

Textos de José Manuel Russo Escola Secundária Padre Alberto Neto

WEB DESIGN

Introdução

Determinados os Objectivos e a Estrutura do Site, segue-se a segunda fase – o momento de definir oaspecto gráfico das páginas que constituirão o Web Site.

Como em todas as obras gráficas (uma pintura, um cartaz, uma revista, etc.), a disposição dos elementosna área de representação obedecem a uma certa ordem ou estrutura – uma página de Internet não foge aesta regra. Neste Módulo utilizaremos o termo Layout, termo de língua inglesa utilizado no âmbito doDesign Gráfico que significa a organização de uma página.

A Funcionalidade das páginas é essencial. É neste ponto que se fala em Usabilidade, ou seja como tornaro Site interessante e acessível. Jakob Nielsen tem sido uma das personalidades que mais tem investigadoa comunicação na Internet, o que lhe vale o título de “guru da Usabilidade”.

Os Elementos de uma página da Web (Web Page)

Quando se consultam diversos Sites, observa-se que existem diversos elementos que variam entre elesapenas no seu grafismo e conteúdo, sendo isso que nos habitua a facilmente “navergarmos” em qualquerpágina – rapidamente nos integramos no seu Layout.

Os Elementos (Assets) que integram qualquer Página em html (linguagem utilizada na programação depáginas para a Web) são:

§ BannerElemento que se situa a toda a largura do topo das páginas. Imagem estática simples oucomplexa (fotográfica ou não) ou mesmo animada, identifica, normalmente o SIte emque se encontra. É muitas vezes explorada para Publicidade ou evidenciar Novidades.



WEB DESIGN

§ Barra de Navegação (Navigation Bar)Elemento situado, normalmente, na horizontal imediatamente abaixo do Banner, ou navertical à esquerda (ou à direita). Permite a navegação no Site, dando acesso à primeirapágina dos temas principais (às páginas hierarquicamente abaixo da Home Page); podeainda (numa prática muito comum actualmente) dar acesso a sub-divisões dos diversostemas, embora seja mais simples criar uma Barra de Navegação Secundária. Tecnica-mente, as Barras de Navegação mais simples são compostas por Links de Texto (MSN)separados por linhas ver ticais ou por Botões de Hiperligação (M. Louvre ouSamsung)facilmente criados no Front Page; nas Barras mais complexas utiliza-se a pro-gramação em Java script (M. Prado ou Barclays) ou em Macromedia Flash (Macromedia).

§ Botões (Buttons)Agrupados ou dispersos pela página, são elementos de hiperligação a outras páginas ou,como noutro software, executam acções. Também com formas simples ou elaborados,são constituídos por imagens, habitualmente em conjuntos de dois ou três para simular aselecção e/ou o movimento de pressão sobre ele.

§ Marcas (Bullets)À semelhança das marcas de texto, servem para evidenciar items num Site. Em páginasWeb recorre-se frequentemente a Bullets gráficos, ou seja, ficheiros de imagem integra-dos no texto (o Front Page tem uma funcionalidade que torna prática a sua utilização).



WEB DESIGN

Outros Elementos que integram as páginas, variam com os conteúdos, sáo eles:

§ TextoEscrito directamente nas páginas ou importado a partir de documentos criados numProcessador de Texto (como o Microsoft Word). Organizam-se em Títulos, Sub-títulos eMancha de Texto – distinguem-se pelo Tamanho (Size) da Letra, medido em Pontos, e/ou Tipo de Letra (Font), usando-se habitualmente o Arial ou o Times New Roman(existentes em qualquer computador). A utilização de Tipos artísticos ou outros é deevitar, pois num computador onde esse Tipo não esteja instalado será substituído porHelvetica, Arial ou Times, descaracterizando o Layout da página (se tal factor for funda-mental, o texto deverá ser convertido emimagem, o que tornará a página “pesa-da”). Relativamente ao Estilo do Tipo,pode ser Negro (Bold), Itálico (Italic) ouSublinhado (Underline) – em páginasWeb não utilize o sublinhado, pois é uti-lizado nos Hyperlinks (Hiperligações) esó servirá para confundir o utilizador.

§ ImagemSão ficheiros do tipo Bitmap a Importar ou Colar na página. Os Bitmaps são em formatoscriados especificamente para a Web – GIF, JPEG ou PNG (este assunto será desenvolvidona Parte 4 e 5) – por constituirem ficheiros de pequena dimensão, com a consequenteperda de qualidade.

§ AnimaçãoQuando utilizados com objectivos precisos, são elementosque dão uma certa dinâmica às páginas Web. Podem serprogramados como bitmaps animados (em formato GIF),em Java script ou em Flash. Neste último caso seránecessárioi ter o Shockwave ou o Flash Player (incluídono CD) instalado no computador para serem visualisados.

§ FilmePequenos filmes também podem ser integrados nas pági-nas html. O formato mais comum é o AVI, que são de gran-de qualidade mas demasiado grandes para serem de grande duração ou tamanho. Maisreduzidos são os formatos MPEG, RM da Real, embora de qualidade reduzida, ou o MOVda Apple – também estes dois formatos precisam de ter o respectivo Player (Real One eQuick Time) instalado localmente.

§ SomFinalmente, o som é outro elemento que pode ser ouvido como som/música de fundo ouquando activado num Link ou num Botão para o executar. O formato mais comum é oWAV, que são de grande qualidade mas demasiado grandes para serem de grande dura-ção. Mais reduzidos são os formatos MIDI (em que a música é sintetizada), MPEG e orecente MP3.



WEB DESIGN

Regras da Usabilidade

Definidos os objectivos do Web Site, põe-se a questão de como gerir os elementos a integrar as páginas dosite. É neste ponto que se fala em Funcionalidade ou na sua Usabilidade, ou seja como tornar o Siteinteressante e acessível. Jakob Nielsen tem contribuído neste campo com o assinalar de sucessivos erroscometidos na criação de Web Sites.

Em 1996, Nielsen indicava como os 10 erros a evitar:

§ Uso de Frames.Técnica de construção de páginas com janelas independentes, que podem confundir outilizador.

§ Uso gratuito de tecnologia de topo.A utilização das últimas novidades de programação não fazem sentido se não tiverem umobjectivo definido.

§ Rolamento de texto e animações constantes.Evitar o rolamento de texto devido a uma linha ou uma imagem a mais. As animaçõesconstantes são um elemento mais de distracção do que de chamada de atenção.

§ URL’s complexas.Endereços demasiado longos de uma página (não devendo exceder os 75 caracteres) éum convite a não consultá-la.

§ Páginas órfãs.Ou seja páginas que, de repente, deixam de ter ligação com outras.

§ Páginas longas.Páginas com textos longos ou carregadas de imagens que nunca mais acabam sãodesmotivadoras da consulta – hoje em dia as pessoas aborrecem-se rapidamente.

§ Falta de suporte de navegação.Cada página deve incluir um sistema de navegação que permita aceder a outras páginas.

§ Cores de Links não convencional.Os internautas habituaram-se a determinados códigos (como o azul e o vermelho) que,se forem alterados, apenas lançarão a confusão.

§ Informação desactualizada.Se uma informação já não tiver sentido, deve ser retiradaou actualizada. Caso contrário, apenas servirá para afu-gentar uma próxima visita.

§ Tempos de download longos.As páginas deverão ser construídas de acordo com o perfil(tecnológico e etário) dos utilizadores, nunca devendo otempo de “composição” de uma página exceder os 10 se-gundos (outros autores consideram este valor exagerado epreferem apontar para os 20 segundos).



WEB DESIGN

Salientem-se ainda estas regras (1999):

§ Colocar o Logotipo e Nome da empresa em cada página§ Num site com mais de 100 páginas, incluir um motor de procura§ Títulos e sub-títulos simples§ Estruturar a página para facilitar a sua consulta§ Utilizar Hipertexto para melhorar a estrutura§ Usar fotos de produtos moderadamente§ Reduzir as imagens até uma dimensão inteligível§ Títulos com Links§ Páginas importantes com acessibilidade a deficientes§ “Fazer igual a Todos” – ou seja, não inovar por inovar.

Outros conselhos podem ser consultados no Site de Nielsen em www.useit.com ou do recém-criadoGrupo Português de Profissionais da Usabilidade em www.usabilidade.org.

Definir o Layout da Página Web

Agora que se definiram regras de Usabilidade, é chegado o momento de criar uma Estrutura organizadorados elementos/conteúdos a inserir nas páginas Web.

Antes de passar ao desenho da página, pense para que Resolução de Écran vai criar a sua Web – hoje emdia, há a tendência de projectar para resoluções elevadas (como1200x1600) mas não se esqueça do perfildo público alvo – em meios de parcos recursoseconómicos ou onde pouco se despende naaquisição do último grito da informática, deve-seapostar numa resolução de 800x600 pixels, senãomesmo 640x480 (que já não são habituais, mas...).

Os exemplos que aqui serão dados baseiam-senessa resolução ainda muito comum: 800x600.

Como se verá nos dois exemplos a seguirapresentados, qualquer paginação (seja de umarevista, livro ou mesmo página web) a colocaçãode textos, imagens, barras, etc. deve assentar numaestrutura definida por linhas horizontais e verticais– uma matriz ou retícula – igual para todas aspáginas (pelo menos do mesmo nível hierárquico),conforme se ilustra com estes esboços/estudos.

Se observar uma página de Internet verificará queo texto e as imagens estão normalmente alinhadosem colunas e em linhas – esta estrutura é fácil deperceber: os programas dedicados à criação depáginas (como o Microsoft Front Page ou oMacromedia Dreamweaver) exigem a criação detabelas para colocação dos elementos de texto ede imagem nas suas células e poder alinhá-los unsao lado dos outros.



WEB DESIGN

Observem-se as páginas de um site (muito interessante, não só pelo conteúdo mas também pelo grafismo)sobre o Vale dos Reis no Egipto – http://www.thebanmappingproject.com:

A Estrutura (marcada com linhas vermelhas) das duas páginas é diferente porque são dediferentes hierarquias, mas apresentam em comum a zona do banner (dividida ao meiopor “Launch Atlas”). A primeira página organiza-se um pouco irregularmente em 3 colu-nas de dimensão diferente e 5 linhas, estando duas delas vazias para criar espaço entreos conteúdos (deixá-los “respirar”). As duas colunas ou bandas laterais devem-se àresolução de visualização. A segunda página é bastante simples mas funciona bastantebem – a divisão em duas colunas assimétricas evitam que o texto, que ocupa cerca de75% da largura, sature o écran e fica equilibrado pela imagem à esquerda.



WEB DESIGN

Outro exemplo, neste caso o Site comercial da Samsung – http://www.samsung.com :

A Estrutura das duas páginas também é diferente por serem de diferentes hierarquias, eapresentam em comum a zona do banner. A primeira página utiliza 3 colunas assimétricase 5 linhas, sendo algumas células suddivididas (marcadas por linhas azuis) – a colunamais estreita fica equilibrada por estar mais preenchida. A segunda página, porque preci-sa de apresentar os diversos produtos, divide-se em colunas iguais, e a sua coluna es-querda (destinada à navegação) é igual (graficamente) à da primeira. Neste caso, a colu-na mais à direita deve-se à resolução de visualização – o programador preferiu alinhar apágina à esquerda.



WEB DESIGN

Exercício

Vamos conceber uma Estrutura, esboçando o Layout de uma página pelo processo tradicional de lápis epapel, tendo já em consideração o alinhamento dos elementos que vão constituir a página modelo:

• Divida a superfície da folha em linhas horizontais e verti-cais, a toda a altura e toda a largura (passando mesmo porcima de outros elementos), considerando os limites dosdiferentes componentes da página;

• Em seguida elimine com uma borracha as partes linearesque se sobrepõem aos elementos, ou faça sobressair aslinhas que vão ficar a definir a estrutura da página.

Este processo tradicional pode ser transposto na mesma metodologiapara o programa de concepção de páginas para a Web – assim:

• Abra o Front Page ;

• Numa página nova, insira uma tabela com tantas linhas etantas colunas quantas as desenhadas inicialmente no es-boço;

Nota: se pretender que a sua página fique alinhada ao centro quando a resolução do écran ésuperior à prevista, acrescente 2 ao número de colunas (como acontece no site do Vale dos Reis). Podeigualmente inserir colunas (que serão estreitas) para distanciar o texto ou as imagens dos limites da suaárea de inserção (como se fossem margens de uma página).

• Formate as colunas, definindo a largura prevista para cadauma no esboço – utilize os valores em pixels, consideran-do que a página terá, por exemplo, a largura total de 775pixels;

• Agora, para eliminar as linhas intermédias, seleccione ascélulas que pretende fundir, clique com o botão direito dorato (sobre uma das células seleccionadas) e escolha aopção Unir Células (Merge Cells) – as células seleccionadasconvertem-se numa só. Por exemplo: seleccione a primei-ra linha e aplique a união das células, repita para a segundalinha sem a célula da esquerda e termine com a união dascélulas da coluna esquerda.

Guarde a página com o nome modelo_wd.htm na pasta criada para esta acção.

123456712345671234567123456712345671234567123456712345671234567123456712345671234567

123456789012345678901234567890121123456789012345678901234567890121123456789012345678901234567890121123456789012345678901234567890121123456789012345678901234567890121

1234567890123456789012345678123456789012345678901234567812345678901234567890123456781234567890123456789012345678

Documents

Web Design 2 - layout - Home Page de José Manuel Russoarterusso.net/assets/textos/web_design_layout.pdf · Antes de passar ao desenho da página, pense para que Resolução de Écran