Designer e seu papel no desenvolvimento de aplicativos móveis
Todos sabemos que o design desempenha um papel muito importante no design e no desenvolvimento de aplicativos móveis. Cada designer tem sua própria abordagem, métodos e ferramentas para trabalhar em aplicativos. O ritmo do desenvolvimento futuro depende de quais plataformas o designer trabalhará e como ele apresentará o material acabado à equipe do projeto.
Não é segredo que as equipes de projeto mudam com frequência. Hoje alguém está trabalhando no projeto e amanhã uma pessoa completamente diferente já está trabalhando. Portanto, o design de um aplicativo móvel não é apenas imagens bem desenhadas, mas também material transmitido de alta qualidade, mostrando a outras pessoas como o aplicativo deve funcionar.
Neste artigo, quero falar sobre a interação do desenvolvedor com o designer, com base em minha própria experiência no desenvolvimento de um aplicativo móvel, sobre minhas expectativas em relação ao projeto e a realidade brutal. Espero que este artigo faça com que muitos novos designers pensem em seu trabalho, além de ajudar os desenvolvedores a lidar com algumas situações difíceis.
Como um designer pode facilitar a vida de um desenvolvedor?
Portanto, o designer, independentemente de seu perfil e foco, há muitas ferramentas com as quais ele pode desenhar o que é exigido dele. Apenas desenhar telas de um aplicativo móvel não é suficiente. Este não é um site nem um aplicativo da web. Essa categoria de produtos digitais possui regras mais rigorosas que você deve obedecer. Diretrizes separadas foram criadas para plataformas IOS e Android (consulte a seção "Links úteis").
Tudo isso foi inventado por uma razão. Se um ilustrador ou apenas um web designer decidir de repente fazer parte de uma equipe móvel, é seguro dizer que ele entregará o projeto de maneira relativamente fraca. Mesmo que pareça que ele fez tudo de bom, mais desenvolvimento pode levar à conclusão oposta.
Atualmente, a situação é tal que desenvolvedores, como designers, têm muitas ferramentas e guias específicos. Não apenas eles não querem se aprofundar nas ferramentas de design - eles simplesmente não têm tempo. O designer acaba de aprovar seu trabalho, e o gerente de projeto e o cliente já estão exigindo os resultados do desenvolvedor. O que um designer pode ajudar nesse caso? Como ele pode economizar tempo de desenvolvedor? Tudo é bem simples - você precisa escolher as ferramentas certas, não apenas para desenhar o projeto, mas também para o trabalho subsequente com a equipe de desenvolvimento.
Após vários anos de trabalho em muitas equipes, um ao outro, percebi como o design afeta a velocidade de desenvolvimento e o trabalho confortável em uma equipe. Portanto, agora, antes de levar o design para o desenvolvimento, verifico a conformidade com certos padrões e regras.
O designer faz parte da equipe
Estas não são apenas palavras pathos. O designer deve fazer parte da equipe antes de colocar o aplicativo na loja, comunicar-se constantemente com os colegas, esclarecer problemas e responder rapidamente às solicitações dos desenvolvedores. O prazo mínimo de sua permanência na equipe é até a primeira entrega do MVP.
Como mostra a prática, os designers nem sempre apresentam seus layouts de maneira de alta qualidade e, com o desenvolvimento posterior, surgem algumas deficiências, por exemplo, telas vazias não desenhadas ou algum estado de elementos, corte incorreto de elementos, falta de recursos. Também acontece que o cliente deseja adicionar algo.
O designer precisa terminar seu trabalho, e é bom que ele esteja na equipe neste momento, para que as mudanças possam ser feitas rapidamente. Ou ele deve estar em contato para que o projeto e a equipe não tenham problemas com a alteração operacional da interface do usuário / UX.
O desenvolvedor não deve entender em quais programas o projeto foi desenhado. Os arquivos devem abrir facilmente
Como mencionado acima, o desenvolvedor agora tem que estudar tanto que simplesmente não há tempo para entender os editores gráficos. Portanto, o designer não deve desenhar elementos no Photoshop / Illustrator e doar o layout em arquivos * .psd / * .ai. Esses arquivos pesam bastante e exigem a instalação do pacote da Adobe. Mesmo que isso não tenha um papel especial, simplesmente não há tempo para estudar esses editores.
O desenvolvedor deseja apenas selecionar os elementos e ver como digitá-los, e não entender a estrutura das camadas de um arquivo enorme. Agora, existem muitos editores gráficos para renderizar aplicativos móveis: Sketch, Figma e outros. Em geral, há muito por onde escolher. Como o designer apresentará um protótipo clicável e "telas ao vivo" para o front-end dependerá do editor selecionado.
Se o designer escolheu a Figma, as telas "ao vivo", protótipo clicável, história do usuário, transições de tela, famílias de fontes e cores, os recursos podem ser baixados independentemente - tudo está em um só lugar. As alterações de design são visíveis imediatamente. Como muitos serviços, a Figma tem suas desvantagens. Mas essa é uma escolha muito boa, mesmo que esse editor não exija a instalação de software especial. Você só precisa clicar no link do projeto. O principal é ter a Internet.
Esboço também é uma boa escolha. Um designer pode usar ferramentas de prototipagem como Zeplin ou InVision para este editor se a equipe de desenvolvimento já estiver trabalhando com eles. Esses programas não requerem um estudo aprofundado das ferramentas.
O designer deve conhecer as diretrizes para diferentes plataformas e suas diferenças
Frequentemente, os designers desenham projetos sem entender as diretrizes, misturam estilos ou criam elementos não padronizados, pensando na beleza da tela. Existem alguns exemplos desse tipo no Dribbble e no Behance. Os clientes, desconhecendo essas nuances, aprovam os layouts. Quando se trata de desenvolvimento, as coisas param. O designer não deseja refazer o trabalho errado. O cliente exige exatamente essa tela ou efeito, que ele aprovou, mas não pode ser feito.
Portanto, é muito importante que o designer entenda o que e como desenhar.
Recursos
Esse é o problema mais doloroso ao interagir com um designer. Normalmente, os designers não cortam recursos. Na maioria das vezes, eles acreditam que: eles não são obrigados a fazer isso; é longo e monótono e, se o desenvolvedor precisar, ele cortará tudo sozinho ou você poderá redefinir * .svg; eles não sabem exatamente o que precisa ser cortado e em que tamanhos.
No entanto, se você olhar do lado do desenvolvedor, resolver esse problema reduz bastante o tempo de trabalho. Basta que ele veja o nome do recurso no protótipo e encontre o mesmo na pasta de recursos - e é isso, ele continua digitando. E se você imaginar que o desenvolvedor precisa cortar os recursos sozinho? Deve destacar completamente o item desejado na tela, encontrar a exportação, especificar o tamanho e o caminho.
Parece que é um trabalho rápido. Mas há muitos elementos e muito tempo é desperdiçado. Novamente, os layouts nem sempre desistem em perfeitas condições. O designer nem sempre leva tudo em conta. Além disso, a ferramenta de prototipagem pode não funcionar corretamente quando exportada.
Tentando selecionar elementos para fatiar, às vezes os desenvolvedores selecionam apenas parte de um elemento ou se apegam a um plano de fundo (que deve ser transparente). Portanto, é bom quando o designer não apenas corta recursos, mas também usa os tamanhos corretos.
TK com uma descrição das telas
É bom quando o aplicativo consiste em um pequeno número de telas e, à primeira vista, fica claro como ele funciona. Se o aplicativo tiver um grande número de telas e o protótipo não fornecer uma imagem completa de sua operação, ou o aplicativo crescer após fazer alterações a pedido do cliente, uma descrição técnica de todas as telas, cada elemento dessa tela e seu status poderão salvar a situação.
Como mencionado acima, os membros da equipe do projeto geralmente mudam. Ninguém quer mexer com novatos. Talvez os colegas façam uma breve revisão, abram links para todos os recursos emitidos pelo designer - e isso é tudo. Espera-se que o desenvolvedor comece a trabalhar com um entendimento completo de como o aplicativo funciona. Na maioria das vezes, não há TK explicando isso, porque o designer não sabia que era necessário ou não queria fazê-lo. E o que sai? O trabalho para. Um novo membro da equipe não entende o que e como funciona, trabalha com meia força, desperdiçando tempo com a equipe.
E se não houver nenhuma das opções acima, mas precisar trabalhar?
Aconteceu que todos os requisitos acima se tornaram obrigatórios em um dos meus projetos.
O projeto foi associado ao aluguel de imóveis e foi desenvolvido para duas plataformas: IOS e Android. O processo de desenvolvimento começou como qualquer outro. Mais tarde, descobriu-se que o designer não era totalmente versado em aplicativos móveis. Que guias ele não sabia. O design contou com elementos transparentes, as fontes foram usadas apenas para uma plataforma. A coloração pode ser descrita como o uso de "50 tons de cinza".
Recebi um arquivo * .psd. Parece não haver nada de errado. Esses arquivos são entregues por muitos designers. Mas eu tive que instalar o pacote da Adobe para dar uma olhada no layout. O arquivo era muito "pesado" e aberto por cerca de 10 minutos.Nem todas as telas foram desenhadas separadamente na área de trabalho. Eles estavam um em cima do outro como camadas, e para ver uma tela, você tinha que desligar todas as outras. Como não tinha experiência significativa com o pacote, pensei no Avocode como uma ferramenta para o processamento de material de design. Obviamente, este programa não é perfeito, mas literalmente me salvou.
O protótipo clicável foi transferido para mim no InVision. Observe, apenas um protótipo clicável sem telas ao vivo.
Conclusões:
O que eu esperava obter do designer:
- protótipo clicável e telas ao vivo (InVision, Zeplin ou Figma)
- TK revisado com uma descrição do funcionamento das telas
- telas de mapa com transições
- história do usuário
- recursos cortados nos tamanhos @ 1, @ 2, @ 3
- fontes
De todas as opções acima, recebi apenas um protótipo clicável e um arquivo * psd.
O projeto é concluído e carregado na loja. Mas, para alcançar esse resultado, minha equipe passou por sete círculos do inferno ou, como dizem, enfrentou certas dificuldades.
Muitos discordam e dizem que os materiais fornecidos são suficientes. Mas estamos falando de profissionalismo e como a situação parece do lado dos desenvolvedores. Afinal, um designer de aplicativos para dispositivos móveis não é apenas um artista. Este é um membro de uma equipe que trabalha em um projeto complexo. Ele deve fazer seu trabalho bem, porque para ele esse não é o fim do trabalho no projeto, mas para a equipe é apenas o começo.
Obrigado a todos por sua atenção e projetos de sucesso!
Links úteis:
Diretrizes IOSDiretrizes para AndroidProblemas de desenvolvimento do projeto móvel legadoFigmaEsboço