Saltar para: Post [1], Pesquisa e Arquivos [2]

Blogue RBE

Qui | 05.05.22

Morfologia de um sítio web

2022-05-05.png

A maioria das pessoas pensa que o design é algo decorativo. Para mim, design não é apenas o que parece e se sente. É como funciona. Para mim, nada é mais importante no futuro do que o design. O design é a alma de tudo o que foi criado pelo homem.
Steve Jobs.

 

Quando começamos a projetar (ou a rever) o principal canal de comunicação na web, é necessário considerar o que temos para transmitir – quais os conteúdos e serviços que pretendemos disponibilizar - e de que forma vamos estruturá-lo para que a informação seja recuperada de forma eficaz.

Aspiramos também a que, além de útil, ela seja esteticamente agradável: simples, familiar, intuitivo, limpo e acessível.

A aparência geral da página é, obviamente, uma componente crucial do web design. Sabemos que as primeiras impressões do utilizador são críticas e que leva apenas milésimos de segundos para formar uma opinião e ficar ou sair.

Por esta razão, não se deve sobrecarregar a página com muitos elementos e cores diferentes, mas sim simplificá-la e incluir elementos que chamem a atenção do utilizador, seguindo a regra fundamental do design: menos é mais.

 

Layout geral da página

Os principais elementos que compõem uma página web são cabeçalho, conteúdo e rodapé. Esta é a estrutura básica, mas frequentemente é complementada com colunas laterais ou barra lateral, onde são colocados outras componentes secundárias como banners (faixas), widgets ou outros elementos, podendo a organização desses elementos variar de acordo com os objetivos definidos.

Cabeçalho

É fácil esquecermo-nos do cabeçalho de um sítio, quando, na verdade, ele tem uma importância estratégica, uma vez que é uma das primeiras coisas que os visitantes veem ao aceder.

Um cabeçalho é uma imagem visual ou um elemento tipográfico que percorre a parte superior da página inicial (e, idealmente, todas as outras páginas) tornando o sítio instantaneamente reconhecível. É a oportunidade de causar uma boa primeira impressão e convidar a ficar e explorar.

Seja qual for a forma como se chega a um sítio, ele começa na parte superior da página, varrida da esquerda para a direita (no caso de pesquisas feitas em idiomas que usam esse padrão de leitura e escrita). Isso significa que o que está colocado no cabeçalho não vai passar despercebido, principalmente os elementos colocados nos cantos esquerdo e direito.

Espera-se que o cabeçalho forneça a navegação principal de todo o sítio para que os utilizadores possam compreender em fração de segundos a sua organização e saltar para os conteúdos específicos que procuram.

O cabeçalho pode incluir vários elementos importantes: elementos básicos da identidade, geralmente um logótipo, hiperligações para as categorias principais de conteúdo do sítio, informações básicas de contactos, campo de pesquisa, entre outros. Isso não significa que todos os elementos mencionados devam ser incluídos num cabeçalho de página web, pois a secção ficaria sobrecarregada de informações e perder-se-ia a identificação do essencial.

Em resumo: o cabeçalho deve ser simples e fácil de ler, havendo também a possibilidade de transferir algumas informações para o rodapé, para o tornar menos confuso.

Conteúdo

Fornecer os conteúdos de forma legível é um dos principais pontos a ter em conta na criação de um website com uma boa experiência de utilização. Isto implica que os textos tenham uma dimensão confortável, espaçamentos entre linhas que permitam ler o conteúdo sem cansar a vista e um contraste suficiente entre a cor do texto e a cor de fundo para que não seja preciso forçar a vista.

A forma como os conteúdos são arrumados, com o aproveitamento dos espaços em branco, também ajuda a tornar a interface mais simples e a melhorar a legibilidade e a procura de informação na página. Uma página com conteúdos demasiado amontoados leva a que seja mais difícil encontrar a informação pretendida. Pelo contrário, o espaço em branco pode ajudar a separar visualmente as diferentes áreas da página e até mesmo os vários conteúdos da mesma área.

Deve ser estabelecido um nível de importância da informação disponível em cada página. O layout das páginas deve ajudar os utilizadores a encontrar a informação mais importante de forma rápida e direta. A informação mais importante deve aparecer mais acima na página de forma a ser localizada rapidamente e deve ser apresentada de acordo com a ordem em que seja mais útil para os utilizadores.

Atualmente, uma estrutura de página bastante utilizada é a que resulta da arrumação de caixas quadradas ou retangulares. É o caso dos cartões, também chamados blocos, que são elementos de layout que ajudam a organizar e visualizar dados ou conteúdos homogéneos. Geralmente são organizados numa espécie de grade, mas cada cartão parece uma peça separada nesse sistema. Podem combinar diferentes tipos de conteúdo sobre um determinado item. Por exemplo, pode incluir uma imagem, um título, um pequeno resumo, etc.

É ainda importante ter em conta que, atualmente, uma questão fundamental no design de qualquer sítio é que seja responsivo, isto é que se adapte a qualquer dispositivo a partir do qual se faça o acesso. Isso significa que ao definir o layout, designadamente no que respeita ao número de colunas, é importante garantir que as opções tomadas permitem uma experiência de navegação semelhante em qualquer dispositivo. (Sugere-se a utilização desta ferramenta http://www.responsinator.com/ para testar a responsividade de um sítio).

Rodapé

O rodapé é a parte inferior da página da Web que geralmente marca seu final. Sendo outra zona comum de navegação global do site, o rodapé fornece o campo adicional para ligações úteis e dados que os utilizadores podem estar interessados em encontrar.

O rodapé pode incluir: sinais de identidade, geralmente o nome e o logótipo; ligações para secções de apoio ao utilizador, por exemplo, página de perguntas frequentes, página sobre, política de privacidade, termos e condições, etc.; créditos aos criadores do site; formulários de contacto e informações; links para presença em redes sociais…

O rodapé, se existir, deve entrar em combinação harmónica com todas as outras soluções de design do layout do sítio e do conceito estilístico geral.

Favicon

Favicon, também conhecido como ícone de URL ou ícone de marcador, é um tipo especial de símbolo que representa o sítio na linha de URL do navegador e na guia de marcadores. Permite que os utilizadores obtenham uma conexão visual rápida com ele enquanto navegam e é marca de qualidade a considerar, pois apenas se faz uma vez e resulta num elemento distintivo interessante.

 

Elementos gráficos

Esquema de cores

A importância da cor dentro de uma página web é fundamental não só para que o resultado seja esteticamente confortável, mas também para mostrar uma imagem homogénea com a linha editorial definida. Uma escolha correta de cores assegura qualidade e confiança, enquanto outras têm o efeito contrário.

O círculo cromático é uma representação ordenada e circular das cores, de acordo com sua tonalidade ou tom. Esta roda de cores representa as cores primárias e suas derivadas que pode ajudar a definir a paleta de cores a utilizar

- Cores primárias: amarelo, vermelho e azul. Eles não podem ser criados pela mistura de outras cores.

- Cores secundárias: Verde, laranja e roxo. São obtidas a partir da mistura de cores primárias.

- Cores terciárias: cores obtidas a partir da combinação de cores primárias e secundárias.

A partir daqui, obtemos uma classificação diferencial entre cores quentes (vermelhos, amarelos e laranjas) e cores frias (verdes, azuis e violetas). As primeiras transmitem paixão, alegria, poder, energia, entusiasmo, enquanto as últimas estão envolvidas na comunicação de preocupação, calma, tristeza, profissionalismo.

Depois de escolher a cor dominante, é importante considerar as outras cores a introduzir. Para estudar as cores mais adequadas pode usar-se a paleta de cores, uma ferramenta que representará rápida e visualmente as cores principais a utilizar no trabalho. Desta forma, antes de iniciarmos um projeto, é possível decidir a paleta com se vai trabalhar. Para isso, sugere-se a exploração dos seguintes instrumentos de apoio: Adobe colour e Coolors.

É muito importante anotar a gama cromática que vai ser utilizada para facilitar a edição posterior de materiais gráficos, o que permitirá oferecer uma imagem homogénea.

 

Tipografia

O design moderno de um sítio deve apresentar tipografia segura, limpa e arrojada, sugerindo-se que inclua:

- Texto de tamanho apropriado (geralmente maior que 16px);

- Tipografia preto/cinza, de acordo com os tons de fundo;

- Fontes padrão da Web;

- Fontes sem serifa;

- Espaço adequado entre as linhas para facilitar a leitura;

Fontes que imitem o manuscrito ou decorativas são de evitar.

Deve procurar manter-se os tamanhos e estilos de fonte: sugere-se a adoção de uma fonte que permaneça consistente em todas as páginas e noutros recursos online que possa fornecer.

 

Imagens e outros elementos gráficos

O uso de imagens e outros elementos, como ícones e gráficos, deve ser equilibrado com a componente de texto. Não é uma boa prática sobrecarregar o espaço com muitas imagens ou outros elementos gráficos. O movimento, a existir, deve ser cuidadosamente ponderado.

Todos os elementos devem ter uma boa resolução e legibilidade, sem o que o sítio onde estão incluídos adquire um ar pouco cuidado.

 

Referências

1. Bose, S. Core Elements of Modern Web Design. https://www.browserstack.com/guide/elements-of-modern-web-design

2. Ellice. Top 6 Basic Elements of Web Design. https://www.dreamhost.com/blog/elements-of-webdesign/

3. Rajadel, M. J. C. Diseño de páginas web: guía de elementos básicos. https://seoh1.com/diseno-web/diseno-de-paginas-web/

4. Yalanska, M. The Anatomy of a Web Page: 14 Basic Eléments. https://blog.tubikstudio.com/anatomy-of-web-page/

5. Imagem de rawpixel.com

_____________________________________________________________________________________________________________________