Organograma e storyboard de aplicação multimédia

Recursos Pedagógicos
manual de formação
05
Caracterização da Acção
Designação da Acção: Técnico/a de Multimédia
Entidade Promotora: Megaexpansão Entidade Formadora: Megaexpansão
Entidade Certificadora: IEFP Código Acção: 5/1-TM-1
Código Administrativo SIGO: n/a Projecto: 44/DL/2012
Tipologias de Intervenção: 1.1. Sistema de

Eixo Prioritário: 1. Qualificação Inicial
Aprendizagem
Classificação da Área de Educação e Formação:
Referencial de Formação: Técnico/a de Multimédia
213. Audiovisuais e Produção dos Media
Nível de Qualificação: 4 Região: Lisboa e Vale do Tejo
Local de Realização: Caldas da Rainha Duração: 3275 Horas
Data Início: 26 de Dezembro de 2012 Data Fim: 31 de Dezembro de 2014
Nome Formador(a): Rui Miguel Período de Formação: 2
Módulo: 0148-Organograma e storyboard de uma aplicação off-line
Descrição
 É fundamental, para o técnico multimédia construir estruturas

/sistemas de pastas e ficheiros de forma coerente e organizada. Em
DTP_AP_MF_I05_2012_1
projetos interdisciplinares é de extrema importância que todos os
envolvidos consigam facilmente encontrar e organizar pastas e
ficheiros.
 No desenvolvimento de aplicações onde existe navegação, um dos
primeiros passos é definir o esquema de navegação de forma
coerente, tendo em conta as características do projeto e o tipo de
utilizadores. Além de clarificar a execução e promover a uniformidade
do projeto, permite resolver a maior parte dos problemas na
interação humano-máquina.
 Antes de se iniciar o desenvolvimento de uma aplicação multimédia,
seja animação, apresentação, jogo ou web site, e contenha, ou não
Página | 1
05
interatividade, deve elaborar-se o storyboard. Desta forma o
executante compreender perfeitamente o que deve ser feito,
evitando muitas horas de alterações.
Objectivos
 Compreender a importância de uma estrutura de pastas e

ficheiros coerente e intuitiva.
 Elaborar esquemas de navegação ajustados à respetiva
aplicação multimédia.
 Desenvolver storyboards.
Página | 2
05
Índice
1. ORGANOGRAMA........................................................................................................................ 4
1.1. FAZES DE DESENVOLVIMENTO DE UMA APLICAÇÃO..................................................................................4

1.2. ARQUITETURA DE INFORMAÇÃO...........................................................................................................4
1.3. ESTRUTURA DA APLICAÇÃO EM FLUXOGRAMA/ORGANOGRAMA................................................................8
1.4. ORGANIZAÇÃO DE PASTAS E FICHEIROS...............................................................................................15
2. ESQUEMAS DE NAVEGAÇÃO...................................................................................................... 17
2.1. LINEAR:.........................................................................................................................................18
2.2. HIERÁRQUICA OU ÁRVORE................................................................................................................18
2.3. ESTRELA OU RADIAL........................................................................................................................19
2.4. REDE OU WEB...............................................................................................................................20
2.5. COMPOSTA OU MISTA.....................................................................................................................21
2.6. CAPACIDADE DE EXPRESSÃO VS. PREVISIBILIDADE DOS ESQUEMAS...........................................................21
3. LIGAÇÕES.................................................................................................................................. 22
3.1. LIGAÇÕES ENTRE ECRÃS....................................................................................................................22

3.2. COERÊNCIA E FUNCIONALIDADE.........................................................................................................25
4. STORYBOARD............................................................................................................................ 27
4.1. MATERIAIS A USAR..........................................................................................................................34

