Nome da Loja - Frase da Lojamaterial.eamais.com.br/doc.pdf · Author user Created Date 2/12/2014 9:48:08 AM

PROJETO DE WEB SITE PARA LOJA DE MATERIAIS DE CONSTRUÇÃO

São Lourenço do Oeste – SC

Fev. 2014

Sumário SITE EAMAIS MATERIAIS DE CONSTRUÇÃO ......................................................................................................... 3

INICIO ............................................................................................................................................................... 5

Banner Principal .......................................................................................................................................... 5

Botões de Redirecionamento Rápido .......................................................................................................... 6

Mini-Banners de Redirecionamento ........................................................................................................... 6

Marcas ....................................................................................................................................................... 10

Rodapé ....................................................................................................................................................... 11

SOBRE ............................................................................................................................................................ 12

PRODUTOS ..................................................................................................................................................... 14

PROMOÇÕES.................................................................................................................................................. 21

SERVIÇOS ....................................................................................................................................................... 23

CONTATO ....................................................................................................................................................... 24

SITE EAMAIS MATERIAIS DE CONSTRUÇÃO

Página Inicial da loja materiais de construção:

Imagem 1: Página Inicial

FONTE: Maicon Machado (fev. 2014).

4

Esta página (Imagem 1) será aberta em seu navegador utilizando seu endereço de

dominio (www.seudominio.com.br).

No topo do site, encontra seis botões de navegação. Estes por sua vez, apareceram em

todas as páginas do site (não apenas na página inicial).

Imagem 2: Botões do topo

FONTE: Maicon Machado (Fev.2014).

Como visto na Imagem 1 e Imagem 2, os seis botões são:

INICIO;

SOBRE;

PRODUTOS;

PROMOÇÕES;

SERVIÇOS;

CONTATO.

http://www.seudominio.com.br/

5

INICIO

Clicando neste botão, ele o redirecionará a página principal (tela vista na Imagem 1), e

listara todos seus itens da página como:

Banner Principal;

Botões de Redirecionamento Rápido;

Mini-Banners de Redirecionamento;

Marcas;

Rodapé.

Banner Principal

Como pode ser visto na Imagem 1, o Banner Principal aparecerá no inicio da página,

facilitando assim a vizualização do usuário.

Imagem 3: Banner Principal


Como observado na Imagem 3, o Banner Principal é constituido de uma imagem de

fundo, um título (teste2 usado como exemplo nesta imagem), uma breve introdução (sublinha

em cor branca como visto na imagem) e um botão “VER MAIS” que redireciona a uma

página pré determinada pelo admistrador ou pessoa responsável por alimentar o sistema, que

por sua vez (o sistema) disponibiliza Cadastra, Alterar e Excluir de 1 a n Banner Principal (

6

caso contenha mais que um Banner Principal cadastrado, estes aparecererão depois de um

determinado tempo no lugar do atual ou caso o usuário clic nas flechas encontradas a direita

ou a esquerda do banner).

Botões de Redirecionamento Rápido

Botões que serão utilizados pelo usuário para o redirecionamento rápido das seguintes

páginas ( como pode ser vizualizado na Imagem 4):

Imagem 4: Botões de Redirecionamento Rápido


PRODUTOS;

PROMOÇÕES;

SERVIÇOS.

O botão de PRODUTOS irá encaminhar o usuário a página principal de produtos da

loja, onde encontrará uma infinidade de produtos cadastrados, no qual será explicado mais a

seguir.

PROMOÇÕES, neste botão o usuário será redirecionado à todos os produtos que estão

em promoção, mas seus detalhes serão vistos mais à diante.

E por fim o botão SERVIÇOS, que mostrará em sua páginas os serviços de pessoal

técnico disponibilizado pela loja.

Mini-Banners de Redirecionamento

7

Nesta parte da Página são encontrados seis itens (como mostra a imagem a seguir),

cada qual redireciona a sua respectiva página.

Imagem 5: Mini-Banners de Redirecionamento

FONTE: Maicon Machado (Fev. 2014).

A imagem, o titulo e a breve introdução desses seis itens pode ser alterada da maneira

desejada, porém é imposivel excluir um iten e cadastrar outros, o número fixo de itens é seis.

A passar o ponteiro do mouse sobre um desses itens (Imagem 6) o mesmo será

sublinhado e um botão escrito “VEJA MAIS” será mostrado.

8

Imagem 6: Mini-Banner selecionado


Ao clicar em “VEJA MAIS” o usuário será redirecionado a página (link que será

cadastrado pelo administrador) do Mini-Banner que clicou. A imagem 7 mostra o padrão de

página dos Mini-Banners, mas nada impede que o administrador cadastre um link de um blog

por exemplo ou qualquer outro.

9

Imagem 7 :Padrão de páginas do Mini-Banner

FONTE: Maicon Machado (Fev.2014).

No sistema o Administrador ou Mantedor de conteudo poderam cadastrar de um a ‘n’

artigos nesta página, basta ter um titulo e um texto, a imagem é colocada a criterio de cada

