documento de design

1

ADS Futura - Shopping Cavalhada – Av.Cavalhada, 2370, sala 309 – Cavalhada – Porto Alegre/RS +55 (51) 3209 6065 – [email protected]

Documento de Design

Nome da contratante: Lef Produções.

Gestor de projeto: João Folle.

2


Sumario:

1 – Objetivos.

2 – Experiência do usuário.

2.1 – Definição de Público Alvo.

2.2 – Cenários.

2.3 – Analise competitiva.

3 – Conteúdo do site.

3.1 – Agrupamento e Rotulação de conteúdo.

3.2 – Requisitos funcionais.

4 – Estrutura do site.

4.1 – Estrutura do site.

4.2 – Plantas Arquiteturais.

4.3 – Sistemas de navegação global e local.

5 – Design Visual. (Aguarda aprovação do documento de design)

5.1 – Grids de Layout.

5.2 – Esboços de design.

5.3 – Modelos de Página.

5.4 – Protótipo Baseado na WEB.

3


1 – OBJETIVOS

Objetivos do documento de design:

O documento de design serve como base para o projeto do site. É a planta do web site, sobre a

qual todos os outros aspectos são construídos – forma, função, metáfora, navegação, interface, interação

e design visual.

Objetivos do site:

Servir como instrumento para Divulgar a Lef Produções, os eventos organizados e apoiados pela

mesma, os produtos e serviços (festas, shows e bandas). Focalizar a cena em que atua oferecendo informações

relativas ao seu público alvo e promoters. Estabelecer um canal de comunicação Digital com seu Público alvo.

Apresentar a Lef Produções como líder do mercado em que atua.

Quando o visitante quer encontrar no site algo específico, facilitar a busca pelo conteúdo desejado.

Quando o visitante não sabe o que procura, conduzir o visitante apresentando a ele a felicidade e

diversão do mercado em que a Lef Produções atua.

Objetivos básicos:

Oferecer vasto material, das festas e bandas bem como possuir um canal de áudio (streaming on

demand) que será utilizado para divulgações das festas, eventos e bandas.

Ser fonte oficial da Lef Produções.

Linkar e unir todas as mídias sociais que a empresa possui.

Fornecer material para desenvolvimento de atividades.

Objetivos intermediários:

Captar dados dos usuários do site.

Noticiar e informar eventos de parceiros.

4


Objetivos avançados:

Facilitar procedimentos administrativos.

Gerenciar fluxo da comunicação oficial.

Socializar interessados (contato, newsletter, FAQ, grupos e interatividades).

Níveis de informação:

Quando falamos de oferecer, disponibilizar, fornecer e informar, ou seja, em tornar os conteúdos

acessíveis, facilitamos o planejamento de conteúdo com níveis de informação:

Interno – Documentos não públicos (Ex.: Materiais de divulgação para colaboradores,

relatórios e etc.)

Conversacional – Mensagens (Messenger, Skype, e-mails e chat.)

De referencia – Material de consulta (Informações sobre a empresa.)

Noticioso – Notícias (Agenda, informações de festas e eventos.)

Cultural – Produções Artísticas (Músicas, vídeos e fotos.)

Resumo Técnico:

Ter as informações (conteúdo).

Fornecer acesso (navegação e busca) – usabilidade e acessibilidade

Encantar, conduzir e revelar (forma)

5


2 – EXPERIÊNCIA DO USUÁRIO

Definição de público alvo:

O público do site são pessoas que formam a cena do samba e pagode hoje em dia no Rio Grande do

Sul. Todos procuram a diversão e alegria que a cena proporciona com suas festas e eventos.

O idioma utilizado no site é o português do Brasil. Pois o site é voltado para o público desse idioma.

Podemos classificar o público em dois grupos: Festeiros e Empresários.

Dividindo melhor os visitantes em quatro níveis:

Amantes do samba – Amam e respiram samba e pagode, só frequentam festas e eventos

específicos.

Festeiros – Só querem mais uma noite de diversão, gostam da festa em si e se sentem a vontade

em qualquer festa.

Promoters – Divulgadores das festas e eventos da Lef Produções.

Donos de casas noturnas e empresários – buscam informações para possíveis contratações e

parcerias.

Necessidades Específicas:

Observação: a divisão abaixo não é rigorosa. Algumas necessidades pertencem também a outros públicos.

Amantes do Samba

Procuram informações sobre as festas e bandas, querem baixar e ouvir músicas das bandas da

Lef Produções.

Querem ver fotos de festas realizadas.

Buscam informações sobre alguma banda específica de sua preferência (Orkut, Twitter, site e

músicas).

Colocam nome na lista para descontos nas entradas das festas da Lef Produções.

Festeiros

Querem ficar atualizados sobre as principais festas e ventos.

Buscam fotos de festas.

Querem saber qual festa acontece semanalmente (onde, qual casa noturna, endereço, preço).

6


Buscam descontos nas entradas e promoções (nome na lista, bebidas liberadas).

Promoters

Buscam materiais de divulgação.

São cadastrados e mantêm contato com a Lef produções.

