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

marcadorNome da Empresa

  • CarlosHPS Vídeo-Locadora

marcadorRamo de Atividade

  • Vídeo Locadora

marcadorPontos Fortes:

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

marcadorObjetivo:

  • 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, 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:

Mapa de Site do Projeto Vídeo-Locadora
Fig. 01: Sitemap 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? :dizzy:

“Né nada”!

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

Wireframe básico
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:

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, 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 :cool:

Webtutoriais:34547DA3

Blog Widget by LinkWithin