Transcrições
1. Bem-vindo à parte 2: Bem-vinda de volta. Só um lembrete rápido. Esta é a parte dois de uma parte três, é
claro. Então certifique-se de ter tomado parte um antes de mergulhar na festa. Está bem. Nesta parte irá projetar uma primeira versão fora. Nosso APP se concentrará na eficiência para ter um protótipo fora de nosso projeto o mais rápido possível. O objetivo aqui é ver as coisas como as imaginamos. Enquanto escrever as histórias faz sentido para você sobre as pessoas que você mostrar este primeiro projetado para Se você não tem notado o aluno luta para o curso na primeira parte. Certifique-se de que você faz. Agora aqui na seção de previsão de classe. Como eu disse, você só precisa fazer isso uma vez. Há tudo o que você precisa para as três partes do curso aqui agora eu estou morando aqui com meu bom amigo. Uma área de designer incrível para as próximas lições são divertidas
2. Diretrizes para iOS: neste vídeo, vamos falar sobre as diretrizes do IOS. Cada novo sistema operacional traz uma série de elementos diferentes que a Apple realmente incentiva você a integrar no seu design. Você pode encontrar antigas diretrizes oficiais neste elementos de endereço é que os usuários do iPhone
já estão acostumados a interagir com eles como eles já encontrá-los em cada aplicativo da Apple como seu padrão Apple, você e seu desenvolvedor vai Derrick Lee encontrá-los em X Code, o software usado para desenvolver IOS APS sem ter que exportar elementos. Também é ótimo porque você vai encontrar muitos arquivos de esboço feitos por um grande designer com todos esses elementos para obter uma pré-visualização aberta. O nome do arquivo IOS oito. Você gosta desta pasta de lições. Este arquivo é feito por uma grande empresa de design canadense chamada T Home carece que foi adquirida pelo Facebook desde então. Ele fornece elementos de design perfeitamente que podem ser usados em seu design. Esses arquivos são uma ótima maneira de aprender como as coisas são construídas, então leve alguns segundos para jogar com esses elementos. Para se referir às mesmas palavras, você terá que se acostumar a diss lexical na parte superior de cada tela, você tem a barra de status. A barra de status exibe informações em tempo real sobre sua conectividade, o tempo ou o nível da árvore do Tibete. O texto pode ser facilmente preto ou branco, mas não na cor desejada. O plano de fundo pode ser definido neste transparente, por isso terá a cor da sua barra de navegação. Tem sempre 44 pixels de altura e esticado, dependendo da inteligência da tela. Para um aplicativo muito imersivo, como um jogo, você pode optar por ocultar o fio estágios. Mas cuidado. Se a sua APP estiver a utilizar uma ligação à Internet, as pessoas poderão não adivinhar que adoram a sua ligação. Se eles não virem o status deles, me bloqueie até a barra de status. Há barra de navegação ou barra de naff. A barra de porca geralmente exibe ação relacionada aos anos de fluxo. Muitas vezes, você verá um botão Voltar à esquerda e a próxima data ou valor à direita. A barra naff pode ser colorida com o cupom 10 As pessoas muitas vezes escolhem para colocar a cor fora seu Brent. O estado é guerra e barra suficiente juntos são 100 a novos oito pixels de altura. Nós realmente recomendamos que você se lembre desta figura que eu era também. Use-o com bastante frequência durante o curso na parte inferior da tela, você pode usar a barra superior da barra de abas permite alternar entre diferentes seções do seu aplicativo que não
estão relacionados uns com os outros, pois é realmente perto do seu polegar. A barra superior geralmente contém, em princípio, a ação do seu aplicativo. Como abriu o acesso à câmera que você abriu seu feed inicial ou Booker Uber Top Bargain contém até cinco guias, e é 99 PC de alta. É totalmente personalizável, se necessário. É um padrão comum que é realmente eficiente, mas como quase tudo o resto, não
é obrigatório. Nas esquetes de Iowa, você encontrará muitos outros elementos que os cones representam. Na verdade, você provavelmente tem seu APP como novas informações de compartilhamento. Apple News Tender é ter cada contorno de ícones. Mas é claro, e veremos isso mais tarde. Você pode personalizar que este é um botão de alternância. É usado como um verdadeiro doce para un Enough, por exemplo, é a ferramenta perfeita para mudar notificações nas listas de declaração. Listas são maneira de organizar o conteúdo aqui você tem que exemplo de lista. Este elemento é chamado segmento e controle. Ele pode incluir duas ou três seções nessa configuração. Você vai usá-lo quando você precisar de seu mais fácil para fazer uma escolha entre duas opções que podem ser selecionadas em conjunto. Por exemplo, se você perguntar, um, hum, se o filho dela é um menino ou uma menina como um filtro, você, você vai usá-lo no topo da tela para criar na mesma tela duas ou três listas de itens diferentes. Por exemplo, ele é usado no topo da lista de notificações. Esta interface é Golden Action Ship. É uma maneira de propor uma solução diferente para uma ação. Por exemplo, no aplicativo de email. Se você quiser responder um e-mail, você terá que escolher entre responder,
responder a todos ou encaminhar. A barra de pesquisa pode estar no topo da lista ou diretamente na barra de navegação. Dependendo do seu caso de uso, você terá que escolher a melhor opção. Ah, teclados
americanos são padrões e sempre têm o mesmo ódio no Iowa. Você pode definir uma cor específica para ser a cor ativa, a cor que será exibida quando a parte inferior for acionável por padrão. É um azul elétrico específico, mas você pode ver rosa no aplicativo de música ou amarelo no aplicativo de notas. Por exemplo. Você pode escolher a cor da sua marca se quiser ir mais fundo nas diretrizes do IOS, nós realmente recomendamos que você engane um designer chamado Manto em Medium. Aqui está o link. Se você estiver criando seu próprio aplicativo, comece escolhendo os diferentes elementos que você precisa para projetá-lo. Você pode ter que ser um pouco criativo algum dia, mas você realmente pode encontrar uma maneira de fazer quase tudo o que você precisa. Foram os elementos padrão. Então agora que você conhece o novo léxico mais antigo na próxima lição, vamos usar esses elementos para projetar uma primeira versão do Instagram seguindo as
diretrizes do Onley IRS .
3. Sketch de passagem 3: Então bem-vindo a esta parte do curso. Vamos começar a desenhar a interface real. Então vamos abrir, esboçar e criar um novo documento. Não entre em pânico se eu não entrar em detalhes em vez de mostrar como tudo funciona
agora , vou mostrar-lhe as ferramentas que você precisa e como usá-las conforme projetamos. No entanto, esta é apenas uma visão geral. Sketch é dividido em quatro partes no centro. Você tem uma tela de desenho ilimitada no topo. Você tem uma barra de ferramentas era uma função principal. Você precisa desenhar e criar formas. Então, por exemplo, podemos desenhar um retângulo. Clique em inserir forma den retângulo, clique e arraste para desenhar um retângulo no tamanho desejado. Agora também está criando uma nova forma de inserção oval. Também podemos presidente ou O no seu teclado. Como um atalho. Você pode mais fácil romance drone ou círculo perfeito mantendo o turno enquanto você está arrastando. Esses dois ícones permitem agrupar e UN objetos de grupo aqueles que você ampliar e reduzir o zoom . Os ícones mais antigos são para transformar Uma forma de editor irá usá-los mais tarde no curso. Disfunção chamada Muro é um dos melhores esboços. Ele permite que você visualize um design em tempo real em seu dispositivo, mas temos uma escuta dedicada para isso. No lado direito, você encontrará sessões mais antigas para editar sua forma. Aqui estão as coordenadas fora do seu objeto lá realmente útil quando você quer fazer pixel design
perfeito. Esta é uma dimensão fora do seu objeto. O armário no meio permite que você mantenha a proporção de sua forma enquanto você o
redimensiona . Podemos definir a opacidade e,
claro, claro, as cores que você pode dizer separadamente a cor fora da borda e a cor do campo. Como você pode adivinhar. Há também uma seção de cores dedicadas neste curso para mostrar velha perseguição incrível Por favor esboçar. Três. Abaixo estão as sombras. É um pouco antiquado aqueles dias, mas ainda há uma coisa boa a fazer. Shadows é por isso que estávamos desenhando? Você deve ter notado que cada forma que dirigimos energia gerou um mentiroso no painel esquerdo . No esboço, cada forma é uma camada. Você pode movê-los em torno de sua lista de camadas para colocá-los em segundo plano ou em primeiro plano . Então, por exemplo, se eu colocar o retângulo no topo da lista de camadas, ele estará no topo do círculo na tela para ocultar uma camada. Clique no ícone que aparece ao lado de seu nome, e quando você quiser congelar uma camada, clique com o botão direito do mouse no nome latente e selecione a sorte. Eu sei que é muita informação para a primeira caminhada, mas você vai ver que o no final do curso, você vai saber o que cada ícone representa. Agora mesmo. Tire alguns minutos para jogar com as diferentes funções, e quando você achar que está pronto, vá para o próximo vídeo, onde começaremos a projetar a primeira versão do APP.
4. Jogando LEGO: a fim de continuar vendo simples, ineficiente. Nesta lição, vamos projetar aversão fora do instagram usando elementos padrão Onley. design padrão é o primeiro passo antes do design híbrido e do design personalizado. Padrão projetado segue a diretriz IRAs usando Onley, elementos
iose, iconografia e interface de usuário. Isso é o que a Apple usa em APs mais antigos, mas também é o que outras empresas gostam. O que se passa? Por exemplo, o design híbrido combina? Vocês são ocidentais com elementos personalizados, como fluxos? Telefonou para ícones? Muitos bem-sucedidos como Twitter, Facebook, Pinterest ou instagram usam design híbrido. Finalmente, há também exemplo de design personalizado com gestos de notícias, UX
inovador e totalmente personalizado. Você I Snapchat tinder ou papel Facebook são um bom exemplo de design personalizado. Recomendamos que você comece a projetar foi transformado porque é a melhor maneira de ser eficiente. Se for fácil de projetar, será
fácil de desenvolver e você poderá testar rapidamente seu produto com usuários reais . Se as pessoas começarem a amar o que você está construindo com padrões, você terá o tempo todo. Você precisa melhorar seu design com o feedback deles. Então, por enquanto, nós estamos indo apenas para jogar Lego e tudo que você precisa saber é como copiar e colar abrir o arquivo Lane Instagram I West Under Kit nesta pasta de lição Aqui estão todos os elementos estavam indo para usar para construir nosso aplicativo Agora grande. Um novo documento era fim comum ou se eu soubesse, nomeá-lo instagram A padrões U. S. Vamos começar por projetar a primeira tela Para que irá criar uma placa ímpar com exato que
mencionei muitas vezes iPhone seis tela clique inserir fora da placa à direita, você pode notar que esboço sugere automaticamente nossos tamanhos de placa. Você poderia sentar tela X do iPhone, seis iPad, computador
desktop e todos os tipos de ícones. Para esta lição, vamos selecionar iPhone six retrato chamado tela inicial do Art Board clicando em seu nome na lista de camadas. Você também pode usar um atalho. Comentário é renomear uma camada. Agora vamos jogar Lego e colocar elementos são a sua localização exata. Vamos começar com a barra de navegação, ir para o outro arquivo e copiar todo o arquivo de alternância do grupo da barra de navegação e baseá-lo. Coloque-o em cima do seu popa. Veja como o esboço ajuda você a colocar no lugar. Bom chá, o dissidente da linha vermelha nos diz. O bloco está bem centrado, e os dos locais indicam que ambos os lados do bloco tocam as idades do popa. Se o elemento que você está tentando selecionar estiver em um grupo, talvez seja necessário rapidamente várias vezes para alcançá-lo. Clique no botão Voltar na barra de faca até selecionar apenas o botão Voltar. Você também pode manter o comentário enquanto você sobre o grupo na tela para selecionar os elementos que você deseja diretamente. Há também uma maneira de fazê-lo é selecionar o elemento dentro do grupo diretamente na
lista de camadas . Exclua o nível de volta e a seta como nós não vamos precisar dele para a tela, renomeado o título do naff Bar Instagram e vamos nomear o nível certo direto. Agora volte para o outro arquivo com o recurso mais antigo é que essas cinco narrativas correspondem a cinco fluxos diferentes. É por isso que o Instagram opta por usar a guia. São foram cinco torneiras como seu sistema de navegação. Cada história terá sua própria guia pode ser a guia inteira. Nosso grupo toca a barra superior na parte inferior da tela. Desta vez vamos usar as setas para ajustar a posição do elemento. Se você pressionar um estreito em seu teclado, seu objeto irá mover um pixel na duração dos seios árabes. Se você segurar shift enquanto faz isso, ele irá mover 10 pixels por Dell Pixels Vamos selecionar a primeira história. Este será o primeiro passo que eu quero dar, compartilhar belas fotos, copiá-lo e colá-lo em seu arquivo. Será o nosso lembrete. A capacidade de tirar belas fotos é a nossa principal característica, por isso seria colocado na câmera central direita no ícone no centro da Barra Tep. Faça a mesma coisa com a segunda narrativa. Quero ver as fotos dos meus amigos. Este vai ser o nosso próprio pé bem em casa abaixo da primeira aba à esquerda. Quero ver as horas de fotos de outras pessoas, terceira narrativa, e será a nossa guia de exploração, certo? Explore na segunda aba que agora você pode trazer para menos narrativas. Quero saber sobre as pessoas. Atividade na APP é a nossa história habitual forçada e será o nosso quatro passo Finalmente, como também queremos ter acesso do que as pessoas vêem de mim perfil direito abaixo da última parada sobre os direitos. É isso. Temos toda a navegação. Agora vamos trazer o conteúdo. Há uma regra muito simples que você deve ter em mente ao criar suas telas. O conteúdo é rei. O que eu quero dizer com isso? Quase em todos os lugares, um Mumbai AB não está ciente. Outra ferramenta para lidar com conteúdo por trás do termo conteúdo. Há uma grande variedade de cantos e formatos. Pode ser mensagens de notícias e formações na forma de textos, fotos, gráficos, representações ou até mapas. A ação mais comum novamente executada é criar, consultar, compartilhar e gerenciar conteúdo. Pode ser interessante perguntar a si mesmo para cada um de seu relógio de tela tentando fazer com o seu conteúdo. No nosso caso, o conteúdo é imagens, dependendo do que queremos que o usuário faça. Queremos exibição de fotos da mesma forma que eles vão ser grandes quando o conselho de usuários eles e menor quando ele compartilhá-los. À medida que estamos construindo o feed inicial, vamos tornar o conteúdo o mais grande possível. Desenhei uma borda quadrada a borda. Lembre-se de segurar. Por que arrastar para mantê-lo lugares quadrados em zero em X em 148
N. Y. Agora, como um conteúdo secundário, vai reproduz uma foto de perfil do usuário que postou a foto. Vá para inserir forma. mal joga o mouse no canto superior esquerdo da praça. Basta remar agora. Clique e arraste até chegar à parte inferior da barra de navegação. Lembre-se de segurar a mudança para manter proporções. Agora você deve ter um romance que está localizado bem entre a barra de navegação, a foto e a borda da tela. Vamos jogar a mesma margem em torno das ovais e desses três elementos. Para fazer isso, vamos redimensionar o oval pelo centro. Selecione o oval, clique em uma alça em um canto pressione shift e saia até ver que a margem é de 15 pixels para verificar. Se fizemos o nosso trabalho bem, você pode selecionar o oval e pressionar para fora quando você sobre ou os outros elementos com o mouse. Ele irá mostrar-lhe a distância entre os dois objetos. Aqui temos 15 à esquerda, 15 na parte superior e 15 na parte inferior. Parece que não foram tão ruins nesta lição. Nós assim como jogar Lego com elementos. Como reproduzi-los e endereço de margens entre eles. Na próxima lição trará algum texto para isso e lembre-se, conteúdo é rei.
5. Noções básicas de texto: nesta lição, vamos inserir texto em nossa simulação. Pode ser uma das lições mais fáceis. Como você já sabe, a primeira parte do curso está focada em ser eficiente, então vamos tomar o tempo. Tirou sobre tipografia e Karen mais tarde neste curso. Mas lembre-se, algumas coisas. Não utilize mais de dois ou três telemóveis no seu design quando não souber o que financiar. Para escolher Big Helvetica e 11 pixels é a altura mínima que você pode usar online por dispositivos. Agora vamos voltar ao nosso design à medida que o deixamos, já
colocamos um espaço reservado para imagens tão bem agora reproduz os blocos de texto ir para inserir no texto. Da próxima vez, vamos apenas pressionar o curto get chá desenhou um bloco de texto abaixo da barra naff. Não precisa ser extremamente preciso. No entanto, neste texto, bloco irá exibir o nome do usuário que postou a imagem. Digamos que para este exercício que nosso usuário é chamado Michael Jordan no lado direito, você pode definir a frente do seu texto. Vocês não são sempre claros e fáceis de ler? Não é muito original, mas vai funcionar perfeitamente para nós definir o tamanho em Helvetica 16. Mas neste caso, também
queremos que o nome do nosso usuário seja clicável para descobrir seu perfil. É uma regra comum no design móvel usar telefones médios ou negrito quando você quiser que os textos sejam clicáveis, então escolheremos o meio no melhor. Você teria sublinhado, mas parece um pouco antiquado hoje em dia. Vamos fazer a mesma coisa abaixo da imagem. Presti para adicionar um bloco de texto desenhar um abaixo da imagem no 1º 1 colocará o número de voos. Então, digamos que recebemos 1234 gostos. E vamos desenhar outro bloco de texto para os comentários. Digamos que dunk hashtag n b A. O comentário contém palavras que não são clicáveis, então deixamos a frente como regular. Ok, agora vamos descobrir qual telefone usa o instagram para seu logotipo. Poderíamos perguntar ao Google qual telefone usar o Instagram para este logotipo e ter nossa inserção, mas você nem sempre terá as respostas, então vamos ver como processar o telefone. Filas no novo logotipo são feitas sob encomenda, então vamos usar o Lego anterior ir no Google para encontrar o logotipo do Instagram em uma imagem, salve-o em sua área de trabalho, se necessário. Recorte a imagem para manter apenas o texto. Agora vá para o que é diferente e faça o upload do seu vencedor. O que diferente vai pedir-lhe para digitar a letra que não reconheceu peito Próximo e aqui
vamos nós . Instagram Use um telefone chamado Billabong. Agora procure por Billabong, Frente no Google. Aleluia! É de graça. Você poderia baixá-lo, mas já é uma pasta nova para isso. Ouça, vá para a pasta e clique duas vezes no arquivo billabong. Seu Mac vai abrir soneca chamada lista telefônica, Clique em Instalar o Filmado, e aqui vai você. Se você usar telefones personalizados, você tem que entregá-los ao desenvolvedor, e recomendamos que você use telefones Freon Web na pasta. Também deixamos cair alguns telefones gratuitos legais que você poderia usar agora que adicionamos o telefone crente . Podemos alterar o título da barra naff com o logotipo do Instagram, clicando
duas vezes o grupo de barras suficiente até que você possa editar o título, em
seguida, propõe o telefone de Helvetica para Billabong disse que o tamanho para 35. Claro, não
é o logotipo exato do Instagram, mas definitivamente funcionará para o nosso protótipo. É isso removido. Copa ainda é um pouco áspero, mas começa a parecer um aplicativo real. Vamos trazer um pouco de cor na próxima lição.
6. Noções básicas sobre cores: nesta parte do curso terá sobre cores de uma forma muito prática, vai dar mais detalhes sobre a teoria das cores, como ser cores, harmonia e muito mais na segunda parte do curso a este nível só vai usar um cor selecionada fundo após a barra de navegação no lado direito, você pode ver que seu campo era branco. Clique na pré-visualização de cores aqui. Você pode ver que estamos na guia de cores planas. Ficaremos aqui por um momento. Grande a cor que você quer. Se você sonha em ver laranja instagramming, este é o seu momento de glória. Quando você coloca seu corpo em cores, você deve transformar sua barra de status em branco. Esta operação será uma boa recapitulação do que aprendemos até agora. Escolha a barra de status com textos brancos nos EUA Você gosta que ele co pagá-lo e baseá-lo no quadro de
arte. Coloque-o na pasta direita Naff barra. Mascarar o preto clicando no contexto II para o seu nome. Se você quiser. Senador perfeitamente usado a hora ou colocá-lo em 00 como nosso fundo preto ajuda tem que colocar sua barra de status vai mantê-lo e disse que é cor como total transparente. Selecione o fundo do seu conjunto sua barra e disse que a opacidade em zero. Incrível. Agora, e se você quiser que seu instagram seja uma réplica total do original? Sketch inclui um seletor de cores incrível que permite que você leve uma tenda onde quiser na
tela . O Evan. Se ele estiver fora do APP, é um recurso que pode economizar tempo, já que você não precisa mais arrastar uma imagem para esboçar selecionar sua cor. Abra a pasta desta lição. Você tem uma captura de tela do aplicativo real instagram. Abrir foi pré-visualização. Então volte ao esboço. Coloque esta captura de tela lado a lado apostas pegar por re dimensionar as duas janelas. Clique no fundo da barra de navegação, clique na cor e selecione o seletor de cores. Agora clique onde quiser na barra naff de captura de tela. Aqui está. Você não está usando o azul oficial do instagram em seu aplicativo. Como você pode imaginar, vamos usar essa cor muitas vezes, então vamos salvá-la clicando no sinal de mais para adicioná-la em nossa biblioteca Squatch. Agora coloque todos os técnicos que são aplicáveis neste azul, como o nome do nosso usuário, o número off likes e a hashtag em nosso equipamento. Vamos também tirar alguns segundos para policiar o que fizemos até agora. Vamos dizer que aqueles tamanho divertido aos 16 virou um título em branco e o rótulo direto, também. É isso. Sabíamos como lidar basicamente com cores. Se você tiver um projeto pessoal, selecione a chamada que não quiser e salve-a em seus switches. Na próxima lição, vamos aprender como alinhar objetos perfeitamente criando uma nova tela.
7. Alinhamentos e grade: nesta lição verá como usar as ferramentas de alinhamento. Eles são realmente úteis e muito fáceis de usar. Então, agora que terminamos, a tela inicial vai olhar para a tela da exposição. Selecione a tela inicial fora de borda. Você pode clicar diretamente no nome arbol na cannabis Selected Copiapo bordo estava chegando , ver, e com base que estava chegando. V Renomeá-lo pressionando comum são nomeá-lo. Explorar tela, clique na barra de faca para renomeá-lo Tipo, explorar e disse que o telefone de volta em um Levítico 17 meio. A tela nos permite muitas fotos do irmão ao mesmo tempo. Então, em vez de ter uma imagem no meio vai exibir concordou de miniaturas, fez tudo o que não precisamos de tais pilhas e espaços reservados. Agora vamos concordar com os machos desenharam um quadrado e redimensioná-lo para 125 pixels por 125 pixels. Lembre-se de que, se você quiser manter proporções, você precisa pressionar shift enquanto vê o estilo padrão do esboço para formas é um cinza claro no fundo em um cinza escuro para a borda. Vamos desenhar muitos quadrados sem bordas nesta lição, então vamos ver como podemos editar o estilo padrão. Selecione esta consulta apenas verdadeiro e verifique os livros Borda Agora clique em Editar e disse Estilo como padrão. Agora a forma mais velha Will Dro não terá fronteiras. Vamos competir na praça e baseá-la. Você pode copiar colar mais fácil com vir e ver e vir. Inveja ou seca arrastou o elemento Pressionando para fora. Copie três quadrados onde quiser. No popa joga a borda esquerda de um quadrado na borda esquerda fora do quadro de arte e a borda direita fora de outra praça na borda direita de Thea Porter. Agora vamos usar os alinhamentos e deixar a magia acontecer. Selecione os três quadrados e alinhe-os no topo, pressionando este botão. Veja, todos os elementos estão agora alinhados. Agora mantenha o quadrado da rua selecionado e clique no primeiro botão nas ferramentas olho Lineman em outros para distribuir os elementos horizontalmente. Ele é o botão e a habilidade de colocar exatamente o mesmo espaço entre diferentes elementos. Agora podemos duplicar a primeira linha abaixo e criar nossa grade. Ótima. Agora que sabemos como usar a ferramenta de alinhamento, veremos uma maneira diferente de fazer a mesma coisa, e começaremos excluindo tudo o que acabamos de fazer. Basta manter o primeiro quadrado no canto esquerdo. Vamos usar a ferramenta de grade, clique em laranja e fazer grade, disse Rosários. Quatro era uma margem de um pixel e disse colunas com três com um picaretas na margem. Clique em Megret. Selecione todos os retângulos criados no painel esquerdo e alinhe-os visualmente com a foto do outro quadro de arte. Vamos terminar o trabalho corretamente agora selecionar todo o terminal na lista de camadas e agrupá-los clicando neste psicopata chamado Grupo Grid Dragon. Solte este grupo abaixo da guia de navegação estão na lista de atraso. Volte para o Instagram. IOS acabou arquivo garoto para trazer o Coupet barra de pesquisa e baseá-lo em seu quadro ímpar. Coloque-o de borda a borda abaixo da barra de navegação. Faça a mesma coisa para o segmento e controle. Substitua o Labelle esquerdo por fotos. Isso irá esgotar exibir fotos aleatórias. Eu posso Breaux e substituir o direito que eu construí pelas pessoas. Isso exibirá as pessoas recomendadas que eu posso seguir. É isso. Bem, agora você sabe como alinhar, objeto e duplicar objetos para viver regras específicas. Esses dois são tão úteis que vamos usá-los muito no curso, então não se assuste. Se você tiver problemas para usá-los, você se acostuma com eles rapidamente. Agora que nossa simulação parece quase uma soneca, vamos trazer algumas imagens para ver como vai parecer que vamos ver isso no próximo vídeo.
8. Inserir imagens: Olá novamente nesta parte do curso, vamos mostrar-lhe a maneira útil de inserir imagens no esboço, e eles vão mostrar ambos e dizer-lhe por que você deve escolher um ou outro. O primeiro é usar uma máscara. Vamos fazer isso para a tela inicial. Abriu uma foto chamada Picture Home Indus Listens pasta. Basta arrastar a imagem diretamente para o arquivo, redimensioná-la e colocá-la na parte superior do espaço reservado na tela. Agora diga, como possuem o espaço reservado, Termine a imagem e clique na máscara sem caroço. Vamos fazer isso novamente foi uma foto de perfil do nosso usuário arrastar e soltar a imagem Michael Jordan Perfil em seu esboço caiu. Coloque-o acima da imagem do perfil, espaço reservado e máscara. Aqui está. O que é ótimo com este método é a capacidade de atingir a parte da imagem que você deseja mostrar. A desvantagem é que você tem duas camadas para uma imagem e enviar complicado. Então vamos ver outra maneira de adicionar uma imagem boa para o grito expo, Selecione o primeiro quadrado clique na guia de cores e vá para o tempo de força chamado Padrão Quicken. Escolha imagem e selecione Escolha um bloco é quando você tem um padrão, mas neste caso, queremos imagem para sentir o quadrado. Então selecione o campo. Faça isso novamente para praças mais antigas com falar com Big Three antes e assim por diante. E se você quiser usar suas próprias imagens, vá em frente. Como você pode ver, este meio é realmente Festen fácil. Ele também funciona muito bem com plugins legais vai falar sobre isso mais tarde. A desvantagem é que é menos preciso. É isso. Temos duas maneiras de inserir imagens em seu design. Vamos usar a opção de máscara se quisermos ser realmente precisos em colocar nossa imagem e sentir a opção. Se quisermos apenas sobre a forma para ter uma imagem no fundo. No próximo vídeo, vamos inserir ações em nosso aplicativo criando botões.
9. Botões de design: oi novamente nesta lição irá projetar botões para todos os usuários para interagir com o conteúdo. Vamos voltar às nossas histórias por um segundo. Estamos trabalhando nos pés do usuário como Kevin. Quero ver as fotos dos meus amigos e dar-lhes feedback para que saibam que estou a dar-lhes validação. Até agora, permitimos o uso de impulsos. Ele é fotos de amigos. Agora queremos permitir que ele comece e, como duas fotos que eu descanso sob realmente não incluem botões Apple preferem quando você usa cones oi nível de
texto. Eu não preciso ter nosso ícone personalizado ainda. Usaremos um ângulo indireto de nível de texto para criar um botão para fazer a chamada à ação. Chamada mais forte para Ação ou
C.A. C.A. é a capacidade do seu projetado para encorajar as pessoas a fazer conexão aqui. Para clicar no botão, vamos voltar para a nossa tela inicial e vamos limpar um pouco. Selecione uma imagem de perfil e um nome de usuário e agrupe um nome de usuário da pasta o conteúdo da
imagem principal , selecione o número de curtidas e comente e agrupe o mesmo. Esta descrição do suporte arrastou seu grupo alguns pixels abaixo. Se quando você clicar nele, apenas um elemento é selecionado em vez de todo o grupo, e marque a caixa de cliques. Ao selecionar no lado direito, coloque a barra de guias de navegação acima do Grupo de Descrição na lista de camadas. Agora vamos engrandecer nossos elementos acionáveis. Bom para inserir retângulo da próxima vez vamos pães. Um atalho é Desenhar um retângulo de 30 pixels de altura por 90 pixels de branco. Coloque-o a 15 pixels da borda da tela. Você pode facilmente fazer isso digitando 15 em X, e lembre-se que você pode verificar pairando seu elemento. Por que oprimir para que pareça ainda mais que a conexão Will Button dará um retângulo registrado. Os cantos disseram. O Reg está às quatro. Você deve ter notado aqueles dias que está treinando para fazer botões parecerem cascas. Spotify usa este lote, por exemplo, para fazer isso, apenas disse que o comum registrou o máximo e seu retângulo vai se tornar recurso. Se você precisar ir acima de 40 você pode digitar o valor desejado. Por enquanto, vamos me dar que para Vamos duplicar o primeiro retângulo, clique e arraste segurando e reproduz um novo retângulo ao lado do 1º 1 Finalmente, clique e arraste e coloque um último retângulo na borda direita da tela para colocá-lo pixels do tipo de borda direita menos 15 na exposição. Agora vamos inserir os níveis que descreve a função de cada botão inserido bloco de texto e disse que a frente em Helvetica Irregular 16 disse que a cor era um cinza escuro. Coloque o bloco de texto sobre o primeiro botão e digite como apenas inteligência bloco de texto para
combiná-lo com o botão e disse que o texto a ser centrado no bloco de texto. Copie o bloco de texto sobre o outro botão e digite. Comentário. Nosso terceiro botão será acessar as opções, como relatar o conteúdo ou copiar o link da imagem. Não é tão importante quanto os outros que o projetarão de forma diferente. Copia bloco de texto sobre ele e digite mais agora desmarcado os dólares cor campo e verificar a bola. Os dólares. Isso atrairá o efeito da cidade do nosso botão novamente. Veja ta significa um apelo à ação. Por exemplo, entre este, este e este botão que pode ter uma conversão melhor no 1º 1 Há um monte de artigos sobre como aumentar a conversão novamente. Diggin-lo se você quiser primeiro ou informações agrupe cada nível de texto com o retângulo atrás deles. Nomeado a pasta com o nome da ação, então teremos, como comentário e muito mais. O botão mais fará com que uma fraude de ação apareça com diferentes opções. O botão de comando fará esta rainha deslizar para a esquerda e revelar o teclado. Quanto ao botão como. Uma vez que você tocou
nele, ele vai apenas em vermelho selecionar o fundo do botão como e espreitar um lindo vermelho virar a frente em branco na mesma tela. Temos agora o mesmo botão em ST. Status diferente. Ativo, inativo e secundário. Vamos separar os três elementos das informações abaixo. Ao desenhar uma linha, você pode pensar que o peso mais fácil desenhou uma linha será clicar em inserir on-line, mas na verdade não é. A ferramenta do leão não é muito boa em esboços. É muito difícil de definir e não muito intuitivo. É por isso que usaremos uma ferramenta que conhecemos bem. Agora. Retângulo de desenho de ângulo direto ajustá-lo com um 345 e é oito em um. Pixel disse que a cor era um cinza claro, como ele tem que ser uma informação realmente discreta, disse que a posição em 583 em Por que, e colocá-lo no meio. Você pode, por exemplo, usar as imagens grandes e alinhá-las ao centro. É isso. Vamos ver um pouco de lexical antes de encerrar quando você tem no limite como um botão fora de algum conteúdo, como uma foto. É delimitado por uma borda que pode ser visível ou não. O espaço entre a borda e o que está dentro, por exemplo, entre a borda fora de um melhor e o texto do botão. Chama-se “acariciar”. Finalmente, o espaço entre o elemento e o que está ao seu redor, por exemplo, a borda da tela. É ouro, a margem. Tudo bem. Nós já aprendemos um monte de coisas no Lexus e vamos estar em exercício que vai fazer você usar tudo isso que nós passamos até agora. Pronto. Vá.
10. Tempo para prática - Fluxo da câmera: É isto. Noites. Hora de trabalhar sozinho. Já passamos por algumas características, como desenhar formas,
colocar textos, colocar textos, importar imagens e inserir elementos nativos Iose. Está na hora de praticar. O ouro é construir as telas dos fluxos da câmera. Mas antes que ele pudesse começar, deixe-me falar com você sobre alguns bons treinos. Primeiro, vamos reorganizar os motores de popa. A navegação principal do nosso aplicativo é baseado em cinco passos, neste caso, um prático que organizar nossas placas e sua tela é muito grande. Cinco rosas, uma por toque, então deixamos a tela inicial aqui e reproduzimos a explosão logo abaixo. Você pode escrever o nome das guias no lado esquerdo para que, se você compartilhar suas outras cinco pessoas para entender como o APP funciona assim que eles abrem o arquivo. Então isso é tipo casa e disse que o tamanho grande o suficiente para que você possa vê-lo quando você realmente ampliou para fora. Copie e cole abaixo e digite explore. Finalmente faça a mesma coisa para a câmera. Lembra-se da história do usuário que definimos para você? Exceção. Bem, vamos usá-los agora para definir o que terá que projetar em cada uma das telas da câmera abrir o instagram i Western Esse garoto que eu quero levar em compartilhar belas fotos foi a história para a câmera toque Kobe e bastado abaixo da câmera nível. Agora vamos ver como podemos conseguir isso através de diferentes etapas. Criar, não embarcar. Pressione uma inserção iPhone seis. O primeiro passo para alcançar seu objetivo será tirar uma foto. Então renomeado são ambos câmera e logo abaixo. Eu posso tirar uma foto como essas telas estão conectadas Juntos, você pode colocar um estreito entre as telas para desenhar clique estreito, inserir uma direção direita seta. Relacionar-se com ele. Eu valorizo datado da foto e clique nas próximas cópias de Border Side. O segundo passo é fazer a foto parecer agradável, então vamos trazer filtros renomeados a bordo. Filtros na tela estavam logo abaixo. Posso deslizar para escolher o filtro. Quando eu clico em um filtro, ele altera a imagem. São ingley frio Agora que a foto parece agradável, vamos dar alguns detalhes em cereja. Com o mundo como a ação é a mesma, você pode ser baseado a primeira seta criar, afirmar fora de borda e renomeá-lo compartilhando e escrever a história abaixo. Posso adicionar uma descrição para fazer minha foto. Posso selecionar as redes em que quero compartilhá-lo agora. Anote o que aconteceu na última ação. Minha imagem é compartilhada no meu feed de seguidores e em redes. Eu selecionei a câmera para fins, e eu estou de volta em meus pés de casa para sua rainha do seu aplicativo. Tente se concentrar em uma ou duas ações para que você use um enterrado. É o último. É isso. Sabe, eu tenho que sentir o vazio. Nossas tábuas. Você não precisa necessariamente replicar o Instagram. Nossa história de usuários pode ter respostas diferentes em termos de você. I Nesta pasta de lições você encontrará todos os elementos que você precisa e o arquivo completo. Tente fazer o seu melhor por conta própria. E se você ficar preso em como fazer algo, como Olhe para o próximo vídeo, vamos mostrar-lhe como completar todo o exercício. Boa sorte
11. Correção de exercícios - Fluxo da câmera: Bem-vinda de volta. Vamos mostrar-lhe como completamos o exercício. Nós não exatamente replicar Instagram, mas apenas deu resposta para a história do usuário abaixo de cada porta
deve. Você poderia, é
claro, criar seu próprio design se você fizer isso foi um pouco acelerado. Então vamos DJ de música cidadã todos os dias eu passo meu tempo esperando perto de encontrar pode entender sim, todos os dias eu passo meu tempo me sentindo como eu tomar Ele pode ir para outra dimensão Mama você tem bebido do jeito que as verdades jogadas neste fluxo Apenas alguns negócios solares indo negócios cidades empréstimo ir para a prisão, ir para a igreja grande. E só Deus pode me julgar. Sim, você sabe, como nenhum olhar feio. Muito bom. Sim, eu sei. Eu imploro o quinto se você precisar de Teoh Motion para me aproximar de algum lugar social mais próximo nunca estava indo. Ele sabe que é esperançoso. Não se opõe ao Justin. Apenas emoções. - Eu quero jogar outro clipe no meio com uma mensagem para os chefes para perder este novo equipamento na cabine de sangue. Mostre-me essa marca aquela boa cabine. Maiores pãezinhos de cópia como legal sobre apenas prestes a obter um pedaço do Eu concordo com apenas bem apenas bebendo minha janela de vinho. Mas eu não gosto de ter tempo desse jeito de galinha. Certo, mesmo não.
12. Pré-visualização no seu dispositivo com Sketch Mirror: Espero que tenha se divertido projetando para câmera flutuante. Agora vamos abrir para arquivo com telas mais antigas já projetadas. Abra o arquivo instagram. Eu sempre corrigiu nesta lição. Pasta dois, mano. Estes arquivos. Vamos usar um dos melhores recursos no esboço. Chama-se Sketch Miro. Na verdade, foi uma das razões que me fez fazer doce de Photoshop para
esboço esboço. O Miro permite visualizar o design em tempo real diretamente no seu dispositivo. Ser capaz de visualizar um design no dispositivo para o qual você está projetando é essencial. É a única maneira de ter certeza de que o que você está fazendo realmente faz sentido, e permite que você detecte fluxos potenciais. Primeiro, você precisa ir para a loja APP no seu iPhone ou eu aposto e olhar para a refeição esboço up. Custará $5 Mas se você não quiser gastar essa quantia de dinheiro, não se preocupe, nós lhe daremos um par de alternativas. Eles são gratuitos, mas um pouco menos práticos porque não construído em esboço. Uma vez que você tem downloads cozinha, você no seu iPhone. Certifique-se de que seu computador e iPhone estão conectados à mesma rede WiFi agora voltar para o seu esboço, Caiu e aberto. Sketch refeição em seu dispositivo. Você deve ver um vermelho que aparece ao lado do ícone do meio. Clique nele e selecione seu dispositivo. Se tudo funcionou bem, você deve ver agora os motores de popa aparecem em seu conselho. Agora você também pode, mano. Você está passando o dedo no seu dispositivo ou selecione o arbol específico que você deseja exibir em seu esboço. Cinco. É a melhor maneira de definir o tamanho dos seus telefones ou ver como a cor realmente se parece
na tela real. Todas as alterações feitas são atualizadas em tempo real. Claro, onde você entra você para usar a refeição de captura. Mas se você não é drayd ou se você não quer gastar US $5 a melhor alternativa para esboçar Mayo é chamado vieira revisão. Você pode baixar gratuitamente no seu Mac diretamente neste link. O android e IOS até o nosso livre também. Não funciona tão bem como me pegar bem porque não mostrará seu design em tempo real. Você tem que exportar PNG arquivado e, em seguida, abri-los em escala A para ser capaz de vê-los em seu telefone. Divirta-se jogando com este aplicativo na próxima lição vai se aproximar para trazer isso para a vida .
13. Exporte pranchetas: nas aulas práticas. Nós projetamos um aplicativo usando um US propôs um limões. Não é perfeito, mas é funcional, e isso é o que mais importa. Na verdade, é mais do que suficiente para começar a codificar. Então vamos tentar para o mundo, começando com um desenvolvedor para desenvolvedores, o cara que vai estar codificando o aplicativo transformando seu design de um protótipo para um aplicativo que as pessoas recebem em Jacquizz ele é seu parceiro em codificação criminal não é algo que cobrimos em este curso . É um conjunto totalmente diferente de habilidades. No entanto, é crucial que você baixa desenvolvedor para entender seu design, e é nisso que trabalhamos nesta lição. Se você é um desenvolvedor, as coisas serão mais fáceis para você se você não for algum conselho sobre como trabalhar eficazmente com o desenvolvedor. O que importa agora é se ele adorou o futuro principal do seu produto? Então, não fique para declarado Se no aplicativo de trabalho e Icahn é um pixel contratado e esperado, estes são detalhes estéticos que podem ser corrigidos mais tarde. Lembre-se também, os desenvolvedores são engenheiros, e eles realmente apreciam precisamente a comunicação nos limites. Se você quer que seu relacionamento seja um casal pacífico deve sempre lembrar que nesta parte do curso. Nós projetamos o aplicativo usando apenas IOS acabou elementos. Todos esses elementos são nativamente. Incluído no código X é um software de desenvolvimento usado para desenvolver o abs de Iowa. Isso significa que você não terá que exportar os diferentes elementos que seu designer fez fora do desenvolvedor. Nós só precisamos ver como você posicionar os elementos para recriar o seu design em X. Bom para mostrar-lhe que estamos Onley nique exporta para diferentes telas. Então vamos ver como exportar motores de popa antes de exportar em nossa placa, você tem que torná-lo exportável. Selecione seu estão entediados clicando em seu nome em sua tela ou diretamente na lista de camadas , em
seguida, clique no canto inferior direito para torná-lo explorável. Uma pré-visualização aparecerá instantaneamente. Você pode escolher o seu antigo entre diferentes arquivos de imagem, porque também optar por multiplicar a resolução de sua tela. Mas falaremos sobre isso. Quando irá exportar elementos configurá-lo para um X e PNG. Agora você pode arrastar e soltar diretamente a visualização em sua área de trabalho para exportá-la. Selecione outros comentários fora de borda, por exemplo, torná-lo exportável e exportá-lo. Coloque a tela mais antiga em uma pasta que nomeará telas de exportação. Agora volte ao esboço e selecione todos os motores de popa, exceto a tela inicial e a
tela comum . Selecione o 1º 1 clicando em seu nome na lista de camadas e, em seguida, clique em. Por que segurando comentário Para adicionar os outros dois seleção, Torná-los Oh, exportável Agora na tela inicial sob tela comum para sua seleção, verifique os dólares cor de fundo e mantenha a cor em branco. Isso incluirá o fundo branco em cada tela para que eles não pareçam transparentes . Agora que todas as nossas placas são exportáveis, você pode decidir exportá-las todas essas. Para fazer isso, clique no ícone de exportação no canto superior direito do seu esboço. Isso mostrará todos os elementos que podem ser exportados em seus arquivos. Selecione os que deseja exportar e clique em Exportar. Selecione as capturas de tela de exportação da pasta que acabamos de criar. Isso atualizará automaticamente as telas em sua versão mais recente. Agora você pode compartilhar esta pasta com um desenvolvedor e começar a codificar enquanto a Europa está sendo desenvolvida. Você tem tempo para criar o ícone, e é isso que vamos fazer na próxima lição.
14. Design de ícones de aplicativos: Ei, vamos Chefe do nosso aplicativo está sendo desenvolvido agora é a oportunidade perfeita para projetar o ícone do No entanto, o ícone representa o seu aplicativo na loja de APP e na tela inicial de seus clientes preenchendo. É importante que seja consistente com a identidade da Europa e o estilo IOS, por isso não parece estranho entre todos os outros ícones. Você quer criar algo que seja simples. Isso foi ser claro para os usuários que irão representar o seu aplicativo e se destacar na
tela inicial . Vamos dar uma olhada no ícone IOS. Eles são bastante simples. ícone do aplicativo Gmail é um envelope. O tocador de música. Um par de notas Encontrar um elemento gráfico que representa o seu aplicativo é uma boa maneira para estes em seu ícone legal e eficaz. Se você quer ser eficiente, a coisa mais fácil a fazer é projetar uma Nikon seguindo o exemplo do Facebook o primeiro mais tarde do nome do seu aplicativo com a frente direita com sua cor principal como o fundo, e é por isso que vamos fazer nesta pasta de lição. Você vai encontrar uma linha fogo até ícone, ganância, modelo. Ele vai nos ajudar a projetar uma Nikon que inchar proporção. Então vamos. A bordo para ícones é um quadrado fora 1000 e 24 pixels por 1000 e 24. Pixel agora desenhar um quadrado para preencher esta placa e matizado no Instagram Louis específico encontrado anteriormente. Se não aparecer em suas amostras, Dakota é 125688 Não se preocupe com os cantos do caldo no momento. Lidaremos com isso mais tarde. Agora que temos, o fundo vai colocar o primeiro mais tarde fora de nós nos telefones certos. Inserir decks, tipo
bloco. O mais tarde eu na capital disse que a cor em branco e o tamanho em 900. Coloque-o no meio fora do seu popa, disse que os ovos em 300 um Y em 40. Isso pode ser suficiente, mas vamos chulo um pouco. Nosso ícone era para seus pontos fortes. Cheetos planos duplicar sua camada de texto foi vir e ver e vir inveja no
tipo de posição branca mais 30. Isso vai em 30 pixel na posição fora da nossa camada de texto, e vamos fazê-lo ir para baixo 30 Pixel disse. A transparência desta camada em 50%. Agora temos ícone extravagante, clique com o botão
direito sobre o outro nome nascido e exportado. Você pode adicionar este ícone ao seu envio de agin. A Apple precisa de uma quantidade incrível de lutas com tamanhos diferentes. Felizmente, as pessoas já criaram arquivo para que possamos gerar tudo de uma vez, e veremos isso mais tarde. Se você quiser, uma versão do seu ícone estava ao virar da esquina é colocá-lo em seu site. Um cartão de visita ou foi suéter ou um suéter que você pode perseguir assim? Volte para o arquivo da gaiola de ícones e copie a pasta oficial da ganância. Nos Legalistas, você verá uma camada chamada ícone Borda selecionada e a colocará logo acima do plano de fundo azul. Selecione a cor do campo com o nosso azul e desmarque a caixa da borda. Esconder feio para botas camadas de fundo e todos os outros homens estão abaixo. Exportar a bordo e aqui está. Você pode encomendar sua primeira cabeça de adesivos. Este é o fim da primeira parte do curso. Passamos pelo básico antigo, e agora estamos prontos para ter um aplicativo na APP Store e começar a ver o que o seu está fazendo com ele. Parabéns na segunda parte vai passar de estudado, projetado para design personalizado e criar um aplicativo que realmente parece bom. Vamos aprofundar os recursos de esboços e transformá-lo em um mestre de esboços. Vamos falar sobre tendências de dois dias e como ficar. Mantenha-se atualizado. Vou ensinar-lhe as melhores práticas para ser eficiente e usar plugins incríveis desenvolvidos pela comunidade de
esboços. Vejo você do outro lado.
15. Parte 2 Projeto: Tudo bem. Parabéns por terminar a segunda parte do curso. Espero que tenha se divertido com aqui e que tenha gostado de aprender a esboçar. Se você tiver, não
hesite em nos informar e nos deixar um comentário. Seu projeto nesta parte da classe é projetar um ícone simples para o seu aplicativo para projetar as telas de seu fluxo de recursos chave usando elementos padrão IOS, tanto quanto possível. A idéia é vir para o primeiro rascunho o mais rápido possível para ver se ele funciona. Então, faça upload de duas ou três telas do seu fluxo de recursos chave no que chamamos de V um. A versão de um de seu aplicativo que eu poderia na terceira e última parte deste curso vai mergulhar mais profundamente em design de funcionalidades avançadas esboço, melhores práticas e muitas outras coisas emocionantes para chegar a um design personalizado para o nosso aplicativo. Então nos vemos na terceira parte
Maxime C, Entrepreneur and Designer
