DMG CAP03 2025 VA02 STORYBOARDS E WIREFRAMES

Quer dar vida aos seus projetos
de animação

de forma organizada e eficiente?

Nesta aula,
vamos aprender um pouco mais

sobre storyboards e wireframes.

Os storyboards 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 Pro,

Storyboarder.

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

Mas temos a principal,
que na verdade é a fundamental

para você conseguir construir
um processo criativo

muito mais dinâmico,
que é o papel e caneta.

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

para a sua mão.

Inclusive passando
para o seu coração

para conseguir através
dos seus storyboards,

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

O storyboard é importante,
porque facilita

o processo de desenvolvimento
da animação.

Ele consegue construir
uma facilidade de interação

entre a equipe do projeto também.

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 neste 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 é free trial,
mas você também pode pagar.

No caso,
a gente vai usar o gratuito.

Obviamente nós temos que fazer aqui
o nosso cadastro bonito, né?

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 e-mail
um link de verificação

para você confirmar
que você está fazendo

o seu cadastro na plataforma.

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

Depois de validar o seu
cadastro,

clique em login.

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

definindo 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 eu posso colocar um roteiro.

Neste caso, eu vou clicar
e 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 storyboarder, 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 por outra perspectiva, 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 aguardar.

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, olha,

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 também exige
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 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 especificas
para ele.

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 usar para desenvolver
essa peça desde papel e caneta,

o tradicional,

mas também podemos fazer no figma
utilizando FigJam,

podemos utilizar o Miro,
podemos utilizar o Adobe XD,

Balsamiq, enfim,

existem 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 é muito bacana

para você construir também
mapas mentais.

Mas o nosso foco é wireframe.

Cliquei aqui no Miro,
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 Board".

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.

"Aula do professor Eder"

E nele você percebe
que tem vários elementos.

Aqui é aquela aba que abriu
para gente sugerindo

templates pré-fabricados.

Aqui você pode colocar um texto.

Colocar "professor da FIAP".

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

Enfim.

Selecionar,
posso muda de cor aqui,

colocar amarelo,
colocar um fundo azul.

Enfim, você utilizar o texto
da melhor forma possível.

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

Você pode escrever
alguma coisa aqui, né?

Mas o que mais a gente quer saber

é essa ferramenta de mais aqui.

Clicando e vindo aqui
e escrevendo "wireframe",

eu clico nessa biblioteca
de uma wireframe.

E aqui 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.

Aqui você tem formas que você pode
trabalhar com triângulos,

com, sei lá, elipses,

com texto.

Então criei uma forma,
essa forma vem 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.

Um input de procura.

Temos também,
avatar.

Então 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é?

Aqui olha, bonito.

Posso colocar uma imagem.

Aqui quando você constrói wireframe

você já sabe que será uma imagem.

Que aqui já será um vídeo,
que aqui você vai ter uma lista.

Que aqui você pode ter um toggle,

você pode aumentar ele aqui,
diminuir.

Você consegue
só com essa parte aqui...

Aí você tem vários estilos.

Só com essa parte aqui,
você consegue começar

a criar uma wireframe bem bacana
de um aplicativo,

de um site,
de uma animação em geral.

Então, o Miro é uma ferramenta
sensacional para você explorar

da melhor maneira possível.

É gratuita.

Então, aproveite para praticar.

Tudo que você for fazer,
costume adiantar os seus projetos

com um wireframe 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.