Estudo de Caso dos Sites Sobre Design - Etapas e entregas na criação de um Site do ponto de vista do Design
Autor: Davi Fontebasso Marques de Almeida | Publicado: 2016-07-06T17:00:00-03:00

Nos últimos dias venho falando bastante sobre as "Etapas e entregas na criação de um Site" por meio de um estudo de caso de um projeto paradidático que realizei com os alunos do curso&nbsp;Design para Web - Produção e Criação&nbsp;do&nbsp;SENAC Itu.



Além do post sobre as Etapas em sim, fiz mais oito posts falando especificamente sobre uma etapa:


Briefing;

Criação de Conteúdo;
Rafe ou Wireframe;

Grids e Proporção;


Mockup:

Grids e Proporção;
Cores;
Tipografia;&nbsp;

Protótipo.


Eu sei que os posts não foram nesta ordem, mas esse pode ser um guia alternativo para leitura, e está mais de acordo com uma organização do ponto de vista da realização do projeto.



Falando em ordem, vamos aproveitar para falar da execução em si, não sei se você se recordam mas quando falei sobre as "Etapas de Criação" falei de pelo menos oito etapas divididas em três fases:






Levantamento de Dados: Abrange todas as ações realizadas visando entender e definir as necessidades do cliente e pode ter várias entregas:

Briefing: Provavelmente a principal entrega do Levantamento de Dados, é um documento definindo o que será o que, quando e como será produzido e pode conter vários documentos auxiliares:

Sitemap: Uma representação inteligível em formato textual ou gráfico da navegação do site;
Rafe: Literalmente um rascunho, a mão mesmo, com a ideia central do site, normalmente nem entra no briefing;
Wireframe: Um rascunho do layout do site, já com definições de posicionamento, mas sem preocupação com Design no sentido estético.&nbsp;


Criação e Design: A etapa em que acontecerá a produção da parte gráfica do site e pode ter vários momentos e diferentes entregas:

Definição de Layout: As entregas anteriores ao Design final, poderíamos dividi-la em etapas também:

Wireframe: Como já contem informações de posicionamento pode ser considerado o primeiro documento da Definição de Layout;
Mockup: Uma representação apenas gráfica do Design do site;
Protótipo: Um modelo com as caracteeristicas gráficas e interativas do site apenas para teste;


Codificação: Normalmente a etapa final, mas pode permear todo o processo dependendo da equipe e projeto, é literalmente codificar o site.

Protótipo:&nbsp;Principalmente quando o processo é desenvolvido em HTML e CSS pelo próprio Designer pode ser adotada uma metodologia de Prototipação Evolutiva e neste caso o protótipo já pode ser parte da codificação.



Vocês devem ter notado que no estudo de caso não abordamos todas essas fases, eu citei várias vezes que cada projeto, cada equipe, cada metodologia varia inclusive em etapas e entregas.








Então para este projeto as entregas foram um pouco diferentes. Na etapa de levantamento de dados Recebemos o Briefing e agregamos a este o Conteúdo e um Rafe (já com cálculos de Grids e Proporção), que foram depois utilizados no Mockup (também composto pelo&nbsp;estudo de Cores e Tipografia) e por fim a produção do Protótipo: layoutweb.esy.es. Em nosso projeto não foi realizada a codificação.

Nos posts anteriores discutimos todas essas etapas, uma a uma, as principais dicas estão nas imagens abaixo (clique na imagem para ver o post completo):












Leia também:

Etapas e entregas na criação de um Site do ponto de vista do Design;
Briefing - Caso dos Sites Sobre Design - Etapas e entregas na criação de um Site do ponto de vista do Design;
Criação de Conteúdo - Caso dos Sites Sobre Design - Etapas e entregas na criação de um Site do ponto de vista do Design;
Rafe ou Wireframe - Caso dos Sites Sobre Design - Etapas e entregas na criação de um Site do ponto de vista do Design;
Wireframe (Grids e Proporção) - Caso dos Sites Sobre Design - Etapas e entregas na criação de um Site do ponto de vista do Design;
Mockup (Cores) - Caso dos Sites Sobre Design - Etapas e entregas na criação de um Site do ponto de vista do Design;
Mockup (Tipografia) - Caso dos Sites Sobre Design - Etapas e entregas na criação de um Site do ponto de vista do Design;
Mockup - Caso dos Sites Sobre Design - Etapas e entregas na criação de um Site do ponto de vista do Design;
Protótipo - Caso dos Sites Sobre Design - Etapas e entregas na criação de um Site do ponto de vista do Design.



Adicionar aos favoritos

Página inicial


Estrada da Informação de Davi Fontebasso Marques de Almeida é licenciado sob uma Licença Creative Commons Atribuição-CompartilhaIgual 3.0 Não Adaptada.