Documento de design

Documento de Design

Nome da contratante: Lef Produções.

Gestor de projeto: João Folle.

1

ADS Futura - Shopping Cavalhada – Av.Cavalhada, 2370, sala 309 – Cavalhada – Porto Alegre/RS
+55 (51) 3209 6065 – contato@adsfutura.com.br

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.

2


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.

3


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)

4


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).
5


 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.
6


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 JP Produções Artísticas LMR Produções Thathá Produções Musicais
(www.novaheraproducoes.com.br) (www.jpproducoesartisticas.com.br) (lmrproducoes.webnode.com.br) (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 S S N N
personalizada (S-N)
Boletim por e-mail (S- S S N N
N)
Pesquisas N N S N
armazenadas (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

7


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;

8


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;

9


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.

10


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)

11


Diagrama 2. (Detalhamento seção produtora)

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

12


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

Diagrama 5. (Detalhamento seção interatividade)

13


Diagrama 6. (Detalhamento seção contato)

14


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 - Presente em todas as páginas do site.
global - 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 - Está presente em algumas páginas do site, de acordo com a seção.
Local - 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 - Conhecida como breadcrumbs, ou "migalhas de pão".
Estrutural - 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 - Links para outros sites: parceiros e clientes.
Extra-Site - somente em algumas seções.
- normalmente com a mesma formatação.

15


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.

16


Documento de design

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Documento de design

Ähnlich wie Documento de design (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (6)

Documento de design