oenobiol

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


Visualização do produto Velouté, junto à sua imagem correspondente.

LAYOUT

17

HOME


Visualização do produto Solaire, junto à sua imagem correspondente.

LAYOUT

18

HOME


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.


Visualização do produto Radiance.

LAYOUT

21

PRODUTOS



Visualização do produto Solaire.

LAYOUT

22

PRODUTOS



Visualização do produto Magnifique.

LAYOUT

23

PRODUTOS



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.


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.


LAYOUT

26

DICAS & TENDÊNCIAS



LAYOUT

27

DICAS & TENDÊNCIAS



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.


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.


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




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)

oenobiol

Documents

dicas de paris

dicas de beleza

produtos oenobiol

imagem do produto

parisem dicas

informaes completas

informaes atualizadas

produtos comercializados