4.2. COMO FAZER?................................................................................................................................34
4.3. ELEMENTOS NECESSÁRIOS NA CONSTRUÇÃO DE UM STORYBOARD:...........................................................35
4.4. FLUXO DA PÁGINA E LIGAÇÃO ENTRE OS ECRÃS.....................................................................................36
Página | 3
05
1. Organograma
1.1. Fazes de desenvolvimento de uma aplicação
Arquitetura Estrutura da
Definição de Construção
de aplicação / Testes Finais
Layout's da aplicação
Informação Organograma
1.2. Arquitetura de informação
Página | 4
05
A primeira fase de desenvolvimento de uma aplicação passa pela organização e
conceptualização do projeto. Quanto melhor ficar definida a arquitetura de
informação e o conceito por trás do projeto, mais produtivo será todo o processo de
desenvolvimento e todos os envolvidos compreendem o que se pretende e as
tarefas a executar.
Ao construir uma aplicação a arquitetura de Informação projeta a estrutura, o

esqueleto de todas as partes
constituintes:
Contexto
Conteúdo Utilizadores
Contexto
 Objetivos da organização
Página | 5
05
 Objetivos da aplicação
 Política
 Cultura
 Tecnologia
 Recursos humanos
 Outras aplicações existentes
 Band Book da organização
 Posição da marca/organização face à concorrência
Conteúdo
 Documentos existentes/informação disponibilizada
 Formatos
 Objetos
 Metadados
 Estrutura
Utilizadores/público-alvo
 Conquista de mais utilizadores/clientes?
 Melhorar relação cliente/organização?
Página | 6
05
 Audiências esperadas
 Tarefas que serão disponibilizadas
 Necessidades
 Comportamentos de busca de informação
 Vocabulário
 Experiência com a organização
 Experiência com aplicações semelhantes
 Nível de literacia
 Expectativas
"Arquitetura de Informação é a prática de projetar a infraestrutura,

especialmente a sua navegação“ WEST (2001)
"Arquitetura de Informação é a fundação para um ótimo web design. Ela é o
esquema [blueprint] do website sobre o qual todos os outros aspetos são
construídos: forma, função, metáfora, navegação e interface, interação e
design visual.“
SHIPLE (2001)
"O principal trabalho de um arquiteto de informação é organizar a

informação de um website para que seus utilizadores possam encontrar
coisas e alcançar seus objetivos.“
DIJCK (2003)
Página | 7
05
Objetivos mensuráveis
Nesta fase é muito importante que se definam objetivos a cumprir. É muito

importante que esses objetivos se possam medir, exemplos:
 Número de visitas/utilizações;
 Quantidade de novos clientes;
 Redução de tempo de utilização da aplicação ou do espaço público;
 Quantos colaboradores deixaram de ser necessários;
 Quantidade de produtos/serviços vendidos;
 Tempo reduzido em esperas;
 Aumento do volume de faturação;
 Etc…;
1.3. Estrutura da aplicação em Fluxograma/Organograma
Um organograma é um gráfico que representa a estrutura da aplicação

apresentando as operações e ligações e a sua ordem interna.
Depois de definida a arquitetura de informação e objetivos deve-se representar

graficamente o projeto. O grau de complexidade depende da quantidade de ecrãs,
o grau de detalhe depende do objetivo a que se destina o organograma.
Página | 8
05
Deve começar-se sempre por fazer esquemas em papel e posteriormente
proceder à sua digitalização, seja com recurso a um scanner ou usando programas
de desenho vetorial.
Vantagens de fazer os primeiros esboços em papel
 Muito fácil esquematização (trabalha-se sempre muito mais rápido com o

lápis que comm o computador);
 Fácil alteração;
 Melhor visualização (pode ver-se todo o organograma na mesa, colocando

todas as folhas na ordem correta);
 Todos os intervenientes no desenvolvimento da aplicação podem visualizar e

discutir a sua estrutura.
 Com os esboços em papel finalizados, a sua passagem para o computador é

muito mais simples, rápida e sem erros. Se se iniciasse logo no computador,
teriam que se fazer muitas alterações com recurso a softwares de desenho
vetorial.
Vantagens do uso de fluxogramas/organogramas
 Todos os intervenientes conhecem a estrutura da aplicação e a sua tarefa;
 Evitam-se alterações complicadas;
Página | 9
05
 Aperfeiçoamento dos processos (quanto melhor se conhecer a estrutura,
mais se pode melhorar);
 Identificação das fases críticas do processo de desenvolvimento;
 Conhecimento da sequência e encadeamento das atividades, dando uma

