Especializao em Design Instrucional para EaD Virtual: tecnologias, tcnicas e metodologias NEaD - Universidade Federal de Itajub

Circuito Hidrulico Bsico Detalhes da Produo

Prof. Dr. Jos Hamilton Chaves Gorgulho Jnior, Janeiro de 2012

O vdeo que simula uma reunio entre o designer instrucional e o cliente permite entender a funo do storyboard. Porm, os pequenos detalhes que no puderam ser mostrados l sero discutidos aqui. Primeira tela: objetivo No incio do vdeo o cliente diz estou pensando em apenas duas telas, mas depois o designer instrucional sugere uma primeira tela onde seriam apresentados o objetivo e dados do desenvolvimento do programa. O cliente aceitou a sugesto e deu-se incio elaborao do layout da tela. O rascunho elaborado est na Figura 1.

Figura 1 Esboo da primeira tela

Na Figura 2 pode-se observar a verso final deste storyboard. O designer instrucional optou por representar o que foi esboado usando recursos computacionais ao invs da imagem digitalizada do esboo. Nesta figura tambm possvel ver as anotaes realizadas para as pessoas envolvidas na elaborao da tela descrita pelo storyboard.
1

Especializao em Design Instrucional para EaD Virtual: tecnologias, tcnicas e metodologias NEaD - Universidade Federal de Itajub

Figura 2 Storyboard da primeira tela

A primeira informao envolve o prprio cliente que, neste projeto, o professor conteudista, que enviou as informaes solicitadas pelo e-mail mostrado a seguir. Caro DI O nome da disciplina em que usarei o programa EME610 Sistemas Hidropneumticos. O texto para a tela que voc sugeriu pode ser: Este programa tem o objetivo de apresentar todos os componentes que formam um circuito hidrulico bsico mostrando para cada componente sua simbologia, um texto com a sua funo e tambm uma fotografia. O programa tambm mostra o funcionamento do circuito. Aguardo o seu contato. At mais... Prof. Jos Hamilton Chaves Gorgulho Jnior
Universidade Federal de Itajub (UNIFEI) Instituto de Engenharia de Produo e Gesto (IEPG)

O designer instrucional fez algumas pequenas alterae no texto e, em seguida, conversou com o designer grfico que executou o seu trabalho: elaborou o layout final com base na sugesto do storyboard. Aps a tela estar
2

Especializao em Design Instrucional para EaD Virtual: tecnologias, tcnicas e metodologias NEaD - Universidade Federal de Itajub

pronta o revisor fez a sua anlise e sugestes, que foram acatadas pelo designer grfico e implementadas. Em seguida o designer instrucional apresentou a tela ao cliente que aprovou o resultado (Figura 3).

Figura 3 Primeira tela

Observa-se que as informaes sobre a elaborao do projeto no foram colocadas nesta tela, pois o visual ficaria muito poludo. Decidiu-se pelo uso de uma janela que aparece quando se clica no boto sobre. A ltima anotao no primeiro storyboard (aprovao do layout pelo cliente) tem grande importncia no projeto, pois trata-se da definio do visual. Como as demais telas compartilham do mesmo formato deve-se garantir a aprovao antes de seguir com o desenvolvimento. Uma alterao no layout depois de elaborado todo o projeto certamente traria um grande retrabalho. O trabalho do designer grfico destaca-se quando se compara o storyboard com a tela final. Nota-se primeiro a definio das cores: fundo branco na barra superior com texto em azul claro e fundo cinza na rea principal com texto em preto. Foram definidas bordas tambm em azul, mas com uma tonalidade mais profunda. As barras que separam os smbolos foram inclinadas, diferente do que sugeria o storyboard.
3

Especializao em Design Instrucional para EaD Virtual: tecnologias, tcnicas e metodologias NEaD - Universidade Federal de Itajub

A barra inferior com os botes de avanar e recuar, sugeridos pelo designer instrucional, no foram utilizados. Nesta primeira tela no h para onde recuar. Alm disso, a barra ocuparia um espao importante nas telas seguintes. Segunda tela: componentes hidrulicos O storyboard inicial da segunda tela ficou bastante simples, como podese ver na Figura 4 (antes de serem preenchidas as informaes na barra superior e direita). Basicamente tem-se a definio da posio do esquema hidrulico no lado direito e as informaes sobre os componentes do lado esquerdo (nomes, texto descritivo e imagem).

Figura 4 Storyboard incompleto da segunda tela

O storyboard final, com as informaes para a equipe de produo, est na Figura 5. Nota-se que falta uma informao para o ilustrador que, alm de elaborar os smbolos em preto e em cores, deveria cri-los em cinza, como foi discutido na reunio apresentada no vdeo. Isso foi corrigido posteriormente.

Especializao em Design Instrucional para EaD Virtual: tecnologias, tcnicas e metodologias NEaD - Universidade Federal de Itajub

Figura 5 Storyboard final da segunda tela

O ilustrador teve como base para o seu trabalho o material impresso passado pelo cliente: o esquema da pgina 60 (Figura 6, esquerda) e o desenho dos smbolos individuais nas pginas 125 131. No lado direito da Figura 6 tem-se alguns dos desenhos elaborados pelo ilustrador.

Figura 6 Material passado pelo cliente (esquerda) e alguns desenhos do ilustrador

Nesta segunda tela tambm nota-se decises tomadas pelo designer grfico. A Figura 7 traz a primeira verso dessa tela, seguindo a sugesto do storyboard.
5