Procuram comunicação diretamente com funcionários da Lef Produções.

Donos de Casas Noturnas e Empresários

Buscam informações sobre as bandas da produtora (material, teLefone de agentes)

Busca na agenda da Lef Produções disponibilidade de dias e horários das bandas.

Analisam o que é a Lef Produções e como trabalham.

Acessam os vídeos e fotos de shows das bandas.

Cenários:

Alguns exemplos de utilização bem-sucedida do site:

Amantes do samba e Festeiros

Joaquim entra no site para baixar músicas e fica feliz ao encontrá-las rapidamente. Viu também que

as fotos que ele e seus amigos tiraram na festa passada, já estavam disponíveis no site.

Amanda entrou no site com o propósito de colocar o seu nome e os das amigas na lista, mas antes

ouviu algumas músicas que estavam tocando no site.

Lucas não sabia o endereço da festa e nem quais seriam as atrações daquela noite, entrou no site

e com facilidade achou o endereço e qual banda iria tocar naquela noite. Lucas também entrou em contato

com a Lef PRODUÇÕES para saber quais seriam os descontos e promoções que ele ganharia para fazer

sua festa de aniversário em uma noite da Lef.

Promoters e Empresários

Emerson abriu sua própria casa noturna e precisava urgentemente de uma banda de pagode, ao

entrar no site pode ver facilmente quem era essa tal Lef de que tanto ouviu falar, quem são seus parceiros

e bandas, rapidamente acessou o canal de atendimento online e fechou o negócio com a Lef.

Suzana sempre esteve no meio de organizações de festas, buscava uma empresa que tivesse uma porção

de festas agendadas, entrou no site da Lef PRODUÇÕES e de cara se cadastrou para receber os

materiais que precisaria para fazer a divulgação.

7


Jaqueline queria uma banda de pagode para tocar em sua festa de aniversário, ela entrou no site e

descobriu que uma das bandas da Lef tocava sua música preferida, feliz continuou navegando pelo site e

acessou alguns vídeos da tal banda. TeLefonou para a produtora e fechou o negócio.

Analise competitiva:

Não conseguimos encontrar uma competitividade direta da Lef com outras produtoras do Brasil.

Porém escolhemos quatro sites para avaliarmos e conhecermos melhor sobre a cena de atuação:

Segue abaixo tabela:

**************** Nova Hera (www.novaheraproducoes.com.br)

JP Produções Artísticas (www.jpproducoesartisticas.com.br)

LMR Produções (lmrproducoes.webnode.com.br)

Thathá Produções Musicais (www.thathaproducoes.com.br)

Caracteristicas Gerais

Design do site (0-10) 4 7 3 4

Navegação (0-10) 3 6 3 4

Distribuição (0-10) 7 8 4 3

Estilo (0-10) 2 8 1 2

Publicidade (S-N) S N S N

Personalização

Página inicial personalizada (S-N)

S S N N

Boletim por e-mail (S-N)

S S N N

Pesquisas armazenadas (S-N)

N N S N

Tecnologia

Javascript (S-N) S S S S

Flash (S-N) S S N N

Jquery (S-N) N N N N

Css (S-N) S S S S

Dinâmico (S-N) S S N N

8


3 – CONTEÚDO DO SITE

Agrupamento e rotulação de conteúdo:

Produtora

- Histórico;

- Clientes;

- Parceiros

- Localização;

- Material de apoio para Promoters;

Notícias

- Agenda;

- O mundo da música; (colunistas)

- Noite em Porto Alegre; (colunistas)

- Notícias gerais e entrevistas;

- Enquetes;

- BLOG;

Artistas e Bandas

- Catalogo;

- Cadastro de bandas e artistas;

- Conteúdo dos artistas e bandas;

Interatividade

- Galeria de fotos;

- Galeria de Vídeos;

- Mural de recados;

- Web rádio;

- Mídias sociais;

9


Contato

- Venda de ingressos;

- Fale conosco; (atendimento online)

- Parte de R.H.; (trabalhe com a Lef)

- Newslleter;

- Nome na lista;

Requisitos funcionais: (forma reduzida).

- Sistema de gerenciamento de conteúdo;

- Navegação Global;

- Navegação Contextual;

- Streaming On Demand;

- Sistema de upload de conteúdo;

- Sistema de localização (Google Maps);

- Sistema de comunicação organizacional (Google Apps);

- BLOG;

- Reestruturação das mídias sociais;

- Sistema de atendimento online;

- Sistema de captação de mailing;

10


4- ESTRUTURAÇÃO DO SITE:

Estrutura do site:

- Página inicial:

A entrada do site da Lef, acessada diretamente pelo domínio (www.Lefproducoes.com.br).

Possui uma diferenciação das outras páginas do site. Deve conter e satisfazer diversos tipos de

objetivos e condições:

- Informar o principal, com clareza e rapidamente. Ou seja deixar clara a mensagem principal “Lef

Produções. Você conhece, você curte.”.

- Fornecer acesso a diferentes seções do site.

- Estar sempre atualizada com as informações mais recentes;

- Dar destaque aos conteúdos mais importantes do site;