visão do fluxo de trabalho;
 Adequação de normas e processos;
 Fortalecimento do trabalho em equipa;
 Reuniões mais rápidas porque todos compreendem a estrutura.
Elaboração de fluxogramas/organogramas
 Deverão ser elaborados vários organogramas dependendo da complexidade

e objetivos da sua função.
 O primeiro a ser elaborador deverá ter uma visão geral do projeto e poucos
detalhes.
 De seguida serão elaborados organogramas com os detalhes importantes
para cada fase do projeto.
 Deverão ser elaborados organogramas com a atribuição de tarefas às

equipas e aos elementos da(s) equipa(s) de desenvolvimento.
 Um dos organogramas deverá ter as datas de conclusão para as fases de

desenvolvimento e as respetivas relações:
o Fases do projeto que precisam de ser concluídas para outras serem

iniciadas;
o Fases que não estão dependentes da conclusão de outra;
o Tarefas terão que ser elaboradas em simultâneo

Página | 10
05
 Poderão ser adicionadas outras notas de informação que sejam necessárias,
por exemplo:
o No final de uma tarefa informar a equipa X;
o Contactos das equipas/colaboradores;
o Máximo de horas esperado para cada tarefa;
o Períodos de decisão do cliente, outras equipas ou fornecedores;
Tipos de fluxogramas
Existem muitos tipos de Fluxogramas e diagramas, cada um para cada tipo de

aplicação. Vamos abordar os quatro tipos genéricos principaos:
 Diagrama de blocos – Oferece uma noção rápida do processo:
o É o mais simples;
o Indica apenas as atividades sem as diferenciar por tipos;
o Utilizado para uma visualização rápida do processo;
o Vertical ou horizontal;
o Devem ser usadas frases curtas;
Envio de
Reunião com o Desenvolvime- Testes e
proposta/orça Adjudicação
cliente nto do projeto conclusão
-mento
Página | 11
05
 Fluxograma padrão da American National Standarts Institute (ANSI) – Analisa
os inter-relacionamentos detalhados de um processo.
o Fornecem uma compreensão detalhada do processo;
o Fluxograma desenhado posteriormente ao de blocos;
o Seguem um padrão internacionalmente reconhecido;
Página | 12
05
Página | 13
05
 Fluxo-cronograma – Mostram o fluxo do processo entre organizações ou
áreas e o tempo de execução de cada processo.
o Retratam o movimento entre as diferentes áreas de trabalho;
o Mostram o tempo de ciclo para cada atividade;
o Podem mostrar o custo de cada processo e possíveis percas devido a

processos ineficientes;
o Previne atrasos e ajuda a compreender como recuperar tempo

perdido por forma a respeitar o prazo de conclusão final do processo;
o Muito útil quando o tempo de desenvolvimento dos processos é muito

importante;
o Pode ser elaborado com blocos ou símbolos padrão;
Página | 14
05
Imagens de esquemas de desnvolvimento de processos no MS Project:
1.4. Organização de pastas e ficheiros
Todos os projetos devem ter uma organização lógica por forma a facilitar o
desenvolvimento do trabalho, assim evitam-se percas de tempo na procura de
ficheiros e minimizam-se os riscos de haver ficheiros repetidos ou ficheiros que
façam falta ao projeto mas estão fora da pasta que contem todo o projeto.
Não existe uma estrutura padrão e muito menos obrigatória. A estrutura utilizada
deverá ser aquela com que os designers, programadores e todos os envolvidos no
projeto compreendam. Qualquer pessoa, mesmo que ainda não tenha participado
no projeto, deve conseguir encontrar o ficheiro que pretende sozinha.
Página | 15
Página | 16
ficheiros:
Diagrama do acesso a um site e sua estrutura de pastas de
Ficheiro index
ficheiro de abertura do sit
Videos sons e animações
ficheiros flash, ídeo e áudio que sejam incluídos
ficheitos JavaScript (nem sempre são usados, por isso esta pasta poderá Js
não existir).
imagens
Imagens do site (.jpg, .png ou .gif)
Páginas
Ficheiros com extensão .html ou .php
css
Ficheiros com extensão .css
Exemplo de organização de pastas e ficheiros de um site:
05
05
Exemplo de organização de uma apresentação em vídeo:
Gravações em vídeo em bruto

