Como criar wireframes para aplicativos móveis
Quando se trabalha o design de wireframes para aplicativos móveis, é importante entender as ferramentas que serão incluídas. Além disso, é preciso entender o layout e o posicionamento de cada uma. Um wireframe, porém, não se torna uma regra para a criação final. Ele é apenas um ponto de início na construção visual do produto.
Existem muitas formas de criar um wireframe. Neste artigo, vamos falar sobre as melhores maneiras de começar a desenvolver um wireframe para aplicativos móveis.
Utilize ferramentas eficazes
Os requisitos do seu wireframe depende do escopo de seu projeto. Se você está trabalhando sozinho – ou com uma equipe pequena – os primeiros rascunhos podem ser feitos até mesmo numa folha de papel. Mas, como uma prática interessante, é importante criar um wireframe que pode ser compartilhado de forma simples entre os designers, desenvolvedores e outras pessoas. Crie documentos que não vão se perder ou ser deletados. Esse é o início de seu projeto, e sem isso, você vai perder todas as suas principais ideias.
O Photoshop ainda é uma ferramenta utilizada para construir essa parte do design. Mas, hoje, muitos entender que é como usar um tanque de guerra para fazer uma simples pintura. Ele não é a melhor ferramenta para o trabalho. Enquanto é possível trabalhar o o design de interface no Photoshop, ele possui muitas outras funções que não são exatamente necessárias. O Photoshop possui um conjunto de ferramentas que não são as melhores para o design UX.
Para essa tarefa, o Sketch pode trazer resultados melhores. O aplicativo para desktop é uma forma simples de compartilhar as ideias com a equipe de desenvolvimento e os clientes. A ferramenta de design UI e UX são quase que fundamentais para o desenvolvimento de um projeto bem feito. O Sketch é bem mais avançado que outros programas quando o assunto é a criação de design interessantes.
Algumas empresas podem utilizar outros aplicativos para compartilhar seus designs com suas equipes de desenvolvimento. É importante encontrar a melhor forma de atingir transparência quando o assunto é o início de seu projeto.
Porém, no fim das contas, as melhores ferramentas são aquelas que sua equipe tem mais familiaridade. Sendo assim, o melhor programa par a criação dos wireframes é aquele que atende às necessidades do projeto.
O básico de um wireframe para aplicativos móveis
Quando você começa a trabalhar com um wireframe para aplicativos móveis, existem coisas básicas que você deve saber.
Tenha certeza que você está trabalhando com as especificações corretas
Quando você precisar criar um wireframe para iOS (com a mesma ideia aplicada às plataformas Android), você precisa configurar seu programa de desenvolvimento de wireframes para a plataforma mais utilizada. No caso do iOS, o iPhone 8 ou iPhone X.
Use os tamanhos padrão para todos os elementos de design. Use as fontes padrão, nos tamanhos corretos. Você não vai querer textos pequenos demais para serem lidos, ou grandes demais para caberem em seus respectivos lugares. Isso também vale para a construção dos botões.
Essas pequenas inclusões permitem que você entenda como a sua ideia para o wireframe irá se posicionar dentro da plataforma. Sendo assim, você irá garantir que elas estejam disponíveis de forma clara e legível.
Considere todas as possíveis escolhas dos usuários.
Planeje todas as interações com seu wireframe. Afinal, você precisa entender quais ações irão impactar a jornada de seu usuário.
A parte mais difícil é entender como apresentar todos os estados de sucesso e de falha. Além disso, também pode haver dificuldade em apresentar campos de digitação (em que o teclado deve estar presente), a mapear todos os possíveis caminhos que levarão seus usuários às próximas telas.
Essa é a função do wireframe. Assim, quanto mais desenvolvido seu processo de design estiver, mais difícil será repensar e adaptar suas ideias.
Não pense na estética ao trabalhar seu wireframe
A pior coisa que você pode fazer no desenvolvimento de um wireframe é demorar muito ao procurar um rascunho muito detalhado do produto final. Mesmo que você crie o wireframe “perfeito”, a funcionalidade e elementos do design serão mudados durante o processo de desenvolvimento do aplicativo. Sendo assim, a principal função de um wireframe é tentar definir, desde o começo do projeto, quais serão as principais ferramentas do aplicativo. Se você for bem nesta etapa, o resto acontece naturalmente.
Visualmente, é recomendado construir os wireframes em tons de cinza. Tentar escolher o melhor conjunto de cores para o projeto tomaria muito tempo nesse estágio de desenvolvimento. Porém, você não precisa utilizar apenas um tom durante todo o rascunho. Esse uso de tons diferentes pode ser muito importante para ditar a jornada do usuário, e o que deve atrair seus olhares. É normal usar, ocasionalmente, cores primárias (como verde e vermelho) para ilustrar resultados de sucesso e falha no aplicativo. Porém, evite utilizar de forma indiscriminada.
Não passe muito tempo trabalhando com fontes customizadas ao construir o wireframe de seu aplicativo. Utilize as fontes padrão de seu programa preferido, para que tudo permaneça focado e legível.
A ideia é não distrair os clientes, desenvolvedores e as outras pessoas que possam entrar em contato com seu wireframe. É comum que cliente acabem se apegando a uma escolha desnecessária feita na construção do rascunho, como o uso de uma cor específica, e isso faz com que outras decisões se tornem ainda mais difíceis daí pra frente. O propósito de um wireframe é construir um fundamento para a experiência dos usuários. Qualquer tipo de escolha visual ligada a marca ou cores deve ser deixada para depois.
Saiba as necessidades de grandes e pequenas empresas
O wireframing de aplicativos móveis para aplicativos empresariais maiores é como criar um quebra-cabeça de 1.000 peças. Um cliente maior já terá uma base de usuários e uma estratégia de negócios existentes e, por extensão, um foco maior do seu aplicativo será entregar o ROI. As soluções corporativas também costumam ser tecnicamente mais complexas. Você estará trabalhando com uma lista de recursos exigidos, expectativas do cliente, APIs de back-end e integrações de serviços. O wireframing é como nossa equipe de design de aplicativos descobre quais recursos podem se conectar uns aos outros e onde começamos a priorizar visualmente o conjunto de recursos.
Aplicativos de inicialização são os projetos em que temos a chance de criar um MVP. Essa é uma abordagem mais interativa, na qual podemos começar de forma mais simples e construir quando lançamos atualizações frequentes. Para aplicativos menores, onde a criatividade de nossa solução pode ser o diferencial nesse cenário competitivo, podemos começar imediatamente a experimentar vários conceitos de interação. O foco do wireframe inicial é menor em escala, recursos e partes interessadas, mas ainda precisamos colocar o máximo de esforço e polimento no wireframe para criar os alicerces da jornada do usuário.
Utilize os wireframes como exemplos, não como regras
Os wireframes são ótimos para estimar o orçamento e o tempo adequados que serão dedicados a recursos. Quando um wireframe estiver completo e você estiver passando para modelos e design visual do aplicativo, o wireframe não precisará ser alterado. Isso não significa que você não possa fazer melhorias e encontrar novas soluções para sua hipótese original, mas enfatiza que o design de aplicativos é um processo contínuo em que cada protótipo atual afeta seu próximo rascunho de projeto.
Os wireframes de aplicativos para dispositivos móveis são um ótimo ponto de referência para a próxima etapa, mas o design do aplicativo é iterativo. Cada passo está evoluindo do último e um wireframe sólido fornece um excelente ponto de partida.
]]>