O processo de criação de sites - Criando o design

  • Publicado em: 03/06/2013
  • Revisado em: 15/08/2013
  • Categoria(s)Planejamento
  • Autor: Ricardo Bernardi
  • Newsletter: Inscreva-se

Sejam todos bem vindos(as) a mais um artigo da série "O processo de criação de sites". Nesta série vamos abordar as etapas necessárias para o desenvolvimento de um site com a finalidade de ajudar, principalmente os novos desenvolvedores, a obterem êxito em seus primeiros trabalhos.

Neste momento, depois de definidas todas as funcionalidades e tecnologias, é hora de iniciar a criação do design do site, ou seja, o layout. Porém muitas pessoas pulam um pequena etapa, uma vez que a criação de um bom layout passa por dois estágios: o wireframe e o layout propriamente dito.

Vamos falar um pouco sobre cada um desses estágios a partir de agora.

Criando um wireframe

O wireframe é um guia visual que ajuda a identificar a estrutura principal e também o posicionamento de todos os elementos em tela. Poderíamos resumir dizendo que o wireframe é um rascunho do layout final, gerando assim uma ilustração do site antes mesmo de iniciar a criação do layout (Wikipedia).

A criação de um wireframe pode ser feita com papel e caneta ou até mesmo usando softwares e ferramentas online, e pode apresentar diferentes níveis de qualidade/detalhamento, veja:

  1. Wireframe desenhado a mão
  2. Wireframe com software (básico)
  3. Wireframe com software (detalhado)

Um wireframe não é útil só para orientar o desenvolvedor durante o processo de criação, antes disso ele pode servir para apresentar o projeto ao cliente, para que este aprove a estrutura do site (disposição dos elementos) antes mesmo de iniciar a criação do mesmo.

Criando o layout

Após a criação do wireframe, e estando ele aprovado pelo cliente é hora de transformar o rascunho em layout. Agora sim você vai utilizar algum aplicativo de design, preferencialmente Photoshop ou Adobe Fireworks para desenhar a interface do site tal e qual ela será depois de ter concluído o site.

Durante a criação do layout final, o resultado pode até sofrer pequenas alterações em relação ao wireframe, mas em sua grande maioria irá manter a estrutura previamente definida. Podemos ver um exemplo na imagem a seguir:

wireframe-1

Com o layout pronto, é hora de fazer a conversão da imagem final para uma página em HTML e CSS. Aqui não entra nenhum tipo de programação, o objetivo desta etapa é única e simplesmente deixar o HTML pronto e estruturado para receber toda programação na sequência.

Após estas duas etapas serem concluídas, podemos dizer o design do nosso site está pronto para avançar ao próximo estágio, a programação na linguagem escolhida.

Mais posts desta série

Este post faz parte de uma série, confira tudo que já foi publicado sobre o mesmo assunto.

Compartilhe esse post:

Sobre o autor

Ricardo Bernardi

Sou técnico em hardware e desenvolvedor web, e sobre estes dois assuntos comecei a compartilhar aulas e artigos, tornando-me blogueiro em 2008. Em 2010 esse hobby virou profissão, e desde então tenho buscado melhorar e profissionalizar cada vez mais os projetos que mantenho na web.

Comentários

Atualmente temos 3 comentários para este post. Participe você também, clique aqui e comente sobre o assunto.

  • Danilo Benigno comentou em

    Muito bons seus artigos. Linguagem simples e objetiva. Agradeço o conteudo e te parabéniso pelo bom trabalho!

    Responder
  • jose glodoaldo sotoski comentou em

    cara muito bom mesmo . esta sendo de grande valia para mim estas dicas pois estou fazendo um projeto de um site para conclusão do meu curso tem coisas que ele não passam no curso que estou vendo aqui gostaria se que vcs colocassem algumas videos aula desde a parte grafica até a parte de programação html css mysql php java ajax essa coisas .

    Responder

Deixe seu comentário