vídeos
Gravações de som em bruto
Sons
Imagens a inserir no vídeo final
imagens
Animações a inserir no vídeo final
Animações
Ficheiros 3D a inserir no vídeo final
3D
Configurações/formatações que o vídeo final possa ter
Ficheiros de configuração
Aquele que "chama" os outros ficheiros necessários
Ficheiro principal
2. Esquemas de Navegação
Uma navegação deficiente pode produzir no utilizador a sensação de estar perdido
e incapacidade de encontrar a informação procurada, o que conduzirá ao
abandono da aplicação.
O esquema deve dar uma ideia geral da organização da informação e

consequentemente situar melhor os utilizadores. Uma boa estrutura, facilita a
navegação, porque requer menos esforço cognitivo e ajuda a uma melhor
assimilação da informação.
A estruturação da informação pode depender muito do conteúdo da aplicação, das

finalidades e do tipo de utilizadores (deficiências, experiência, etc.)
Página | 17
05
São várias as estruturas para organização da apresentação. A seguir apresentam-se
algumas:
2.1. Linear:
Este tipo de organização é a forma que tradicionalmente tem sido usada, desde as
inscrições em pedra, até ao vídeo dos nossos dias.
O hipertexto é intrinsecamente não linear, o que não é sinónimo de incapacidade

para suportar a sequência.
 A informação linear está organizada para que, para ser recuperada, não
necessita referências a si mesma ou outras informações externas.
 Só existem duas possibilidades de navegação: para a frente ou para trás.
 É perfeitamente fiável
 Monotonamente previsível, seguindo a lógica tradicional da transmissão da

informação.
2.2. Hierárquica ou Árvore
Página | 18
05
Este tipo de estrutura é também bastante familiar. Esta estrutura simples é a base
da classificação, da organização administrativa ou das árvores genealógicas. A
organização do conteúdo, na base hipertexto faz-se de forma hierárquica.
 Informação mais geral no topo
 Informação mais detalhada, em níveis mais baixos, submetida à mais geral.
 Todos os “nós” descendem de uma raiz comum.
 De cada “nó” podem sair múltiplas ligações para outros nós de nível inferior
na hierarquia.
A organização hierárquica resultante ajuda o utilizador a criar um modelo mental

coerente da base da informação.
2.3. Estrela ou Radial
 Possuem um nó central e principal, e um conjunto de nós ligados a este.
Página | 19
05
 A passagem de um nó a outro requer sempre o regresso ao "local central".
 Adapta-se a conteúdos, onde, por exemplo, existe um tópico principal, do

qual fazem parte vários subtópicos.
 Ícones no “nó” principal, podem estabelecer ligações a conteúdos mais

específicos desse assunto, regressando de novo ao local central para o
estabelecimento de uma nova ligação.
2.4. Rede ou Web
A essência do hipertexto reside na liberdade deixada ao utilizador para seguir as

ligações que desejar. Isto é, o utilizador tem um completo controlo sobre o seu
caminho a seguir. Esta situação só é possível numa base de informação organizada
em rede, de navegação totalmente livre, a que Jonassen (1989), chamou de
hipertexto não estruturado.
 Um “nó” está sempre ligado a todos os outros “nós”.
 Tudo pode ser ligado com tudo.

Página | 20
05
 Não existe por essa razão nenhuma estrutura conceptual geral.
 As associações não estão delimitadas por regras estritas como nas outras
estruturas.
2.5. Composta ou Mista
 O hipertexto/hipermédia em conjuntos de “nós”, ficando cada conjunto
acessível a outro conjunto.
 Cada conjunto estará explicitamente organizado para representar em

desenho a estrutura da informação.
 A estrutura geral é constituída por vários modelos conceptuais.
Página | 21
05
Se a estrutura não tiver uma organização lógica, não é facilmente compreensível, o

que consequentemente vai dificultar a formação de modelos mentais de
representação da informação.
2.6. Capacidade de expressão Vs. Previsibilidade dos

esquemas
A navegação livre, potencialmente mais expressiva, apresenta-se também
potencialmente mais confusa.
Ao aumentar a autonomia, aumenta também a possibilidade do utilizador se