um, não é obrigatoria, mas uma imagem muda todo um contéudo.

Os conteudos cadastrados de seus respectivos Mini-Banners apareceram listados a

esquedar na página, a clicar em um, ele ficara mais destacado que os outros.

10

O topo e o rodapé fica o mesmo da página inicial (imagem 1). A única coisa que

aparece agora é um pequeno menu de ‘orientação’ como pode ser visto na Imagem 7 e

Imagem 8, para que usuário saiba em que página está e que conteúdo está vendo.

Imagem 8: Menu de ‘Orientação’


Marcas

Como foi visto na Imagem 1 e agora na Imagem 9, apareceram as imagem das marcas

cadastrada no sistema.

Imagem 9: Marcas


As imagens seram passadas uma atraz da outra vagarosamente, mas também é

possivel passalas da maneira desejada (indo e voltando), isto ocorre clicando nas fechas

cinzas que se encontram no lado direito superior. Clincando na fleca do lado esquerdo,

apareceram as imagem vindo do lado esquerto, e cliando na flecha do lado direito o oposto

acontece.

11

Rodapé

O Rodapé aparecerá em todas as páginas, sempre o mesmo rodapé, mas não é um

simples rodapé, este por sua vez possui caracteristicas unicas e especiais como mostra a

Imagem 10.

Imagem 10: Rodapé


Como visto na Imagem 10 estas caracteristicas são:

Texto no rodapé;

Integração com o Facebook;

Cadastro na Newsletter.

O texto do rodapé poderá ser cadastrado pelo administrador do site, onde precisará

apenas de um titulo e um texto.

Integração com o Facebook será utilizado pelo usuário caso o mesmo deseje curtir ou

achar a página do site no facebook, muito util já que o Facebook é um ótimo meio de fazer

plublicidade.

Em cadastro de Newsletter, o usuário colocará seu email e clicara em “ENVIAR” se

ele quiser receber quaisquer emails que o administrador do site enviar, mas isso será visto e

explicado melhor posteriormente.

12

SOBRE

Como visto na Imagem 2, ao clicar no botão SOBRE a página que fornece as

informações da empresa (como visão, missão e historia da empresa) será aberta.

Imagem 11: Página Sobre


Se observar bem a Imagem 11, verá que é bastante semelhante a Imagem 7, isto ocorre

por que estas duas páginas (assim como outras do Mini-Banner) possuem o mesmo padrão,

uma técnica de engenharia de software aplicada a sistema web de qualidade.

13

Os itens que apareceram nesta páginas podem ser cadastrados no sismema de 1 a “n”

itens, utilizando cadastro de titulo, imagem (se necessário) e texto.

14

PRODUTOS

Após clicar no botão PRODUTOS (Imagem 2), a seguinte página será aberta:

Imagem 12: Página Produtos


15

Está é a página de produtos (Imagem 12), como pode ser visto, à um menu a esquerda

da imagem, este é responsável para filtrar os produtos em categorias, como não foi

selecionado nenhum, todos os produtos seram mostrados.

-Mas por que aparece apenas 6 itens se é para mostrar todos?

R: Isto ocorre por que exite uma páginação, como mostra a Imagem 13.

Imagem 13: Páginação

FONTE: Maicon Machado

Observe que a o numero da página se encontra no 1, caso o usuário clica-se em

“Próximo” ou em qualquer outro número, outros itens seriam mostrados.

Se o usuário desejar um produto especifico, basta ele clicar em uma derteminada

categoria (esta cadastrada pelo administrador no sistema) que abrirá outras subcategoria, e

então apareceram seus respectivos produtos (veja a Imagem 14 e Imagem 15 para endender

melhor).

16

Imagem 14: Categoria


As categorias cadastradas apareceram listadas uma em baixo da outra, se nenhuma for

selecionada elas apareceram assim (fechadas com um simbolo de “+”) que significam que

poderam ser clicadas para aparecem suas subcategorias, se forem clicadas apareceram abertas

(com um sinal de “-“) mostrando suas subcategorias como mostra a Imagem 15.

17

Imagem 15: Subcategoria


A Imagem 15 neste exemplo, o usuário clicou na categoria “FERRAMENTAS” e

depois na subcategoria “Ferramentas Manuais”, com isto mostrou apenas os produtos que

correspondem a essas categorias (veja a diferença da Imagem 15 e da Imagem 12).

Observa-se também que o número de páginas agora é só um (1), isto acontece pois

não à outras páginas com itens que se encaixem com essas categorias.

18

Após a filtragem dos produtos, se o usuário predente ver todas as informações do

produto, basta ele passar o mouse em cima do produto desejado (Imagem 16) e clicar em

“VER MAIS”.

Imagem 16: Ver Produto


Ao clicar em “VER MAIS” a página do produto escolhido será aberta (Imagem 17).

19

Imagem 17: Página Produto Escolhido


20

Na página do produto que o usuário escolheu aparece quatro campos bem importantes,

que são:

Imagens do produto;

Titolo e texto do produto;

Detalhes e informações tecnicas do produto;

Produtos relacionados.

