Transcrições
1. Introdução: Oi, meu nome é Nicole e sou designer de UX. Meu trabalho se concentra principalmente no seu design I X, desde esboçar a esposa com o objetivo de protótipos ideias. E isso é o que eu quero ensinar-lhe Hoje eu uso figo ma no meu processo de design i X porque este é o pacote completo que eu posso fio protótipo de design quadro, colaborar e entregar o meu trabalho tudo na mesma ferramenta nesta classe você vai aprender a use Sigma em seu próprio projeto como construir sistemas de design escaláveis consistentes e o processo de design
completo de por que moldar dedo do pé entregando seu protótipo Este sem classe é direcionado para ambos os iniciantes que querem aprender o processo de design ideal e experientes designers que querem otimizar seu desempenho. Vemo-nos na aula.
2. O processo de design: Parabéns por ter se inscrito neste último. Antes de eu ensinar-lhe como usar Sigma primeiro eu quero compartilhar com você o processo de design ideal que você deve seguir como um você é você X designer? Muita gente me pergunta, como você começa? Qual processo de design você usa? Quantos passos existem? Algumas pessoas pensam que começamos apenas abrindo um arquivo de design e imediatamente começamos a projetar. Isto não é ideia. Grandes designers têm um conjunto de etapas que eles passam para ser capaz de fazer o que eles fazem. Há três grandes etapas para cada projeto UX,
projeto , entender plano e design. Fazemos essa abordagem onde entendemos e planejamos antes de projetar porque economiza muito tempo. Ele deve usar esta comunicação de ida e volta, mal-entendidos e problemas que você pode encontrar no projeto. A primeira etapa entender é sobre a compreensão do negócio por trás da idéia. Trata-se de extrair as informações necessárias do cliente, como identificar problemas. Encontre a solução, definindo seus objetivos de usuário e definindo personas. O segundo plano de estágio é sobre criar a jornada do usuário fora do seu depois é sobre esboçá-lo no papel e compartilhá-lo com seus clientes. Então, depois de voar para cima e confirmar os quadros esposa papel, o terceiro estágio é sobre esposa apontar, projetar e prototipar o seu e este é o estágio que vamos cobrir neste curso. Vou mostrar-lhe passo a passo,
como você pode criar armações interativas, sistemas de design de
sino, negociar protótipos e colaborar com sua equipe. No próximo vídeo, vou falar sobre por que você deve escolher Sigma como sua ferramenta de design.
3. Por que de figma: Então, por que você deve usar Sigma que você provavelmente ouviu falar para um ilustrador de loja ou em design? Estas três ferramentas não são feitas para o seu design I X, e eu não recomendo usar nenhum deles. Photo Shop é feito para edição de fotos. Illustrator é feito para desenhar ilustrações, e a linha indie é feita para design de revistas. A única razão pela qual usávamos há anos era porque estas eram as únicas opções que tínhamos. Mas agora temos muitas ferramentas que são feitas especificamente para o seu design I X. Em 2018, as melhores ferramentas de design seriam a Fig., esboço de
MMA, Adobe X'd e algumas outras. Acho que o estigma é a melhor dessas opções. Por quê? Aqui estão algumas das principais razões First Sigma é livre para indivíduos, ao contrário de Sketch, que é US $99 para Adobe X'd, que é ficar tudo isso por um mês. Ele tem assinaturas pagas para equipes maiores, mas é gratuito se você for um indivíduo. Além disso, Sigma é baseado na Web. Funciona no navegador. Isso significa que ele funciona em qualquer plataforma. Você pensaria que, já que é baseado na Web, teria muitos bugs. Mas surpreendentemente, eu tenho usado isso para o último ano e mal encontrei quaisquer problemas de natureza em termos fora do seu design I. É muito intuitivo de usar. Por exemplo, as restrições permitem que você adapte designs quando o tamanho da tela muda e os componentes permitem que você reutilize elementos em seus designs. Vamos ver mais disso mais tarde. Vignal também tem recursos de prototipagem e colaboração criados, e você não precisa de ferramentas de prototipagem separadas, como mármore ou visão. Sigma também tem colaboração em tempo real com designers. Você e outros designers da sua equipe podem trabalhar no mesmo arquivo ao mesmo tempo. Você também pode criar sistemas de design com vinculado. Vocês são componentes que toda a equipe pode usar. E, finalmente, você pode entregar aos desenvolvedores facilmente, que terão acesso a estilos de revestimento e recursos de exportação. As únicas desvantagens do estigma é que ele ainda não funciona offline, mas você pode contorná-lo abrindo o arquivo antes de sair da linha. Então, como você pode ver figura é o pacote completo que permite que você trabalhe no
processo de design completo . Na próxima série de lições, vou começar com uma introdução ao Fig Mama, e então vamos mostrar-lhe o passo a passo processo de design Euronext usando sinal
4. Introdução à fema: Neste vídeo, eu vou lhe dar uma introdução amigável para iniciantes para MMA Fig Para começar a usar a invenção em seu dispositivo. Tudo o que você precisa fazer é simplesmente se inscrever usando seu e-mail e senha e você está pronto para começar. Você pode abrir a Fig Ma eo navegador como um er l normal ou até mesmo usar a área de trabalho para cima. Temos o último botão aqui para criar uma nova falta eo botão de importação quando você deseja importar outros arquivos como arquivos de esboço ou que arquivos de figo. Agora estou na água de correntes de ar. É aqui que os arquivos criados são armazenados por padrão, mas você também pode ter equipes e convidar pessoas para ele. Vamos criar uma nova fazenda. Esta é a barra de ferramentas aqui onde você encontrará as ferramentas necessárias para criar objetos no
lado esquerdo . Há o painel de camadas em toda a direita. Temos o painel de propriedades. Vamos começar criando um quadro, que é a tela que vamos projetar. Quando eu clicar na ferramenta de quadro, eu posso escolher um dos sugerir que presets aqui à direita. Vamos escolher o iPhone oito e vamos renomear o quadro do dedo para casa, pois esta será a tela inicial do meu braço. Agora vamos criar o Natwar. Vou escolher a ferramenta de retângulo enquanto estou desenhando a Fig. Minha ajuda me partindo meu objeto para as bordas do quadro. Vou torná-lo branco e adicionar uma sombra sutil a ele. Em seguida, vou adicionar o título da tela. Esta é a cadela da casa. Eu só vou adicionar texto e chamá-lo de casa. Vamos fazer o tamanho da fonte 16 pixels. Centralize o texto, alinhe os livros didáticos no centro do quadro e centralize verticalmente usando as
guias inteligentes . Vamos organizar as coisas. Estes para ir bem juntos em um grupo. Então vamos selecionar Um e agrupar a seleção e renomeá-los para barra naff. Agora vamos criar um retângulo aqui. Quando eu segurar e passar o mouse sobre o quadro, eu posso ver o espaço entre o retângulo e o quadro. Parece que não está centrado, então vamos escolher um centro de linha aqui. Este será um design de carro, então eu vou torná-lo branco na sombra dele, um cartão geralmente tem um raio de fronteira, então vamos ter isso daqui. Quatro pixels agora eu quero adicionar uma imagem ao retângulo. A melhor maneira de fazer isso é mudar sua vontade para imagem e escolher a imagem do localizador . Agora eu vou adicionar o título do cartão aqui embaixo. Agora vamos duplicá-lo e adicionar outro subtítulo
menor sob ele. Eu, como este, tenho um tamanho menor e também um cinza mais leve. Esse é o nome do seu subtítulo fora do cartão. Agora esses objetos aqui vão bem juntos, então eu vou apenas selecioná-los e apertar o comando Ito. Agrupá-los agora dizer, Eu quero criar outra tela e vamos dizer que eu decidir que eu quero mudar a
cor de fundo do NAB Nosso Eu precisaria mudar a cor em cada tela e imaginar que você tem 50 ou 100 telas. Você gastaria horas trabalhando em uma alteração boba,
então, para evitar esses tempos desperdiçados, usamos componentes. É aqui que fica muito interessante. Um componente é um objeto que pode ser reutilizado várias vezes. Este número vai ser o usado várias vezes no meu up, então eu vou selecioná-lo e clicar no componente que eu posso no topo. Isso o converteu em um componente. Tem este bom que eu posso no painel de camadas. Vamos fazer o mesmo para o cartão, uma vez que ele também vai ser usado como ele é, Eu estou indo para Dublin, Kate o quadro novamente Agora que eu usei componentes. Agora esta barra de naff é uma instância deste adversário da rede. O primeiro 1 que criamos é o original, enquanto este é o complicado, que é uma instância fora dele. Agora. Qualquer alteração que acontece no original é atualizada em sua instância. No entanto, tudo o que acontece com a instância não é atualizado no original, pois é apenas uma instância dele. Agora é aqui que fica ainda mais interessante. Podemos fazer componentes aninhados. Por exemplo. Eu quero fazer uma barra agora que tem um botão de voltar. Vou criar um saco, mas aqui e, em seguida, selecionar a instância eo botão Voltar e criar outro componente a partir dele. Desta vez eu vou chamá-lo agora muito slash. Naquela época, chamarei o original de normal. Vamos Tópico oito este quadro novamente para ter outra tela de detalhes agora por causa de adicionado esta barra eu posso selecionar qual tipo de naff barrando-o do menu componente. Aqui. Vamos falar de constrangimentos. Restrições é uma maneira de fazer seus projetos se adaptarem ao tamanho do quadro agora, se eu fizer esse quadro maior em que ele se comporta como esperamos, ele não se adapta ao tamanho do quadro. Mas podemos corrigir isso e torná-lo meio que responsivo ao tamanho da tela. Então vamos fazer este nah barras comportamento horizontal esquerda e direita em vez de esquerda e fazer o mesmo para o cartão. O fluxo agora é responsivo com o tamanho do quadro. Vamos fazer com que os outros respondam a nós também podemos definir preocupações verticalmente. Digamos que eu queira fazer esse cartão maior para a rua de detalhes agora. Parece assim, mas eu quero que o título e o dedo do subtítulo sempre fiquem no fundo quando eu torná-lo maior. Como os títulos estão dentro do componente, vou para o componente original e mudar seu comportamento a partir daí. Então eu vou dizer sobre este título. Faça o comportamento vertical inferior em Lee e mesmo para o subtítulo. Agora, quando eu faço o cartão mais longo, ele age como eu quero. E, claro, isso se aplica para a outra instância do componente sem ter que refazê-lo. É muito importante notar que o projeto de fio você deve visualizar seu design em 100% poucos vez em quando basta pressionar o comando zero, e amplia para 100%. Isto é para ver os tamanhos de fonte em tamanho real antes de eu mostrar como fazer essas telas interativas. No caso de você precisar exportar para uma imagem, basta selecionar o amigo que você deseja exportar e ir para exportar no canto inferior direito, E aqui ele pode escolher vários tamanhos e vários formatos ao mesmo tempo. Tenha em mente que você não precisa salvar nada no FEMA porque ele também economiza seu trabalho o tempo
todo. Agora vamos falar sobre prototipagem. Até agora, estivemos no mundo do design. Agora vamos apenas o modo protótipo. Quando você passa o mouse sobre camadas, essas cabines circulam para criar um link entre telas. Nós apenas direcionar o círculo para onde você deseja vinculá-lo, e como este é o componente original, ele aplica o dedo único todas as suas instâncias. Então eu preciso mudar isso para o segundo guarda. Em vez disso, quando eu clico fora das telas, eu posso ver todos os links criados. Vamos nos livrar dos criados por padrão a partir do compartimento original. Eu simplesmente arrasto e solto para remover o link. Também quero que este botão volte para a página inicial. Eu posso fazer isso uma vez, e ele é instantaneamente aplicado a outras instâncias. Esta seta azul significa que esta é a primeira tela fora do protótipo. Você congira isso simplesmente arrastando-o e colocando-o na tela desejada. Vamos jogar nosso protótipo dando em cima desta peça, Aiken. Agora estamos vendo o protótipo interativo. Agora todos os links que criamos estão funcionando da maneira que queremos. Observe que sempre que eu clico em algum lugar que não é um link. Ele vai dar o flash azul para me dizer onde estão os objetos de comprimento. Você e os espectadores podem comentar usando o Bubel Aiken e comandar diretamente no protótipo . Agora, quando você quiser compartilhar seu protótipo com seus clientes ou colaboradores, basta clicar no protótipo de compartilhamento e copiar o link. Quando você volta à falta, você também pode ver o nível comum na luta em si, o que é muito conveniente. Quando você compartilha seus arquivos com desenvolvedores, eles podem ver o código por trás de seus designs. Quando você escolhe o modo de código aqui, você pode escolher os idiomas CSS que eu peço ou android. Então, selecione consistentemente um objeto e veja algumas propriedades de design aqui. Você também pode alterar o formato do revestimento. Agora este recurso tribunal não é usado apenas para copiar colar todo o código do seu design. Faz mais sentido para detalhes avançados de design, como sombras ou brilho. Os desenvolvedores também podem exportar camadas, objetos ou quadros da mesma maneira que fizemos. Então esta foi uma visão geral sobre os futuros de Sigma. Eu recomendo começar a brincar e se acostumar a usá-lo antes de começar a criar o seu próprio up. Na próxima lição, vamos começar a trabalhar em um projeto da vida real. O primeiro passo será por que o enquadramento
5. Passo 1: Como criar seus waris: neste vídeo, eu vou começar construindo as armações de arame. Os arames são o esqueleto da Europa. Ele deve incluir a funcionalidade de layout e seu ex, mas não deve mostrar o design ou as cores fora de toda a classe. Vou construir a jornada principal do usuário fora do Airbnb. Eu gosto de usar Airbnb como um exemplo porque o design é bem pensado e tem um sistema de design
simples e consistente. Y amigo deve ser sempre grande escala, sem cores ou desenhos. Pare de ser capaz de se concentrar no que importa. Acompanhe comigo e construa seu próprio site. Se você não tiver uma ideia de site, você pode criar Airbnb, Twitter ou qualquer outra operação que você use antes de mudar para quadros de esposa digital. Você deve primeiro esboçar as molduras de sua esposa no papel. Então eu desenhei anteriormente os quadros da esposa no papel, e é assim que eles se parecem com a página inicial. Resultados da pesquisa listando detalhes, resumo e pagamento. Agora, em figo MMA, vamos construir quase todos os quadros, usando componentes. Você pode achar que vai levar algum tempo extra no começo, mas vai te poupar horas depois . A primeira coisa que vamos fazer é criar uma biblioteca de olhos aqui. Eu vou começar com o componente de texto, então eu vou apenas criar uma camada de texto e convertido em um componente. Este será o tamanho normal agora. Não nos importamos com as estrelas de design e fundos. Vou mantê-lo assim. Vamos fazer os outros têxteis também. Certifique-se de que o nome fora da camada permanece o mesmo texto e o nome do componente deve sempre ser barra de texto e o tipo de estrela H um seria 36 pixels. H dois será 28º e cada três será 20 e o pequeno texto será 14. Este espaço será para outros componentes que criamos em toda a esposa qualquer coisa. Então vamos criar a frente de casa. Antes de começar a criar objetos, vou criar a grade que vou construir. Digamos que eu quero que o meu conteúdo vá dentro de um 900 pixels apertado. A maneira mais fácil é apenas criar e 900 pixels retângulo. Então precisamos mostrar aos governantes apertando Shift. Nossa, em seguida, arrasta em guardas da régua e quebrou os guardas no retângulo. Vou apagar o ângulo estrito. Agora vamos fazer o bar da NASA. Agora vamos usar o texto que criamos lá e copiá-lo e colá-lo aqui. Para criar o menu, Lings se tornar um anfitrião viagens, mensagens e um perfil. O Aiken. Vou agrupar estes manuais só para manter as coisas organizadas. Eu também preciso do local aqui, então esta barra agora definitivamente será usada em todas as telas, então eu vou convertê-lo em um componente de aspirina. Vamos nos mover um pouco mais rápido. Teremos um título H1 aqui. Eu preciso do tamanho do dedo do pé do texto com o conteúdo dentro. Vamos fazer uma grande barra de busca aqui. Um espaço reservado. Tente Los Angeles. Então eu vou criar um botão aqui. Vamos fazer um mais escuro e convertido em um componente. Agora que eu tenho a aparência geral, eu vou movê-lo para o guia estrela, em
seguida, copiar uma instância dela, em
seguida, editar o texto para pesquisar o que vem a seguir. Vamos adicionar uma seção intitulada aqui e, em seguida, este título provavelmente estará em H dois. Vamos fazer o cartão de listagem. Esta será a imagem, e aqui temos o tipo off listando todo o apartamento. Este será um pequeno texto. Teremos o título de listagem aqui, e eu vou torná-lo a Rua da Natureza. Notei que quero que todos os meus títulos sejam ousados. Então vamos editar a biblioteca. Agora vou fazer outro pequeno texto para digitar o preço nele. Essa é a lista. Agora eu vou torná-lo um componente e simplesmente duplicado para criar mais dois ao lado dele. Vamos preencher os outros dois para torná-lo o mais real possível. Tudo bem, a próxima seção será experiências. É muito parecido com as casas. Então eu vou apenas replicar toda essa seção e simplesmente preencher com um novo conteúdo. Estamos quase terminando a partir desta tela. Ainda temos o rodapé, então vamos criar um retângulo grande e adicionar alguns links nele. A seção cada e e terá sobre imprensa e ajuda e este é o título, então vamos torná-lo cofre. Eu vou fazer isso como um grupo e chamá-lo de seção de rodapé. Agora vamos duplicar isso para ter o mesmo texto, mas diferente. Então vamos fazer este rodapé como um componente. Então, só a esposa emoldurou a página inicial. Vamos fazer mais um riacho. Eu vou duplicar a tela como nós vamos usar muitos componentes semelhantes a partir dele. Certo, vamos nos livrar de tudo, exceto os anúncios e esta página. Vamos colocar o conteúdo cheio em vez de dentro da grade. Vou fazer as listagens um pouco menores para o mapa. Eu só vou criar um grande retângulo nesta tela, o mapa descobrindo a altura do riacho e não há rodapé. Então a altura da minha tela é de 900 pixels, e o romance é de 60 pixels. Eu posso apenas digitar 900 menos 17 e ele irá calcular o tamanho para mim. Vamos duplicar essas ofertas gratuitas para preencher este lugar. Ainda temos aqui os filtros de busca para poupar tempo. Vamos duplicar o botão aqui, pois ele vai parecer um pouco semelhante. Vou fazer tudo mais pequeno do que separá-lo do seu componente. Vamos fazer disso o filtro de data. E quando eu terminar, eu posso torná-lo componente e chamá-lo de uma linha pequena. Vamos adicionar mais dois filtros, convidados e segurar tanque. A última coisa que vou fazer é na barra de pesquisa. Primeiro, vou fazer o componente da barra de pesquisa. Então eu vou duplicar a grande busca por detecção e estilo que ele precisa ser menor e ter uma borda com um texto menor. Agora vamos fazer este outro componente, e vamos chamá-lo de barra de pesquisa Pequeno. Vamos fazer a altura do quadro a mesma altura fora da minha tela, que é 900 correções e pronto. Vamos parar aqui. Eu vou continuar. Por que enquadrar as outras telas e a próxima lição vamos torná-las interativas.
6. Passo 2: como fazer sua interativa: Eu já usei amigo. As outras telas de seus detalhes de lista de bebês, o resumo e as ruas de pagamento. Agora vamos fazer esses coreanos interativos. Primeiro, queremos que o botão de pesquisa nos leve aos resultados da pesquisa. Então queremos o dedo do pé da lista. Sempre nos leve para os detalhes da listagem. Podemos fazê-lo a partir do componente original, e ele se aplica em todas as suas instâncias. Em seguida, o botão do livro nos leva para os detalhes da oferta. O botão Continuar leva-nos a confirmar, e eles e o dia de confirmação levam-nos de volta a toda a praia. E finalmente, queremos o dedo local. Sempre nos leve para a página inicial. Vamos tocar o protótipo. Certifique-se sempre de que este dia de protótipo é 100% para ver os tamanhos reais. Agora, depois que você terminar com os quadros esposa interativos, você pode compartilhar o protótipo com sua equipe ou cliente e obter feedback sobre a
interação layout e geral, você X. Como você pode ver, esta etapa não incluiu design. Na próxima lição, vamos projetar os componentes para converter esses quadros esposa em um protótipo de design
7. Passo 3: como Estilo do sistema de design: Até agora, nós namoramos as telas e as tornamos interativas. E enquanto fazemos isso, construímos uma biblioteca de componentes do ano I. Agora estamos prontos para começar a pensar em design. Agora podemos começar com esses componentes que criamos. Coloquei todos os componentes originais na biblioteca U I para que seja mais fácil de projetar. Vamos começar com a cor. Vou começar com a cor principal da marca aqui. Já copiei as cores urbanas mais profundas, então vou rebocá-la. Então eu vou duplicar esta cor para criar a cor do sotaque. Em seguida, eu vou escolher a graça diferente que eu vou usar para o design da interface. Vamos começar com a mais escura. Vou começar com a predefinição Cinza Escuro. Então eu vou brincar com ele para ficar um pouco azul. Agora que eu tenho a minha cor mais escura base, eu posso escolher outros tons fora este grande facilmente tomar a mesma cor usando a controvérsia
seletor de cores . E agora podemos escolher uma sombra deste grande lutando com o formato H S B e tornando o V , que é o brilho mais leve quando você vê que esta graça acabando por ser dois azul Basta fazer a saturação. Apenas é um pouco menos Tente fazer cerca de cinco cinzentos diferentes com cerca de 20% de diferença no brilho. Estes são os diferentes tons serão usados no design. Muito bem, esta é a minha paleta de cores. Agora, vamos fazer as frentes porque criamos têxteis como proponentes. Agora podemos alterá-los a partir da biblioteca e ele será aplicado em todas as telas. Eu quero mudar este dedo do telefone pagar muito semelhante a uma área e ser usos. Escolha Avenir. Vou fazer todas as rubricas pesadas e o resto romano. Agora todo o nosso texto aplicou o mesmo material frontal. Para poder usar essas cores rapidamente, podemos adicioná-las às nossas predefinições de cores. Aqui, você pode criar uma nova cor aqui ou não podemos substituir as cores existentes. Agora ele pode selecionar todo o texto e torná-lo o gravador escuro padrão. Também quero que as cores primárias e de acento estejam nas minhas predefinições. Então vou apagar as cores antigas aqui. Rapidamente, então, são as duas novas cores. Agora vamos fazer as garrafas. Quero os meus botões sempre ocupados. Ambos os botões devem sempre ter um raio de borda e o latim normal deve ter a cor
primária. O contorno. Milton deve ter uma borda e uma cor de acento. A entrada terá um pequeno raio de fronteira e um contorno cinzento. O design das etiquetas terá um contorno cinzento claro, bem como na fronteira Raiva. Vamos fazer o agora para a rede tem uma esposa pela cor errada e uma grande fronteira, mas apenas na parte inferior. Podemos fazer isso adicionando uma sombra com mais nobres e um pixel no Por que desta forma, ele se aplica apenas na parte inferior. E eu preciso colocar o Airbnb que eu puder. Então vou mudar a sensação do diretor. Vá para a imagem. Quero que a foto do meu perfil preencha o ângulo estrito. Então vamos fazer isso também. Então esse é o número de design para o cartão de listagem. Precisamos primeiro fazer com que o raio da borda permaneça pixels. Então eu vou fazer o tipo de listagem maiúscula, ter um pouco mais de espaçamento entre letras e torná-lo ainda menor. O preço. Vou torná-lo de cor cinza mais clara. E agora vamos fazer as barras de busca. O grande tem uma cor de fundo branco e uma borda cinza claro, um raio de borda e uma sombra. Vou colocar o microfone aqui. Há muitas maneiras de adicionar itens em seu design. Você pode usar telefones Aiken como frente também ou você pode simplesmente agarrar em. SVG Aiken. Vou subir isto. Eu poderia que eu baixá-lo anteriormente, torná-lo menor colocado dentro do componente de pesquisa e torná-lo grande. A barra de pesquisa menor tem o mesmo design, apenas menor. Eu posso simplesmente clicar com o botão direito do mouse no estilo de cópia da barra de pesquisa grande e baseá-lo na
barra de pesquisa pequena . Então eu vou fazer a sombra um pouco mais sutil. Em seguida, copie a busca que eu puder e torná-la menor para o rodapé. Eu só vou mudar o campo para branco e, em seguida, no quarto superior e, em seguida, perdê-los com. Então é isso. Estamos fartos de projetar, argumentamos que eu biblioteca. Agora temos um sistema de design que podemos usar em todo o nosso produto. Vamos ver como nossas telas se parecem agora, apenas projetando os componentes na biblioteca U I com telas estão quase concluídas. Que incrível é que há apenas algumas pequenas alterações a serem feitas. Eu vou fazer isso. Então, na próxima lição, vamos finalizar o protótipo e tornar as telas responsivas.
8. Passo 4: como finalizar seu protótipo: Então eu fiz as últimas situações nos fluxos que projetamos. Eu adicionei as imagens, os Aikens, e comecei todas as telas. Vamos ver o nosso design ao vivo no protótipo. Isso se parece mais com Airbnb do que D urbano parece com todos de fato. A última coisa que precisamos fazer é tornar nosso design um pouco mais responsivo antes de terminarmos o projeto. Isso ajudará os desenvolvedores a implementar nossos projetos com capacidade de resposta em mente. Permite traduzir nossas ideias e mostrar-lhes o que acontece quando a tela fica maior . Neste momento, o nosso design não é responsivo. Então vamos pensar sobre como queríamos parecer. Então, queremos que os componentes que têm cheio com o dedo do pé têm restrições à esquerda e secas e as outras coisas para ficar no centro com o menor. Então vamos fazer isso. Então a restrição de nunca e flutuador seria esquerda e direita. E vamos fazer isso para todos os seus componentes completos, então a maneira mais fácil de fazer todo o conteúdo ficar no centro é simplesmente agrupá-los todos com Comanche. E vamos fazer isso para todo o centro confiante, e eu vou dar a todos eles um centro de restrições para esta tela,
no entanto, no entanto, eu quero que a empresa para dimensionar com o tamanho da tela. Então vamos ver como tudo acabou nesta tela. O completo com Natwar em Rodapé, ficar à esquerda e à direita, enquanto o Continente permanece no centro. Nesta tela, tudo escala quando eu diminuir e aumentar a tela com, e esta tela é semelhante à home page, então minha empresa ainda está no centro. Ok, isso é para a responsividade da luz entre os pontos de ruptura. Agora, quando há mais diferenças de layout entre os tamanhos de tela, é quando você precisa criar vários tamanhos. Por exemplo, na página inicial, eu definitivamente não quero manter uma grade de três colunas em tablets, tamanhos e tamanhos móveis. Então vamos fazer uma versão móvel com toda a cadela. Vou começar duplicando o quadro da página inicial, e vou esfomear este conteúdo ao bater na nave de comando G e movê-lo um pouco para a esquerda. E agora aqui vou colocar as cartas um sob o outro. Podemos usar os mesmos componentes que criamos e ocultar algumas camadas no celular, por exemplo, aqui na rede, eu quero mostrar o número, mas eu não quero que os links do menu dentro dele para que eu pudesse simplesmente escondê-los. Agora que eu fiz a maior parte do meu conteúdo. Se ele na visão móvel, eu posso alterar o tamanho do quadro. Antes que eu faça isso. Preciso alterar o comportamento de restrição de todo o meu conteúdo para a esquerda para que eles fiquem à esquerda quando eu mudei o tamanho do quadro. Agora posso mudá-lo do iPhone. Então eu vou fazer o quadro dizer-lhe para o rodapé. O design vai mudar muito, então eu vou ter que separá-lo de sua instância para mudar sua posição. Em seguida, eu vou apenas mover estes para baixo um do outro. Cada título aqui deve definitivamente ser menor no Mobile. Não quero que o botão de pesquisa apareça mais tempo para que eu possa ocultá-lo do painel de
camadas. Então é isso. Vamos ver como acabou. Como você pode ver, nós projetamos este site com 99% de componentes. Esta é a chave para se tornar um grande e eficiente designer. Lembre-se, antes de finalizar seu projeto e manipular para desenvolvedores, certifique-se de que suas camadas e componentes são bem nome. Tente nomear todas as camadas para garantir que sua colaboração funcione perfeitamente com seus colegas. Depois de feito simplesmente compartilhar o protótipo com os desenvolvedores para que eles possam começar a inspecionar o design e exportar imagens. Eu adicionei este arquivo de figura para a descrição fora da classe aqui, Frito duplicado e reutilizá-lo de qualquer maneira que você gosta. Se você quiser desafiar a si mesmo, você pode adicionar mais componentes à biblioteca de olhos e continuar projetando as outras peles seu bebê.
9. Considerações finais: Espero que goste deste último. Agora você sabe como projetar com o processo de design ideal. Usando recursos poderosos de figments, você aprendeu a construir armações interativas, construir sistemas de design, colaborar com a equipe e entregar aos desenvolvedores. Agora você pode usar esse processo em seu trabalho diário, quer esteja sentindo, respondendo ou trabalhando dentro dele antes de partir. Não se esqueça de deixar um comentário e compartilhar este curso com sua rede para que as pessoas possam saber sobre ele. By the way, eu tenho um curso completo que ensina iniciantes absolutos como se tornar seus designers I X. Confira o link na descrição. Certifique-se de me seguir no Twitter e no meu bloco médio onde eu bloqueio sobre design. Desejo-lhe boa sorte na sua carreira de design. Se você tiver mais alguma preocupação, sinta-se à vontade para postar suas perguntas
Nicole Saidy, Designer, Coach, Speaker