desorientar e sofrer sobrecarga cognitiva. Por outro lado, estruturas muito
previsíveis, limitam a iniciativa do utilizador.
Página | 22
05
Alta
Capacidade
Expressiva
Grade
Rede
Baixa Árvore
Sequencial
Capacidade
Expressiva
Previsível Imprevisível
Baixo risco Potencialmente confuso
Alto risco
3. Ligações
3.1. Ligações entre ecrãs
Uma etapa importante na conceção de um projeto multimédia é a conceção do

sistema de navegação. É um componente da interface, muito dependente da
estruturação da informação e é constituído por todas as ligações e hiperligações. É
o sistema de navegação que permite mover-nos através dos diferentes ecrãs,
criando as condições e estilos de interatividade. Por isso deve ser dada grande
importância.
Página | 23
05
As ligações entre ecrãs são constituídos por:
 Botões utilizados para ir para a página seguinte e anterior, também

utilizadas pelos browsers;
 Barras de navegação (botões ou menus), podendo ser constituídas por itens

de texto, itens gráficos, ou as duas coisas. Contém apenas as ligações
principais. As barras de navegação podem estar sempre presentes em todas
as páginas, estar apenas na principal, ou nos níveis fundamentais.
 Opção  Opção  Opção

A B C
 Índices com todos os títulos, sub títulos, tópicos e conteúdos da aplicação;
 Formulários de pesquisa de conteúdos;
Insira o que pretende pesquisar
 Mapas ou esquemas da aplicação, que podem ser utilizados para que o
utilizador recupere rapidamente a informação e compreenda a forma como
os ecrãs estão estruturados, para que não se desoriente na aplicação.
Dicas para construção de menus para ligação de ecrãs

Página | 24
Con
L
C
05
 As barras ou menus não devem ser muito extensas, não devem possuir
demasiadas opções.
Página | 25
05
 No caso de haver muitos ecrãs deve recorrer-se à sua divisão por categorias
Categoria1 Categoria 2
Sub Sub
categoria 1A categoria 2A
Sub Sub
categoria 1B categoria 2B
Sub
categoria 1C
e sub categorias:
 Ligação para o início e fim de página no caso de esta necessitar de barra de

rolagem vertical com o uso de botões “ir para o fim” e ir para o início.
 Ir para  Ir para
o fim o Início
 Se necessário criar botões para os tópicos que o ecrã tem.
 Tópico  Tópico  Tópico

Página | 26
1 2 3
05
 Ligação, em todos os ecrãs, para a página principal, um bom exemplo é usar
o logotipo para ir para a página principal.
 Máximo 3 cliques para chegar a qualquer ecrã.
 O(s) menu(s) devem estar sempre na mesma posição no ecrã e não devem
mudar de aspeto visual.
 O ecrã deve conter informação sobre a localização do utilizador;
Página inicial > Categoria 1 > produto X
 Depois de concebido o sistema de navegação, devem ser testadas todas as

ligações e verificar se funcionam como se esperava.
 Verifique que todas as ligações fazem sentido, se existem por uma razão
lógica.
 Não coloque ligações que conduzam a mensagens de erro ou a ficheiros que

não existem.
 Evite estabelecer ligações que conduzam a páginas “em construção” ou
“brevemente disponível”.
 Não coloque a aplicação disponível sem tudo estar funcional.
 Deve convidar-se outra pessoa (ou pessoas) para fazer o teste da

funcionalidade, verificar as dificuldades encontradas, a correção ortográfica,
e se tudo funcionar corretamente considera-se a aplicação pronta para ser
disponibilizada.
3.2. Coerência e funcionalidade
Página | 27
05
O desenho visual da aplicação inclui as ferramentas que o utilizador possui para
aceder e navegar ao longo da aplicação usando:
 Elementos gráficos
 Organização dos elementos no ecrã
 Apresentação da informação
 Comandos do ecrã
 Dispositivos (ratos, teclados, câmaras, joysticks, etc…)
A conceção da aplicação deve obedecer a alguns princípios da comunicação visual,

tendo em conta:
 Fatores de perceção
 Legibilidade
 Unidade organizacional
 Códigos de cor
 Estruturas de acesso à informação.