- Atender a demanda dos diferentes perfis de visitantes, sem poluir o visual com excessivas

opções.

A partir da página inicial, o visitante terá acesso a muitos lugares diferentes do site.

Porém podemos dividir o site em 5 grupos.

- Produtora:

Parte organizacional da empresa apresenta e fornece o histórico da empresa bem como divulga

seus clientes e parceiros além de auxiliar os promoters com conteúdos de divulgação.

- Notícias:

Parte onde se encontra a maioria da parte textual do site, nesta aba teremos calendário de festas e

eventos, notícias, entrevistas, enquetes e dois espaços de colunistas formadores de opinião. Também terá

um link para o BLOG que será criado para a Lef para mostrar mais o dia a dia e crescimento da Lef e de

seus colaboradores.

- Artistas e Bandas:

Página de divulgação de artistas e bandas que trabalham e fazem parte da Lef Produções.

http://www.lefproducoes.com.br/

11


Cada artista ou banda terá um hot site contendo breve histórico, fotos, agenda, músicas e

links para mídias sociais.

Haverá também um formulário de cadastro para recrutamento de possíveis artistas e

bandas.

- Interatividade:

Nesta área teremos todo o conteúdo interativo do site com ênfase na Galeria de imagens e

de vídeos. Além disso, terá um mural de recados e de comentários das festas. Acesso aos links para as mídias

sociais da Lef.

- Contato:

Parte de acesso ao canal de comunicação possuirá formulário de contato, atendimento

online, venda de ingressos e atendimento online cadastro de newsletter e também uma parte de trabalhe conosco.

Diagrama 1. (Seções principais)

12


Diagrama 2. (Detalhamento seção produtora)

Diagrama 3. (Detalhamento seção notícias)

13


Diagrama 4. (Detalhamento seção Artistas e bandas)

Diagrama 5. (Detalhamento seção interatividade)

14


Diagrama 6. (Detalhamento seção contato)

15


Sistemas de navegação:

Como os visitantes irão usar o site? Como eles irão de um lugar para o outro? Como

prevenir que se percam? Os Sistemas de Navegação solucionam esses problemas. Abaixo temos uma breve

explicação de cada um dos sistemas de navegação do Site da Lef Produções:

Tipo Descrição

Navegação global

- Presente em todas as páginas do site. - Exatamente com o mesmo visual a com a mesma posição.(idêntico em todas as páginas) - Mesmo conteúdo textual do menu para todas as páginas. - links de acesso as principais seções. -Expõe rapidamente ao visitante: Como o site é organizado; O que o site contém; Característica: proporciona acesso rápido e mobilidade entre os pontos mais visitados do site.

Navegação Local

- Está presente em algumas páginas do site, de acordo com a seção. - Estilo visual e posicionamento semelhante. (mesmo padrão) - Conteúdo muda de acordo com a seção ou página visitada -Expõe rapidamente ao visitante: Como a seção é organizada; O que a seção contém; Característica: fornece acesso às demais páginas ou sub-seções que pertencem à seção da página atual.

Navegação Estrutural

- Conhecida como breadcrumbs, ou "migalhas de pão". - Revela a posição da página sendo visitada dentro da estrutura do site, fornecendo links de acesso para todos os níveis da hierarquia. - A explicação soa complexa, mas um exemplo tornará a idéia simples e clara. Supondo que estamos na página da Produtora na parte de metodologia: Ex: Início > Produtora > Histórico > Metodologia. - Cada etapa na hierarquia é um link clicável.

Navegação Extra-Site

- Links para outros sites: parceiros e clientes. - somente em algumas seções. - normalmente com a mesma formatação.

16


Os itens específicos para os elementos de navegação e seus respectivos rótulos serão definidos posteriormente, durante as etapas de design visual e construção do site. No entanto, algumas características gerais podem ser definidas, conforme veremos a seguir.

Em geral:

A Estrutura deve priorizar Organização

A Navegação deve priorizar Clareza

O Layout deve priorizar Simplicidade

Estrutura, Navegação e Layout estão intimamente relacionados, pois simultaneamente focalizam aspectos diferentes do mesmo problema.

Devido ao fato da estrutura de conteúdo estar bem organizada, porém conter muitos níveis de

profundidade em sua hierarquia optou-se por deliberadamente desvincular a navegação da estrutura. Ou seja, a navegação não estará inflexivelmente amarrada à estrutura. Isso não significa que vamos abrir mão da clareza ou da coerência, de maneira alguma. O principal objetivo almejado com essa decisão é de simplesmente possibilitar acesso mais rápido e fácil a conteúdo que pertence a um nível muito profundo na hierarquia de conteúdo.

Assim sendo, Estrutura e Navegação serão independentes, num pequeno grau. Os itens e rótulos dos elementos de navegação serão cuidadosamente escolhidos de modo que não venham a causar confusão, mas sim:

Satisfaçam as necessidades do visitante

Utilizem linguagem simples, clara, consistente e precisa

Facilitem acesso a conteúdo relevante

Levem ao lugar aonde se espera chegar, ao ser clicado.

documento de design

Technology