oenobiol
Post on 23-Mar-2016
214 Views
Preview:
DESCRIPTION
TRANSCRIPT
MANUAL DE IDENTIDADE DO SITE
1. Arquitetura de informação 1
1.1 - Macroestrutura 2
1.2 - Microestrutura 3
2. Layout 14
2.1 - Telas 15
2.2 - Resolução 31
2.3 - Header 32
2.1 - Cores 33
2.1 - Fontes 34
3. Conteúdo 35
4. Programação 37
4.1 - Front-end 38
4.2 - Back-end 41
ÍNDICE
ARQUITETURA
MACROESTRUTURA
2
SITEMAP
HOMEÁrea principal com destaque randomico dos quatro produtos comercializados, atualizado via administrador. Três destaques de menor peso com chamada para as seções internas.
ONDE COMPRARMapa interativo, possibilidade de digitar algum endereço, e visualizar as redes autorizadas de vendas mais proxima.
NA MÍDIAConteudo sobre Oenobiol Paris que saiu nas Midias e com o conteúdo para download.
CADASTRE-SEPágina simples de cadastro, para captação de mailing.
FALE CONOSCOPagina com formulário simples (nome, e-mail, assunto e mensagem) e telefone.
A MARCAConteúdo sobre a marca e a Idealizadora do Oenobiol Paris doutora Marie Béjot (imagem, texto, video).
PRODUTOSÁrea para exposição dos produtos a ser vendido.
SEU CORPODicas de cuidados com o corpo, video e texto.
USEI E GOSTEIComentários de pessoas que usam os produtos Oenobiol, pré-aprovado por um administrador.
PROMOÇÕESÁrea para divulgação
DICAS & TENDÊNCIASÁrea com 3 seções de informações atualizadas constantemente:- Dicas de Paris: Dicas para pessoas que querem conhecer lugares em Paris, dividido por categorias, para facilitar busca de assuntos.- Dicas de Beleza: Assuntos sobre beleza, atualizado constantemente por um administrador.- Atmosfera feminina: Ultimas máterias postadas no blog "Atmosfera Feminina.
PROGRAMA DE FIDELIDADEExplica como funciona o programa de fidelidade, e como participar.
MENU DE APROXIMAÇÃO COM A MARCA
MENU DE EXPOSIÇÃO E CONTATO COM OS PRODUTOSHOME
Onde comprar Na mídia Cadastre-se Fale conosco
A Marca Produtos Seu Corpo Usei e Gostei PromoçõesDicas &
TendenciasPrograma de
Fidelidade
MICROESTRUTURA
3
HOME
Áreas como o header e o footer são imutaveis em todas as paginas deste site.A home conta com uma área principal para destacar os quatro produtos a serem vendidos no Brasil, com link para a pagina interna, com informações completas do produto.Em segunda importancia temos tres destaques, de interesse do usuário.O link de “Cadastre-se” do menu, abre um box com informações para cadastramento, com os campos (nome, email, data de nascimento e telefone).
MICROESTRUTURA
4
MARCA
Interna com informações sobre a marca e sua fundadora, contando com o maior numero de informações multimidia possivel (vídeo, texto e imagem).
MICROESTRUTURA
5
PRODUTOS
Esta página ilustra o padrão usado para os quatro produtos, Radiance, Solare, Magnifique, Veloute.Imagem do produto em questão, menu de navegação interna com mais informações , neste caso são quatro itens.O conteúdo do item selecionado em exposição à direita do produto.
MICROESTRUTURA
6
USEI E GOSTEI
Sugestão de dois passos simples para o usuário colocar o depoimento do uso do produto no site, o primeiro passo é escolher qual produto o usuário utilizou. O segundo e preencher o formulario, e contar sua experiencia.Os depoimentos de outras pessoas serão expos-tos ao lado direito.
MICROESTRUTURA
7
DICAS DE PARIS
Em dicas e tendências temos tres seções inter-nas:- Dicas de Paris- Dicas de beleza- Atmosfera femininaEstas tem a mesma estrutura de exposição da informação, e sistema de navegação.Sendo o menu “de categorias” na parte superior, tres destaques principais abaixo, e a lista de matérias.
MICROESTRUTURA
8
DICAS DE PARIS - INTERNA
Mostrar claramente o item selecionado no menu, em exibição somente matérias do item selecionado, três destaques e dois subd-estaques, o excedente deve ser mostrado em forma de lista.
MICROESTRUTURA
8
DICAS DE BELEZA
Seguindo o mesmo padrão de navegação da seção dicas de Paris, para facilitar o reconheci-mento do usuário, mantendo a identidade na navegação.
MICROESTRUTURA
9
ATMOSFERA FEMININA
Seguindo o mesmo padrão de navegação da seção dicas de Paris, para facilitar o reconheci-mento do usuário.
MICROESTRUTURA
10
PROGRAMA DE FIDELIDADE
Página para exposição e explicação do programa de fidelidade adotado no Brasil.
MICROESTRUTURA
11
ONDE COMPRAR
Página para encontrar um loja autorizada mais proximo do lugar do usuário, podendo fazer uma busca por CEP, ou filtro por estado, exibindo uma lista com o endereço a esquerda, e um mapa à direita.
MICROESTRUTURA
12
NA MIDIA
Página para divulgar as mat´rias e notas sobre Oenobiol na midia
MICROESTRUTURA
13
FALE CONOSCO
Página de contato com a Oenobiol, com formu-lário para esclarecimento, dicas e sugestões.
LAYOUT
LAYOUT
15
HOME
A Home do site Oenobiol Paris contempla tudo o que é mais importante ao usuário de forma clara e resumida.Com cada elemento muito bem distribuído,os produtos já aparecem de forma explícita, com uma breve descrição e junto à imagem referente ao mesmo, abrangendo quase que totalmente o cenário e visando causar a melhor impressão logo ao primeiro impacto.
Visualização do produto Magnifique, junto à sua imagem correspondente.
LAYOUT
16
HOME
A Home do site Oenobiol Paris contempla tudo o que é mais importante ao usuário de forma clara e resumida.Com cada elemento muito bem distribuído,os produtos já aparecem de forma explícita, com uma breve descrição e junto à imagem referente ao mesmo, abrangendo quase que totalmente o cenário e visando causar a melhor impressão logo ao primeiro impacto.
Visualização do produto Velouté, junto à sua imagem correspondente.
LAYOUT
17
HOME
A Home do site Oenobiol Paris contempla tudo o que é mais importante ao usuário de forma clara e resumida.Com cada elemento muito bem distribuído,os produtos já aparecem de forma explícita, com uma breve descrição e junto à imagem referente ao mesmo, abrangendo quase que totalmente o cenário e visando causar a melhor impressão logo ao primeiro impacto.
Visualização do produto Solaire, junto à sua imagem correspondente.
LAYOUT
18
HOME
A Home do site Oenobiol Paris contempla tudo o que é mais importante ao usuário de forma clara e resumida.Com cada elemento muito bem distribuído,os produtos já aparecem de forma explícita, com uma breve descrição e junto à imagem referente ao mesmo, abrangendo quase que totalmente o cenário e visando causar a melhor impressão logo ao primeiro impacto.
Visualização do produto Radiance, junto à sua imagem correspondente.
LAYOUT
19
MARCA
Nesta área interna do site Oenobiol Paris, temos um header com o título referente ao assunto, e logo abaixo, dividido de forma clara e “clean”, seu texto descritivo.
Abaixo, em seu rodapé, sempre mantemos o Packshot dos produtos, para fácil e rápido acesso.
LAYOUT
20
PRODUTOS
Nesta área interna do site Oenobiol Paris, temos um header com o título referente ao assunto, com o produto e a imagem referente à ele, e logo abaixo, dividido de forma clara e “clean”, seu texto descritivo e mais links para detalhamentos do produto.
Abaixo, em seu rodapé, sempre mantemos o Packshot dos produtos, para fácil e rápido acesso.
Visualização do produto Radiance.
LAYOUT
21
PRODUTOS
Nesta área interna do site Oenobiol Paris, temos um header com o título referente ao assunto, com o produto e a imagem referente à ele, e logo abaixo, dividido de forma clara e “clean”, seu texto descritivo e mais links para detalhamentos do produto.
Abaixo, em seu rodapé, sempre mantemos o Packshot dos produtos, para fácil e rápido acesso.
Visualização do produto Solaire.
LAYOUT
22
PRODUTOS
Nesta área interna do site Oenobiol Paris, temos um header com o título referente ao assunto, com o produto e a imagem referente à ele, e logo abaixo, dividido de forma clara e “clean”, seu texto descritivo e mais links para detalhamentos do produto.
Abaixo, em seu rodapé, sempre mantemos o Packshot dos produtos, para fácil e rápido acesso.
Visualização do produto Magnifique.
LAYOUT
23
PRODUTOS
Nesta área interna do site Oenobiol Paris, temos um header com o título referente ao assunto, com o produto e a imagem referente à ele, e logo abaixo, dividido de forma clara e “clean”, seu texto descritivo e mais links para detalhamentos do produto.
Abaixo, em seu rodapé, sempre mantemos o Packshot dos produtos, para fácil e rápido acesso.
Visualização do produto Velouté.
LAYOUT
24
USEI E GOSTEI
Nesta área interna do site Oenobiol Paris, temos um header com o título referente ao assunto, e logo abaixo, dividido de forma clara e “clean”, uma área onde suas consumidoras poderão postar relatos sobre a utilização de determinado produto.
Abaixo, em seu rodapé, sempre mantemos o Packshot dos produtos, para fácil e rápido acesso.
LAYOUT
25
DICAS & TENDÊNCIAS
Nesta área interna do site Oenobiol Paris, temos um header com o título referente ao assunto, e logo abaixo, dividido de forma clara e “clean”, uma área de dicas sobre determinados assuntos, onde serãoatualizados constantemente.
Abaixo, em seu rodapé, sempre mantemos o Packshot dos produtos, para fácil e rápido acesso.
LAYOUT
26
DICAS & TENDÊNCIAS
Nesta área interna do site Oenobiol Paris, temos um header com o título referente ao assunto, e logo abaixo, dividido de forma clara e “clean”, uma área de dicas sobre determinados assuntos, onde serãoatualizados constantemente.
Abaixo, em seu rodapé, sempre mantemos o Packshot dos produtos, para fácil e rápido acesso.
LAYOUT
27
DICAS & TENDÊNCIAS
Nesta área interna do site Oenobiol Paris, temos um header com o título referente ao assunto, e logo abaixo, dividido de forma clara e “clean”, uma área de dicas sobre determinados assuntos, onde serãoatualizados constantemente.
Abaixo, em seu rodapé, sempre mantemos o Packshot dos produtos, para fácil e rápido acesso.
LAYOUT
28
PROGRAMA DE FIDELIDADE
Nesta área interna do site Oenobiol Paris, temos um header com o título referente ao assunto, e logo abaixo, dividido de forma clara e “clean”, seu texto explicativo.
Abaixo, em seu rodapé, sempre mantemos o Packshot dos produtos, para fácil e rápido acesso.
LAYOUT
29
ONDE COMPRAR
Nesta área interna do site Oenobiol Paris, temos um header com o título referente ao assunto, e logo abaixo, dividido de forma clara e “clean”, um mapa de localização dos diversos pontos de venda dos produtos.
LAYOUT
30
FALE CONOSCO
Nesta área interna do site Oenobiol Paris, temos um header com o título referente ao assunto, e logo abaixo, dividido de forma clara e “clean”, um canal de contato dos consumidores com a empresa.
Abaixo, em seu rodapé, sempre mantemos o Packshot dos produtos, para fácil e rápido acesso.
LAYOUT
31
RESOLUÇÃO
Adaptação de forma amigável para as diferentes resoluções dos usuários.
1024 x 768
1905 x 1080
LAYOUT
32
CROSSLINK + RODAPÉ
COMPARTILHAMENTO
Todas as páginas possuem um Crosslink de produtos, destacando toda a linha da Oenobiol Paris.
Links de Redes Sociais para compartilhamento com fácil acesso, localizado em todo canto inferior direito.
HEADER
Menu principal com dropdown dos produtos com diferenciação de cores.
Busca rápida em todo o site.
LAYOUT
33
CORES
RADIANCE #f79c88
SOLAIRE #fdbb30
MAGNIFIQUE #6db33f
VELOUTE #79bde8
Barra de Menu e corpo de texto #333333
FONTES
34
ABCDEFGHIJKLMNOPQRSTUVW abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
TÍTULO: LATO HAIRLINE 51PX
TÍTULO DA PÁGINA: LATO LIGHT 30PX
MENU PRINCIPAL: UBUNTU CONDENSED 16PX
MENU INSTITUCIONAL: UBUNTU CONDENSED 12PX
CORPO DE TEXTO: ARIAL REGULAR 12PX
CONTEÚDO
CONTEÚDO
36
COMUNICAÇÃO COM O PÚBLICO
A proposta é apresentar o produto, de forma simples e objetiva, informando aos consumidores as características e propriedades de cada produto da linha, sua ficha técnica, utilização, etc.
O tom do texto é amigável, dinâmico, sem barreiras entre nós e a consumidora, criando uma intimidade saudável.
PROGRAMAÇÃO
FRONT-END
38
TECNOLOGIAS UTILIZADASPara o desenvolvimento do front-end do site Oenobiol foram utilizadas as seguintes tecnologias:
- HTML5 na linguagem de marcação;- CSS3 para as configurações de estilo;- Javascript e jQuery (jquery.com) para a programação client-side;- Webfonts de uso livre do Google.
SUPORTE E ACESSIBILIDADEJavascript e jQueryDevem ser usados apenas quando necessário, ou seja, visando apenas a melhorar da experiência do usuário. As ações e navegação do site devem funcionar mesmo quando o suporte ao javascript estiver desativado.
WebfontsPara os textos que não utilizam fontes padrão, optou-se o uso de webfonts, evitando assim a utilização de imagens substituindo textos.Alguns sistemas podem não conseguir exibir tais fontes, portanto deve ser tomadas medidas para os casos onde são alteradas para uma fonte padrão.
As instruções para o uso destas fontes podem ser encontradas em:
- Lato: http://www.google.com/webfonts#UsePlace:use/Collection:Lato- Ubuntu Condensed: http://www.google.com/webfonts#UsePlace:use/Collection:Ubuntu+Condensed
As fontes podem ser exibidas sem anti-alias no Windows XP ou no Chrome 4 ou inferior, dependendo da configuração do sistema operacional.
AcessibilidadeO objetivo da interface é garantir ao site acessibilidade para o maior número possível de dispositivos, navegadores, mecanismos de busca e leitores de tela, portanto, os padrões da W3C devem ser seguidos como, por exemplo, a utilização correta do atributo "alt" em todas as imagens.
FRONT-END
39
NAVEGADORES E OUTROS DISPOSITIVOS
Resolução de telaO site deve se adaptar a uma resolução mínima de tela de 1024x768, possibilitando que cores e imagens de fundo ocupem toda a área visível.
NavegadoresO front-end foi desenvolvido a partir das melhores práticas deste segmento e deve funcionar da melhor maneira possível em navegadores que supor-tam CSS3 e HTML5, instalados em sistemas operacionais Windows Vista ou superior. MacOS X ou superior e dispositivos móveis com Android e iOS.O suporte ao Windows XP ou inferior é recomendado, mas dentro das limitações do sistema (Caso das fontes - citado anteriormente).
Devido às limitações do software, navegadores como o Internet Explorer 7 ou 8 podem apresentar alguns problemas de renderização, porém não devem impedir a navegação e a experiência do usuário.
Para os navegadores Internet Explorer versão 8 ou inferior, alguns ajustes foram necessários:- Uso da biblioteca html5.js para possibilitar o suporte parcial na renderização de elementos HTML5 (code.google.com/p/html5shiv);- Uso de CSS exclusivo para tais versões, onde foram realizadas as devidas adaptações no layout.
Não há suporte aos navegadores Internet Explorer inferiores à versão 7, porém é esperado que seja possível acessar todo o conteúdo.
FlashO uso de Flash foi evitado visando permitir o acesso a dispositivos móveis. Ficam limitados somente às incorporações de vídeos oriundos de sites externos que oferecem suporte alternativo, como YouTube,
FRONT-END
40
VALIDAÇÃO
O HTML e CSS devem ser validados seguindo as regras da W3C, porém as seguintes características impedirão que o site seja validado corretamente e devem ser ignoradas:
No HTML:- Alguns atributos das metatags usadas exclusivamente para a integração com o Facebook;- Alguns atributos obsoletos gerados pelo back-end em .Net.
No CSS:- Propriedades de uso exclusivo a determinados navegadores, com os prefixos -moz, -webkit, -o ou -ms;- Propriedades transition, que até o momento não estão totalmente homologadas pelo W3C;- Propriedades filter, de uso exclusivo do Internet Explorer;- Propriedades do CSS3 já homologadas, mas que não funcionarão em navegadores que interpretam somente CSS2, como overflow-x, overflow-y, box-shadow, text-shadow, background-size, opacity e valores da propriedade font., dentre outras.Neste navegadores, tais propriedades devem ser emuladas utilizando javascript ou simplesmente ignoradas, desde que não afetem radicalmente o layout e a navegação.
BACK-END
41
BACK-END
TECNOLOGIAS UTILIZADASPara o desenvolvimento do back-end do site Oenobiol foram utilizadas as seguintes tecnologias:- ASP .NET utilizando a versão 3.5 do framework- MS SQL Server
BANCO DE DADOS- LINQ- Stored Procedures
ARQUITETURAPara uma maior segurança, performance e usabilidade do projeto utilizamos a arquitetura de 3 camadas.Assim sendo, temos as camadas DAL (Database Access Layer), BLL (Business Logic Layer) e Web.
BIBLIOTECASUtilizamos algumas bibliotecas já compiladas para o desenvolvimento. A utilização das mesmas visam facilitar para que haja maior foco ao desenvolvi-mento único da lógica do projeto.São elas:- CKEditor- AJAX Toolkit- Lucene.NET (Search Engine)- ELMAH (Error Logging Modules and Handlers)
top related