desenvolvimento-web-processo

Desenvolvimento web: entenda todo o processo

O número de usuários da internet no Brasil atingiu cerca de 100 milhões, de acordo última pesquisa realizada pela Agência Brasil. Esse número mostra a importância das empresas garantirem uma boa presença online para impulsionar as vendas. E a principal forma de garantir essa presença é através de um site ou aplicativo. Como o desenvolvimento web é um processo conhecido por poucas, explicaremos como ele é feito.

Nesse post você encontrará as seguintes informações sobre o processo de desenvolvimento web:

O que é um website e um web browser

Qual é a primeira coisa que vêm em sua cabeça quando pensamos no que é um website? Provavelmente o site da sua empresa é a primeira coisa, junto com o layout, o menu e todas as outras opções que ele oferece. Esse é um pensamento bem simplista, porém não está de todo errado.

Um website é o conjunto de todos documentos de texto, cores, links, imagens e formatação que permitirá que o usuário navegue pelo site. Normalmente ele vem associado com sua URL, que é o que digitamos para acessá-lo, como www.usemobile.com.br. Esse domínio é o que explica para seu Web Browser onde todos os arquivos se encontram.

Um Web Browser é todo aplicativo capaz de baixar e exibir esses documentos e exibir suas informações de forma organizada ao usuário. O Google Chrome e o Mozilla Firefox são exemplos de Web Browsers mais utilizados. Ao entrar com a URL que você deseja acessar eles requisitam os arquivos, baixam e os apresenta da forma como o desenvolvedor planejou.

web browsers desenvolvimento web

Agora que já sabemos dois conceitos básicos, vamos para o processo de desenvolvimento web em si.

Desenvolvimento web do planejamento ao lançamento!

Planejamento

Como em todo projeto que você realiza ao longo de sua vida, o planejamento é uma das partes mais importantes e requer muita atenção. Ele guiará todo o desenvolvimento web, todas ações e estrutura do seu site.

O primeiro passo para o planejamento é deixar claro quais são os objetivos do seu site para a estratégia da sua empresa. Esses objetivos irão todo o planejamento da equipe de desenvolvimento web.

A partir daí define-se o perfil do seu público alvo, que deve acessar seu website, e começa-se a pensar em todo o comportamento que eles terão. Todo o fluxo de informações, wireframes e storyboards são pensados, para serem prototipados na próxima etapa. Wireframe é o esboço das telas e storyboard é o fluxo entre todas elas.

Você deve definir a melhor ferramenta para gerenciamento de conteúdo para sua empresa. Essas ferramentas são conhecidas como Content Management System (CMS) e permitirem a edição do conteúdo de maneira simples. Algumas bem comuns são o WordPress e Joomla, que permite a edição do site e do blog. A mais utilizada no mundo é o WordPress, representando cerca de 40% das plataformas de CMS do mercado.

CMS desenvolvimento web

A ferramenta de Customer Relationship Management (CRM) também é definida nesse momento, caso o cliente queira. Ela é responsável por toda a coleta de dados de pessoas e por definir as ações que serão tomadas com cada uma. A Salesforce, Highrise e a Insightly são alguns exemplos que fazem o CRM muito bem.

Definido todas essas questões, é possível estimar o tempo que durará seu desenvolvimento web e o valor final do projeto. Tudo que foi definido deve ser documentado para facilitar a consulta e comunicação por parte da equipe.

Desenvolver o protótipo do site

Com o que foi definido no planejamento, a equipe criará um protótipo. Ele será o conjunto de todas as wireframes e storyboards do site, que será possível navegar entre elas. O protótipo apresentará toda a arquitetura do seu site e é uma forma de documentação mais efetiva que a clássica, guiando todo desenvolvimento web.

Existem alguns softwares que permitem a criação das wireframes e desses fluxos. Aqui na Usemobile utilizamos o Balsamiq, que é uma ferramenta simples e que permite a criação de wireframes para desktop e para celular.

Para criar o protótipo utilizamos um passo a passo:

Identifique todas as páginas e sua organização

Identificar todas as páginas que seu site deve e ter sua estrutura é o primeiro passo para a prototipação. Então é possível identificar como as páginas se comunicarão entre si, bem como quais são importantes para um menu de navegação.

O MindMeister é uma ferramenta que permite a criação de fluxos, de maneira que fique fácil a sua visualização. Ela é uma ferramenta colaborativa, permitindo a interação de toda equipe na hora da criação do storyboard.

Mindmeister

Toda interação entre as páginas deve ser pensada de forma que a navegação fique completamente intuitiva para seu usuário. O número de páginas deve ser muito bem pensado, para que o usuário atinja o objetivo de forma rápida. Existe a teoria dos 3 cliques, que diz que nenhuma página deve estar a mais de 3 cliques de qualquer outra.

Foque no conteúdo das páginas principais

Nessa etapa o foco é nas principais páginas de conteúdo do seu site, ou seja aquelas que trarão informações chave para seu usuário. Páginas sobre a empresa ou produtos, cases de sucesso e seu blog são alguns exemplos.

