• Início
  • Sobre
  • Trabalha comigo
    • Criação de websites
    • Consultoria
  • Blog
    • WordPress
    • Website
    • Web Design
    • Organização e Produtividade
  • Contactos

Catarina Vieito

  • Início
  • Sobre
  • Trabalha comigo
    • Criação de websites
    • Consultoria
  • Blog
    • WordPress
    • Website
    • Web Design
    • Organização e Produtividade
  • Contactos
Web Design / Website

Como ter um design de site coerente

Já criaste o teu site, mas ficou muito com a cara do tema que escolheste e não conseguiste transmitir a tua identidade visual? Isso é porque provavelmente não definiste o design da tua marca desde o início e foste personalizando e descobrindo coisas giras que davam para fazer à medida que mexias nas definições. Ficaste com um site, mas com um design pouco coerente…

Não sou nada contra explorar aliás, acho que é mesmo assim que se aprende, ir mexendo e descobrindo coisas novas! Mas no que toca ao teu site, não queres que ele tenha um design feito “à sorte”.

Se queres tomar o controlo do teu site e torná-lo teu, continua a ler para saberes o que tens de fazer.

Procura por inspiração para o design do teu site

Qual é o feeling que queres transmitir com o teu website? Queres transmitir alegria, diversão e jovialidade? Diria que cores brilhantes e tipos de letra modernos seriam uma boa aposta. Cria um álbum no Pinterest e reúne as cores, tipos de letra e o estilo de site que mais tem a ver com a tua marca.

Determina também os tipos de páginas que pretendes ter no teu site. Por exemplo, queres ter uma página de contactos ou uma loja online? Vai guardando exemplos de design de sites com a estrutura que pretendes para o teu site.

Se tiveres isto definido, quando andares à procura de um tema para o teu site em WordPress, já sabes que vais ter de ver se tem páginas com formulário de contacto ou então página de produtos, no caso da loja online.

Usar o Pinterest para procurar "fun websites", por exemplo.
Procurar inspiração no Pinterest.

Cria um Guia da Marca para o design do teu website

Cria um Guia da Marca, ou Brand Guide, que é basicamente um documento onde tens especificado o design do teu site ou seja, os tipos de letra dos títulos, subtítulos e corpo de texto, cores e elementos do design.

Vais ver que te vais sentir muito mais organizado(a)! Eu bem sei que quando comecei a fazer o design do meu me sentia perdida num mar de opções. Ter essa linha guia foi essencial para não perder o foco!

Atenta que não precisas de usar os mesmos tipos de letra e cores do teu tema. Aliás, se o tema for gratuito então o melhor mesmo é mudares isso tudo, porque a probabilidade de haver mais sites parecidos é muito maior!

Exemplo de brand guide ou brand board.
Exemplo de brand guide da Mint Swift.

Usa até 3 tipos de letra

Se não és um(a) pro a design, o melhor mesmo é limitares-te até 3 tipos de letra. Sugiro um tipo de letra fácil de ler para o corpo de texto, um mais chamativo para os títulos e um terceiro, se quiseres, para dar um realce em algumas situações.

No meu site eu uso apenas dois. “Josefin Sans” para os títulos e subtítulos, e vou variando os pesos. Para o corpo de texto uso “Lato”.

Se quiseres até podes usar só um e criar variação no estilo, transformar e decoração. Sites de grandes empresas tecnológicas, como a Apple ou a Microsoft, só usam um tipo de letra em todo o website e variam os outros aspetos que falei atrás.

Adiciona hovers nos links e botões

O estado hover é o comportamento de elementos como por exemplo, links ou botões, quando passas o cursor por cima. Eu vejo tantos websites em que se esquecem de fazer isto e acho que é essencial para a experiência do utilizador.

O utilizador, quando passa o cursor por cima de um destes elementos, espera naturalmente que haja uma reação, que mude de cor, que apareça um sublinhado, que aconteça algo diferente. Algo que diga que clicar ali vai gerar uma ação.

A tua página inicial é que dita o design geral do teu site

A página inicial é o cartão de visita do teu site e é a primeira página que os visitantes veem quando entram no teu site. Portanto, ela deve ter todas as fontes, cores e elementos de design que vais usar ao longo do teu website. Isto porque não queres que o visitante do teu site entre numa página e seja distraído por um design que apareceu de surpresa.

Fontes, cores e elementos de design inesperados vão interromper a experiência do utilizador, fazendo com que ele perca o foco do conteúdo para prestar atenção ao design. Se o teu website tiver sempre a mesma linguagem a nível de design, o visitante só terá de se focar no conteúdo.

O objetivo do teu site é manter o visitante o maior tempo possível, porque assim o Google vê que o teu site tem conteúdo importante e vai promovê-lo na primeira página de resultados.

Dica extra: Certifica-te de que a tua página inicial está adaptada a todos os dispositivos. Depois disto, é só replicares o design nas outras páginas.

Muda as opções do tema e do pagebuilder

Certifica-te de que editas as opções gerais do tema em Apresentação > Personalizar, mas também no pagebuilder, se estiveres a usar algum. No Elementor, tens de clicar no ícone do menu (3 linhas) e depois em “Site settings”. Aí vais conseguir editar as cores da tua marca, as fontes utilizadas para os títulos, subtítulos e corpo de texto, os botões, etc.

É muito chato fazer isto tudo “à mão”… Poderás eventualmente ter de mudar alguns individualmente, mas a maior parte fica automatizado. É só clicares no ícone do globo e selecionares uma das opções que definiste anteriormente (ver imagem).

selecionar as definições gerais de design no Elementor
Definições gerais no Elementor.

Espaço negativo ou espaço em branco

O espaço negativo ou espaço em branco, não é nada mais do que espaço vazio. Ele é muito importante porque separa o conteúdo, facilita a leitura e permite que o leitor se consiga focar numa coisa de cada vez.

Uso do espaço negativo para separar grupos e facilitar a leitura. Imagem retirada deste artigo.

Espero que estas dicas te tenham ajudado a melhor o design do teu site e que o mesmo tenha ficado mais coerente. Tens mais alguma dica que não falei aqui? Partilha em baixo nos comentários.

Roadmap “Cria o teu website com WordPress”


Ainda não criaste o teu site e estavas a só a “tirar ideias”?
Criei este roadmap com o passo a passo para perceberes exatamente o que tens de fazer!
Faz o download gratuito abaixo e cria o teu website de sonho!


Obrigada pela tua subscrição!

Acabei de te enviar o roadmap por email. Se não o encontrares na caixa de entrada, por favor verifica a pasta do SPAM.

.

0 Comentários
Junta-te à conversa

Deixa o teu comentário Cancelar comentário

Artigos relacionados

Mais artigos para ti

Como criar um email profissional com domínio próprio

Junho 12, 2021

As 3 melhores plataformas para criação de sites

Maio 17, 2021

Segue-me no Instagram

@catarinavieito.pt
  • Política de Privacidade
  • Termos e Condições
  • Livro de reclamações

Copyright © 2023 Catarina Vieito

Uso cookies no meu website para te proporcionar a melhor experiência através da memorização das tuas preferências e visitas repetidas. Ao clicares em "Aceitar tudo", estás a consentir ao uso de TODAS as cookies. No entanto, podes clicar em "Definições de Cookies" para gerires o teu consentimento. Ler mais
Definições de cookiesAceitar tudo
Gere o teu consentimento

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Sempre activado
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDuraçãoDescrição
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
GUARDAR E ACEITAR