Você precisa de um site. Você provavelmente já ouviu a mesma coisa de outras pessoas e artigos por toda a internet. Você sabe que é verdade. Mas, a perspectiva de aprender a projetar um site pode ser intimidante.
Aqui estão as boas notícias:
Embora a criação de um site exigisse um web designer ou desenvolvedor profissional, esse não é mais o caso. Hoje em dia, é fácil aprender a criar um site sozinho .
Você não precisa ser um mago da codificação 🧙 ou um especialista em design para criar um site bonito. Qualquer pessoa pode aprender como projetar um site e, neste guia, vamos orientá-lo nas etapas básicas para fazer isso. A maioria dessas etapas é semelhante em plataformas CMS populares .
Vamos começar!
Como criar um site
Aqui está o índice do que está por vir:
- Defina a finalidade do seu site 🎯
- Prepare o conteúdo do seu site ✍️
- Configure seu domínio, hospedagem e CMS ⚙️
- Determine os elementos de design específicos 🎨
- Personalize o design do seu site 👨🎨
- Adicione páginas ao seu site 📃
- Configure a navegação do seu site ↕️
- Adicionar funcionalidade extra com plug-ins 🔌
Etapa 1: defina a finalidade do seu site 🎯
Ao aprender a criar um site, a primeira etapa é determinar a finalidade do seu site.
Seja claro em:
A quem se destina seu site
O que você deseja que eles façam no seu site
O que eles precisam saber para realizar a ação desejada
Identifique o seu visitante ideal
Antes de aprender a projetar um site, você precisa saber para quem deve criá-lo.
Crie um perfil para o seu visitante ideal . Estas são as pessoas que mais se beneficiarão ao visitar seu site-você pode resolver seus problemas com seus serviços ou produtos. Se você tiver as soluções certas para os visitantes certos do site, verá um aumento em sua taxa de conversão.
Seu perfil de visitante ideal deve incluir:
- Idade, nome e localização atual
- nível de escolaridade, ocupação e renda
- hábitos de consumo
- Hobbies e interesses
- Sites favoritos ou outras publicações online
- Plataformas de mídia social preferidas
Essas informações podem ajudar você a fazer com que seus visitantes sintam que você está falando pessoalmente com eles. A criação de uma conexão pessoal facilita a conversão de visitantes aleatórios em visitantes recorrentes e, eventualmente, em compradores.
Tente criar a experiência do usuário (UX) e a interface do usuário (IU) de seu site em torno as expectativas do seu visitante ideal.
Faça pesquisas de mercado e explore plataformas de mídia social como o Facebook para começar a construir o perfil ideal de seu público-alvo. Se você já está no mercado há algum tempo, também pode usar o feedback existente do cliente.
Defina o que você deseja que seus visitantes façam
Depois de saber para quem é o seu site, você precisa esclarecer o que deseja que os visitantes do site façam quando acessarem o seu site.
Você pode querer que eles:
Determine o que seus visitantes precisam saber
Quando você tem uma meta clara em mente, descubra quais informações estimularão seus visitantes a realizarem a ação que você deseja.
Suponha que você seja proprietário de um restaurante local : as informações mais importantes para dar a seus clientes inclui sua localização, horários e que tipo de comida você serve.
(Exemplo de um tema de restaurante de qualidade)
Etapa 2: prepare o conteúdo do seu site ✍️
As próximas etapas para criar um site envolvem a preparação do conteúdo. Acelere todo o processo de design do site, deixando sua cópia e imagens prontas para serem lançadas!
Aqui estão algumas dicas rápidas de redação:
- A maioria dos visitantes irá folhear as páginas do seu site em vez de lê-las. Sua cópia deve ser curta e concisa.
- Centralize sua cópia em torno das pessoas mais interessadas no que você pode fazer por elas e por que devem se preocupar com seu produto ou serviço.
- Evite usar jargão ou termos técnicos. A menos que você esteja tentando atrair outras pessoas em sua área, é improvável que seus visitantes entendam a linguagem específica do setor.
- Use títulos, parágrafos curtos e marcadores para tornar seu texto mais fácil de ler.
Os elementos visuais o ajudarão a contar melhor sua história. Eles também tornam seu site mais atraente e estiloso.
Você precisará preparar alguns tipos diferentes de imagens:
- Banner ou imagens de herói que abrangem toda a largura de a página e pode ser usado na área do cabeçalho.
- Fotos de você e funcionários ou parceiros importantes para a página sobre .
- Imagens do produto se você estiver projetando uma loja online.
- Fotografias de arquivo em geral que refletem sua indústria, loja online e serviços.
- Clientes anteriores ou fotos de clientes que você pode usar com seus depoimentos.
Para algumas das imagens (como imagens de produtos ou headshots), você precisará contratar um fotógrafo ou pedir a ajuda de um amigo que seja bom com uma câmera.
Para fotos mais gerais, você pode acessar sites de banco de imagens como:
Etapa 3: Configure seu domínio, hospedagem e CMS ⚙️
Antes de começar a trabalhar no seu site, você precisa de um nome de domínio, um plano de hospedagem e um CMS (sistema de gerenciamento de conteúdo).
Um nome de domínio é o endereço do seu site on-line. Se o seu site fosse uma casa, seu nome de domínio seria o endereço da rua.
Uma ferramenta como DomainWheel pode ajudá-lo a criar nomes de domínio exclusivos e criativos.
Depois de decidir o nome do domínio, você precisará adquirir um plano de hospedagem.
Se você é um novato que deseja aprender como criar um site pela primeira vez, pode se beneficiar de uma empresa como a Bluehost .
Por fim, convém considerar a funcionalidade específica necessária em seu site e qual sistema de gerenciamento de conteúdo (CMS) o ajudará a alcançá-la. Um CMS fornece uma interface de usuário a partir da qual você pode fazer atualizações em seu site, então você vai querer escolher uma que considere fácil de usar.
Um dos nossos CMSs favoritos é o WordPress porque permite que os administradores de sites de todos os níveis de habilidade de codificação aprendam a criar um site. O WordPress oferece métodos flexíveis para alcançar a estética de design exata que você procura.
Se você gostaria de ver quais outras ferramentas existem, também temos uma comparação do melhor software CMS disponíveis no mercado (leia aqui 👈).
Ao longo do restante deste artigo, usaremos alguma linguagem em referência à configuração do WordPress, explicando conceitos que serão relevantes independentemente do CMS que você estiver usando.
Então, como configurar tudo?
Bluehost-uma empresa de hospedagem na web-agiliza o processo de obtenção de um domínio, hospedagem e conta WordPress. É também um dos parceiros oficiais de hospedagem do WordPress.
O Bluehost fornece um nome de domínio gratuito quando você se inscreve em um plano de hospedagem e eles também concluem a instalação do WordPress para você.
Para se inscrever no Bluehost, basta seguir as etapas abaixo:
Escolha o plano de hospedagem desejado na próxima página.
Em seguida, insira o nome de domínio desejado e clique em Continuar.
Insira sua conta e informações de pagamento. Clique em Enviar.
Assim que sua conta for criada, o Bluehost irá instalar o WordPress para você-o CMS que o Bluehost usa. Quando o processo estiver concluído, você receberá uma confirmação por e-mail com as credenciais de login para seu painel de hospedagem e painel WordPress . Mantenha essas informações em um lugar seguro, pois você precisará delas na próxima etapa.
Etapa 4: crie seu site 🎨
Agora que você cuidou dos detalhes técnicos e tem seu CMS pronto para funcionar, é hora de prosseguir para as etapas mais criativas para projetar um site.
Primeira ordem do dia: escolher um tema-a estrutura para o design do seu site. Usaremos esse tema para projetar seu site em torno dele.
Escolha e instale um tema WordPress
Mesmo que o tema seja apenas o seu ponto de partida, preste atenção especial ao layout dos temas que você está considerando:
- Eles têm uma hierarquia visual lógica?
- A barra de navegação e a estrutura do menu são claras?
- O tema apresenta um layout digitalizável fácil de seguir?
Existem muitos temas gratuitos e premium disponíveis para WordPress, o que é ótimo.
Temas gratuitos são um bom ponto de partida se você estiver com orçamento limitado. No entanto, você pode preferir opções premium se desejar mais opções de personalização.
Ao escolher um tema específico do WordPress, existem alguns recursos a serem observados:
- Atualizações regulares: um tema desatualizado pode expor seu site a malware.
- Opções estéticas e de personalização: certifique-se de que pode usar as cores e fontes de sua marca, além de enviar seu logotipo.
- Web design responsivo: certifique-se de que seu site terá uma boa aparência em dispositivos móveis e desktop. Dado que mais da metade de todo o tráfego da Internet [3] vem de dispositivos móveis, ter um site responsivo é crucial.
Para instalar um tema WordPress:
- Faça login no painel do WordPress em
YOURDOMAIN.com/wp-login.php. - Digite suas credenciais de login e clique em Log Em .
- Olhe para a barra lateral esquerda e clique em Aparência → Temas .
- Clique em Adicionar novo e navegue pelo repositório de temas.
- Depois de encontrar um tema de que goste, clique em Instalar e depois em Ativar .
Com o tema pronto e esperando, vamos ver como colocar seus elementos de design em torno dele.
Considere as tendências atuais de design visual
Quando você aprende como criar um site pela primeira vez, tem a vantagem de começar do zero. Você pode criar um site atualizado e visualmente atraente pesquisando as tendências de design atuais .
Goste ou não, o design é importante. De acordo com as estatísticas compiladas pela Blue Corona [1] , 48% das pessoas dizem que o design de um site é o fator principal para decidir o quão confiável é uma empresa. Portanto, vale a pena saber o que é tendência atualmente no design da web.
Comece com uma simples pesquisa no Google por tendências de design da web CURRENT_YEAR .
Por exemplo, em 2021, esta pesquisa revela que as tendências incluem:
- Combinação de fotos e gráficos
- navegação minimalista
- frases de chamariz (CTAs) claras
- Esquemas de cores brilhantes e luminosas
- Opções do modo escuro
Sites como Awwwards e CSS Design Awards também pode lhe dar ideias sobre as tendências de design mais recentes se você for um iniciante que deseja aprender como criar um site pela primeira vez.
No entanto, só porque algo está na moda, não significa que você precisa incorporá-lo ao seu site.
Por exemplo, se você estiver no setor de alimentos, um esquema de cores luminosas emparelhado com o modo escuro pode não funcionar tão bem como funcionaria para um loja de comércio eletrônico . No entanto, misturar fotos e gráficos e usar bastante espaço em branco é uma ótima maneira de ajudar a destacar os itens do seu menu.
Nem todas as tendências se enquadram em todos os setores-observe outros sites em seu setor e veja o que seus concorrentes estão fazendo.
À medida que pesquisa tendências de design e verifica outros sites do setor, salve os exemplos de que gosta em uma pasta em seu computador. Em seguida, você pode consultá-los enquanto estiver trabalhando no design do seu site.
Decida sobre sua marca
De todas as etapas para projetar seu site, pense em como você deseja que seus visitantes se sintam ao interagir com sua marca-esse sentimento está no cerne de sua marca.
Basicamente, a marca do site consiste em um:
- Esquema de cores
- Conjunto de fontes
- Seleção de imagens
Esses elementos precisam transmitir a mesma mensagem e sentimento, porque todos desempenham um papel no compartilhamento da história da sua marca e na atração dos visitantes certos para o seu site.
Escolha um esquema de cores
Cor é uma das ferramentas de comunicação mais importantes que você pode ter como marca.
Normalmente, você deve usar uma cor da marca principal em todo o seu site e logotipo. Escolha uma cor de destaque adicional para CTAs e links internos ou externos, e você pode usar mais uma cor para seus botões.
Coolors é uma ferramenta que pode ajudá-lo a desenvolver um esquema de cores para o seu site de uma forma fácil , maneira divertida
Escolha suas fontes
Assim como as cores, as fontes desempenham um grande papel na forma como os visitantes percebem seu site e sua empresa. Tradicionalmente, as fontes com serifa como a Geórgia emitem uma vibração tradicional, atemporal e elegante. Fontes sem serifa, como Helvetica, darão uma aparência mais moderna.
Escolha duas fontes para o seu site: uma para os cabeçalhos e outra para o corpo do texto. Uma ferramenta como FontJoy pode ajudá-lo a gerar um par de fontes esteticamente agradável para seu site.
Não se esqueça das boas imagens
Adicionar fotos ao seu site é uma maneira poderosa de contar a história da sua marca e torná-la mais memorável. De acordo com um estudo conduzido por Brain Rules [2] , adicionar imagens a uma parte do conteúdo pode ajudar os leitores a reter 65% das informações três dias depois. As imagens também incentivam os visitantes a clicar em seus CTAs.
No entanto, não exagere com as imagens e certifique-se de otimizá-las para que a velocidade do seu site não seja prejudicada.
Etapa 5: personalize o design do seu site 👨🎨
Neste estágio, pegue tudo o que você aprendeu na etapa anterior e aplique ao personalizar seu tema.
Para os fins deste tutorial, usaremos o tema Neve . Os temas do WordPress podem ser personalizados por meio do Personalizador de temas. Se você estiver usando outro construtor de sites/CMS, o processo provavelmente seguirá um fluxo semelhante.
Alguns temas têm um painel Opções de tema separado, onde as configurações de estilo estão localizadas. Normalmente, você pode encontrar isso na guia Aparência .
Para personalizar o tema escolhido, clique em Aparência → Personalizar . Assim que o personalizador carregar, você verá todas as diferentes configurações de estilo disponíveis para você.
Para personalizar as cores do seu tema, clique na seção Cores e plano de fundo . Para personalizar suas fontes, clique na guia Tipografia e assim por diante.
Para fazer upload do seu logotipo, clique na guia Cabeçalho e, em seguida, clique na opção Alterar logotipo . Você poderá então fazer o upload da imagem do seu logotipo.
You can also use a page builder plugin like Elementor to customize your website in a more detailed way. A page builder plugin lets you use a drag-and-drop interface to add and arrange text, images, and other blocks on your page.
If you want to learn how to design a website, drag-and-drop editors make it extra easy, since it’s all visually-based.
Step 6: Create your website’s pages 📃
Now that you have your theme installed, it’s time to create your website pages.
Every website typically has the following pages:
- Home
- About
- Services or Products (if you plan on selling anything)
- Contact
- Blog
You’ll also need legal pages with your privacy policy or terms of service. The pages you should create depend on the reason why you want to learn how to design a website – whether it’s a site for business, hobby, or anything in between.
Adding pages in WordPress
To create a page, click on Pages → Add new. You’ll be taken to a screen where you can add a name for your page and the content for it.
Add your content with the corresponding editor blocks. For example, to add text, click on the + sign and select the paragraph block. To add an image, add an image block.
When you’re done adding content, click on Publish and your page will be live. Then, repeat this process for every other page on your website.
Finally, you need to set your homepage and blog page. Go to Settings → Reading. Make sure you check the Static page option next to the Your homepage displays label. Then, select the appropriate homepage and blog page from the drop-down menus. Click on Save changes when you’re done.
Step 7: Set up your website’s navigation menu ↕️
Once you have customized your design and added your pages, it’s time to set up your navigation menu.
Your navigation menu should be clutter-free and easy to understand. Avoid using cute or ambiguous names and keep it between 5-7 links.
How to create a navigation menu in WordPress
- Go to Appearance → Menus.
- Give your menu a name and click on Save Menu.
- Then, under the Pages tab, click on View All and tick the boxes next to the pages you want to add to the menu.
- Click the Add to menu button and then assign it as the Primary location.
- Click on Save Menu.
Step 8: Add extra functionality with plugins 🔌
The last of the steps to design a website is extending its functionality with plugins. Plugins connect your website with other services and code that can help you to achieve specific goals and execute certain desired tasks.
You can use plugins to add things like contact forms and share buttons, improve your content for search engine optimization (SEO), and backup your website.
Extend functionality on WordPress with plugins
For WordPress websites, plugins are like little applications for your website — there are numerous free and premium plugins. You can download plugins from the official repository.
When choosing and installing plugins, make sure any plugin you choose:
- Is regularly updated
- Has at least a 4-star rating
- Does what you need it to do
Additionally, be aware of how many plugins you install. Too many plugins can slow down your website.
Here are a few recommended plugins to get you started:
- Yoast SEO: Ensures your website can be found through search engines.
- WPForms: Adds a contact form to collect information from visitors.
- Sassy Social Share: Helps you and your visitors share your blog posts or articles on social media.
- UpdraftPlus: Backs up your website automatically.
- Wordfence: Keeps your website safe from hackers.
- Optimole: Optimizes your website images to load faster and take up less space on your web server.
Final thoughts on how to design a website
Creating a website might seem daunting but once you have clear instructions, it becomes much simpler. These easy steps to design a website can help you move the process along.
Remember: before you get started on your website design, you’ll need a domain name, hosting plan, CMS, and content for your website, including written copy and images.
It’s not complicated to learn how to design a website with WordPress or any other platform. Get started now by following the steps to design a website outlined in this article and you’re bound to be pleased by the end result.
Happy designing! And if you need more in-depth guidance on how to design a website, CodeinWP has got you covered.
Got any great web design tips we missed? Then, share them with us in the comments below!
…
Não se esqueça de participar do nosso curso intensivo sobre como acelerar o seu site WordPress. Com algumas correções simples, você pode reduzir o tempo de carregamento em até 50-80%:
Layout e apresentação de Karol K e Chris Fitzgerald.
