Criando um Site Passo a Passo: Parte 5

Olá, pessoal.

Continuando a série “Criando um Site Passo-a-Passo“, após termos visto alguns conceitos importantes, vamos colocar a “mão na massa” a partir de agora.

Simularemos aqui, a criação de um site para uma locadora de vídeo, ok? Então vamos lá.

1º – BRIEFING

Nome da Empresa

  • CarlosHPS Vídeo-Locadora

Ramo de Atividade

  • Vídeo Locadora

Pontos Fortes:

  • Atendimento
  • Promoções constantes
  • Entrega em domicílio
  • Catálogo virtual

Objetivo:

  • Disponibilizar o acervo de DVD’s da CarlosHPS Vídeo-Locadora aos seus clientes e usuários em geral da Internet.

Este seria um breve resumo do briefing da empresa. De posse dessas informações, faz-se uma pesquisa de no mínimo 10 sites concorrentes ou não, do mesmo ramo de atividade para se ter uma noção do que já se aplica na web. Sem esquecer de também solicitarmos ao cliente, peças publicitárias, manual de identidade visual e tudo o que for possível para a complementação do nosso conhecimento da empresa.

2 – MAPA DE SITE (Sitemap)

Como também foi visto na 3ª parte desta série (Criando um Site Passo-a-Passo: Parte 3), após esta pesquisa, criamos um esquema que será manuseada e compreendida pelo cliente e pela equipe envolvida na implementação do projeto.

Um mapa de site é a representação gráfica da estrutura de um website, do ponto de vista da distribuição do conteúdo através de páginas e do caminho mais simples (links) a ser percorrido pelo usuário para chegar à página desejada.

Vejamos como ficou o mapa da CarlosHPS Vídeo-Locadora:

Fig. 01: Mapa do site da CarlosHPS Vídeo-Locadora

Fig. 01: Mapa do site da CarlosHPS Vídeo-Locadora

3 – WIREFRAME

Digamos que seja o “primo pobre” do layout…rsrs

O wireframe é um “esqueleto”; uma estrutura simples que nos auxilia na produção do site, tornando o processo mais ágil, padronizada e eficiente. Seu maior objetivo é determinar onde cada conteúdo se encaixará no site, levando em consideração o grau de importância com relação aos demais objetos que comporão o layout como um todo.

Complicado?

“Né nada”!

Veja o exemplo do wireframe básico do nosso projeto:

Fig. 02: Wireframe básico da CarlosHPS Vídeo-Locadora

Fig. 02: Wireframe básico da CarlosHPS Vídeo-Locadora

Lembrando que é uma estrutura básica. Caso haja necessidade, podemos detalhar mais. Fica a critério da situação.

É isso aí, pessoal.

O site a ser montado terá este layout:

Fig. 03: Layout do site da CarlosHPS Vídeo-Locadora

Fig. 03: Layout do site da CarlosHPS Vídeo-Locadora

Quem desejar criar seu próprio mapa de site e wireframe e quiser me enviar pra eu dar uma olhadinha, fiquem à vontade.

Próximo artigo (Criando um Site Passo a Passo: Parte 6), veremos sobre o fatiamento do layout da CarlosHPS Vídeo-Locadora e como montar sua estrutura básica em HTML e CSS.

Até lá.

CarlosHPS Webdesigner 8)

Anúncios

Deixe um comentário

Faça o login usando um destes métodos para comentar:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s