Tendo isso tudo em mente sobre como estruturar o seu wireframe, o que colocar, o que não colocar, na hora de você começar a colocar a mão na massa, existem dois caminhos que são os mais comuns. O primeiro ou você faz no próprio papel, você pega lá um papel, uma caneta ou lápis e começa a desenhar mesmo, faz um Sketch, papel e caneta, faz quadrado na folha, desenha a tela do seu aplicativo e faz tudo na tela. Essa é uma boa abordagem quando você está numa reunião com cliente, por exemplo, e ele já quer ter esboço de como é que você faria uma tela ou como é que ficaria a estrutura do projeto entre a conexão entre várias telas, a navegação entre as telas. Então, simplesmente pega ali uma folha de sulfite, uma caneta ou lápis e faz ali um retângulo, não precisa ser nada perfeito. Lembra: o wireframe é só uma estrutura base. Na hora que você vai fazer o seu design final, aà sim vai ter todo o carinho, toda a preocupação com essa questão do layout, mas essa primeira etapa é super importante. Às vezes, passa uma segurança muito grande para o cliente. Então, ele se sente, além de participativo do projeto, e você se sente confortável criando essa conexão com ele e ele está decidindo junto com você. Isso evita muito retrabalho, porque, à s vezes, você faz o seu trabalho na empresa ou casa ou onde você estiver e você manda para a pessoa e a pessoa: "Poxa, eu não gostei disso. Na verdade, o fluxo não é esse. O fluxo dessa tela vai para outra tela". Aà volta para você e você tem que refazer, manda para ele de novo. Então, essa ideia de fazer o wireframe junto com o cliente é muito boa para evitar retrabalho lá na frente e a hora que você tem tudo bem definido com o wireframe, mesmo fazendo num papel ou você indo direto num programa já fazendo junto com ele, ou fazendo em comunicação junto com ele, lá na frente você vai se sentir muito mais seguro na hora de você começar a colocar o design na prática, colocar o design final o que vai ser apresentado como arte final para o cliente ou usuário. O outro caminho além de você fazer no papel e caneta, se você já estiver mais confortável, se você tiver pouco mais de tempo para trabalhar com o cliente, você pode partir direto para um programa onde você possa fazer já o seu wireframe direto com nÃvel de fidelidade um pouquinho maior. Então, você pode usar, por exemplo, o Sketch, você pode usar o Balsamiq, o Adobe XD. Bom, existem várias ferramentas onde você pode criar o seu wireframe. Se você tiver mais familiarizado e já tiver um pouco mais de tempo, talvez essa seja uma abordagem. A vantagem de se fazer dessa forma é que passa um nÃvel de profissionalismo pouco maior, pois não vão ser rabiscos que você vai mostrar para o seu cliente, mas isso não interfere. As duas abordagens são válidas e isso tudo vai depender com a sua necessidade atual e de qual a sua situação naquele momento. Se você está perto do cliente, você não vai querer ficar com o aplicativo aberto ali fazendo as telas para o cliente vê. Às vezes, é muito mais prático, é muito mais fácil os dois pegar um papel e fazer juntos. Então, não é que um caminho é melhor do que o outro. Eu conheço designers que preferem fazer na caneta, no papel, desenhar, fazer algumas coisas na folha mesmo e depois já partir para o design final, já se torna tudo alinhado com o cliente. Já tem pessoas que preferem fazer no aplicativo, usar o Sketch, desenhar as telas, fazer as suas variações com nÃvel de fidelidade um pouco maior. Então, isso fica a seu critério. Eu vou mostrar para vocês aqui alguns exemplos de como que é feito com o Sketch e como é feito direto num software de wireframe. Bom, nós temos esse primeiro exemplo aqui, o Sketch Ed Lobanovsky. Você pode ver que ele, na própria folha dele tem várias telas diferentes, tudo desenhado à mão, lógico que ele usou uma régua, usou um lápis, caneta, colocou umas cores para dar destaque, mas você vê que é bem simples. Não te nada sofisticado, nada com elaboração muito grande, foi simplesmente desenhando numa conversa pensando nas funcionalidades. Você vê que não tem elemento gráfico nenhum, então se você olhar aonde que ficaria a imagem de um banner, por exemplo, tá com quadrado branco com xis no meio falando que ali é uma foto. Ou, por exemplo, no perfil do usuário, você pode ver que é bonequinho cinza ali. Então, você vê que tem muito botões, tem texto, lista. É isso que tem que ter no seu wireframe: é a ideia básica, a ideia geral de como que ele vai se comportar, qual que é a estrutura, qual que é o fluxo de navegação se você quiser colocar o fluxo de navegação, é uma boa coisa. Então, é essa a ideia que você tem que passar. Esse outro exemplo é do Daniel também. Você vê que, de novo, ele usou uma folha, uma impressão para simular aplicativo, do iPhone ali, por exemplo, mas você vê que a parte do conteúdo dentro é tudo desenhado à mão. Então, você vê que ele coloca algumas descrições ao lado, coloca algumas especificações, para onde que vai estar o botão, na canto superior do desenho você pode ver que ele está falando que vai para a home, como é que vai se comportar na hora que o usuário fizer um swipe. Então, essa é a ideia. Você perde menos tempo fazendo o desenho ali na mão e você consegue passar para o usuário qual que vai ser o comportamento e o fluxo dessas telas. Bom, esse aqui já é um wireframe um pouco mais elaborado. Se você olhar com calma, você vai ver que esse wireframe, como eu falei no começo do vÃdeo, não tem nenhum tipo de conteúdo. Então, você viu que ele usou a abordagem de colocar alguns traços cinza onde que quis dizer que ali era tÃtulo, ali ia ser conteúdo, ali ia ser um link. Então, essas são áreas que você vai separando e vai falando: "Olha, essa aqui é a navegação para tal lugar. Esse aqui é um botão onde eu vou compartilhar para as redes sociais, olha aqui é uma imagem onde você vai fazer o download de uma foto". Então, é esse tipo de comportamento de estrutura que você começa a criar no wireframe. Esse outro exemplo aqui é de um wireframe de uma sequência de telas do aplicativo. Ele também usou a abordagem de usar mockup do iPhone. Esse é desenho meio que pré-pronto, que se você olhar na internet, tem free para download. Então, está disponÃvel para todo mundo e ele usou partes de dentro para criar as telas. Então, você vê que, basicamente, não tem muitas cores ali, é quase tudo cinza, você vê que tem listas, tem alguns Ãcones, mas se você olhar bem, você vai ver que ele quis focar como que é a navegação das telas, sem se preocupar com o design final. E aqui também. Aqui é um outro exemplo de wireframe, que já é pouco mais elaborado de site e você vê que está tudo também, não tem cor, não tem elemento gráfico, tem, simplesmente textos, botões, tem alguns Ãcones, e tudo que é relacionado a parte gráfica, foi deixada para depois. E você pode ver que dependendo do tempo que você tem, da dedicação que você coloca para criar o wireframe, dependendo do tempo que você tem que fazer aquilo, você consegue já fazer uma boa estrutura para se sentir confortável na hora de colocar o design final naquela tela. Você olhando para esse wireframe, você já vê que tem bom rascunho de como que vai ficar a tela final. Bom, agora que a gente viu esses exemplos de o que é um wireframe no Sketch, feito no papel e caneta, viu um wireframe como que ele foi feito direto num software, um conceito que é legal a ser usado para você organizar os seus elementos é conceito chamado Grid. O Grid, nada mais é que você separa sua tela em pequenas colunas e você começa a criar linhas para organizar esse conteúdo blocos. Os exemplos mais comuns de Grids que a gente tem hoje, tanto na web, é o Grid de 12 colunas. Então, o que é que isso quer dizer? Imagina a sua tela e imagina que você divide essa sua tela 12 colunas. O padrão hoje é 12 colunas, o mais utilizado é 12 colunas, não que você possa usar menos ou usar mais, mas o mais comum são 12 colunas. E, com base nisso, você começa a criar o seu conteúdo. Então, por exemplo, eu vou criar, usando aquela nossa estrutura inicial do header, da área de conteúdo, do footer, vai ser o seguinte: eu vou criar o meu header, o espaço que ele vai ocupar vai ser o espaço das 12 colunas. Já na parte de conteúdo, vamos imaginar que é um detalhe do produto, por exemplo, como no outro exemplo que eu anteriormente, você pode ver que geralmente tem uma foto e geralmente tem espaço da área de conteúdo. Então, qual é a regra que os designers usam para separar um espaço determinado para foto e para o conteúdo? Existe bom senso? Existe uma regra? E é para isso que o Grid serve. Se você reparar, você vai ver que você pegando uma tela de um site e dividindo 12 colunas, você vai ver direitinho que aonde as informações começam e onde elas terminam, ela vai estar dentro de um range de colunas. Então, geralmente, o que é que eles fazem? Eu separo oito colunas para ser a área da imagem e mais quatro colunas para a de conteúdo. Isso facilita para o quê? Além das informações ficarem organizadas com os seus espaçamentos e posicionamentos bem localizados, na hora que você está projetando o seu wireframe para sites, desktop, tablet e smartfone, você pode usar o mesmo conceito para as três plataformas. Então, o que o elemento vai ocupar seis colunas no desktop, eu posso falar que no tablet ele vai ocupar oito e eu posso falar que esse mesmo elemento que está ocupando oito no tablet e seis no desktop, ele vai ocupar as 12 no mobile, por que? Isso claro influencia o tamanho da tela que o usuário está vendo isso. Então, a hora que você começa a aplicar os conceitos de Grid dentro do seu wireframe e mostrar para o seu cliente e falar: "Olha, aqui nesse tipo de resolução ele vai ver dessa forma, nessa outra resolução ele vai ver de outra forma e nessa outra resolução menor ele vai ver já de outra forma", o Grid, tanto na hora de você criar o seu design e tanto na hora do desenvolvedor começar a aplicar aquele design na prática, isso facilita muito que na hora que você entrega o produto final para o cliente, o que ele vai olhar pronto no seu site e o design vão estar praticamente idênticos ou muito parecidos. Então, essa é uma boa vantagem que vocês têm de se você pegar o conceito de Grid e começar a aplicar desde o começo no seu wireframe até a fase de desenvolvimento, você vai ver que vai ficar o nÃvel de fidelidade e de satisfação do cliente vai ficar muito maior. Para resumir o que nós vimos aqui no vÃdeo até agora, não importa qual a técnica que você vai usar para criar o seu wireframe, seja no Sketch, seja direto no software de participação, o importante é que você vai aprender que o wireframe é uma parte muito importante no fluxo de trabalho do designer e que não pode ser ignorado, pois, como a gente já falou aqui, isso vai evitar muitos problemas lá na frente. Então, enquanto você fornecer para o seu cliente uma estrutura visual desde o inÃcio isso vai... enquanto você fornecer para o seu cliente uma estrutura visual desde o inÃcio, qualquer discussão ou mal entendido que possa acontecer durante o escopo do projeto pode ser resolvido com apenas referências aos wireframes que vocês criaram juntos. Então, isso ajuda desde o inÃcio do projeto em todo o decorrer e até a fase final de qualquer desentendimento, qualquer problema que teve, você parar, olhar para o inÃcio e falar: "Olha, nós decidimos isso quando nós criamos o wireframe. É isso que nós vamos fazer? Não é? A estrutura foi toda criada em volta disso", então isso evita e te ajuda a evitar vários problemas lá na frente com o cliente. Além disso, quando você começar com o wireframe, você ficará muito mais confiante na hora que você pegar e ir para um software, para você criar o seu wireframe, seja o Sketch, seja o Photoshop ou qualquer outro programa, você vai se sentir muito mais confortável, pois você já fez a estrutura, você já pensou no comportamento, você já pensou no tipo de conteúdo, como é que os microelementos estarão organizados. Então, isso já te ajuda a te dar uma segurança na hora de você partir para o design final.
