React Native: como conseguir um design profissional para seu aplicativo

Seja mais produtivo e acelere o desenvolvimento de suas ideias e projetos com uso de layouts profissionais. 

_________________________________________________________________________________________________________

Criar o design inteiro de uma aplicação, começando do zero, é uma tarefa bem difícil para desenvolvedores. Por isso grandes empresas e startups com grandes investimentos, contam sempre com um talentoso profissional de design no time. Entretanto, para devs que querem empreender começando do zero ou montar um bom portfólio, essa opção fica fora de alcance.

É aí que muitos devs cometem o erro de tentar fazer do zero e por conta própria. Podemos considerar que isso é um erro não apenas pelo tempo que custará para alguém que não é um profissional de design, mas principalmente porque na maioria das vezes a qualidade final do produto fica extremamente prejudicada. Grandes ideias podem perder força por causa de um design mal feito.

É muito comum, nesse ponto, o desenvolvedor recorrer a bibliotecas de design como React Native Paper, Native Base e diversas outras, que são boas soluções mas podem trazer alguns problemas como incompatibilidades, como aumento desnecessário do tamanho da aplicação. No caso de portfólio, é ainda mais complicado já que corre o risco de o desenvolvedor criar várias aplicações e todas ficarem muito parecidas. 

Minha primeira experiência com uma biblioteca de estilo foi em um aplicativo de uma imobiliária e, em uma atualização, quando o react-native descontinuou o componente <List /> em favor do <FlatList />, todas as listagens da minha aplicação param de funcionar e foi uma grande dor de cabeça pra manter o aplicativo até que eu finalmente substituísse todos os componentes desta biblioteca por componentes próprios. Então, é sempre bom ter cuidado antes de recorrer a essas bibliotecas.

Uma boa alternativa é recorrer ao uso de designs prontos, encontrados a um baixo custo na web, às vezes até gratuitos e com licença de uso comercial. Existem vários sites onde se pode encontrar esses designs, como por exemplo o Pintrest e alguns nos quais você pode até passar sua demanda para um profissional qualificado e receber o seu design personalizado em poucos dias, como o Fiver.

No entanto, nesse artigo vou apresentar o Behance, que na minha opinião é um dos melhores sites para se conseguir excelentes designs e inspirações, e também para navegar e ter ótimas ideias para o seu portfólio.

Vamos imaginar um cenário em que o desenvolvedor está criando um aplicativo de e-commerce. Basta ele acessar o Behance, pesquisar por “E-commerce app” e ter acesso a uma enorme lista de designs de aplicativos, logos, brands e muitos outros elementos. Você pode usar estes materiais como gatilho de inspiração para seu próprio design, ou ainda pode filtrar a busca na opção “Source Files” e terá acesso aos projetos que incluem arquivos do AdobeXD ou Figma.

Importante: Fique atento à licença de uso ao adquirir qualquer um desses projetos!

Para este artigo, selecionei um projeto de design completo de ecommerce de padaria, você pode acessá-lo clicando aqui, é um design profissional de muito bom gosto com 75 telas e por apenas $49.

Uma grande vantagem de recorrer a esse tipo de trabalho no início do seu projeto é que você consegue visualizar páginas que você nem imaginava que precisaria no seu projeto. O simples login de uma aplicação pode acabar se transformando em várias páginas, a própria página padrão de login e senha, a tela de “esqueci minha senha”, a tela de inserção do código de recuperação, tela de opção de login biométrico, login social entre outras.

É importante ressaltar que isso não é um template em React Native, mas arquivos de design onde você consegue visualizar todas as propriedades de estilo. A grande vantagem é que essa é a melhor forma do desenvolvedor se preparar para uma grande empresa ou um grande projeto, tendo a habilidade de converter os designs profissionais em aplicações React Native.

Um grande erro que vejo desenvolvedores cometendo no design de projetos é a falta de padronização entre as telas e componentes da aplicação, inputs quadradas em uma tela e arredondadas em outra. 

O uso de um design profissional elimina essa possibilidade. Nesse caso, o que acontece se o desenvolvedor precisar de uma tela adicional no projeto, algo que não foi pensado no design original? Bem, de posse de todo o design, fica muito mais fácil desenvolver novos componentes e novas telas obedecendo o padrão dos componentes já existentes e deixando a aplicação com um design profissional e homogêneo.

Espero que estas dicas tenham lhe ajudado de alguma forma. Até a próxima!

Se você se interessou por este conteúdo, não deixe de conferir a página de talentos da EZ.devs para conferir as Stacks que trabalhamos em desenvolvimento Front-end. Com certeza você encontrará excelentes oportunidades por lá!

Compartilhar:

Luis
Último artigo
Processo de criação de componentes no Front-end
Próximo artigo
Os efeitos da produtividade tóxica nas equipes de TI