Projetando aplicativos móveis bonitos a partir do zero

Comecei a aprender design gráfico quando tinha 13 anos. Aprendi a criar sites de cursos on-line e costumava brincar com o Photoshop e o Criador de afinidades o dia inteiro. Essa experiência me ensinou a pensar como um designer.

Eu tenho projetado e desenvolvendo aplicativos há quase um ano. Assisti a um programa no MIT onde trabalhei com uma equipe para desenvolver Universeat y. Dois meses atrás, comecei a trabalhar em um novo aplicativo, o Crypto Price Tracker , que lançei recentemente no dia 28 de janeiro.

Nesta publicação, vou compartilhar o processo de design passo a passo que acompanho com exemplos do aplicativo em que trabalhei. Isso deve ajudar qualquer pessoa que queira aprender ou melhorar suas habilidades de design digital. Design não é tudo sobre saber como usar o software de design, e esta publicação não irá ensinar-lhe como usá-lo. Existem centenas de tutoriais de boa qualidade on-line para aprender. O design também é sobre a compreensão do seu produto de dentro para fora, seus recursos e funcionalidades, e projetar enquanto mantém o usuário final em mente. É o que esta publicação pretende ensinar.

Processo de Design :

  1. Crie um diagrama de fluxo de usuário para cada tela.
  2. Crie / desenhe quadros de arame.
  3. Escolha padrões de design e paletas de cores.
  4. Crie maquetes.
  5. Crie um protótipo de aplicativo animado e peça às pessoas para testá-lo e fornecer feedback.
  6. Dê retornos finais às maquetes para que as telas finais estejam prontas para começar a codificar.

Vamos começar!

Diagrama de fluxo de usuário

O primeiro passo é descobrir os recursos que você deseja em seu aplicativo. Uma vez que você tenha suas idéias, crie um diagrama de fluxo de usuário. Um diagrama de fluxo de usuário é uma representação de nível muito alto da jornada de um usuário através do seu aplicativo / site.

Normalmente, um diagrama de fluxo do usuário é composto por 3 tipos de formas.

  • Os retângulos são usados ??para representar telas.
  • Os diamantes são usados ??para representar decisões (por exemplo, tocando no botão de login, deslizando para a esquerda, ampliando).
  • As setas vinculam as telas e as decisões em conjunto.

Os diagramas de fluxo de usuário são úteis porque eles dão uma boa idéia lógica de como o aplicativo funcionaria.

Aqui está um diagrama de fluxo de usuário que dessiei quando comecei a trabalhar no design do meu aplicativo.

Diagrama de fluxo de usuário para a interface principal.

Wireframes

Depois de completar os diagramas de fluxo de usuário para cada tela e viagens de usuário projetadas, você começará a trabalhar em wireframing em todas as telas. Os wireframes são essencialmente representações de baixa fidelidade de como seu aplicativo irá procurar. Essencialmente, um esboço ou um esboço de onde as imagens, rótulos, botões e coisas irão, com seu layout e posicionamento. Um esboço aproximado de como seu aplicativo funcionará.

Eu uso modelos impressos de UI Stencils para desenhar os wireframes. Poupa tempo e dá uma boa tela para desenhar e fazer anotações.

Aqui está um exemplo de wireframe.

Wireframe para a interface principal.

Depois de esboçar os wireframes, você pode usar um aplicativo chamado Pop e tirar uma foto de todos os seus desenhos usando o aplicativo e ter um protótipo, ligando todas as telas através de botões.

Padrões de design e paletas de cores

Esta é a minha parte favorita. É como fazer compras na janela. Muitos padrões de design e paletas de cores para escolher. Eu vou escolher os que eu gosto e experimentando com eles.

As melhores plataformas para encontrar padrões de design são Mobile Patterns e Pttrns . E para encontrar boas paletas de cores, vá para Color Hunt .

Mock-ups

É quando você finalmente passa para usar o software de design. Uma maquete no sentido do design é uma representação de alta fidelidade do seu design. É quase como se você estivesse neste aplicativo no futuro e você tirou algumas capturas de tela disso. Deve parecer realista e muito parecido com o real.

Existem softwares de design e ferramentas para criar maquetes. Eu uso designer de afinidade. A ferramenta mais utilizada para o design iOS é Sketch .

Aqui está um exemplo de alguns dos primeiros projetos do meu aplicativo.

Trazendo o desenho de lápis para pixels!

Experimentei mais com várias paletas de cores.

Eu compartilhei as maquetes iniciais com meus amigos por seus comentários. Muitas pessoas pareciam gostar do gradiente de ouro e do esquema preto.

Esteja disposto a receber comentários e experimentar novas sugestões! Você encontrará idéias surpreendentes provenientes de seus usuários quando você fala com eles, e não quando você rooteia freneticamente pelo Dribbble ou Behance.

Então, eu redesenhiquei a maquete e removi os gráficos de fundo porque gerá-los era um processo tecnicamente demorado e eles reduziram a legibilidade. Foi assim que a maquete redesenhada parecia.

O gradiente de ouro com preto parece ser bom!

Fiquei bastante satisfeito com o esquema de cores, os ícones na barra de guias e o layout geral. Eu segui adiante e projetei o resto das telas seguindo as mesmas diretrizes de design. Foi um processo longo, mas certamente divertido!

Uma vez que todas as minhas telas estavam prontas, coloquei um protótipo no Adobe XD e pedi a alguns amigos para experimentar e dar feedback.

Após os toques finais e tal, é assim que é meu design final.

A interface principal!

Depois que todas as telas foram concluídas, eu as importei no Xcode e comecei a codificar o aplicativo.

É isso aí! Espero que esta publicação o ajude a começar com o design da aplicação ou a ajudá-lo a se tornar um designer melhor. E se você gosta do meu aplicativo, você pode baixá-lo aqui .

Estou terminando o post com uma das minhas citações favoritas sobre design.

"Design não é apenas o que parece e se sente. O design é como funciona "
-Steve Jobs

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *