Veja todas as aulas aqui.

E ae pessoal. Tudo bem?
Espero que sim! Hoje vamos falar de um assunto um pouco fora do nosso normal, mas calma! Ainda é Desenvolvimento Android. Vamos falar de wireframes e como eles podem nos ajudar, afinal, nós que somos Programadores adoramos quando o Designer nos manda tudo OK, né? Mas e se o Projeto não tiver um Designer? Ou então se você precisar organizar os elementos da aplicação para mostrar alguém antes da criação do layout?

O que é um Wireframe?

Um wireframe é um guia visual básico de uma Interface de Usuário, ou seja, é uma sugestão da estrutura de uma tela. O objetivo do wireframe não é indicar se um botão será redondo ou quadrado ou se a cor da aba vai ser verde ou azul, mas sim indicar que naquele lugar vai um botão e naquele outro uma aba. Dessa forma tanto o cliente, quanto os próprios desenvolvedores poderão visualizar como ficará uma UI.

Justamente por mostrar apenas a estrutura básica, o wireframe tende a ser uma coleção de rabiscos (muitos profissionais até gostam de fazer à mão essa etapa) formando assim um “esqueleto”.

Como construir meu Wireframe

Como eu disse antes, muitos profissionais preferem fazer seus wireframes à mão. Contudo há algumas ferramentas online que facilitam e muito, como por exemplo o NinjaMock:

Uma coisa super legal do NinjaMock é que você pode escolher criar wireframes voltados especificamente para iPhone, iPad, Android, Windows Phone, Surface, Web e se nada te agradar: freehand.

Eu falei do NinjaMock primeiro, pois é o meu preferido e iremos utilizá-lo nessa aula, mas temos também outras opções como o Moqups, o WireframeCC e o MockFlow, mas nenhum desses outros parecem ser tão completos na questão mobile: o NinjaMock já possui um monte de elementos que iremos utilizar.

A estrutura do nosso Aplicativo

Antes de iniciarmos a criar os wireframes, precisamos ter certeza (de forma organizada) da estrutura do nosso Aplicativo, ou seja, quais telas, informações e como será a navegação entre essas telas.

Primeiro Passo: listar nosso conteúdo

Definimos nosso conteúdo baseado no projeto, assim:

• Tela Inicial (splash screen)
• Listagem dos Últimos Posts
• Listagem das Categorias
• O Conteúdo do Post
• Tela “Sobre” (informações do App)

Segundo Passo: definir a navegação

Definimos usando um esquema simples de elementos e setas:

Note que após a Tela Inicial temos a listagem de Últimos Posts e dela podemos navegar paralelamente entre Sobre o App e a Listagem de Categorias paralelamente. Além disso, podemos visualizar o conteúdo do Post a partir de qualquer uma das duas listagens.

Terceiro Passo: escolher os elementos da nossa Interface

Já listamos o conteúdo a ser mostrado e definimos a navegação. O que falta agora é definir o que cada conteúdo vai representar, pois não necessariamente cada conteúdo é uma Activity ou “tela nova”. Quem nos mostra isso muito bem é a própria documentação do Android, na seção Choose Patterns do tutorial sobre Wireframing (termo em inglês para o processo de criação dos wireframes, ou o que estamos fazendo agora).

Por fim, chegamos ao seguinte:

Dessa forma, escolhemos que as Listagens e o “Sobre o App” ficarão em 3 abas paralelas na nossa Interface (dentro de uma Activity) e que tanto a “Tela Inicial” (Splash Screen) quanto a “O Post” serão telas diferentes. Nosso projeto é bem simples e não possui muito conteúdo, então é só isso mesmo.

Construindo seu wireframe

Agora, finalmente podemos construir o nosso wireframe. Eu resolvi essa parte em duas: na primeira iremos desenhar o wireframe manualmente e na segunda vamos criar sua versão digital.

1 – Desenhando o Wireframe manualmente

Você pode escolher desenhar manualmente seu wireframe, quando você ainda está no início do projeto e não quer gastar tempo criando uma versão mais complicada ou só precisa de uma base mesmo (como é o nosso caso).

Por conhecer o projeto e já ter uma ideia do que eu queria, levei menos de 5 minutos. Claro que ao conceber a ideia ou por ser um projeto mais complexo você poderá levar mais tempo, mas de qualquer forma, é a solução mais rápida.

2 – Wireframe Digital

Depois que você está satisfeito com o wireframe inicial (ou se deseja criar algo mais próximo da realidade logo de início) ou precisa apresentar para um cliente, é uma boa ideia criar ou passar o que já fez para um wireframing digital. Podemos usar softwares como o Illustrator, Fireworks, Photoshop ou OmniGraffle. Na verdade, você poderá utilizar qualquer software para o seu PC/MAC ou quem sabe algum serviço online.

Não irei me aprofundar muito na discussão sobre ferramentas (deixo isso para os Designers). Eu escolhi a NinjaMock, como já havia dito, e o primeiro passo (após criar a conta e fazer o login, claro) é Criar um Projeto.

Quando você está criando o seu projeto, ele te pegunta qual o tipo de wireframe. Escolhemos Android, claro. Depois é só clicar em Untitled Project e trocar o nome do projeto (porque eu tenho um pouco de TOC… hahaha)

E agora, eis a interface:

Não vou tomar muito tempo explicando os pormenores da plataforma, mas algumas instruções:

• Na parte inferior da tela temos as páginas. Você pode adicionar mais páginas em branco (retrato ou landscape) ou do template. Além disso, você pode navegar entre as páginas clicando nelas.
• Na lateral esquerda temos os Elements ou Elementos. Os elementos são os itens que você pode adicionar ao seu wireframe. A galera da NinjaMock fez um trabalho legal e já tem muita coisa pronta como imagens, labels, campos de entrada de dados (inputs), abas, navegação e por aí vai.
• No topo temos o cabeçalho do site, título do projeto e um menu com undo (desfazer) e redo (refazer), além de outros itens como exportação, previsão e logout.
• Por último, na lateral direita temos as Properties ou Propriedades. É lá que você pode mudar o título da página ou alguma outra configuração. Se você estiver com algum Element selecionado, as propriedades dele serão mostradas nessa área e você poderá alterá-las.

Você pode conferir o projeto online clicando aqui.

Eu juntei as 3 páginas em uma só imagem para facilitar:

Próximos Passos…

Agora que já sabemos criar o wireframe da nossa aplicação para que ela tenha uma navegação intuitiva e clara, o próximo passo é saber como navegar entre as telas (ou Activities) da nossa Aplicação. É por isso que a Aula 10 será sobre Intents!

Eu sei que demorou um pouco para essa aula e pode não ser a aula mais legal do mundo para quem quer focar em Desenvolvimento, mas conhecimento nunca é demais e é legal ter essa noção para ajudar nossos Designers e até conseguirmos trabalhar melhor nos nossos projetos Lone Wolf.

Não esqueçam de curtir e compartilhar, além de deixar aquele comentário aí embaixo para deixar esse Dev feliz. Abração e até a próxima!