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.
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:
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.
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:
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.
Este post faz parte de uma série, confira tudo que já foi publicado sobre o mesmo assunto.
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.
Atualmente temos 3 comentários para este post. Participe você também, clique aqui e comente sobre o assunto.
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 .
Respondermuito bom cara !
Responder
© 2008-2023 - RBTech.info | Todos os direitos reservados | Hospedado por Innova Host
É proibida a reprodução total ou parcial de qualquer conteúdo deste site.
Muito bons seus artigos. Linguagem simples e objetiva. Agradeço o conteudo e te parabéniso pelo bom trabalho!