Criação de sites: quais passos seguir?

22/06/2017 Por
criação de sites

Está na hora de mostrar a cara da sua empresa na internet, mas você não entende nada de criação de sites? Sem pânico. Estou aqui novamente para te ajudar.

É importante entender que um site é o cartão de visitas de uma empresa. Por meio dele é que sua equipe é apresentada, a história da empresa é contada, onde seus valores e objetivos são mostrados e, principalmente, este será o espaço em que todas as soluções que você oferece serão explicadas.

Já falei aqui no blog que é indispensável ter um site. Mas afinal, quais passos são necessários para seu desenvolvimento?

Com base no nosso dia a dia aqui na Layer Up, vou contar tudo sobre o processo de criação de sites agora!

criação de sites

Domínio e hospedagem

Talvez esses sejam os itens que mais aparecem nas buscas por “criação de sites“. E não é para menos, pois eles são passos essenciais que você mesmo deve fazer para que os registros sejam feitos no seu nome.

Você tem dois caminhos para contratar um domínio:

– Pelo site do Registros BR

– Pela própria empresa de hospedagem que escolher (Hostgator, Locaweb, Go Daddy, etc.)

Se você não domina o assunto, o mais indicado é seguir a segunda opção, pois dessa forma o domínio contratado já estará com todas as configurações necessárias.

A hospedagem é necessária para colocar seu site em funcionamento e para variadas funções, como a criação de e-mails profissionais a partir do seu domínio. A mensalidade geralmente fica entre R$10 e R$30.

 

Cuidados fundamentais para a criação de sites

(advertencia) Preste atenção: desenvolver um site vai além de colocá-lo “no ar” com um punhado de informações.

É preciso trabalhar diversas frentes para que ele seja funcional, esteticamente bonito e dinâmico. Aqui na Layer Up, costumamos sempre focar no chamado UX (User Experience), ou seja, na experiência do usuário e como ele vai caminhar dentro do site.

Alguns dos fatores mais importantes nesse caso são:

Layout

Visualmente o site precisa ser agradável e transmitir a identidade do negócio.

Há empresas cujo conteúdo principal são as imagens, como uma produtora de vídeo, ou um estúdio de fotografia, por exemplo. Já em outros casos, o importante é ter uma interface simples, fácil de ser assimilada e com o conteúdo reunido somente na home.

Há como comprar templates prontos para essa finalidade. Hoje há muitos sites que oferecem layouts idealizados para determinados perfis de negócio.

→ Uma dica: para conferir as possibilidade de temas prontos, você pode acessar sites como o Themeforest.

E tem mais: seja qual for o formato escolhido, é importante que o site tenha otimizações de programação para que não seja pesado.

Por que?

Atualmente os usuários possuem pacotes de dados oferecidos pelas operadoras de telefonia celular, por exemplo, e utilizam bastante o smartphone para acessar a internet. Se o site for pesado, além de acabar com o pacote de dados, o usuário ficará limitado durante a navegação.

Além disso, ninguém gosta de ficar muito tempo esperando um site carregar. Não é mesmo?

Bored GIF - Find & Share on GIPHY

Linguagem

Com quem sua empresa conversa?

É com um gestor de uma empresa de tecnologia, ou com os pacientes de uma clínica veterinária?

A linguagem tem que ser acessível para seu público. Você deve conhecê-lo muito bem para fazer as adaptações necessárias.

Esse estudo indicará qual é a Persona que você aplicará no conteúdo do site, ou seja, quais características sua empresa assumirá para conversar com o público-alvo, seja no tom do texto, ou na escolha de termos utilizados.

Site responsivo

Pense no usuário e estude seu comportamento. Depois disso, molde seu site para melhor atendê-lo.

Pensando nisso também, vale o alerta: todo site tem que ser responsivo e, assim, ter versões pensadas para mobile (smartphones e tablets).

E como saber se um site é responsivo?

Web Design GIF - Find & Share on GIPHY

Basta encolher a tela no próprio computador e analisar como os elementos se comportam.

– Pode ocorrer apenas uma adaptação, sendo que os mesmos elementos são mantidos na tela reduzida, sem mudar de tamanho; (errado)

