Como criar uma interface de aplicativo para Android que não sugue

Programadores e desenvolvedores geralmente não são designers - isso é amplamente aceito como verdadeiro. Os desenvolvedores tendem a se concentrar em fazer um aplicativo funcionar - os designers se concentram em tornar o aplicativo esteticamente atraente . Mas por que os desenvolvedores não podem fazer o mesmo?

Naquela época, quando as landing pages animadas e os layouts sofisticados eram uma coisa, então, com certeza, fazia sentido contratar um designer profissional. Mas a tendência hoje é mínima - ou pelo menos muito simplificada.

Deixe-me dar-lhe um exemplo anedótico - um tempo atrás, alguém me pediu para criar uma tela para seu software de PC. Então eu fui para fora - desenhei em papel de esboço, importei para PhotoShop, criei muitas linhas de neon e efeitos. Poderia ter sido um papel de parede, ao invés de uma tela de abertura. O ponto é que eu criei esse design realmente sofisticado e elaborado para eles.

Como você provavelmente pode imaginar, eles não gostaram. O design que eles usavam era literalmente um pequeno logotipo de alguns círculos coloridos sobrepostos e o nome do software abaixo dele. Tipo, 2 minutos no trabalho do PhotoShop. E sabe de uma coisa? Eu meio que tive que concordar que era melhor que o meu.

O ponto que estou fazendo é assim - acho que os programadores caem nessa armadilha de cometer o mesmo erro que cometi. Nós tendemos a pensar em UIs e telas que precisam ser essas coisas realmente extravagantes e atraentes que fazem o aplicativo se destacar . Mas eles não têm que ser - honestamente, eles não deveriam ser. Devemos ter a mentalidade de um programador e aplicá-lo ao design estético - trabalhos simples e funcionais.

Neste artigo, veremos algumas maneiras muito simples de criar uma elegante UI / UX para Android, mesmo que você não tenha quase nenhuma experiência em design.

A menos que você realmente queira algo mais, escolha o material design

Seu aplicativo não precisa ser " exclusivo" e " destacar-se do restante" para que ele seja popular e tenha boa aparência. Isso é o que o material design do Google definiu para alcançar - um padrão para as UIs de aplicativos em todo o setor, e eles fizeram um bom trabalho. Há uma tonelada de aplicativos populares por aí que aderem ao Material Design - alguns dos maiores nomes dos aplicativos Android, como o SwiftKey, o Nova Launcher, o Textra SMS, o YouTube, só para citar alguns.

O foco principal do Material Design está em um layout baseado em cartão, com uma paleta de cores sólidas. O Google trabalhou com os principais designers da indústria, desenhou muitos elementos de práticas de design minimalistas e liberou tudo de graça - isso é um bom negócio, já que os cursos de design de sites e aplicativos podem gerar centenas de dólares em e-books, vídeos e etc.

Começar a usar o Material Design é incrivelmente fácil, e há um punhado de ferramentas que simplificam ainda mais a lista abaixo:

  • Editor de temas de material (macOS + Sketch)
  • Plug-in de Paleta de Cores de Design de Materiais (PhotoShop / Illustrator)
  • Material Design UI Kit PSD (PhotoShop)
  • Kit de interface do usuário do Android Material Design ( Sketch)
  • Gerador de tema de interface do usuário de material

E se você precisar de inspiração para criar temas simples e elegantes de Material Design, confira estes blogs de lista:

  • MaterialDesignBlog - 15 exemplos impressionantes de material design feito direito
  • MockPlus - 12 melhores exemplos de materiais para design de sites para desenhar inspiração
  • AndroidAuthority - 10 melhores aplicativos de Material Design para Android

Gradientes de cor são muito mais fáceis do que você pensa

Para uma alternativa ao Material Design, os gradientes dolorosos são simples, modernos e chamativos. E você pode pensar que os designers gastam muito tempo pintando em todas as cores ou projetando o gradiente final. Você estaria errado - isso pode ser feito em 10 segundos no PhotoShop.

10 segundos no gradiente do PhotoShop.

Até te mostrarei como é fácil.

Crie um novo projeto PS para dispositivos móveis ( 1080 x 1920 px @ 72 ppi funciona bem)

UIGradients.com - Grande coleção de gradientes pré-fabricados.

Vá para UIGradients.com e encontre algo que você goste.

Copie os valores hexadecimais de cor de UIGradients

Copie as cores do gradiente acima da visualização.

Seletor de gradiente PhotoShop.

Clique com o botão direito do mouse em uma camada vazia no PS e vá para Opções de mesclagem> Sobreposição de gradiente.

Clique diretamente na visualização do padrão de gradiente no menu suspenso. Não clique no botão suspenso. Clicar diretamente no gradiente abre o editor de cores.

Insira os valores hexadecimais do UIGradient na ferramenta de gradiente PS.

Agora basta colar os valores hexadecimais de cor do UIGradient no editor de gradiente PS.

Ajuste conforme necessário. Agora você tem um fundo gradiente profissional para seu aplicativo Android.

Outras ferramentas de gradiente que vale a pena conferir:

  • WebGradients.com
  • Android Shapes Generator ( para gerar formas via XML, com opção para gradiente)

Use SVGs em vez de JPG / PNG

Em vez de usar PNGs ou JPGs para seus elementos gráficos (botões, logotipos, etc.), você deveria estar usando SVGs ( Scalable Vector Graphics) . Isso ocorre porque os SVGs podem ser redimensionados sem perder a qualidade - por exemplo, se você aumentar o tamanho de um JPG para um valor maior, ele perde a qualidade e fica borrado / pixelado. Um SVG não. As pessoas tentam usar arquivos PNG enormes que serão reduzidos para caber nas telas do Android - quando, em vez disso, você pode usar SVGs menores que são aprimorados sem perda de qualidade.

Além disso, os SVGs podem ser até 60% a 80% menores em tamanho de arquivo do que PNG . Isso significa que seu aplicativo ou website para dispositivos móveis será carregado mais rapidamente para o usuário e terá boa aparência, independentemente da resolução da tela.

Incluir um modo escuro usando Theme.AppCompat.DayNight

Você não precisa criar dois temas separados para incluir um tema de modo escuro / noturno em seu aplicativo. Sua praticamente construído na biblioteca AppCompat, você só precisa ativá-lo e editar os valores.

Veja o guia da Appual "Como implementar um modo escuro no seu aplicativo Android".

Use um modelo ou um kit de interface do usuário para dispositivos móveis

Se o seu aplicativo não requer uma GUI sofisticada e personalizada, não há absolutamente nada de errado em usar um modelo ou kit. Modelos e kits podem ser usados ​​como uma diretriz inspiradora, ou você pode literalmente usar o modelo / kit como está, adicionando seus próprios botões e outras coisas.

Alguns ótimos recursos para modelos e kits de interface do Android:

  • SpeckyBoy - 50 kits de interface de usuário móvel gratuitos para iOS e Android
  • SketchAppSources - Recursos de aplicativo da interface do Android ( Sketch)
  • Freebiesbug - PSD UI Kits ( PhotoShop)

Artigos Interessantes