Conseguir assim, boas ideias para o desenho de aplicações é algo que se reveste de
complexidade, pois são vários os aspetos a ter em conta.
O que se pretende com uma boa aplicação é tornar a interação do utilizador com o
documento hipermédia, fácil, agradável, intuitiva, numa palavra – amigável.
A estruturação da informação e a organização do ecrã é a chave para uma boa

usabilidade e uma navegação mais fluida e consistente.
A organização do ecrã requer a atenção de alguns princípios:
Página | 28
05
 O ecrã deve conter informação sobre o conteúdo da página, por exemplo
títulos e sub títulos;
 O ecrã não deve estar sobrecarregado com objetos;
 Os objetos que se repetem devem ocupar a mesma posição relativa no ecrã;
 Os ícones devem ser escolhidos de forma a fornecerem uma indicação clara

da função que desempenha;
 As zonas de informação devem aparecer sempre na mesma posição;
 A informação na página deve estar reduzida ao essencial. Deve evitar-se a

necessidade de recorrer às barras de rolagem, exceção para as páginas de
documentos (artigos, por exemplo);
 Evite páginas com imagens grandes e pesadas, que demorem em ser

carregadas.
Especificadades dos Websites
 Os links dos menus devem ser feitos em texto, e não em imagens, para que
os motores de busca identifiquem o menu corretamente e façam uma
melhor indexação do site e respetivas páginas.
 Aplicação da tag <title> em cada link do menu, desta forma, além dos
motores de busca reconhecerem melhor cada link, também os utilizadores
com necessidades especiais terão um acesso mais eficaz a todo o site.
 Definir que links abrem páginas no mesmo ecrã ou noutro (num novo
separador ou janela) para que utilizador não saia para outro site caso se faça
uma ligação externa, ou que o utilizador tenha uma nova janela sempre que
clicar num link que abre uma página interna do site.
 Header, Footer e Menu devem manter o utilizador seguro da sua localização.
Página | 29
05
 Cores do site não devem mudar com a navegação.
4. Storyboard
 O storyboard é um guia visual narrando as principais cenas de uma obra

audiovisual.
 São desenhos rápidos e com poucos detalhes, sendo o mais objetivo

possível.
 Audiovisual é puro movimento, o storyboard serve de ignição deste

movimento que é traçado por linhas e gestos no papel.
 O principal objetivo é transpor as cenas/ecrãs da animação ou navegação da

aplicação para quadros de fácil visualização.
 Os desenhos ajudam a visualizar toda a dinâmica do movimento/interação e

posicionamento dos elementos.
 É como um mapa que auxilia desde o diretor do projeto, executantes,
clientes e todos os outros intervenientes no processo de desenvolvimento de
uma aplicação ou animação.
 É utilizado em qualquer média audiovisual como:
o Filmes;
o Animações 2D ou 3D;
o Jogos de vídeo;
o Web sites;
o Telenovelas;
Página | 30
05
o Anúncios;
o Videoclipes;
o Etc;
 Podem ser utilizados no teatro para o diretor da peça compreender melhor o

cenário e o posicionamento dos atores no palco.
 Nos filmes de animação possibilitam uma primeira aproximação do projeto a

ser desenvolvido.
 Na animação de objetos é feito o planeamento dos movimentos a serem

dados nas cenas.
 São uma versão prévia do filme/animação no formato de uma história em

quadrinhos.
 Diferente de uma ilustração ou desenho que é refinada e possui o estilo

pessoal do autor.
Página | 31
05
 Deve possuir um estilo neutro sendo objetivo e fiel a cena narrada no
projeto.
Página | 32
05
Página | 33
05
Página | 34
05
Página | 35
05
Página | 36
05
Curiosidade
Sabia que a história dos “três porquinhos” tem a ver com o Design
Educacional, mais especificamente, na produção dos storyboards? A ideia
de utilizar storyboards foi desenvolvido no Walt Disney Studio no começo
dos anos 1930. Disney e o seu animador Webb Smith tiveram a ideia de
desenhar cenas em folhas separadas de papel para contar uma história em
sequência, criando assim oprimeiro storyboard (Christopher Finch, The
Art of Walt Disney, Abrams, 1973 ). Os primeiros storyboards completos
foram criados para a Disney em 1933, no curta “os Três Porquinhos” (The
Story of Walt Disney, Henry Holt, 1956).
Página | 37
05
4.1. Materiais a usar
 Ferramentas de desenho como papel, lápis e caneta ou seja materiais

