DMG CAP03 2025 VA02 STORYBOARDS E WIREFRAMES

Quer da vida seus projetos
de animação

de forma organizada
e eficiente.

Nesta aula vamos aprender
um pouco mais sobre storyboard

e wireframes.

Os storyboard são representações
visuais sequenciais

de uma história,
de uma determinada animação.

Nele você encontra ações,
diálogos,

cenas importantes
para o desenvolvimento da narrativa.

E através dele você consegue
evoluir de um esboço

para um desenho mais detalhado,
por exemplo.

Existem diversas ferramentas
que você pode utilizar

para criar um bom storyboard.

Temos a Storyboard That,
temos a Storyboard pró,

storyboard.

Temos uma ferramenta que vamos
utilizar aqui que é storyboarder.ai.

Mas temos a principal,
que na verdade é a fundamental

para você conseguir construir
um processo criativo

muito mais dinâmico
que é papel e caneta.

Nele você consegue criar
uma extensão da sua mente

para sua mão.

Inclusive passando
para o seu coração

para conseguir através
dos seus storyboard,

transmitir a emoção,
a sensação que você deseja.

O storyboard é importante,
porque ele facilita o processo

de desenvolvimento da animação.

Ele consegue construir
uma facilidade de interação

entre a equipe do projeto tambem
e além disso,

você consegue de uma maneira
muito melhor visualizar todo o projeto,

toda a animação naquele seu storyboard.

Eu digitei aqui no Google
o "storyboarder.ai"

e chegamos a esse site.

Eu vou demonstrar como existem
ferramentas que utilizam

de inteligência artificial
para facilitar o processo de criação

de storyboard.

Aqui essa ferramenta
você pode perceber que ela tem.

Ele é free trial,
mas você também pode pagar.

No caso,
a gente vai usar o gratuito.

Obviamente nós temos aqui
que fazer o nosso cadastro bonito.

Vou colocar aqui o meu e-mail,
meu password

que eu sei que você não sabe qual é.

E minha companhia,
que é a FIAP.

Aceita os termos.

Você vai receber no seu email
um link de verificação

para você confirmar
que você está fazendo

o seu cadastro na plataforma.

E aí você recebendo esse link,
você volta para plataforma.

Depois de validar o seu
cadastro,

clique em Login.

Você vai acessar a tela,
aqui você pode criar um novo projeto.

Definido o "concept".

Aqui você pode colocar:
"Aula do professor Éder".

Aqui você pode escolher um gênero

que no caso aqui
para a gente é animação.

Eu clico em "próximo".

Aqui eu posso subir um PDF
com o arquivo do roteiro já pronto

ou aqui eu posso colocar um roteiro.

Neste caso, eu vou clicar,
eu vou colocar um roteiro

que eu escolhi
em uma inteligência artificial qualquer.

É um roteiro qualquer,
mas que vai servir para demonstrar

como funciona a ferramenta.

Chegando nesse espaço,
aqui você pode definir

qual o estilo que você quer
para o seu storyboard.

Eu vou pegar esse mais simples aqui,
porque é só um storyboard, né?

Adicionei ao projeto.

E ele vai começar a fazer a leitura
para gerar o storyboard.

E o mais bacana dessa ferramenta
é que você consegue editar

cada cena do seu storyboard.

Desde o texto do seu roteiro,
mas também do estilo,

de como você quer a cena,
ou seja,

pela perspectiva um
ou pela perspectiva outra,

enfim,
tem muita coisa.

Vamos ver.

"Generate Screenplay".

Percebe que ele já começa a colocar
em um padrão de texto mesmo,

de roteiro.

Depois que ele criar este padrão,
aí a gente vai passar

para a definição das cenas.

Vamos aguardando.
Fechou.

Clico aqui em "shotlist".

E ele vai para a próxima etapa.

Clicamos em "Generate shotlist".
"Continue".

E aqui ele começa já
a definir as cenas.

Aqui você pode ver a descrição
das cenas,

totalmente editável.

Aqui você pode definir o tamanho,
você pode definir a perspectiva,

você pode definir o movimento.

Obviamente ele não vai colocar
em tudo,

porque aqui exige também
que para você ter o roteiro completo,

que seja um plano pago.

Como está utilizando o programa free,

Ele está colocando só algumas cenas,
mas é só para demonstração mesmo.

"Generate storyboard".

E aqui ele já começa a gerar cenas.

A primeira cena,
a segunda cena.

Aqui você pode criar
uma variação da cena,

eu vou criar para você ter uma noção.

Você pode também subir
uma imagem específica,

você pode editar o texto.

Aqui você pode refazer,
só que exige que você tenha o plano.

Mas ó ele já escolheu
uma nova imagem.

Os textos,
aqui você usa a variação.

Tem todo o storyboard pronto.

