Muito bem pessoal! A ideia aqui é a gente falar um pouco de Wide Frames. O que são Wide Frames? Wide Frames são aqueles desenhos que a gente faz antes de começar a produzir um site.
Vai ter gente, por exemplo, que vai falar que esse daqui não é um bom Airframe, porque ele está colorido. Mas é que esse é um caso que eu fiz didático aí, então é uma exceção. Mas a ideia é essa. Na verdade, o termo Airframe... A gente poderia dizer que são aquelas estruturas que o pessoal usa para fazer esculturas, por exemplo, é um airframe.
Se você procurar na internet Wireframe Sculptury Você vai encontrar algo nesse sentido Mas eu vou mostrar para você O wireframe De websites Que a gente costuma fazer para websites Eu vou dividir minha tela aqui Eu já tenho aqui Uma Uma é um papelzinho aqui né com o papelzinho aqui onde eu vou criar o meu ele frame então aqui que eu pretendo fazer o meu aí freio tá é por isso que eu tô um pouco distante da câmera enfim eu dei um pouquinho aqui conseguir fazer isso, né? Então, ó, estamos aqui praticamente em tempo real, eu espero. Eu vou acompanhar pela câmera junto com vocês, tá?
Eu gosto de usar lápis e borrar. borracha para fazer os meus wireframes. Na verdade eu quando faço isso, quando estou trabalhando quando estou trabalhando numa agência por exemplo e eu faço um wireframe, eu faço isso normalmente no momento da brifagem, enquanto estou conversando com o cliente, então às vezes eu faço com caneta na verdade, mas eu acho que o ideal é lápis e borracha né, então lápis e borracha porque se você não tem uma coisa você já faz na hora, já conserta. na hora que tá eu começar o meu ar frame já pensando na responsabilidade depois em como seria o site para o celular tá então eu já sei até mesmo uso régua no uso nada eu já sei que vai ser uma coisa mais é eu vou tentar fazer mais forte do que eu faria eu tô vendo na câmera também difícil de enxergar espero que vocês consigam ver é eu já sei que ele vai ser mais estreito para o Provavelmente, porque vai ser a visão do celular.
Então, por isso, menos largo aqui. Eu vou fazer o seguinte, eu vou pensar num site pessoal que vai ter aí três páginas. A página principal com uma apresentação pessoal, por exemplo, o site pessoal meu. Então, a página principal com uma apresentação do site, com uma apresentação pessoal, uma apresentação minha.
Uma página de projetos, por exemplo, uma página de portfólio e uma página de contatos. Vai ter três páginas. É muito importante que você tenha um briefing correto ou que você esteja fazendo um briefing correto para fazer o seu wireframe.
Por quê? O wireframe é a primeira peça de comunicação visual que você vai ter durante o seu projeto de website visando uma comunicação boa com toda a equipe, inclusive com o cliente. Então, na hora do wireframe, a gente pode fazer um monte de aprovações.
Então, por exemplo, eu vou fazer aqui a ideia que eu... fazer então a minha ideia inicial é assim, como é um site pessoal eu vou fazer uma colocar a foto no centro com uma bolinha aqui não preciso nem desenhar foto nem nada tá gente eu por exemplo desenho muito mais no photoshop no illustrator no corel draw do que a mão né então isso daqui pra mim é muito mais fácil fazer Então eu fiz aqui o topo Como são só Como são só Só Três opções, né, que eu falei Eu vou ter três itens no menu Home ou pessoal ou Davi Portfólio E contatos Eu faria, na verdade, um menu assim A home, portfólio e contatos. Se você achar que não tá claro que esses caras são botões, dá um jeito de deixar isso claro no Airframe.
Então, por exemplo, eu vou dar uma riscadinha neles aqui para deixar claro, para tentar dar um destaque sem a questão de cor, tá? Pode ser que você queira dar outras opções para o cliente. Então, no próprio Airframe, e eu já poderia fazer a dá para gente fazer também uma opção de barra e com menu sanduíche que abriria os três botões eu não faria isso porque é como eu disse eu acho que esse wireframe é muito simples são só três páginas eu faria três botões mesmo né uma outra opção que me ocorreu agora seria também poderia ser também três botões iconográficos e com desenho lá, por exemplo, sei lá, contatos, poderia ser um desenho de uma cartinha, tá? Então, eu posso, inclusive, usar o espaço do wireframe para fazer essa brincadeira, né?
E aí, vou... continuar aqui eu estou pensando na home então na home eu acho que eu teria aqui ó provavelmente como é o site pessoal aqui em cima já vai ser já falei que essa é minha foto né então na rua eu teria que por exemplo apresentação onde eu vou ter um texto e aí eu nem vou escrever é menos que um olen y é só pra eu dar uma ideia pra pessoa que vai, pra todo mundo que vai olhar esse wireframe que isso aqui é um texto aqui então vai ser uma área de texto a vai ser corrido assim poderia ter também um principais projetos e tudo isso a gente provavelmente já estaria no briefing eu tô fazendo um ele frame aqui de improviso só para mostrar para vocês essa questão do airframe né e aí projetos eu poderia por exemplo colocar fotos imagens e também ruim minha posição aqui para desenhar Eu tenho essa mania, não sei se vocês perceberam, mas quando eu estou prestando atenção, eu fico com a língua para fora. É horrível, pensando que tem outras pessoas trabalhando junto com você.
E aí eu até posso falar aqui. projetos para ter uma observação do que vai ser assim algo tipo projetos de destaque e um rodapé aqui embaixo talvez com as minhas mídias sociais E aí em ícones aqui, as mídias sociais. E está pronto o meu wireframe. O que é importante nesse documento, gente? Olha como é simples, né?
O que é importante nesse documento? É que todos os envolvidos entendam principalmente a estrutura de informação que o site vai apresentar. Por que é tão importante? Ah, mas por que eu já não faço isso no computador? Vou falar disso num próximo vídeo.
Vamos falar sobre o wireframe digital também, tá? Mas por que eu não fiz? Por que eu optei por falar... começando desse wireframe manual. Desse wireframe...
Este wireframe analógico, tá? Porque a ideia do wireframe é que ele é uma peça de comunicação muito rápida com o seu cliente e com a sua equipe. Então, se começar a ficar demorado... para fazer um airframe e tal, porque eu estou fazendo na máquina com todo o cuidadinho, talvez o custo-benefício já não seja interessante. Então, tenham isso em mente, tá, gente?
A questão de custo-benefício é muito importante quando eu penso. penso nessa coisa do Airframe. Então, acho que era isso aí que eu queria mostrar. Então, a princípio, essa daqui é uma peça de comunicação, ou seja, a ideia é que todo mundo que vai participar do projeto compreenda qual vai ser o projeto a partir do Airframe. Lembrando que eu só fiz o celular.
o smartphone então só para tela menor né E aí sei lá o smartphone aí eu tenho que ter essa aí hora que for apresentar eu tenho essa essa visão né de que olha na verdade vai parar mais ou menos aqui e E aí O celular, a tela do celular pegaria mais ou menos esse espaço aqui, por exemplo. Está vendo? Tudo a gente pode representar no desenho.
E aí eu rolo. para cima e para baixo. Então é uma forma de a gente testar isso, de tornar isso visível muito rápido e muito barato. Não gostei?
Pega esse cara, joga fora e faça o outro. Vou fazer agora o do desktop, é só ter outra folha de papel. Uma solução talvez seja você, se você quiser ser mais... Caiu uma pena aqui, gente, desculpa. Se você quiser ser mais ecológico, uma solução é usar, por exemplo, lozinha.
Daí você faz o wireframe, escaneia para guardar e apaga, em vez de ficar gastando papel. Peço desculpas pelo barulho aí. Tudo bem, gente. Espero que tenha sido útil. Espero que tenha dado para entender qual é a função e como fazer um wireframe rapidamente.
Muito obrigado. Até a próxima.