Desenho visual para designers e desenvolvedores em interface de usuário na web → como aprimorar seu design | Muhammad Ahsan Pervaiz | Skillshare
Menu
Pesquisar

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Desenho visual para designers e desenvolvedores em interface de usuário na web → como aprimorar seu design

teacher avatar Muhammad Ahsan Pervaiz, UI UX Visual Designer 15+ Years

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

    • 1.

      Qual este curso vai cobrir?

      1:27

    • 2.

      Ponto focal de cada design

      10:05

    • 3.

      Usando linha, curvas e formas no design

      9:47

    • 4.

      Cores e tema do design

      5:34

    • 5.

      Exemplos de cores e temas

      8:46

    • 6.

      Usando dicas e truques

      7:06

    • 7.

      Exemplos de como usar tipos no design de web de interface

      4:06

    • 8.

      Como usar o espaço branco no design de UI

      11:08

    • 9.

      Técnica de design em nível de bloco

      5:36

    • 10.

      Métodos de geração de ideias de design

      7:06

    • 11.

      Exemplos de ideias

      6:14

    • 12.

      Tons do seu design

      7:13

    • 13.

      Escala de importância em seu design

      11:01

    • 14.

      Proximidade no design

      4:39

    • 15.

      Exemplos de proximidade

      5:34

    • 16.

      Alinhamento no design

      4:24

    • 17.

      Exemplos de alinhamento em design

      6:18

    • 18.

      Contraste no design visual

      3:32

    • 19.

      Usando de contrastes propriamente

      12:44

    • 20.

      Usando o repetição no design

      6:04

    • 21.

      Exemplos de reprodução

      9:51

    • 22.

      Exemplos de reprodução

      9:51

    • 23.

      ESTUDO de estudo - - de de escala de de cinza

      12:36

    • 24.

      ESTUDO de casos - finalização de cartões

      14:55

    • 25.

      Design de cartão para visita

      1:36

    • 26.

      Qual é o próximo?

      0:37

    • 27.

      O efeito de moldura → tópico avançado

      10:37

  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

1.874

Estudantes

4

Projetos

Sobre este curso

Eu ensino de interface dos passados

Entender básico de todos o elemento que você pode usar em seu design é necessário para se tornar um ótimo designer de visual. Também a maioria designer não conhece os princípios básicos do design e como eles se aplicam no mais novo Design e web Design design

As coisas que você vai aprender com exemplos neste curso

  • Ponto focal
  • Usando linhas, formas e curvas
  • Cor e tema do design
  • Como usar tipos
  • Usando o espaço branco
  • Técnica de design em nível de bloco
  • Gerando ideias
  • Obtendo o tom do seu design
  • Escala de importância em seu design

Princípios do design com toneladas de exemplos

  1. Proximidade em interface e design web
  2. Alinhamento no design de interface de interface
  3. Dominando o contrastes no design
  4. Como usar a repetição em seus designs

No final, me verão projetando um cartão do início ao final ao fim, meu processo completo com minha decisão de design que eu fiz durante este exercício de exercício de design

  • Estudo de caso de design

Espero que este curso vai ajudar a elevar suas habilidades de design e criar você um designer melhor

Não se esqueça de compartilhar seus projetos neste curso

Conheça seu professor

Teacher Profile Image

Muhammad Ahsan Pervaiz

UI UX Visual Designer 15+ Years

Professor

I started my Freelancing Career 10+ years ago and learned everything the hard way myself. I went from scratch to end up working for FORTUNE 500 companies like INTEL, PANASONIC and Coca-Cola.

In just 2 years of Serious UI Designing, I made my place on DRIBBBLE
Working with Art Directors from Coca-Cola and Project Managers from the UK, I learned a lot in short period of time.

Worked from App Icon Design to App UI Design, from wireframes, prototypes and Mockups Design. I have a hunger of perfecting User Interface from all aspects

What my students are saying about my Classes?

 

AWARDS & WINS

I am a multi-talented person who has won One Gold Medal, won a nationwide Poster Design competition from PANASONIC and won many Landing ... Visualizar o perfil completo

Habilidades relacionadas