Nas imagens do Produto, o administrador cadastrará de 0 à até 3 imagens do produto,

que apareceram nesta página, neste exemplo as três imagens estão cadastradas, então é

possivel clicar em qualquer uma delas para vizualizar melhor o produto.

Titolo e texto, nesta área, foi cadastrada o nome e um textinho sobre o produto em si,

claro que o tamanho do texto vai da pessoa que cadastrou o produto. Vale destacar que este

texto pode ser ‘curtido’ e conpartilhado pelo facebook se o usuário desejar.

Em Detalhes aparecerá um texto detalhando melhor sobre o produto do que no texto

anterior, e no campo ao lado “informações técnica”, ao clicado subtituira o texto de

“Detalhes” e mostrara o texto das respectivas informações tecnicas cadastradas para este

produto escolhido.

Mais abaixo (Vizualizando a Imagem 17) exite o campo “Produtos Relacionados”,

este campo mostra até quatro produtos que se encaixem com a mesma categoria do produto

escolhido, este produtos poderam ser clicados (como ocorreu na Página de produtos Imagem

15 e Imagem 16, para abrir o produto escolhido pelo usuário) para ver o produto.

21

PROMOÇÕES

Semelhante a Página de Produtos (Imagem 12), porem este aparecerá apenas os

produtos que foram cadastrados em Promoção, mostrando assim seus valores.

Imagem 18: Página Promoções


22

A ideia dos filtros de categoria é a mesma da Página de Produtos (Imagem 12), caso

nenhum filtro seja escolhido aparecerão todos os produtos, caso escolha uma categoria e

subcategoria, aparecerá os produtos em promoção dessa respectiva categoria escolhida.

Caso o usuário escolha um produto em promoção, irá abrir a mesma tela da imagem

17, porem agora aparecerá o campo de valores à mais.

Imagem 19: Valores

FONTE: Maicon Machado

Note que aparece agora, os valores anteriores da promoção e o valor atual na

promoção, também aparece até quando está promoção permanecerá (acima do nome do

produto).

23

SERVIÇOS

Ao clicar em SERVIÇO (Imagem 2) a seguinte página abrirá:

Imagem 20: Página Sobre


Os menus a esquerda são semelhantes a Página de Produtos (Imagem 12), o usuário

seleciona a categoria que encaixa no serviço desejado, e depois escolhe o serviço, aparecendo

então o titulo do serviço (cadastrado no sistema) e o texto referente ao serviço escolhido.

24

CONTATO

Este botão (CONTATO, Imagem 2) redimenciona o usuário à página para contato

com a empresa (Imagem 21), que por sua vez é constituida de quatro partes

fundalmentalmente importantes.

Imagem 21: Página Contato


25

Estas Quatro partes são:

Campo de contato;

Campo de atendimento;

Campo de endereço;

Campo de contato online;

No campo de contato (Imagem 22), o usuário poderá enviar um email para contatar a

empresa.

Imagem 22: Campo Contato


Neste campo o usuário fornecerá seu Nome*, E-mail*, Telefone e escreverá sua

menssagem em “Sua mensagem vai aqui....”. Após estes campos preenchido, o usuário clica

em “ENVIAR”, com isto feito a mensagem do usuário será enviada para o email cadastrado

pelo administrador para receber emails do site.

Em atendimento (imagem 23). Mostra os dias da semana e os horários de atendimento

da empresa.

26

Imagem 23: Campo Atendimento


Este campo é importante para o usuário/cliente saber qual o melhor dia para enviar

emails ou até mesmo ser atendido online.

Já o campo de endereço (Imagem 24), é apenas um campo para informar o local onde

fica este estabelecimento, telefone, fax, email (outro email de contato) da empresa, bastante

util para novos cliente, pois este possui integração com o Google Maps.

Imagem 24: Campo de Endereço


27

Pode ser observado que o local onde fica a empresa aparece com um balazinho

apontando no mapa.

Por fim, o campo de contato (Imagem 25) online é utilizado pelo usuário para a

comunicação direta com a empresa (atendente da comunicação online), no qual poderá tirar

duvidas ou entra em contato para diversos fins em tempo real.

Imagem 25: Campo de Contato Online


Ao clicar em “ATENDIMENTO ONLINE” a seguinte tela ira abrir:

28

Imagem 26: Tela de Contato Online


Nesta etapa, o usuário fornecerá alguns dados utilizados pelos atendentes online, e

escolherá o “Departamento” que necessita entra em contato o mais breve possivel. Feito isso,

começa a conecxão com o chat. A Imagem 27 ilustra claramento como é feito este chat.

29

Imagem 27: Página de Chat


Na Imagem 26 foi usado um exemplo de colecxão do usuário (Pedro) com o atendente

(neste caso do site da ‘eamais.com.br’ no departamento de suporte), à tela de chat é bastante

semelhante à alguns chats de redes sociais, tornando a utilização do sistema ainda mais

cofortante ao usuário.

Documents

Nome da Loja - Frase da Lojamaterial.eamais.com.br/doc.pdf · Author user Created Date 2/12/2014 9:48:08 AM