Em cada uma dessas páginas deve-se pensar o que o usuário quer encontrar, qual ação você deseja que ele tome e o que levará ele a tomar aquela ação. Pense bem nos Call to action (CTA), ou chamadas para ação, dentro de cada página, como um confira nesse post o que sua empresa está perdendo sem um aplicativo. Os CTA’s devem ser inseridos em cada uma de maneira mais natural possível.

Foque em sua homepage

A homepage de seu site é a principal porta de entrada para todos os usuários, então ela requer atenção especial. O conteúdo das demais páginas já foi pensado, então coloque aqui o que é realmente importante para o usuário.

Os primeiros segundos que o usuário passa no seu site são determinantes para saber se ele continuará em seu site ou não. Você tem cerca de 10 a 20 segundos para garantir que seu usuário se interesse pela sua página.

Faça o teste dos 5 segundos, que você deve mostrar a página inicial para alguém durante 5 segundo e fazer algumas perguntas. Isso irá te mostrar o que as pessoas estão percebendo e lembrando do seu site.

A primeira impressão é de extrema importância para seu usuário permanecer no site ou não. Assim deixe sua homepage e demais páginas de entrada bem atrativas para os usuários.

Pense na integração com as outras ferramentas

Como falamos inicialmente, várias ferramentas serão utilizadas em conjunto com seu site e cada uma é integrada de uma maneira. Pense em como integrar as ferramentas de CMS, de CMR e o Google Analytics.

Essa última é uma ferramenta muito importante para que você compreenda o comportamento do seu usuário após o site ser lançado. Explicaremos um pouco mais sobre ela ao final do post.

Planeje e desenvolva o design do seu site

O layout do seu site só deve começar a ser desenvolvido após o protótipo ser criado, pois é ele quem guiará o trabalho do designer. Enquanto o protótipo é criado, o mood board do seu projeto de site pode ser feito. Ele é um painel de referências visuais, com conjuntos de imagens, fontes, cores e de como a estética irá interagir com o propósito da marca.

moodboard no desenvolvimento web

Com o protótipo e o mood board aprovados, é hora de começar a desenvolver o layout final do seu site.Toda a criação deve ser focada em facilitar que o usuário navegue no site, que ele seja direcionado para o objetivo de seu negócio. Então o layout de cada página deve ser o mais intuitivo possível, para que o usuário tome uma ação por conta própria.

Criado o layout único de cada página, é hora de partir para a próxima etapa do desenvolvimento web: escrever o código.

Desenvolvimento do código do seu site

Essa pode ser considerada uma das partes mais trabalhosas do desenvolvimento web. Essa é a etapa que fará com que tudo o que foi planejado no início do projeto de seu site funcione.

Os programadores desenvolverem toda a lógica por trás do layout, linkando os botões criados pelo designer as funções reais. Normalmente o código estrutural é escrito em HTML/CSS e o suporte a outras funções é escrito em PHP ou Javascript.

Há vários cursos que poderão te ensinar a realizar essa programação, como o Codecademy, W3Schools e Codeschool. Alguns oferecem o curso de HTML e CSS gratuitamente, como o Codecademy.

Teste seu site

Realizado todo o desenvolvimento web, é hora de testar o seu site e coletar feedbacks sobre o que as pessoas pensam. Peça para amigos, familiares e para qualquer pessoa que possa ter interesse em seu site, para testar e levantar erros e dificuldades.

Os erros te falarão se alguma linha do seu código de programação precisa ser refeita ou revisada. As dificuldades irão apontar se existe algum lugar do seu layout que não está intuitivo ao usuário e precisa ser refeito.

Essa coleta de feedbacks é extremamente importante para garantir que seu site seja lançado com tudo que o público espera. Repasse tudo que foi relatado de melhoria para a equipe de desenvolvimento para as correções.

Lançamento

O último passo a ser tomado no desenvolvimento web é o lançamento de seu site. Agora que ele já passou por revisões, é hora de divulgá-lo para que as pessoas comecem a acessá-lo.

Crie uma campanha de Google Adwords para o lançamento de seu site, isso fará com que seu público comece a encontrá-lo. Essa campanha é essencial, pois no lançamento seu site provavelmente ainda não estará indexado pelo Google.

Como falado nos tópicos anteriores, acompanhe as métricas do Google analytics e o comportamento do usuário em seu site. Essas informações são essenciais para manter a qualidade de acesso e a usabilidade do seu website.

Com uma equipe de desenvolvimento web e todas essas ferramentas em mão, seu site tem tudo para ser um sucesso! Se você utiliza, conhece ou já realizou o desenvolvimento web de sua empresa, compartilhe a experiência com a gente!


  • Daniel Madureira
  • Gerente de marketing
  • Mineiro de Divinópolis, amante do futebol e cruzeirense apaixonado. Adorador de tecnologia e marketing digital. Graduando em Engenharia de Produção. Gosta de uma boa resenha e de contos medievais nas horas vagas. Quem tiver interesse em saber mais é só seguir no Instagram @danielmadureira94