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 que aqui que fazer

o nosso cadastro bonitinho.

Vou colocar aqui

o meu e-mail zinho bonitinho.

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 cessar a tela.

Aqui você pode criar um novo projeto

definindo o concept.

Aqui você pode colocar a aula

do professor.

Éder Aqui

você pode escolher um gênero
que no caso aqui pra gente a 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.

Uma inteligência artificial qualquer.

E 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 o 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
ou pela perspectiva ou outra.

Enfim, tem muita coisa. Vamos ver.

Generate Screen Play.

Percebe que ele já começa

a colocar num 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 short list.

E ele vai.

Para a próxima etapa.

Clicamos em Criar Chat List.

Continue
e aqui ele começa já a definir as cenas.

Que você pode viu 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 que 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.

Girar o storyboard

e aqui ele já começa a girar as 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. Aqui.

Só que aqui exige que você tenha o plano,

mas ele já escolheu uma nova imagem.

Os textos.

Aqui você 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 Animator que 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 no fim, utilizando

podemos utilizar o Miro,

podemos utilizar o Adobe X de balsâmico.

Enfim,
existe diversas ferramentas para isso.

Hoje nós vamos demonstrar

como se utiliza o Miro
para fazer um iframe.

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 a workspace Ovation,
que é basicamente uma ferramenta

para criação de.

Diagramas, de fluxogramas,
de frames, enfim.

De diversas coisas,
e que ela é muito bacana

para você construir também mapas mentais.

Mas o nosso. Foco é iframe.

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.