Concebendo e desenvolvendo aplicações ricas (Introdução)

Assunto frequente em muitos grupos e fóruns que participo, são metodologias e ferramentas para projetar e implementar bons designs de interfaces para aplicativos desenvolvidos utilizando Xamarin.Forms.

Pretendo então produzir alguns materiais (artigos e vídeos) sobre esse assunto e alguns outros assuntos que, diretamente, fazem parte desse contexto e muitas vezes causam maior impacto na usabilidade e, consequentemente, no sucesso do seu aplicativo.

Muitas das ferramentas que serão apresentadas nos materiais não são exclusivamente para a tecnologia Xamarin e podem ser utilizadas em qualquer tecnologia de sua preferência para o desenvolvimento do seu aplicativo.
Enfim, sem mais rodeios, vamos ao conteúdo…

Projetando

Existem infinitas teorias, metodologias, ferramentas, técnicas, etc, para implementar um projeto de software. Uns mais complexos, outros nem tanto, o importante é que você conheça as opções existentes e defina o conjunto de ferramentas que irá utilizar, de forma que esse conjunto atenda suas necessidades e de sua equipe.

Particularmente, não faço o tipo que “sacrifica” o andamento do projeto para atender às necessidades burocráticas do processo, atualmente, o tempo de resposta para o usuário conta muito para manter o engajamento de sua rede, portanto, fique atento se você e/ou sua equipe está dando mais atenção ao processo do que na satisfação do usuário/cliente.

Concebendo a aplicação

Quando começo um novo projeto de software (aplicativo também é software), trabalho em uma nova versão ou novas funcionalidades para aplicações existentes, normalmente começo esse processo fora do meio digital…

Papel e caneta na mão, lápis de cor, fita adesiva, quadro branco, muito rabisco, setinha, “post-its”, etc… Mais parece uma atividade de “jardim de infância”. Além de ser um processo extremamente prático, ajuda muito a libertar o pensamento e deixar as boas ideias surgirem. Envolver a equipe nessa atividade ajuda a fortalecer as relações pessoais, tornar o ambiente leve e descontraído.

Utilize folhas inteiras para representar telas maiores (Desktop/Web). Faça dobraduras e recortes para representar dispositivos com telas reduzidas (celulares, tablets, etc), desenhe (é melhor que não seja extremamente detalhado) os elementos que cada interface deve conter e vá organizando o fluxo da sua aplicação colando as “interfaces” em um quadro com fita adesiva, algo que te permita mover (e até “excluir”) as “interfaces” de forma rápida!

Não precisa ser bonito, precisa ser prático!

Encerrada essa “brincadeira”, você terá a sua disposição:

• a quantidade de interfaces que sua equipe de design precisará produzir;
• um rascunho do design pretendido;
• o fluxo do aplicativo, para planejamento dos serviços de navegação;
• um “mapeamento inicial” dos dados que serão necessários para alimentar as interfaces e que serão alimentados pelas interfaces (ajuda bastante na modelagem dos dados trafegados pelos serviços);

Ou seja, adianta o lado da equipe de “front-end” e “back-end”.

Produzindo!

Após a fase de concepção, é chegado o momento de introduzir as ferramentas mais robustas para chegarmos mais próximo do produto final.
Abaixo seguem algumas ferramentas e suas finalidades dentro do contexto de “pré-projeto”.

Affinity

Ferramenta extraordinária para design de interfaces e desenho em geral. Trata-se de um software extremamente potente, com excelente relação custo benefício.
Utilizamos essa ferramenta para desenhar os “assets” das interfaces e montarmos as telas para aprovação.
O melhor de tudo, funciona no Mac e Windows.

Link: https://affinity.serif.com/pt-br/

PowerPoint

O bom e velho PowerPoint é um ótimo aliado para enviar para o cliente exemplos de interface para aprovação. Nele geramos interação com os itens da interface, como botões, permitindo que o usuário clique em algo e navegue entre as telas para melhor entendimento do fluxo do aplicativo como um todo. Muito prático e não requer instalação de programas “mirabolantes”, extração de arquivos, etc, coisas que para um cliente leigo, torna complexo o entendimento e aprovação.

Pinegrow

Esse é uma ferramenta FANTÁSTICA para design web.
Interfaces IDÊNTICAS no Mac e Windows, com ele você consegue montar blocos Bootstrap PURO (sem lixo no código) e com pouco trabalho, aplicar um tema que você criou no WordPress, por exemplo e exportá-lo.
Suporte Plugins para o WordPress e é muito barato!
Pagamento único de R$ 150,00 (quando eu comprei, os caras oferecem umas promoções ESPECIAIS para os Brazucas) licença vitalícia!
Fora as vídeo-aulas no YouTube, sensacionais!

Link: https://pinegrow.com/

Conclusão

Existem outras ferramentas para design de interfaces como Zeplin, InVision, etc…
Mas o conjunto acima é tudo que eu utilizo em meus projetos e nada mais!
Bom, por hoje é só, agora iremos evoluir nesse assunto com conteúdos mais técnicos em formato de artigos e vídeos que serão publicados em meu canal.
Espero que tenham gostado das dicas apresentadas, até a próxima conexão.