E aqui você pode até buscar
uma forma de animá-los.

Eu não acho que entra no contexto,
mas ajuda para quem quiser ampliar

e fazer um storyboard mais detalhado.

E clicando em "Animatic"
você pode expandir,

deixar o seu storyboard
mais detalhado,

criando animações especifica para eles.

Mas isso é só para você
ampliar o grau de compreensão

do que você está querendo
passar no seu storyboard.

E temos também os wireframes,
que são desenhos

ou rascunhos,
ou esboços simplistas mesmo,

de uma determinada interface ou tela
de um projeto de animação.

A partir dele, você pode usar formas
geométricas para desenvolvê-lo.

E ele consegue transmitir a ideia

do que é essa interface
de forma antecipada,

fazendo com que toda a equipe
do projeto consiga visualizar

o que a gente deseja,
quais são os nossos objetivos

ao desenvolver aquele wireframe.

Você pode para desenvolver
essa peça desde papel e caneta,

o tradicional.

Mas também podemos fazer
um figma utilizando FigJam,

podemos utilizar o Miro,
podemos utilizar o Adobe XD,

Balsamiq.

Enfim,
existe diversas ferramentas para isso.

Hoje nós vamos demonstrar
como se utiliza o Miro

para fazer um wireframe.

Vamos para a tela.

Como vocês podem perceber,
eu abri o Google

e já digitei "Miro" no buscador.

O primeiro site
é o site da plataforma Miro.

Está aqui ó,
"workspace for innovation",

que é basicamente uma ferramenta
para criação de diagramas,

de fluxogramas,
de wireframes, enfim.

De diversas coisas,
e que ela é muito bacana

para você construir também
mapas mentais.

Mas o nosso foco é wireframe.

Cliquei aqui no meio, eu já estou
na minha conta, então você pode ir lá

como em todas as ferramentas,
fazer o seu login, receber o seu link no.

E-Mail e autorizar.

Para adentrar esta plataforma maravilhosa.

Cliquei aqui no novo Burd.

Aqui ele
sugere uma série de templates prontos.

Eu vou fechar porque não é o objetivo.

Aqui você pode colocar.

O nome do seu projeto Aula do professor.

Opa, Errando a aula do professor

dele. E nele
você percebe que ele tem várias

ou vários elementos, ou aqui é onde que
aquela aba que abriu para gente sugerindo

templates pré fabricados. Aqui você pode.

Colocar um texto, colocar Professor Éder

da FIAP

e você pode

o professor da FIAP.

Você pode aumentar,
você pode mudar de cor.

Enfim,

selecionar a pasta muda de cor aqui,
colocar amarelo,

colocar um fundo azul.

Enfim, você tem.

Você pode utilizar o texto da melhor forma
possível.

Você também tem stickers para anotações?

Você pode escrever alguma coisa aqui.

Mas o que mais a gente quer saber?

Essa ferramente
demais aqui eu clicando aqui.

E vindo aqui e escrevendo o iframe
eu clico.

Nessa biblioteca de uma frame aqui
e você já tem formatos de iPhone,

por exemplo, já prontos de tablet.

Já pronto.

Se eu segurar o alt.

E com o scroll do mouse.

Voltar, ele vai diminuindo a.

Tela e vai aumentando a.

Aqui você tem formas que você pode.

Trabalhar com triângulos, com sei lá,

um elipses com texto.

Então crie uma forma aqui.

Essa forma vê aqui.

Então deixa eu ver.

Eu posso aumentar ela,
Eu posso mudar de lugar, Eu.

Posso apagar ela com delete, Posso criar

essas ferramentas já prontas.

Aqui, por exemplo,
a ação é o input de bug de procura.

Temos também.

Avatar.

Então aqui.

Aqui eu já estou construindo um wireframe
para um aplicativo.

Está vendo?

Obviamente de uma forma bem tosca,
porque aqui é só uma demonstração, né?

Que bonitinho!

Posso colocar uma imagem aqui.

Quando você constrói a frame
já sabe que aqui vai ser uma imagem.

Que aqui já vai ser um vídeo que aqui

você vai ter uma lista.

Que aqui você pode ter um tudo.

Você pode aumentar
ele aqui, o bonitinho diminuir,

vendo você consegue.

Só com essa parte que aí você tem vários
estilos, só com essa partezinha aqui

você consegue começar a criar uma iframe

bem bacana de um aplicativo, de um site.

É uma animação em geral.

Então o Miro é uma ferramenta sensacional

para você explorar da melhor maneira
possível

e gratuita.

Então aproveite para praticar tudo
que você for fazer.

Costume adiantar os seus projetos

com um frame bem elaborado,
com o storyboard bem elaborado,

porque a partir daí você consegue integrar
a sua equipe de uma maneira

muito mais eficiente para conseguir
de alguma forma efetivar o seu projeto.