{"id":16652,"date":"2021-02-16T16:32:45","date_gmt":"2021-02-16T19:32:45","guid":{"rendered":"https:\/\/aledesigner.com.br\/?p=16652"},"modified":"2026-04-18T18:14:34","modified_gmt":"2026-04-18T21:14:34","slug":"as-10-etapas-de-criacao-de-um-site","status":"publish","type":"post","link":"https:\/\/agtdev3.com.br\/ale\/as-10-etapas-de-criacao-de-um-site\/","title":{"rendered":"As 10 etapas de cria\u00e7\u00e3o de um site"},"content":{"rendered":"

A maioria dos clientes interessados em um novo site costuma me perguntar como \u00e9 o processo de cria\u00e7\u00e3o<\/strong> e quanto tempo leva<\/strong> para ficar pronto. O processo \u00e9 simples de explicar. J\u00e1 o tempo para conclus\u00e3o do site vai depender da equipe e do tamanho do projeto.<\/p>\n

Montei um resumo das etapas baseado no meu fluxo de trabalho e no infogr\u00e1fico do John Furness<\/a>, designer e fundador da Simple Square. Nesse infogr\u00e1fico, John Furness considerou o tipo de envolvimento, qual a import\u00e2ncia do evento e quem vai executar a tarefa (designer ou cliente).<\/p>\n

No meu infogr\u00e1fico, mantive a divis\u00e3o de tarefas mas preferi simplificar as etapas facilitando o entendimento do processo. A partir da reuni\u00e3o inicial temos:<\/p>\n

\"\"<\/p>\n

Explicando as etapas:<\/p>\n

 <\/p>\n

1. Preenchimento do briefing<\/h3>\n

O briefing<\/a> \u00e9 a base de informa\u00e7\u00f5es sobre o site. \u00c9 um question\u00e1rio com perguntas sobre os produtos\/servi\u00e7os oferecidos, qual o p\u00fablico alvo, quem s\u00e3o os concorrentes, quais os objetivos a m\u00e9dio e longo prazos, hist\u00f3ria da empresa etc. Um briefing bem preenchido \u00e9 o primeiro passo para um projeto de sucesso<\/a>.<\/p>\n

 <\/p>\n

2. Envio do or\u00e7amento<\/h3>\n

Com base nas informa\u00e7\u00f5es do briefing, consigo saber quais as necessidades da empresa e quais funcionalidades teremos (formul\u00e1rios, sliders, galerias, dashboards, Google Maps, videos, m\u00e9todos de pagamento para e-commerce etc). Essa \u00e9 minha base para pesquisa de concorr\u00eancia, an\u00e1lise dos pontos fortes e fracos e quais as caracter\u00edsticas de mercado do cliente. Envio ent\u00e3o um or\u00e7amento\/contrato detalhado contendo descri\u00e7\u00e3o completa do servi\u00e7o, suas etapas, cronograma, valor e forma de pagamento.<\/p>\n

 <\/p>\n

3. Aprova\u00e7\u00e3o do or\u00e7amento<\/h3>\n

Assim que o cliente aprovar o or\u00e7amento, dou in\u00edcio aos trabalhos.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

4. Esbo\u00e7o do site: wireframe e layouts<\/h3>\n

O primeiro passo \u00e9 a constru\u00e7\u00e3o do wireframe, que \u00e9 um prot\u00f3tipo usado para sugerir a estrutura que o site ter\u00e1 e como ele vai se relacionar com as outras p\u00e1ginas (j\u00e1 falei sobre esse assunto aqui<\/a>).<\/p>\n

O wireframe define quais os assuntos priorit\u00e1rios, a localiza\u00e7\u00e3o ideal de cada elemento e a distribui\u00e7\u00e3o dos links em todo o site. Nesse ponto j\u00e1 temos uma ideia geral do conte\u00fado do site. \u00c9 o momento onde o cliente deve aprovar a estrutura do projeto.<\/p>\n

J\u00e1 os layouts s\u00e3o a transforma\u00e7\u00e3o do esbo\u00e7o (wireframe aprovado) em imagens. Aqui \u00e9 definida a identidade visual do site atrav\u00e9s da tipografia<\/a>, paleta de cores<\/a>, iconografia, fotos, textos etc.<\/p>\n

O primeiro layout a ser criado \u00e9 a Home<\/a>. Com ela aprovada, partimos para a cria\u00e7\u00e3o das p\u00e1ginas internas do site.<\/p>\n

 <\/p>\n

5. Aprova\u00e7\u00e3o do layout<\/h3>\n

Fase em que o cliente revisa os \u00faltimos detalhes gr\u00e1ficos apresentados.<\/p>\n

 <\/p>\n

6. Envio do conte\u00fado<\/h3>\n

Com os layouts aprovados, o cliente j\u00e1 pode enviar todo o conte\u00fado do site (fotos, textos, videos, documentos para download etc).<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

7. Desenvolvimento dos c\u00f3digos<\/h3>\n

Aqui o layout aprovado ser\u00e1 convertido em linguagem de programa\u00e7\u00e3o adequada a todos os navegadores. Tecnicamente \u00e9 dividida em duas partes: o desenvolvimento front-end<\/strong> (constru\u00e7\u00e3o de tudo o que podemos ver na tela como anima\u00e7\u00f5es, cores, disposi\u00e7\u00f5es de texto e imagem, campos etc) e o back-end<\/strong> (tudo o que ocorre nos bastidores do site e invis\u00edveis ao usu\u00e1rio: gerenciamento de banco de dados, seguran\u00e7a das informa\u00e7\u00f5es, integra\u00e7\u00e3o de sistemas etc).<\/p>\n

Durante o desenvolvimento do c\u00f3digo, o site fica dispon\u00edvel para navega\u00e7\u00e3o em um endere\u00e7o provis\u00f3rio, permitindo ao cliente acompanhar todo o processo.<\/p>\n

 <\/p>\n

8. Valida\u00e7\u00e3o<\/h3>\n

Com todos os c\u00f3digos desenvolvidos e conte\u00fados aplicados, \u00e9 a hora da valida\u00e7\u00e3o. Baseado na ferramenta de padroniza\u00e7\u00e3o do W3C, cons\u00f3rcio internacional que estabelece padr\u00f5es de qualidade para sites do mundo todo, ser\u00e3o analisados e corrigidos todos os c\u00f3digos do site. Para entender melhor, a valida\u00e7\u00e3o funciona como uma “an\u00e1lise gramatical” que verifica poss\u00edveis erros na linguagem de c\u00f3digo.<\/p>\n

 <\/p>\n

9. Aprova\u00e7\u00e3o final<\/h3>\n

\u00c9 a \u00faltima fase de verifica\u00e7\u00e3o e onde o cliente d\u00e1 o ok final para a publica\u00e7\u00e3o do site.<\/p>\n

 <\/p>\n

10. Publica\u00e7\u00e3o<\/h3>\n

Ap\u00f3s a aprova\u00e7\u00e3o final, \u00e9 hora de publicar o site. Isso envolve a contrata\u00e7\u00e3o de um dom\u00ednio (ex.: www.suaempresa.com.br) e tamb\u00e9m de uma hospedagem em servidores que tornar\u00e3o seu site vis\u00edvel para os usu\u00e1rios da web.<\/p>\n

—<\/p>\n

Cada projeto tem suas pr\u00f3prias demandas assim como cada designer tem seu pr\u00f3prio m\u00e9todo de trabalho. Aqui eu dividi em 10 fases com um tempo m\u00e9dio de produ\u00e7\u00e3o entre 45 e 60 dias.<\/p>\n

Ap\u00f3s a publica\u00e7\u00e3o, o mais indicado \u00e9 que o cliente fa\u00e7a um contrato de manuten\u00e7\u00e3o<\/strong> do site. Isso garante backups peri\u00f3dicos, suporte t\u00e9cnico, atualiza\u00e7\u00f5es, verifica\u00e7\u00f5es de v\u00edrus, entre outras tarefas. \u00c9 a garantia de que todo o trabalho ter\u00e1 continuidade e funcionamento perfeito.<\/p>\n

Saiba quanto custa a manuten\u00e7\u00e3o de um site<\/a> mensalmente.<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

A maioria dos clientes interessados em um novo site costuma me perguntar como \u00e9 o processo de cria\u00e7\u00e3o e quanto…<\/p>\n","protected":false},"author":1,"featured_media":16680,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[57],"tags":[9,10,5,11,44,19,32,45,17],"class_list":["post-16652","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-criacao-de-sites","tag-briefing","tag-criacao","tag-design-grafico","tag-pesquisa","tag-prototipo","tag-user-interface","tag-web-design","tag-wireframe","tag-wordpress"],"acf":[],"_links":{"self":[{"href":"https:\/\/agtdev3.com.br\/ale\/wp-json\/wp\/v2\/posts\/16652","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agtdev3.com.br\/ale\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/agtdev3.com.br\/ale\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/agtdev3.com.br\/ale\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/agtdev3.com.br\/ale\/wp-json\/wp\/v2\/comments?post=16652"}],"version-history":[{"count":4,"href":"https:\/\/agtdev3.com.br\/ale\/wp-json\/wp\/v2\/posts\/16652\/revisions"}],"predecessor-version":[{"id":18814,"href":"https:\/\/agtdev3.com.br\/ale\/wp-json\/wp\/v2\/posts\/16652\/revisions\/18814"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/agtdev3.com.br\/ale\/wp-json\/wp\/v2\/media\/16680"}],"wp:attachment":[{"href":"https:\/\/agtdev3.com.br\/ale\/wp-json\/wp\/v2\/media?parent=16652"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/agtdev3.com.br\/ale\/wp-json\/wp\/v2\/categories?post=16652"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/agtdev3.com.br\/ale\/wp-json\/wp\/v2\/tags?post=16652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}