tradicionais e simples.
 Computador.
 Mesa digitalizadora.
 Scanner
 lápis pastel seco, carvão, barra de grafite
4.2. Como fazer?
Uma historia multimídia é uma combinação de vídeo, texto, fotos, áudio, gráficos e
interatividade. Então é necessário idealizar esses elementos na mente. E depois:
 Dividir a história/aplicação em cenas.
 Fazer os primeiros esboços descrevendo a história principal ou ecrã inicial:
o Quais elementos que vai incluir.
o Quais são os links ou relações para outras seções da história.
o Como vai ser o menu ou esquema de navegação para o acesso do

conteúdo.
o Os elementos multimédia na página principal.

Página | 38
05
o Os elementos visuais contidos, bem como que vídeos e figuras
estarão na primeira página.
 Fazer o mesmo para as outras cenas ou ecrãs uma a uma, acrescentando os

elementos necessários de forma coerente.
 Escrever notas para ajudar a perceber o desenho:
o Perfis das pessoas envolvidas nas histórias
o Descrever o evento ou situação
o O processo ou como alguma coisa funciona
o Prós e contras de uma situação em particular
o A história do evento ou situação
o Outras especificidades relativas à historia ou aplicação
 Pode dividir o conteúdo da história entre as Mídias: vídeo, fotos, áudio,

gráficos, texto e o que mais surgir.
Um bom storyboard não precisa ser artístico. Serve como um guia de
planeamento, para que erros no projeto (ou a falta dele) sejam evitados,
maximizando a qualidade de toda a produção.
4.3. Elementos necessários na construção de um

storyboard:
 Área de Conteúdo: define todos os elementos de interface da aplicação:
o Botões de navegação
Página | 39
05
o Tipos de letras
o Layout
o Informações de navegação (indicam qual ação deve ser tomada em

cada situação)
o Diagramação dos elementos da página (imagens, textos, animações,

áudio), etc.
o Descreva também os metadados do projeto, tais como a data e

versão do storyboard, o responsável, o nome do curso, etc. Insira um
“identificador” (ID).
o Pode ter quadros apenas com informações para desenvolvimento.
 Área de Orientação para a Produção: Deverá conter as informações

para a equipa de desenvolvimento sobre as funcionalidades do respetivo
ecrã, ou seja, como os recursos visuais na “área de conteúdo” irão interagir.
o Procure ser objetivo, indicando exatamente o que será feito.
o Este campo representa a comunicação entre quem elabora o
storyboard e quem desenvolve ou o cliente.
o Se a descrição for muito longa pode dar indicação para que o

contactem quando estiverem a desenvolver este ecrã ou frame da
animação.
 Outras informações:
o Número do desenho ou cena
o Enquadramento
o Indicadores cinéticos
Página | 40
05
o A duração e tipo de cada transição/animação.
o Exibição do diálogo
o Efeitos sonoros ou especiais.
4.4. Fluxo da página e ligação entre os ecrãs
Devem ser adicionadas anotações (em Inglês e, geralmente, em vermelho), que

permitem uma melhor compreensão do que acontece:
 O movimento feito por uma personagem/objeto (indicado por setas);
 Entrada (IN) e saída (OUT) de caixas de texto ou uma animação:
o Seta verde para (IN);
o Seta vermelha) para (OUT);
 Os movimentos de câmara
 Setas que indicam a relação entre os ecrãs, caso a animação/navegação não
siga um movimento linear. Estas setas devem ter indicações do tipo:
o Quando se clica neste botão será apresentado…
o Passados 15 segundos muda para…
o Se o utilizador não interagir é apresentado…
o Etc…
Ver imagens da página:
http://todografico.wikispaces.com/El+storyboard
Página | 41
05
Página | 42
05
Bibliografia & Webgrafia:
WebSites Consultados em Setembro de 2013:
http://www.ensino.uevora.pt/inter/storyboard.pdf
http://www.curtasmetragens.com.br/
http://www.instructionaldesign.org/storyboarding.html
http://todografico.wikispaces.com/El+storyboard
http://www.leonelcunha.com/aulas12j/documentos/unid8/design_navegacao.pdf
http://www.iisd.org/sdcn/webworks/ia/nav.htm
Página | 43