– Ou os itens, como o menu e slides informativos, podem ser alterados para versões mais compactas, que sejam de fácil leitura, o que prova que o site é mesmo responsivo. (certo)

SEO

O famoso SEO tem que ser aplicado no seu site. Expliquei tudo sobre esse assunto  .

É essa prática que fará a indexação no Google. É preciso fazer um estudo para entender quais são as melhores palavras-chave para seu negócio e incluí-las nos textos e títulos presentes no seu site.

→ Dica: se você optar por montar seu site por meio do WordPress, utilize um plugin (programa que permite otimizar recursos para o site) chamado Yoast, que tornará a aplicação de palavra-chave muito mais fácil. Caso optar por outro formato de desenvolvimento, como HTML, saiba que será necessário aplicar o SEO com códigos, então é melhor contar com um profissional de programação.

Vou explicar melhor sobre WordPress e HTML daqui a pouco.

 

Etapas da criação de sites

Agora que você conhece os cuidados que precisa tomar para criar seu site, vamos para as etapas práticas.

1º etapa – Briefing

Uma reunião de briefing para esclarecer quais objetivos se buscam atingir com a construção do site é primordial. É esse alinhamento que dará um norte para os próximos dois passos.

2ª etapa – Site Map

criação de sites

Com um briefing detalhado, é possível estruturar um bom Site Map, que é a estrutura que lista todos os elementos que estarão presentes no site: home, sobre, contato, serviços, etc. A agência ou freela que estiver responsável por essa etapa, irá se encarrega de organizar esse processo e encaminhar para aprovação do cliente.

3ª etapa – Wireframe

criação de sites

Após a aprovação do Site Map, chega a hora de “desenhar” o site. É para isso que serve a etapa de Wireframe, um rascunho bruto do layout sugerido. Concluída e aprovada essa parte, seguimos para os processos técnicos.

 

“Tecniquês” de um website

Antes de explicar quais são as possibilidades técnicas da construção de um site, vou mostrar aqui as linguagens mais populares no mercado.

Provavelmente você já ouviu essas siglas e palavras, mas ficava curiosos sobre os significados. Aproveite para matar essa curiosidade agora.

HTML

Ao acessar a home de qualquer site, é fácil identificar blocos de texto, certo? Pois esse é o código HTML em ação.

Quer um exemplo?

No Facebook, encontramos botões com os dizeres “criar uma publicação”, ou ainda lemos no topo da página algo como “pesquisar no Facebook”. Tudo o que for texto, como indiquei aqui, é HTML.

CSS

Se o HTML é referência para texto, o CSS é o que dará cor e estilo.

Barras coloridas, caixas de texto com tamanhos específicos, botões estilizados… tudo isso surge no site graças ao código CSS. No exemplo do Facebook, é com o código CSS que o topo da página e os demais botões são azul.

Javascript

O Javascript nada mais é do que uma espécie de animação que ocorre sem que seja preciso recarregar uma página do site.

Um exemplo simples para descomplicar:

Vamos supor que você está navegando por um blog de gastronomia e, quando rola a tela, aparece um pop up (pequena janela que abre no navegador em cima de determinada página) com um botão para você se inscrever e receber novidades.

Essa é a ação do Javascript, pois o pop up aparece e você pode fechá-lo sem que a página precise ser recarregada.

WordPress

O WordPress é uma plataforma de desenvolvimento de site, que atualmente é uma das mais fáceis de ser administrada.

Com essa ferramenta, é mais fácil montar um site, pois não é preciso mexer na programação. Toda informação já é puxada automaticamente de um banco de dados.

Front-end

O front-end é justamente como se chama a parte estática do site, formada pelo texto, pela estilização e pelo Javascript.

Back-end

O back-end atua como se fosse um motor. Ele é a segunda parte do desenvolvimento, responsável pelo funcionamento das ações do site.

Quando você cria seu texto e insere em qualquer plataforma, por exemplo, o caminho natural é clicar em “postar”. Nesse momento, o “motor” será ativado e o texto irá para um banco de dados. Quando você recarregar a página em questão, essas informações serão puxadas desse banco de dados e aparecerão publicadas.

Esse conjunto de ações é o back-end.

PHP

Você deve estar se perguntando “qual elemento é responsável por carregar as informações para o banco de dados durante a ação do back-end?”.