Design Design de UI/UX Web design
Level: Beginner

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui aulas curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Qual este curso vai cobrir?: Olá, todo mundo. Este é um curso de design visual para você. Por que designers, Web designers, desenvolvedores ou todos os mendigos que acabaram de começar seu design Agora por que eu criei este curso. Já vi muita coisa dos meus alunos ou não, Miss. Designers são designers maiores que cometem os mesmos erros de design uma e outra vez, e a sensação de que algo está faltando em seu design ou seus projetos parecem muito feitos. Portanto, esse é o grande problema, que me concentrei em eliminar nas escolas. Então, dentro das escolas, vou mostrar-lhe muito do meu processo. Minhas técnicas, minhas decisões de design, por que e como eu crio e formulo são projetadas a partir de um modelo de design em escala de cinza de nível de bloco para nossa cor ou design final. E no final, como eu apresento este design usando mais copos para que você aprenda um monte de técnicas básicas de design visual . Você pode aplicar em seu design em seus projetos da Web, em seu aplicativo móvel, designs ou até mesmo em branding. Então, se você é um maior, você é um desenvolvedor ou você está apenas interessado em melhorar suas habilidades de design. Você pode fazer esta aula e eu espero vê-lo em breve e amo ver seu projeto. Há um projeto dentro deste vidro que você vai enviar, então vamos começar e projetar algo incrível. 2. Ponto focal de cada design: todos os projetos do mundo. Tem algum ponto focal agora. O que o ponto focal significa é que sempre que você olha para qualquer design, seja marca, design, ah, ah, design de logotipo são um guarda de visita ou uma revista em cada página em cada seção, em cada um peça fora do projeto, você vai encontrar um pontos focais. Então, sempre que você vê pela primeira vez qualquer projeto na primeira vez que seus olhos estão indo para atingir alguma área ou você vai atrair, nós olhamos para essa área que é o ponto focal desse projeto. Então, sempre que você está projetando de ah de cabeça, por milho ou algum anúncio de revista, você precisa ter isso em mente que onde você quer que seus usuários olhem primeiro. Então esse item vai ser o ponto focal do seu projeto. Agora, uma vez que você tenha calculado que este vai ser um ponto focal, todo o resto estará apoiando esse ponto focal. Então você vai projetar tudo em torno desse ponto focal. Então o ponto focal, ou a média que você pode dizer que a área principal fora do seu design vai chamar a atenção do usuário, então seu principal objetivo é pegar a atenção fora do usuário e, em seguida, apoiar seu fluxo. Então, uma vez que você olha para uma coisa que seus olhos vão fluir para a próxima coisa e a próxima coisa então é assim que você controla a gripe fora dos olhos de seu usuário. Portanto, esta é uma dica muito importante em design. Agora você é o designer e você precisa guiar seus olhos de usuários para o ponto focal e, em seguida, para o próximo ponto. Então ponto focal, em seguida, para o próximo ponto focal e para o terceiro ponto focal, e assim por diante e assim por diante. Então, na verdade, o que você está tentando fazer é que você quer seu dedo do pé, ler nosso ato de uma maneira específica. Você deseja que o usuário execute essas etapas 123 e você precisa definir essas em seu design. Você vai usar cores. Você ia usar o espaço em branco ou o espaço negativo para guiar os olhos dos usuários do ponto focal, e depois para o próximo ponto focal, e depois para o próximo livro, ponto focal. Portanto, haverá diferenças no ponto focal. Haverá sempre apenas um ponto focal principal, então o próximo é um pouco que você pode dizer não tão importante como o 1º 1 e, em seguida, o 3º 1 também vai ser não tão importante. Então, o ponto mais importante é apenas um ponto focal. Então agora vou mostrar alguns exemplos para ilustrar nosso conceito. Eso Vamos ver alguns exemplos. Agora você pode ver que este é um site e eu encontrei-o em um bar. Starcom Liberal tonificado ou calmo Reino Unido E é sobre a violência, fones de ouvido e produtos violistas. E você pode ver que seu foco é mais na imagem à direita onde o assunto está segurando neste dispositivo ah ou variando este dispositivo para que você possa ver todas as cores estão em pedra laranja e só você pode ver que o preto é os fones de ouvido estão em preto. Então é assim que eles estão indo lá, mostrando a importância do lado esquerdo. Você pode ver que o título está à esquerda. A confiança para se destacar música portátil. Então, sempre que olho pela primeira vez para esta página, a primeira coisa que vejo é esta imagem. Então eu vejo este título. E então eu vejo essa música portátil. Então, todos esses produtos estão no lado esquerdo e direito. E estes são elementos de apoio. Eles não são tão grandes em tamanho. Eles estão no norte, tão coloridos, como essas imagens. Então é assim que você realmente desenha sobre o foco em torno de algo para que você possa ver aqui. O foco está neste texto. Então, há muito espaço em branco em torno dele, e o espaço vício vai criar algum foco. Por aqui. Este é o propósito do espaço de luta. Aqui, você pode ver que eles estão destacando seu produto apenas um produto e o fundo pálido e muito fora do espaço em branco ou espaço negativo, como nós chamamos. E você pode ver aqui que temos no botão. Isto vai guiar os pés como este. Não ver. E para Então é assim que estes são os passos do ponto focal. É assim que os nossos olhos se movem. Então vamos ver outro exemplo Aqui você pode ver o foco está nesta imagem do produto novamente do que este. orgânico Chocolate escuroorgânico. Então, em, tipo, quatro e cinco segundos, eu vou saber que estes são chocolate orgânico e é ah, 100% orgânico ou algo assim. Então, aqui novamente, você pode ver um ótimo uso fora de cores, apenas o produto de cabeçalho e loja. Então, não há muita confusão, muito espaço para a esposa. E este é um grande exemplo. Outro é esta faixa e este é um novo padrão em pagamentos on-line, sistema de pagamento on-line. E aqui novamente, o foco médio está neste título. Então, sempre que chegar a esta página primeiro, vou olhar para esta. Então eu vou ver a falta da equipe em estoque, arte e outras coisas. Então também este é muito importante ou ele para que você possa ver toda a página aqui nesta cor. A tela é totalmente diferente de tudo isso. Então o fundo é azul. Tudo é branco e azul. Apenas esta conta de criação é verde. Então, isso é chamado chamada para o botão de ação. E é por isso que é basicamente o ponto focal aqui. Então um e 21 e assim movendo seu olho deste cabeçalho dedo do pé este botão. Ok, então este é o Walmart. Outro exemplo Aqui, você pode ver que o foco está neste ano aqui. E também estas imagens maiores. Não sei por que removeram a cor da barra. Então, se descermos, você pode ver que esta barra é basicamente o ponto focal mais importante deste site. Eu realmente gostaria que mesmo neste estado, eles tivessem uma barra cheia aqui para separá-lo do resto fora das seções. Eso pode ser facilmente. Hum você pode dizer facilmente clique por olhos e escolhido por olhos E em seguida vamos ver este. Ok, então esta é uma página de produto da Elektronik Samsung e você pode ver ou ouvir Ouvir. O principal ponto focal básico é a tela Samsung porque é colorida e tem muitas cores fora . Então, à direita, este é o maior 112 e três. Então estas são as três coisas mais proeminentes. Este é o mais romano e, em seguida, este é o segundo mais proeminente. Este é um cansado, mais proeminente. É assim que você vai projetar e ah, você sabe que im orientar os olhos de seus usuários. Não, vamos ver alguns dos de desenhosde marca. Agora você pode ver aqui nós temos este logotipo é mais proeminente sobrecarga. E esta duna não guiou e, ah, vai Guia de Pedra. Algo assim. Não tenho a certeza do que são estes? Mas você pode ver aqui no logotipo é a parte mais importante aqui e, em seguida, este título. Não tenho certeza do que é isso, mas parece ótimo. Vamos ver esses exemplos. Aqui temos outro movimento de design branding. Os gráficos surgem, e você pode ver aqui nesta página, o ponto mais focal é esta imagem, e então a próxima, seus olhos vão se mover em direção a este título. Então é assim que vamos nos relacionar. A mulher vai reconstruir o mundo. Então eu acho que isso é sobre mulheres e mulheres incomodando. Algo assim. Aqui de novo, temos algo assim aqui de novo. A primeira coisa é isso O mais importante é que isso se juntou à revolução humanitária, e a próxima é esta imagem. Então você pode ver. Isso é mais proeminente nisso porque as cores são muito escuras e isso é um pouco claro , como cores compartilhadas na imagem. Isso é mais proeminente nisso porque as cores são muito escuras e isso é um pouco claro , Então é assim que esta coisa está funcionando. Próximo. Vê outro? Tranquem a tempestade deles. Estranho. E você pode ver que isso é algum tipo de revista e novamente você pode ver aqui nós temos diferentes arranjos para imagens e layout, mas a primeira coisa que você vai notar é que este conteúdo continua. Será que eu acho que é conteúdo? Talvez ligado e eu acho que é francês, então eu não entendo muito, mas é assim que você usa pontos focais em seu projeto. Da mesma forma, aqui você pode ver o mais importante é esta imagem, porque tem muito espaço em branco em torno dela, e então, novamente, as imagens são têm um monte de cores. Em seguida, a próxima coisa que você percebe neste design é este cabeçalho sobrecarga. Portanto, isto é muito importante. A 3ª 1 é a cavanhaque de neve e veja, estas são as três coisas mais proeminentes aqui. Novamente, você pode ver ou ouvir imagem muito proeminente e o texto da mesma forma aqui, estes são proeminentes dentro. A primeira coisa que você vai notar os títulos do Artie, então é assim que você usa o ponto focal e usa o dedo do pé. Enfatize e oriente seus olhos de usuários e dê algumas coisas importantes e maiores do que as outras coisas. Espero que tenham gostado desta lição. Se você tem alguma pergunta para me fazer, vamos para a próxima lição 3. Usando linha, curvas e formas no design: o que eles foram projetados para ver neste mundo. Eles são todos feitos de linhas, algumas curvas e formas, navios básicos. Então, sempre que você começar a desenhar algo ou começar a desenhar algo, você vai usar as formas básicas, as curvas e a linha. Então, a linha é basicamente reta de um ponto para outro ponto. As curvas são um pouco curvas ou anguladas, ou algo assim, e as formas são basicamente retangulares, estrelas triangulares e ah seu, ah, círculo ou lábios. Então estas são todas as coisas que existem. Você vai usá-los em seus designs para melhorar seu design assim que você tem. Você pode usá-los de várias maneiras. Vou mostrar-vos muitos exemplos. Vamos ver um pouco mais sobre essas linhas, curvas e formas. Agora há algo mais sobre essas linhas e formas. Então, se você está projetando para crianças empresa sua roupa Crianças ou duas vezes marca, em seguida, as linhas que você está indo para usar em seus projetos. Eles não vão ser muito retos e ter um monte de cantos, então as formas e linhas vão ser alteradas de acordo com o seu logotipo marca e a equipe fora do seu design Então, por exemplo, se você o seu design é baseado nessas três palavras-chave como força, liberdade e Morgan, o que você acha que vai usar? Você vai usar overs são elipses ou você vai usar linhas de tabuleiro muito retas ou algo assim? Então é assim que você vai moldar seus projetos, então usando diferentes formas com base em sua equipe e também eles podem ser usados de muitas maneiras diferentes. Vou mostrar exemplos diferentes, então abra sua mente sobre como usar essas linhas e formas em seus projetos. Então vamos ver alguns dos exemplos. Este é um site listrado. Vimos isso em exemplos anteriores e você pode ver sobre ele que aqui temos uma forma. Esta é a forma do tipo Bill em torno deste também o tipo biddle para uso aqui. Então temos retângulos arredondados aqui e você pode ver que isso é apenas retângulos podem ser vistos em um monte de formas aqui, ou você pode ver à direita esta falta lá. Mas também é cantos arredondados. Este fazer e todas essas imagens eles estão usando cantos arredondados. Então esta é basicamente toda a equipe. Eles estão usando muita injustiça neste projeto. Agora, se você vir aqui, você pode ver que isso também é outra forma. Esta é uma linha que está inclinada em torno deste cabeçalho Esta área azul, não é muito quadrada. Então eles estão usando isso para criar algum interesse por aqui. Então este é outro uso fora das linhas. Linha inclinada. E se formos até aqui, você pode ver aqui de novo. Você vai ver uma linha separada sua linha novamente e mais baixo aqui para mostrar-lhe algumas das coisas como ícones aqui. Elipse novamente temos a linha inclinada, Esta seção Você pode ver como eles estão usando diferentes formas. Então esta é basicamente uma linha inclinada que está fazendo seções diferentes. Estivemos aqui de novo no fundo aqui. Uma linha separada para separar estes deste fundo outra vez uma linha 10 entre uma linha 10 e você pode ver se eu me mover para cá. Este botão novamente tem o mesmo canto, as mesmas formas. São ilustrações também têm cantos arredondados. Você pode ver que eles não são quadrados. Então é assim que toda a equipe é construída. Então eles pegaram isso e aplicaram para lá, todos projetados para todos os elementos. Ok, então aqui Walmart você pode ver ou ouvir. As linhas não são muito curvas. Isto é reto. Então, novamente, isso é linha reta. Esta é a seção reta reta linha para enfatizar esta seção. Nós estamos aqui. Você pode ver aqui que temos de novo. Hum, deixe-me mostrar-lhe. Este é um botão arredondado, separador de linha reta aqui. Esta linha 10 você pode ver aqui de novo. Estas são linhas um pouco entediadas e ah, novamente, uma linha 10. Quando clicamos nele, ele se torna em Boulder. Também. Você pode ver isso combina com o topo virado para aqui. Você pode ver esse bar, e esse estilo é quase o mesmo. E é assim que você molda seu design. Usando diferentes formas, linhas. Há muitos usos fora das linhas. Ok, então este então esteprojeto é totalmente diferente é caridade para crianças, eu acho. projeto é totalmente diferente é caridade para crianças, E aqui você pode ver, as linhas são totalmente diferentes. Os quatro estilos, as linhas atrás deles, linhas pontilhadas, eles são Eles parecem agora, aqui. Você pode ver se você eu olhar de perto isso Ah, sublinhar fora de qualquer link que você pode ver. É um marcador muito, Andrea. Linhas guiadas por marcadores. É isso. Parece que um garoto colocou uma linha debaixo dela. Da mesma forma, Aqui eles estão usando linhas de curry curva. Linhas para criar interesse. Então, isso é novamente você pode ver linha escovada em toda esta área de linha descoberta. Então, para criar algum interesse assim novamente você pode ver 100 cantos, linhas curvas, uma forma, forma dura. É usado novamente, duas ou três vezes, neste design. E é assim que todo este projeto é fodido. Assim, também, você pode ver a forma disso. Dá para ver a mesma forma deste sofá. É quase semelhante a esses encargos. Então é assim que eles têm usado diferentes elementos no design novamente, é outro site Um muito 10 linhas têm sido habituais aqui em diferentes seções. Deixa-me mostrar-te aqui. 10 linhas, 10 linhas, 10 linhas para esconder o que aqui no cabeçalho arredondado pílula retangular em forma de tal barra de sino em forma de botão. E você pode ver como isso soou. redondeza está vindo deste logotipo. Você pode ver o pacote deles. Tem tudo diferente. Um retângulos arredondados feitos juntos novamente. Estes ícones também são restritos da mesma forma que eu tenho um monte. Eles têm muito fora cantos arredondados, muito 10 linhas. Então 10 linhas é basicamente a equipe deles. Eles estão usando 10 linhas muito elegantes, mesmo nos botões que você pode ver aqui. Vazamentos do Brasil. Não tenho certeza de que língua é essa. Eu acho que é polonês e ah, muito fora de linha. Um monte fora de linhas, um monte fora de linhas aqui novamente na cabeça na foto, você pode ver se você olhar de perto aqui. Há uma linha muito fina que separa a separação entre estas duas linhas e este um retângulo molda a forma do derrame. Isto é para apoio. Então é assim que todo este projeto é. Vamos ver outro. É muito mais recente design cada amor este em e aqui eles têm usado algumas formas, que eu realmente amo, para que você possa ver como eles criaram algum interesse. Então estas são linhas onduladas. BlueWave aqui temos Whitewave aqui temos uma nave estelar arredondada em forma de estrela e parece realmente incrível. Vamos ver mais alguns exemplos para que tudo bem. Então você pode ver aqui eles têm declínios. Então toda a equipe tem um monte de linhas tecnológicas. Você pode ver aqui. Aqui, esta terra mais botão tem declínio do que outra vez aqui. Este é um grande declínio com o declínio com o declínio e esta é iniciada linha. Então é assim que estas linhas estão criando apenas neste design. Da mesma forma, você pode ver ou ouvir. Este é um design de aplicativo móvel e essas linhas muito pequenas e simples eles estão criando muito fora do espaço em branco e criar em apenas neste projeta uma linha para linha três linhas para cinco e uma linha curva aqui. Esta é a forma da curva. Ele é usado para criar algum interesse porque todo o design é muito squish. Então criar alguém apenas Eles usaram esta linha de país e parece realmente grande. É de uma taxa ou deixar você mais querido fazendo isso. Estou usando as páginas deles para mostrar esses desenhos. Então eu tenho o crédito de qualquer um para que você possa ver aqui da mesma forma, por aqui isso é de vários proprietários. Eu costumava ir e poucas agências da mesma forma, esta é deste cara. Carol, ela chifre. Ok, então isso é de Mika Park, e aqui você pode ver que este design é totalmente diferente. As formas das pinceladas foram usadas aqui, pinceladas e ah, é assim que toda a equipe foi criada. Então você pode ver que eu realmente amo como este pincel escovação está criando em apenas em toda esta cabeça superior da área. Então eu acho que esses são, ah, muitos exemplos que você viu agora. E se você tiver alguma dúvida sobre isso usando linhas e formas e como ele vai caber em sua equipe fora do seu design, você pode me fazer qualquer pergunta sobre isso. Vamos passar para a próxima escuta. 4. Cores e tema do design: o maior problema que já vi em muitos designers novatos. Um grande nunca designers é como usar a cor Saudia. Eles não sabem como usar cores em seus designs, então eles apenas falam até cores aleatórias ou três cores aleatórias e tentam misturá-las e usá-las para diferentes elementos em seus designs. Então esta é a maior fita que vou dar a eles. Para começar são avisos ou loja grandeza. Tente usar mais de duas cores em seu design, então eu vou mostrar um monte de técnicas. Como construir seu esquema de cores e um pouco grande. Um problema é que a maioria dos designers norte-americanos, principalmente os grandes designers de avisos de metal, eles não sabem que as cores não são independentes. Por exemplo, se você estiver usando apenas uma cor azul ou uma cor roxa, isso não significa que eles sejam independentes. Eles têm dedo do pé olhar grande juntos, então você precisa combiná-los. E isso não é verdade para todas as cores. Cada cor não é não pode ser combinada com qualquer outra cor. Então, existem algumas regras. Há algumas cores que vão ficar bem juntas. Alguns assassinos não vão ficar bem juntos. Por exemplo, se você vai para a praia, você vê uma equipe específica em verdes, salões e azuis, e a areia é um pouco amarela ou cinza, algo assim. Então esta é uma equipe inteira. Esta é a cor natural, tramando o que Deus criou de qualquer maneira. Então a regra é que eu vi e usei é que 60% usam três cores. Se você tem um assassino vai ser usado para o fundo. 60% do que 30% é o segundo regular, que vai ser usado em diferentes áreas fora do seu site, e 10% é o S e cor são outra cor, que vai ser usado com moderação ou muito menos em seu design. Então esta é a regra das pessoas que são designers de interiores. Eles usam essa regra para esquemas de cores, então se você estiver pendente suas bolas, elas serão 60% da mesma cor. Isso vai ser muito no seu quarto do que 30%. Pode ser o mais longe no seu quarto e a cama no seu quarto e 10% é o amarelo. Por exemplo, Se você tem travesseiros amarelos em suas camas, eles vão ser agir como cor extensão ou 10% cor. Então é assim que eles vão construir seu esquema de cores. Então, se você olhar para o meu slide, você pode ver quantas cores eu usei. Eu só usei basicamente fazer assassinos. Esta é uma cor preta preta roxa, Glaciar adequada, livro de capa comum. E no topo, você pode ver que este é o blucher, branco e preto. Eles não são basicamente cores, eles não são. Você pode ver que eles não estão no enorme. Eles são apenas nenhuma cor e ah cor Ali. Então é assim que este esquema de cores é construído. Além disso, você pode ver na parte inferior onde você viu fazendo seus projetos concordou impressionante. Por Mohammed s e Parise. Esse é o meu nome. E também é Ah, ele desligado. Você pode dizer Calero cinza azulado aqui. Então este é um Isto é gerado a partir da mesma cor azul. Então é assim que este esquema de cores foi gerado. Mais uma coisa é que há propósito fora de cada cor em seus esquemas de cores. Então, se você estiver usando cores muito tubarão que eles podem ser usados como seus botões. Eles podem ser usados como os itens capazes ou chamar a atenção de seu usuário. Então você pode usar outra cor. Por exemplo, são cor azul maçante como você pode ver. O que aqui? 30%. Você pode usar isso em algumas áreas específicas fora do seu projetado, como barra superior e barra de navegação superior . Talvez. E então nós temos a cor de luta britânica algo assim que eu vou usar para o fundo. Então é assim que você pode construir seu esquema de cores? Mostrei este exemplo aqui. Você pode ver. Ok, agora a última dica e que é mais importado Tip. A dica mais importante é que comece a projetar sem cores. Você vai adicionar as cores no final. Isto é como eu projetei isso é como um monte de designers design e esta é a maneira correta. Então o que você vai fazer é você vai usar cria em seu design, e no final, apenas um ex angular como você pode ver o que aqui esta cólera amarela usou. Então este amarelo será usado para são os botões são todas as áreas ativas fora do seu design ou áreas interativas fora do seu design e outros vão usar para definir diferentes seções e cores diferentes em seu design e todos os outros estes cinza eles são indo dedo do pé mostrar uma diferentes áreas de seções fora de seu design. Por exemplo, este cinza eu vou usar para logotipo este cinza eu vou usar para texto ou desgraça, vai estar dirigindo esta mania, indo texto corpo do Toby, e isso vai agir como minha cor de fundo. Então tente começar seu design com cinza, apenas projetar em diferentes tons de cinza e depois na próxima iteração. Adv na cor para ele. Então é assim que você vai adicionar uma cor do que o 2º 1 e eles vão se parecer com um ótimo design. Então, vou mostrar-vos muitos exemplos na próxima lição. Então vamos seguir em frente e ver alguns exemplos fora do dedo do pé. Tire a idéia desta cor, tramando 5. Exemplos de cores e temas: vamos ver alguns exemplos para os fusíveis fora de cor e como ele pode ser usado. Você pode apenas usar algumas cores como dois assassinos, e criar o seu ou design. Então esta é uma página inicial que criei recentemente para um cliente. E você pode ver aqui que eu usei apenas algumas linhas e algumas sombras e azul, e isso é quase alerta negro. Então estas são as duas cores que são os principais assassinos usados em todos os lugares neste projeto . Então este cinza aqui, você pode ver que também é uma grande variação azul fora do mesmo nucular. Tudo aqui e depois se eu subir, você pode ver que esta é a segunda seção novamente. Estes são um pouco azuis pálidos. Isso foi um pouco que você pode ver atenção captador seção de oito anos fora deste projeto. Então temos este. Isto é novamente azul e preto novamente, azul e preto. Estas são apenas mais algumas cores, que eu acabei de criar a partir disso novamente. Este azul e eu mostramos alguns dos truques em meus outros cursos sobre como criar cores diferentes das mesmas cores que indo para ir bem juntos e Ah, e esta é a única seção onde eu usei essas cores. E se formos aqui de novo, botão preto, são clientes diferentes. E no final, você pode ver aqui nos canhotos estão novamente as cores azuis, esses fundos. Eles também são azuis pálidos e acinzentados. Então toda essa equipe está usando apenas azul e preto duas cores, algumas linhas, algumas sombras, e eles estão dissolvidos. Então é assim que você pode criar uma necessidade e design limpo sem usar muitas cores. Aqui está outro exemplo que eu criei em 99 concurso de design e eu estava no finalista. Mas de qualquer forma, infelizmente, eu não queria este concurso. Ok, então aqui você pode ver de novo. Estou usando este cinza e azul para que você possa ver todos os olhos da equipe usando este cree e cores azuis, nada mais. Então você pode ver como eu criei Ah, design muito elegante usando apenas um é você pode dizer dois assassinos. Então, tudo no fundo é azul ou preto e apenas um único x tornozelo. Então esta é a cor mais importante aqui. Você pode ver que eu escolhi esta cor daqui. Você pode ver se você olhar para o logotipo. É assim que você vai ter as ideias de novo. Você pode ver o local para ele e você pode ver este telefone evoluído. Eles estão combinando roupas de seus muito próximos. Então é assim que obtemos ideias e criamos projetos incríveis novamente, você pode ver aqui esse sabor tradicional de tabaco de sonho. Tem alguma textura nele. Então eu usei alguma textura, querida no fundo, as mesmas cores que você pode ver aqui. Eu escolhi para o trabalho de volta fora e esta tela eu escolhi para o sabor mental apenas dedo do pé separado que caso contrário tudo o resto é azul e este azul está vindo de sua marca. Você pode ver sonho 1.8 e foi assim que eu criei todo este design e revisão do cliente. Como este design, quase me chamaram duas vezes. Mesmo depois que esta competição Waas terminou, ele disse que eu realmente amei este design e eu estou infelizmente no cliente real que estava indo para selecionar no CEO fora desta empresa. Ele não selecionou isso no final, mas a agência que criei para eles realmente adoram essa ideia. De qualquer forma, vamos ver outro exemplo. Ok, então este é outro exemplo que é, uh, mais uma competição dos meus 99 Designs Dot Com. E estes são muito antigos. E infelizmente, eu não ganhei de novo neste. Eu estava na final, mas não quis dizer como você pode ver aqui. Eu estou usando apenas cor roxa e grande e negros para glamour porque é, ah, ah, Bush bar soprando. E você pode ver aqui eu acabei de usar esses clientes de cor. Eu tenho alguns clientes, alguns fundos, algumas linhas de sombras para enfatizar diferentes seções e áreas. E aqui você pode ver novamente, a cor de destaque é roxo, invertendo as cores. Esta outra técnica eu mostrei a vocês em meus outros projetos que aqui nós invertemos as cores e aqui nós temos os assassinos reais. Era o esquema de cores. Então foi assim que criei toda essa equipe. Vamos ver mais alguns exemplos de outros designers porque eu acho que eu sou apenas um designer normal . Meu trabalho não é tão bom, Então vamos ver alguns designers experientes e mais experiência do que eu. Então aqui temos jampp dot com. Este é outro site. Eu realmente amo esses assassinos porque essas são minhas cores favoritas. Roxo. Desculpe, Purple. Não roxo. Eu gosto deste azul escuro são azuis e laranjas. Então estas são duas das minhas cores favoritas e você pode ver como eles usaram. Linha superior roxo do que este roxo formas aqui, as formas azuis e ah, é assim que o design da prostituta é usado. Estes dois assassinos em todas as suas ilustrações e alguns tons fora que para este é um isqueiro. Azul é o mesmo azul mais claro deste corretor mais escuro. Eu realmente amo este site. Isso é de alto nível e nós amamos esse design. Muito simples, muito elegante. Apenas duas cores e tons diferentes fora que este publicar azul. Então esta é mais escura. Esta é a diversão leve sobre isso é novamente esta grande, grande cor azul acinzentado popular ou aqui para que você possa ver usando apenas fazer cores. Você pode criar designs incríveis que você não precisa como três ou quatro ou cinco cores. Isto é tão vamos ver mais um exemplo. Eu realmente amo este aqui. É de Denny Petty e o título é que cães devem ser bonitos. E eu realmente amo isso. Como ele usou pastos diferentes por aqui. O início azul este azul proeminente no estoque em preto Um pouco aqui e eu realmente amo como essas coisas foram destacadas aqui com alguma cor azul pálido por baixo deles. Ah, e ah, este é um ótimo uso fora de um esquema de cores simples para melhorar todo o seu design para que você possa ver apenas esta é a sua cor primária ou acento. Esta é a cor azul que é usada para as seções destacadas ou seletivas ou interativas fora deste design. Este azul pálido é usado para destacar algumas áreas que são, você pode dizer áreas enfatizadas, e estas são novamente links. Por aqui. Estes estão novamente em azul. Então eu realmente amo esse design. Deixe-me mostrar-lhe outro cabelo de novo. Eles estão usando apenas duas cores da tela e do mar na areia, azul azul maçante e o dedo do pé preto final casa essas cores e você pode ver estes. Existem ilustrações diferentes novamente na ilustração. Você está apenas vendo duas cores aqui, dedo do pé fazer cores para cores para cores, e isso é tudo para que você possa ver como eles estão usando cores diferentes para destacar, como trabalhos. Estamos nos escondendo, então se clicarmos aqui. Vamos ver como a pá de trabalho deles está listada aqui. Então, empregos abertos de novo. Você pode ver aqui eles têm este Bill C na cor azul e ah, eu realmente adorei este tempo. Isso é muito ousado, muito único nesta cor da placa e no topo do preto com a tela está olhando realmente grande. Então estes são alguns exemplos que eu queria mostrar a vocês. Espero que você tenha amado esta lição e concorde com as idéias de como você pode usar cores diferentes . Mais uma dica é que se você tem um fundo mais claro, tente usar cores mais escuras no topo do dedo do pé, obter algum contraste como você pode ver o que aqui. E se você tem alguns fundos mais escuros, você pode ver aqui que temos fundos mais escuros. Eles estão usando cores mais claras nele. Então este é um muito basicamente, mas eu vi muitos designers fazendo isso errado. Então vamos passar para a próxima lição. Essas lições estão ficando muito mais longas, mas eu espero que você esteja indo para obter ah, muitas melhorias em seus projetos olhando para esses exemplos e como eu estou explicando para você. Se você tem alguma pergunta para me fazer, vamos para a próxima lição 6. Usando dicas e truques: Agora vamos falar sobre os rostos tailandeses e a força que você usa em seu design. Eles têm uma regra muito importante. Eles desempenham um papel muito importante em seus projetos. Agora um monte fora designers, eu acho que eles não entendem que Eat Die Phase tem hits próprio Weiss, ou você pode dizer que é próprio tom ou própria equipe ou personalidade. Então, se você está tentando usar algum tipo de letra, tente combiná-lo com a equipe e personalidade fora do seu design. Então, se você está projetando para crianças a força, você vai usar a sua indo para combinar com essa equipe. Então vamos ver o que mais há nas fontes agora? A primeira dica que dou aos novatos ou todos os designers é começar com um ou máximo dois tipos de gaveta. Tente usar três ou quatro tipos de letra e tentar misturá-los Então um tipo de letra tente selecionar um tipo de letra, que tem um monte de estilos diferentes como Open Sands ou Roberto Roberto tem, como talvez 30 40. É uma família muito grande, e você pode combinar estilos diferentes e criar um design agradável. Da mesma forma, tente usar dois tipos diferentes biqueira obter contraste agora você pode ver no meu design. Aqui você pode ver que eu usei Rakitic rosto para a frente, que é para o cabeçalho e outro que é muito elegante, muito magro e muito alto. Então você pode ver que são eles. Estão a ter algum contraste entre eles. Da mesma forma, sempre que você tenta usar alguns tipos de letra, eles devem ter algum contraste. Então, há um curso inteiro de mim sobre este tipo de letra ou tipografia. Agora, o segundo mergulho que dou aos meus designers é que tente usar apenas uma família de rosto forte ou tentar usar apenas dois tipos de letra. Então não tente misturar como três ou quatro porque eles são difíceis de manusear e controlar. Então, quer que eu encare? Por exemplo, se você estiver usando Roberto ou qualquer outro tipo semelhante, você pode ver que ele tem muitos estilos diferentes. Então, se você olhar para Roberto, há Roberto, Roberto, Condensado e Roberto. Eu acho que algum tiefest estilo tribunal há como 30 ou 40 força diferente e estilos em Andhra fronteira Tiefest Segundo mergulho é que tentou usar dois rostos diferentes I para obter algum contraste. Assim, o contraste pode ser usado de muitas maneiras diferentes, como tomar e 10 e muito. Vou dar o dedo do pé. Há outra palestra na próxima lição sobre a próxima seção sobre o contraste. Então vamos falar sobre eles sobre o contraste para que você possa fazer formas San serif e serif . A força, que tem algumas linhas de traço nos cantos, está na parte inferior deles. Então é assim que você vai começar a usar algumas fontes. Von anão coisa é que cada quatro estilo tem seu próprio propósito. Então, se você estava usando quer que eu encarar para títulos, você vai usar o mesmo tamanho e o mesmo forte para todos os títulos em seus projetos . Se você estiver usando um ford para body dext ou o texto executando o texto em seu design no texto pequeno , você vai usar o mesmo rosto de gravata para todo o corpo de texto em todo o seu design. Então esta é uma fita muito importante. Tente consertar sua força e tentar dar-lhes propósito que este é para ir. Isto é para o corpo do texto. Isto é para isto é para os botões. Ok, então a magia onde a magia vai acontecer em seus tipos de letra é. A magia está escondida na balança. Escala é basicamente o tamanho ou o contraste. Quanto o contraste está lá. Então escala é que, por exemplo, eu tenho muito pequeno forte para o meu dext e, em seguida, eu tenho muito grande forte para o telefone grande para a minha direção. Então eles vão ter muito fora de contraste e vai criar um monte de interesses fora como você pode ver ou ouvir em meus slides D. O que eu estou tentando fazer é que eu estou usando um Ford muito 10 com um muito take form, que é um telefone preto mais ousado. Então você pode ver que estes são estilos diferentes que eu mostrei. Eu acho que este é um Bordeaux Ford 10 normal, médio, negrito e preto. Então tente usar o máximo de contraste possível, por exemplo, fino e preto. Eles vão ter muito contraste. Da mesma forma, você pode usar o contraste tornando-o um título muito grande Para, como, este, você pode ver em todos os meus slides que eu estou usando muito tomar muito grande, cor muito brilhante para este título e muito telefone fino e pequeno para os meus textos ou aqui. Então é assim que você vai usar a magia está realmente escondida na escala de escala significa como você está fazendo um texto muito maior e um fundo muito menor muito rochedo e pegou um muito lata. Então é assim que você vai fazer isso nos dias de hoje. Estamos projetando muito para APS móveis, telas móveis e telas menores. E há muito fora para diferentes números fora de telas, tamanhos diferentes fora de telas, escrevendo no retentor, tamanhos pequenos e, em seguida, dispositivos de tamanho médio, em seguida, dispositivo de tamanho grande como desktop DVS muito grandes e Algo assim. Portanto, tenha isso em mente que cada tiefest não vai funcionar em telas menores em telas menores . Existem diferentes tipos de letra que são projetados para funcionar para telas menores e dispositivos de mão , e você pode ver que eles vão funcionar melhor nessas telas. Portanto, antes de comprar qualquer telefone ou usar qualquer força, há sempre informações nesse site. Ou tente testar isso para na tela do seu celular e tentar ver que 14 pixels ou 16 pixels são 18 pixel quatro tamanho é ele parece legível? Parece legível. E você pode reconhecer letras diferentes? Então é assim que você vai selecionar seu déficit. Então, há muitos fatores na seleção de tifo é, mas este é um deles Agora por que você acha que Roboto é usado pelo Android e San Francisco é usado por dispositivos Apple? Essa é a mesma razão pela qual eles desenvolveram suas próprias defesas que ficam ótimas em seus dispositivos e que são legíveis, ilegíveis. E é por isso que se o nosso sistema para Android é Roberto e Apple dispositivos seu San Francisco agora na próxima lição, vamos ver alguns dos exemplos que a seleção fora tifo vai melhorar e ex criar designs impressionantes. Então vamos ver alguns dos exemplos. 7. Exemplos de como usar tipos no design de web de interface: Agora vamos ver alguns exemplos. E este é o primeiro exemplo de G ela e este é em Bihar. Comece agora e você pode ver como isso eu acho que isso é Ah, agência de design. E há projetos perfil e geral. E você pode ver como eles estão usando esse tipo de letra muito exclusivo. E você pode ver que é ele parecia que ele é usado. É escrito por ah uh Carter vizinho Pen e carregar gráfico Ben. Algo assim. E você pode ver como eles têm usado apenas duas cores e este die tarifas para enfatizar e seu estilo. Aqui você também pode ver o mesmo tipo de letra, mesmo tempo rosto mesmo tipo de letra em Levante I face usado em todo este design e você pode ver que está olhando grande. Então é assim que você o corante enfrenta seleção ou morrer para seleção pode melhorar seu design. Então vamos ver outro aqui. Você pode ver que esta é uma receita positiva, eu acho, e você pode ver aqui há devido à força. Acho que este é o mesmo. Esta é uma versão muito ousada e isso é normal. Acho que eles parecem iguais. Vamos ver o velho. Ok, então aqui temos estes dois força em que eles estão olhando criar Muito tomar rumo com algum grande estilo e você pode ver aqui núcleo visual, novo nutrir Você pode ver que este telefone é muito arredondado e é sensível e isso é um triste dia para então eles olham juntos criar aqui novamente você pode ver San Serif e Serif sentir que se é basicamente tem alguns finais como estes e bolas muito grossas você pode ver o seu aqui na cauda fora Por quê? Há uma pequena bola e eles estão olhando criar Então este está sob design e aqui você pode ver novamente Eles estão usando muito con trustee ou muito tomado pensar e transformado como você pode ver no topo para o maior O título quatro Há um monte de contraste entre diferentes linhas. É também um celular e você pode ver no subtítulo aqui onde está escrito Oscar Wilde. É uma triste reforma e é um humanista, acho que Humanise Ford. Aqui está outro exemplo Aqui. Você pode ver muito assumir aqui para que você possa ver a diferença de escala. Isto é muito grande. Isso é muito pequeno e isso é muito leve. Isto é muito 10. Então é assim que ele vai criar interesse em seu design para que você possa ver apenas para morrer rostos um muito grande, muito pequeno. E eles estão ótimos juntos. Da mesma forma, este é outro projeto Berlim e eu realmente amo este quarto, isso é novamente, eu acho. Ah, Ford de transição. Acho que não me lembro de tudo, mas acho que depende mais mas acho que depende maisde criar seu senso de força correspondente. Então você não precisa aprender e lembrar a cada quatro estilos. Mas você pode ver aqui o para forçar um é San Serif e um em si. Então, o topo disse que se o fundo é sensível e é mais fora forte geométrico, você vai aprender sobre isso. É baseado em navios simples e isso é basicamente eles estão olhando criar juntos. Então, se você olhar para eles este é o aplicativo deles. Então você pode ver como esses dois telefones vão criar juntos. Isto é usado para o título. Então, o propósito deste telefone, a parada está dirigindo para o fundo é o texto. Então é assim que todo AB está usando estes forçados. E espero que tenham gostado desta lição. Então, Então, vamos passar para a próxima. 8. Como usar o espaço branco no design de UI: Se você quer ser um grande designer, há mais uma coisa que você precisa colocar em seu design. Isso é muito fora do espaço branco. Então, usando o espaço em branco ou espaço negativo onde não há nada escrito, ele vai melhorar muito seus projetos. Então, espaçamento entre elementos e espaçamento entre elementos verticalmente e horizontalmente, ambos vão funcionar para o seu espaço em branco. Então, se você quer ser um bom designer, você é todos os dias, palavra ou linha diária deve ser. Uso espaço em branco em todos os lugares. Ok, então isso é uma coisa que você precisa ter em mente. Eu já vi muitos designers maiores que estão com medo de usar o espaço em branco tanto. Eles tentaram desordem do pé, seus elementos de design na página um grande, então eles tentam apertá-los juntos. Então você se certificar de que você está indo para usar uma boa quantidade fora do espaço em branco. Por que precisamos de espaço em branco? Espaço branco realmente criar coisas cozidas? O número um é a ênfase. Agora você pode ver em todo este slide. Eu tenho um monte de lutas espaço e muito menos conteúdo, então você pode ver todo o foco e Toda a ênfase está no meio nesta área de texto onde eu escrevi. Então é assim que o vazio, espaços indo para o pé enfatizam o que é capturado ou dentro daquele espaço de luta. Então, se algo alguma imagem ou algo tem um monte de espaço em branco ao redor, é espaço negativo como é chamado. Então ele vai ser muito proeminente em seu projeto. A segunda coisa é que ele está indo dedo do pé produzir efeito de sonolência e design limpo, e ele irá remover mais tarde. Então eu vi muitos designers, principalmente grandeza, que eles tentaram colocar texto e elementos diferentes aleatoriamente em seu quadro de arte e não sabem como, você sabe, equilibrar você sabe, nosso espaçamento entre diferentes elementos. Então, na tipografia do meu curso para designers e desenvolvedores, eu falei sobre esse ritmo vertical onde você está indo para projetar todo o seu design baseado em diferentes espaços em branco, diferentes passos vitais, por isso vai ser muito calculado, e é baseado em ciência e matemática além da arte. Então é por isso que eu disse que o design é principalmente ciência e matemática em vez de arte, porque nós usamos muitos cálculos nele. Agora, deixe-me mostrar-lhe alguns exemplos e você pode ver aqui. Aqui está um dos meus projetos e você pode ver por que eu deixei muito fora do espaço em torno desta área para que você possa ver esta imagem. Desculpe, Este vídeo, ele vai ter um monte de ênfase, porque há um monte de espaço em branco no lado direito do lado esquerdo. E também aqui, você pode ver que o título é Ah, muitos têm muito espaço de gelo acima dele. Então, lendo no topo, esquerda e direita, vai ter ênfase. E é assim que vai acontecer. Então, Então, aqui nesta seção, você pode ver que temos muito espaço em branco à esquerda, à direita, na parte inferior e no topo. Portanto, certifique-se de que o espaçamento é consistente. Então, se você tem, tipo, 100 pixels ou 100 pontos de distância entre essas duas seções, mantenha isso em todos os lugares iguais. Certo, então 100. Se você tem 100 na parte inferior, certifique-se de que é sempre 100 ou algo assim. Então eso certifique-se de que você está espaçamentos em diferentes elementos entre diferentes elementos. Vai ser consistente. Ok, então aqui está outro exemplo. Neste design, você pode ver que estou usando apenas espaços em branco. Poucas linhas do pé separadas, seções diferentes. Então você pode ver aqui nesta seção porque é muito proeminente porque tem muito espaço em branco de fundo. Ah, vício não significa literalmente que deve ser branco. Pode ser de qualquer cor, mas você pode ver que esta área é dominante. Então, sempre que você vê em toda esta seção, eu considerei o topo que você pode ver aqui. Vmc. Não é tão proeminente este também Ah, muito espaço branco no topo. Você pode ver à esquerda e à direita. Então este é um proeminente então primeiro você vai olhar para ele. Em seguida, você vai olhar para este formulário porque fora este botão realçado botão. Então esta é também outra técnica. Você pode usar o espaço em branco para enfatizar ou orientar os olhos de seus usuários. E aqui está outra seção que você pode ver essas seções são separadas, mas elas são apenas separadas com espaçamento diferente para que você possa ver o espaço entre essas duas seções é demais. Então isso significa que agora a nova seção deste site foi iniciada novamente. A nova seção e um monte de espaço e é consistente com o este espaço. Então este espaço é igual ao Saudi Ah, este lugar e este é o fim. Então você pode ver de novo aqui um monte de espaço branco acima desta área de pé. E se você tentar espremer estes texto dedo do pé da borda fora deste, ele não vai ficar muito agradável e vai olhar confuso. Então, tenha isso em mente. É assim que uso o espaçamento entre elementos. Além disso, você pode ver o espaçamento horizontal e destruição também é bom. um Aqui você pode verumperíodo de disconcerto, espaçamento horizontal entre esses quatro itens. Então é assim que você usa o espaçamento do dedo do pé do espaço branco. Obter em casa seus projetos. Vamos ver mais alguns exemplos e este é um exemplo perfeito. Fora do uso do espaço da esposa. Você pode ver que é uma mídia da República. É uma agência digital baseada em Londres e você pode ver como toda a sua página foi projetado logo aqui. Alguns links aqui, e toda a ênfase está nesta seção. Então, um monte de espaço em branco em torno desta seção está realmente dando ênfase a ela. E este design parece ótimo. Então vamos ver como eles colocaram suas outras páginas. Você pode ver aqui nós temos novamente um monte de espaço em branco em torno do assunto. Ótimo design. Novamente. Um monte de espaço em branco e toda a ênfase nesta área é esta seção. Eu realmente amo este site. Certo, Certo, então vamos ver outro exemplo. Aqui temos outro exemplo. É significativo. E é por todos esses designers um livro de equipe que eu realmente amo quando um monte de designers volta juntos porque é o design mais criativo. Ok, então aqui você pode ver deixe-me mostrar-lhe. Ok, então aqui você pode ver se eu vou lá embaixo. OK, então esta é a página do produto deles. Selecione a quantidade e você pode ver quanto espaço em branco eles usaram. Então ele vai criar um olhar moderno, um olhar elegante e um olhar de bengala. Então você pode ver que você está aqui muito espaço em branco, apenas um produto que a quantidade em estoque. E, ah, só este degrau e guarda. Da mesma forma, se você olhar para esta área. Inicia interativa. Você pode ver que há muitas lacunas entre diferentes elementos. Muito uso do espaço branco que você pode ver aqui nesta área, Della Lamb. Você pode ver quanto espaço eles têm entre esta avaliação e o nome fora do revisor e esta esta classificação inicial. Então é assim que você usou o espaço em branco entre diferentes elementos. E aqui novamente, você pode ver quanto espaço eles têm no topo. Então, hum, tese, como você obtém a idéia de diferentes designs de como eles estão usando o espaço em branco então novamente ou ouvir poucas linhas dem e muito espaço em branco para criar toda esta tabela para a lei ordens. E é assim que os designers usam o espaço de trabalho da mesma forma, isso é neste site asana? Eu vejo um monte de espaço em branco que você pode ver no topo aqui e então novamente, esta seção aqui antes de começar este, hum, GF imagem presente para GF ou qualquer coisa. Ok, então novamente, você pode ver aqui nesta seção, você vê um monte de espaço em branco onde a próxima seção está chegando novamente. Muito espaço em branco novamente Muita experiência e é consistente. Você pode ver que é quase o mesmo na parte superior e na parte inferior. Muito espaço em branco. Eu realmente amo este site. Asana é uma ótima ferramenta e este site tem um ótimo design. Então, mais um. Isto é picante, sem ponto com picante, e você pode ver como todo este site foi colocado fora muito fora do espaço em branco. Certo, então se tentarmos clicar nele. A Lexie. Muito espaço em branco. Toda a ênfase é nesta área que está perto disso. Veja outro exemplo. Aqui está outro exemplo. É quatro casa e família conhecida por sua experiência ou o que quer que seja. Se você clicar nele, você verá novamente um monte de espaço de trabalho. Ainda está carregando. Acho que os olhares desligam. Espero que você tenha industrial como o espaço branco vai criar muita ênfase. Se você tem um monte de texto ou senhor off elementos em sua página, ele vai ficar confuso. Então pergunte aos seus clientes que tentam minimizar Ah, todo o conteúdo para que possamos torná-lo ótimo. Então isso é tudo o que você pode ver se você olhar aqui quanto conteúdo nós temos, apenas um pequeno cabeçalho três linhas fora do texto, que é, eu acho, nem mais do que uma longa linha. Da mesma forma, aqui, apenas uma cotação de um cliente e, como 434 principais clientes e, em seguida, ver mais clientes. Se você quiser vê-los novamente, você pode ver que eles estão mostrando seus poucos Ah, novo e notável, incluindo linha do tempo, e você pode ver aqui novamente o conteúdo é muito menor porque a mente humana, ele pode consomem menos conteúdo facilmente em vez de muito conteúdo. Então isso também é senhora para psicologia humana. Acho que esta palestra está ficando muito mais longa, então se você tem alguma pergunta para me fazer, vamos passar para a próxima escuta. 9. Técnica de design em nível de bloco: sempre que alguém constrói sua casa ou qualquer edifício, o que eles fazem Primeiro, começar a construí-lo imediatamente, ou eles começam com o projeto ou o mapa fora desse projeto. Então, o primeiro passo e esta é uma dica muito importante em seu suporte de design que sempre que você começar qualquer projeto Dr começando com seu plano, é arame. É design de nível de bloco. Eu chamei isso de design de nível de bloco porque eu vou mostrar a vocês no exemplo como ele se parece E esta é a maior dica que pode melhorar seu design. . Não comece seu design colocando toda a textura e todas as imagens em sua tela. Mas comece com o design de nível de bloco e se você pode começar com ele com grande escala de cinza usando apenas cinza e preto, isso seria ótimo. Então deixe-me mostrar um exemplo no final desta lição, o que isso realmente significa e como vamos construí-la agora. A técnica por trás da criação deste design de nível de bloco é que vamos apenas criar diferentes navios simples e ah, vamos colocá-los nas áreas onde vamos colocar algum conteúdo. Por exemplo, se eu tiver ah, social como aplicativo ou algo assim ou aplicativo de registro, eu sei que haverá, como quatro ou cinco medos e um evitar imagem fora dessa pessoa, ou talvez um botão sobre Lá. Então eu estou indo dedo do pé, criar formas diferentes para esses elementos e apenas vou colocar essas formas ali em um nível de ênfase diferente. Então, vou mostrar-vos um exemplo aqui. E vamos ver como eu criei esse nível de bloco projetado mostrando outro ficando em um pequeno design. Agora, aqui você pode ver que eu criei um design de nível de bloco usando este layout. Então, na verdade, eu corporo este. Eu não tenho certeza de quem é o projeto É este porque eu acho que eu acabei de coletar isso? Talvez alguém de drible qualquer. Quem quer que seja o designer, é um bom design. E antes de começar algo assim, você pode ver aqui eu coloquei alguns elementos aqui em apenas navios de bloco. Então usando retângulo de forma, Asari, elipse ou forma de círculo para os sete. Nossa imagem é uma linha maior e mais ousada para o cabeçalho do que essas duas linhas para texto essas duas linhas para mais texto e então isso vai estar morto. Esta vai ser a hora. E estes são dois links. Então você pode ver como eu criei isso. Você também pode criar em 18 apenas usando Chris Kate. E então, se você puder, eu só uso um tom mais escuro de preto ou ouvir algo assim e usado fundo branco . Você pode fazer isso também. Então eu só usei algumas cores. Basta fazer isso e você pode dizer interessante. Mas eu aconselhei que primeiro você tente usar apenas tons de cinza. Então eu vou mostrar a vocês um recurso de site onde você pode encontrar muitos designs de nível de bloco e começar a partir do Então deixe-me mostrar esse site. Então este é um site chamado você de patron hub dot com. E se você navegar por aqui, você pode ver se eu vou para esta página como esta aqui. Vocês estão vendo esses projetos de nível de bloco aqui. Então, se você clicar em qualquer projeto que você pode ver aqui é a imagem de nível de bloco O R versão fora dele . E aqui você pode ver a versão real ou versão projetada fora que então bloco e design bloco Então é aqui que você está indo para começar o seu design para que você possa ver aqui é ele. Certifique-se também de que estes são estes muitos elementos destas muitas secções de conteúdo que existem no seu design. Então vai ajudar os pés. É melhor organizá-los, criar um novo ou bom fora, e você pode saber onde está o botão. Por exemplo, como este, há um botão. Então vamos ver mais alguns exemplos como este. Ok, então você pode ver aqui. Este é um design de nível de bloco muito simples, e este é o design final. Então, se você tentar usar este design nível de bloco, ele vai ajudá-lo muito em colocar para fora e criar projetos simples e grandes aparência. Então isso é tudo para esta lição. Tente começar com o design de nível de bloco e tente usar apenas criar escalas como você pode ver aqui. Eles estão usando apenas pastar diferentes tons de cinza. Nos itens mais importantes são coisas assim. Eles são, ah, um pouco mais cinzentos ou algo assim. Agora mesmo. Eu acho que ele está usando este Stark um ótimo para texto, embora seja mais leve ou aqui. De qualquer forma, esta é a sua interpretação ou difícil e preparação. Eu não sei. Você pode ver outro patrono aqui. Ideais, aplicativo. E é assim que todos esses clientes são usados. Então, a maior retirada desta lição é começar com o nível de bloco projetado vai melhorar muito seus designs. Se tiver alguma pergunta, me pergunte. Vamos passar para a próxima escuta. 10. Métodos de geração de ideias de design: sempre que você começar qualquer projeto na primeira coisa que você está indo em Gorder é que o espaço preto em sua cabeça. Você não é capaz de gerar nenhuma idéia. Então, como é que tens ideias diferentes? Vou mostrar-te maneiras diferentes. Eu tenho pensado muito sobre isso, e eu também li um livro sobre ele. Um suborno de Alan Lipman. Ok, qualquer maneira, então a primeira coisa que você precisa fazer é pegar um papel e lápis. Então, se é aplicativo móvel, design, design local ou qualquer layout que você está desenhando ou qualquer coisa, não tente. Dedo, um, fique com medo. Que você não pode desenhar é você não pode usar lápis e papel. Basta ir lá fora, pegar um lápis e um papel, e começar a desenhar seus layouts, suas idéias e este é o primeiro passo. Ok, então eu vou mostrar a vocês algumas técnicas sobre Harto gerar idéias diferentes de uma idéia. Ok, então vamos começar a isso. Depois de terminar com caneta e lápis, você vai criar um quadro de humor ou coletar inspirações. Então, antes de iniciar qualquer projeto, você precisa do dedo do pé obter algumas idéias de outros projetos. Então este é outro passo para as tábuas de humor. Você pode usar um site chamado Nice Start com. Vou mostrar-lhe apenas um vislumbre disso. Ok, então aqui você pode ver que este é um quadro de humor que eu já mostrei anteriormente nas lições anteriores . É assim que eu quero que este projeto seja destruído. Quero um estilo Ford como este. Quero alguns itens em destaque como este. Eu não posso. Esta é a do área do rodapé. Estas são as cores que eu quero. É assim que eu quero ter um botão. E eu realmente amo essa parte de roxo e azul. Então esta é a direção em que eu quero ir. Então, antes de iniciar qualquer projeto tentou criar um quadro de humor, esboços, esboços que você também pode criar inclui esboços neste. De qualquer forma, existem outras coisas, como valores de marca. O que? Que direção você vai seguir Se os valores da sua marca serão atentos, confiáveis, confiáveis, criativos ou qualquer outra coisa. Vai ser divertido, sério, apenas capaz ou confiar para algo assim. Então o seu design vai refletir que também, aqui temos outro dragline do negócio. Estamos ajudando as pequenas empresas a cantar conosco. Então isso é outra coisa de qualquer maneira, então é assim que você vai criar um dedo mais prancha, tirar a equipe de fora do seu projeto? O maior erro que eu já vi muitos designers que eles cometem é que eles não tentam contratar alguém ou eles não tentam consultar alguém. Então, sempre que você começa um projeto, quando você está indo para obter idéias borda de uma mente. Então tente pegar emprestado em mente. Pode perguntar à sua esposa. Você pode perguntar ao seu amigo dedo do pé, subir, ficar, sentar com você e cérebros tempestade em algumas idéias, você pode obter suas idéias, suas opiniões. Então uma mente duas mentes são melhores do que uma mente. Então, sempre que você incluir alguém, seu pai, mãe, seu porquê para qualquer um, mesmo eles não estão relacionados ao design, você pode adicioná-los porque você está projetando para os usuários finais as pessoas ao seu redor. Então tente consultar seus filhos. Suas filhas ou seus amigos são que o que você acha sobre isso? Qual é a sua ideia? Tente desenhá-lo para que ele sempre irá ajudá-lo a obter mais idéias. E em sua técnica é a lista de mapeamento mental fora de idéias. Então, por exemplo, se eu estou criando nossas roupas de crianças, você pode dizer logotipo ou branding. Então o que eu vou tentar fazer é e quais direções eu posso ir com. Então, à esquerda, você pode ver que eu tenho a sensação de tirar as roupas do garoto então as crianças são muito delicadas e elas como flores. Então vou tentar usar a sensação de conforto, cuidado e especial. Então essas palavras chave artística que podem ser usadas para obter mais ideias. Por outro lado, se eu for para o desenho, por exemplo, por exemplo, se eu ver que as crianças normalmente Dravid linhas muito irregulares, suas formas são muito na maioria das pessoas desenhadas sobre sua família sobre os diferentes Animais fofos. Além disso, podemos desenhar flores diferentes. Eso todos esses conceitos podem ser usados na obtenção das idéias de marca para a roupa deste garoto, então você também pode ir em um monte de direções. Você pode criar mais Nords como aqui temos desenhar e sentir. Se você tiver outra coisa, como ou talvez princesa. Por exemplo, se você está projetando para meninas, cérebro ou crianças pequenas, você pode ir para Princesa e Príncipe algo assim. Talvez esta seja outra direção. Então é assim que vocês, homens, meu mapa mental, listam ideias e geram esboços e desenhos diferentes sobre essas ideias. Então, uma vez que você desenha estes, você está indo para o pé. Basta trabalhar em um ou poucos deles para obter a direção. Então, para definir a direção que você pode selecionar apenas um deles são para fora deles. Então comecem as vossas ideias, está bem? Agora há uma ideia em que eu pensei muito sobre isso, e é assim que nós geramos várias áreas a partir de uma única área. Então, por exemplo, eu criei este logotipo esta gota como, por exemplo, economizar água jejum que eu posso fazer é o que eu posso fazer com ele. Eu posso girá-lo. Consigo espremer este símbolo. Eu posso combinar e símbolos diferentes com ele. Por exemplo, posso combinar uma mão com o símbolo para que diga que economiza água, ou posso mostrar a gripe fora de ordem, hum, nela. Ok, então há e várias idéias. Mas o que você vai fazer é que você vai tomar uma forma simples ou uma única idéia e tentar aplicar todos esses efeitos diferentes sobre ela de forma diferente. Você está tentando girá-lo. Você tenta duplicá-lo. Você tenta multiplicá-lo. Seu dedo do pé inclinou. Você tenta fluir. Você tenta esticá-lo. Você tenta ocultar diferentes seções dele, e você tenta combiná-lo com diferentes, mais formas ou uma idéia diferente. Por exemplo, um deles é a água quando é seguro, então economizando você pode mostrar uma mão. Você pode mostrar o fosso de uma criança que a gota de água está pingando em sua boca. Algo assim. Então é assim que você cria ideias diferentes. Tente dedo do pé, comece a partir de uma única idéia e tente aplicar todas essas coisas diferentes sobre ele, e você terá um monte de idéias. 11. Exemplos de ideias: - Não. Eu vou explicar tudo o que você aprendeu com isso. Só uma ideia simples. Então o que eu fiz aqui é que eu estou, por exemplo, projetando um logotipo para a sociedade de habitação ou talvez alguns imóveis, e tudo bem, então você pode ver no fundo se você ver o quê? Aqui. Eu tenho algumas idéias mente mapeado casa e casa. Ah, eu que poderia ser um ninho porque indo para a idéia do pássaro, poderia ser um prédio ou apartamento, e poderia ser uma tenda para morar. E poderia ser um coração se fôssemos um pouco velhos tempos. Ou talvez algo assim. Então, a partir de todas essas idéias, eu tentei fazer esboços diferentes ou aqui Ei, como você pode ver, eu combinei o dedo do pé, hum, coisas. Um é dext e o outro é a forma. Então foi isso que eu disse para tentar combinar duas coisas. Então esta é uma combinação fora do lado esquerdo, você pode ver que eu escrevi multiplicar. Então eu tenho usado casas e as fiz olhar juntas, conectadas com laços ou algo assim. Então isso está se multiplicando. Então, duas casas, depois temos este ninho. Você pode ver duas áreas por aqui, duas naves diferentes e dois estilos diferentes. Um é este ninho de pássaros, e este parece um pouco mais do que uma casa s. Então eu vou descartar essa idéia no final. Certo, então aqui temos esconderijos e mostrando áreas diferentes. São duas seções. Deixe-me mostrar-lhe esses dois que você pode ver aqui eu escondi a parte inferior da casa. Mas você pode ver apenas olhando para essas formas. Sua mente vai completar isso. Esta é a casa da mesma forma aqui, isto é novamente eu estou mostrando e escondendo algumas áreas fora desta casa, adicionando mais uma no topo. Podemos refinar isso no final no Adobe Illustrator. Algum outro software? Certo, de novo, aqui temos as ideias do apartamento. Aqui temos um apartamento com janelas diferentes, e aqui temos uma versão simplificada. Aqui temos um apartamento com janelas diferentes, Então você também pode usar simplesmente luta, técnica, técnica, dedo do pé, simplificar diferentes formas. Por exemplo, eu só uso um retângulo para as janelas em vez de mostrar retângulos menores porque em tamanhos menores, isso vai ficar melhor. Então é assim que você gera várias ideias a partir de uma única ideia. Aqui está um estudo de caso. Eu realmente desenhei logotipos para este chimpanzé e Ah, e você pode ver o chimpanzé. Tudo embora no chimpanzé é basicamente alcançar Benzie. Não sei bem o que significa, mas o meu cliente diz que queremos algo assim. Então você pode ver aqui eu tento dedo do pé combinado para moldar. Então eles estavam basicamente economizando dinheiro lá. Você pode dizer sobre a compra de casas, então esta forma de casa e este sinal de moeda de brilho libra é para economizar. Aqui está apenas o contorno virgem e cabelos na iteração de design Para este aqui eu posso você pode ver que eu rodei e criei o nosso você pode dizer perspectiva, perspectiva fora disso. Então aqui você pode ver isso também está anexado academia House e este bar na verdade o verde ou laranja. Ele está agindo como a linha central fora da borda. E então deixe-me mostrar-lhe mais algumas idéias Aqui você pode ver outra idéia. Na verdade, eu não gosto desse lado esquerdo que está indo muito para cima. Acho que deveria ser um pouco menor. De qualquer forma, estas são mais duas ideias e é assim que se parece. Ah, um guarda. Estas são poucas apresentações sobre. Eles realmente importam. Sempre que você apresentar, você vai apresentá-lo assim. Então é assim que você pode obter idéias diferentes. Este é um método de combinação aqui que eu combinei e moldar uma casa. Isto é perspectiva. Eu tento girá-lo, iterado uma tentativa de criar um efeito de TV ou perspectiva. Ver fora que o cabelo da casa é novamente combinação fora. Duas ideias, ideias diferentes. É assim que se obtém ideias diferentes. Permitam-me que vos mostre mais alguns exemplos aqui. Você pode ver que isso é que eu tenho de 99 projetos, e aqui você pode ver a empresa imobiliária. E novamente ele está se multiplicando usando diferentes formas de multiplicação. Três navios novamente multiplicam dois lados diferentes de uma casa mostrando Ah, isso é novamente. Não tenho certeza. O que é isso? De qualquer forma, isso parece criar fluxo usando fluxo. Este é um uso de chão neste grupo de investidores início em casa. E ah, então nós temos este gerenciamento de propriedade Peterson projetado por um aquoso e você pode ver novamente. É uma combinação de duas ideias. Um é estes edifícios e o outro é esta casa esta é novamente casa. Esta é uma perspectiva. Mais você pode ver de novo. Ele está usando para formas s e esta seção aqui. Isto parece uma casa de novo. Multiplicar. Gostei mesmo. esconderijos são o fundo. Só mostrando a parte de cima da casa. E, na verdade, faz sentido que esta seja a casa. Gosto mesmo deste logótipo. Na verdade, eu os uso do Google. Você pode, então eu não tenho certeza do que são diferentes. Você pode dizer autores fora desses projetos, mas realmente bons projetos apenas para mostrar o que ele realmente significa. Então é assim que você pode obter idéias diferentes e você pode gerar várias idéias a partir de uma única idéia. Espero que você tenha gostado desta lição e um guarda e corte um monte de idéias para criar alguns desenhos olhando e idéias sobre logotipos e desenhos. Espero que tenha aprendido muito. Vamos passar para a próxima lição. 12. Tons do seu design: Cada design tem uma equipe um tom e há uma direção, direção específica e não fazer e tema fora de cada design. Portanto, seja o design de aplicativos móveis, seja um design de site ou um projeto de tendência, você precisa cuidar do tom do seu design. Então, há muitos tons. Eu vi alguns fora meus alunos me perguntando que tentar criar algo sobre isso para que você possa ver seu design poderia ser mescalina. Femi nove Childish parece clássico e também pode olhar Morgan, ou pode parecer saudável e pode parecer desportivo. Então, estes são tons diferentes dos seus designs. Eu também falei sobre isso em meus tribunais de tipografia, fora de diferentes vozes e tons de suas fontes. De qualquer forma, vou mostrar-lhe algumas técnicas. Então há pedra e há emoções. Então, o que? Na verdade, seu design está refletindo, então ou pode ser inspirador ou reflete liberdade ou é muito sério. Qual é a emoção? É uma exibição para o seu cliente ou o usuário. Nevada Leach parece muito confiável. Importa isso. Isso mostra que esta é uma organização muito poderosa. Oh, é muito divertido ou é muito criativo. Portanto, estas são reflexões diferentes que estão vindo do seu projetado. Então, a sintonia fora do seu design realmente depende do negócio e dos usuários. Então, se, por exemplo, você está projetando para ataques mentirosos eso advogados de ou imposto de Então quais são as emoções ou água que osso ou qual é a direção que você quer ir? Então deve ser masculino. Deve ser um projeto sério. Deve ser apenas para o e também seria convidativo. Por exemplo, quero que meus usuários tentem entrar em contato comigo. Então eu não quero que seja muito sério que eles não tentem entrar em contato comigo ou eles não tentem preencher meu formulário. Além disso, queremos mostrar autoridade que conhecemos este negócio e temos o poder e temos a nomeação e podemos resolver o seu problema. Então todas essas coisas serão refletidas nesse projeto. Deixe-me mostrar alguns exemplos para que possamos colocar essas idéias mais penetradas em nossos cérebros minúsculos . Agora, este é um exemplo, e você pode ver o tom e a equipe fora. Todo o design é baseado em papel. Então, por que isso? Porque este plágio Avenger waas basicamente um plug in e foi na verdade para escritores de conteúdo , e protege o conteúdo para que você possa ver a força usada sobre o cabelo e todo este adesivos em papel diferente. Estes clipes em você pode ver estes Step Lear ou clipes. Estes estão todos mostrando o conteúdo para que você possa ver que há mais algumas dicas aqui que todo este design é baseado em papel. Então, os escritores de conteúdo estão ultimamente para papel porque o direito seu conteúdo primeiro no papel, principalmente e S O, Este é o Este é o meu design. Eu acho que é antigo, mas eu fiz isso por um Facebook e fui outro. Você pode ver outro projeto para o mesmo plágio em risco É este que você pode ver aqui Nós temos diferentes formas e flechas diferentes. Isto é tudo escrito à mão como uma força rabiscada. Então você pode ver isso é como toda a direção fora do seu projeto pode mudar quando a equipe o logotipo e tudo está alegadamente morto. Então é assim que você pode ver que eu estou usando todas as cores cores quase semelhantes daqui verde. Esta parte polonesa ou esta cor vermelha púrpura neste tabuleiro aqui para mostrar alguma importância ou algo assim. De qualquer forma, então este é outro projeto. Deixa-me mostrar-te mais um anúncio. Este é um anúncio para a saúde variada dos EUA, e você pode ver como todo esse design foi definido. E o tifo é que eles têm você verão? Isto parece muito suavizante. Afetar guia amigável coluna para o verão. Então isso é sério, submarino Bert, e isso é agradável. E a mesma coisa que você pode ver que você vai ouvir. As cores são quase as mesmas deste logotipo da Veritas Health. E o golpe da imagem é muito calmante. Então toda a direção é calma e um efeito calmante e um efeito confiável para o usuário. Então você pode ver que a cor azul inicia confiança e é usado principalmente em confiança, confiança e 50 e algo assim. Aqui está um dos meus projetos que fiz para um cliente e acho que avisei isso. Não sou, não sou. Não me lembro, mas acho que quero esse concurso. De qualquer forma, você pode ver que isso é sobre Trader Plaza, e toda a equipe é, uh, muito elegante. Você pode ver que esta imagem foi usada apenas para obter o contexto claro. Então isso é sobre negócios ou investimento. Então você pode ver uma pessoa usando este jornal escrito muito grande aqui negócio. E também temos este vídeo aqui voz o 92º vídeo e você pode ver também esta seleção quatro este tipo de seleção. É sério. Portanto, não é muito divertido relacionado. Você pode ver por aqui. Este é todo o projeto, a direção fora de seu design é um pouco plana ícones, mas não tão plana. Mas você pode ver clareza vestida e ah, é assim que eu criei toda essa equipe. Verde é segurança. Então, se eu estou investindo e algo que eu possa estar procurando por segurança, algo assim. Você pode ver como toda esta seção foi colocada para fora. Então você pode ver. Foi assim que projetei essaequipe toda e a direção que você pode ver usando essas duas cores vermelho e verde. Foi assim que projetei essa Ah, laranja significa excitação e verde significa segurança. Então é assim que toda esta página tem sido colocada para fora e esta é uma farra de empréstimos. Você pode ver que este design é totalmente diferente de outros projetos que eu mostrei a você que havia texto baseado ou baseado em papel, mas esta equipe não é baseado em papel. Então é assim que essas direções e emoções diferentes e essas diferentes, ah , , desprendem projetos que temos que é tudo para esta lição. Espero que tenham gostado desta lição. Se você tem alguma pergunta para me fazer, vamos para a próxima lição. 13. Escala de importância em seu design: Outra coisa, que eu vi muitos designers fazendo errado, é que eles não sabem qual é a escala fora de importância em qualquer design? Não, por quê? Isso é muito importante porque existem coisas diferentes que são importantes e que são diferentes em diferentes projetos. Situações. Por exemplo, em uma revista ao ar, a importância pode ser dada ao assunto principal, ou talvez toe a idéia principal porque é senhora para vender algo. Mas quando você está projetando alguma página de destino, a escala de importância pode ser dada a outra coisa. Então, quais são as regras básicas? Então, se você quiser dar algo escala, então escala significa que essa será a parte mais dominante ou a maior parte. Deixe-o ir os outros itens em seu design. Então, a primeira coisa é que coisas importantes que são importantes em seu design, seja imposto de cópia , seja depoimentos , seja algum logotipo, seja algum vídeo, você quer destacar essa coisa para que ele vai ser maior em relação aos outros elementos relacionados ou em torno dele. A segunda coisa é que ele pode ser mais brilhante, ou talvez ele tem cor diferente do resto fora dos itens na praia. Então este é um conceito muito importante, escala fora da importância. Mais uma coisa é que não deve haver uma luta entre várias coisas importantes. Portanto, a escala importante de importância deve ser uma habilidade de cima para baixo ou, mais importante, para menos importante. Portanto, tenha isso em mente que todas as coisas em seu design não são importantes. Deve haver uma escala. Você precisa construir uma escala que essa coisa é a mais importante do que esta aqui , e esta é a menos importante. Então aqui está outra técnica que eu normalmente uso e usado principalmente em páginas de destino. Então, o que você precisa fazer é o conteúdo mais importante. Quer se trate de cópia ou se você deseja enviar a mensagem fora do seu site, você deseja movê-la para o topo do seu design. Então é por isso que havia um conceito acima do enganado. Então Ford significa que 700 pixels são, às vezes, 800 pixels. O Ford estava na verdade em uma altura de página, que era, você sabe, você precisa do dedo do pé, puxá-lo, você vai ver o próximo conteúdo. Então isso é grande, basicamente o conceito de que se você tem algo importante que você quer o seu, usuário do pé. Visualize-o instantaneamente, por isso deve estar no topo. E é ele deve estar chamando a atenção do usuário instantaneamente e ele deve ser movido para o topo na ordem fora escala de importância. Mais uma técnica é se você quiser dar algo importância que você também pode usar pode confiar. Você aprenderá muito sobre o contraste na próxima seção, então vamos deixá-lo lá. Mas isso significa que deve ser diferente do resto fora dos itens em seu design. Se você já leu qualquer jornal e no artigo blawg, você viu que os títulos são muito maiores e eles são facilmente digitalizáveis e eles maiores letra toe todos os impostos diferentes e outros elementos na página porque eles estão indo para chamar a atenção. Eles são o esporte, eles são mais fáceis de apoiar o esporte, e eles são feitos para ser maior porque os usuários estão indo para digitalizar. Assim é. Facilita a digitalização de tudo. Então esta é outra maneira de fazer isso e mais uma coisa. Meu curso de tipografia tem uma escala para sua escala tipográfica de tipografia, tamanhos diferentes, que está novamente relacionada a este tópico, que é escala fora de importância. Então, se você quiser aprender mais sobre tipografia, você pode olhar para esse curso. Da mesma forma, no meu curso de tipografia, falei sobre escalas de tipografia, que é que este tamanho de texto, por exemplo, 16 pixels são 12 pontos. Vai ser para o meu imposto e 56 pontos ou 56 porcos. Vou usar para o meu maior título. Portanto, este é o nível de importância no texto. Então vamos usar a tipografia. As balanças no dedo do pé do seu design ilustram esta escala de importância e também mais uma coisa. Se você quiser saber mais sobre tipografia, escalas e tipografia em geral, você pode dar uma olhada na minha tipografia para designers e desenvolvedores escolas. Este é um assunto muito importante, então eu não quero falar sobre isso de cabeça. Então eu espero que você tenha aprendido a usar e como dedo do pé o que é realmente escala de importância. Vou mostrar-vos exemplos diferentes. Então deixe-me mostrar-lhe alguns exemplos e para torná-lo dedo do pé tornar este conceito mais digerível. Então aqui está o meu projeto para a minha própria terra. Ux I d cartão. Este é o meu site e você pode ver que esta é a frente e a parte de trás fora do cartão que eu projetei cartão de visita e e aqui você pode ver na parte da frente você pode ver o que é a coisa mais importante. É a imagem da marca. Então eu queria Toby meu logotipo o maior aqui. Então, no segundo em que você pode ver a segunda coisa que você vai notar neste projeto vai ser Você está aprendendo? E depois há a parte do Senhor, que é que eu quero que o usuário leia no final, que é o site. Da mesma forma, se você olhar para o outro lado e você pode ver que o cabelo minhas médias mais área e a maioria das cores são usadas no top oito. Aqui você pode ver o que aqui, onde o texto é aprendido, riel design e habilidades de corte e melhorar o seu dólar. Mas, no começo, queria que o Toby mostrasse como se faz de acordo, mas acho que é. Será um curso muito longo, claro. Então, eu fiz isso. Eu me concentrei no design de qualquer maneira, então você pode ver a área mais dominante aqui. Este é um do que este? Você é excitante de novo. Este é o logótipo. A versão mais simples da minha versão menor local. E então meu contato é para que você possa ver aqui. Eu quero dar a mensagem ao usuário que eu quero que você faça isso ou aprenda isso comigo. Então é assim que a escala da importância é. Na verdade, você pode ver usado se você notou aqui você pode ver o tamanho fora. O texto também é maior. Também o espaço que está tirando todo o tamanho, o tamanho fora. Este elemento é maior do que todos os outros elementos ao seu redor. Então é assim que a escala de importância é usada. Então você não pode fazer tudo colorido. Se eu fizer estes, você pode dizer este texto abaixo e também este imposto abaixo. Er esta fronteira, muito colorido do que o usuário do que a escala de importância, está realmente indo para mudar. Portanto, não será uma escala de importância. Mas será uma luta contra a importância entre dois elementos. Então é assim que você usa escala de importância. Deixe-me mostrar-lhe mais um exemplo. Então aqui está outro exemplo, que é, Ah, página de destino, que eu projetei recentemente e você pode ver aqui a seção mais proeminente ou área mais proeminente. É este um lar off acessível e fácil de usar assinaturas digitais e geradores de captura. Além disso, você pode ver a diferença entre os tamanhos deste texto abaixo e este título é demais se você se lembrar corretamente ou com precisão. Minhas últimas lições foram sobre a diferença de escala que está indo dedo do pé criar contraste , tão diferente entre tamanhos fora distração este Texas muito. É por isso que eles estão com ótima aparência. Eles têm muito contraste. Qualquer esperança, então você pode ver que a segunda área mais proeminente é esta aqui. Então, se eu acho com precisão é que esta seção que é e obter liberdade ou literatura agora está realmente recebendo mais atenção porque ele tem outra cor, que é esta cidade e chamada à ação. Mas, basicamente, você pode ver que esta é uma página de destino e o propósito fora da página de destino é que você quer que o usuário se inscreva para a liberdade. Então eu quero educar o usuário e, em seguida, quero me inscrever. Então este é o meu verdadeiro objetivo neste projeto. Então, para seguir esse objetivo, eu quero usar a escala de importância. Eu quero esses itens. Esses dois itens devem ser mais dominantes do que outros? Então é assim que se faz isso. Em segundo lugar, se você olhar para esta área o contraste entre o fundo que é muito escuro, e esta esta cor de primeiro plano pontes a cor pilhas é demais. Então, isso também está criando mais contraste toe obter a atenção fora do usuário. Então, se olharmos novamente para essas áreas, você pode ver que elas são igualmente importantes. Então, tudo é igual. Da mesma forma, estes são igualmente importantes. Eles são, na verdade, repetição. Vamos falar sobre isso na próxima seção. E ah, se olharmos para esta seção, eu quero que este vídeo seja visto e você pode ver que é mais importante. Então, a escala de importância mudou para este. É maior. Dentro. Está a ocupar quase 70% do espaço. Hum, então eles são todos quase importantes. Quero os mais importantes, Toby Big Branch, como arte alta. E eles são um grande obstáculo. Então eu queria movê-lo para o topo. Então veja, você pode ver isso é como realmente fazemos todas essas escalas de importância. É assim que o usamos. Da mesma forma Outro exemplo é que eu projetei este Ah, passado para a empresa médica que waas i u k médicos avaliação aplicativo e você pode ver ou ouvir eu combinei três conceitos que você pode ter ouvido na minha última lição gerando idéias caixa documento e Dr. E agora você pode ver combinando esses três símbolos vai fazer este ícone e você pode ver até mesmo neste ícone, o elemento mais dominante é o elemento mais importante é este sinal Plus no meio desta caixa para que você possa ver aqui eu tenho a sua escala de importância, destacando este meio. Espero que não tenha aprendido muito sobre a importância. E estes são exemplos suficientes. Se quiser saber mais, saiba mais. Se você quiser me perguntar alguma coisa você pode me perguntar Vamos passar para a próxima lição 14. Proximidade no design: o caminho. Um dos principais conceitos em design é o principal fora da proximidade. Agora há Waas, um cientista ou psicólogo chamado Get Start, e estes e este é um de seus diretores. Ele pesquisou sobre psicologia humana da percepção, e um deles é agrupamento. Isso é usado muito no design, por isso, se você fazê-lo ou usá-lo em um sentido diferente do que ele não está indo dedo do pé, obter uma exibição de informações muito boa ou agradável ou o design, então certifique-se de que você está usando com precisão. Não, você pode ver na parte inferior você vê diferentes essas seções, e você pode ver que você pode ver claramente que essas duas seções estão separadas ou diferentes, mesmo que eles são os mesmos círculos. Então eles são todos círculos, mas eles são uma parte ou eles não são considerados um grupo porque há duas razões por trás disso. número um é a distância, o espaçamento. Você pode ver que estes estão, ah, muito longe dos vermelhos. Os azuis estão longe dos vermelhos. Segunda diferença entre eles é uma cor diferente, para que você possa ver este princípio fora de proximidade ou agrupamento este princípio fora de proximidade deve ser aplicado com precisão. Então, sempre que você estiver projetando, você pode usar itens separados do dedo do pé do espaço em branco. Você pode usar cores para separar itens. Você pode usar formas diferentes para separar itens. Vamos aprender mais sobre proximidade. Há outra coisa que você precisa ter em mente. Quando você está agrupando itens em seu design que eles devem estar relacionados entre si , eles devem estar fora de informações semelhantes. Assim, informações similares relacionadas a informações que devem ir juntas devem ir juntas. Não tente misturar todos os itens diferentes ou colocá-los em apenas um espaço e dizer, Oh, Oh, eu usei proximidade porque todas as informações devem estar em um só lugar. Ok, então que agrupar o seu lixo seu Chungking fora de informações, seções diferentes. Eles devem fazer sentido. Então também é chamado de fragmentação ou informação, e é um fora do básico ou, eu acho, eu acho, grandes conceitos de você um design porque você tem dedo do pé e criar ah, muito fora. Há muita informação que tem propósitos diferentes. Eso você precisa toe agrupá-los juntos em pedaços diferentes. Agora, aqui estão algumas técnicas que você pode usar enquanto você está projetando para criar lixo diferente, ou grupos ou seções número um é tentar usar espaço em branco. Então agora você pode ver se você olhar para este slide os olhos da parte superior separados por uma linha 10 para o fundo deste slide. Então, a parte inferior ou comida ou fora do slide está fazendo seus projetos egreteau incrível por Mohammed s e penetrante. E a parte superior é o conteúdo. Então você pode ver que eu estou usando o espaço branco do cabelo para criar diferentes seções. Além disso, eu estou usando esta linha junto com este espaço em branco para fazer sentido que esta é separada e a seção superior é separada. A segunda coisa é que você precisa limpar seções diferentes, então as seções são novamente. Você pode criar seções usando espaço esposa ou cores diferentes. Seções também é uma coisa semelhante, como criar lixo diferente fora de informação. Então, na verdade, você está criando diferentes seções usando espaço em branco, usando cores, usando linhas usando formas diferentes. Por exemplo, você pode tentar usar o dedo do pé Ah, retangular , ou talvez ah, forma hexagonal ou algo assim para separar a parte superior por um com uma porção abaixo. Então pode haver muitas coisas que você pode usar sombra. Você pode usar sombras lá. Você pode usar um monte de sombra nas partes superiores que separaram que ele está acima desta seção, que está abaixo dela. Então é assim que você vai criar diferentes grupos e pedaços. Você também pode usar linhas. Você também pode usar bordas para criar a seção ou separar essa seção. Então, há muitas maneiras que eu vou mostrar para vocês na próxima lição. Alguns exemplos, alguns projetos. Portanto, este conceito é esclarecido ou esses conceitos e obter mais penetrado em suas mentes porque isso é muito importante. Isso é muito, muito importante que eu tenha visto muitos designers. Estou fazendo isso errado em muitos lugares, então vamos ver alguns exemplos, então vamos passar para a próxima lição. 15. Exemplos de proximidade: A coisa é o primeiro exemplo que vou mostrar a vocês. Este é um redesenho de um cartão. O logotipo não foi desenhado por mim. Mas eu desenhei as cartas porque os carros antigos eram muito você pode dizer muito desatualizado. Além disso, dar alguns toques dedo do pé este logotipo como este ah dourado, borda em torno dele em torno da forma fora da linha de qualquer maneira. Ok, então agora você pode ver no front off descartar no fundo arma,gestão de riqueza, gestão de riqueza soluções de gestão de riqueza privada. Você pode ver que este é o slogan e o que esta empresa faz e o logotipo. Então mantive toda essa informação no bloco de fundos para que eles se juntassem, então os tornei mais próximos um do outro lado. Você pode ver na parte de trás todas as informações estão em dívida com o contato. Então esta é a arma L. A. A. Marty. Este é o nome presidente e CEO do que o número de telefone e fax. Além disso, você pode ver no canto inferior esquerdo eu separei o e-mail. Andi, eu acho que os e-mails devem ser talvez apenas as informações de contato, mas eu acho que ele deve ir separado porque é uma carta toe comunicação Elektronik . Você também pode, meu eu também pode listado aqui seu site mundo livre Eso Isso é como eu projetei este carro. Então você pode ver que você pode ter visto um monte de cartões de visita e você pode ver todas as informações de contato. O nome sempre vai junto em uma direção e é agrupado em alguma área. Então é assim que você usa seções de lixo ou agrupamento em seu design. Vamos ver outro exemplo. Este é um aplicativo até agora smarts fora IAB telas para fora deles. Eu projetei recentemente e você pode ver se você olhar para ele aqui, você pode ver o Chungking tem é principalmente usado em você, um design principalmente aplicativo design e sites. Porque você pode ver que há um monte de coisas. Há um monte de controles acontecendo. Há um ícone muito fora. Há muita informação, muita interatividade. Então você pode ver a seção superior aqui, que é a barra de status e são diferentes. Os ícones fazem ações diferentes do que temos nesta área. Esta seção que está relacionada com a informação e que é sobre o sofá. Então este nome até agora. Título status diferente fora do até agora se ele está conectado seguro ou algo assim. Esta é a informação sobre o sofá e na parte inferior você pode ver esta seção esta é uma seção separada e estamos usando alguma sombra de luz que este ah barra pai adaptável é realmente separado desta seção. Além disso, a cor desta. A cor Bagram é diferente desta. Isto é, eu acho, por isso Isso é um pouco graça branco para avermelhado três branco. Da mesma forma, se você olhar para aqui, este botão mola em é realmente tem um monte de sombras. Então mostra que está separado do fundo. É elevado a partir do fundo e é diferente do plano de fundo. E agora se você olhar para esta tela se pressionarmos esta primavera na Grã-Bretanha 12345 itens de menu vão aparecer. Então, quando você pressiona este botão, esses controles vão aparecer e eles estão mais perto deste botão porque eles estão todos relacionados uns com os outros. Então eles se agruparam. Nós os agrupámos juntos. Da mesma forma, se você olhar para esta tela aqui nós temos na tela esquerda. Você pode ver que eu usei esta pequena linha aqui. Por quê? Usei-o para separar a parte superior para a parte inferior. Agora, se você olhar de perto, a seção superior é dedo selecionar diferentes sementes no sofá inteligente e a seção Borden é realmente todas as configurações que você pode fazer com o assento. Então é assim que estou usando lixo. Você pode ver todos os controles que estão relacionados aos assentos estão na mesma área e também na mesma seção. Então eu criei na verdade 123 e quatro seções fora desta tela. parte inferior é para controles de tabulação e, em seguida, a parte superior é realmente o título Apt. Em seguida, a segunda seção é até agora Nome e sementes diferentes. Então esta terceira seção é realmente todos os controles mais tarde também até agora e sementes. Então você pode ver isso é como você realmente usa lixo e agrupamento layout do dedo do pé, suas telas, seus projetos, suas páginas de destino, seus sites Além disso, você pode ver do outro lado do lado direito você pode ver esta pia música. Isto é, você pode dizer a caixa de conformação pop-up e cabelos que você pode ver a seção superior, que é apenas a informação, é separada da parte inferior, que é área interativa ou os botões por linhas simples. Além disso, a cor é diferente, então você pode ver que existem. Eles estão usando linhas para criar seções e também estão usando cores. Então é assim que você usa seu grupo. Itens diferentes. Você pula diferentes peças de informação e cria designs incríveis. Se você tem alguma pergunta para me fazer a seguir, vá para a próxima dentro. 16. Alinhamento no design: aqui está outro princípio fora do design, que é chamado de alinhamento. Então, por que o alinhamento é realmente tão importante? Porque somos todos humanos e isso é construído em nossa natureza. Ou é em nossa psicologia natural, psicologia humana que amamos simetria, então algo. Então está alinhado. Então, outra coisa. Nós gostamos quando algo está organizado em Ah, uma simetria em forma simétrica em um retângulo em um círculo. Nós amamos que algo é irregular ou não em alinhamento. Oh, você colocou em coisas aqui e ali em seu projeto. Não vamos gostar. Portanto, isto é muito importante. E eu vi muitos designers fazendo o alinhamento errado. Eles não sabem como alinhar itens diferentes. E quando você tem ah, bom alinhamento em seu design, ele vai parecer equilibrado, então isso é muito importante. Agora vamos falar sobre equilíbrio, simetria e alinhamento um pouco mais fez. A primeira coisa é que, se você está tentando centralizar, alinhe seu texto, você está alinhando seus botões. Você está alinhando tudo em seu design versus seus projetos onde você está usando alinhamento de borda ou lá no lado esquerdo como para o alinhamento de borda ou o lado direito, modo que o alinhamento no alinhamento borda a borda vai ganhar. Então, toda vez que você tentar o dedo do pé, alinhe seu texto no lado esquerdo ou no lado direito, eles vão parecer mais poderosos do que o layout centrado de alinhamento de linha A. Portanto, certifique-se de que você tenta alinhar seu dext e seus títulos e suas imagens em uma linha invisível, então tenha isso em mente. Da mesma forma, se você pode usar formas, você pode usar especiais. Você pode repetir o dedo do pé de alinhamento, criar simetria. Então, se algo é feito de forma semelhante na coluna esquerda do seu design no lado esquerdo do seu design, você pode repetir isso e criar um padrão semelhante de patrono no lado direito. Então isso vai parecer mais equilibrado. Então tente criar padrões semelhantes. Formas semelhantes, layouts semelhantes e repeti-los. Usado repetição dedo do pé uma linha e equilibrar o seu design. Tente criar SMA tratada. Outro conceito é o alinhamento visual de leitura, que é que você está indo para alinhar suas coisas na base fora de seu visual. Espere. Então, como é pesado. Então, se você olhar para esses dois exemplos na parte inferior, você pode ver que o vermelho é uma forma irregular entre diferentes, formas semelhantes, que são quais são as azuis. Então, na verdade, eu usei um cálculo matemático usando a loja de fotos e tento alinhá-lo no centro aqui, você pode ver o espaçamento entre o topo parece difícil. Então, se você olhar de perto para esta seção vermelha a forma vermelha você pode ver lá aquele círculo no lado direito e no lado esquerdo que eles não estão tendo a quantidade igual de espaço. Além disso, você pode ver que parece que é mais no movimento no topo. E é mais pesado no topo do que no fundo, então você pode ver que isso vai acontecer. Isso é chamado de alinhamento de peso visual. Então você vai usar seus olhos, seus olhos de designers, e você vai alinhá-lo usando não apenas você não não usar o tapete, mas ignorá-lo. Então você vai usar um pouco fora do seu cérebro do coração e você vai alinhá-lo melhor. Então agora você pode ver no fundo aqui. Tentei alinhar o espaçamento entre eles. Usando meus olhos são alinhamento de peso visual e você pode ver que eles estão olhando mais equilibrado. Além disso, eu tentei tentar mover esta seção vermelha dele para baixo para que pareça mais equilibrada do que antes. Então este é outro concerto, que é chamado de Alinhamento visual variado. Também é mais tarde para Smith Tree and Balance, e espero que você não tenha aprendido muito sobre simetria e alinhamento. Vamos ver alguns exemplos. Vamos passar para a próxima lição. 17. Exemplos de alinhamento em design: então eu vou mostrar alguns dos exemplos de alinhamento e simetria que aprendemos na última lição. E aqui estão alguns exemplos. Então, se você olhar para este cartão, que eu redesenhei, você pode ver aqui no lado direito, você vê que este nome, título e número de telefone na verdade, eles estão alinhados com uma linha invisível aqui em o lado direito, então eles estão todos alinhados em uma linha. Da mesma forma, se você olhar para este, este também está alinhado dedo do pé uma linha imaginária aqui no lado esquerdo e este espaço e este espaço à esquerda e à direita. Ambos os espaços são iguais, por isso é usado para criar algum equilíbrio. Da mesma forma, se você olhar ou olhar para ele e a primeira seção de gestão de riqueza arma, soluções de gestão de riqueza privada na frente off cartão distante, você pode ver por que eu alinhei o gerenciamento de cinto de armas com riqueza privada soluções de gestão. Este é um slogan, ou você pode ver o que a empresa faz com o nome da empresa porque ele está indo toe criar uma imagem mais forte do que o centro alinhando esses dois em seguida para que você possa ver, isso é realmente uma simetria. Da mesma forma, no lado esquerdo e no lado direito, eu estou usando o mesmo comprimento fora da mesma barra verde, repetindo a mesma seção dedo alinhar e eles estão alinhados em uma única linha semelhante. Eles estão alinhados. Então este gerenciamento de riqueza de armas está alinhado com essas duas barras verdes à esquerda e à direita, então você pode ver isso é como você vai conseguir algum alinhamento no seu design. Da mesma forma, se você olhar para a arquitetura e o trabalho de todas as arquiteturas e grandes e diferentes arquiteturas, edifícios , casas diferentes, você vai ver muito fora do cemitério. Neles, você pode ver como eles têm usando diferentes formas e como eles estão equilibrando seu design. Há coisas à esquerda e depois à direita. Há coisas que se repetem uma e outra vez, e também você pode ver que elas são. Eles estão alinhados corretamente com algumas linhas imaginárias, ou você pode dizer linhas retas, então eles vão olhar elegante quando eles estão alinhados assim em simetria e usando algum equilíbrio. Aqui está outra imagem de uma igreja, e você pode ver como o alinhamento foi usado. Você pode ver mesmo nos azulejos no chão você pode ver o alinhamento de diferentes seções. Também o alinhamento do cerco e o alinhamento das paredes. E você pode ver os pilares. Tudo está alinhado com algumas regras estritas ou linha estrita, linha imaginária de linhas retas. Então eles estão indo para olhar grande quando eles estão indo toe uso ser usado com algum alinhamento. Deixe-me mostrar-lhe outro exemplo, que é, ah, ah, e comércio e e site de comércio de Creative K A R E um T v de drible. E esta é uma grande agência de design e vocês podem ver que eu vou mostrar a vocês como esse alinhamento tem sido usado e como eles estão colando as linhas retas para criar designs incríveis . Então eu vou toe ir meu para minha loja, e eu vou desenhar algumas linhas aqui, alguns guias para mostrar como ele tem sido usado. Então vamos traçar uma linha aqui nesta área e também sobre a cabeça assim. Então agora você pode ver claramente que esta seção, esta seção inteira está alinhada dedo do pé esta linha azul então é assim que este alinhamento à esquerda tem sido usado. Comentários, preço do título, número de itens em um cartão, até mesmo a parte que eles estão alinhados com uma linha reta. Da mesma forma, aqui, você pode ver essa coleção caseira, essa parada, um, trilha. Foi alinhado a esta imagem. Se você cair, você pode ver de novo. Estas linhas foram alinhadas. A linha esquerda está alinhada com esta imagem. E ah, então é assim que eles estão usando o alinhamento. Então você pode ver agora como toda esta seção, esta seção de produto está sendo alinhada a duas linhas ou aqui. Então certifique-se sempre que você está projetando algo, você está usando o alinhamento adequado e também apropriado, expressando que você pode ver que há muito espaço em branco entre os elementos, mesmo aqui nós estamos aqui e aqui e aqui. Então tenha isso em mente e você vai ser seus projetos vai olhar maior com apenas usando esta técnica de alinhamento que tentou alinhá-lo com uma única linha e ele vai estar olhando grande . Então, tenha isso em mente. Deixe-me mostrar-lhe mais um exemplo. Agora, se você olhar para esta tela que está em Adobe x t. Eu projetei isso. Você pode ver que há na linha imaginária. Se eu clicar aqui e, em seguida, no layout, você pode ver como todo este design tem sido layout. Então está caindo linhas à esquerda e à direita para que você possa ver à esquerda todos esses itens , este fardo, a parada até agora. Título desmontado. , No bar do papai,você pode ver as pilhas. Eles estão todos alinhados a esta linha esquerda. Então você pode ver isso é como eu estou usando o alinhamento em todas essas telas no design de aplicativo móvel e da mesma forma aqui, mesma coisa Acontece não ter sido feito de forma semelhante aqui. Então você pode ver que é assim que você realmente usa alinhamento e alinhamento de linha. Tente ficar com uma linha reta e seus projetos ficarão ótimos. Espero que tenham gostado desta lição. Se você tem alguma pergunta para me fazer, vamos passar para a próxima Ouçam 18. Contraste no design visual: Se você quer ser o maior designer ou o melhor designer, entre outros, a única coisa que você precisa dominar é usar contraste em seus designs. Agora, no mundo do design, acho que o contraste é o rei. Então, se você acha que seus projetos não parecem muito elegantes ou porta eles não estouram, eles não mostram o pop. Na verdade, são os outros Dorsey dizer Uau, este é um grande design. Eu adoro isso. Isso é porque você não usou o contraste corretamente. Agora vou mostrar-te um pouco do vaso. Você pode obter contraste em seu design agora como você pode obter contraste. Portanto, existem muitos tipos diferentes de contraste. Como, por exemplo, se você tem uma coisa muito grande em seu design e uma coisa muito pequena, coisa semelhante. Então eles vão ter um monte de contraste fora do tamanho. Da mesma forma, uma coisa é muito brilhante, muito afiada, e uma é maçante. Então este é o contraste da cor. Então o contraste de forma pode ser tudo. Um quadrado e de repente um fardo é arredondado. Bill Burton. Então este é o contraste fora da nave. Além disso, você pode usar o contraste fora de posicionamento então Se algo é elevado e tem um monte de sombra, ele está em primeiro plano e algo está no fundo. Portanto, é também o contraste de posição. Da mesma forma, você pode usar posição e você pode usar cadeia a posição fora de um elemento de um respeito para o outro para criar algum movimento para criar algum contraste. Então, se você quiser uma ampla semelhança, por exemplo, você está listando quatro ícones ou quatro seções e eles são ah, alinhados com o topo fora lá com o alinhamento superior. Então tudo está alinhado. De repente você move um deles ou para fora deles como 10 pixels acima dos outros dois. Então não, você está criando algum contraste e interessante seu design. Da mesma forma, você pode usar espaço em branco. Você pode usar um monte de lutas base em algum lugar e alguns em algumas porções fora de seu projeto, você pode usar menos. Então, sempre que você usar um monte de espaço em branco em torno de algo, ele vai criar um monte de contraste. Então aqui está um exemplo de contraste com cores que você pode ver ou ele. Temos o meio Vidor Circle, que é branco e preto. Eles têm um monte de contraste entre eles porque eles são totalmente dois lados separados fora das cores. Da mesma forma, no lado direito vermelho, você pode ver vermelho e azul. Eles têm muito contraste. Mas, por outro lado, no lado esquerdo, estamos usando contraste. Não é muito, mas estamos usando algum tom mais escuro de azul e um tom mais claro de então há muitas maneiras que você pode usar o dedo do pé de contraste com o uso de cores. Aqui está o contraste com o tamanho. Você pode ver sobrecarga. Nós e todos esses círculos. Eles são os mesmos lá, mesma cor. Mas o tamanho é diferente. Então, se eu tentar eu estou usando algum texto ocultando ou eu estou usando um parágrafo de texto. Então eu posso alterar. Seu tamanho é muito para criar algum contraste entre o título e o parágrafo. Agora vamos ver alguns exemplos para ilustrar esse conceito de contraste e vê-lo em projetos reais para que você possa ter um pouco mais de compreensão sobre esse conceito de contraste 19. Usando de contrastes propriamente: Deixe-me mostrar-lhe diferentes usos fora do contraste e todo Nós podemos melhorar nossos projetos usando e confiar usando alguns exemplos e estudos de caso para que você possa ver que estamos aqui. Esta é basicamente uma página de destino que eu desenhei há algum tempo, como quatro e cinco anos atrás. E você pode ver se você olhar para isso na primeira seção. Existem muitos tipos de contrastes que estou usando. O 1º 1 que vou discutir é o contraste de cor. Então você pode ver no lado direito o formulário. Tem muito contraste do fundo. O fundo é leve e a frente desta forma é muito diferente de todo o fundo. Ok, então é assim que podemos usar contraste de cores, Reinharz alguns elementos. Da mesma forma, se você olhar para essa pessoa, é agora muito dominante e muito diferente do fundo. Então, tem muito contraste. Mesmo o contraste no texto fora da cor e o fundo também é muito Da mesma forma, se você olhar para o lado esquerdo, eu estou usando o contraste entre os tamanhos fora do meu forte tão tifo tamanhos Você pode ver o tamanho do título e o tamanho do texto têm muito fora da escala diferente. Então, o contraste entre a escala do tamanho é demais. Então este é um interesse criador. Da mesma forma, se você olhar para essas três seções principais destacadas, você pode ver que eu estou usando novamente o contraste de tamanho e também alguns adicionando algum contraste de cor para destacar esses três itens. Agora, se olharmos para esta seção de clientes satisfeitos, é muito diferente projetado. E eu tive a idéia de outro site de computador ou deste site. Assim, da mesma forma , nesta seção, você pode ver ah, cada depoimento de cada cliente é destacado porque é muito diferente do plano de fundo. Então o fundo tem apelação. Textura repetida sobre ele, o que é ótimo. Tão grande é uma cor pálida mais perto do dedo do pé branco e você pode ver aqui nossos clientes satisfeitos. Eles parecem elegantes nisso porque têm cores muito afiadas e muito brilhantes. Da mesma forma, aqui estamos usando um contraste em primeiro plano e segundo plano. Então algo está aparecendo. Está mais perto de nós. É elevada a partir do fundo que você pode ver aqui e ah, fundo. Então está ótimo. Além disso, as cores são muito nítidas. Você pode ver onde aqui cores brilhantes azul não tão brilhante, mas eles são muito diferentes do fundo. Da mesma forma, aqui você pode ver de novo. Eu usei um retângulo, uma forma de dedo colocar um pouco de contraste entre este fundo e esta seção. Então isso significa que esta seção é diferente do plano de fundo. Então é assim que você usa o contraste. Eu usei contraste neste design. Vamos ver mais alguns exemplos agora. Este é outro exemplo que eu projetei recentemente e você pode ver claramente na seção superior que muitos contrastes de cor foram usados. Neste fardo você pode ver ou ouvir que é muito dominante e muito negro. E o fundo aqui, o int ganancioso é muito leve e quando o ingrediente é escuro no lado esquerdo, você pode ver que o texto é leve sobre ele. Por isso, ele está criando um monte de contraste de cor dedo obter algum fator adequado e para obter algum grande efeito. Da mesma forma, se olharmos para esta seção aqui novamente, estou usando ah, muito contraste de cor, cores diferentes para chamar a atenção e mantê-la separada dos outros. Então este é o condomínio de hospitais, então eles parecem diferentes e chamam mais atenção porque eu estou usando um monte de contraste. Cores muito nítidas. Muito você pode dizer muito dominante. Essas cores não são cores de contas, então eles estão atraindo muito. Da mesma forma, se olharmos para o tamanho do título aqui e o tamanho do texto, eles têm um monte de contraste entre eles porque eles são realmente força diferente. A primeira coisa é que seus estilos são diferentes. Um deles é um pouco fora do conjunto de humanista. Eu não vou falar em mais detalhes sobre essa força, mas eles são força diferente. jejum é a diferença entre eles seu estilo, suas estruturas diferentes. A segunda coisa é que seu tamanho é diferente. Então estou usando a habilidade de contraste. Portanto, o texto é muito pequeno. O título é muito maior s O. Esta é a diferença entre eles que está tornando mais interessante. A segunda coisa que você quer lembrar sempre que você não vai lembrar onde aqui é que qualquer tamanho de força para você usar em seus projetos, ele deve ser legível e legível a uma distância normal. Então tenha isso em mente. Porta Tente ser muito artístico e no usuário final pode não ser capaz de ler seu site de Rapid. Isso seria inútil. Agora vamos falar sobre o rodapé deste design e cabeça que você pode ver novamente. Estou usando cores muito nítidas e criando algum contraste aqui. Este rodapé, a seção inferior, tem muito contraste entre as cores. E também mais uma coisa é que essa cor pode confiar. Tem alguma relação. Então, se você está projetando algo que você precisa para passar esta proporção que descolorir neste fundo é legível e reconhecível ou não. Portanto, isto é muito importante. Um dos conceitos importantes. Vou atirar no Link. Vou tentar vincular o site. Acho que é cor cor cor cor cinza racial dot com, eu acho. Então. Você precisa testar a cor de fundo e a cor acima para ver se esses assassinos têm taxa de contraste e se este texto pode ser lido em pequenos dispositivos ou não. Então aqui novamente, nesta seção, eu estou usando um monte de confiança Caloocan, e também estou tentando usar algum contraste fora do alinhamento que você pode ver ou ouvir sobre nós é um pouco longe deste parágrafo. Da mesma forma, nossos produtos Heading é um pouco longe daqui. Então por que eu mudei. Ah, um pouco à esquerda ou este texto à direita para criar algum interesse. Então este é novamente o contraste entre o posicionamento fora dos elementos e eu estou usando isso para misturar no meu design um pouco mais interessante. Vamos ver mais alguns exemplos. Você deve ter visto este desenho Ah, muitas vezes. E este é o meu projecto recente. Eu ainda estou trabalhando nisso e você pode ver que inferno de novo. O contraste é o rei aqui. Podes ver se vais a isto, certo? Certo. A maioria da tela. E é sobre instruções, na verdade. Portanto, há instruções de vídeo e instruções de ataque para que você possa ver ou ouvir essa cor amarela neste fundo branco. E este marrom escuro, eles têm um bom contraste. Então isso significa que eles são interativos. São botões. São itens possíveis. São itens capazes. Da mesma forma, se você olhar para o fundo aqui, este Ah, aquela barra onde você precisa pressionar diferentes itens de aba para navegar, eles são destacados com azul marinho, marinho escuro, cor azul. Portanto, há muito contraste. Então, se você pode dominar esta cor, contraste e contraste entre tamanhos e o plano de fundo e primeiro plano conceito, você pode marchá-lo um desenhos. Web designs, aplicativos móveis projeta tudo. Então, novamente, do lado esquerdo se você olhar para este seis Tio Gunter Então isso significa que este é o meu assento do Tio Gun Gunter. Então este é o cabelo que eu estou usando alguma sombra. Então, a sombra está realmente separando-a do fundo. Portanto, é o conceito de fundo em primeiro plano. Então, estou tentando criar contraste entre itens de primeiro plano e de plano de fundo. Então algo está acontecendo. Isto é contraste de posicionamento. Algo está longe do fundo. Então eu acho que você aprendeu muito sobre esse contraste e como você pode usá-lo. Deixe-me mostrar-lhe mais um exemplo. Este é o último, e você vai adorar. Vamos ver alguns de outros designers trabalhar porque eu acho que eu sou apenas um iniciante. Então vamos ver alguns designers mais maduros e equipes fora de designers porque as equipes normalmente têm idéias maiores e criador projetado nível de design. Então este é um design que eu realmente amo. Este é de Nicholas Solar você e você pode ver aqui que ele está. Eu acho que ele usou este contraste de cor ah eo contraste entre os tamanhos de tipos em nossa maneira brilhante para que você possa ver os tamanhos de tipos fora coisas importantes como este novo valor casa é maior e um forte diferente. E parece ótimo. Todas as outras forças que você pode ver são o mesmo ou Regina e custo e são sábio é feito. Nenhum investimento, eu acho. E todas essas coisas e você pode ver que a parte inferior é totalmente diferente. É convite. Então estas são as opções. Então esta é a informação mais importante. Então, ele destacou usando a cor azul gritante usando tamanhos de tecnologia de texto maiores e claro que ele combina com esta tipografia, correspondência ou fraldas correspondência é criar. Vamos ver mais alguns exemplos aqui. Aqui. Se você olhar para este botão laranja na parte inferior, você pode ver isso instantaneamente agarra a atenção de que este item é diferente de tudo isso. Isto é um fardo. Este é um elemento interativo. Então, principalmente, esse é outro projeto que prende o projeto. Ele está usando cores muito sutis, mas em deixar uma cor dominante. Então esta é uma ótima técnica e design. Eu estou indo toe criar mais ad vastas palestras sobre ele sobre o uso sutil de cores na próxima seção, que eu vou criar e fazer e melhorar e adicionar as escolas novamente e novamente da mesma forma, aqui. tamanho do texto de contraste está aqui. Este rumo é muito grande. Este texto é pequeno. Esta imagem está chamando atenção. Há muito contraste entre o fundo do primeiro plano, tendo alguma sombra em torno dele para torná-lo para dar-lhe alguma profundidade e posicioná-lo no topo deste fundo. Da mesma forma, por aqui, vamos conversar. Este é o fardo e esta é a única seção interativa aqui. Portanto, há um monte de contraste fora de posicionamento e então nós temos cor. Contraste e tamanho são o contraste de tamanho entre a escala de contraste. Da mesma forma, isso parece ótimo e aqui você pode ver novamente o contraste entre os tamanhos de texto novamente, a mídia pública. Eu adoro isso. Há muito contraste entre elementos de fundo em primeiro plano, os tamanhos do texto. Eles são realmente adoráveis. Próximo passo para este fax. Você pode ver o que aqui. Eu realmente adorei este site. É muito minimalista e uso fora da tipografia é incrível. Da mesma forma aqui, se você olhar para esta tela, o contraste de cores é facilmente visível. Você pode ver que o lado esquerdo é na verdade que há barra ou a seção Você foi? A maior interação vai acontecer, depois a segunda barra e depois a terceira seção. Portanto, ele tem três seções separadas por essas linhas e contraste claro entre a seção principal e as interseções. Portanto, sempre que você tentar usar contraste de cor ou contrastes de tamanho, certifique-se de que você está usando e não usando demais. Então, se alguma cor é como aqui, você pode ver esta cor azulada eon. Ele foi usado nos botões em Lee para que você possa ver ou ouvir. Ouvir? Nós estivemos na areia em, uh, aqui nós temos isso sobre os amigos e também sobre este amigo. Isto é tudo sobre o uso de contraste, tamanho fora, posicionamento, cor e ah, todas as outras coisas, fundo em primeiro plano. Espero que tenham gostado desta lição. Se você tem alguma pergunta para me fazer, vamos para a próxima lição. 20. Usando o repetição no design: Vamos falar sobre repetição no design. Agora repetição significa que você está indo dedo do pé. Repita o mesmo estilo, as mesmas formas semelhantes e as mesmas cores são você pode dizer semelhantes lê peles semelhantes em seu design uma e outra vez, e ele vai chegar mais perto do design simétrico e equilibrado. Além disso, repetição vai fazer mais sentido porque, por exemplo, se você está projetando uma página de destino e você tem um sinal britânico separado enriquece tela e sempre que você tentar dedo do pé, use esse verde semelhante botão. O usuário vai pensar que isso é sobre e este é um elemento interativo. Preciso de um pontapé no dedo. Preciso de lhe dar um toque. Então a repetição em seu projeto está indo para o pé. Comunique com o usuário que seu design é consistente, então a consistência virá com a repetição para que você possa repetir diferentes formas. Por exemplo, se você estava usando elipse a formas para suas imagens de avatar, você usará os mesmos navios de elevação em todo o seu design. Da mesma forma, suas seções, por exemplo, as alturas e arrancou seus elementos. Você pode repeti-los. Você pode repetir cores diferentes. Você está indo para corrigir cores diferentes Por exemplo, se o meu site é e site de comércio, eu tenho Ah, um botão laranja para adicionar ao cartão. Eu preciso usar isso apenas em Adicionar ao carrinho não para as outras mensagens ou algumas outras coisas . Certo, então tenha isso em mente. Repetição no design pode ser de muitas maneiras estilo, formas e cores e seções linhas. Você pode repeti-los agora. O problema é, se você tentar repetir a mesma coisa uma e outra vez e é muito semelhante à mesma coisa. Por exemplo, duas seções fora do seu site. Eles são muito semelhantes em estilo e tudo o que ele está indo dedo do pé criar uma perda muitas vezes apenas para que seu design vai começar a olhar chato. Então, há uma técnica que eu vou dar a vocês é a variação. Mas você vai repetir isso com um pouco de folga. Variações são usa uma petição, mas com alguma visão. Por exemplo, quando você me vê no meu curso de tipografia, usei um esquema de cores inverso para alguns fora do texto. Então é chamado de assassinos repetidos são espaço, mas ao contrário. Então, por exemplo, se eu estiver usando isso no lado esquerdo, você pode ver que eu sou você. Eu te amo. Está escrito em vermelho e você pode ver no lado direito. Eu tento criar algum interesse. Estou usando a mesma cor. Mesmas formas, tudo. Mas eu tento criar um pouco mais de interesse, e destaquei esta seção L de amor. E é assim que você pode criar variações diferentes, mas limitando-se à mesma repetição ou mesma repetição de espaço, cor e seções diferentes. Ninguém importante é que a repetição não deve ser apenas com suas cores ou as formas , mas também com isso e as altas caminhadas e também o espaçamento entre os elementos. Por exemplo, cada seção do seu site ou do seu logotipo Cada tem algum espaço acima e abaixo. Você precisa manter isso consistente em todo o seu design. Por exemplo, se você projetou um site que vai estar no celular que vai ser usado em tablets ou iPhones ou iPads, você precisa pensar que tanto espaço deve estar em torno dele, ou essa idade percentual de espaço deve estar em torno dele para torná-lo proeminente ou pode torná-lo ótimo. Então você precisa usar seções diferentes. Você pode usar essas seções com o uso de cores, ou você pode usar algumas, hum, peles. E consertávamos os destaques de Heiser e líamos. Ou talvez algumas razões que esta imagem vai estar neste tamanho racial, e você pode usar isso em suas diferentes seções. Então este tipo de repetição vai ser encontrado em muitas seções. Por exemplo, páginas, sites, páginas da Web. Existem seções diferentes, então cada seção terá alguma repetição fora do espaço diferente. Cabeçalhos diferentes, cores de cabeçalho diferentes, então eles vão repetir. Então, na primeira seção, por exemplo, das cores ocultas preto, talvez na próxima seção. O assassino escondido é branco, mas o tamanho do esconderijo é o mesmo. Então você está usando o tamanho da repetição. Da mesma forma, por exemplo, se em sua primeira seção seu cabeçalho, você deixou alguma margem superior ou cabeçalho superior, por exemplo, 200 pixels, você vai deixar o mesmo na próxima seção. Não, eu vi isso em muitos designers maiores que este é um problema muito grande. Eu vi muitas vezes que os designers nervosos ou os grandes designers de nome. Eles não tratam o espaço em branco como um bloco de conteúdo. Então, sempre que você vê algum espaço em branco ou espaço vazio, eu não acho que isso não é Ah, bloqueie seu elemento de design. Isso também é um bloco, então você vai repetir esse bloco de design espaço em branco, e você vai usar essa repetição em seu design e você está indo para o dedo do pé. Eu usei o dedo do pé de repetição do espaço do vício, criar ritmo vertical e espaçamento horizontal e vertical. Então, o que é ritmo vertical é como seus elementos estão indo para o espaço para fora na direção vertical um do outro. Eu falei muito sobre esse ritmo vertical no meu curso de tipografia. Então, se você está interessado em usar como usar essa tipografia e como fazer o seu design interessante e coisas de layout, você pode dar uma olhada no meu curso de tipografia. Agora vou mudar para muitos exemplos, então vamos ver muitos exemplos. Eu vou explicar como eu usei espaço em branco e como nós usamos desenhos de número de repetição , então tudo isso faz sentido para você. Então vamos passar para a próxima lição 21. Exemplos de reprodução: Então, aqui estão alguns exemplos onde eu vou ilustrar o conceito fora da repetição em seu design. Agora, se você olhar para a tela esquerda ou aqui a tela inteira à esquerda, eu vou começar a partir daqui e você pode ver que este top nunca parou em uma barra onde temos o título do aplicativo é na verdade o mesmo que este. Então, no terceiro 1 Então, no lado direito e no lado esquerdo, eles estão usando o mesmo. Também no meio é o mesmo, mas apenas o tamanho do forte. Ou você pode dizer que o patrono é um pouco diferente. Agora, se você olhar para esta tela esquerda, você pode ver os elementos que eu estou repetindo. Você pode ver esta linha muito 10 no topo. Separação está sendo usado ou cabelo novamente na próxima seção para que você possa ver que eu estou usando dedo do pé separar minhas duas seções. Então esta é a repetição. Este é o mesmo estilo, mesmo elemento de linha que estou usando e repeti-lo para separar minhas seções. Agora, se você olhar para, hum, esses botões, você pode ver todos eles todos os botões de controle que estão dentro da tela. São elipses. Então eles são todos círculos, o botão da loja, o declínio. Mas sobre este ódio, mas sobre esses controles para controles, eles são todos consistentes. Eles têm repetindo sua repetição a forma fora e um círculo. Então são todos elipse. Então você pode ver que esta é a repetição fora de forma. Então eu estou usando a mesma forma em todo o meu design em todos os lugares. Você pode até mesmo ver essa forma na função de memória. Então, se você pode ver 1234 ou chumbo, isso é em alemão, na verdade. Então isso são para posições de memória que você pode definir para que você possa ver mesmo nessas posições de memória , eu estou usando o mesmo elemento de design que é circulado. E se você olhar para o meu tipo, você pode ver muitos sofás. Isso também é ter alguma suavidade nele. Não é muito nervoso. Então este é um jogo dedinho, este círculos. Agora vamos falar sobre repetição de cores. Agora você pode ver como você pode estar rindo para trás enquanto assiste a este vídeo porque você pode ver claramente um monte de cores. Delegado, aqui. Agora, se você olhar para isto para a pele da esquerda. Esta cor azul marinho escuro está sendo usada como um enchimento para todos os controles primários. Então você pode ver o quê? Aqui. Relaxe. Isto está selecionado. Então tem esta camisa azul mais escura. Você pode não ser capaz de vê-lo, mas agora, na minha tela, isso é muito escuro, perto da marinha preta, cor azul. E também você pode ver esta guia de navegação à esquerda. Está activado. Então todos eles têm as mesmas cores. Da mesma forma, se você olhar para isso tão longe dentro disso, ele tem ah, cor azul claro, que é novamente você pode ver nesta atividade, mas nessas atividades, mas e então nós estamos aqui. E esta laranja é na verdade que eu usei para o aquecimento porque era um conceito um pouco diferente , então eu não repeti nas cores azuis aqui. Está bem, está bem. Agora vamos passar para esta tela do meio. Agora você pode ver que você pode ver claramente que estes são dois vídeos. Eu acho que três vídeos e eles estão usando o mesmo botão de título estilo para jogar a mesma altura e largura. Então também, você pode notar que o espaçamento entre eles você pode ver espaçamento entre todos esses três vídeos é o mesmo espaçamento mais cócegas. Então este é mais um conceito. Da mesma forma, se você olhar para a esquerda e para a direita de todas essas telas, você pode ver o conteúdo interno. Eles têm a mesma margem e diferença, então a esquerda e a direita são iguais. Assim, ele faz design mais equilibrado, e você pode ver também os ícones. Estes estão usando a peça de Burton eles estão usando cor amarela, e dentro está novamente nomeando no lado direito. Você pode ver que estamos novamente usando a mesma cor verde para ativação que essas coisas foram ativadas ou estas estão ativadas e aqui novamente, esta cor amarela, mesma cor amarela para elementos interativos. Então é basicamente o meu segundo regular, e você pode ver ou ouvir isso. Isso também é interativo, mas eu estou usando um pouco. Você pode dizer cor marrom mais escura aqui. Ok, então esses chá estão usando o mesmo patrono, mesmos tamanhos de tipografia. Tudo é igual, e você pode ver que é assim que usamos repetições. Então a repetição é uma parte integrante de qualquer você um design que você precisa para corrigir os quatro tamanhos. Se algo estiver usando para título, ele deve ser usado para percorrer todo o seu design. Mergulhe. Repetição está indo para o pé. Crie consistência em seu design, então certifique-se de que você está usando uma repetição da maneira correta. Não, vamos olhar para este design. Então vamos cobrir o conceito fora da repetição com alguma variação. E agora você pode ver aqui à esquerda que eu estou usando novamente o mesmo. Este é um dos maiores esconderijos. Mas o forte que estou usando aqui é usado para títulos em todo o meu projeto. Então este é o mesmo ford de tamanho diferente. Neste é o mesmo Ford e mesmo tamanho para todas as seções, o quarto eo tamanho é parecer para que você pode ver isso vai criar alguma consistência em seu design. Da mesma forma, se você olhar para isso, eu criei alguma separação com algumas cores. Então eu estou usando junking matador aqui agrupando usando algumas cores e separando esses dois. Mas se você olhar de perto aqui, os espaços entre elementos são muito complicados. Então tenha isso em mente que você pode ver ou ouvir a forma sente que eles têm o mesmo espaçamento entre eles. Vamos mudar para um curto, mas eu vou mostrar a vocês como todos os espaçamentos vão funcionar e como eu coloquei todo esse projeto. Então, se você olhar para isso aqui, você pode ver que este espaço de cima aqui é quase semelhante a este lugar aqui. Então eles são iguais em cima e em baixo. Da mesma forma, se você olhar para esse ritmo, é indiferente. E também você pode ver se este espaço é quase igual ao espaço aqui. Então eu estou usando repetição fora do espaço vertical ou espaço branco cabelo. E da mesma forma, você pode ver as lacunas entre esses quatro. São repetições. Então agora você pode ver aqui eu estou usando quatro cores diferentes. Por que é isso? O problema é que se eu tentar usar a mesma cor uma e outra vez, pode ficar chato. Então, para criar alguns, você pode dizer algum interesse interessante em seu design. Eu tento usar cores diferentes aqui para que você possa ver que eles estão parecendo mais naturais e eles são mais atraentes. Eles são mais coloridos, eles chamam mais atenção. Da mesma forma, este está no final. Tão sozinha. Então tentei usar outra cor para isso. Agora, aqui temos a inversão reversa fora do nosso esquema de cores e eu estou usando fundo escuro e nas cores claras superiores. Então esta é outra variação que você pode fazer. Mas você pode ver que esta é novamente a seção e também este espaço entre diferentes seções é o mesmo. Da mesma forma, este é novamente branco e há muito fora porque ícones são seus logotipos aqui. Então temos outra vez. Você pode notar o espaçamento. Você notou o espaço? Este é um passo muito importante para que você possa ver que estou usando um monte de espaço em branco acima e abaixo. Eles são quase iguais. Então, se eu limpar algo assim para que você possa ver como isso está criando um retângulo perfeito . Vejamos mais alguns exemplos eso para ilustrar a ideia fora da repetição. Você pode ver que este é outro design que você pode ter visto em mais algumas vezes neste curso. Então você pode ver isso, mas outro aqui, da mesma cor. O mesmo fardo é usado em muitos lugares como este aqui, aqui. E também neste não assinar ninguém. Então você pode ver as mesmas cores são repetidas uma e outra vez. Esta linha no topo desta posição é repetida uma e outra vez. Isso pode mostrar-lhe aqui é a linha no topo desta navegação sobre e aqui nós temos novo, novamente, novamente, as linhas que você pode ver para mostrar os títulos Eles não são azuis, então eles são um pouco diferentes com alguns variação novamente, a linha no topo aqui novamente, a linha no topo. Então é assim que usamos repetição em nossos projetos. Além disso, você pode olhar para cores diferentes. Por exemplo, Graus graça têm sido usados em um monte de padrões diferentes e as cores de fundo aqui novamente, grave com algum patrono. E é assim que todo este design tem sido consistente. E é assim que você vai usar consistência em seu design usando repetição com cores, formas, linhas, tipografia, tamanhos, 22. Exemplos de reprodução: Então, aqui estão alguns exemplos onde eu vou ilustrar o conceito fora da repetição em seu design. Agora, se você olhar para a tela esquerda ou aqui a tela inteira à esquerda, eu vou começar a partir daqui e você pode ver que este top nunca parou em uma barra onde temos o título do aplicativo é na verdade o mesmo que este. Então, no terceiro 1 Então, no lado direito e no lado esquerdo, eles estão usando o mesmo. Também no meio é o mesmo, mas apenas o tamanho do forte. Ou você pode dizer que o patrono é um pouco diferente. Agora, se você olhar para esta tela esquerda, você pode ver os elementos que eu estou repetindo. Você pode ver esta linha muito 10 no topo. Separação está sendo usado ou cabelo novamente na próxima seção para que você possa ver que eu estou usando dedo do pé separar minhas duas seções. Então esta é a repetição. Este é o mesmo estilo, mesmo elemento de linha que estou usando e repeti-lo para separar minhas seções. Agora, se você olhar para, hum, esses botões, você pode ver todos eles todos os botões de controle que estão dentro da tela. São elipses. Então eles são todos círculos, o botão da loja, o declínio. Mas sobre este ódio, mas sobre esses controles para controles, eles são todos consistentes. Eles têm repetindo sua repetição a forma fora e um círculo. Então são todos elipse. Então você pode ver que esta é a repetição fora de forma. Então eu estou usando a mesma forma em todo o meu design em todos os lugares. Você pode até mesmo ver essa forma na função de memória. Então, se você pode ver 1234 ou chumbo, isso é em alemão, na verdade. Então isso são para posições de memória que você pode definir para que você possa ver mesmo nessas posições de memória , eu estou usando o mesmo elemento de design que é circulado. E se você olhar para o meu tipo, você pode ver muitos sofás. Isso também é ter alguma suavidade nele. Não é muito nervoso. Então este é um jogo dedinho, este círculos. Agora vamos falar sobre repetição de cores. Agora você pode ver como você pode estar rindo para trás enquanto assiste a este vídeo porque você pode ver claramente um monte de cores. Delegado, aqui. Agora, se você olhar para isto para a pele da esquerda. Esta cor azul marinho escuro está sendo usada como um enchimento para todos os controles primários. Então você pode ver o quê? Aqui. Relaxe. Isto está selecionado. Então tem esta camisa azul mais escura. Você pode não ser capaz de vê-lo, mas agora, na minha tela, isso é muito escuro, perto da marinha preta, cor azul. E também você pode ver esta guia de navegação à esquerda. Está activado. Então todos eles têm as mesmas cores. Da mesma forma, se você olhar para isso tão longe dentro disso, ele tem ah, cor azul claro, que é novamente você pode ver nesta atividade, mas nessas atividades, mas e então nós estamos aqui. E esta laranja é na verdade que eu usei para o aquecimento porque era um conceito um pouco diferente , então eu não repeti nas cores azuis aqui. Está bem, está bem. Agora vamos passar para esta tela do meio. Agora você pode ver que você pode ver claramente que estes são dois vídeos. Eu acho que três vídeos e eles estão usando o mesmo botão de título estilo para jogar a mesma altura e largura. Então também, você pode notar que o espaçamento entre eles você pode ver espaçamento entre todos esses três vídeos é o mesmo espaçamento mais cócegas. Então este é mais um conceito. Da mesma forma, se você olhar para a esquerda e para a direita de todas essas telas, você pode ver o conteúdo interno. Eles têm a mesma margem e diferença, então a esquerda e a direita são iguais. Assim, ele faz design mais equilibrado, e você pode ver também os ícones. Estes estão usando a peça de Burton eles estão usando cor amarela, e dentro está novamente nomeando no lado direito. Você pode ver que estamos novamente usando a mesma cor verde para ativação que essas coisas foram ativadas ou estas estão ativadas e aqui novamente, esta cor amarela, mesma cor amarela para elementos interativos. Então é basicamente o meu segundo regular, e você pode ver ou ouvir isso. Isso também é interativo, mas eu estou usando um pouco. Você pode dizer cor marrom mais escura aqui. Ok, então esses chá estão usando o mesmo patrono, mesmos tamanhos de tipografia. Tudo é igual, e você pode ver que é assim que usamos repetições. Então a repetição é uma parte integrante de qualquer você um design que você precisa para corrigir os quatro tamanhos. Se algo estiver usando para título, ele deve ser usado para percorrer todo o seu design. Mergulhe. Repetição está indo para o pé. Crie consistência em seu design, então certifique-se de que você está usando uma repetição da maneira correta. Não, vamos olhar para este design. Então vamos cobrir o conceito fora da repetição com alguma variação. E agora você pode ver aqui à esquerda que eu estou usando novamente o mesmo. Este é um dos maiores esconderijos. Mas o forte que estou usando aqui é usado para títulos em todo o meu projeto. Então este é o mesmo ford de tamanho diferente. Neste é o mesmo Ford e mesmo tamanho para todas as seções, o quarto eo tamanho é parecer para que você pode ver isso vai criar alguma consistência em seu design. Da mesma forma, se você olhar para isso, eu criei alguma separação com algumas cores. Então eu estou usando junking matador aqui agrupando usando algumas cores e separando esses dois. Mas se você olhar de perto aqui, os espaços entre elementos são muito complicados. Então tenha isso em mente que você pode ver ou ouvir a forma sente que eles têm o mesmo espaçamento entre eles. Vamos mudar para um curto, mas eu vou mostrar a vocês como todos os espaçamentos vão funcionar e como eu coloquei todo esse projeto. Então, se você olhar para isso aqui, você pode ver que este espaço de cima aqui é quase semelhante a este lugar aqui. Então eles são iguais em cima e em baixo. Da mesma forma, se você olhar para esse ritmo, é indiferente. E também você pode ver se este espaço é quase igual ao espaço aqui. Então eu estou usando repetição fora do espaço vertical ou espaço branco cabelo. E da mesma forma, você pode ver as lacunas entre esses quatro. São repetições. Então agora você pode ver aqui eu estou usando quatro cores diferentes. Por que é isso? O problema é que se eu tentar usar a mesma cor uma e outra vez, pode ficar chato. Então, para criar alguns, você pode dizer algum interesse interessante em seu design. Eu tento usar cores diferentes aqui para que você possa ver que eles estão parecendo mais naturais e eles são mais atraentes. Eles são mais coloridos, eles chamam mais atenção. Da mesma forma, este está no final. Tão sozinha. Então tentei usar outra cor para isso. Agora, aqui temos a inversão reversa fora do nosso esquema de cores e eu estou usando fundo escuro e nas cores claras superiores. Então esta é outra variação que você pode fazer. Mas você pode ver que esta é novamente a seção e também este espaço entre diferentes seções é o mesmo. Da mesma forma, este é novamente branco e há muito fora porque ícones são seus logotipos aqui. Então temos outra vez. Você pode notar o espaçamento. Você notou o espaço? Este é um passo muito importante para que você possa ver que estou usando um monte de espaço em branco acima e abaixo. Eles são quase iguais. Então, se eu limpar algo assim para que você possa ver como isso está criando um retângulo perfeito . Vejamos mais alguns exemplos eso para ilustrar a ideia fora da repetição. Você pode ver que este é outro design que você pode ter visto em mais algumas vezes neste curso. Então você pode ver isso, mas outro aqui, da mesma cor. O mesmo fardo é usado em muitos lugares como este aqui, aqui. E também neste não assinar ninguém. Então você pode ver as mesmas cores são repetidas uma e outra vez. Esta linha no topo desta posição é repetida uma e outra vez. Isso pode mostrar-lhe aqui é a linha no topo desta navegação sobre e aqui nós temos novo, novamente, novamente, as linhas que você pode ver para mostrar os títulos Eles não são azuis, então eles são um pouco diferentes com alguns variação novamente, a linha no topo aqui novamente, a linha no topo. Então é assim que usamos repetição em nossos projetos. Além disso, você pode olhar para cores diferentes. Por exemplo, Graus graça têm sido usados em um monte de padrões diferentes e as cores de fundo aqui novamente, grave com algum patrono. E é assim que todo este design tem sido consistente. E é assim que você vai usar consistência em seu design usando repetição com cores, formas, linhas, tipografia, tamanhos, 23. ESTUDO de estudo - - de de escala de de cinza: Agora eu vou criar um visual incrível, guarda de visita ou cartão de visita, e eu vou mostrar a vocês como você pode projetar usando todos os princípios e todas as técnicas e elementos fora do design que eu ensinei nas lições anteriores. E também, esta será a minha próxima missão. Então agora vamos projetar este cartão usando a Adobe para uma loja, e eu acho que a ferramenta de software adequada para projetar cartões imprimíveis de impressão é Adobe ilustrador. Mas ainda assim, eu acho que em obedecer para a loja pode ser acostumado. Então nós vamos mergulhar para a loja, e eu vou criar basicamente três variações diferentes disso e eu vou te mostrar quais são as direções de design ou o que eu queria ou a equipe fora deste projeto ou vile-lo? Quais são as propriedades deste design, se é forte, divertido, divertido, criativo ou qualquer outra coisa, Então vamos começar e começar a criar este eso cartão de visita incrível aparência que é mergulhar em para a loja. Ok, agora, para começar este design, vamos para o arquivo novo e vamos para a impressão do dedo do pé, e o tamanho que vamos adicionar é de 3,75 polegadas para 10. Altura será de 5,25 Então 0,25 é realmente a margem de sangramento e a margem da raça significa que esta parte está indo dedo do pé cortado quando os carros são Jessica impressos. Depois disso, eles tentam dedo do pé, cortá-los na forma do carro, e esta é a área da raça que vai ser cortado e fora do cartão. Então vamos adicioná-lo ao nosso design. Ok, então nós vamos selecionar este quadro de arte agora mesmo. Se você selecionar quadros de arte, ele apenas se move para o artigo. Se vamos convertê-lo para vê-lo. Michael Itron. Ok, então pressione em liberado. Vamos chamá-lo de guarda de visita ou cartão de visita. Ok. E pressione bonitinho. Então aqui temos o primeiro quadro de arte. Isto é ah, frente, lado fora, outro cartão e que zoom out. E nós também vamos criar a segunda supressão. Só isso mais e teremos a segunda obra de arte. Então agora estamos no primeiro quadro de arte. Então a primeira coisa que vamos fazer é traçar algum plano, então o plano vai ser Precisamos de algumas grades e guias. Precisamos de algumas caixas, alinhe as coisas para isso. Vamos ver o novo layout do guia e deixe-me mostrar como criei tudo isso . Esses caras. Então você vai usar. Deixa-me mostrar-te aqui. Quatro problemas e a sarjeta Gretel é basicamente o espaço entre as colunas que você pode ver aqui. Estas são as calhas entre as colunas. Portanto, existem 41234 colunas e o governador é 0,1 a 5. Então é assim que eu estou tentando design do dedo do pé, meu layout ah. E eu estou usando cinco linhas, que é de cima para baixo 12345 linhas. E a calha entre eles é 123450.67 Então, mesmo que você queira usar a calha de 0,1 a 5, depende de você. Vamos projetá-lo assim. Cabe a você. Ok. Então eu não acho que esse cortador muito vai ajudar porque nós não temos muito conteúdo por aqui. Então lembre-se da lição com as camadas projetadas com conteúdo. Ok, então isso é tudo e nós vamos pressionar. OK, Da mesma forma, nós vamos fazer o mesmo com este em bastante layout e ele vai ser por aqui. Certo, assim que dormimos isso, você pode ver que estão ativados. Certo, então vamos começar. E primeiro vamos usar nossa ferramenta de texto e ah, vamos usar apenas a lista negra. Então é assim que eu queria mostrar a vocês meu processo de design. Então eu vou usar 40 pixels, tamanho muito grande e quatro e o estrangeiro que eu estou selecionando ou tifo que estou selecionando é Roboto. Ok? Então, antes de começar de novo design, precisamos do dedo do pé. Garantir que o nosso o quê? Nossos corpos, nossa equipe de design na direção. Ok, então minha empresa é uma empresa de design de experiência de usuário e eu queria parecer muito forte, poderosa, criativa e simples mas moderna. Então eu quero transmitir minha mensagem. Usar a simplicidade não deve ser muito simples. Mas parece moderno e elegante e eu quero mostrar que somos poderosos o suficiente e forte suficiente para resolver seus problemas. Então o forte, baseado em todas essas coisas, o tipo que eu tenho escolhido é roboto porque é muito elegante e muito moderno. É poderoso sensorial formado e para o poder que vou usar com o touro Tiefest. Então, para isso eu estou usando robôs condensados negrito 140 picaretas é Ok, então vamos criar este ficções empresa usável. Ok, então eu vou alinhá-lo no meio assim. Vamos, Lee para de selecionar. Ok, agora, se você olhar para aqui, nós temos 1234 colunas e você pode ver que meu texto está quase cabendo na coluna do meio. Então eu vou alinhá-lo aqui, a linha de base do meu telefone ou morrer cara. Vou alinhá-lo com o meu papel. A base fora desta sala. Então você deve ter adivinhado que eu estou usando tons de cinza preto e vital. Então este é o primeiro passo, OK, agora eu vou usar é o segundo tiefest. Então eu queria ser muito elegante, e eu quero muito contraste. Então o contraste será no tamanho dois. Então o que eu fiz foi selecionar fonte Sands Pro, que é um dos meus favoritos. Os garfos temiam a Força e eu escolhi. É como a vida. É como estilo, porque por que eu fiz isso porque eu queria ter um monte de contraste entre os dois tipos de letra. Então nós projetamos alinhado no meio e vamos selecionar um pouco fora do normal para ele assim . Então este é o nosso design em tons de cinza. Isso é uma linha aqui. Talvez no meio deste grupo. Então, ou você pode selecionar esta regra assim e, em seguida, selecionar esta e nós e você pode alinhá-la no meio assim. Já está no meio. Ok, então temos que elementar aqui. Ok, então eu só estou usando um ponto, que é nosso vai ser nossos lábios. E eu vou usar uma elipse aqui só para enfatizar a força. Ok, então isso vai ser Vamos fazer 41 raças. Ok, então eu estou indo dedo do pé, mexam-se. Assim como na mesma linha. Você pode ver o alinhamento. Um 123 Vamos esconder o comando da grelha e controlar o semi-cólon, eu acho. Colin, não tenho certeza se vou listar o destino aqui. O atalho aqui. Ok, então você também pode ir até aqui e mostrar e esconder seus caras para que isso seja realmente neve rastreada . Não é um grande crédito do norte, mas os caras realmente vêem são os guardas. Este é, na verdade, o atalho. Ok, então nós temos esses dois elementos, então certifique-se antes de começar a projetar seu cartão. Você sabe o que vai colocar aqui. Então temos dois elementos. Só um slogan e esse é o nosso texto. Ok? Agora, para criar algum interesse e equilíbrio, eu estou indo para o pé porque você pode ver que eu estou usando muito espaço em branco no topo da direita e da esquerda apenas para enfatizar este pedaço e dedo do pé. Pegue um pouco. Você pode dizer algum interesse. Vou usar esta seção inferior. Ok, então isso vai ser assim. Talvez assim, algo assim. Então este é o nosso layout real sobre design, ou você pode ver a escala de cinza projetada. Ok, agora vamos passar para este aqui, e eu vou depender das grades. Certo, então o que vou fazer é mais uma coisa. Preciso que te diga aqui que esta margem é realmente insegura. Área certa e fazer qualquer coisa. Ok, então o parar isso deixou esta direita? E o fundo, eles podem cortar quando o eles são impressos. Então o que eu preciso fazer é então eu vou usar o dedo do pé. Ou este bloco aqui para o meu texto ou o que posso fazer é usar isto. Então, se eu usar o lado direito, vou alinhá-lo com esta linha à direita. Então, se estou tentando usar o alinhamento esquerdo, vou usá-lo aqui. Ok? Então agora o que eu preciso fazer é colocar nossos decks aqui, e força é novamente a recompensa. Oh, eu estou usando. Então vou usar o robô aqui. Então aqui temos a prancha Roboto. Então desta vez vou usar negrito ou preto? Talvez assim o mais próximo preto talic primeiro preto e nós temos o preto. Então eu vou usar meu nome s e e eu vou usar o título na mesma linha CEO ou e na próxima linha, eu vou usar meu número de telefone com algum espaço. Este é o meu número de telefone verdadeiro e este é o meu e-mail. E mais uma coisa. Isso é adicionar algum lado de representante manequim aqui. Use Amber. Não vá em algo assim. Ok, então agora se você olhar para ele aqui, eu estou usando o princípio da proximidade do dedo do pé. Alocar todas as coisas de forma semelhante e perto umas das outras. Porque estes são todos contacto. É. Uma coisa que eu vou fazer é que eu não quero que este texto seja tão grande. Então eu vou usar 36 Eu acho que 36 taxa de olhar. E também eu vou usar mudar para regular, então eu não quero que ele seja muito ousado em. Além disso, eu quero que eles estejam na linha. A altura será um pouco. Quero aproximá-los um pouco mais. 48. Ok, então aqui temos o basicamente fora. Vamos ver o quanto é longe daqui. Então eu vou fazer disso uma linha para isso. 1234 Isso é cinco. Vamos fazer algo assim. Parece ótimo. Ok, então isso vai ser destacado, então eu vou usar uma cor preta mais escura aqui para este. Então, meus amigos, este é o layout da escala de cinza fora do meu design no meu cartão. É assim que você deve começar seus projetos e você pode ver que está parecendo muito simples. Agora, na próxima lição, vamos adicionar algumas cores e alguns experimentos com os fundos e todas essas coisas , então vamos passar para a próxima lista. 24. ESTUDO de casos - finalização de cartões: A última lição. O que fizemos foi criar uma escala de cinza do nosso primeiro design, que é o design do nosso carro de negócios. Agora, neste próximo passo, o que vamos fazer é adicionar algumas cores e algum interesse. Vamos enterrar nosso layout. Então, em algumas texturas, ou talvez alguns usuários para criar algum interesse e algum equilíbrio, você já viu que quanto espaço em branco realmente melhora seu design. Então eu tenho muito menos conteúdo neste cartão e um monte de espaço em branco. Então, ele vai enfatizar na única informação em seu cartão de carro. Então o que eu quero é, eu quero fazer minha marca impressão a primeira impressão em meus clientes que estamos convidando empresa. Então, para isso, vamos usar, hum, patronos. Ok. Ok. Então vamos começar e adicionar alguns adicionar um pouco de cor reta e cavar mais fundo neste design e todas essas coisas de design visual. Ok, então eu vou para a minha loja de fotos agora, então vamos começar. Ok. Agora, aqui. Você pode ver que este é o ... este é o lugar onde nós saímos. Então aqui nesta arte entediada. Vou começar a adicionar algumas cores. Então o que você vai fazer é que você já pode ter o logotipo do negócio aqui. Então? Então você já pode ter isso. Você não precisa, você sabe, usar nossas, você sabe, você sabe, cores inventadas de você mesmo. Então eu vou usar esta cor azul e esta cor vermelha afiada. Ok, então eu estou corrigido. Ok, então aqui está. E deixe-me ver. Não tenho certeza se não parece alinhado para mim. Ok, então, sim , não está alinhado corretamente. Então aqui temos agora, assim. Ok, então mais uma coisa é que se você olhar de perto, você pode ver que esta usável junto com a morte, esta porta. Então esta seção inteira não está centrada. Então aqui temos mais espaço. E aqui temos menos espaço. Ou então aqui temos à esquerda, temos mais espaço. E à direita, deixamos menos carne. Então o que eu vou fazer para controlar o Comando D para dissecar. Ok. Então eu vou agrupá-los juntos este utilizável e esta elipse Vamos lá, G e eu vamos para o centro. Alinhe. Controle cada um ou você pode usar este aqui, ordená-lo para selecionar todo o quadro de arte e, em seguida, usar este. Ok, então certifique-se de que você está selecionando este grupo, então eu vou nomear o logotipo. Vamos lá, D dois d selecione. E agora acho que está no meio. Vamos escondê-lo e ver se está ótimo. Então parece ótimo. Não tem ninguém lá. Vamos usar um pouco de cinza azulado aqui em vez de usar apenas a simples menina cinza velha, eu vi muitos dos meus alunos. Tentam usar a linha reta azul. Desculpe, a grande pura que é esta aqui. Não tente usar a tentativa deles para misturá-lo com alguma cor. Como por aqui. Então algo assim parece muito leve. Então eu vou usar um pouco mais escuro ou como este Este parece criar. Agora você pode ver este rosto de morrer elegante ou fino. Tem muito contraste com este tiefest utilizável. Então eles são Eles estão procurando criar também eles estão olhando modernos Este conjunto de areia de pro um Papai Noel. Desculpe, Sore Sense Pro Parece ótimo. Além disso, tudo isso. Roberto Ford está ótimo. Ok, então, uh, esta parte está feita. Ok, então aqui temos apenas este cabelo retangular, que também é um pouco de cor azul Ah Gresh. Muito leve. Vou ver se está alinhado corretamente. Vou entrar no meio desta regra. Então eu estou usando quase 1,5 linhas. Então vamos esconder nossos 100 s o que parece creme. Vamos mover este lado. Ok. Agora, deste lado, o que vou secar é reverter o meu esquema de cores. Então aqui temos cores brancas e contrastantes nele, e aqui vou reverter meu esquema. Então, em seguida use criar um retângulo aqui. Isto vai ser o nosso “isto”. Vamos colocar essa história tecnológica e eu vou selecionar todo esse texto. E agora vou usar essa cor, que é pálida. Por que descolorir algo assim? Ok, então para este CEO, o que eu vou fazer é por este. Vou usar o vital puro só para destacá-lo ou separá-lo dos outros três. Além disso, se você quiser fazer algo, você pode reduzi-lo como 42 talvez algo assim. E também este primeiro 1 eu vou movê-lo para longe, então eu vou mudar a linha. Altura. 48. Não sei por que está parecendo grande demais para mim. Então eu vou com 32 em vez de 36. Então isso parece ótimo. Hum, agora eu sinto que esse contraste de tamanho entre o CEO e este parece bom. Ok, então ou você pode usar este preto, ou você pode usar o mesmo azul aqui dedo do pé para este par de terra. Ou também você pode fazer. Mais uma coisa é que você pode reduzir o brilho aqui. Então este é o mesmo que você 21. E o que você pode fazer é tentar reduzir o brilho, e eu vou usar 30. Oh, vamos ele tinha 25 anos. Então isso parece quadrado. Estas são as cores, vês? 100% magenta, 90% amarelo, 42 e preto 52. Próximo aumento O preto para 65 são 70%. Ok, então podemos usar algo assim, mas parece muito pronto. Dark, Então eu vou para ir com 65 ou talvez 60%. , Ainda assim, 60% parece muito escuro. 55 saturação. Vou reduzir a saturação do dedo do pé 70% algo assim. Então não, esta é uma cor diferente, mas está na mesma linha de cor ou na mesma cor que nós estávamos usando anteriormente para 21. Então nós estamos realmente usando a sombra mais escura e maçante fora do mesmo azul. Então aqui está a nossa primeira versão fora do cartão. Então, Então, agora você pode ver que parece ótimo, mas talvez isso pareça muito grande. Então eu vou com 42. Você pode ver o que estou fazendo. Estou diminuindo o zoom. Então amplie, diminua o zoom. Então eu estou ampliando e eu vejo que isso em relação a este parece muito grande. Então eu tentei reduzir o tamanho. Então agora o que eu vou fazer é então eu estou usando tudo o que eu ensinei a vocês Ampliar, diminuir o zoom O contraste entre diferentes tipos de letra como o contraste de cores está revertendo as cores. Tudo bem, então não, o que precisamos fazer aqui é criar algum interesse. Então aqui, este quadro de arte, você pode ver que parece muito chato e muito você pode dizer, talvez andar de barco. Então o que precisamos fazer aqui é para esta parte inferior. Vou arrastar alguns. Você pode ver algum patrono ou aqui, mas o patrono que procurarei é convidativo. Então isso parece muito, você pode dizer, muito direto ou muito formal. Então eu quero ter um pouco de diversão ou criatividade e convidar em ação para isso projetado para isso. O que eu fiz é que eu tenho esse patrono, que eu tenho de ah, mercado criativo criativo mercado ponto com. E eu realmente amo isso. Como esses marcadores foram, você sabe, dispostos escuros, tomar marcadores. E eu acho que isso pode estar relacionado ao design da experiência do usuário porque usamos marcadores muito . Então o que eu fiz foi arrastá-lo para a minha loja de fotos aqui assim, e este é o patrono. Eu só movi para aqui arte ou chave de opção para replicá-lo. E eu vou alinhá-lo com isso. Então é basicamente um padrão repetitivo, Então ele está indo para ele perfeitamente bem com a outra parte fora dele. Então agora vamos esconder esse fundo, e você pode ver? Deixe-me ampliar este ponto. Ok, então você pode ver que aqui nós temos a competição entre o foco principal deste design, que é que eu não quero que o usuário olhe muito para este fundo, então eu só quero este utilizável e esta área para estar no foco. Então o que eu vou fazer é eu vou colocar, uh, você algumas sobreposições de cores neste aqui. Portanto, cor da camada de texto excessivamente. E eu vou usar algo, algo grande azul como este. E copie este estilo novamente. Básico aqui da última vez. Então agora você pode ver isso é um pouco você pode ver o contraste entre as formas no topo. Nós temos todos, um muito retangular, muito elegante e muito acabado formas onde eles estão. Você pode dizer que eles são formas muito regulares, e aqui temos formas irregulares na parte inferior. Então este é realmente o contraste entre essas duas coisas. Então eu adicionei isso para adicionar um pouco de criatividade e alguns simples menos no design que nós somos uma criação digital criativa agência digital, algo assim. Então, isso também é supostamente experiência do usuário. Então foi assim que eu consegui criar esses projetos. Então este exercício foi encerrado. E o próximo passo, o que você vai fazer é baixar alguns cartões de visita moke up. Então o que? Na verdade, uma marcação é Deixe-me mostrar-lhe. Este é o cartão de visita Markoff que estou usando. Então você pode ver ou ouvir que este é um cartão de visita. Mock up. E estes são realmente objetos inteligentes. Então, se você clicar duas vezes aqui, ele vai mostrar que é assim que você está indo. Dedo baseou seu cartão aqui. Então deixe-me mostrar o que eu fiz. Então eu realmente selecionei este quadro de arte. Comando de Controle A e Ah, cópia deve. E eu fui a esta base tratada aqui. Então você pode ver agora que não é uma linha porque não tem nenhuma área de sangramento. Então controle um centro. Alinhe. E é assim que você vai conseguir o seu design? Vamos lá, D no de select e vamos usar Sim, Veja como ele se parece. Então aqui temos este cartão utilizável. Você pode ver como ele está olhando. Se você quiser ajustar algo, por exemplo, se você quiser movê-lo um pouco para baixo, não fique. Você pode dizer para não ficar limitado por essas lindas linhas. Então eu vou usar algo assim. E eu também vou usar movido um pouco para baixo. Há usar algo assim e ver se vai ficar melhor. Em seguida, tente isso. Movendo-o no meio. Comando de Controle. Vê? Ok, então isso parece melhor porque nós mudamos um pouco para baixo e também para aqui. Isso está ótimo. É, um Jane, este, esta camada de dedo do pé. Na verdade, eu compro estes. Então, se você está, se você está pensando que o de parece isso parece ótimo. Em seguida eu mudar essa cor e mostrar, você sabe. OK, então é assim que o meu cartão está olhando, e ele está olhando criar. Agora o que eu vou fazer é eu vou exportá-lo seguro para a web e a imagem será. Você pode ver imagem, altura e largura é demais. Então eu vou usar algo talvez 1500 e eu estou indo exportado assim, e isso é tudo. Ok, então aqui temos este cartão de visita. Agora, é assim que projetamos. E é assim que você vai usar algum cartão de visita moke up. Então tente usar um mocha extraído com dentro de um tamanho suportável, que eu posso facilmente ter. Você tenta exportá-lo em um tamanho de variável de visita e aplaudido na próxima atribuição. Então, a próxima tarefa será criar este cartão de visita para si mesmo. Podes usar o teu nome, tua ficção, é companhia ou o que quiseres. Ok, Então eu espero que você tenha gostado desta lição e como eu consegui criar este design e como eu cheguei a este design sobre como eu uso cores diferentes. Qual foi o processo por trás do meu design e como eu usei grades e guias e todo o layout . Então, se tiver alguma pergunta para me fazer, vou adicionar muitas lições, novas lições no futuro e, até lá, , até lá, te vejo em breve. Ficar doente e continuar criando designs de criação 25. Design de cartão para visita: Agora você me viu criando meu processo de design e como eu criei o guarda simples. Agora ex Jordan e você vão criar algo semelhante em. Quero que crie algo mescalino, poderoso, forte. E ainda Morgan e criativo assim projetou um cartão usando todas as cores. Então certifique-se de que as cores também vão, você sabe, ressoar com essa mesma equipe. Então o que eu disse é forte em criativo e tudo o que tentar encontrar as cores que vão combinar com esta equipe. Tente também encontrar déficits que vão combinar com esta equipe. Forte, criativo e Martin. Então estas são as palavras-chave “T”. Vou te dar um cartão de designer, empresa facciosa ou a sua usando seu próprio nome Diana qualquer coisa. Ou John Doe ou o que quiser usar. Tente usar um slogan de um cabeçalho talvez seu nome, e seus detalhes de contato. Está do outro lado. Tente projetar este cartões de dois lados. Eu também estou indo toe link o arquivo do cartão que eu usei o arquivo Photoshopped. Você pode usar qualquer software. Você você quer você, se quiser. Oh, design usando ilustrador ou o que quer que seja. Eu não me importo. Só preciso ver os congeladores. E isso é tudo o que eu vou estar ansioso para ver seus projetos e essa tarefa. Então, vamos começar. - Não. 26. Qual é o próximo?: Muito obrigado por ter tido esta aula. Se você tiver alguma dúvida sobre design ou sobre esta aula, você sempre pode me perguntar na seção da comunidade. Além disso, não se esqueça do dedo direito. Alguns revisam algumas palavras agradáveis. Então, para mim, que eu possa, você sabe, obter alguma inspiração para criar mais aulas como essas. E também não se esqueça de verificar meus outros cursos porque eles são. Eu tenho muitos cursos sobre design de UX, design interface de usuário e freelancing e design visual. Até lá, vejo-te em breve na próxima aula. 27. O efeito de moldura → tópico avançado: Eu vou falar sobre um pouco fora do Vasto. Você pode dizer tópico avançado, que é efeito de enquadramento agora emoldurando efeito. E você pode ter visto, mas você não sabe como usá-lo corretamente. Então eu vou explicar muitos exemplos nesta lição que como você pode usar o enquadramento afetam efetivamente enquanto você está projetando para sites de referência, laboratórios móveis ou qualquer coisa que você está projetando. Então você pode ter visto fotos penduradas em sua casa ou quarto ou na casa de seu parente . Então o que ele faz é que você precisa colocar um monte de espaço em branco ou algum conteúdo em torno sua foto. Ok, então para o enquadramento significa que, por exemplo, por exemplo, se você está projetando algo ou você tem alguns recursos listados em um site, então você está projetando para a seção de recursos. Então o que você vai fazer é usar ah, enquadrar er er médico, enquadrar er er médico, ou talvez algumas linhas ou talvez espaço em branco e adicioná-lo em torno desse contrato. Então você vai enquadrar seu conteúdo assim como uma foto está emoldurada dentro da moldura daquela foto. Ok, então está indo para o dedo do pé. O que ele está indo para OK, então ele vai enfatizar que e ele vai torná-lo mais proeminente e diferente do resto fora do conteúdo em seu site ou aplicativo móvel. Muitas pessoas que eles não sabem como usar corretamente que o espaço em branco do espaço em branco pode ser usado como um dedo do pé de moldura. Você não precisa, você sabe, você sabe, colocar algum quadro colorido ou talvez algum quadro rígido em torno de seu conteúdo. Você pode usar o espaço em branco. Ah, muito espaço Y em torno de seus elementos. Elementos de design dedo do pé fazê-los olhar, você pode dizer enfatizado e ousado. Ok, então você deve ter visto que há molduras onde quando a foto é é o texto neles é muito pequeno e há muito espaço em branco em torno dela. Então, quando você coloca um monte de espaço branco em torno de algo, ele está indo para o pé. Dê mais ênfase e ficará mais limpo ou mais elegante. Você pode ver aqui eu projetei uma pequena tentativa nenhuma ou nenhuma caixa de tanques. E você pode ter visto esse tipo de caixas de papai ou algo assim. Então, se você criar muito fora do espaço em branco ao redor deles. - É. Eles vão ficar ótimos. Portanto, tenha isso em mente que colocar um monte de espaço em branco vai ajudar seus projetos. E não tente. Sabe, acho que isso é demais. Tente usar o máximo que puder. Então, agora estamos indo para o pé. Veja alguns exemplos. Agora, vocês devem ter visto este exemplo muitas vezes porque este é o recente que eu desenhei , então vocês podem ver neste design se vocês olharem para esta seção, ele é um fusível acessível, escalável, Desporto livre. Há um quadro branco quadro que está contendo todo esse conteúdo e você pode ver que ele é enfatizado a partir do fundo. Então eu estou usando realmente o efeito de enquadramento. Então deixe-me mostrar a moldura. Então este é o quadro, e você pode ver como eu estou usando muito espaço em branco em torno do meu conteúdo. E também estou usando cor branca e alguma sombra em torno dele. Então, para destacar este quadro que é elevado e é diferente do fundo. Agora vamos olhar para esta seção aqui, e você pode ver aqui nós temos diferentes cartões fora do uso de diferentes produtos Sinus digitais , e você pode ver se você olhar para um deles. É também o uso fora do efeito de enquadramento. Então, o conceito de cartão, que foi projetado pelo Google Material design e ah, muito fora você pode ver que é usado muitas vezes em todos os APS móveis. É basicamente o efeito de enquadramento, então eles estão usando um quadro do dedo do pé, seu conteúdo dentro dele. Vejamos este exemplo aqui. Como você pode ver, eu projetei este painel. E se você olhar de perto, eu estou usando uma moldura muito grande em cima de um dedo do pé de imagem borrada. Mostre isto. Você pode ver o quadro do esconderijo e deixe-me destacar isso. Então este é o meu quadro, Ok, então você pode ver que este é o meu amigo e todo o conteúdo em torno dele. Eu não estou usando apenas a cor de vie para que você possa ver o espaço por aqui e o espaço por aqui à direita e à esquerda. Ele está sendo usado como um quadro para que você possa ver que temos algum espaço na parte inferior, à esquerda e à direita, e na parte superior Então eu estou usando o efeito de enquadramento para destacar esta área de conteúdo principal ou seção de conteúdo principal fora deste painel aqui Então você pode usar todos esses conceitos de enquadramento de tese de muitas maneiras. Você pode ver que esses botões foram destacados. Pequenos quadros que estou usando aqui. Você pode estar rindo agora. Então, uh, este é realmente o efeito de enquadramento que você poupa. Deixe espaço em torno dele assim e destaque o conteúdo entre ele. Da mesma forma, eu estou usando muito grande quadro em torno de todo o meu painel de controle. Então vamos ver alguns exemplos de outros designers porque eu acho que eu sou apenas um grande nerd. Então vamos ver mais alguns designers de experiência. Então o primeiro exemplo é deste designer, Anwar Hussain, e eu acho que ele projetou esta página de destino e é muito brilhante. Muito bom, muito simples. Claramente fora. Bom uso fora das cores. E se você olhar para esta seção aqui, deixe-me ampliar esta seção. Então, aqui temos esta seção atenciosa adesão Gatien frente e console. Então este é, na verdade, o efeito de enquadramento. Então este conteúdo, você pode ver que está dentro de um quadro novamente. Se olharmos para outra secção em mim, mostrar-vos. Uh, nós estamos muito bem, então este eu quero receber atualizações Cancelar assinatura a qualquer momento. Sem spam. Então você pode ver esta seção para inscrição também está usando efeito de enquadramento em Dhere. Temos novamente o conteúdo do efeito de enquadramento dentro deste quadro. Então, nunca pense que o quadro é apenas você pode dizer Ah espaço branco para que você possa usar qualquer cor como aqui. Ele usou algumas cores em torno dele Cores muito pálidas. Você também pode usar alguns clientes em torno dele. Deixe-me mostrar-lhe um exemplo aqui você pode ter visto isso antes e você pode ver novamente os olhos no centro. Ele está usando o efeito de enquadramento. Então isso está fazendo com que pareça ótimo espaço ao redor. Como uma moldura de fotos. Deixe-me mostrar-lhe mais exemplos. Aqui temos este. Você pode olhar para isso aqui Imagem dentro e só parece uma moldura de foto. Agora aqui você pode ver que o designer está usando um quadro para enquadrar esta foto e você pode ver o espaço ao redor. Esta fotografia está parecendo uma moldura. Da mesma forma, este texto também está dentro deste quadro que você pode ver. Então este é o uso fora do efeito de enquadramento novamente. Não confunda que o enquadramento do fato fester pode ser usado apenas com o espaço em branco. Você pode usar patronos em torno dele. Ok, então aqui neste pacote, volta é projetado. Você pode ver que isso parece ótimo. É do Mamba Studio e, Ah, adorei seus desenhos. Você pode ver que esta informação central que é última Selva Cafe. Orgânica. Está rodeado pela textura. Ou você pode ver o patrono do texugo ao redor dele. Então, este é um padrão bonito e um ótimo design de produto design design de embalagem. E aqui você pode ver que eles estão usando realmente este patrono para o efeito de enquadramento. Então eles estão emoldurando esta seção de plano fora laranja amarelo e este texto e emoldurá-lo com alguma textura. Então este é realmente o contraste. Este centro está realmente jogando, e lá fora é todos os clientes. Então este é outro, na verdade, no conceito que eu ensinei a você contrastar. Então aqui você pode ver Olhe para eles de perto. Eles estão parecendo ótimos. Este é realmente o efeito de enquadramento novamente. No quadro é muito grande. E a imagem é muito pequena. Então você pode ver também, há algumas partes sobrepostas. Criar execução. Design claro. Eu realmente adorei este pacote de design de pacote. Ok, então vamos ver mais um exemplo. Ok, então isso é das várias honras Isabel Sosa e o elenco te enganaram em Londres e este é um ótimo design de novo. E aqui você pode ver o como usando o novamente o efeito de enquadramento, mas um pouco diferente. Então o que eles estão fazendo é que eles têm Eles estão usando esta textura que eu zoom usando esta textura nestas imagens Estes usuários e eles estão usando apenas no topo da página para que o quadro superior tem esta textura eo resto fora do quadro não tê-lo. Só tem você pode ver você pode ver apenas a peça do Voigt. Então, na verdade, eles estão tentando usar um conceito que eu falei na minha outra lição, que é gerar idéias onde o conceito deve mostrar e esconder. Então eles estão mostrando alguma parte e escondendo o resto fora da parte. Então, aqui você pode ver um design muito grande. Eu gostaria de poder eu poderia projetar algo como esta grande execução, grandes combinações de tipografia, grande estilo, grandes cores, grande uso de efeito de enquadramento com o uso deste padrão geral, um grande design. Então isso é tudo que eu espero que você tenha entendido agora o conceito de efeito de enquadramento e como você pode usar isso em seu APS móvel, Web, abs, abs, sites ou qualquer que seja o seu design. Então você em breve na próxima lição, espero que eu esteja fazendo mais lições como estas para este curso. E até lá, continue observando e melhorando. Não se esqueça de enviar suas tarefas e vê-lo em breve na próxima lição.