Noções básicas do aplicativo Sketch: como projetar e prototipar com o Sketch

1. Introdução: Olá e bem-vindo. Meu nome é Anna Addition. Eu sou um designer de UX com antecedentes de desenvolvimento de fatos. Eu também sou um futuro em compartilhamento de habilidades, e na aula de hoje, eu vou te ensinar o esboço do básico. Sketch Up é uma das ferramentas de design profissional mais poderosas. Ele funciona com Mac e utiliza um fluxo de trabalho baseado em vetores Thea maçãs para todos os tipos de criadores. Se você é um designer de produtos, você x você por que designer de site ou uma pessoa sem habilidades profissionais ou especializadas? No final desta aula, você será capaz de projetar e protótipo usando esboço. Eu também vou compartilhar para aplicativos móveis desejos página de rosto para a sua prática e inspiração. E você aprendeu que algumas das melhores práticas de esboço estavam funcionando de forma mais eficaz. Então vamos entrar. Mal posso esperar para ver o que ele cria. 2. Seu projeto e recursos: na aula de hoje, vamos criar um design de APP móvel usando esboço. Então vamos criar um protótipo usando esses projetos. Quando estiver pronto, carregue seu projeto para a galeria. Um projeto estudantil completo não deve ir. As seguintes páginas de design em formato PNG ou JPEG Capa esmagar-me suavemente para fora Cadastre-se páginas A página principal que as pessoas vêem depois de se inscrever. Você precisará dos seguintes recursos para esta classe. Aamodt, Berg e esboçar até 30 dias de teste gratuito. Pense forno até que você deseja projetar. Você não pode nem escolher um existente e redesenhá-lo. Ou pode usar o arquivo de desenho que compartilho para dar início ao seu projeto. Para inspiração de cores, sinta-se livre para usar meu quadro de humor de cores pessoal no Pinterest, então vamos seguir em frente e conhecer o esboço. 3. Caminhada em passagem de passagem de esboço: A interface do esboço é mínima por design. O painel esquerdo mostra todas as camadas são pastas e páginas no documento. A barra de ferramentas ao longo da parte superior contém todas as ferramentas importantes e inspetor de ações no caminho certo para ajustar as propriedades das camadas. Por último, mas não menos importante, o químico no meio é onde você verá seus projetos. Vamos analisar algumas das ferramentas e ver como elas funcionam aqui. À esquerda, podemos ver a primeira página, que foi criada por padrão. Para adicionar uma nova página, podemos simplesmente clicar neste ícone mais. Podemos criar tantas páginas como não estávamos, e para remover uma página, e para remover uma página, podemos simplesmente clicar com o botão direito sobre ela e clicar em excluir para começar a projetar algo que precisamos em nossa maneira porto pode inserir nosso barco a partir deste canto superior esquerdo, insira nossa porta ou simplesmente pressionando a letra A no teclado. Quando o fazemos, podemos ver sempre opções No painel inspetor, os são modelos pré-fabricados antigos criados pelo esboço para facilitar a escolha do dispositivo a ser projetado para que ele já tenha. Todo o tamanho correto é tudo o que você precisa fazer é apenas rápido no dispositivo que você deseja trabalhar com, e ele irá criar um quadro de arte para você. Você pode selecionar dispositivos Apple ou dispositivos Android, tamanhos responsivos de papel Web ou personalizados. Outra maneira de criar um quadro de arte personalizado é muito rápido em arrastar. Desta forma, podemos ver o que criou a primeira porta aqui. Podemos alterar o nome e alterar o tamanho do aeroporto. Podemos ir ao inspetor e incluir novos números. O primeiro número W é para com e a idade é para altura. Para mudar a altura, eu não coloquei um número diferente e simplesmente pressione enter. Estes dois números na banheira são para a posição da nossa porta, então para mudar a posição, podemos mudar o número. Impress enter. Vamos agora adicionar um par de camadas diferentes e jogar com as ferramentas para ver como eles funcionam para Adam Rectangle em nosso quadro entre dois. Pressione a letra R, em seguida, rápido e arraste para mais de reprimir Oh, e, em seguida, clique e arraste novamente para uma pressão de círculo. Oh, e então pressione shift, em seguida, rápido e beber ou texto com a imprensa mantenha apenas digitar algo por padrão. Diz “Digita alguma coisa”. Então, vamos alterar as propriedades de nossas formas no painel inspetor. Você pode mudar a cor deste círculo e, em seguida, vamos fazer o mesmo para o seu formigamento. Em seguida, vamos colocar o círculo em cima do retângulo para praticar algumas dessas ferramentas. Então, quando clicarmos no círculo, ele é selecionado, e então podemos usar essa ferramenta para o Senado para trás. Clique para trás, trabalhou e, em seguida, clique para avançar para trazê-lo de volta. Também podemos agrupar formas ou editá-las tão rapidamente e puxar as bordas para criar um conflito. Agitar fora do seu caminho círculo pode rápido, em qualquer lugar na placa de arte ou pressione a edição concluída para sair da carga de edição. Em seguida, podemos girá-lo, clique no deslocamento de imprensa retângulo e clique na nova forma complexa e, em seguida, máscara rápida. Assim, criamos nossa máscara de duas formas. Você pode jogar com as ferramentas do topo para ver como eles funcionam para alguns deles, como visualizar Claude ou exportar. Vamos usá-los mais tarde na aula, então vamos dar a eles por enquanto, meu layout de agenda pode parecer um pouco diferente. Por exemplo, estes eu vem aqui eu posso estar faltando em sua interface. E a razão é que eu tenho vários plugins de esboço instalados e eles fornecem alguns recursos adicionais . Isso é mais um esboço ruim, e eu vou cobrir isso em uma classe diferente. Então, se você notar algo assim, não se confunda. Esta é a estrutura básica do esboço foi nenhum movimento em frente e começar a projetar nosso aplicativo. 4. Parte 1: projetando a página de capa de aplicativos: para começar a projetar o up. Vamos pressionar um para a nossa placa e a partir dos modelos à direita, eu vou escolher o excesso de iPhone. Vamos renomear o Aborrecido clicando duas vezes aqui. Não, precisamos de um retornável com o mesmo tamanho, então se você selecionar o Arbour clicando nele, você pode ver seu tamanho. O com é 375 na altura é 112. Então agora vamos pressionar são para retângulo, clique e arraste, e, em seguida, vamos remover o falsificador e fazer o tamanho exatamente o mesmo que a nossa placa. Então era 375 por 812. Não, eu preciso alinhar uma linha do retângulo com placa ER primeiro, clique aqui para Alanya horizontalmente, e então eu clique aqui para Lenny verticalmente. Então preciso mudar a cor. Então eu clico na cor. Posso escolher a cor daqui, ou posso usar algumas das cores que já tenho no meu talento para adicionar a sua cor à sua unidade de apelação dois. Rápido este ícone mais aqui. Então eu vou escolher este mais calmo e então eu vejo que há estilos diferentes para iranianos. Foi tentado isso e ver como eles funcionam. Eu vou escolher este estilo e para mudar a cor dura eu clicar neste círculo, em seguida, ir para a minha paleta e escolher esta cor. Em seguida, clique no círculo direito quando eu descer e escolher esta cor. Então agora eu tenho é notar Cranie int eu poderia fazer mudanças para este grande E arrastando esta borda do círculo dois ângulos diferentes eu vou mantê-lo assim a partir de agora para adicionar impostos, vamos pressionar o chá no teclado e então apenas digitar o nome do APP é um local. Vou dividir meu imposto em duas partes. Então eu selecionar este preço Comando ver e, em seguida, comando ser e, em seguida, mudar e a tecla de seta para movimento. E esta parte vai ser desenhada. Então eu selecionei e novamente usei um turno e Cherokee para movê-lo. Vamos selecionar ambas as partes, selecionando o primeiro e, em seguida, pressionando clique raspado e agrupar esses dois juntos. Você pode nomeá-lo local para alinhar isso perfeitamente no centro, no meio da obra artística. Primeiro, pressione isto para alinhar horizontalmente e depois para o Atlântico verticalmente. Então agora eu tenho o meu design de página de abertura última avançar e continuar a projetar o APP . 5. Parte 2: projetando as páginas de inscrição: Vamos clicar no equipamento, emaranhado, em seguida, clique duas vezes no nome para renomeá-lo e pronto. Clique no símbolo de criação para transformar o para trás em um símbolo. Pressione OK, e podemos ver que sabe que este fundo é um símbolo. Em breve você verá como podemos. Usamos o mesmo elemento uma e outra vez em nosso design. Então, vamos clicar no Are Your Name (Are Your Name pressione a moeda e o comitê para copiar o quadro de arte. Vamos renomear esta segunda página para a página dois, e agora precisamos mover o logotipo, e então precisamos redimensioná-lo. Texto selecionado e eu mudei o tamanho divertido do inspetor. Precisamos mover as segundas cartas agora clique no grupo de logotipo e novamente alinhá-lo horizontalmente. Então vamos apresentar um T de texto. Que tal um imposto? Eu vou escolher uma avenida diferente, e a ciência do texto vai ser 24. Fui a um Linus perfeitamente no meio da nossa prancha. Você pode selecionar assinatura, projetar um comando de imprensa peças, ser para fazer um livro, e então agora temos a segunda página do nosso aplicativo. Vamos clicar sobre o nome nascem Pressione vir e C comando V dois vindo novamente Nós nomeamos placa er . Se você não renomear o aeroporto mais tarde, quando você especialista em seu mundo, ele vai ter problemas porque mesmo que apenas extra não vai funcionar um dos nossos quadros. Então não, nós não vamos criar a gaiola de inscrição na primeira página. Vamos precisar da pista de vara roupas dobráveis. Pressione comentário Seja para remover a calvície dos olhares tributados colocando a última parte para criar uma linha Eu pressionei a letra l clique e arrastá-lo aqui eu posso mudar a propriedade da minha linha fazendo branco Eu também queria estar perfeitamente no centro Incluir aqui. Não, eu quero criar um botão para que eu pressione Oh, e shift clique Indrek removeu uma borda fazendo agora Aqui precisamos de um pouco de sombra porque isso é demais. Então vamos fazer algumas mudanças aqui. Eu acho que parece legal. Então x zero y zero neste único e desfoque. Não, preciso colocar um ícone sobre meu botão para adicionar um ícone. Vou ao projeto conhecido que o golpe no próximo ataque traz à tona toneladas de psicopatas diferentes . Vou escolher este, e posso arrastar e largar no meu ficheiro de desenho. Vamos escolher o tamanho para ter certeza de que está perfeitamente no centro do círculo. Então deixe ambos o círculo no ícone e, em seguida, a linha que touros verticalmente e horizontalmente e, em seguida, assim, como a seta só ir para a seção final no inspetor e usar a cor parece bom. Então agora eu quero mostrar a vocês como ele pode realmente usar nosso símbolo que nós criamos anteriormente. Então, clique duas vezes no fundo, que é o nosso símbolo. Digamos que, se eu quiser mudar minha cor de fundo, eu não olho nele novamente, e eu entro em humor de edição. Então aqui eu posso selecionar uma cor diferente. Não, vamos voltar e ver o que aconteceu. Como podemos ver em todas as nossas placas são cor de fundo mudou, então este é o poder do símbolo. Se você tem, digamos dezenas de páginas diferentes, você não precisa gastar tempo para mudar a cor de fundo ou qualquer outro elemento uma e outra vez. Você pode simplesmente fazê-lo em um único símbolo e isso é ótimo. Eu não quero voltar para as minhas cores anteriores, então eu vou mudá-las aqui. Bottom e a grande coisa sobre esboços. Você também pode adicionar seus criadores como globais. Então, como você pode ver, quando você clica neste ícone mais, estes exatamente o mesmo grande e será adicionado ao seu paladar e você pode reutilizá-lo em qualquer outro projeto. Não, vamos criar outro símbolo para tornar o nosso mundo mais rápido. Então, quando um grupo estes dois juntos, Mas eu vou precisar no campo de formulário de grupo, em seguida, vai criar um símbolo que eu posso clicar aqui ou eu posso fazer um clique direito e cria um movimento . De lá vou manter o nome vendido onde me senti. Não, vamos copiar e colar este quadro de arte. Vamos nomear este nosso conselho de h quatro. Não, como posso ver, a estrutura é praticamente a mesma. Mas eu quero um texto diferente que você escreva. Então, o que eu faço porque é um símbolo, eu clico nele. E aqui no meu Inspetor Pano, posso mudar o valor. O que eu faço é escrever teletransporte. Pressione Enter. Este é o poder do símbolo foi copiar e colar novamente. Esta é a página cinco neste. Esta vai ser toda a senha. Vamos também adicionar ataques, outros termos e condições. Vamos voltar a este quadro de arte e escrever algo como o meu filho. Você sabe. Você concorda. Teoh viu comissões? - Não. Vamos tornar este imposto o tamanho fixo e, em seguida, mudar o serviço. - Você. Vamos alterar o tamanho da fonte e criar um Tim pixels. Vamos torná-lo centrado e alinhar para o centro. Basta copiar-nos e colar-nos nas nossas próprias placas. Ok, então vamos criar o próximo motor de popa. O melhor é o bem dos números. Confirme a senha. É permitir que você faça apenas mudar o ano de texto, tudo bem. Parece que todos os anos se inscreveram. Então, nosso próximo passo é projetar uma página que as pessoas veem depois de configurar 6. Parte 3: projetando a página final: Não vamos criar a página principal que os usuários veem depois de se inscreverem rapidamente neste quadro de arte. Iniciar Consulte para copiar o comando, ser para colar. Perseguir o nome do aeroporto até a isca. Sete. Vamos remover algumas das partes que não precisamos. Vamos mudar de tamanho para o retângulo de fundo para usá-lo como uma forma de cabeçalho. Também precisa alterar o tamanho local. Selecione partes lobo do texto e mudou o tamanho do telefone muito 40. Então vamos mover a parte inferior para alinhá-la corretamente. Selecione o grupo de logotipo movendo-se para cima e, em seguida, um relâmpago no centro do retângulo. Vamos agora criar a comida. Copie o fundo com emaranhado. Ei, em vez e realmente para o fundo. Mudou o tamanho, e sinto que Graydon não parece muito bem aqui. Então vamos separá-lo do símbolo e criar um suporte diferente para ele. Então vamos para o campo em vez de ótimo, e eu seleciono este primeiro círculo, que é uma única cor. Então eu clico no conta-gotas para Teoh, escolher uma cor e selecionar esta. Bem, este vai ser o meu rodapé agora. Precisamos de ícones para o rodapé. Vamos supor que temos três categorias aqui. Ajuda da galeria no perfil. Então volte para o “não-projeto”. Em primeiro lugar eu surto galeria. Vamos ver o que temos. Vou escolher este e depois ajudar. Vamos escolher este no próximo perfil. Estou tentando usar ícones idênticos em seu estilo. Vamos tentar este. Agora vamos selecionar tudo isso por carros. Altere o tamanho para 55 pixels e, em seguida, coloque o campo e use a cor. Não, preciso de alinhar isto. Então vamos para as ferramentas de alinhamento rapidamente, este último para alinhá-lo de baixo e, em seguida, para alinhar o espaço entre eles. Uma vez que eu faço isso, eu posso pressionar o comando G para agrupar esses ícones em um único grupo. Renomeei dois ícones de rodapé e clique na ferramenta de alinhamento do meio para ter certeza de que está perfeitamente no centro da comida. Er então eu rápido na comida ou retângulo pressione shift e selecione este grupo e clique no outro alinhamento para ter certeza de que ele está alinhado verticalmente no rodapé. Agora vamos criar as principais categorias do nosso aplicativo eu suponho que este aplicativo é para decidir coisas diferentes como banners, ícones, padrões, logotipos, etc. Então vamos criar essas categorias. Imprensa são para retângulo removido o pobre jantar clique na cor do campo. Rob a ferramenta conta-gotas em escolheu esta cor muito superior do mandril ao lado dele. Vamos alinhar no centro, e depois queremos o Teoh. Coloque um texto sobre ele. Então Presti na direita projetou. Eu quero mudar a face da fonte para Aven ER e também mudou o estilo muito pesado. Vamos também alterar o tamanho da fonte para 24. Selecione um turno de imprensa de tango semana. Selecione o texto em uma linha verticalmente. Não, vamos selecionar um retângulo e rechear o raio para obter cantos arredondados e, em seguida, pressionar shift . Então, como o texto e copie esses dois remanescentes. O 2º 1 vai ser melhor sinal. Vamos cortar isca novamente neste é projetado. A próxima categoria é design de ícones e design local. Então, para o segundo com 10 baixos, eu vou escolher uma cor diferente tentando criar o mesmo grande. Isso iria emaranhar. Sim, pegue o seletor de cores e escolha a cor. Não, vamos selecionar as camadas de texto. Você conhece essas categorias e as alinhou à esquerda clicando no alinhamento esquerdo. Não, queremos adicionar alguns motoqueiros para torná-lo visualmente mais atraente. Vamos voltar para o não-projeto em A primeira coisa é o design do site foi projetar. Vamos escolher este ícone para que o próximo esteja planejando melhor design , porque eu vou escolher este. A próxima coisa é o design de padrões por causa do tempo. Eu não escolho os ícones perfeitos. Vamos ver o que temos para design de ícones. Estou tentando escolher ícones que são idênticos em estilo. Não temos muitas opções para que eu não poderia projetar, eu acho. Certo, vamos nessa. E Leslie. Design local. Bem, design local. Vamos escolher este. Agora vamos selecionar todos esses ícones e alterar o tamanho para corrigir pixels. E então vamos alinhá-los à direita. próximo passo é clicar no campo e mudar a cor para branco ou qualquer cor que funcione para você. Então agora podemos ver que fica melhor com os OIC. Bem, eu quero fazer uma carga. Um pouco menor, talvez 50 pixels na última coisa que queremos é ter certeza de que cada um dos ícones está alinhado no meio desse retângulo. Então, selecione um retângulo, clique no ícone e alinhe-o on-line ao meio e faça isso para cada um deles. Agora temos a nossa página pronta. Não vamos projetar todo o aplicativo porque levaria muito mais tempo. Mas espero que isso tenha sido suficiente para você entender como o esboço funciona. Então nosso próximo passo é usar esta página é criar um protótipo. 7. Parte 4: protótipo: antes da prototipagem. Quero mostrar-lhe como você pode explorar o seu trabalho rapidamente nas câmeras e arrastar para selecionar todas as suas portas e, em seguida, tornar rapidamente exportável à direita. Você vê esses padrões no nosso quadro. Significa que o fundo é transparente. Mostra ter um fundo branco, mas quando especialista, vai ser transparente. Então, selecionamos a cor Bagram e verifique incluir em especialista. Isto irá certificar-se de que não é transparente, mas é na verdade branco, para que você possa escória e, em seguida, clicar em especialista no canto superior direito. E se você clicar em expert, você será capaz de exportar seu trabalho para PNG. Aqui, você pode selecionar um formato para o qual deseja que um especialista. Pode ser analisado. seu J. Pack era diferente. Quer criar um protótipo clique na arte para isso? Você quer começar com e depois colocar um ponto quente sobre ele. Idade da imprensa. Clique e arraste a área que você quer um rápido sobre, e quando você fizer, você terá isso que eu posso ouvir. Se você clicar nele, você será capaz de ver todas as páginas para selecionar a página que você deseja navegar para. A partir deste ponto, neste caso, é a página dois novamente com idade de imprensa e colocar um ponto quente no sinal, que vai ser um link para esta próxima página. Em seguida, coloque um ponto de acesso na terceira página para a próxima na mesma coisa para outras páginas. Não, vamos ver como funciona este protótipo. Rápido no primeiro, nossa placa que você começou, o que e, em seguida, como pré-visualização para ver com um protótipo e vamos testar. Como podemos ver, funciona de acordo com os pontos quentes que podíamos. Você também pode carregar seu trabalho para a nuvem de esboços e compartilhá-lo com o resto da sua equipe. 8. Considerações finais: Muito obrigado por ter tomado isso. Além disso, espero que tenha gostado. Não hesite em contactar-me se tiver alguma dúvida ou feedback. Empregado, compartilhe seu projeto na galeria desta casa. Mal posso esperar para ver o seu trabalho.