Seu raciocínio está certo. Tem mesmo um item que faz isso. É o chamado PHP.

No momento de “postar”, que comentei aqui em cima, as informações vão para o banco e são puxadas pelo PHP, o qual inclui esse texto na tela, de forma dinâmica.

 

Resumindo…

Há duas maneiras de desenvolver um site:

  • Pelo WordPress, ou outra plataforma de hospedagem, que é um processo mais rápido
  • Por meio do HTML, CSS e Javascript, que é um desenvolvimento mais trabalhoso e leva um pouco mais de tempo

Dentro desse universo, é importante esclarecer que a forma mais simples de criar um site atualmente é pelo WordPress, principalmente porque ele é gratuito e open source, ou seja, é um modelo de desenvolvimento com licenciamento gratuito. Isso porque essa plataforma foi criada por uma comunidade, que inclusive é aberta para receber novos códigos e programas.

→ Vantagem: com esse modelo de desenvolvimento, é possível contar com as inúmeras informações e tutorias disponíveis na web, fornecidas por membros dessa comunidade.

Outro cenário é quando se usa somente HTML, CSS e Javascript para a criação de um site estático, que se baseia somente em texto, cores e animações simples. Apesar de ser uma estrutura mais enxuta e com pouca variação de funções, é preciso ter conhecimento de programação para a execução.

Caso você queira desenvolver um site dinâmico, que necessita de interações como formulários e publicações, também é necessário implementar o PHP. Mas vale lembrar que essa é uma técnica complexa e por isso é indispensável o trabalho de um programador.

 

O processo para um e-commerce é o mesmo?

Quando se trata de criação de sites para e-commerce é preciso contar com o suporte de algumas ferramentas específicas.

São elas:

Woo Commerce

O Woo Commerce é uma opção utilizada na plataforma WordPress. Trata-se de um plugin gratuito que lê imagens de produtos e preços, e permite a inserção de um botão de compra.

É uma ferramenta gratuita, muito simples e atende bem micro e pequenas empresas.

Vtex

A Vtex é uma plataforma paga, cujo investimento é válido para empresas maiores, com alta demanda. Isso porque ela tem mais funcionalidades que o Woocommerce.

 

O que já colocamos em prática na Layer Up

Gostamos de desenvolver sites editáveis, para que o cliente possa trocar títulos, acrescentar novas informações, sem depender 100% da agência. Isso porque acreditamos que o trabalho tem que ser dinâmico para o cliente e seria injusto mantê-lo dependente somente do nosso suporte por um tempo prolongado.

Se você já passou por isso, sabe do que estou falando.

Pensando nisso e com o foco em oferecer o melhor para cada perfil de negócio, nós trabalhamos com os processos que expliquei aqui e já conseguimos resultados bem legais.

 

Mulheres da Terra

criação de sites

Um exemplo é o site do documentário Mulheres da Terra. Aqui foi feito um trabalho do zero, ou seja, 100% baseado em programação. Ele é dinâmico, moderno, conta com muitas imagens que retratam o intuito do projeto, que é resgatar os saberes ancestrais femininos presentes no mundo todo.

 

Studio E+W Arquitetura

criação de sites

Um projeto que foi feito a partir de um template já desenvolvido, foi o site do Studio E+W Arquitetura. Esse cliente conta com uma equipe jovem e um modelo de negócio projetado para envolver o público-alvo em todas as etapas dos projetos.

O site precisava transmitir esse conceito e por isso ele é bastante dinâmico. O ambiente virtual também conta com elementos leves e destaca o portfólio da empresa. Com a customização bem planejada e executada, foi possível atingir o objetivo.

 

Ficou mais fácil de entender o processo de criação de sites? Se quiser saber mais sobre isso e entender qual é a melhor opção para seu negócio, conte conosco! É só entrar em contato e detalhamos tudo para você.

Até a próxima!

Fundadora da Layer Up - empresa especializada em Inbound Marketing. Graduada em Comunicação Social (produção editorial), pós-graduada em Marketing, possui 15 anos de experiência profissional, com atuações em empresas como Editora Abril, Editora Globo, Editora 3, Grupo Ikezaki e Cers Cursos Online. É também professora do curso de Inbound Marketing da São Paulo Digital School e do Cursos Layer Up.