Organograma e storyboard de aplicação multimédia

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Organograma e storyboard de aplicação multimédia

Enviado por

Direitos autorais:

Formatos disponíveis

Recursos Pedagógicos

Designação da Acção: Técnico/a de Multimédia

Entidade Promotora: Megaexpansão Entidade Formadora: Megaexpansão

Entidade Certificadora: IEFP Código Acção: 5/1-TM-1

Código Administrativo SIGO: n/a Projecto: 44/DL/2012

Tipologias de Intervenção: 1.1. Sistema de

Nível de Qualificação: 4 Região: Lisboa e Vale do Tejo

Local de Realização: Caldas da Rainha Duração: 3275 Horas

Data Início: 26 de Dezembro de 2012 Data Fim: 31 de Dezembro de 2014

Nome Formador(a): Rui Miguel Período de Formação: 2

Módulo: 0148-Organograma e storyboard de uma aplicação off-line

 É fundamental, para o técnico multimédia construir estruturas

 Compreender a importância de uma estrutura de pastas e

1.1. FAZES DE DESENVOLVIMENTO DE UMA APLICAÇÃO..................................................................................4

3.1. LIGAÇÕES ENTRE ECRÃS....................................................................................................................22

4.1. MATERIAIS A USAR..........................................................................................................................34

1.1. Fazes de desenvolvimento de uma aplicação

1.2. Arquitetura de informação

Ao construir uma aplicação a arquitetura de Informação projeta a estrutura, o

 Outras aplicações existentes

 Band Book da organização

 Posição da marca/organização face à concorrência

 Documentos existentes/informação disponibilizada

 Conquista de mais utilizadores/clientes?

 Melhorar relação cliente/organização?

 Tarefas que serão disponibilizadas

 Comportamentos de busca de informação

 Experiência com a organização

 Experiência com aplicações semelhantes

"Arquitetura de Informação é a prática de projetar a infraestrutura,

"O principal trabalho de um arquiteto de informação é organizar a

Nesta fase é muito importante que se definam objetivos a cumprir. É muito

 Quantidade de novos clientes;

 Redução de tempo de utilização da aplicação ou do espaço público;

 Quantos colaboradores deixaram de ser necessários;

 Quantidade de produtos/serviços vendidos;

 Tempo reduzido em esperas;

 Aumento do volume de faturação;

Um organograma é um gráfico que representa a estrutura da aplicação

Depois de definida a arquitetura de informação e objetivos deve-se representar

Vantagens de fazer os primeiros esboços em papel

 Muito fácil esquematização (trabalha-se sempre muito mais rápido com o

 Melhor visualização (pode ver-se todo o organograma na mesa, colocando

 Todos os intervenientes no desenvolvimento da aplicação podem visualizar e

 Com os esboços em papel finalizados, a sua passagem para o computador é

Vantagens do uso de fluxogramas/organogramas

 Todos os intervenientes conhecem a estrutura da aplicação e a sua tarefa;

 Evitam-se alterações complicadas;

 Identificação das fases críticas do processo de desenvolvimento;

 Conhecimento da sequência e encadeamento das atividades, dando uma

 Adequação de normas e processos;

 Fortalecimento do trabalho em equipa;

 Reuniões mais rápidas porque todos compreendem a estrutura.

 Deverão ser elaborados vários organogramas dependendo da complexidade

 De seguida serão elaborados organogramas com os detalhes importantes

 Deverão ser elaborados organogramas com a atribuição de tarefas às

 Um dos organogramas deverá ter as datas de conclusão para as fases de

o Fases do projeto que precisam de ser concluídas para outras serem

o Fases que não estão dependentes da conclusão de outra;

o Tarefas terão que ser elaboradas em simultâneo

o No final de uma tarefa informar a equipa X;

o Contactos das equipas/colaboradores;