35 principais recursos de design para designers de aplicativos Sketch 2019
Publicados: 2019-06-09Sketch é uma ferramenta de design profissional para usuários da Apple. Existem muitas plataformas de software de design profissional por aí: Adobe Photoshop e Adobe Illustrator, Affinity Pro, GIMP e tantas outras plataformas que transferiram suas operações online. Sim, talvez nem todas essas plataformas possam fazer a edição de vetores de última geração (que o Sketch pode), e talvez nem todas elas forneçam recursos semelhantes ao do Photoshop (que o Sketch oferece). Mas cair orelhas em uma única plataforma de design porque todo mundo está usando também é uma loucura. O Sketch provou para sua comunidade ser uma ferramenta de edição confiável que continua a evoluir, ouvir o feedback da comunidade e produzir atualizações frequentes e importantes.
À primeira vista, muitos críticos vêem o Sketch como apenas mais uma ferramenta de edição de imagem, quando na verdade você pode usar o Sketch para construir designs altamente robustos e complexos. Tem uma das comunidades mais amigáveis que conhecemos, e o fundador é transparente em suas ações e no futuro do Sketch. O aplicativo deixou para trás a Mac App Store para se permitir focar mais em atualizações frequentes e ter espaço para um crescimento mais sólido. No entanto, o Sketch ainda está crescendo e o número de recursos de design disponíveis para ele é muito pequeno, embora isso também esteja mudando rapidamente; verificando os sites de brindes mais populares, há uma indicação clara de que mais designers gráficos também tentam incluir arquivos .sketch em seus pacotes. O Sketch também está se tornando cada vez mais popular entre os desenvolvedores que desejam ferramentas que ajudem a implementar e criar scripts; Pieter Omvlee tem mais sobre isso.
Mais sobre esta coleção…
Por falar em brindes, iremos listar 35 dos melhores, mais versáteis e mais adaptáveis recursos de design Sketch para você hoje, eles incluirão:
- UI (User Interface) Kits que você pode usar para criar um protótipo de um aplicativo móvel em minutos, tendo acesso total aos elementos e liberdade para otimizá-los como quiser.
- Kits de wireframe para permitir que você crie protótipos rápidos de sites e os envie para seus clientes, sem a necessidade de se sentar na tela e fazer todo o trabalho. Mais uma vez, permissões completas de edição.
- Webiste Elements são pacotes que contêm elementos específicos de um site que você pode estilizar, colocar código por trás deles e usá-los nos designs de seu site.
- Além disso, vários conceitos de design que podem gerar ideias ou servir como pontos de partida para um novo recurso em seus aplicativos de desktop ou móveis.
Encontrar e aprender sobre esses recursos de design foi um processo totalmente divertido, então realmente esperamos que você encontre alguma inspiração aqui, e talvez até pegue alguns recursos para uso futuro, ou para usar em um projeto que você está trabalhando atualmente sobre. Os usuários do Sketch podem enviar seus próprios brindes e downloads gratuitos por meio dos comentários. Iremos ler todos eles e provavelmente apresentá-lo-emos neste artigo se tiver algo excelente a oferecer.
Coleção de dispositivos de maquete
Estamos nos afastando da revolução do computador desktop para uma era mais concisa, em que os dispositivos portáteis estão liderando o caminho para compras online, consumo de conteúdo e mensagens instantâneas. É cada vez mais importante focar na criação de conteúdo e construir conteúdo em torno de dispositivos modernos que permitem aos usuários navegar e experimentar a web como fariam em um desktop. Ao fazer maquetes, protótipos e amostras de um aplicativo, devemos nos esforçar para fazer uma cópia de cada dispositivo popular que existe. E para ajudá-lo a economizar tempo, aqui está uma coleção de modelos de dispositivos móveis e tablets. Ótimo para exibir seu suporte para os dispositivos que podem executar sua plataforma ou simplesmente para sobrepor esses modelos com versões funcionais de seu aplicativo.
Esboço da IU do Checkout
Projetar pode consumir o dia inteiro ao trabalhar em partes específicas de um aplicativo ou plataforma. Pequenas coisas como a página de checkout requerem atenção cuidadosa para serem construídas com a sensação de que o processo de checkout será seguro e protegido. Esta maquete de IU do Checkout usa padrões de design padrão que fluem em muitas variedades de design. Além disso, com um pouco de personalização, ele encontraria seu lar em praticamente qualquer aplicativo que forneça recursos de checkout para seus clientes. Economize algum tempo fazendo o trabalho de design e concentre-se nos aspectos mais exclusivos do seu aplicativo.
Arquivos baixados Sketch
Esta pequena maquete é um modelo de integração para uma empresa que deseja usar uma tela de boas-vindas para explicar a usuários novos ou existentes do que se trata o aplicativo e fornecer a eles um botão "entrar" direto para ajudá-los a acessar o aplicativo. Um pequeno widget legal que você pode personalizar para caber nas telas dos aplicativos onde a transição é um requisito.
Conceito de painel de controle do planejador
Mais de cem downloads para este belo conceito de painel. Está dividido em três partes: a barra lateral esquerda, central e direita. A barra lateral esquerda se concentra no menu de navegação do painel. O meio é para planos reais e quem pode participar de qualquer um deles. Enquanto isso, a barra lateral direita concentra-se em suas próprias tarefas pessoais que você deseja criar. Ghani Pradita é a designer por trás desse conceito; dê a ele dois polegares para cima para esta incrível obra de arte.
Personalize o kit de interface do usuário do produto
As páginas de produtos das lojas online estão ficando mais modernas, digitais e, certamente, muito mais flexíveis. Este brinde de Rodrigo Borges é para a criação de uma página de personalização de produtos na sua loja online. O conceito permite que o usuário selecione uma variedade de opções para o produto final e, por fim, efetue a compra. O design é emprestado das páginas de vendas originais da Apple, onde você pode fazer ajustes finais nos produtos que deseja comprar.
IU de alimentos e bebidas
Os aplicativos de comida não precisam ser as plataformas tradicionais com muito conteúdo a que estamos acostumados na web. Em vez disso, com um design cuidadoso, podemos criar 'cartões' para nossas histórias relacionadas à comida e exibi-los de uma maneira mais eficaz e atraente, como pode ser visto nesta IU de conceito. Três cartas que mostram diferentes tipos de comida e bebida, com uma pequena descrição por trás delas, explicando como alcançar o resultado final. Isso poderia funcionar muito bem para uma rede de alimentos que deseja publicar receitas pequenas e fáceis, com um toque moderno e profissional.
IU de estatísticas
Ranjith Alingal está compartilhando com outras pessoas sua maquete de como deve ser uma boa interface de usuário de aplicativo de estatísticas. Uma coisa é entender como as estatísticas funcionam e incorporá-las por meio do código. Mas ainda temos que nos concentrar na criação de uma IU real para a saída bruta de estatísticas. Se você tem se esforçado nesse departamento, este brinde lhe dará um pouco de paz de espírito. O conceito se destina a aplicativos que desejam recapitular estatísticas de uma área específica do negócio, com a capacidade de relatar registros de até 30 dias também.
Esboço do calendário
O calendário é outro daqueles elementos com os quais você realmente não quer perder muito tempo. Parece uma tarefa fácil de realizar, mas quando você começa a fazer isso, as horas começam a se somar e o tempo está se perdendo. Economize algumas horas e pegue emprestado este conceito de calendário moderno de Sanja Zakovska. Ele usa um esquema de cores vermelho e compacto, mas como você obtém os arquivos do Sketch, poderá trabalhar totalmente com este ao seu gosto.
IU de integração
A integração continua sendo um dos processos mais completos de explicar a um novo usuário em que ele está se inscrevendo e o que ele pode esperar ao se tornar um membro de sua plataforma. Encontrar a maneira certa de embarcar é crucial, porque hoje em dia, a simples inscrição e o uso das técnicas da plataforma não funcionam mais tão bem. Rodrigo Borges publicou uma IU de onboarding gratuita com esquema de cores em vermelho, dividida em três partes. Isso permite que você edite os ícones principais e a área de texto para obter mais explicações. Essas telas de integração funcionam muito bem para aplicativos móveis, e não poderíamos enfatizar sua importância mais do que já fazemos.
Google - Ícones de materiais para Sketch
Traga algum material design para seus projetos. Até mesmo o aplicativo oficial do Facebook Messenger está lançando material design para seus dispositivos Android. E assim, muitas mais startups se concentram em construir seus novos aplicativos com a ajuda do design de material. Este padrão de design está amadurecendo mais rápido do que qualquer coisa que vimos na última década. Aqui temos um freebie de ícones de material design, prontos para serem usados em seus projetos, sejam eles mobile ou desktop. A contagem de downloads também está aumentando rapidamente.
Cartão de Localização
Um 'cartão de localização' muito moderno para sites de viagens que oferecem promoções de férias ou experiências de viagem em geral aos seus clientes. O conceito usa a abordagem de exibir uma imagem de plano de fundo do local que está sendo oferecido e uma bela sobreposição de 'cartão' para discutir os detalhes da viagem mais detalhadamente. Funcionará muito bem para sites de desktop e aplicativos móveis. A exclusividade e a modernização sempre mantêm os clientes presos às suas telas.
Ustraa iOS Mobile App
Ustraa é um aplicativo conceito que se concentra no comércio eletrônico. Mais especificamente, ele se concentra na venda de produtos de marcas individuais com um design atraente e elegante. Listagens de produtos, páginas de produtos, tudo está incluído neste conceito de aplicativo móvel completo. O que resta a você fazer é pegar o brinde e explorar as possibilidades. É sempre melhor usar um design de aplicativo existente, especialmente quando apenas um protótipo é necessário.
Widget de upload
Quer executar uma plataforma que ajude as pessoas a fazer upload de coisas, seja pessoal ou para uso de todos? Construir um projeto de conceito apenas para esse propósito levará muito tempo. Existem tantos scripts de upload por aí, todos os quais usam sua abordagem exclusiva para design e fluxo de elementos. Dê a si mesmo um pouco de espaço, pegue esta UI Upload Widget e construa um protótipo que não vai sugar a vida de você. Na verdade, é muito bem projetado também.
Electro App
Quando você ouve o nome Electro App, a primeira coisa que pode surgir na sua cabeça imediatamente é que é um aplicativo de música! Nah, não neste caso. Electro App é um conceito de aplicativo literal que pode ajudar a rastrear o uso de eletricidade em sua casa ou no trabalho. Insira seu uso diário e obtenha um resultado de quanto você deve esperar pagar até o final do mês. Adoramos quando os designers tomam a iniciativa de construir maquetes exclusivas e conceitos de IU que podem conduzir os desenvolvedores a uma nova categoria de ideias.
Reprodutor de música
Se todo aquele eletro te anima para um pouco de música, por que não pegar esta próxima maquete de um reprodutor de música e fazer algumas músicas com seu próprio aplicativo? Bem, o processo não será tão fácil, com certeza. Mas depois de explorar os recursos de design do conceito, não haverá nada no caminho para impedi-lo de executar esse conceito em um aplicativo móvel totalmente funcional que está pronto para atrair alguns ouvintes. Use-o como autônomo ou construa-o junto com um aplicativo existente que se concentra em mídia.
Cartão de inscrição
Os formulários de inscrição cresceram de formulários tradicionais de nome de usuário / senha para designs altamente sofisticados que continuam a enfatizar o tema geral do design do site / aplicativo. Se um formulário de inscrição estiver em sua lista de tarefas, dê uma olhada neste cartão de inscrição. É lindamente projetado para apresentar um formulário de inscrição separado e uma barra lateral para qualquer informação adicional que você deseja transmitir.
App Mail
Onde estaria o mundo sem e-mail ou mesmo mensagens instantâneas? Mail App é um conceito de interface de usuário que apresenta uma saída de caixa de entrada que você pode transformar em um design de e-mail pessoal para sua plataforma existente. Será necessário algum trabalho para criar um estilo de plataforma de e-mail independente; mas se você estiver construindo para uso pessoal, este deve ser um ponto de partida benéfico para lhe dar algumas idéias sobre como funcionam as caixas de entrada de e-mail.
Conceito de carteira
Talvez um nome melhor para isso seja Conceito de carteira digital. No entanto, esta é uma bela carteira digital que você pode integrar em sua plataforma que lida com os aspectos financeiros de um negócio. Talvez você esteja administrando um site de leilões e as pessoas possam carregar créditos em suas contas. Este conceito lhe dará espaço suficiente para brincar e projetar uma carteira que terá uma aparência ótima e moderna.
Ícones de vetor de fazenda
Não esquecemos os ícones, então aqui estão alguns kits de IU e outros conceitos específicos para ícones. O primeiro é um ícone de vetor definido para fazendeiros ou aplicativos relacionados a fazendas. Os ícones incluem um trator, cenoura, maçã, amido, vaca, fazendeiro, pássaro, casa e alguns outros que funcionarão em designs relacionados à agricultura.
Ícones gratuitos para iOS
Esses ícones apresentam vários aplicativos diferentes e populares que você pode encontrar na App Store. Se você já se perguntou como é construir um ícone do zero, agora você tem acesso a um arquivo Sketch em camadas que fará o resumo para você, como construir um ícone profissional a partir do zero. Ótimo para aprender como construir seu próprio ícone de aplicativo. Talvez você possa até pegar emprestado algumas idéias e elementos deste brinde.
20 esboço de ícones do painel
Os ícones do painel funcionam melhor para aplicativos gerais e relacionados ao escritório, o conjunto de ícones inclui: calendário, átomo, mensagem, cartão de perfil do usuário, hashtag, navegador da web, computador desktop, smartphone, painel de configurações, edifícios, pasta, perfil do usuário, etiqueta de preço, pasta e alguns outros. Economize tempo, obtenha um pacote de ícones pré-construído e use-o como quiser. Ficamos surpresos ao ver que poucos aproveitaram esta incrível oferta.
Analytics Chart Sketch
Já mencionamos um gráfico de análise, mas sempre há espaço para mais. Este conceito vem de Racine Davis. Ela usa a abordagem de design digital para criar um conceito de gráfico analítico que pode exibir quaisquer dados imagináveis, individualmente ou por meio de um lapso de tempo.
Análise de Fitness
E ainda mais coisas de análise, desta vez para entusiastas do fitness. Os aplicativos de esportes continuam a dominar as categorias de aplicativos de atividade física, sendo os contadores de passos alguns dos mais procurados. Felizmente para nós, Padam Boora saiu de seu caminho para entregar um bom design de conceito de análise de fitness que você pode prototipar rapidamente em um aplicativo funcional. O conceito é criado para ajudar a rastrear passos, distância e distância de escalada.
Mensagem Flash
Mensagens em Flash são uma ótima maneira de manter os usuários envolvidos nas atividades do aplicativo. Seja uma mensagem de agradecimento ou uma mensagem para informá-los sobre uma ação concluída, as mensagens instantâneas sempre asseguram ao usuário que suas ações foram concluídas e isso ajuda a tranqüilizá-lo. Este elemento de IU é uma mensagem flash simples que você pode incorporar em seus aplicativos existentes para adicionar após uma chamada de ação ter sido realizada.
Detalhes do produto
Para aplicativos de comércio eletrônico e lojas online, uma das páginas mais importantes que precisam de um design excelente será a página Detalhes do produto. Esta é a página que exibe o produto e leva a uma compra ou a uma janela fechada. Erros não devem ser cometidos nas páginas de detalhes do produto, portanto, dedicar um tempo para projetar ou encontrar uma boa maquete da página de detalhes do produto é crucial. Temos um que encontramos e gostamos muito. É simples, mas consegue passar a mensagem e não sobrecarrega a tela dos clientes com elementos de lixo.
Esboço do kit de interface do usuário do aplicativo social para iOS
Os aplicativos sociais estão ganhando impulso, graças à capacidade de todos criarem suas próprias redes sociais nos dias de hoje. Não é nenhuma surpresa que muitos designers se concentrem na construção de maquetes, conceitos e modelos que envolvem a esfera da mídia social. Aqui temos um kit Sketch UI especificamente para um aplicativo de rede social para desenvolvedores iOS. Este enfatiza recursos como upload de mídia e mensagens instantâneas. Uma variedade de feeds de conteúdo ajudam a exibir conteúdo, notificações de usuário e um sistema de seguidor. Claro, tudo isso é apenas design, então você precisa criar um plano sobre como tornar todos esses recursos em realidade por meio de alguns códigos.
Esboço mínimo do kit de interface do usuário do Android
O Android não foi o vencedor desta rodada, mas isso não quer dizer que não existam muitos recursos para desenvolvedores Android. Parece que muitos designers estão focados no iOS, exceto este. Aqui está um kit de IU mínimo desenvolvido para dispositivos Android. Você recebe no pacote todos os elementos necessários para criar um protótipo de um site simples de conteúdo / negócios, com opções de design padrão e moderno.
Moon Wireframe Kit Sketch
O Moon Wireframe Kit para Sketch foi baixado mais de 3.000 vezes. É porque garante ao designer que haverá elementos suficientes para usar na construção de seu protótipo. Isso é o que falta em muitos kits de IU hoje em dia: elementos mais complexos que podem ajudar a trazer à tona um espectro mais amplo de ideias. O Moon Wireframe Kit, no entanto, se atém às grandes armas e não se intimida em oferecer elementos interessantes e variados. As telas foram divididas nas seguintes categorias: Splash, Login, Menu, Configurações, Galeria, Feed, Lista de itens, Contato, Perfil, Notificações, Comentários, Estatísticas e Carrinho.
Esboço do kit básico de wireframe
Trabalhar em uma agência de design e não ter as ferramentas certas para criar protótipos rápidos pode ser um desastre. É por isso que você notará que muitos dos kits de IU que encontramos online gratuitamente oferecem todos os elementos básicos e necessidades que ajudariam a criar um protótipo de amostra de design de site de forma rápida e eficaz. Este kit de interface do usuário também inclui: elementos de formulários, caixas de seleção, botões, espaço reservado para imagem, espaço reservado para mapas, botões de dica de ferramenta, modais de informação - todos os elementos interessantes que compõem um site de conteúdo. Comece a projetar!
Pearl UI Kit Sketch
Estaremos encerrando este resumo com algumas adições de kits de interface do usuário legais que sabemos que você começará a trabalhar imediatamente. O Pearl UI Kit traz isso para a mesa: menu de navegação com itens e uma barra de pesquisa, uma barra e formulário de pesquisa individual, formulário de login por e-mail e senha, caixa de comentários, menu de seleção de país, menu de perfil pessoal com informações concisas de perfil, funcionalidade de pesquisa de amigos , seleção de categoria, seleção de conteúdo com guias, formulário de atualização de status de postagem, formulário de vídeo, botões e muito mais. Para resumir, é essencialmente tudo que você precisa para começar com um site que permitiria a produção de conteúdo e a criação de perfil de usuário de uma forma orientada para a mídia social.
Bootstrap 4 UI Kit para Sketch
Com mais de 4.000 downloads e somando todos os dias, este se tornará, sem dúvida, um dos principais kits de interface do usuário Bootstrap 4 para usuários do Sketch. Sua biblioteca também continua progredindo, e mais recursos do Bootstrap 4 estão sendo revelados pela empresa. O Bootstrap 4 está em desenvolvimento, mas alguns de seus aspectos estão disponíveis para teste público. Assim, a comunidade tomou a iniciativa de publicar o UI Kit no formato Sketch para permitir que outros inicializassem seus aplicativos usando a nova estrutura de design.
Gerador de esboço de interface do usuário simples
Com o Simple UI Sketch Generator, você pode gerar seu kit de UI com estilos de texto, símbolos de botões, amostras de cores e avatares. É também uma ótima ferramenta para explorar rapidamente as direções da arte e garantir que uma identidade gráfica seja consistente em todos os elementos. O autor do kit pede que você elogie seu trabalho deixando a marca d'água intacta. É bom respeitar os criadores e seu tempo livre, mas, no final das contas, a solicitação depende de você.
Dribbble GUI Sketch
Dribbble é o recurso de compartilhamento de design mais conhecido para designers gráficos profissionais e sérios e artistas de design. Com esta GUI, você pode carregar rapidamente os projetos em que está trabalhando e ver como eles ficariam no Dribbble depois de publicá-los. Pelo menos, é isso que o autor da GUI pretendia ser o objetivo deste kit. Concluindo, você sempre pode usar a GUI para construir seu próprio aplicativo ou site, com base no design.
iOS Photo App UI Kit Sketch
Mais de 3.000 downloads e contando, qualquer pessoa no mercado para lançar seu próprio aplicativo de fotografia, seja para uso da comunidade global ou pessoal, aprenderá que este é um dos melhores kits de IU de aplicativos de fotos para iOS que existem. Grande seleção de telas e muitas telas de funcionalidade que mostram a consideração do designer.
Esboço do kit de interface do usuário flexível
Por último, o Kit de IU flexível para Sketch que apresenta telas e elementos necessários para a construção de páginas de destino e páginas de negócios que exigiriam elementos como tabelas de preços, dicas de ferramentas, reprodutores de vídeo, menus de navegação e áreas de conteúdo. Na verdade, um kit de interface do usuário muito flexível.
Os melhores recursos de design para designers de esboço
Bem, essa foi uma ótima maneira de explorar o que os designers do Sketch têm feito nos últimos meses. Recapitulamos alguns dos melhores trabalhos de design disponíveis para usuários do Sketch e não poderíamos estar mais impressionados com o resultado final. Algum trabalho de design gráfico verdadeiramente espetacular e especial pode ser encontrado neste artigo; Esperamos que você tenha dedicado seu tempo para explorar as possibilidades e agarrado o que você achou que seria útil para o seu fluxo de trabalho de design atual. Por último, designers de Sketch, por favor, entre em contato conosco se você publicou seus próprios brindes em algum lugar da rede. Gostaríamos de dar uma olhada e considerar a inclusão neste post. Obrigado!