Especializao em Design Instrucional para EaD Virtual: tecnologias, tcnicas e metodologias NEaD - Universidade Federal de Itajub

Figura 7 Verso inicial da segunda tela (para o manmetro)

O designer grfico observou que tanto o texto quanto a foto ficaram pequenos e tambm achou que o quadro com esses objetos estava simples. Por isso elaborou uma nova verso com o conceito de abas. Em uma aba tem-se apenas o texto (Figura 8) e na outra apenas a imagem (Figura 9).

Figura 8 Segunda tela (texto do manmetro)

Nota-se que a quebra de cantos do quadro deixou a tela mais elegante.

6

Especializao em Design Instrucional para EaD Virtual: tecnologias, tcnicas e metodologias NEaD - Universidade Federal de Itajub

Figura 9 Segunda tela (fotografia do manmetro)

Observa-se tambm que a deciso do designer grfico em abolir os botes de avanar e retornar foi acertada. O avano ocorre quando se clica no smbolo (Figura 10) e o recuo se d pelo boto vermelho tpico da interface do sistema operacional. Alm disso, a eliminao da barra inferior deixou mais espao para o contedo.

Figura 10 Segunda tela (seleo dos smbolos)

Especializao em Design Instrucional para EaD Virtual: tecnologias, tcnicas e metodologias NEaD - Universidade Federal de Itajub

Neste storyboard o pequeno texto dedicado ao programador (substituir texto e foto conforme o smbolo clicado) esconde uma grande parte do trabalho de criao. Na realidade texto e foto no so substitudos na tela: a tela toda substituda. Porm, como o fundo se mantm igual tem-se a impresso de que apenas seu contedo sofre alterao. Na Figura 11 v-se que o produto, que para o cliente e alunos, possui 3 telas, tem na verdade 33.

Figura 11 Telas que compe o produto final

A Figura 12, que parte de um storyboard de navegao, ajuda a compreender o processo. A segunda tela que o usurio v pela primeira vez o Slide 3. As informaes referentes ao manmetro esto nos slides 14 e 15. No slide 3 o programador definiu que, quando se clica no smbolo do manmetro (destacado em vermelho) salta-se para o slide 14 (seta vermelha).

Figura 12 Telas que compe o produto final

Especializao em Design Instrucional para EaD Virtual: tecnologias, tcnicas e metodologias NEaD - Universidade Federal de Itajub

No slide 14 h dois lugares que podem ser clicados. Clicando na aba imagem (destacada em azul) salta-se para o slide 15 ou clicando-se no boto vermelho (destacado em verde), retorna-se ao slide 3. De forma similar, no slide 15 tem-se a opo de retornar ao slide 14 (clicando na aba descrio, destacada em laranja) ou ao slide 3 (clicando no boto vermelho, destacado em verde). Obviamente, no slide 3, h a programao para os outros 10 smbolos, envolvendo outros 20 slides. Terceira tela: funcionamento A tela de funcionamento foi elaborada por meio de 3 storyboards. O primeiro descreve o que ocorre quando o circuito hidrulico ativado (Figura 13) e utilizou o prprio desenho apresentado pelo cliente durante a reunio.

Figura 13 Storyboard da terceira tela: acionamento

Como pode-se observar na Figura 14, no incio a tela apresenta um pequeno texto e possui apenas um smbolo que pode ser clicado: motor eltrico. Aps o smbolo ser clicado a tela fica como mostra a Figura 15. Observa-se a mudana do texto, das cores e a alterao da posio da seta no smbolo da vlvula limitadora de presso.

Especializao em Design Instrucional para EaD Virtual: tecnologias, tcnicas e metodologias NEaD - Universidade Federal de Itajub

Figura 14 Terceira tela: antes do acionamento do circuito hidrulico

possvel notar que o smbolo do manmetro tambm sofreu alterao. Essa deciso foi tomada na reunio de aprovao com o cliente e, devido a isso, no est registrada no storyboard.

Figura 15 Terceira tela: circuito hidrulico acionado

A prxima etapa, que consiste na animao do avano do atuador, foi registrada no storyboard da Figura 16.
10

Especializao em Design Instrucional para EaD Virtual: tecnologias, tcnicas e metodologias NEaD - Universidade Federal de Itajub

Figura 16 Storyboard do avano do atuador

Na tela da Figura 15, alm do boto voltar, pode-se clicar apenas no smbolo do boto da vlvula direcional. Quando isso ocorre o texto alterado bem como a posio e as cores de alguns smbolos (Figura 17). A animao ocorre por 15 segundos e, ao final, ocorrem mudanas nos smbolos do manmetro e da vlvula limitadora de presso (Figura 18).

Figura 17 Terceira tela: avano do atuador

11

Especializao em Design Instrucional para EaD Virtual: tecnologias, tcnicas e metodologias NEaD - Universidade Federal de Itajub

Figura 18 Terceira tela: atuador avanado

A ltima etapa que ocorre na terceira tela o recuo do atuador aps o usurio clicar novamente no smbolo do boto da vlvula direcional, que foi descrito no ltimo storyboard (Figura 19).

Figura 19 Storyboard do recuo do atuador

Quando o smbolo clicado o texto alterado bem como a posio e as cores de alguns smbolos (Figura 20). A animao ocorre por 10 segundos e,
12

Especializao em Design Instrucional para EaD Virtual: tecnologias, tcnicas e metodologias NEaD - Universidade Federal de Itajub

ao final ocorrem mudanas nos smbolos do manmetro e da vlvula limitadora de presso, voltando condio da Figura 15.

Figura 20 Terceira tela: atuador recuando

13