Prototipagem de um aplicativo de mobilidade facilmente no Sketch

Você está diante do desafio de criar um Prototyping atraente para um Mobility-App. Isso não se resume apenas ao design; trata-se de projetar a experiência do usuário de forma eficaz desde o início, para que ajude o usuário a navegar intuitivamente pelo aplicativo. Neste tutorial, você será guiado passo a passo pelo processo de criação de um protótipo no Sketch. Vamos começar esta emocionante jornada no mundo do design!

Principais conclusões

• Prototyping é um passo decisivo no desenvolvimento de aplicativos.
• No Sketch, você pode começar com formas e designs simples.
• Uma estrutura clara e navegação são indispensáveis para o sucesso do seu aplicativo.

Guia passo a passo

Comece criando a estrutura básica do seu aplicativo no Sketch. Você pode usar a ferramenta de pincel para desenhar seus primeiros elementos de design. Vá apenas para a ferramenta de pincel ou pressione a tecla “P” para selecioná-la.

Crie um retângulo que represente a tela do seu aplicativo. Mantenha a tecla “Alt” pressionada enquanto arrasta o mouse para desenhar um retângulo. Isso garantirá que o retângulo permaneça proporcional. Isso já está parecendo muito bom.

Agora é hora de projetar a primeira página do aplicativo. Comece com a barra de abas inferior. Novamente, use a ferramenta de pincel e desenhe uma linha reta enquanto mantém a tecla Shift pressionada para garantir que você obtenha uma linha reta.

Depois de projetar a barra de abas, adicione três ícones que representem as principais funções do aplicativo. Com a tecla ALT, você pode duplicar facilmente as formas enquanto as arrasta para a posição correta.

Agora vamos nos concentrar na barra de navegação superior. Mantenha novamente a tecla ALT pressionada enquanto arrasta uma nova área retangular para a barra de navegação.

As bolhas de chat são a próxima parte do seu aplicativo que queremos projetar. Use a ferramenta de pincel para desenhar uma bolha de chat. Essa bolha será mostrada ao usuário como uma saudação. Adicione um texto curto que se dirija ao usuário, como "Olá e bem-vindo ao aplicativo Mobility!"

Para garantir que tudo tenha uma boa aparência, você pode copiar e ajustar as bolhas. Selecione as bolhas e arraste-as para baixo com a tecla ALT para adicionar mais um texto de boas-vindas, como "Comece com sua primeira sessão de mobilidade".

A próxima etapa é inserir o botão de vídeo, que permitirá aos usuários reproduzir suas lições. Desenhe um botão redondo com a ferramenta de pincel e combine-o com um triângulo para deixar claro a representação e a função.

Agora copie todos os elementos de UI importantes – como as barras de navegação superior e inferior – para a próxima página para garantir consistência no design. Você pode simplesmente arrastar uma captura de tela com a tecla ALT para duplicar os elementos na próxima página.

Nesta nova tela que você criou, projete as opções de cursos. Aqui você deve fazer uma visão geral simples dos cursos disponíveis que o usuário pode selecionar.

Na visualização do perfil, você pode criar um espaço para a foto de perfil, o nome do usuário e a quantidade de horas de curso concluídas. Aqui é importante apresentar as informações de forma clara e concisa.

Finalize o design da seleção de cursos e lições, crie uma visão geral das lições e adicione um botão de fechar, para que o usuário possa encerrar a seleção a qualquer momento.

Assim, o protótipo básico para o seu aplicativo de mobilidade está concluído. Agora você tem um design atraente que estrutura claramente a navegação do usuário e, ao mesmo tempo, ajuda você, como designer, a visualizar claramente a visão do aplicativo.

Resumo – Prototyping de um aplicativo Mobility no Sketch

Durante este tutorial, você aprendeu passo a passo como prototipar um aplicativo de mobilidade no Sketch. Desde a primeira ideia até os últimos elementos de design, você pôde expandir seu conhecimento e criar uma ferramenta útil para o desenvolvimento posterior do seu aplicativo.