{"id":2590010,"date":"2022-05-05T09:00:00","date_gmt":"2022-05-05T09:00:00","guid":{"rendered":"https:\/\/blogue.rbe.mec.pt\/2590010.html"},"modified":"2026-05-13T14:46:19","modified_gmt":"2026-05-13T14:46:19","slug":"morfologia-de-um-sitio-web","status":"publish","type":"post","link":"https:\/\/projetos.dge.mec.pt\/rbe\/?p=2590010","title":{"rendered":"Morfologia de um s\u00edtio web"},"content":{"rendered":"

\"2022-05-05.png\"<\/span><\/p>\n

<\/p>\n

<\/p>\n

A maioria das pessoas pensa que o design \u00e9 algo decorativo. Para mim, design n\u00e3o \u00e9 apenas o que parece e se sente. \u00c9 como funciona. Para mim, nada \u00e9 mais importante no futuro do que o design<\/em>. O design<\/em> \u00e9 a alma de tudo o que foi criado pelo homem.
Steve Jobs.<\/p>\n

<\/p>\n

\u00a0<\/p>\n

<\/p><\/blockquote>\n

<\/p>\n

Quando come\u00e7amos a projetar (ou a rever) o principal canal de comunica\u00e7\u00e3o na web, \u00e9 necess\u00e1rio considerar o que temos para transmitir \u2013 quais os conte\u00fados e servi\u00e7os que pretendemos disponibilizar – e de que forma vamos estrutur\u00e1-lo para que a informa\u00e7\u00e3o seja recuperada de forma eficaz.<\/p>\n

<\/p>\n

Aspiramos tamb\u00e9m a que, al\u00e9m de \u00fatil, ela seja esteticamente agrad\u00e1vel: simples, familiar, intuitivo, limpo e acess\u00edvel.<\/p>\n

<\/p>\n

A apar\u00eancia geral da p\u00e1gina \u00e9, obviamente, uma componente crucial do web design<\/em>. Sabemos que as primeiras impress\u00f5es do utilizador s\u00e3o cr\u00edticas e que leva apenas mil\u00e9simos de segundos para formar uma opini\u00e3o e ficar ou sair.<\/p>\n

<\/p>\n

Por esta raz\u00e3o, n\u00e3o se deve sobrecarregar a p\u00e1gina com muitos elementos e cores diferentes, mas sim simplific\u00e1-la e incluir elementos que chamem a aten\u00e7\u00e3o do utilizador, seguindo a regra fundamental do design: menos \u00e9 mais<\/em>.<\/p>\n

<\/p>\n

\u00a0<\/p>\n

<\/p>\n

Layout<\/em> geral da p\u00e1gina <\/strong><\/span><\/p>\n

<\/p>\n

Os principais elementos que comp\u00f5em uma p\u00e1gina web s\u00e3o cabe\u00e7alho, conte\u00fado e rodap\u00e9. Esta \u00e9 a estrutura b\u00e1sica, mas frequentemente \u00e9 complementada com colunas laterais ou barra lateral, onde s\u00e3o colocados outras componentes secund\u00e1rias como banners <\/em>(faixas), widgets<\/em> ou outros elementos, podendo a organiza\u00e7\u00e3o desses elementos variar de acordo com os objetivos definidos.<\/p>\n

<\/p>\n

Cabe\u00e7alho<\/strong><\/p>\n

<\/p>\n

\u00c9 f\u00e1cil esquecermo-nos do cabe\u00e7alho de um s\u00edtio, quando, na verdade, ele tem uma import\u00e2ncia estrat\u00e9gica, uma vez que \u00e9 uma das primeiras coisas que os visitantes veem ao aceder.<\/p>\n

<\/p>\n

Um cabe\u00e7alho \u00e9 uma imagem visual ou um elemento tipogr\u00e1fico que percorre a parte superior da p\u00e1gina inicial (e, idealmente, todas as outras p\u00e1ginas) tornando o s\u00edtio instantaneamente reconhec\u00edvel. \u00c9 a oportunidade de causar uma boa primeira impress\u00e3o e convidar a ficar e explorar.<\/p>\n

<\/p>\n

Seja qual for a forma como se chega a um s\u00edtio, ele come\u00e7a na parte superior da p\u00e1gina, varrida da esquerda para a direita (no caso de pesquisas feitas em idiomas que usam esse padr\u00e3o de leitura e escrita). Isso significa que o que est\u00e1 colocado no cabe\u00e7alho n\u00e3o vai passar despercebido, principalmente os elementos colocados nos cantos esquerdo e direito.<\/p>\n

<\/p>\n

Espera-se que o cabe\u00e7alho forne\u00e7a a navega\u00e7\u00e3o principal de todo o s\u00edtio para que os utilizadores possam compreender em fra\u00e7\u00e3o de segundos a sua organiza\u00e7\u00e3o e saltar para os conte\u00fados espec\u00edficos que procuram.<\/p>\n

<\/p>\n

O cabe\u00e7alho pode incluir v\u00e1rios elementos importantes: elementos b\u00e1sicos da identidade, geralmente um log\u00f3tipo, hiperliga\u00e7\u00f5es para as categorias principais de conte\u00fado do s\u00edtio, informa\u00e7\u00f5es b\u00e1sicas de contactos, campo de pesquisa, entre outros. Isso n\u00e3o significa que todos os elementos mencionados devam ser inclu\u00eddos num cabe\u00e7alho de p\u00e1gina web, pois a sec\u00e7\u00e3o ficaria sobrecarregada de informa\u00e7\u00f5es e perder-se-ia a identifica\u00e7\u00e3o do essencial.<\/p>\n

<\/p>\n

Em resumo: o cabe\u00e7alho deve ser simples e f\u00e1cil de ler, havendo tamb\u00e9m a possibilidade de transferir algumas informa\u00e7\u00f5es para o rodap\u00e9, para o tornar menos confuso.<\/p>\n

<\/p>\n

Conte\u00fado<\/strong><\/p>\n

<\/p>\n

Fornecer os conte\u00fados de forma leg\u00edvel \u00e9 um dos principais pontos a ter em conta na cria\u00e7\u00e3o de um website com uma boa experi\u00eancia de utiliza\u00e7\u00e3o. Isto implica que os textos tenham uma dimens\u00e3o confort\u00e1vel, espa\u00e7amentos entre linhas que permitam ler o conte\u00fado sem cansar a vista e um contraste suficiente entre a cor do texto e a cor de fundo para que n\u00e3o seja preciso for\u00e7ar a vista.<\/p>\n

<\/p>\n

A forma como os conte\u00fados s\u00e3o arrumados, com o aproveitamento dos espa\u00e7os em branco, tamb\u00e9m ajuda a tornar a interface mais simples e a melhorar a legibilidade e a procura de informa\u00e7\u00e3o na p\u00e1gina. Uma p\u00e1gina com conte\u00fados demasiado amontoados leva a que seja mais dif\u00edcil encontrar a informa\u00e7\u00e3o pretendida. Pelo contr\u00e1rio, o espa\u00e7o em branco pode ajudar a separar visualmente as diferentes \u00e1reas da p\u00e1gina e at\u00e9 mesmo os v\u00e1rios conte\u00fados da mesma \u00e1rea.<\/p>\n

<\/p>\n

Deve ser estabelecido um n\u00edvel de import\u00e2ncia da informa\u00e7\u00e3o dispon\u00edvel em cada p\u00e1gina. O layout das p\u00e1ginas deve ajudar os utilizadores a encontrar a informa\u00e7\u00e3o mais importante de forma r\u00e1pida e direta. A informa\u00e7\u00e3o mais importante deve aparecer mais acima na p\u00e1gina de forma a ser localizada rapidamente e deve ser apresentada de acordo com a ordem em que seja mais \u00fatil para os utilizadores.<\/p>\n

<\/p>\n

Atualmente, uma estrutura de p\u00e1gina bastante utilizada \u00e9 a que resulta da arruma\u00e7\u00e3o de caixas quadradas ou retangulares. \u00c9 o caso dos cart\u00f5es, tamb\u00e9m chamados blocos, que s\u00e3o elementos de layout<\/em> que ajudam a organizar e visualizar dados ou conte\u00fados homog\u00e9neos. Geralmente s\u00e3o organizados numa esp\u00e9cie de grade, mas cada cart\u00e3o parece uma pe\u00e7a separada nesse sistema. Podem combinar diferentes tipos de conte\u00fado sobre um determinado item. Por exemplo, pode incluir uma imagem, um t\u00edtulo, um pequeno resumo, etc.<\/p>\n

<\/p>\n

\u00c9 ainda importante ter em conta que, atualmente, uma quest\u00e3o fundamental no design<\/em> de qualquer s\u00edtio \u00e9 que seja responsivo, isto \u00e9 que se adapte a qualquer dispositivo a partir do qual se fa\u00e7a o acesso. Isso significa que ao definir o layout<\/em>, designadamente no que respeita ao n\u00famero de colunas, \u00e9 importante garantir que as op\u00e7\u00f5es tomadas permitem uma experi\u00eancia de navega\u00e7\u00e3o semelhante em qualquer dispositivo. (Sugere-se a utiliza\u00e7\u00e3o desta ferramenta http:\/\/www.responsinator.com\/<\/a> para testar a responsividade de um s\u00edtio).<\/p>\n

<\/p>\n

Rodap\u00e9<\/strong><\/p>\n

<\/p>\n

O rodap\u00e9 \u00e9 a parte inferior da p\u00e1gina da Web que geralmente marca seu final.\u00a0Sendo outra zona comum de navega\u00e7\u00e3o global do site, o rodap\u00e9 fornece o campo adicional para liga\u00e7\u00f5es \u00fateis e dados que os utilizadores podem estar interessados em encontrar.<\/p>\n

<\/p>\n

O rodap\u00e9 pode incluir: sinais de identidade, geralmente o nome e o log\u00f3tipo; liga\u00e7\u00f5es para sec\u00e7\u00f5es de apoio ao utilizador, por exemplo, p\u00e1gina de perguntas frequentes, p\u00e1gina sobre, pol\u00edtica de privacidade, termos e condi\u00e7\u00f5es, etc.; cr\u00e9ditos aos criadores do site; formul\u00e1rios de contacto e informa\u00e7\u00f5es; links para presen\u00e7a em redes sociais\u2026<\/p>\n

<\/p>\n

O rodap\u00e9, se existir, deve entrar em combina\u00e7\u00e3o harm\u00f3nica com todas as outras solu\u00e7\u00f5es de design do layout<\/em> do s\u00edtio e do conceito estil\u00edstico geral.<\/p>\n

<\/p>\n

Favicon<\/strong><\/p>\n

<\/p>\n

Favicon, tamb\u00e9m conhecido como \u00edcone de URL ou \u00edcone de marcador, \u00e9 um tipo especial de s\u00edmbolo que representa o s\u00edtio na linha de URL do navegador e na guia de marcadores. Permite que os utilizadores obtenham uma conex\u00e3o visual r\u00e1pida com ele enquanto navegam e \u00e9 marca de qualidade a considerar, pois apenas se faz uma vez e resulta num elemento distintivo interessante.<\/p>\n

<\/p>\n

\u00a0<\/p>\n

<\/p>\n

Elementos gr\u00e1ficos<\/strong><\/span><\/p>\n

<\/p>\n

Esquema de cores<\/strong><\/p>\n

<\/p>\n

A import\u00e2ncia da cor dentro de uma p\u00e1gina web \u00e9 fundamental n\u00e3o s\u00f3 para que o resultado seja esteticamente confort\u00e1vel, mas tamb\u00e9m para mostrar uma imagem homog\u00e9nea com a linha editorial definida. Uma escolha correta de cores assegura qualidade e confian\u00e7a, enquanto outras t\u00eam o efeito contr\u00e1rio.<\/p>\n

<\/p>\n

O c\u00edrculo crom\u00e1tico \u00e9 uma representa\u00e7\u00e3o ordenada e circular das cores, de acordo com sua tonalidade ou tom. Esta roda de cores representa as cores prim\u00e1rias e suas derivadas que pode ajudar a definir a paleta de cores a utilizar<\/p>\n

<\/p>\n

– Cores prim\u00e1rias: amarelo, vermelho e azul. Eles n\u00e3o podem ser criados pela mistura de outras cores.<\/p>\n

<\/p>\n

– Cores secund\u00e1rias: Verde, laranja e roxo. S\u00e3o obtidas a partir da mistura de cores prim\u00e1rias.<\/p>\n

<\/p>\n

– Cores terci\u00e1rias: cores obtidas a partir da combina\u00e7\u00e3o de cores prim\u00e1rias e secund\u00e1rias.<\/p>\n

<\/p>\n

A partir daqui, obtemos uma classifica\u00e7\u00e3o diferencial entre cores quentes (vermelhos, amarelos e laranjas) e cores frias (verdes, azuis e violetas). As primeiras transmitem paix\u00e3o, alegria, poder, energia, entusiasmo, enquanto as \u00faltimas est\u00e3o envolvidas na comunica\u00e7\u00e3o de preocupa\u00e7\u00e3o, calma, tristeza, profissionalismo.<\/p>\n

<\/p>\n

Depois de escolher a cor dominante, \u00e9 importante considerar as outras cores a introduzir. Para estudar as cores mais adequadas pode usar-se a paleta de cores, uma ferramenta que representar\u00e1 r\u00e1pida e visualmente as cores principais a utilizar no trabalho. Desta forma, antes de iniciarmos um projeto, \u00e9 poss\u00edvel decidir a paleta com se vai trabalhar. Para isso, sugere-se a explora\u00e7\u00e3o dos seguintes instrumentos de apoio: Adobe colour<\/a> e Coolors<\/a>.<\/p>\n

<\/p>\n

\u00c9 muito importante anotar a gama crom\u00e1tica que vai ser utilizada para facilitar a edi\u00e7\u00e3o posterior de materiais gr\u00e1ficos, o que permitir\u00e1 oferecer uma imagem homog\u00e9nea.<\/p>\n

<\/p>\n

\u00a0<\/p>\n

<\/p>\n

Tipografia<\/strong><\/p>\n

<\/p>\n

O design<\/em> moderno de um s\u00edtio deve apresentar tipografia segura, limpa e arrojada, sugerindo-se que inclua:<\/p>\n

<\/p>\n

– Texto de tamanho apropriado (geralmente maior que 16px);<\/p>\n

<\/p>\n

– Tipografia preto\/cinza, de acordo com os tons de fundo;<\/p>\n

<\/p>\n

– Fontes padr\u00e3o da Web;<\/p>\n

<\/p>\n

– Fontes sem serifa;<\/p>\n

<\/p>\n

– Espa\u00e7o adequado entre as linhas para facilitar a leitura;<\/p>\n

<\/p>\n

Fontes que imitem o manuscrito ou decorativas s\u00e3o de evitar.<\/p>\n

<\/p>\n

Deve procurar manter-se os tamanhos e estilos de fonte: sugere-se a ado\u00e7\u00e3o de uma fonte que permane\u00e7a consistente em todas as p\u00e1ginas e noutros recursos online<\/em> que possa fornecer.<\/p>\n

<\/p>\n

\u00a0<\/p>\n

<\/p>\n

Imagens e outros elementos gr\u00e1ficos<\/strong><\/p>\n

<\/p>\n

O uso de imagens e outros elementos, como \u00edcones e gr\u00e1ficos, deve ser equilibrado com a componente de texto. N\u00e3o \u00e9 uma boa pr\u00e1tica sobrecarregar o espa\u00e7o com muitas imagens ou outros elementos gr\u00e1ficos. O movimento, a existir, deve ser cuidadosamente ponderado.<\/p>\n

<\/p>\n

Todos os elementos devem ter uma boa resolu\u00e7\u00e3o e legibilidade, sem o que o s\u00edtio onde est\u00e3o inclu\u00eddos adquire um ar pouco cuidado.<\/p>\n

<\/p>\n

\u00a0<\/p>\n

<\/p>\n

Refer\u00eancias<\/strong><\/p>\n

<\/p>\n

1. Bose, S. Core Elements of Modern Web Design<\/em>. https:\/\/www.browserstack.com\/guide\/elements-of-modern-web-design<\/a><\/span><\/p>\n

<\/p>\n

2. Ellice. Top 6 Basic Elements of Web Design<\/em>. https:\/\/www.dreamhost.com\/blog\/elements-of-webdesign\/<\/a><\/span><\/p>\n

<\/p>\n

3. Rajadel, M. J. C. Dise\u00f1o de p\u00e1ginas web: gu\u00eda de elementos b\u00e1sicos<\/em>. https:\/\/seoh1.com\/diseno-web\/diseno-de-paginas-web\/<\/a><\/span><\/p>\n

<\/p>\n

4. Yalanska, M. The Anatomy of a Web Page: 14 Basic El\u00e9ments<\/em>. https:\/\/blog.tubikstudio.com\/anatomy-of-web-page\/<\/a><\/span><\/p>\n

<\/p>\n

5. Imagem de\u00a0rawpixel.com<\/strong><\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

A maioria das pessoas pensa que o design \u00e9 algo decorativo. Para mim, design n\u00e3o \u00e9 apenas o que parece e se sente. \u00c9 como funciona. Para mim, nada \u00e9 mais importante no futuro do que o design. O design \u00e9 a alma de tudo o que foi criado pelo homem.Steve Jobs. \u00a0 Quando come\u00e7amos a projetar (ou a rever) o principal canal de comunica\u00e7\u00e3o na web, \u00e9 necess\u00e1rio considerar o que temos para transmitir \u2013 quais os conte\u00fados e servi\u00e7os que pretendemos disponibilizar – e de que forma vamos estrutur\u00e1-lo para que a informa\u00e7\u00e3o seja recuperada de forma eficaz. Aspiramos tamb\u00e9m a que, al\u00e9m de \u00fatil, ela seja esteticamente agrad\u00e1vel: simples, familiar, intuitivo, limpo e acess\u00edvel. A apar\u00eancia geral da p\u00e1gina \u00e9, obviamente, uma componente crucial do web design. Sabemos que as primeiras impress\u00f5es do utilizador s\u00e3o cr\u00edticas e que leva apenas mil\u00e9simos de segundos para formar uma opini\u00e3o e ficar ou sair. Por esta raz\u00e3o, n\u00e3o se deve sobrecarregar a p\u00e1gina com muitos elementos e cores diferentes, mas sim simplific\u00e1-la e incluir elementos que chamem a aten\u00e7\u00e3o do utilizador, seguindo a regra fundamental do design: menos \u00e9 mais. \u00a0 Layout geral da p\u00e1gina Os principais elementos que comp\u00f5em uma p\u00e1gina web s\u00e3o cabe\u00e7alho, conte\u00fado e rodap\u00e9. Esta \u00e9 a estrutura b\u00e1sica, mas frequentemente \u00e9 complementada com colunas laterais ou barra lateral, onde s\u00e3o colocados outras componentes secund\u00e1rias como banners (faixas), widgets ou outros elementos, podendo a organiza\u00e7\u00e3o desses elementos variar de acordo com os objetivos definidos. Cabe\u00e7alho \u00c9 f\u00e1cil esquecermo-nos do cabe\u00e7alho de um s\u00edtio, quando, na verdade, ele tem uma import\u00e2ncia estrat\u00e9gica, uma vez que \u00e9 uma das primeiras coisas que os visitantes veem ao aceder. Um cabe\u00e7alho \u00e9 uma imagem visual ou um elemento tipogr\u00e1fico que percorre a parte superior da p\u00e1gina inicial (e, idealmente, todas as outras p\u00e1ginas) tornando o s\u00edtio instantaneamente reconhec\u00edvel. \u00c9 a oportunidade de causar uma boa primeira impress\u00e3o e convidar a ficar e explorar. Seja qual for a forma como se chega a um s\u00edtio, ele come\u00e7a na parte superior da p\u00e1gina, varrida da esquerda para a direita (no caso de pesquisas feitas em idiomas que usam esse padr\u00e3o de leitura e escrita). Isso significa que o que est\u00e1 colocado no cabe\u00e7alho n\u00e3o vai passar despercebido, principalmente os elementos colocados nos cantos esquerdo e direito. Espera-se que o cabe\u00e7alho forne\u00e7a a navega\u00e7\u00e3o principal de todo o s\u00edtio para que os utilizadores possam compreender em fra\u00e7\u00e3o de segundos a sua organiza\u00e7\u00e3o e saltar para os conte\u00fados espec\u00edficos que procuram. O cabe\u00e7alho pode incluir v\u00e1rios elementos importantes: elementos b\u00e1sicos da identidade, geralmente um log\u00f3tipo, hiperliga\u00e7\u00f5es para as categorias principais de conte\u00fado do s\u00edtio, informa\u00e7\u00f5es b\u00e1sicas de contactos, campo de pesquisa, entre outros. Isso n\u00e3o significa que todos os elementos mencionados devam ser inclu\u00eddos num cabe\u00e7alho de p\u00e1gina web, pois a sec\u00e7\u00e3o ficaria sobrecarregada de informa\u00e7\u00f5es e perder-se-ia a identifica\u00e7\u00e3o do essencial. Em resumo: o cabe\u00e7alho deve ser simples e f\u00e1cil de ler, havendo tamb\u00e9m a possibilidade de transferir algumas informa\u00e7\u00f5es para o rodap\u00e9, para o tornar menos confuso. Conte\u00fado Fornecer os conte\u00fados de forma leg\u00edvel \u00e9 um dos principais pontos a ter em conta na cria\u00e7\u00e3o de um website com uma boa experi\u00eancia de utiliza\u00e7\u00e3o. Isto implica que os textos tenham uma dimens\u00e3o confort\u00e1vel, espa\u00e7amentos entre linhas que permitam ler o conte\u00fado sem cansar a vista e um contraste suficiente entre a cor do texto e a cor de fundo para que n\u00e3o seja preciso for\u00e7ar a vista. A forma como os conte\u00fados s\u00e3o arrumados, com o aproveitamento dos espa\u00e7os em branco, tamb\u00e9m ajuda a tornar a interface mais simples e a melhorar a legibilidade e a procura de informa\u00e7\u00e3o na p\u00e1gina. Uma p\u00e1gina com conte\u00fados demasiado amontoados leva a que seja mais dif\u00edcil encontrar a informa\u00e7\u00e3o pretendida. Pelo contr\u00e1rio, o espa\u00e7o em branco pode ajudar a separar visualmente as diferentes \u00e1reas da p\u00e1gina e at\u00e9 mesmo os v\u00e1rios conte\u00fados da mesma \u00e1rea. Deve ser estabelecido um n\u00edvel de import\u00e2ncia da informa\u00e7\u00e3o dispon\u00edvel em cada p\u00e1gina. O layout das p\u00e1ginas deve ajudar os utilizadores a encontrar a informa\u00e7\u00e3o mais importante de forma r\u00e1pida e direta. A informa\u00e7\u00e3o mais importante deve aparecer mais acima na p\u00e1gina de forma a ser localizada rapidamente e deve ser apresentada de acordo com a ordem em que seja mais \u00fatil para os utilizadores. Atualmente, uma estrutura de p\u00e1gina bastante utilizada \u00e9 a que resulta da arruma\u00e7\u00e3o de caixas quadradas ou retangulares. \u00c9 o caso dos cart\u00f5es, tamb\u00e9m chamados blocos, que s\u00e3o elementos de layout que ajudam a organizar e visualizar dados ou conte\u00fados homog\u00e9neos. Geralmente s\u00e3o organizados numa esp\u00e9cie de grade, mas cada cart\u00e3o parece uma pe\u00e7a separada nesse sistema. Podem combinar diferentes tipos de conte\u00fado sobre um determinado item. Por exemplo, pode incluir uma imagem, um t\u00edtulo, um pequeno resumo, etc. \u00c9 ainda importante ter em conta que, atualmente, uma quest\u00e3o fundamental no design de qualquer s\u00edtio \u00e9 que seja responsivo, isto \u00e9 que se adapte a qualquer dispositivo a partir do qual se fa\u00e7a o acesso. Isso significa que ao definir o layout, designadamente no que respeita ao n\u00famero de colunas, \u00e9 importante garantir que as op\u00e7\u00f5es tomadas permitem uma experi\u00eancia de navega\u00e7\u00e3o semelhante em qualquer dispositivo. (Sugere-se a utiliza\u00e7\u00e3o desta ferramenta http:\/\/www.responsinator.com\/ para testar a responsividade de um s\u00edtio). Rodap\u00e9 O rodap\u00e9 \u00e9 a parte inferior da p\u00e1gina da Web que geralmente marca seu final.\u00a0Sendo outra zona comum de navega\u00e7\u00e3o global do site, o rodap\u00e9 fornece o campo adicional para liga\u00e7\u00f5es \u00fateis e dados que os utilizadores podem estar interessados em encontrar. O rodap\u00e9 pode incluir: sinais de identidade, geralmente o nome e o log\u00f3tipo; liga\u00e7\u00f5es para sec\u00e7\u00f5es de apoio ao utilizador, por exemplo, p\u00e1gina de perguntas frequentes, p\u00e1gina sobre, pol\u00edtica de privacidade, termos e condi\u00e7\u00f5es, etc.; cr\u00e9ditos aos criadores do site; formul\u00e1rios de contacto e informa\u00e7\u00f5es; links para presen\u00e7a em redes sociais\u2026 O rodap\u00e9, se existir, deve entrar em combina\u00e7\u00e3o harm\u00f3nica com todas as outras solu\u00e7\u00f5es de design do layout do s\u00edtio e do conceito estil\u00edstico geral. Favicon Favicon, tamb\u00e9m conhecido como \u00edcone de URL ou \u00edcone de marcador, \u00e9 um tipo especial de s\u00edmbolo que representa o s\u00edtio na linha de URL do navegador e na guia de marcadores. Permite que os utilizadores obtenham uma conex\u00e3o visual r\u00e1pida com ele enquanto navegam e \u00e9 marca de qualidade a considerar, pois apenas se faz uma vez e resulta num elemento distintivo interessante. \u00a0 Elementos gr\u00e1ficos Esquema de cores A import\u00e2ncia da cor dentro de uma p\u00e1gina web \u00e9 fundamental n\u00e3o s\u00f3 para que o resultado seja esteticamente confort\u00e1vel, mas tamb\u00e9m para mostrar uma imagem homog\u00e9nea com a linha editorial definida. Uma escolha correta de cores assegura qualidade e confian\u00e7a, enquanto outras t\u00eam o efeito contr\u00e1rio. O c\u00edrculo crom\u00e1tico \u00e9 uma representa\u00e7\u00e3o ordenada e circular das cores, de acordo com sua tonalidade ou tom. Esta roda de cores representa as cores prim\u00e1rias e suas derivadas que pode ajudar a definir a paleta de cores a utilizar – Cores prim\u00e1rias: amarelo, vermelho e azul. Eles n\u00e3o podem ser criados pela mistura de outras cores. – Cores secund\u00e1rias: Verde, laranja e roxo. S\u00e3o obtidas a partir da mistura de cores prim\u00e1rias. – Cores terci\u00e1rias: cores obtidas a partir da combina\u00e7\u00e3o de cores prim\u00e1rias e secund\u00e1rias. A partir daqui, obtemos uma classifica\u00e7\u00e3o diferencial entre cores quentes (vermelhos, amarelos e laranjas) e cores frias (verdes, azuis e violetas). As primeiras transmitem paix\u00e3o, alegria, poder, energia, entusiasmo, enquanto as \u00faltimas est\u00e3o envolvidas na comunica\u00e7\u00e3o de preocupa\u00e7\u00e3o, calma, tristeza, profissionalismo. Depois de escolher a cor dominante, \u00e9 importante considerar as outras cores a introduzir. Para estudar as cores mais adequadas pode usar-se a paleta de cores, uma ferramenta que representar\u00e1 r\u00e1pida e visualmente as cores principais a utilizar no trabalho. Desta forma, antes de iniciarmos um projeto, \u00e9 poss\u00edvel decidir a paleta com se vai trabalhar. Para isso, sugere-se a explora\u00e7\u00e3o dos seguintes instrumentos de apoio: Adobe colour e Coolors. \u00c9 muito importante anotar a gama crom\u00e1tica que vai ser utilizada para facilitar a edi\u00e7\u00e3o posterior de materiais gr\u00e1ficos, o que permitir\u00e1 oferecer uma imagem homog\u00e9nea. \u00a0 Tipografia O design moderno de um s\u00edtio 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\u00e3o da Web; – Fontes sem serifa; – Espa\u00e7o adequado entre as linhas para facilitar a leitura; Fontes que imitem o manuscrito ou decorativas s\u00e3o de evitar. Deve procurar manter-se os tamanhos e estilos de fonte: sugere-se a ado\u00e7\u00e3o de uma fonte que permane\u00e7a consistente em todas as p\u00e1ginas e noutros recursos online que possa fornecer. \u00a0 Imagens e outros elementos gr\u00e1ficos O uso de imagens e outros elementos, como \u00edcones e gr\u00e1ficos, deve ser equilibrado com a componente de texto. N\u00e3o \u00e9 uma boa pr\u00e1tica sobrecarregar o espa\u00e7o com muitas imagens ou outros elementos gr\u00e1ficos. O movimento, a existir, deve ser cuidadosamente ponderado. Todos os elementos devem ter uma boa resolu\u00e7\u00e3o e legibilidade, sem o que o s\u00edtio onde est\u00e3o inclu\u00eddos adquire um ar pouco cuidado. \u00a0 Refer\u00eancias 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\u00f1o de p\u00e1ginas web: gu\u00eda de elementos b\u00e1sicos. https:\/\/seoh1.com\/diseno-web\/diseno-de-paginas-web\/ 4. Yalanska, M. The Anatomy of a Web Page: 14 Basic El\u00e9ments. https:\/\/blog.tubikstudio.com\/anatomy-of-web-page\/ 5. Imagem de\u00a0rawpixel.com<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[57,151],"tags":[],"class_list":["post-2590010","post","type-post","status-publish","format-standard","hentry","category-ambientes-digitais","category-presenca-em-linha"],"_links":{"self":[{"href":"https:\/\/projetos.dge.mec.pt\/rbe\/index.php?rest_route=\/wp\/v2\/posts\/2590010","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/projetos.dge.mec.pt\/rbe\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/projetos.dge.mec.pt\/rbe\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/projetos.dge.mec.pt\/rbe\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/projetos.dge.mec.pt\/rbe\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2590010"}],"version-history":[{"count":1,"href":"https:\/\/projetos.dge.mec.pt\/rbe\/index.php?rest_route=\/wp\/v2\/posts\/2590010\/revisions"}],"predecessor-version":[{"id":3087220,"href":"https:\/\/projetos.dge.mec.pt\/rbe\/index.php?rest_route=\/wp\/v2\/posts\/2590010\/revisions\/3087220"}],"wp:attachment":[{"href":"https:\/\/projetos.dge.mec.pt\/rbe\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2590010"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/projetos.dge.mec.pt\/rbe\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2590010"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/projetos.dge.mec.pt\/rbe\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2590010"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}