Olá pessoal! Tudo bem? No vÃdeo de hoje, nós vamos conversar sobre como criar o seu wireframe. A idéia aqui é desde o que colocar no wireframe, o que não colocar no wireframe, quais as técnicas mais utilizadas; podemos citar aqui algumas ferramentas que são utilizadas. Mas o ideal aqui é que você saiam desse vÃdeo com mente assim, o que eu devo colocar no wireframe, o que não colocar e como deixá-lo bem estruturado para que quando eu o entregue para o meu cliente, ele esteja satisfeito e entendendo, exatamente, para onde o nosso projeto está caminhando, tudo bem? Nessa primeira parte, a gente vai focar em o que colocar no seu wireframe, tudo bem? Lembrando que wireframe é uma representação de baixa fidelidade do seu projeto; então, nós não devemos nos preocupar com cor, tipografia, elementos gráficos, nada disso. Então, na hora de você fazer o seu wireframe, à s vezes, você se sente um pouco desconfortável saber o que colocar, como colocar, o que considerar, até aonde eu posso colocar as coisas, até aonde eu vou estar criando um protótipo ao invés de criar um wireframe. Então, essa etapa, você tem que pensar no seu projeto, ter mente sobre, por exemplo, pensa de uma forma mais abstrata, pensa que você separa o seu projeto grandes partes; então, se você pegar um site, por exemplo, você vai ver que sempre sempre tem algumas áreas comuns. Todo site tem um cabeçalho, ele tem um rodapé, ele tem a sua área de conteúdo e, geralmente, também tem uma barra lateral. Então você tendo já essa estrutura basemente, já facilita, pois você vai saber se vai ter navegação no cabeçalho, mais ou menos, qual o tipo de conteúdo vai ter naquela área separada do meio, o quê que vai ter naquele rodapé, tá bom? E com base nisso, depois que você tem essas áreas bem estruturadas na sua cabeça, bem claro o quê que vai ter nela; você começa a pensar em alguns elementos que começa a compor essas áreas. Então, é como se fosse pequenos componentes que vão compondo componentes maiores, tudo bem? Então o quê que engloba esses pequenos componentes? Pode ser formulário, botões, algum tipo de conteúdo. Então, a partir disso, você consegue traçar melhor qual a linha de raciocÃnio que você vai ter para criar o seu wireframe. Bom, a partir do momento que você consegue enxergar no seu projeto essa estrutura básica e, também, separar, logo de cara, alguns elementos que você vai utilizar para compor esse wireframe, o ideal é você seguir algumas regras para você exibir e organizar esses elementos, tudo bem? Então eu vou passar por alguns pontos aqui aonde você deve responder algumas perguntas para você e, assim, você vai conseguir criar o seu wireframe de forma organizada, limpa, bem simples. Bom, o primeiro ponto, você tem que pensar no conteúdo. O conteúdo, quando eu falo, é que tipo de informação eu vou exibir naquela tela. Seja detalhe de um produto, por exemplo, e-commerce, seja um carrinho, seja um pedido finalizado. Tenha mente que tipo de informação, que tipo de conteúdo, vai ter ali; ele tenta responder essa seguinte pergunta: O que será exibido nessa página? A partir do momento que você pensa nessa pergunta, reflete sobre isso e consegue responder; é exatamente isso que você vai colocar no seu wireframe. O segundo ponto é em relação à estrutura. Quando você pensa em estrutura, o exemplo que foi citado logo no começo do vÃdeo foi, você separou o seu projeto grandes áreas, assim, o cabeçalho, a área de conteúdo, o footer. Então, é mais ou menos esse exercÃcio que você tem que fazer, mas não só para essa visão macro, mas também para os minicomponentes, os componentes menores, essas estruturas menores que vão compor todo o seu wireframe. Então, tenta responder a seguinte pergunta: Como os elementos desta página serão reunidos? Além daquela estrutura básica, que geralmente todo site tem, vamos usar exemplo de detalhe de um produto, no e-commerce. Você vê que, geralmente, tem uma área reservada com uma foto do produto, ou uma galeria de fotos do produto. Ao lado, ou abaixo, sempre tem uma sessão aonde tem nome do produto, descrição do produto, avaliação, valor, informações de pagamento, parcelamento; então, você consegue enxergar microestruturas dentro de uma estrutura maior. Então é esse exercÃcio que você tem que fazer, ter isso mente na hora de montar a sua estrutura e como que elas vão se conversar, como é que você vai reunir essas informações para que ela fique simples e clara; para quando qualquer pessoa olhar para aquele wireframe, vai entender o quê que é cada parte. Bom, depois que você pensou na estrutura desse seu projeto, dessa sua tela, você pode pensar também na questão da hierarquia. A hierarquia, ela anda em conjunto com a estrutura, na verdade, uma coisa liga à outra, pois a estrutura separa o quê que vai ter em cada uma das partes; e dentro de cada parte, cada informação tem o seu valor, tanto o seu valor semântico, quanto o valor para o usuário. Quando você olha para uma página aonde está produto, a primeira coisa que, geralmente, você bate e olha é o quê? Pode ser a foto do produto, ou o nome do produto; então, se você reparar, geralmente, esses estruturas, essas informações, elas têm destaque diferente. E esse destaque é o valor que você atribui a ela, então, é esse tipo de hierarquia que é tratado aqui. Geralmente, o tÃtulo, o nome do produto, ele tem um destaque maior do que a sua descrição. Você vai ver que o preço do produto é um pouco mais destacado do que o valor do frete; então, é esse tipo de informação, é esse tipo de hierarquia que você tem que categorizar. Pensar o seguinte, o quê que você quer transmitir primeiro para o usuário? Pensando numa hierarquia. O quê que tem mais valor para ele? O quê que tem menos valor? E aà é dessa forma que você organiza o seu conteúdo dentro dessas pequenas estruturas. Então, tenta responder a seguinte pergunta: Como esses elementos serão exibidos relação ao posicionamento, ao rótulo e ao seu tamanho? Tudo isso vai influenciar como que o usuário enxerga e como que ele vai ler todas aquelas informações que estão no seu site, ou no seu aplicativo. Bom, além de falar sobre conteúdo, hierarquia e estrutura; uma coisa importante já se ter mente na hora que você está fazendo o seu wireframe, é pensar nas funcionalidades. Claro, no seu wireframe não vai ter nenhuma funcionalidade já em especÃfico, mas é importante você já saber quais funcionalidades vão ter naquela tela para que, quando alguém bata o olho, ele saiba que ao clicar em tal lugar, ele será direcionado para uma outra tela, ao clicar link, vai ser exibido uma informação para o usuário. É esse tipo de funcionalidade que você tem que ter em mente na hora de criar o seu wireframe. Então, tenta responder a seguinte pergunta: Como esses elementos funcionarão juntos? Voltando ao exemplo do e-commerce, na parte de detalhes do produto, temos, por exemplo, o botão de adicionar ao carrinho; ali tem uma funcionalidade. Dali, se o usuário clicar naquele botão, ele será redirecionado para outra tela, que é a tela de carrinho, por exemplo. Ou se, por exemplo, o usuário quiser calcular o frete daquele produto, então ele vai clicar num link, ou ele vai, por exemplo, clicar num campo, já digitar o seu CEP, calcular e já vai aparecer a informação logo embaixo. É esse tipo de funcionalidade que você tem que demonstrar já no wireframe; mesmo que não tenha nada funcional, o seu usuário, o seu cliente, seja quem for, na hora que ele bater no wireframe, ele vai saber que: "Pô, se eu clicar aqui, eu vou ser redirecionado para tal tela, ou se eu colocar uma informação nesse campo, ele clicar nesse botão, eu vou ter uma informação de volta". Então, é esse tipo de funcionalidade que você já tem que começar a pensar na hora de estruturar o seu wireframe. Outro ponto que anda em conjunto com as funcionalidades é o comportamento. Então, como eu citei, quando eu clico no botão de adicionar ao carrinho, por exemplo. Para onde que o usuário vai? Qual é o comportamento esperado? Ou se eu clicar no link da foto, por exemplo, vai abrir uma galeria expandida ou eu vou conseguir somente navegar entre as fotos? Pensa nesse tipo de comportamento. Para ficar pouco mais claro, tenta responder a seguinte pergunta: Como esses elementos interagem com o usuário? O quê que o usuário precisa fazer para que ele receba o feedback, se vai ter feedback?
