Design de layout criativo para designers de web e UI ► chega de layouts sem graça | Muhammad Ahsan Pervaiz | Skillshare
Menu
Pesquisar

Velocidade de reprodução


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

Design de layout criativo para designers de web e UI ► chega de layouts sem graça

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.

      O que este curso vai cobrir ?

      2:28

    • 2.

      Noções básicas do design de layout

      8:59

    • 3.

      O conteúdo define o layout

      7:44

    • 4.

      O que são grades, calha e margem

      8:24

    • 5.

      Como combinar colunas em grades

      4:46

    • 6.

      Linha básico e ritmo vertical

      11:55

    • 7.

      Blocks verticais para espaçamento

      9:12

    • 8.

      Equitação do layout com blocos

      10:39

    • 9.

      Equitação do layout

      10:20

    • 10.

      Layout centrado em único coluna para aplicativos web e móvel

      9:33

    • 11.

      Design de layout centrado

      2:33

    • 12.

      Dois layouts de coluna com exemplos

      9:55

    • 13.

      Projeto o layout 2

      2:15

    • 14.

      Layout de múltiplos colunas no Design de web

      8:51

    • 15.

      Layout de várias colunas

      2:01

    • 16.

      7:03

    • 17.

      Projeto ► de flores

      1:37

    • 18.

      Grid de Masonry em web Design e design de aplicativos para móvel

      9:59

    • 19.

      Killing com combos porcentagem no Design no de layout

      9:14

    • 20.

      Uso criativo de marcas no design de layout

      10:50

    • 21.

      Projeto ► a criação de marca criativa

      1:13

    • 22.

      Fora de caixa e sobreposição no Design no

      7:30

    • 23.

      Design web e design para aplicativos para móvel de exemplos de caixa

      11:14

    • 24.

      Design de layout sobreposição

      1:27

    • 25.

      Como usar a ênfase no design de layout

      10:59

    • 26.

      Como usar o movimento no Design de layout

      7:15

    • 27.

      Centrado com a técnica de design de alinhamento esquerda

      15:18

    • 28.

      Agradecemos a pessoas a

      0: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.

2.579

Estudantes

38

Projetos

Sobre este curso

O layout é um coisas que contou a história do seu design. Como seu site ou design web desdobrar a história, tudo depende do layout. Se seu layout é ótimo, seu envolvimento o usuário vai subir como o vulcão de nova erupção

É uma das áreas de design onde a maioria designers web e designers web web designers e usuário web web web designers têm um trabalho com forte efeito. Escrevi algumas técnicas de design básicas que descobri depois de seguir a data de início e analisar centenas de designs de web e web e Mobile Designs Designs de muitos designers

Então, não se mantenha preso com layouts de caixa chatas

As coisas que você vai aprender neste curso

  • Crie layouts mais envolventes e poderosos

  • Não projete layouts semelhantes de chatas, como outros designers de UI

  • Por que criar layouts (seu propósito)

  • O que são grades, galhas e margens

  • Como usar o layouts de dois ou vários colunas

  • O que são layouts de flores ao usar em eles

  • O que é o de masonry

  • Como usar margens de forma criativa no site ou o layouts para aplicativos móvel

  • Como usar de caixa e sobreposição no design de layout

  • Figurar uma regra simples que pode tornar seu layout excelente

com tons de exemplos e layouts de amostra. Eu a explicar todos os princípios do design em termos simples para que seja mais fácil para você be Tenho mais 5 trabalho para que você domine essa habilidade de design no layout

Então, vamos começar a criar layouts incríveis agora

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

Level: All Levels

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. O que este curso vai cobrir ?: design é como uma história. Então, sempre que você estiver contando uma história para seus usuários via design, seu layout vai decidir como essa história vai ser desdobrada. Como você está indo. Conte ao usuário a primeira parte da história, a segunda parte da história e, em seguida, as reviravoltas ou parte interessante da história ou características fora de seu produto Então seu design está indo dedo do pé desdobrar de uma maneira muito agradável criativo. Se o seu layout em linha reta para que o design de camada seja mais importante, faça parte do seu aplicativo móvel, projete seu site, projete seu design de página de destino, o que você estiver projetando layout vai desempenhar um papel vital na decisão como sua história será contada aos seus usuários. Então este curso vai ajudá-lo a entender e colocar algum vaso criativo fora desdobrando essa história e como você está indo para fora, uh, uh, colocar diferentes, tipos de desenhos e como diferentes layouts criativos são que estão indo para ajudar você a se destacar da multidão. Então outros designers eles podem estar fazendo layouts simples. Quatro colunas ou quatro caixas diferentes. Vou mostrar-lhes um monte de técnicas que vão ajudá-lo a sair dessa caixa e criar fora criativamente. Nós vamos ver um monte de diferentes, basicamente, saídas. Nós vamos entender diferentes colunas, grades, sistemas de guia, sistemas de guia, diferentes laboratórios móveis onde você pode aplicar essas idéias que eu vou te dar alguns exercícios para dominar essas habilidades. Então, se você está tendo dificuldade como eu quando eu comecei, projetou a parte mais difícil para mim WAAS design layout. Então eu continuei analisando diferentes projetos e eu classifico, você sabe, entender técnicas diferentes, e eu vou explicá-los de maneiras simples para que você possa implementar essas técnicas no design de aplicativos móveis você eu design e design de site. Então eu espero que você aproveite as pontuações. Se tiver alguma pergunta, pode sempre me fazer, e espero vê-lo em breve dentro das escolas 2. Noções básicas do design de layout: Vamos começar com um pouco de básico. Agora, a primeira pergunta, sempre que você estiver indo para começar seu projeto, você deve perguntar é qual o propósito que este layout serve? Por que você está criando esse layout? Quais são as informações que você está transmitindo ao seu usuário? Então estas são, na verdade, fora das poucas perguntas que você deve começar. Se o seu usuário não conseguir entender o que você está tentando mostrar a eles ou o que você está tentando, você sabe, transmiti-los do que o seu, então seu layout é uma falha. Agora eu vi um monte de designers que eles criam layouts muito criativos, e eles mostram ah muitos estilos diferentes nos layouts. Mas o problema com seus projetos é que ele não é utilizável. Então, a primeira coisa é que você precisa entender que estamos criando um layout para mostrar as informações ou as imagens ou nosso conteúdo ou nossa mensagem para nossos usuários de forma significativa e digerível. Então esta é a cobertura. A segunda coisa é, você precisa criar alguns em apenas pontos em seu layout, então você precisa dedo do pé, tem algo que mostra-lhes dedo do pé. Explore este layout um pouco mais. Ok, então estas são as primeiras perguntas que você deve sempre fazer aos seus usuários. Agora vamos passar para a próxima coisa, que também é um importante que é uma prioridade. Agora. A segunda pergunta que você vai fazer a você usuários ou seus clientes ou seu negócio, ou que a pessoa para quem você está projetando é qual é a parte mais importante deste design . Agora esta é, Ah, pergunta, que eu acho que muitos designers sentem falta do que seus usuários vão ver pela primeira vez em seu design. Os assuntos são muitos. Estes são realmente primeiras impressões e uso usuário está indo toe com base em suas decisões em suas primeiras impressões ou a primeira vez que informações eles estão indo para ver. Como você vai começar sua história de design? Como a história vai se desenrolar para que você possa ver quando vê um filme ou assiste a um filme. Os primeiros 5, 10 ou 15 minutos estão indo para o pé. Criar algum interesse no filme, então eles vão mostrar às vezes algo no futuro, e então eles vão voltar e mostrar isso uma hora depois ou uma hora antes disso, ou coisas assim. Então você vai criar algum interesse em seu estudo e como você vai desdobrá-lo que você possa ter ouvido o nosso termo chamado Full and Design four é, na verdade, a primeira instância fora de seu design na janela de espectadores. Por exemplo, se eles estão visualizando com ah, desktop, eles podem ter dobrado fora. 700 pixels são 800 pixels em um dispositivo móvel. Eles podem ter 600 ou algo assim. Então estes são na verdade os seus quadros. Se você viu uma fotografia, há uma moldura que contém essa fotografia. Portanto, se alguma imagem estiver fora do quadro, você não poderá visualizá-la. Você não pode vê-lo, então você precisa pensar de uma maneira muito prioritária em primeiro lugar qual informação é a mais importante. Devo obter o formulário de inscrição na parte superior, ou devo incluir algum vídeo na parte superior? Portanto, estas são algumas perguntas que você deve fazer à sua empresa e aos seus usuários. Agora, a terceira pergunta é qual é o tipo de conteúdo ou o meio para o qual você está projetando. Então, se o seu design vai ser lido em um dispositivo Kindle, ou se seus usuários vão visualizar este aplicativo em um representante em um celular. Tudo o que eles vão consumir este conteúdo em industrial, PC ou laptop. Então, estas são realmente as perguntas que você vai fazer antes de iniciar seu design de camada . Portanto, existem na verdade dois tipos fora de tipos básicos, fora de sites de conteúdo ou projetos. Um design é o design pesado de conteúdo, então temos um monte fora de impostos. Temos muitas imagens, como sites de artigos diferentes de um blog de sites de notícias, coisas assim. Então temos o segundo tipo, que está focando em poucos produtos ou apenas um produto. Então, quando temos um produto, por exemplo, um aplicativo móvel ou jogo móvel, temos muito menos conteúdo. Nós não queremos, você sabe, escrever você sabe, como centenas de parágrafos para esse produto. Então vamos ter mais foco em linhas muito pequenas, muito poucos recursos que vão convencer nossos usuários a comprar nosso produto. Então, esses são dois tipos diferentes fora de designs de camada, que estão indo para o pé com base em seu conteúdo. Então o conteúdo está realmente indo forma do dedo do pé. Seu layout e outra pergunta que eu vou fazer ao meu negócio ou aos meus usuários é que tipo de fusíveis eu estou projetando para, mas que eles são usuários idosos lá, pessoas idosas e eles são crianças. Eles são da geração milenar, ou as pessoas modernas são. Eles estão em seus trinta ou quarenta anos. Quão bem, eles estão familiarizados com a tecnologia. Então, estas são as perguntas. Por exemplo, se eu estou projetando para crianças, eu vou ter palavras mais simples da Grã-Bretanha maior e, ah, cores muito brilhantes ou afiadas para os Burtons. E também vou apresentar a informação em um layout simples. Näo vou, vocês sabem, mover ao redor do Senhor e criar um lugar muito único onde meus filhos ou idosos estäo tendo dificuldades em encontrar a informaèäo que querem. Portanto, isto é muito importante. Se você tem ah, pessoas idosas são crianças ou diferentes tipos de usuários, você vai ter diferentes projetos fora. Por exemplo, se você viu que agências de design, eles usam muita criatividade em seus sites ou projetos da Web porque eles têm esse tipo usuários, espectadores ou consumidores. Então, sempre que alguém está indo toe goto, uma agência criativa, eles vão escondê-los para algum trabalho criativo, então eles mostram sua criatividade em seu layout design seu site coisas assim. Portanto, isto é muito importante. Você precisa considerar o tipo de usuário que você está projetando. Por enquanto, o último design básico de camada fora é função sobre forma. Então este é um ditado muito antigo sobre design gráfico. E se você é de um fundo de design gráfico, você já sabe disso. Não, o que isso realmente significa? Isso significa que se você tiver um site ou aplicativo móvel ou página de destino ou qualquer design, seu layout deve suportar a funcionalidade fora do seu design que você está projetando para primeiro a funcionalidade fora do seu aplicativo, sua página da Web ou qualquer outra coisa que você estão projetando. Então a segunda prioridade é ir para a estética ou você vai, você sabe, adicionar algumas cores ou alguma criatividade. Então, aqui meu conselho é, limite sua criatividade. Layout deve primeiro servir seu propósito. Então isso significa que nós estamos indo para criar um aplicativo utilizável em vez de inutilizável muito criativamente fora. Então, sempre que você está projetando um layout, você está indo dedo do pé. Mantenha sua criatividade sob controle. Não tente criar um layout que é muito distorcido ou muito difícil, e ele não suporta a funcionalidade fora do APP, por exemplo, você já viu um monte de APS. Nós, como você colocar o pedido eo botão fazer pedido está na parte inferior. Agora está no fundo. Por algum motivo, é um pouco de usabilidade demais e facilidade de uso. Então, se você tentar colocar esse botão na parte superior ou no meio da tela, ele vai criar alguns problemas para seus usuários. Portanto, tenha isso em mente que a funcionalidade usabilidade na legibilidade da legibilidade da estes estão indo toe tem mais importância do que a sua forma ou uma estática ou coisas assim. Então isto vai resumir esta lição. Espero que você tenha gostado e vê-lo em breve na próxima lição. 3. O conteúdo define o layout: Este é outro erro que muitos designers realmente cometem, e isso é sem o seu conteúdo. Primeiro, você não pode criar um layout que você não pode definir. Seus diferentes elementos estão indo para ir, como eles vão para cima um do outro ou lado a lado ou coisas assim. Você não pode decidir o layout se você não tiver seu conteúdo, então você não pode decidir quantos blocos de conteúdo você tem. Por exemplo, temos um cabeçalho um subtítulo do que temos poucas imagens no cabeçalho. Então nós temos, como seis ou sete elementos em nosso cabeçalho. Então, estas são as perguntas. Estas são as coisas que você precisa ter antes de iniciar qualquer design de layout. Então, se você tem três itens que você pode ter, você pode organizá-los. Em três caixas paralelas. Você pode ter uma caixa um pouco maior e duas caixas do lado direito, então há possíveis arranjos que vão ser decididos pelo número de elementos que você tem. Portanto, obtenha o conteúdo do seu CEO da empresa ou de outro cliente para o qual você está projetando ou quem vai escrever esse conteúdo agora. O conteúdo não significa que apenas o texto e as imagens que você tem possam ter rádios. Você pode ter ilustrações. Você pode ter ícones. Então, tente juntos todas essas coisas diferentes antes de começar seu design. Você vai perguntar aos seus clientes e os e-mails que eu preciso deste tipo de imagens que eu não preciso. Eu não quero essas imagens de baixa qualidade ou coisas assim. Você também precisa do dedo do pé obter ícones que a nossa equipe semelhante fora de suas imagens ou seu texto. Então reunir todos os dados e pedir ao seu cliente que me dão enviar todas essas imagens, o conteúdo, o taxado para que eu possa começar a trabalhar no meu layout ou design. Agora deixe-me mostrar alguns exemplos de como o conteúdo diferente vai moldar seus designs. Então deixe-me, vamos ver alguns exemplos. - Não. Aqui estão alguns exemplos. Os sites forçaram seus distritos CS. É um site pesado conteúdo para desenvolvedores da Web. Embora sejam, eles estão usando um monte de grandes cores, bom layout, site muito diferente e único. Mas ainda é um site pesado conteúdo. Temos muita mensagem aqui. Você pode ver, então temos diferentes artigos aqui que você pode ver ou ouvir. E, de novo, temos alguns artigos e em destruição. E se abrirmos um artigo, por exemplo, este, por exemplo, este,então você vai ver que tudo está preparado para uma melhor leitura. Então temos ah, mais fácil de navegar, mais fácil de ler, mais fácil de digerir em diferentes seções que você pode ver aqui. Então este é realmente o propósito deste site. Agora, se passarmos para o próximo site de conteúdo Harry, que é BBC English, BBC porta com e vocês podem ver que temos notícias, temos as melhores notícias aqui. Então temos aqui algumas notícias com alguns textos e imagens. Então é basicamente feliz com texto e imagens. Então você pode ver que este é realmente um outro exemplo de um site pesado de conteúdo. Temos muito conteúdo. Agora vamos passar para este. Este é Bolivar Club sietch escuro, e você pode ver por aqui não é um muito conteúdo ter sites. Se formos para baixo, você pode ver que temos uma saída muito criativa. Texas se moveu um pouco para a direita e você pode ver estes simples e emissões. E se nós movermos para baixo, você pode ver que temos menos imagens, menos linhas fora do texto você pode ver que temos um parágrafo no título. É isso. Então este é o fim. Então, este não é realmente um site pesado de conteúdo. Baseia-se em algum serviço, sarees simples ou um ou dois serviços e site muito simples e único. Se passarmos para o próximo exemplo que é Fitbit Ah, isso é ajuste versa. Light Edition site E você pode ver que isso está realmente focado em um único produto. Então, temos muito grande imagem do produto grande com grande título do produto e uma loja sem botão. Então, novamente, temos algumas características aqui com o com a imagem de fundo. Então, novamente, nós temos alguma imagem e algum imposto ou aqui então nós temos novamente algo novo e você pode ver ou ouvir. Temos muito poucas linhas fora do texto porque estamos nos concentrando em um produto para que você possa ver que isso está construindo a imagem dos produtos do produto nos usuários tinham. Então eles estão mostrando imagens muito poderosas. Você pode ver aqui eles têm seu aplicativo, tubarões de tela e então nós temos diferentes, hum aqui, características diferentes. Mais uma vez, temos algumas características à esquerda e à direita. Temos imagem está mudando com os recursos para que você possa ver algo assim. Então, novamente, você pode ver uma imagem mortal usando este relógio. E poucos decks e linhas estavam aqui. Então você tem a idéia de que não é um site de conteúdo Terry. Na verdade, alega-se que é um único produto e que se concentra num único produto. Vamos ver outro. Ok, então aqui temos alguns, eu acho que empresa de design ou alguma agência de design? Design de interiores, eu acho. E você pode ver que eles criaram um simples, mas exclusivamente fora. Eles têm, tipo, três colunas 12 e três à esquerda. Eles têm poucos menus e ataques no meio. Eles têm imagem à direita. Eles têm outros encontros ou coisas assim. Informações sobre o projeto. Então, novamente, nós temos muito poucos impostos porque ah, aqui, trabalho deles vai mostrar o que eles realmente podem fazer. Então você pode ver aqui belas imagens deste design de escritório. Isso é realmente em seu site de design e você pode ver o próximo projeto. Então isso está realmente focando em um único serviço. Então você agora entendeu o que eu realmente quis dizer por ter o conteúdo para. Então, se você tem todo o conteúdo, por exemplo, você sabe que na primeira tela, por exemplo, esta aqui, se você tem todo esse texto, esses recursos, você já sabe que tem cinco recursos. Então você vai mostrá-los neste Desta forma, se você tem como quatro características, você pode tê-los mostrado em quatro caixas diferentes em cima do outro. Então deixa-me mostrar-te. Então, como você pode ver o quê? Aqui eles têm três características. Então, em vez de mostrá-los horizontalmente, eles tomaram a direção vertical. Então esta é outra opção com o layout, Então o conteúdo vai realmente definir o seu layout. Quanto conteúdo complexo você tem, quantas colunas você está indo para fazer que você está indo para mostrá-los em 50 50 coluna ou você está indo dedo do pé, tem algum outro layout. Então, espero que você não tenha destruído a ideia desse conteúdo ter conteúdo antes de iniciar qualquer design de camada. Então eles não cometem esse erro? Estou lhe dando um conselho sincero. Vamos passar para a próxima lição. 4. O que são grades, calha e margem: re designers. Reutilizar cumprimentos biqueira moldar nosso design para moldar nosso layout e organizar diferentes elementos de design acordo com a grade. Agora, por que usamos notas? Porque mentes humanas, gostamos de coisas organizadas. Gostamos de camadas equilibradas. Tentamos encontrar equilíbrio mesmo com o desequilíbrio na natureza ou nas coisas. Então vamos usar notas diferentes, e vamos alinhar nossos diferentes elementos de acordo com eles, para moldar nosso design. Agora vamos entender o que realmente nossas notas se você já sabe o que nossas notas, margens, calhas ou termos diferentes, pular esta lição Para aqueles que não sabem, Vamos passar para o próximo slide. Agora você pode ver que estou mostrando um credo de 12 colunas para design de site, e é chamado Basicamente Bootstrap Bridge. Boot Shop é uma estrutura de design para desenvolvedores da Web, então vamos ver o que nossas diferentes partes fora deste grau. Então você pode ver no meio. Temos 12 linhas escuras ou linhas azuladas escuras. Eu diria que são linhas pretas apenas por simplicidade. Certo, então temos 12 linhas pretas no meio. Estas são na verdade outras colunas, então nossos diferentes elementos de design iam colocá-los em duas colunas ou três colunas são quatro colunas, dependendo de seus tamanhos e raças e seu arranjo no meio. Você vê linhas laranja e que essas são realmente Curtis. Esses são, na verdade, espaços entre colunas diferentes. Então agora eles são 30 pixels e a coluna Bert é 65 imagens. Então esses espaços vão realmente ter algum espaço dentro de nosso conteúdo ou dentro nossa página à esquerda e à direita. Você pode ver essas áreas azuis que são, na verdade, margens. As margens estão indo para o pé. Tenha um pouco de espaço para respirar em torno do seu design. Então, as calhas vão ter algum espaço para respirar dentro do seu design e as margens vão tê-las do lado de fora. Então estes dois são muito, você pode dizer muito importantes. Agora eu vou compartilhar um recurso onde você pode baixar todos os tipos diferentes fora diferentes sistemas de grade para diferentes dispositivos e diferentes Você foi projetado ferramentas para figo ma para Roby X t para a loja para esboço. Não é por mim, e é de alguns Você é empresa de design, então eu vou compartilhar esse link. Normalmente as uso em meus projetos. Eu só abro a grade e começo a construir meu projeto a partir daí. Então, certifique-se de que seu download que eu estou indo para o dedo incluir o link. Agora, deixe-me mostrar como você vai usar essas notas e como eu tenho sido o design simples só para mostrar como usar essas caixas. Agora você pode ver tudo aqui no topo. Aqui, nós temos um grande título, que é este e eu estou usando Ah, todo o vert fora deste aqui e apenas no centro. Alinhando-o. Então, se você tem algum elemento que está alinhado no centro ou no meio fora do seu design, você não vai se preocupar com seus berços. Então esta é também a linha central, e esta carga também é centrada Linha. Mas você pode ver ou ouvir que este fardo está se estendendo por quatro colunas aqui, então você pode ver que são na verdade 1234 colunas, incluindo suas calhas. Então, sempre que você está colocando ah, seus objetos de design, eles estão indo para o pé. Eles vão tomar como, duas colunas inteiras ou talvez três colunas e ou talvez coluna completa 678 Mas há uma parte porque eu vi um monte de estudantes que eles começam a cometer este erro. Não limite a sua criatividade que vamos ter um botão que vai encaixar perfeitamente . Essas quatro colunas, você pode ter um fardo como este. Tudo depende das suas ideias. E você pode Você não está sempre indo para o pé. Use as palavras e alturas de seus elementos. De acordo com Toa este roteiro, eles só estão lá para alinhar coisas diferentes. OK, então agora vá para a próxima. Você pode ver a próxima seção. Estamos à frente aqui. Eu tenho este gráfico à esquerda, que é uma ilustração, e você pode ver que eu tenho. Ah, em 1234567 colunas. Então está pegando sete colunas aqui. E então eu deixei essa margem e eu comecei o meu Isso é basicamente bom. E então eu comecei meu texto saindo descoberto. Agora, o que isso realmente significa é que sempre que você está alocando seu número de notas para um conteúdo, você está indo para fora. Ah, e o próximo vai ter uma distância entre eles. Então precisamos de alguma distância. Por isso, temos de deixar esta margem. Então tente entender isso. Por exemplo, se eu tentar o dedo do pé, , digamos que eu tento apertar isso. Opa, eu tentei o dedo do pé. Mova isto. E por aqui. Agora você pode ver que estou usando 1234 colunas aqui. E eu estou deixando essas duas calhas e isso realmente ligue para ele daqui. Não, eu não posso fazer algo assim, embora eu possa fazer isso. Mas isso na verdade significa que estou pegando 12345 colunas. Então, se você movê-lo para aqui ou para ali, você está usando cinco colunas. Então, sempre que você não vai deixar Ah, coluna inteira, você vai deixar este espaço uma coluna e é scooter. Ok, então você agora se eu quiser O organizar o meu você pode ver esperanças X mover isso. Vou movê-lo para cá. Agora está tomando quatro colunas, não cinco. Mas sempre que sorrio meus elementos de design, ele começa a ocupar a próxima sarjeta. Na verdade, está pegando a próxima coluna. Portanto, certifique-se de que você está projetando e você entende como isso realmente cria trabalho. Deixe-me ir à loja e mostrar-lhe o que eu realmente quis dizer, vamos, ok, então se eu quiser espremer, talvez eu queira ter mais espaço. E eu quero, você sabe, fazer as pazes sobre Hit. Ok, então agora você pode ver. Embora eu tenha reduzido o tamanho deste gráfico, ele ainda está tomando 1234567 colunas. Então, se eu tentar reduzi-lo um pouco mais Ok. Então aqui, ainda está pegando sete colunas. Se eu quiser tê-lo tirando seis colunas, eu tenho o dedo do pé para longe deste cortador. Agora está tomando 123456 colunas. E deixamos uma coluna aqui. Então isso está realmente entendendo como você vai usar essas grades? Muitos designers, meus alunos, cometem erros. Eles não sabem como usá-los. Então eu acho que isso vai deixar sua mente clara sobre a sua. Aumentar. Se você ainda tem perguntas, você pode fazê-las. Já vi alunos que me fizeram umas 10 perguntas em um dia, e eu realmente aprecio isso. Ok, vamos passar para a próxima lição e cavar um pouco mais em notas 5. Como combinar colunas em grades: Agora. Já aprendeu sobre o Griggs? - Não. A questão é como vamos combinar diferentes colunas dentro de uma grade. Por que devo combinar quatro colunas para este conteúdo? E por que não seis colunas ou metade das colunas? Então vai depender do conteúdo que você tem. Se você tem poucas linhas, você pode que eles podem caber em três colunas. Se você tiver apenas um logotipo, ele pode caber em duas colunas. Então, esta é realmente a pergunta que você vai fazer que seu tipo de conteúdo vai definir suas caixas e layout. Então foi isso que eu quis dizer. O seu conteúdo. Se for pequeno, vai caber no reboque. Colunas menores. Número de colunas. E se tivermos uma imagem muito grande, pode ocupar 12 colunas ou até mesmo ir para fora disso. Então deixe-me mostrar e ilustrar isso com um exemplo que vimos na última lição. Então vamos ver agora. Este é o mesmo desenho que mostrei na última lição. E você pode ver que eu mudei um pouco fora da sobrecarga de layout. Então você pode ver que temos ah gráfico à direita temos 123456 colunas e a estrutura aqui também está tomando seis colunas ou aqui para que você possa ver ou ouvir É até aqui, mas na verdade ele está tirando seis colunas off. Sempre que você é desenvolvedor ou trimestre, eles vão para tribunal este site. Eles vão desenvolver este site. Eles estão indo para o pé. Localize seis colunas para as pilhas aqui e alinhe à esquerda. Então você pode ver que eu mostrei a você na última lição que ou você pode alinhá-los no meio ou você pode tê-los na esquerda. Então isso é totalmente diferente agora. Na próxima seção, você pode ver que temos nossos serviços PIB, nosso PIB são ou esses ícones que temos assim ícones e este texto temos texto muito pequeno. É como três linhas ou no máximo quatro linhas. Então o que eu fiz foi na verdade localizar quatro colunas para cada uma delas quatro colunas do que uma sarjeta aqui. Mais uma vez, temos quatro colunas aqui. Mais uma vez, temos aqui. Então, novamente, temos quatro colunas estavam aqui, então você pode ver isso é. Na verdade, estamos. E é assim que estamos usando a Ingrid do Joe. Então nós estamos deixando essas calhas para que os dedos tenham algum espaço dentro desses três blocos de conteúdo , então você precisa ter isso em mente. Estes são três blocos de conteúdo e vamos de selecionado em. Além disso, você pode ver aqui de novo. Temos dois blocos de conteúdo diferentes um e, portanto, estes são dois blocos principais. Um é, na verdade, a introdução ou um subtítulo. Assim como a linha de etiqueta e, em seguida, um fardo. Então, à direita, temos uma ilustração. Então, estes são na verdade dois blocos de conteúdo diferentes que temos. Então, na verdade, estamos projetando em blocos. Certo, então, , o que mais é isso? Sempre que você estiver projetando usando grades Não pense apenas em números como 678 Tente pensar em porcentagens como esta é 50% e isso é 50%. Então temos colunas grandes colunas que são 50 50% tomando um pouco 50% para esta imagem ou ilustração, e 50% para o conteúdo. Então aqui temos 33% ou 33,33 33,3 t e 30 pontos TT. Então é assim que você vai pensar. Se você quer ter um design flexível ou responsivo, você não vai pensar em termos desligados. Duas colunas, três colunas ou 12 colunas de 16 colunas ou sete colunas. Você vai pensar em porcentagens que este layout tem 60% imagem e 40% texto e coisas assim. Então este é realmente um conceito muito importante. É por isso que eu criei esse design, e eu o troquei e o alterei para cima para mostrar que um único conteúdo tem vários layouts. Não, eu espero que você tenha entendido o significado desses credos e como você pode limpar diferentes layouts. Como você vai pensar em termos de porcentagens e criar seus layouts. Se tiver alguma pergunta, me pergunte. Vamos passar para a próxima lição. 6. Linha básico e ritmo vertical: Agora já falamos sobre colunas e sistemas de grade, mas que são basicamente horizontais na direção direita esquerda. Agora vamos falar sobre espaçamento de cima para baixo, que é chamado de grau vertical ou ritmo vertical. Agora eu falei muito sobre isso no meu curso de tipografia Gore, mas agora eu vou repetir novamente porque é muito relevante para o seu layout e espaçamento. Agora, se você olhar para aqui, eu mostrei essa base para não. A primeira coisa que você precisa estabelecer é sua base. Quatro. tamanho do beisebol é, na verdade, o quarto que você vai usar para todos os seus parágrafos ou 90% desconto em seus parágrafos. Esta será a base de todos os seus cálculos. Agora, cada forte qualquer tipo de letra que você perder, você terá alguma linha. Altura da linha é, na verdade, a distância entre duas linhas. Você pode ver o de cima e o de baixo. E se eu clicar aqui, você pode ver à direita. Temos 24 linhas de espaçamento online. Esconder. Se eu tentar aumentá-lo, você pode ver que as linhas estão indo para o pé, desmoronando e tem mais espaço nele. Agora esta altura da linha vai jogar uma regra muito essencial no seu ritmo vertical vertical maior . Então o que fazemos é estabelecer uma base para tamanho do que uma altura de linha, e então multiplicamos ambos esses valores 18 multiplicados por 1,3333 e é quase mais próximo de 24 pixels. Agora, esses 24 pixels serão na verdade a base, ou você pode dizer unidade baseada fora de sua grade vertical. Agora eu vou mostrar a vocês a nota vertical no Adobe X D. Você pode fazer isso para a loja. Você pode fazer isso em um esboço. Se você me quiser, eu posso criar um tutorial do YouTube sobre isso para criar verticalmente eles em todos os três thes três você ferramentas de design branco. Ok, então baseado em bom, nós temos a altura da linha de base. Multiplique rodapé, altura da linha multiplayer. Temos Baseline Creed. Ele está tentando quatro pixels. Agora você pode ver que isso é realmente deixe-me mostrar-lhe como você pode fazê-lo. E você pode ver que isso não é na verdade nenhuma OTAN 18 24. Então isso é realmente nós tivemos usando telefone baseado e altura de linha de 1,33 que vai ser 24. Agora, deixe-me mostrar-lhe um exemplo. Deixe-me mostrar-lhe o mesmo design que fizemos no passado. E se formos até aqui, deixe-me esconder esta nota repetida e sobre este conteúdo, ou aqui agora, vocês podem ver que é a mesma coisa que projetamos. Mudei um pouco o layout. Temos linha central, tudo no topo. E então temos esta nossa seção de serviços. Agora você pode ver o espaçamento, como eu vou. Uh, não, que este texto este título e a distância entre o subtítulo deve ser assim como eu vou saber a distância. Ah, na distância vertical vertical vertical entre meus itens diferentes. Por exemplo, este. Vamos clicar aqui. E se eu pressionar arte ou opção tecla, você pode ver que eu posso ver a distância entre comprados fora deles. É quase 88 pixels em. Então, se eu clicar novamente aqui, este 1.3 novamente se eu clicar sobrecarga é 46. Ok, então mais uma coisa é que no web design, altura da sua linha funciona de forma diferente. Então você pode ver que temos se eu selecionar este é 24. 36 é a altura da linha para este e 24 é o tamanho. Da mesma forma, temos 67 67 é este tamanho para a altura da linha, que é uma altura de linha 100%. Ok, então, na verdade, você pode ver que você está vendo espaço acima deste e abaixo deste texto. Então isso é um pouco de diferença no web design que seja qual for a altura da linha que você vai selecionar, ele vai toe ter todo esse bloco para esse espaço. Então todo este bloco vai tirar 67 pixels de altura. Então você precisa considerar que se você clicar aqui, você pode ver que é 36 linha de altura, então ele vai levar 36 pixels verticalmente dedo do pé, você sabe, permitindo este texto. Então, sempre que você estava projetando para sites, você pode ver o que um clique livre aqui Esta casa tem um monte de espaço na parte superior e na parte inferior da mesma forma, isso e isso também. Agora você pode ver como eu criei esse Bom vertical. Então, se eu fizer isso um pouco como este para que você possa ver aqui se olharmos de perto, você pode ver que este texto aqui está dentro desses X zoom um pouco mais É dentro desses um dedo Veja, eso ganhou dedo do pé ver E quatro, quase quatro linhas de base. Então isto é, na verdade, se quisermos alinhá-lo também podemos alinhá-lo assim na vida Isto Então se você pode ver de perto toda a área de desossagem está realmente no azul. Então temos 12345 Então temos quase cinco espaços verticais para isso. Ok, Da mesma forma, se clicarmos aqui, você pode ver que este é o nosso texto. 123456 cidades quase tomando seis E então temos quase três acima e três abaixo quase. Oh, Bill! Então, se nós movê-lo um pouco para cima, você pode ver agora ele está indo para o pé de uma linha. Esta caixa delimitadora vai se alinhar com essas linhas sobrecarga. Então é assim que vamos alinhar nossas coisas. Agora vamos mover este um pouco para baixo. Hum, então nós temos algo assim. Então agora você pode ver que este bloco azul está nesta rosa quatro. Então estes são na verdade o nosso ritmo vertical Rose. Então temos esta hora. Burton, se clicarmos aqui, você pode ver que também está tomando 12345678 espaços verticais. E da mesma forma, você está indo espaço para fora todo o seu projeto. Tudo vai ser espaçado verticalmente. Agora há um truque. Se você está projetando algo, obviamente quando você tem, quando você está indo para começar um novo bloqueio de informações uma nova seção fora do seu site um novo hum, você pode dizer recurso fora do seu site ou o que quer que você é projetando. Você vai ter mais espaço aqui. Você pode ver ou ouvir. Temos um pouco mais de espaço aqui. Então temos entre esses fardos e esse, você pode ver que está tudo bem, então isso é muito importante. Mais espaço quando você está começando uma seção mais espaço quando você está terminando uma seção e menos espaço quando você está quando você está dentro de uma seção, assim como você pode ver ou ouvir Aqui estou mostrando os serviços de cabeçalho seção e então nós temos alguns ícones aqui. Então isso é outra coisa. Acho que vamos falar sobre isso. Vou mostrar-vos o meu processo e o meu design em que o último designer trabalhou e como ele realmente criou. Ah, todo o sistema fora de colchões verticais e você pode dizer tijolos. Normalmente os chamo de tijolos verticais. E eu usei aqueles blocos verticais ou tijolos dedo criar todo o meu design e expressão. Portanto, isto é muito importante. Você precisa criar essa vertical. Ótimo. Se quiser saber como criar essa grade vertical, crie um de retângulo de24 pixels e remova essa borda ou aqui. Mudar. Eu vou mudar o dedo do pé da cor X algo assim, e então nós vamos ... duplicar e replicar, e eu vou remover todos os espaços entre eles. Vou torná-lo um pouco aborrecido assim. Não, temos que acabar com eles. Repito, ótimo , criou ganância , ganância, e vamos repetir assim. Agora vamos fechar a lacuna entre estes dois. E aqui temos todo o patrono. Da mesma forma, você pode criar um usuário em para um curto de para loja e aplicar esse padrão no fundo da sua imagem. Todo o seu site você pode ver se eu colocar este texto aqui como eu. Mova um pouco para cima assim. E se eu movê-lo para cá, você pode ver agora que está se encaixando dentro de todas essas linhas. Então isso é realmente ritmo vertical. Então eu tenho 24 bigs altura da linha, então ele está se encaixando perfeitamente em 1234 espaços verticais. Então é assim que o ritmo vertical funciona, e você vai espaçar as coisas. Então, por exemplo, se eu tiver algo como isso ou aqui e eu quiser criar um cabeçalho aqui Um, agora, se você olhar para aqui, eu posso espaçar entre essas três linhas. Então agora, ele está realmente tomando esses três espaços verticais. Então, se você quiser movê-lo para cá assim, você também pode fazer isso. E temos quase metade do espaço entre estes dois. Vamos ver quanto espaço temos no meio. Nós temos, tipo, 11.3. Então vamos torná-lo 1000 Dean e 11. Então você pode ter mais uma coisa, que é chamado de blocos e, por exemplo, temos 24 pixels fora do ritmo vertical e 1/2 off 24 é 12 para que eu possa ter um espaço 12 entre bordo estes. Então isso é na verdade 48 56 altura da linha, e isso é 18 pixels de alguns decks e 24 de altura da linha, e o espaço entre eles é realmente exult real é 12 pixels. Você pode ter algo assim. Então agora eu vou esconder esta batida, criar, criar, e você pode ver que temos um espaçamento equilibrado muito agradável entre o rumo e é melhor gráfico . Então esta é, eu acho, uma técnica muito simples, e você pode dizer um método muito simples que muitos designers começam a usar em seu design. É por isso que eles têm incompatibilidades em seu espaçamento vertical e horizontalmente. E espero que tenham gostado desta lição. Se você tiver alguma dúvida sobre vertical, ótimo, eu vou entrar mais em detalhes nas próximas lições sobre para me perguntar Vamos passar para a próxima lição 7. Blocks verticais para espaçamento: Agora você já aprendeu sobre vertical criado. Mas agora eu vou compartilhar com você um segredo fora. Grandes designers criam seus designers, criam Web designers, e isso é usar blocos de espaço em branco ou tijolos. Eu os chamo de tijolos. Você pode chamá-los de colchões verticais ou blocos verticais ou o que quer que você tenha. Você quer ligar para eles. Eu vou te mostrar isso. Como? Na verdade, eu criei esse projeto em mim. Compartilhe com vocês como eu realmente criei a altura X. Ok, então isso é realmente um projeto fora da página de destino? Eu fiz recentemente. Ainda assim, estamos trabalhando na seção de cortejamento, para que você possa ver ou ouvir. Este é um design muito equilibrado. Você pode ver o espaçamento entre diferentes elementos espaçamento entre diferentes seções e os títulos e o conteúdo de sua seção. E isso é consistente aqui. Você pode ver alguns de forma semelhante aqui novamente nesta seção. Vou partilhar este design. Talvez uma nas próximas lições. Mais porque eu tenho que mostrar mais algumas técnicas fora dos alinhamentos e Leo X. Agora o segredo está no seu espaçamento vertical. Agora vamos esconder este aqui, e eu vou mostrar a vocês como eu realmente tenho o sistema desligado ou espaços de riso. Então, à esquerda, você pode ver que eu tenho poucos componentes que são chamados de 1 2096 70 a 64 56 48. Estes são todos diferentes tamanhos de tijolos ou blocos verticais. SoHo. Na verdade, espaço meus itens. Deixe-me mostrar-lhe se colocarmos este 120 aqui. Então, são 120 pixels. Você pode ver que isso é realmente estes são componentes. Então eu vou fazer uma experiência assim. Vou mostrar-lhe em um minuto o meu segredo dos desenhos. E eu acho que eu realmente acho que a maioria das pessoas não usa isso assim. Ok, então quase 120 incluindo esta sombra como esta. Então ele vai ser aqui 24. Acho que temos 36 aqui. Como este. Hum, isso vai ser dentro. Só toque. Está bem. Então, novamente, 120 porque temos uma seção oops, seção ou aqui. Você pode ver como eu estou usando o sistema de espaçamento diferente entre diferentes itens aqui. Eu acho que isso é o suficiente. Mais do que suficiente. Eu já criei um monte de linhas cor-de-rosa aqui de qualquer maneira, então é assim que você está sistema de espaçamento deve parecer. Agora você pode ver que esta é na verdade uma técnica secreta. Estou revelando agora. Eu vi um monte de desenhos e eu não era capaz de entender como o mundo do espaçamento diferente . Então eu enviei um e-mail e considerei com dois designers especialistas da Mawr e perguntei como. Na verdade, o espaço são seções diferentes e eles disseram que a parte superior e a parte inferior cada seção é quase igual. Então seja o que for, você está indo para sair no topo como nós ganhamos 20 fotos e novamente na parte inferior nós ganhamos 20 picaretas é novamente quando uma nova seção vai começar. Eu tenho 120 pixels no topo e imaginando retratos está fora do espaço em branco na parte inferior e você pode ver entre as seções que temos menos base, então você tem que criar um sistema de espaçamento fora de seus projetos primeiro. Então tente o dedo do pé, pegue esses blocos, e esses blocos estão indo para o pé com base em sua linha base. Então, por exemplo, se eu tiver uma linha de base fora como, um 24 ou pode estar em um número par, tente o dedo do pé, ter uma linha de base em números pares. É mais fácil e tentar criar blocos que têm uma boa diferença entre si. Como 24 eu tenho 24 36 48 56 64 72. Eu não tenho coisas como 1 21 118 Porque desta forma, se eu tentar criar um espaço de 120 e 1 18 lá, essa diferença não é perceptível. Então, sempre que você estiver criando isso, seus blocos verticais tentar dedo do pé têm blocos de diferentes tamanhos que têm boa quantidade fora. Você pode dizer de 25 a 30% uma diferença de tamanho entre eles. Você pode ver que estamos aqui. Aqui. Estou usando 36 de 24, então 1 2120 32. Deve ser 36. Na verdade, acho que perdi alguns pixels por aqui. Então, é na verdade 36. Isto deve estar ligado. Isso também deve ser consistente com todo o seu design. Então eu tenho sub indo para o conteúdo. 72 pixels. 20 Então, novamente, na verdade, usei um pouco menos espaço aqui porque acho que essas duas seções devem pertencer ah, mesma seção, então eles estão quase relacionados. Então usei 120 espaço e alterei meu espaço. Além de ter 72 eu usei 56. Então este é outro. Então, novamente, nós ganhamos 20 na parte inferior desta seção 64 após este título 64 64 entre todos esses diferentes depoimentos. Então, novamente, nova seção vai começar. Então eu vou deixar 120 no fundo e ah, ter alguma separação entre estes dois. Então, novamente, temos 36 antes do próximo slogan ou você pode ver o parágrafo futuro começa do que temos 56 entre estes pontos balas e este parágrafo. E, novamente, temos 48 48 40 anos e 48 repetindo para todos esses itens da lista. Mais uma vez, ganhamos 20. Então isso é muito, muito importante. Você tem que aplicar essa técnica em todo o seu design e direção vertical. Está indo para o dedo do pé. Você pode dizer melhorar seu projeto 200% para que você possa ver aqui se formos para esta seção e eu arrastei até aqui, Isso é realmente 72 no topo e 72 na parte inferior. Então, isto está muito bonito. Então, se você olhar para este design e eu tentar reduzi-lo algo como isso, não vai ficar muito bonito. Por isso, tem menos espaço na porta. Tem mais espaço no fundo. Então tente ter algo que tenha igual superior e inferior Para cada seção que você está projetando do que dentro das seções, vamos ter algum sistema de espaçamento Definir. Então este é basicamente o seu sistema de espaçamento. Eu chamo de blocos verticais. Eu os uso em todos os meus projetos como este. Você pode ver isso é como, na verdade, isso foi colocado para fora de forma semelhante em sua versão móvel em seus dispositivos móveis. Estes blocos vão ser menores. Então aqui você pode ver se você olhar para tudo aqui, nós temos menos espaço. Acho que é 56 por aqui, eu acho. Esperanças? Hum, 56. Sim. Então, no meu design móvel, o que eu fiz foi realmente reduzi-lo para 56 nós temos 56 ou aqui similarmente 56 aqui. Então você pode ver que isso é realmente como você vai mudar seu design ou sistema de bloqueio para o seu aplicativo móvel. Então vamos ter tamanhos menores porque temos tela pequena ou dispositivos pequenos. Eu espero que você tenha aprendido e apreciado este segredo fora dos meus projetos, e eu espero que você vai experimentá-los em seus projetos para Se você tem alguma dúvida para me perguntar, vamos passar para a próxima lição. 8. Equitação do layout com blocos: nesta lição, eu vou compartilhar e outro segredo que é equilibrar o seu layout. É o mais difícil. Perguntou a muitos de nós pensamos que devemos ter um equilíbrio simétrico entre todos os diferentes elementos fora sobre o design. Temos medo de usar o espaço em branco. Então, na maioria das vezes que tentamos preencher e equilibrar foram refinados que eles estão aqui. Temos o espaço vazio que tentamos preenchê-lo. Então este é o, ah, muitos designers. Estes são os maiores erros que cometem. Já vi muitos designers, até eu. Eu acho que talvez um ano ou dois anos atrás eu era assim. Eu não entendia como realmente o espaço branco funciona e como você está indo para o pé. Você pode usar isso Ah, em um monte de fases diferentes. Então o que vamos fazer aqui é que há dois pontos que você precisa ter em mente. Número um é que sempre que você está equilibrando seus layouts, você é você pensa como se você tem diferentes blocos de madeira e você está colocando-os em cima do outro. Essa é uma maneira de equilibrar seu layout, então, como se eu tivesse duas caixas de mandados de madeira, lajes ou qualquer quarteirão lá embaixo. Então eu vou levantar um pé, e eu vou colocar outro no topo. Então isso está realmente indo dedo do pé tem uma saída muito diferente. Então eu vou mostrar alguns exemplos e então vou explicar melhor porque, como, agora, agora, eu acho que você pode estar imaginando como isso é possível? Então vamos ver e ver alguns layouts de exemplo. E depois vamos. Vou mostrar-lhe alguns exemplos reais de diferentes sites ou Web designs. Toe, comece com esse balanceamento de layout. Agora, este é o primeiro layout que vou mostrar a vocês. Muitas vezes você pode ter visto revistas diferentes, livros diferentes, e você já os leu. E você viu que este é um tipo fora típico Leo Eles têm. Eles têm um grande espaço fora em branco no canto superior direito esquerdo. E uma coisa que vocês vão notar tudo aqui é que temos mais espaço em branco aqui à esquerda, e também temos muito espaço em branco no topo. Então é assim que, na verdade, este bloco de espaço em branco está funcionando. E depois temos estes três quarteirões aqui para o conteúdo. E novamente, temos muito espaço em branco. Ou você pode dizer bem aqui para separar essas duas partes de informações como esta. Ok, então novamente, temos alguma lacuna à direita, que é novamente chamado de Margens à Direita. Então temos algo assim. E novamente temos, ah, ah, margem de fronteira para tudo o resto. Então você pode ver agora eu destaquei o espaço vazio neste design, e é mais do que qualquer que seja o conteúdo. Então, sempre que você tiver mais espaço em branco do que o conteúdo, ele vai parecer muito nítido e limpo. Então esta é outra saída. Você pode ver o controle. Vamos, D. Então temos isso aqui, e você pode te ver. Podemos ter se você considerar que estes são três blocos, este também pode ser um espaço em branco. Então, se eu remover este no bloco branco do meio, isso também pode se tornar um espaço em branco para que você possa ter uma imagem muito longa aqui e, em seguida, dirigir e atacar aqui. Tudo depende de qualquer layout que você está tentando. Portanto, há muitas possibilidades. Não pense que você vai ter três ou quatro colunas ou 50% para a nossa imagem e 50% para o texto. Portanto, há muitas possibilidades fora de diferentes opções para seus layouts. Agora vou mostrar-lhes outra técnica que está deixando algum espaço fora. E vai ficar muito, muito bonito. Então, esta é uma técnica que eu uso quando eu coloco as coisas. E o que é que você pode ver o quê? Aqui. Aqui temos um grande bloco, que está tomando 12345 colunas e eu intencionalmente deixei uma coluna no meio. E então, novamente, eu dividi-me. Você pode ver a imagem ou informações ou ícones em três blocos diferentes. Então eu tenho você pode dizer. Na verdade, eu criei intencionalmente um bloco de espaço branco aqui, então isso é muito importante. Da mesma forma, você pode ver que estamos aqui novamente. Eu fiz a mesma coisa, mas na verdade eu variei. Então o que eu fiz foi, na verdade, enterrar as palavras dos meus blocos. Você pode ver que estes são diferentes. Imagine que estes são diferentes blocos de madeira. Então, se eu me colocar em cima um do outro assim, eles vão se equilibrar facilmente. Da mesma forma, em vez de viver espaço branco aqui, eu posso fazer o mesmo por espaço branco faria aqui. Então, em vez de ter tudo, eu posso usar isso para que eu possa ter todo o meu design deslocado para a esquerda e ter mais espaço à direita . Da mesma forma, posso fazer o mesmo deixando algum espaço em branco à esquerda e movendo tudo assim . Então, estas são opções diferentes. Você tem que pagar seco. Não tente, você sabe, pensar em apenas blocos e você pode ver blocos simples e sempre tentar fazer algo assim . Não precisamos encher tudo assim, então não tente pensar de maneiras simples. Tente deixar de fora, tentar muito coisas que são diferentes e que vão ter ah, diferentes opções de espaçamento para criar algum interesse. Agora aqui eu tenho outro Lee fora e você pode ver que tudo está cheio e ah, agora o que eu realmente quero mostrar a vocês é ah, combinação bruta de coluna. Então isso é realmente como você pode ir toe criar diferentes combinações fora de sua coluna de grade para que você possa ver no topo. Estou usando 123 blocos e cada um deles está pegando quatro colunas aqui. Mas na próxima parte, o que fiz foi, na verdade, ter variado. Acabei de criar um bloco e um bloco maior para cobrir esta área. Então isso vai criar algum interesse sempre que você está mudando seus combos. Então, se você é ah, jogador de videogame, você sabe que se você continuar jogando O r com o mesmo gin combo e novamente, você vai perder com o seu adversário. Por isso, não vai ser muito interessante. Então tente toe criar combos como, por exemplo, eu também posso fazer algo assim. Talvez eu faça algo assim. Ao invés de ter três diferentes três colunas diferentes, eu posso ter algo assim. Posso ter dois quarteirões à direita e à esquerda, que são os mesmos. E no meio, eu tenho dois blocos que vão levar duas colunas. Portanto, há muitas variações que você pode massa, então tente muito o seu design. Talvez possamos pular algo assim aqui e temos muito espaço em branco. Portanto, há muitas variações que você pode criar o seu com diferentes grandes colunas, combinações Cambone e usando o espaço em branco de forma eficaz. Agora, aqui vou mostrar-lhe novamente como você pode combinar colunas diferentes. Você pode ter quatro elementos que você pode ter. Divida-os em dois. Você pode ter algo no centro alinhado como este. Você não precisa se preocupar em combiná-los. Você pode ter o que Richie avisou. E isso está quase fora do layout. Um site típico que você pode ver à direita no topo. Temos algumas ligações aqui do que à esquerda. Temos um logotipo do que a manchete, e então temos quatro características ou algo assim. Então temos uma imagem. Estamos aqui à direita e à esquerda temos uma mensagem de novo. Este pode ser um campo de assinatura de e-mail ou algo assim. Aqui estou eu. Venha combinando 3456 Som e quatro colunas e, novamente, 50 50. Então tente muito seu layout, por exemplo. Tenho quatro aqui. Então, novamente, eu tenho que vir aqui agora. Na verdade, eu quebrei meus usuários você pode dizer que você pode dizer usa olhos que você pode ver Agora meu usuário está vendo o espaço como este e então eu novamente quebrá-lo e mover o espaço para cá. Então, temos um conteúdo em destruição agora. Da mesma forma, voltei com aqui, então isso é realmente muito cansativo seu espaço em branco e ter uma combinação diferente, diferente de suas colunas. Isso vai ter um efeito muito bom no seu design. Agora, este é o último exemplo que vou mostrar a vocês. E isso é muito original e muito diferente fora e que é na verdade eu vi um monte de sites, principalmente agências operacionais de sites criativos que usaram esse tipo fora de layout, que é tudo importante está alinhado à esquerda. Então temos um grande rumo aqui. Este é o logótipo deles, a SEC. Isto é, na verdade, uma navegação. Pode estar no topo ou pode estar no lado direito e à esquerda. Temos cabeçalhos muito grandes e ousados, e tudo o resto é espaço em branco. Então isso vai ter ah Lord fora de impacto nesta seção aqui. Então ele vai ter, hum, muito fora de importância. Algo como isto. Então ele vai brilhar no escuro. Então é algo assim que você pode dizer escuro em um quarto branco. Então, se você colocar ah mesa preta em uma sala branca e não há mais nada, você sempre vai se concentrar naquela mesa preta da mesma forma, na na próxima seção, o que eles fazem é que temos cabeçalho na esquerda muito grande cabeçalho e texto ou informações ou imagens à direita, e eles continuam indo assim. Então este é um muito bem fora em muito bom estilo. Você pode experimentá-lo em seus diferentes sites ou representar Não, vou mostrar-lhe alguns exemplos. Acho que esta lição já é muito longa. Então eu vou mudar para a próxima lição, e nós vamos ver alguns exemplos reais e como diferentes espaços vazios foram usados são diferentes camadas foram usadas por diferentes designers. Então vamos passar para a próxima lição. 9. Equitação do layout: Agora, o primeiro exemplo que vou mostrar é esta página. Eu não me lembro, na verdade continuar coletando desenhos diferentes. Então este não é o meu design sobre este é algum outro design de designers. De qualquer forma, eu realmente gosto dele Como simples e elegante É muito fora do uso do espaço em branco. Então, se olharem de perto, podem ver à esquerda que temos muito espaço em branco por aqui. Então acima do conteúdo está começando daqui assim e novamente na parte inferior. Temos muito espaço de trabalho à direita. Temos muito espaço de trabalho, e no topo, temos muito espaço em branco. Então você pode ver que é tipicamente o nosso livro lee fora onde temos mais espaço em branco na esquerda e na parte inferior e na direita e no topo, temos menos espaço em branco. Então esta é outra técnica que você precisa seguir. Você tem reboque criar algo como este, e ele terá um efeito muito calmante ou muito agradável em seus usuários. Uh, só por diversão, eu acho que eles realmente aumentaram. Se esta imagem e esta linha fora desta caixa e para a margem apenas para limpar algum interesse. E está parecendo realmente necessário e muito agradável. Então é assim que você vai usar seu espaço em branco de forma eficaz. Não tente o dedo do pé, fique com medo do espaço branco. Tente usá-lo e ele criará um efeito muito bom em seus projetos. Então vamos ver outro exemplo. Ok, então aqui está outro exemplo. E aqui você pode ver que é um design de saco de compras para site de sabão. Acho que isto é trabalho de outro designer. Este não é o meu trabalho. Eu queria mostrar a vocês como, na verdade, essas margens e essas coisas funcionam e vocês podem ver aqui estão nesta seção. Se você olhar para ele aqui, tem muito espaço em branco à direita e à esquerda. Ok, então novamente, você pode ver aqui esta seção. Se seus olhos estão se movendo em destruição, você pode ver que está ocupando todo o espaço aqui. Então isso é realmente enterrar seu ah escrito fora do seu conteúdo. Temos menos Contador aqui e muito espaço em branco do que outra vez. Estamos movendo nosso conteúdo para o espaço em branco e, em seguida, novamente de volta. Então você pode ver que isso vai criar um efeito muito agradável. Na verdade, se você tentar, implemente isso. Então este é um design muito grande novamente. Eles estão mostrando isso em um livro. Formá-lo novamente. Temos mais espaço na parte superior e na parte inferior, e temos menos espaço em branco à direita. Então, isso é realmente forma de livro. Eu o chamo de um livro para Mitt, e eu realmente amo quando você tenta usá-lo em seus sites ou em seus projetos de aplicativos móveis . Então é assim que realmente os espaços vazios trabalhando aqui nós temos um bloco estavam aqui assim e o bloco nós estamos aqui assim. E depois temos um quarteirão aqui como este de novo. Temos um bloco aqui como este de novo. Temos um bloco ou aqui como este. Então isso é na verdade um pouco à esquerda. Eu acho que talvez não esteja alinhado corretamente, mas na verdade, este é um design alinhado no centro, mas tem boa variação fora do espaço em branco ao redor. Então isso está realmente ótimo. Agora vou mostrar-vos outro exemplo, que é este, e podem ver que estamos aqui. Aqui. Temos blocos diferentes de diferentes alturas. Embora eu não goste muito criativamente, mas eu acho que pode funcionar. Ou aqui. Então temos tudo colocado horizontalmente da esquerda para a direita. E você pode ver aqui que temos à direita, eu acho que algum ícone do Chad. Então temos que baixar os botões aqui. E depois temos este quarteirão aqui e este quarteirão. Então, se olharem de perto, este é o quarteirão inteiro, está bem? E então nós temos ah, esta área aqui, esta área aqui e esta seção aqui para que você possa ver à esquerda. Não tem muito espaço em branco, mas à direita, tem muito espaço em branco. Então é como se você olhar para ele, você pode ver que é parece uma arma. Ok, então esta é a parte de trás fora da base da arma. É aqui que as balas estão. Como dinheiro e golfe. E você pode ver aqui. Este é o Nosal. Então isso é realmente geométrico. Você pode dizer que alguns designs ou alguns layouts são baseados em algumas formas ou algumas geometrias, então você também pode usar isso aqui. Queria mostrar-te uma coisa, que é o espaço em branco. Então aqui temos um bloco muito grande fora do espaço branco. Aqui temos um bloco um pouco menor fora do espaço em branco, e aqui temos um bloco fino fora do espaço branco. Então você pode ver se olharmos para ele aqui, nós temos quase uma árvore muito ferreiro nesses blocos brancos brancos espaciais. Ok, então isso é realmente o que eu não quero te mostrar aqui e te guiar que você também pode fazer algo assim. Também pode funcionar e tudo mais agora. Aqui está alinhado nesta direção à esquerda. Então está se movendo da esquerda, certo? Mas e o designer, em vez de enterrar os vice-pres à esquerda e à direita, varia os vícios na parte inferior. Então, isto é realmente o que eu queria mostrar a vocês. Este é o lugar onde o design exclusivo Vamos ver outro exemplo. Ok, então isso é como eu. Tem certeza que espera o 100% de desconto neste? Uh, oops. Acho que agora 100%. Então este é um site chamado trabalho de forma responsável. E você pode ver que este é o layout que eu mostrei a você. Temos um rumo muito grande aqui. Como se você pudesse ver o que atingiu. Temos alguns pequenos locais. Estamos aqui e um pequeno link aqui. Então este é o layout. Um curto “Você “no último slide da última parte da minha última lição. E você pode ver que esta é a mesma camada que está usando Então, à esquerda novamente, temos cabeçalho. E então, se descermos, você pode ver que temos esse conteúdo. Então, novamente, o título está à esquerda e você pode ver algum conteúdo está à direita. Então isso é esquerda, direita, esquerda, tentou. E, novamente, temos algo à esquerda. Ele está virando sobre a quantidade de espaço em branco à esquerda e andar e ter alguns que você pode ver na criação de alguém. Confie aqui de novo. Temos isso e, novamente, ele está deixando espaço branco brilhante à esquerda e à direita ao lado à esquerda. E novamente temos na maioria dos espaços em branco overhit e usar fora uma escala bit grande, menor e maior. E se descermos, novamente teremos muito espaço em branco à esquerda. Onda , , isso é tudo. Então eu queria mostrar a vocês que é assim que você pode usar designs criativamente e você pode ter muito espaço em branco aqui. Vai colocar muito fora a importância e o stress nesta secção ou aqui, que é o seu slogan ou o que quer que seja. Podem chamar-lhe só que estão a ir. E essa é outra maneira de ler seus layouts. Vamos ver mais um exemplo e então nós estamos indo toe Ir para o movimento para a próxima seção. Agora este é um exemplo fora Ah, painel ou um aplicativo. Este é um aplicativo web e você pode ver aqui a coisa legal sobre este design que eu realmente quero mostrar a vocês, é o espaço de luta. Então vocês podem ver que temos um Senhor fora do espaço branco à direita, e temos um senhor do Espaço Branco entre essas duas seções. Aqui, esta é a navegação esquerda e o conteúdo. Então, entre o conteúdo e a navegação, temos um monte de espaço em branco, e eu estou realmente vivendo este design porque é ele é assim que você pode dizer tão único e limpo porque fora de seu espaço em branco usá-lo Da mesma forma, se nós olhar para o topo, temos espaço em branco, mas é menos espaço em branco. Então isso é realmente e novamente nós temos você aqui espaço em branco. Mas é realmente a navegação que você pode. Se tivermos mais navegação, podemos encher o espaço. Então eu realmente gosto de como isso tem sido layout muito fora do espaço em branco. Você pode ver por aqui. Aqui temos no topo desta seção de conteúdo do que novamente dentro desta seção de conteúdo. Então novamente dentro, aqui e novamente você concebe na próxima seção está se movendo novamente. Temos muito espaço em branco. Então este é outro exemplo de que você pode ter um monte de variação fora do espaço em branco mesmo na Web abside, onde a criatividade é limitada porque esta web é para consumo de conteúdo. E tem muitas seções diferentes navegações diferentes, então você não pode criar muito fora. Você pode ver criativamente fora. Isso é realmente para entrega de conteúdo, e você pode dizer que sites de entrega de dados ou aplicativos Web baseados em dados, então você ainda pode usar um monte de espaço em branco aqui e criar um layout que se parece com isso. Então temos tudo alinhado aqui de novo. Temos tudo linha esquerda aqui, mas temos muito fora do espaço branco que está dando clareza e elegância dedo do pé este design. Espero que tenham gostado desta lição. Se tiver alguma pergunta, me pergunte. Vamos passar para a próxima lição. 10. Layout centrado em único coluna para aplicativos web e móvel: nesta lição. Nós vamos falar sobre um tipo diferente fora layouts e diferentes tipos fora lotes, e então eles devem ser usados. Então primeiro 1 eu vou falar sobre uma única coluna ou o que chamamos de camada centrada. Então, tudo será principalmente no centro alinhado, e é uma ótima maneira. E sempre que você usá-lo, você vai colocar um monte de atenção para o que está no meio. Então temos muito espaço em branco em ambos os lados e a coisa do meio. O que quer que tenha, é um produto. É um fardo. É um formulário, ou o que quer que tenha, vai ter muita atenção. Então, se você tem um monte de conteúdo como quatro parágrafos, três imagens, eu acho que você não deve ir para uma única coluna. O Leo. É bom para destacar algo que tem menos conteúdo. Então, se você tem um monte de conteúdo, eu acho que você deve evitar usar uma única coluna ou centralmente outs. Agora deixe-me mostrar-lhe como realmente parece. Aqui. É uma apresentação simples fora do layout centro na maioria das vezes quando você abre um site que temos logotipo à esquerda e temos navegação superior. E depois, abaixo disso, temos um grande rumo aqui. Ok, então nós temos algum slogan ou alguns outros recursos, ou talvez um ou dois parágrafos de linha ou coisas assim. Então temos um vídeo muito grande ou uma grande imagem fora do produto ou ah, formulário aqui. E então temos uma chamada para Action Button. Mas você deve se inscrever para este produto ou coisas assim. Então temos algo aqui. Talvez seja seguro e seguro, e são apenas $9,99 por mês. Ou talvez algo assim, que vai dar um pouco de certeza que este é um adeus, ou você deve comprar este produto. Então este é basicamente um layout simples e centrado. Na maioria das vezes, vai ficar assim. Você pode mover as coisas ao redor como você pode ter algo como por aqui e dirigindo e pensa, como por aqui, é até você como você realmente tentar dedo do pé, mover as coisas e como você agarrar a atenção do seu usuários. Então, isso vai ser principalmente na seção Haider ou herói ou seção superior fora de seus projetos . Então, isto é tudo centralmente fora. Agora, deixe-me mostrar-lhe apenas dois ou três exemplos porque eu acho que você já viu isso muitas vezes Eu vou mostrar-lhe alguns exemplos, então você tem a idéia escrita em sua mente ou você pode ver gravada em suas mentes. Então vamos ver alguns exemplos. Agora aqui estão alguns exemplos fora do centro mais cedo, e na maioria das vezes você vai vê-lo no cabeçalho porque eles precisamos chamar a atenção. Um e segundo é que temos de colocar alguma ênfase no nosso produto. É slogan ou o que faz. Então aqui vamos nós. Você pode ver o topo. Temos as mesmas coisas aqui. Temos tudo no meio. Então temos um slogan do que temos este botão e aqui temos um botão menor. Ou talvez não muito destacado seção assistir demo. Então, novamente, temos esta ilustração na parte inferior, que está novamente no meio. Então é assim que este APRA começa Io. Eles estão colocando ênfase ou aqui, por isso não é má prática para usar isso eu acho que eu realmente acho que se você pode criar uma atmosfera muito agradável usando um bom, tipo fora tipografia e cores, você pode criar qualquer design. Se com um layout simples. Se você tem um layout muito simples, você pode criar um design elegante. Não pense que você tem um muito complexo fora de muito criativo para contar sua história. Você pode contar sua história com layouts simples teria por ter algum estilo de tipografia usando boas cores. Em seguida, temos este site. Isso é chamado mesmo formulário e você pode ver aqui eles novamente têm algo que é enviado cedo para fora. Muito grande vindo para cá. E eu começo. Eles têm algum int ganancioso acontecendo no título, o que eu realmente gosto. Então temos esse fardo. Acho que deveria ser assim. Mas de qualquer forma, é o seu próprio estilo, e é assim que na verdade eles estão pegando a atenção de seu usuário e colocando isso no pé nesta área aqui, então nós temos esse outro, que é ponto de fronteira io. E isso é que eu acho, custo parte tipo fora do projeto, ou eu não tenho certeza o que é de qualquer maneira, então você pode ver ou ouvi-lo novamente começa com o layout central. Embora seja uma linha à esquerda, Vamos discutir esta técnica nas idéias criativas na próxima seção. Então mantenha isso em sua mente e mantenha seu você pode dizer, uh, seu, uh, nível de curiosidade alto. Então mantenha seu nível de curiosidade alto e vamos falar sobre isso na próxima lição. Neste momento, vou dizer-te o que é este collant. Layout centrado Próximo é base acampamento base. Kim é um site muito popular e você pode ver todos ouvir muito grande e cabeçalho bordo. Em seguida, eles têm algum parágrafo aqui mostrando o que ele faz com seus clientes. Então eles têm a cidade A ou o botão de ação aqui. Belo toque. E então eles têm alguma linha aqui novamente. Eles têm algumas imagens no meio. Eu realmente gosto deste simples e direto e muito fora ênfase no que ele faz. Então este é um ótimo exemplo. Ok, então aqui temos outro, que é basicamente um design de embalagem, e você pode ver onde este símbolo, que é o logotipo deles. É no meio de toda essa ilustração, que está realmente dando ênfase, e você pode dizer força para este design. Então, se você olhar para ele aqui novamente, isso é projetado em um layout centrado. Está tudo no meio. Mas ele está olhando muito bom porque o designer tem usado muito fora criar caras tipo cara , eu acho, para morrer. Rostos que estão procurando criar aqui, foram combinados assim. Então boas ilustrações, centro projetado, tudo parece ótimo. É assim que os designers de criação executam seu design que não se preocupam muito com a simplicidade. Eu acho que projetos simples com bons gráficos poderia tipografia e cores. Eles vão ter mais atenção do que layouts complexos. vez, umavez, temos este finalizador, CEO escuro, e é novamente algo. Algum aplicativo. E aqui temos novamente esse layout central. Vamos ver alguns exemplos de layout móvel, que é contra âncora. Este é o site da Shopify e este é o celular deles. Responsive você para que você possa ver ou ouvir no Mobil. Temos muito menos espaço, então às vezes temos, como em direção a três colunas. Design tentaria apertá-lo em uma única coluna ou coluna centrada para que ele vai ser usado. Ah, muito tempo em interfaces móveis são interfaces de usuário para dispositivos móveis móveis porque temos menos espaço na tela. Então nós tendemos a ah, você sabe, ter algum espaço ao redor movendo nossos objetos na ordem inferior superior. Então tudo o que a linha central você pode ver ou ouvir está ótimo. Então você não tem guarda. A ideia de como você pode usar o centro, alinhar layouts e tentar criar ênfase em seus designs. Vou mostrar a vocês um dos meus projetos recentes que fiz e como uso o dedo do pé do layout central obter a ênfase na primeira ou na seção superior desse design. Este é o meu projecto recente que fiz para os impostos atrasados. Ajuda de Este é um dos meus clientes de vocês, Estados Unidos, e ah, você pode ver aqui que é um tiefest costume sobre sério porque tem alguma seriedade porque é uma empresa de tributação. Então este é um empate personalizado. Isto não é o Google Tiefest. Então, novamente, você pode ver muito bom contraste fora verde e amarelo ou laranjas amarelas, cor âmbar e design muito simples. Isso é novamente layouts centrais. Quero que o usuário chame a atenção sobre isso. Ajudamos 300.000 em todo o país a obter alívio fiscal. Então isso é novamente, eu acho que um ótimo começo você pode ver para qualquer cliente aqui. E então eles tiveram algum crédito. Certificações são e coisas assim. Então, isso é realmente eu queria mostrar a vocês como você pode usar no layout central em e criar uma boa impressão. Primeira impressão em seus usuários. Espero que não tenha destruído a central. Se tiver alguma pergunta, me pergunte. Vamos passar para a próxima lição. 11. Design de layout centrado: Agora é a hora da sua missão. Agora sua primeira tarefa é que você está indo para criar um layout centrado onde você vai ter algum logotipo, alguma coisa ou menu na parte superior direita ou navegação ou número de telefone ou qualquer outro elemento na parte superior. Então eu preciso que você crie um título muito grande, texto do quadro e com algum parágrafo ou texto que acompanha na parte inferior são fardo e e um ombros textual. Aqui, você pode usar uma ilustração na parte inferior. Você pode usar na imagem com algum efeito excessivamente como eu usei. Ou aqui você está aberto para usar o que quiser. Você está aberto para usar qualquer ferramenta de design. Você pode projetá-lo no esboço. Será, na verdade, para um ilustrador de loja. O que quer que você tenha disponível agora com você, você pode usar isso e eu quero ver algo assim. Então agora eu estou usando uma grade fora de Boucher Grid, que é 12 coluna 30 tem mais de 65 colunas Bert e 155 margens em sites de bordo, e minha tela é na verdade 1440 vazio. Então eu também tenho ah ah ah vídeo no YouTube sobre a criação de botas, notas sha'ab para que você possa verificar meu dedo do pé do canal de qualquer maneira, então este é o design deles. Eu quero de você Ah cabeçalho Projetado com algum layout centrado de um layout de coluna. Você também pode fazer algo assim, que é meu trabalho anterior de volta. Há um ano atrás. Você pode usar eles têm um cabeçalho um parágrafo este fardo teste de demonstração e algum texto que acompanha na parte inferior. Então você pode usar algo assim também. E certifique-se de que você vai usar alguns colchões aqui, como eu disse. O ritmo vertical, Brocks. Então tente usar alguns blocos em cima ou em baixo fora deste. E também aqui, onde vos mostrei estes blocos verticais nas minhas lições anteriores. Então tente usar essa técnica do dedo do pé. Tenha um bom espaçamento entre seus elementos. Então certifique-se de que você está indo para usar esses espaços verticais e ritmo vertical também. Então, comece a projetar não e criar algum cabeçalho impressionante olhando projetado com algum layout central . E espero ver seu projeto em breve. Então vamos ser rápidos. E não se esqueça de enviar esta tarefa 12. Dois layouts de coluna com exemplos: agora, outro layout popular é o layout de duas colunas. Ou às vezes eu chamo de layout 50 50 ou layout de revista. Na maioria das vezes, quando você vê ou lê uma revista ou jornal, temos principalmente conteúdo e imagens na esquerda e direita coisas como essa. Então, isso é basicamente dividir seu conteúdo em duas seções. Pode-se ser imagens pode-se re imposto. Um pode ser produto. Um deles pode ser suas características. Então isso está dividindo seu layout agora. Uma coisa que você precisa notar é que não deve ser sempre 50 50 layout. Você pode alterar a coluna. Pássaros. Talvez você esteja do lado certo. Você tem mais da sua coluna e a esquerda é menor, então isso depende de você. Por isso, é mais fácil suco de dedo do pé com várias imagens e texto de lado a lado. E se você tem um tópico ou uma seção que você pode facilmente ter, você pode facilmente ter ah, criar lee fora e você pode mostrar suas informações facilmente, e eu só eu apenas tabela em que ajustável nós para seus usuários. Então eu vou mostrar a vocês muitos exemplos e como podemos criar esses diferentes layouts de duas colunas . Então vamos começar agora. Neste momento, estou a mostrar-vos um começo muito típico. Ah, layout de duas colunas quando temos um vídeo à direita ou uma imagem à direita ou imagem do produto ou tela do aplicativo móvel curto aqui e depois temos à esquerda. Temos algum título aqui do que temos um slogan ou linha de recursos em destaque. Então temos um fardo e assistir a demonstração ou experimentá-lo agora ou experimentá-lo por 30 dias. Então temos algum tipo de patrono como este. Então este é um layout muito típico de duas colunas, então estamos dividindo mais fora a maior parte do tempo assim. Agora você precisa notar uma coisa que usamos é a maioria dos usuários. Eles vão escanear seu site ou design da esquerda para a direita, então eles estão indo. Seus olhos vão bater aqui pela primeira vez, então certifique-se o que você quer que o usuário leia primeiro. Este vai ser o teu desporto. Da mesma forma, idiomas da direita para a esquerda, dosidiomas da direita para a esquerda,a maioria das imagens e a maioria dos títulos e títulos estarão deste lado à direita. Então isso é o que você precisa notar. Agora, aqui está outra variação do mesmo 50 50. Mas pode ver que esteve aqui. Aqui. Eu fiz algo novo, que é que eu estendi esta imagem à direita para todo o fundo. É sair desta seção ou acertar. Então esta é outra maneira. E também, você pode ter um formulário aqui com o botão de enviar. Na maioria das vezes, se você estiver projetando uma página de destino e eles têm um monte de formulários, então você pode ter um formulário à direita e talvez alguns títulos e texto ou imagens à esquerda . Portanto, há muitas combinações que você pode fazer. Você pode ter algo assim. E vamos, hum, fazer este decks linhas assim. E temos linhas de sexo aqui assim. Oops. Assim. E então temos que tentar Não, algo assim. E temos algum tipo de layout como este. Então, há muitas coisas que você pode fazer aqui como você pode mudar o seu layout, você pode fazer um monte de coisas. Talvez você possa dividir suas imagens em duas assim. como se tivéssemos uma imagem ou aqui e outra aqui ou talvez alguma ilustração ou algo assim . Então nós estamos realmente alocando 50% de desconto neste espaço para nossas imagens, e a esquerda é basicamente conteúdo. Então há que eu vou mostrar, você sabe, exemplos de como ele pode ser usado e como ele é usado por diferentes designers. Então vamos seguir em frente e ver alguns exemplos. Agora, aqui está um exemplo, e é um site de portfólio por ramen, um produto. Projete-os a partir de Barcelona e você pode ver aqui este é um uso muito simples fora layout de duas colunas para que você possa ver aqui seu cabelo. Ele tem algumas boas vindas, Dexter aqui, alguma ilustração dele. Então ele tem imagens caindo em colunas. Mais uma vez, isto é outra vez. Tudo está em duas colunas. Então isso é muito simples, muito elegante. Trabalho limpo por Ramon. Agora aqui está outro projeto bonito, que é um jogo de duas colunas em. Você pode ver este cabeçalho é duas colunas à esquerda. Temos alguns textos e aprender mais botão, e à direita, temos um produto. Então esta é outra maneira de introduzir um produto E se você tem uma ou duas variações desse produto ou produto único, este é um ótimo caminho para o pé. Obter alguma ênfase e também dizer um pouco de informação sobre o seu produto. É um site de comércio e muito popular, que é Shopify, e você pode ver que eles estão usando o mesmo layout de duas colunas aqui, que é Ah, este cabeçalho um grande esconderijo à esquerda e na imagem e isso. Na verdade, isso é realmente aqui à direita, e novamente você pode ver nesta seção eles novamente têm algum recurso. Eles estão contando os recursos, Comece sua jornada de negócios. E então eles têm usado novamente este layout de duas colunas. Novamente. Temos um layout de duas colunas com alguma variação à esquerda e à direita e à direita e à esquerda. Esta é uma boa técnica dedo obter variação porque sua mente musas eles estão indo para ficar entediado com o mesmo Badran. Então isso é realmente muito interessante. O dedo padrão mostra que este candidato novamente você pode ver é esta seção. Este é um grande exemplo. Fora de um layout de livro. Você viu um livro. Se você abrir como este é este é um pago. Esta é a página esquerda. Então este é um ótimo exemplo. E eu acho que você deveria tentar algo assim. Eu vou fazer uma nova tarefa para você ter alguma imagem à esquerda e texto à direita e um botão na parte inferior. Algo como isto. Então você pode ver que você teve a idéia. E há muitas maneiras diferentes de usar esse layout de duas colunas. Aqui temos imagem à esquerda e imposto à direita. Na parte superior, temos texto na imagem esquerda à direita do que no meio. Temos algumas variações de textos e imagens, coisas assim. Então esta é uma ótima maneira de usar seu layout de duas colunas. Agora, aqui eu vou mostrar a vocês um aplicativo muito bom faz muito bem projetado de Huberdeau. Estou seguindo essa agência de design por um tempo. E o que eu queria mostrar-lhe como esta tela à esquerda, esta primeira tela à esquerda e você pode ver que você estava aqui. Tem um layout de duas colunas. Então, se chegarmos mais perto aqui, você pode ver essas 24 opções elas são divididas em duas colunas iguais, e isso mostra isso de forma muito simples. É mais fácil bater no dedo do pé aqui. Se eles têm assim para botões aqui, eles podem facilmente tocá-lo aqui e usar esses recursos. Então este é um grande uso fora desta coluna Ah dois aqui. Não se limite de que estes podem ser usados apenas em dispositivos móveis, apenas em sites. Você também pode usá-los em laboratórios móveis . Aqui está outro exemplo de um aplicativo móvel, e você pode ver aqui nesta seção ou ouvir abatido até três esportes que você gosta. Você tem, hum, quatro coisas aqui para selecionar, e eles têm, tipo, layout de duas colunas. Então este é novamente outro exemplo de um layout de duas colunas. É fácil tocar. É mais fácil de navegar. Você pode descer facilmente. Eles têm muito fora boa área para tocar em cima. Então este é o outro caminho. Você pode usar isso em seu APS móvel. Da mesma forma, você pode ver que este é o design recente que eu fiz, e você pode ver onde aqui eu estou novamente, usando um layout de duas colunas para mostrar estes ao vídeo lado a lado. Estes são realmente decks, vídeos profissionais e esta é uma ótima maneira de mostrar algo assim. Da mesma forma, se você descer nesta seção aqui, serviços de texto disponíveis, você pode vê-la ou ouvir novamente. Estou usando duas colunas para mostrar todos esses pontos ou serviços de texto. Então esta é uma ótima maneira de usar duas colunas. Não pense que você tem que usar uma imagem e um imposto. Você pode usar texto interno dessas colunas de modo semelhante, você pode ver o que aqui. Eu usei a mesma coisa aqui duas colunas, mas aqui apenas para criar algum interesse, eu mudo essa informação que é um pouco diferente dos pontos bala. Então este é novamente o uso desligado esquerda, direita, duas colunas. Espero que tenham gostado disto. Ah design. Você pode dizer lição sobre layouts e como usar suas duas colunas, Demissões, criatividade com criativo. Ah é, se você tem alguma pergunta para me fazer, vamos passar para a próxima lição. 13. Projeto o layout 2: Agora, eu quero que você crie um layout de duas colunas usando as mesmas técnicas que eu já mostrei antes . Não se esqueça de usar o espaçamento vertical, certo? Espaçamento vertical e atualização bullsh aqui, você pode ver aqui eu estou usando o mesmo pão bootstrap. E o que você está vendo é a variação do design finalizado, que é o design da linha central. E este você pode ver que está usando duas colunas. Então este formulário, você pode ver um concerto gratuito e tribunal que estou usando à direita e à esquerda. Eu tenho uma mensagem. E também estou usando a técnica, que é chamada de sobreposição, que você vai aprender nas próximas seções no chefe Técnicas. E você pode ver aqui, Toe Bella que eu estou usando algumas imagens ou alguns ícones ou o que você pode usar aqui. Ou talvez Facebook como visto em revistas ou qualquer coisa assim. Então você pode usar algo alguns logotipos aqui, algo assim. Então tente criar algo como este layout de duas colunas. Eu não quero que você sempre tenha um formulário aqui, porque isso foi uma farra de empréstimos. Então eu bebo algo assim deixe-me mostrar-lhe mais alguns exemplos. Aqui está outro exemplo. Este não é o meu projeto, mas você pode ver que você pode usar algo assim e o que eu quero. Uh, o que eu queria te mostrar aqui é este aqui. Então nós temos esses poucos logotipos aqui que este homem ou quem quer que ele seja destacado aqui, aqui e aqui. E você pode usar algo assim. Você pode usar um logotipo ou alguma coisa aqui. Em seguida, tente usar duas colunas para ter sua camada como esta. Você pode usar 60 40% 50 50% qualquer porcentagem que você deseja usar. Eu não estou, você sabe, pressionando você para usar 50. Você pode ver. Aqui está o meu outro desenho. A minha antiga, que foi há um ano. E você pode ver por aqui. Estou usando duas colunas. Você pode usar o mesmo, e isso também é tentar criar um layout de duas colunas. E estou ansioso para ver todas as suas tarefas. Então comece a projetar sua tarefa agora. 14. Layout de múltiplos colunas no Design de web: Agora nossa próxima parada é camadas de várias colunas. Se temos colunas como três colunas, quatro colunas, seis colunas, então estamos realmente usando um layout multi-coluna. Já vi muitas revistas usando três colunas. Então é por isso que escrevi aqui o layout da revista. Embora não seja totalmente um layout de revista, mas muitos medicamentos usam três colunas. Lee Nosso dedo do pé mostra diferentes imagens de ação ou diferentes artigos e histórias. Então, se você tem um monte de conteúdo fora, você pode usar coluna T ou camada de quatro colunas porque você tem que dividir seu conteúdo como nós temos quatro marcadores, marcadores de ponto ou três pontos de bala ou três feições fora de um produto ou quatro feições fora de um produto. Vamos dividi-los entre. Colunas diferentes. Então este é realmente o uso fora multi-coluna Lee horas. Agora vou mostrar alguns exemplos, alguns layouts de amostra, e vamos para exemplos ao vivo, sites diferentes e tirar a ideia. O que realmente é layout multi-coluna. Agora aqui está um exemplo ou um layout simples que você pode fazer no início ou cabeçalho fora do seu site. Talvez você tenha imagens aqui. Dois produtos dedo do pé, talvez algo assim para caixas. O que quer que você tenha, isso é realmente dividido em três colunas diferentes. Então temos 12 e 3, para que possamos ter uma pessoa aqui com alguma declaração de imposto. Temos algumas características aqui, O R. Talvez uma avaliação de cliente aqui. Então temos algum título e texto aqui e tentar, mas irritar o que quer que seja. Isso pode ser feito em um monte de combinações diferentes e isso, mas mostra que temos mais de três tipos de conteúdo diferentes. Um deles é um labirinto. Um é talvez um testemunho quando temos cabeçalho de texto escondido e talvez um texto relativo e uma cidade ou Caldwell Chamberlain. Então nós temos na verdade três blocos fora do texto. Então, se tivermos, como quatro blocos e cinco blocos, podemos não usar este. Talvez possamos apenas o nosso conteúdo assim. Por exemplo, se eu tiver, tipo, dois depoimentos de ah, eu posso obtê-los assim. Então, há muitas maneiras de eu fazer algo como este um testemunho maior, menor testemunho. Nossos comentários de clientes para comentários de clientes ou ouvir imagem de produto aqui. E, hum, o título e a introdução do produto e experimentá-lo agora. Mas um por aqui. Portanto, há muitas maneiras de você fazer a sequência e usar esta multi-coluna, uma coluna de três ou quatro layouts de coluna. Cabelo é outra representação fora do mesmo layout de três colunas, e você pode ver aqui. Eu realmente tento usar algumas margens no topo aqui. Então estas são três colunas Nós deixamos uma coluna aqui, uma coluna aqui para o espaçamento, e então na próxima seção aqui temos quatro feições ou quatro passos. Passo 1234 e eu dividi-los em quatro caixas diferentes. Agora, por que eu deixei essas margens ou cabeça apenas para criar alguns em apenas ponto em seu projeto, se o usuário está vendo como de uma forma linear, tudo é linear, engenheiro linear, eles vão obter entediado. Eles estão indo para o pé. Mergulhe. Sabe qual é a semelhança? Mesma experiência de novo e de novo. Então tente muito com seu espaço em branco aqui com suas colunas. Aqui temos três colunas e, em seguida, temos quatro colunas novamente. Podemos ter duas colunas novamente, podemos ter. Ah, layout central de novo. Então, novamente, podemos ter algo assim. Então isso é apenas para dizer que eu estou usando dois tipos diferentes de multi colunas ou aqui três colunas e quatro colunas ao mesmo tempo. Então não tente ficar com medo ou tentar o dedo do pé. Pense em um muito que eu sempre deveria usar quatro blocos ou quatro pedaços diferentes fora informação e dividi-los assim. Você pode usar 34 são variações como esta. Aqui está meu projeto recente. Apenas o exemplo do dedo do pé lhe dá uma idéia. Você pode ver onde Aqui eu estou usando três colunas diferentes do pé três colunas principais diferentes . Para mostrar esses três, você pode dizer recursos ou serviços confiáveis ou o que eles têm. Então isso é realmente eu tenho antes que eu tenho duas colunas do que eu tenho três colunas. Então eles enviaram cedo. Deixe-me mostrar de novo. Temos três características diferentes, três passos diferentes aqui. Pisou um dedo três. Aqui, Aqui, você pode ver que estou usando quatro colunas diferentes. E se você quiser que eu ligue a grade, deixe-me pensar nesta tecla de atalho. Então aqui está minha grade e você pode ver que esta é uma nota bootstrap e você pode ver que estamos aqui. Deixei estas calhas aqui, e estas estão a levar, tipo, quatro colunas cada. Isto está centrado. Este é o centro centrado. Isto é novamente tomando quatro colunas cada. Está tomando três colunas cada. E, hum, este é novamente dois layout de colunas em e nós temos novamente aqui um layout multi-coluna, que é três colunas ou então nós temos esta coluna, esta coluna aqui, que é esta aqui. Então temos esta coluna aqui. E então nós temos esta coluna aqui para que você possa ver como eu dividi este rodapé em três colunas diferentes e nós temos links de sites. Temos contato. Temos as informações sobre este site. O que? Este produto? Tudo o que temos. Então esta é uma ótima maneira que você pode ver onde aqui, na verdade, eu dividi com algumas cores para portar. Na verdade, são três colunas aqui. Tire outro exemplo. Aplicativo móvel. Você estava. Você pode ver o que aqui. Estes são jogos diferentes. Eu acho que a loja de adesivos é uma loja de adesivos e toda a grade é realmente construída em três colunas por isso é criar para a costa produtos diferentes. Você já viu um monte de vezes no comércio e, Passo lado no site de roupas. Esta é uma ótima maneira de mostrar um monte de dados porque nós temos, ah um monte de coisas para mostrar, então podemos mostrá-los em um grande off três ou quatro itens diferentes. É mais fácil escanear os olhos. Então esta é outra maneira. Agora aqui você pode ver um exemplo muito simples e você pode ver aqui os mortos são realmente divididos em quatro colunas diferentes. Um é maior, três são mais curtos. E como na verdade este seu designer de dados é que os mortos na verdade é terça-feira 26 de fevereiro. Ele requer mais com assim que eles têm Ah, novamente, eles têm algum tempo 7 30 B m ou um M. Então esta é uma ótima maneira fora mostrando selecionador de data. Este é outro grande exemplo fora usando três colunas aqui para que você possa ver que este é um grande design em. Eles têm, tipo, seis opções aqui patrocinadores porque os expositores da agenda nos contatam mapa, então eles estão usando três colunas diferentes. Então, se você olhar de perto nesta seção superior aqui, abaixo deste cabeçalho da página inicial você pode ver que temos novamente essas três colunas. Então, se eu tentar dedo do pé, ter algum alinhamento ou cabelo para que você possa ver aqui é a primeira coluna do que temos a segunda coluna. E então nós temos essa terceira coluna aqui algo como isso, então você pode ver um pouco fora de guloseimas dentro deles, algumas roupas de cama. Então, apenas para separá-los com algum espaço em branco, e então nós temos duas colunas diferentes. Esta é outra ótima maneira de mostrar informações. Ou se você tiver muitas opções ou informações para mostrar, você pode mostrá-las no layout da coluna do chá ou no layout de várias colunas. Agora este é o site de marcas de parede, e eu gosto de seu design um pouco mínimo. E, uh, é novamente você pode ver aqui que temos três colunas diferentes. Envolvimento treinamento de captação de supermercado gratuito ponto com Então, o frete grátis. Então, novamente, temos cinco colunas diferentes para mostrar categorias diferentes do que temos novamente usando o mesmo layout. Cinco colunas. Então, novamente, temos três colunas novamente. Temos três colunas, uma esquerda, uma é maior e o dedo direito é um pouco menor. Então isso é realmente o uso de várias colunas, e eu espero que você não tenha destruído a idéia e como usar isso corretamente. Se você tem alguma pergunta para me fazer, vamos para a próxima lição. 15. Layout de várias colunas: Agora é a hora de criar multi coluna Lee ou três coluna quatro coluna. Tudo o que você quiser, você pode usá-los até cinco colunas. Agora vou mostrar a vocês meus desenhos e alguns exemplos, e vocês podem ver aqui. Quero algo assim aqui. Então aqui temos. Eu peguei o texto da esquerda à esquerda e o texto à esquerda. Então tudo é uma linha à esquerda. Esquerda, esquerda, esquerda. Mas o todo continua no meio. Ah, e no próximo, aqui, aqui temos. Ah, este título à esquerda. Mas tudo está no meio como ícone está no centro fora deste cartão em também, este texto está no centro. Então o que eu preciso que você faça é criar algum título como este, limpo pelo menos quatro ou t colunas e três usando ícone, algum imposto e algum link aqui e criar layout multi-coluna. Deixe-me mostrar-lhe mais um exemplo. Agora você pode ver que isso está sob design, que é meu recente, que vai ser meu novo design de site e você pode ver ou ouvir aqui nós temos três colunas e eu estou mostrando todos os meus cursos assim. Você pode usar algum botão aqui ou você pode usar o título ou o que quer que seja. Então coisa de porta que você sempre tem que colocar. Você está indo para o meio. Você pode usar o esconderijo à esquerda e tudo está no meio. Então é disso que eu preciso. Eu quero que você crie três colunas de layout de quatro colunas e me dê algo assim. Então, estou lendo para sua missão. Certifique-se de que você está indo dedo do pé. Envie isso porque é assim que você vai melhorar quando eu tento revisá-los. Quando tento mostrar-lhe os seus erros e, neste processo, também aprendi muito. Então isso é, você pode dizer, aprendizagem mútua e compreensão sobre o design e os místicos do design. Então, estou ansioso para olhar para a frente para as suas atribuições, ou submetê-las agora 16. : Agora vamos falar sobre um tipo muito diferente fora do layout, que eu chamo uma flor lei fora. Agora, por que eu chamo de flor? Porque tem uma forma fora de uma flor com algumas batalhas. Então você pode ver sempre que você vê uma flor, ela tem, ah, grande meio. E então temos cinco, seis ou quatro batalhas em todo o seu tamanho. Então isso é chamado de layout de sabor. Agora, por que e quando você deve usá-lo? Quando você tem um item central, você tem que se concentrar em um produto, por exemplo, um aplicativo móvel ou algum cigarro e ou outra coisa. Então, seja qual for o produto, provavelmente será. Será principalmente no meio do layout no centro fora do destaque. Portanto, é bom para destacar diferentes, como quatro ou cinco ou seis ou sete características diferentes de um produto. Normalmente, ele terá, como você deve ter pelo menos quatro coisas diferentes ao redor do item central, como quatro características diferentes. Rebocá-lo, você pode apresentá-los Neste layout, Eu vou mostrar-lhe alguns arranjos do que nós vamos olhar para alguns exemplos Como outros como usá-lo e como eu tê-lo usado em meus projetos anteriores. Então vamos ver alguns arranjos. Agora. Este é um arranjo muito simples que vimos muitas vezes, mas talvez você não o reconheça. O produto está no meio. Poderia ser mais pelo laboratório. Pode ser um perfume ou qualquer outra coisa. E então temos recursos aqui. Recurso. 123456 Então isso é na verdade eu estou usando seis batalhas fora desta flor, então eu chamo de layout de flores. Outros podem não chamar isso de flor alto. Eles podem chamá-lo de outra coisa, mas para simplicidade e para entender a idéia fora do trenó. Este é, ah, layout de forma de flor, e este é um exemplo muito típico dele. Agora virei minha coluna. Urgh leva 12 grades de coluna, e você pode ver ou ouvir como eu usei o mesmo. Uma flor lei para meu benefício, então temos uma imagem de produto no meio. No topo. Temos que ir à direita. Temos de recursos à esquerda. Temos dois recursos com algum imposto e na parte inferior temos por nenhum botão. Então ainda é layout de flores. Mas tem 123456 batalhas. E eu usei meu esconderijo e por nenhum botão no mesmo arranjo fora de um layout de flores. Espero que você tenha aprendido muito e como você pode usá-lo. Não, vamos ver alguns exemplos. Vamos em frente e deixe-me mostrar-lhe o meu projeto primeiro. Este é um dos meus antigos desenhos que eu acho que eu usei a concorrência. E esta é uma competição de design. E você pode ver aqui, aqui, nesta parte aqui. Isto é basicamente um cigarro e você pode ver que estou usando o mesmo layout de flores. Temos o produto no meio à esquerda. Temos cartuchos e baterias à direita. Temos algumas características como carregamento portátil demises carro traseiro, homem tabaco tradicional disse em todas as características diferentes no topo que temos título e subtítulo Tagline. Então, no fundo, não temos por ninguém. Então isso está usando eu estou usando aqui layout de flores. Você pode talvez julgar errado que ele tem três colunas, mas ainda é um layout de flores. Temos como tudo organizado em torno deste objeto do meio aqui temos outro. Isto não é uma flor de lei. É basicamente três colunas, então esperanças Então isso é o que eu queria mostrar a vocês que você pode usar layout de farinha como este maneiras diferentes. Não, vou mostrar-vos mais alguns exemplos. Não, este é o segundo exemplo. E ah, aqui você pode ver este designer que ele tem ou ela usou Ah, este design pronto exclusivamente Porque você pode ver esta forma ou o cabelo brilhante está em um formato três d. Está em uma perspectiva, uh, uh, layout de perspectiva. E temos novamente a mesma coisa acontecendo por aqui. Então este produto está no meio. Temos agilidade, vitalidade focada, energia e atributos de produto na parte inferior que estão realmente fazendo um layout de flores. O Bert. Ah, aqui. Você pode ver que é um pouco deslocado no nesta direção. Então, no topo, nós não temos nenhuma batalha aqui, então você pode dizer que é 1/2 amorosamente fora, mas é quase layout de flores no chão, que eu chamo layout de flores. O produto está no meio e tudo o resto está em torno dele. Então este é basicamente outro uso fora do layout de flores novamente. Este é outro site de algum designer russo e você pode ver aqui novamente. Temos parque no meio e tudo está à esquerda e à direita. E na parte inferior é este é novamente um uso de flub chão cedo e você pode ver aqui que ele não está usando qualquer posição no topo. E temos 123456 à esquerda e à direita. E sete é basicamente o óleo do botão aqui. Então, este é novamente o layout da flor. Você pode usar isso de muitas maneiras. Você pode ver ou ouvir, ouvir. Temos ícones com texto e até Burton e uma imagem. Então esta é outra maneira. Aqui está outro exemplo de layout de farinha, embora você não parece reconhecê-lo, que é layout de flor chão, mas eu acho que é sem sabor. Mas você pode ver esta prateleira. Sherlock Holmes no meio é quase um meio fora deste design ou o ponto central deste projeto. Então temos 123 em torno dele. Então temos esta fechadura fechada. Esta é também a direção. Mas é, você sabe, em torno deste personagem principal fora da série. Então este designer, eles usaram isso em. Ah, você pode dizer criatividade porque tudo é colocado para fora de uma maneira diferente. Então você pode ver aqui temos imagem e texto no texto na parte inferior. Esse texto de imagem no texto da imagem esquerda na imagem direita, texto na imagem esquerda, texto na imagem, e então nós temos este cabeçalho. Então esta é outra maneira criativa. Só estou tentando abrir sua mente em diferentes saídas criativas porque isso vai te ajudar muito enquanto você está projetando. Não tente se unir em grades de reboque de comida como esta, como quatro itens iguais. Tente velar seu design. Tente ter algum uso de criatividade em seus layouts. Espero que tenham gostado deste layout de flores, palestra ou lição. Se tiver alguma pergunta para me fazer, vamos para a próxima lição 17. Projeto ► de flores: Agora é sua hora de enviar sua tarefa e criar algo com farinha. No início, você pode ver Agora eu usei versículo Fitbit de lado positivo e criar esta flor simples Lay out muito rapidamente. E eu não estava, você sabe, eu só criei em 10 minutos. Então, pelo menos, estou esperando algo assim de você. Então produto no meio, temos seis recursos ou aqui e aqui está a página que eu tirei. Ok, então esta é a página. Este é o texto. Estas são as coisas que você também pode usar os ícones. Não tive tempo de encontrar todos esses ícones. Você pode usá-los para aprimorar seus designs. E este é o lei florido que eu quero. Então deixa-me mostrar-te, um onde temos este. Ok, então um é este e o 2º 1 é este. Então eu já te mostrei este, que é o meu antigo design. E você pode ver que eu tenho ah, quase lindo fora. Mas as coisas são diferentes. Temos algumas características aqui para feições por aqui e por ninguém. Então você pode criar algo assim e você pode ter um aplicativo móvel, nossa tela móvel no meio e mostrar alguns recursos aqui. E você também pode ter algo semelhante a isso, como eu usei, mas versa. E eu sou a quatro vezes usando ou tifo que estou usando é realmente grande, que é uma cara de morrer livre. E isso é tudo. Então, se você pode criar algo como este layout de flores, eu realmente adoraria ver suas tarefas para começar a fazer sua tarefa agora mesmo. 18. Grid de Masonry em web Design e design de aplicativos para móvel: nesta lição. Agora vamos falar sobre grade de alvenaria. Por que é usado. Se você tem um monte de imagens, você tem um monte de produtos. Você tem, ah, muitos postes. Artigos que você pode mostrar-lhes usando cred de alvenaria. Agora jejum é que se você tem um monte fora de artigo baseado ou site baseado em conteúdo onde temos um monte de imagens ou artigos de notícias, você pode mostrá-los usando este segundo grau. Por que o nome é alvenaria. Porque se você já viu uma bola de tijolo Vaulx cheio de tijolos quando a falta e tentar construir essa parede, eles têm um patrono. Eles tentam encaixar diferentes tijolos em diferentes estilos. Eles não estão colocando cada tijolo em cima um do outro. Algumas pausas estão à direita à esquerda, e elas compõem toda a parede. Então é assim que este nome é, como na verdade ganância de alvenaria, e eu vou mostrar-lhe alguns arranjos do que vamos olhar para alguns exemplos. Sites que os utilizam. Eu, pessoalmente, não gosto de perder muito são pelo menos concordados que desconhecido e Ingrid Então há alguns faltando as notas. Se você for arrastado para baixo. Eles são Há conteúdo aparecendo uma e outra vez. E lá estão eles, tela interminável. Pode ligar para eles e para a Astrid. Mas Mason concordou, não é realmente uma grade de rolagem sem fim. É basicamente Ah, hora do designer de design. Ok, então vamos ver alguns arranjos e então vamos ver alguns exemplos. Ok, então aqui está uma típica ganância de alvenaria. Você pode ver aqui nós aqui. Temos três produtos à esquerda, e temos produto e produto no meio que são grandes. Um pouco maior do que as caixas de produtos à esquerda. Nossas cartas. Você pode chamá-los à direita. Temos produtos menores para menor, e então temos um muito grande para na parte inferior. Então isso está realmente faltando. Concordou. O conceito é que você está indo dedo do pé têm tamanhos diferentes fora de tijolos, para que você possa ver no meio. Temos pedras muito grandes à esquerda. Temos o Briggs padrão à direita. Temos dois tijolos pequenos do que usamos. Um tijolo muito grande. Tudo isso depende de você. Você tem que criar alguma variedade que você tem que criar, alternar alguns comprimentos ou alturas dedo do pé, você sabe, criar algum interesse em seu layout. Então é assim que você vai usar grade de alvenaria? Aqui está outro arranjo da mesma ganância de alvenaria. Mas desta vez eu estou tentando usá-lo de uma maneira diferente. Em um criativo você pode ver que estamos aqui. Aqui temos Ah, horizontal. Ah, imagem de produto muito grande no topo que está tomando duas colunas. E temos novamente no intervalo mais pequeno direito do que temos um grande, nem aqui do que novamente no meio. Temos algumas pausas largas à esquerda. Temos alguns tijolos vermelhos que são tamanhos padrão. Então há, tipo, tipo, toneladas de combinações diferentes, diferentes layouts que você pode fazer com falta e arrependimento. Portanto, cabe às suas ideias criativas o que você está tentando fazer para que você possa ter algum produto de recurso nesta área no topo, onde temos uma imagem muito grande do que temos alguns anúncios à direita. Talvez algum anúncio, talvez alguma caixa de assinatura à esquerda. Podemos ter nossos artigos em diferentes categorias, algo assim. Então, há muitas possibilidades. Tudo dependerá do seu conteúdo, então você deve ter seu conteúdo primeiro. Dedo pronto. Aplique este projeto de grade de alvenaria. Agora, vamos ver alguns exemplos e uso de tempo riel fora desses layouts. Agora, este é um exemplo de ganância de alvenaria. Mas eu realmente não gosto desta camada. Por quê? Há duas razões. Uma é que isso é meio estranho. Layouts muito criativos que estão totalmente fora do caminho vão confundir seus usuários. Então, no topo, pode ser bom, mas aqui, isso é uma bagunça. Eu não posso dizer que seção é ou imagens depois da ressecção do dedo do pé. Se esta imagem é literalmente esta ou esta aqui. Portanto, deve haver alguma lacuna entre estes blocos de texto e imagens. Odeio quando os designers tentam usar a criatividade e criar uma bagunça como esta. Este é um Rubley muito criativo fora, mas é totalmente usar menos. Por que eu te mostrei aqui porque, na minha opinião, o layout, suas cores, seu design visual, tudo vai facilitar a funcionalidade fora do seu site. A usabilidade fora do seu site, a capacidade de legibilidade e compreensão fora de seu usuário deve ser capaz entender e entender o que ele ou ela está procurando facilmente. Isto está totalmente confuso. Acho que para mim, isso é , causa perdida,então eu nunca vou te dizer para , projetar algo assim, mas só para ter a idéia do que pode ser feito com o Mason. realmente aqui de novo, você pode ver que temos este outro exemplo de layout de alvenaria. Você deve ter visto este layout em Ah, janela, Stan. Barra de menu. Então, para mim, eu não gosto muito disso, porque para mim, está realmente confuso agora. Este parece melhor porque temos botões aqui e tudo isso está dentro desta caixa inteira . Portanto, não é letra para a imagem à direita, à esquerda. Então, cada seção é por conta própria. Então é um pouco que eu posso ver muito melhor do que este para mim. Este layout, como você pode ver aqui com esta imagem, eu não posso saber que esta imagem está eufórica. Toe o texto inferior ou o fundo superior. Então isso é um pouco confuso para mim, então eu normalmente tendem a evitar essas camadas fora. Você deve ter separações muito claras entre diferentes seções de conteúdo. Não tente usar imagens assim. Nosso dedo do pé, ter alguma fronteira em torno deles, então eu posso ver que esta é uma seção inteira deste é um bloco inteiro. Agora você pode ver por mim aqui. Eu posso ver que este é Olhe, esta pessoa está olhando para este, e ele está olhando para este. Não sei se todo este cartazes ou este tipo está relacionado com este Collender ou o que quer que seja. Isso é muito confuso para mim. Então tente evitá-lo. Você deve ter algum, hum, separação riel entre diferentes blocos fora de texto ou informação. Agora, aqui está um bom sapato. Mason concordou. E ele é usado em multa, apenas confiança fina ou sido apenas como você chama. E você pode ver o que eu tenho aqui para alvenaria, e você pode ver toneladas de arrependimentos perdidos aqui. Como este aqui. Eles têm um grande uso fora destes e você pode ver separação total. Vamos ver este. Você pode ver que essas imagens estão totalmente separadas umas das outras com alguma lacuna. E este é o bom uso do recruta Mason. Então Mason arrependimento é usado no Pinterest e nós temos este blog ou curio snort com e você pode ver todos estes estão realmente faltando Regrade artigos forçados que você pode ver ou ouvir isso vai continuar e continuar para mim. Eu não gosto desses sites sempre rolando que deve ter algum fim de qualquer maneira, então aqui temos mais um totalmente qualquer ponto com E se nós vamos para baixo, você pode ver novamente. Temos grau de alvenaria e temos diferentes postagens. Até artigos. Ver onde? Aqui Eles têm linhas claras separadas caixas em torno deles para que eu possa ver que este é um post. Este é outro. Este é outro. Então este é outro exemplo. Ótimo exemplo. Muito simples, muito original. Muito agradável. Então temos outro, que é vaidade, Dean. E você pode ver aqui se eu arrastar para baixo, nós temos novamente o mesmo remédio arrependimento. Mas o problema aqui é para mim que é, hum você pode dizer que às vezes eu vejo algumas irregularidades como nós podemos ver texto do cabeçalho da imagem e ah, o texto é fraco ou algo assim. Algo está faltando neste projeto. Talvez tenha usado algumas linhas aqui para ter alguma separação ou talvez no fundo, alguma linha só para mostrar que isto é uma separação ou algo assim. Mas para isso é outro exemplo de alvenaria, grego. Então este é ótimo. Este é bom. Este é realmente ótimo. E isso é tudo sobre ganância de alvenaria. Espero que tenha entendido a ideia de usar Mason Regrade. Ah, e você vai usá-lo de diferentes maneiras criativas. Se tiver algum problema, me avise nas perguntas. Ou pode me perguntar qualquer coisa. Você pode entrar em contato comigo pessoalmente. Eu respondo mais logo que eu possa esperar para vê-lo na próxima lição. Então vamos passar para o próximo vídeo. 19. Killing com combos porcentagem no Design no de layout: Neste vídeo, vou falar sobre um método criativo para definir seu layout, que é sempre pensar em porcentagens, mas nunca como você está definindo sua nota em seu layout. Tente pensar de uma forma fora que isso vai tirar 20% de desconto no layout horizontalmente. Isso vai tirar 80% de desconto no layout para que você possa definir Lee em porcentagens e alocar grades diferentes usando porcentagens. E seus desenvolvedores vão adorar você porque é mais fácil para seus desenvolvedores ou equipe de desenvolvimento. Cite, e você pode criar diferentes variações simples para ter alguma criatividade em seu layout. Agora, se você já jogou jogos de vídeo ou jogos de luta, há um termo chamado combo. Então combo é quando você tenta acertar o seu adversário e continuar batendo neles com combinação diferente fora. Ele está tão no design deles. O que eu quero dizer por porcentagem compor é que você está indo para usar diferentes combinações de layout como 60% e 40% campell 50 combo, 20% e 80% compulsivo. Estamos indo para muito sobre layout usando todas essas combinações diferentes, então Nós também pode ter três combos de coluna como 2020 e 60 com bowl 40% 30% 30%. Então eles estão todos fazendo 100% para ter certeza de que eles estão somando, 200% comprados. Tente, você sabe, fazer uma combinação que está indo acima ou abaixo de 100%. Então temos 50 30 20. Então há você pode dizer toneladas fora de combinações. Você pode fazer um monte de combinações diferentes fazendo isso, como você pode ter 10% ou 20% ou 30 por 30 70% combo. Então esta é outra técnica que eu acho que muitos designers começam. Tente pensar nestes termos. Tente usar combinações de porcentagem em seu layout. Então aqui você pode ver que eu estou mostrando algumas idéias de diferentes combos como você pode ver no topo . Temos 40 60 agora na próxima seção, vez de usar novamente 60 40 ou 40 60 ou repetir mal fora. Eu tento deslocá-lo à esquerda, e eu tentei usar 25% e 75% combo, em seguida, na próxima linha ou na próxima seção fora do meu design eu estou usando 25 25 25 25 25. Então temos quatro caixas iguais. Então é assim que você está indo para muito seu layout com diferentes combinações de idade por cento, vez de usar um monitor no layout dos EUA em 40 60 40 60 40 60 60 60 ou 60 40 ou 50 50. Isso vai criar um design chato. Seus usuários vão, você sabe, suas mentes. Precisam de algo diferente depois de alguns segundos. Então, sempre que você tentar muito seu layout, ele vai criar algum interesse em sua mente, e eles vão continuar navegando que envolve. Eu não tento ser muito criativo e tentar criar layouts que são, você sabe, um problema para os usuários. Mas você tem dois muito seus combos. Então esta é outra técnica que eu acho que muitos designers não usam. Agora, aqui está um totalmente fora e ouvir o que eu estou tentando fazer é eu estou tentando muito o meu layout e tentar o espaço de conselhos do dedo do pé aqui em vez de ter 2040 60 combos. Eu vou ter algum espaço branco aqui, então nós temos uns 6 50% sobre o cabelo, 25% sobre o cabelo e 25% espaço branco no Haider. Então o que eu estou fazendo é 50 25% espaço em branco e 25%. Uh, o que aqui? Então você pode fazer algo assim, também. Por isso, não tentes sempre sentir tudo. Você pode usar o espaço em branco no layout novamente. Por aqui. Como podem ver, temos temos 40% de algo assim ou aqui. Eu acho que você precisa dividir isso 5/12. Então tire a ideia sempre que eu estiver usando. Isso é 25% e ah, isso é, eu acho que seria dividido em 75%. Então, o que quer que eu esteja usando, estou tentando muito meu design. E novamente, você pode ver aqui, essas quatro caixas são 25%, mas o layout é diferente. Tem alguma radiação adicionando um pouco de espaço branco aqui. Agora vou mostrar alguns exemplos de um dos meus designers favoritos. Sorteio amanhã. Estou tentando segui-lo de muito tempo, talvez um ano ou mais, e você pode ver por aqui. Este é um design recente para o seu volumoso e você pode ver. Quero mostrar-lhe como usar o seu layout em porcentagens e tentar variá-lo em diferentes combinações de empresas. Então aqui, você pode ver se você olhar para esta cabeça aqui, nós temos, tipo, 65 ou 60% e 40% para este portão de fezes ou este download. Fale sobre um vídeo aqui. Então, se você for para a próxima seção que temos sobre e essa pequena informação sobre esse cara incrível de qualquer maneira, nós temos, tipo, tipo, 30 ou 20% por 80% de alocação sobrecarga. Então, novamente, se formos para esta área, temos, tipo, quase 50% por 50%. Temos mais espaço, algum espaço em branco, algum percentual para espaço em branco. Então eu vou chamá-lo de 40 60. Então 10% é quase do espaço em branco. Então isso é de novo, de novo. Você pode ver aqui de novo. Ele usou 20 ou 80% do que tivemos 25 25 25 25 25 novamente. 2080 25 25%. Então, novamente, 2080. Então você pode ver que é assim que seu layout está indo. Toe parece um design mais criativo. Então você tende a ter alguns gumbo, combinações diferentes para diferentes seções. Você pode ver que estamos aqui. Isso é repetitivo de muitas maneiras diferentes. Então, esta é novamente uma porta principal fora de repetição projeto. Tente muito a sua repetição. Então não tente usar algo parecido 10 vezes por aqui. Tente muito em seu layout. Então, esta é uma ótima maneira de mostrar como você pode usar layouts e criativo é como Você pode ver onde aqui, em vez de usar apenas imagem você. Ele usou imagem com texto e à esquerda novamente, temos algum botão e imagem e este saudita próximo e este título agora. Agora vamos ver mais um exemplo. Aqui está novamente outro projeto do esforço Amal. E você pode ver onde aqui quase temos mais pesado à esquerda. Aqui temos a imagem e este fardo que este fardo está a ficar dentro disto. Você pode dizer Ah, um pouco quebrando o layout. Mas ainda está ótimo. É chamado como fora da caixa. Mais tarde. Eu vou falar sobre outra lição de qualquer maneira, então você pode ver de novo aqui nós temos, tipo, 70 40 ou 70 30 algo assim. E novamente nesta seção. Aqui, temos aqui à esquerda, 40 ou 45 35 65 ou 60% quase na luz. Então você pode ver que esta é uma grande vidi ação e colocar para fora novamente. Temos sobrecarga. Nós temos ah, como 33 33%. Ou aqui novamente nesta seção, você pode ver que temos, tipo, 30 70 novamente, quase semelhante a isso. Este é novamente um grande uso. E nós temos, um, 33% 30% 33%. Isto é 100%. Isso é novamente 33% 3 comentários. E aqui temos algo parecido. Quase esta cabeça aqui. Então o layout é que temos 40% aqui, ou talvez 35% e 65 ou 60% à esquerda. 40% aqui, Então este é o detalhamento de diferentes layouts de grandes designers, e é assim que você vai usar seus combos. E posso mostrar-te 10 e milhares de modelos diferentes. Mas acho que isso vai explicar tudo para você, então não preciso explicar mais do que isso. Este não é um assunto muito científico ou equações de viagem no tempo. Então, isso é tudo. Se tiver alguma pergunta para me fazer, vamos para a próxima lição. 20. Uso criativo de marcas no design de layout: neste vídeo, eu vou falar sobre um conceito muito importante fora do design de etiquetas, que está usando espaço em branco e margens criativamente. Um monte de designers que eu vi que a tentativa dedo evitar um monte de espaço em branco e margens em lados fora de seu design. Eles estão com medo, usando espaço branco ou respirando espaço em seu design. Agora vou mostrar-vos alguns exemplos e algumas ideias de layout. E então eu vou mostrar a vocês como diferentes designers estão usando espaços em branco e margens para criar saídas criativas que vão parecer ah, Senhor melhor do que o seu. Layouts usuais onde temos igual quantidade fora das margens em ambos os lados. Então aqui vamos discutir duas técnicas. Ter margens de um lado e usar blocos de espaço de voz. Agora design é uma história. Então, em apenas uma história, você não tem que mostrar tudo no início. Você tem cenas onde apenas uma parte fora do design é visível. Então, aqui você pode ver neste design que estamos usando uma margem grande ou pesada à direita. Temos muito espaço em branco em nossa primeira seção de cabeçalho no lado direito. Agora, na verdade, significa que estamos deixando um grande bloco de espaço branco aqui. Da mesma forma, nesta terceira seção estavam vivendo um grande bloco de espaço branco à esquerda. Espaço em branco, se usado corretamente, tem seu estranho. Então, se você está tentando fazer algo assim, você pode fazê-lo. Você também pode chamá-lo de design assimétrico porque ele não é adequadamente equilibrado ou equilibrado em ambos os lados. Mas ainda assim, é meio equilibrado. Então, se você olhar na natureza, você verá muito simetria com assimetria. Se você olhar para qualquer árvore nos galhos e as folhas que caíram no chão, eles não estão em uma simetria, mas eles ficam bem porque eles não se desviam muito do patrono pop. Então, se você tem algum padrão como este e você está usando espaço em branco à esquerda e à direita e você não está, você pode dizer que você está usando os blocos de vice pres dentro de suas notas. Seu design assimétrico ou design desequilibrado ainda se sentirá equilibrado. Então aqui estou eu, usando muitos blocos grandes de espaços brancos aqui. Agora, este é outro exemplo, eu chamaria isso. Às vezes, o layout do livro é muito gráfico. Os designers podem estar familiarizados com isso. Se você olhar de perto, você pode ver que a linha visível que está caindo neste design está aqui. Então nós temos, tipo, duas colunas. Gap aqui no lado esquerdo. E também da mesma forma, você pode ver aqui no topo. Temos três colunas aqui e duas colunas aqui. Então vamos esconder isso. Agora, se tentarmos fazer algo assim, é assim que estou tentando explicar essa idéia. Agora você pode ver que este tipo fora layout vai dedo do pé tem, ah margens, que vão ser mawr inclinado de um lado. Então teremos margens maiores de um lado, como se você pudesse ver que está aqui. Aqui. Temos, tipo, três colunas de margem, e à esquerda, podemos ter uma margem menor. Então isso vai criar um efeito muito agradável no seu design. Eu vi um monte de designers que eles tentam equilibrar a viagem com base em ambos os lados, mas às vezes se você tentar desequilibrá-los. Tente usar um lado mais pesado com espaço em branco, ele vai ficar melhor. Então, no seu próximo projeto, aconselho-o a tentar fazer algo assim. Tente mudar seus elementos de design. Deixe duas colunas em vez de, você sabe, delimitar seu tudo com essas colunas e tentar preencher tudo. Tente deixar o dedo do pé. Ah, muito fora, hum, espaço de um lado e um pouco menos de espaço de um lado. Por isso, vai criar um efeito muito agradável. Agora vou mostrar alguns exemplos em que as margens foram usadas criativamente. Você pode ver se você olhar para esta tela aqui à esquerda. As margens à esquerda são mais do que a margem à direita. Então temos mais espaço em branco à esquerda do que temos mais espaço em branco à direita. Então é assim que você vai tentar o dedo do pé, ter um tipo diferente fora layout em seu aplicativo móvel. Vai parecer mais criativo. Vamos ver, disse este exemplo e eu vou mostrar-lhe o que eu realmente quis dizer. Então, se você descer, deixe-me mostrar-lhe, ou aqui. Então esta é a página que você pode ver todo este design está inclinado no lado direito. É mais pesado no lado direito e à esquerda, você pode ver se você olhar de perto. Há muito fora do espaço em branco. Então, se você seguir este projeto, você pode ver o porquê. Muito espaço em branco, muito espaço em branco, muito espaço em branco. E então este designer mudou a visão linear ah e inverte isso e nós temos muito espaço em branco à direita. Então, novamente, temos formas de vício quase iguais em ambos os lados novamente. Há muito espaço em branco no lado direito. Então é assim que você vai usar suas margens? Seu espaço em branco é criativo? Você tem que deixar um bloco maior baseado em voz na esquerda ou no dedo do pé direito. Obtenha alguns layouts criativos. Da mesma forma, temos este design de varejo inteligente. E se você se concentrar claramente neste design e ver que ele também está quase inclinado no lado esquerdo . Então temos um design mais pesado à esquerda. Temos um espaço vazio à direita. Então, se eu arrastar para baixo, você pode ver Ok, Ok. Então aqui temos mais espaço em branco. Tudo é uma linha à esquerda. Então temos mais espaço em branco aqui, mesma forma na seção. Então, isto é na verdade judeus fora do espaço branco. Tente dedo do pé. Concentre-se que você também pode ter muito ou deixar um monte de espaço em branco no lado direito ou esquerdo para obter melhores idéias em colocar para fora seus APs ou sites. Aqui está outro exemplo Flex flat fiscal navio mais inteligente e você pode ver que aqui temos algo algum uso criativo nesta seção fora do espaço em branco. Você pode ver que temos um bloco muito grande de texto e temos imagem e temos muito espaço em branco abaixo desta imagem. Então eu não acho que em termos fora das margens que nós vamos sair. Eu espaço no riso à direita. Você também pode deixar um grande bloco fora do espaço em branco na parte inferior. Então, ele vai criar muito fora Bom efeito. Você pode ver que esta imagem já é muito pesada. É colorido, então os usuários por isso não está olhando desequilíbrio. Temos um monte de texto aqui, mas ainda está ótimo. Então é apenas como uma forma fora. Você pode dizer, Hum ah ah ah Hammer ou algo assim. Então nós temos ah, direção vertical aqui e horizontal aqui. Então, a dois quarteirões daqui, você pode dizer juntos? Da mesma forma, você pode ver nesta seção vemos o inverso invertido fora do arranjo inverso para este layout. Então esta é outra técnica que eu já mostrei que você tentou muito coisas toe obter melhor layout e olhar melhor dedo do pé tem alguns mawr projetos envolventes novamente. Se você olhar para o topo desta seção aqui, você pode ver que há muito fora do espaço em branco depois disso. Ah, navegação. Então nós temos, tipo, eu acho que dois ou talvez 300 ou 350 talvez 400 pixels fora do espaço aqui. Então isso é muito fora de lacuna. Eu não vi um monte de sites que eles tentam usar o espaço em branco assim. Vamos ver mais alguns exemplos aqui. Temos outro exemplo e aqui é este aplicativo e você pode ver que temos mais margem à esquerda e tudo é deslocado à direita. Então, mas Hanzal, você pode ver nossos filhos para a direita e ah, toda essa informação instantaneamente para a direita, embora esteja alinhada à esquerda, mas tudo o que eu tenho. Ah, muita margem. Ou aqui, vamos ver esta outra vez. Este é outro exemplo. Aqui novamente, você verá claramente que temos muito espaço em branco à esquerda. Então isso vai criar um efeito muito agradável em seus projetos. Se você está projetando para Mobil ou sites. Não pense que temos uma tela muito pequena no celular, então não podemos usar ideias criativamente. Você pode usá-los. Certo, então aqui temos outro exemplo. E novamente vocês podem ver aqui que temos muito espaço em branco à esquerda, e tudo é Crianças à direita. Mesmo o botão mais é usado muito Vice Lee. Então, tudo é principalmente design pesado à direita em boa margem à esquerda. Então ele vai criar algum olhar criativo em seus projetos. Então eu vou te dar ah, e exercício ou tarefa para criar alguma coisa alguma tela como esta. Vou lhe dar um exemplo de tela. Vamos tentar fazer algo assim. Talvez algo como este. Esta semana e vamos ver como você vem acima com idéias diferentes. Espero que tenha aprendido como estamos indo. Use margens criativas no lado esquerdo ou direito ou até mesmo na parte inferior. Alguma imagem para criar layouts criativos e tentar toe sair dos designers normais. A Lynn. Então estamos saindo da pista deles e estamos dirigindo em um pouco fora da pista criativa , nossos carros de design. Ok, então espero que tenha gostado desta lição. Se você tem alguma pergunta para me fazer, vamos para a próxima lição. 21. Projeto ► a criação de marca criativa: Agora você aprendeu a usar Ah, muita margem no lado esquerdo ou direito para criar layouts criativos. Agora é a hora que você vai me dar uma tarefa como esta. Estou a mostrar-te no teu ecrã. Estou usando figura agora. Você pode usar qualquer software de design, qualquer ferramenta que você quiser. E você O que eu quero que você faça é que você vai deixar um monte de espaço em branco à esquerda ou à direita. Tudo o que você acha que é possível para você. Então agora eu sou você. Eu criei este aplicativo de barriga chamado alimentos saudáveis ou ele vai comer ou o que quer que seja. Você pode projetar algo assim e me mostrar sua tela assim. Então tente criar um layout com muito espaço em branco ou margem à esquerda ou à direita. E aqui temos a imagem renderizada que você pode ver aqui. Então crie algo assim e eu estou esperando por seus projetos. Tente enviar um projeto simulado onde você mostra o seu design em um telefone celular ou algo assim. Então vamos ver o que você pode inventar 22. Fora de caixa e sobreposição no Design no: neste vídeo, eu vou falar sobre uma técnica muito diferente que muitos designers não usam, ou talvez os avisos que eles não entendem, que é fora do layout da caixa. Agora fora da caixa é basicamente baseado neste princípio de que sempre que um usuário ou seres humanos , eles continuam vendo o mesmo patrono ou parecem semelhança em seu projeto como se você tivesse mais, não a própria voz. Então, por exemplo, se você ouvir alguma música, se o Sam Be Beat estiver acontecendo por uns 10 minutos, você vai ficar entediado. Então, para que músicos estão lá? Tente dedo do pé muito depois de cada 30 segundos ou depois de cada 15 segundos que tentar Toe Jane. Há batidas ou coisas assim. Então isso é sobre música. Mas sempre que você está projetando algo, você tem um layout. Você tem que manter o interesse fora de seus usuários em seu design. Para fazer isso, você tem que reboque, pensar e mudar. Lá você pode dizer linha de visualização, por exemplo, se eles estão vendo algo e tudo está alinhado dedo do pé uma linha à esquerda, você tem que mudar isso. Depois de algum tempo, talvez o cruzamento dela. Você tenta estender o plano de fundo para toda a tela ou você tentar sobrepor alguns elementos na ponta do design Outra seção. Você está sobrepondo dois elementos, e ele vai criar um layout muito interessante. Então tente se desviar das linhas da grade. Tente se desviar do mesmo tipo monótono fora do layout de design. Tente sair da caixa e eu vou compartilhar com vocês um monte de exemplos diferentes e também telas diferentes, que eu tenho telas de amostra que eu projetei para você. Então vamos discutir isso e eu vou te dar muitas idéias criativas para usar essa técnica fora da caixa em seu projeto Leo. E agora aqui estou eu mostrando o primeiro arranjo e você pode ver que tudo está alinhado à esquerda para uma única linha. Agora, se olharem para o lado certo, estou a comer as minhas raças. Ah, Senhor. Então, na segunda seção aqui, você pode ver que eu estendi isso e eu movi esta imagem para fora das minhas notas. Estas são as minhas 12 grades de colunas e podes ver o teu cabelo. Estou usando 12 grades de colunas e estou movendo essa imagem para fora de Tikrit. Você pode mover isso, e talvez ele vai tocar seu cabelo em ir para todo o lado direito. Você também pode fazer algo como você pode estendê-lo nesta direção em ambas as direções e vai quebrar a gripe fora de seus usuários. Eu assim eles podem estar pensando que tudo está contido neste recipiente. Mas se você tentar quebrar este país em recipiente 12 grau recipiente, ele vai toe fazer muito mais interessante para fora. Agora aqui está outro arranjo fora sobre a técnica fora da caixa. Em vez de estender sua imagem, fundo ou qualquer outra coisa nosso elemento de design querido e quebrar a nota, estamos realmente quebrando o layout. Estamos sobrepondo coisas uns sobre os outros, então temos imagem do contribuinte no fundo, e o próximo alguns fora do texto está sobrepondo na imagem. Então esta é outra técnica, que eu acho que muitos designers notados são novos designers. Eles não tentam usá-lo, então não tenha medo. Você vai parecer muito melhor. Seus projetos vão ficar muito melhor quando você tentar fazer algo assim. Então tente sobreposição, imagem sobre texto ou temos um bloco de impostos e temos uma imagem aqui assim, e o texto está sobreposto. Então agora o texto é na verdade um elemento legível, então não queremos ocultar muita parte dele. Se você quiser esconder um pouco do texto que você tem, você tem que esconder algum fora da parte. Então ainda é legível e o usuário pode entender o significado. Então, mantenha isso em mente. Agora você também pode sobrepor imagem sobre uma imagem como essa. Temos muitas imagens. Também podemos ter qualquer Mitchell aqui só para quebrar o monótono. Seu design é uma história que você tem mudança de reboque. Alguma reviravolta em sua história é que você tem que rebocar Jane a direção fora da sua história do que novamente . Volte ao ponto. Portanto, estas são as coisas que você tem que ter em mente ao projetar criativamente fora. Agora você pode ver que você pode criar um monte de combinações diferentes Aqui. Você pode ver que eu tenho uma imagem de pássaro cheio e eu tenho texto sobreposto que está à esquerda. E ele tem apenas alguns fora da parte fora dele como uma sobreposição. Agora, na próxima seção, você pode ver que eu mudo a direção do meu laboratório. Eu fui para o lado direito, e agora aqui temos um bloco lateral direito que está sobreposto na imagem, que está quase no meio. Então você pode muito essas coisas em seu layout. Apenas certifique-se de que você está caindo algumas grades aqui. Você pode ver que eu estou alinhando as coisas com as grades, mas isso vai limpar um monte fora de layout criativo quando você tentar implementar coisas como essa. Então este é um conceito muito importante. Estou repetindo uma e outra vez. Tente usar criativamente outs fora da caixa layout. Tente sobrepor as coisas. Tenta trocar as tuas coisas das caixas. Pense fora da caixa. E não se limite às 12 colônias. Ganância. Agora aqui está outra relação. Você deve ter visto isso. Eu tenho um fundo de imagem completa, e então eu tenho um formulário de inscrição no topo. Então eu vi isso e eu usei isso em muitos projetos. Eu projetei algumas páginas de destino onde eu usei este formulário de inscrição e o formulário de inscrição é um pouco, você sabe, estendendo-se fora dessa primeira seção de cabeçalho. Então isso vai criar muito interesse. Agora, no fundo você tem, você está vendo uma seção de assinatura aqui, e você pode ver que nós temos ah, mal crescido na parte inferior e no topo. Temos esta assinatura. Hum, este vai ser um formulário de assinatura na direção esquerda direita em vez de falar com o tédio. Então ele vai ter algum e-mail aqui do que ah Burton aqui e alguma textura aqui, algo que é tão subscrever a nossa newsletter ou coisas assim. Agora você pode ver que isso está quase pegando. Está quase no meio desta seção aqui, e isso está à direita, e está levando 12345 quase cinco colunas. E isso está levando quase, eu acho, 10 colunas. Portanto, há muitas variações que você pode fazer agora. Vou mostrar-lhe alguns exemplos para que você possa obter o que realmente você pode usar e o que realmente você pode, porque na inspiração vai lhe dar muitas idéias. Geramos ideias a partir de outras ideias. Então vamos ver alguns exemplos na próxima lição 23. Design web e design para aplicativos para móvel de exemplos de caixa: Agora, vamos ver alguns exemplos fora da caixa layout e como você pode usar isso. Agora, se olharem para este desenho, deixem-me mostrar-vos. Ok, então vamos para esta seção aqui. Então, se você olhar para ele aqui, nós temos essas pilhas aqui que está tomando algo assim. Então, à direita, você pode ver que temos uma porção diferente. E se você é um novo designers, você pode estar usando seu fardo algo assim. Então você pode estar usando Você pode estar alinhando que é de selecionado. Você pode estar alinhando seu botão com o texto assim. Então você está tomando todo o espaço e outro imposto e coisas assim. Então aqui está você pode ver, em vez de usar este botão e movê-lo logo abaixo alinhando-o com este texto, esse designer realmente moveu-o para a esquerda para que você possa ver que tudo está alinhado aqui . O texto é uma linha, mas os elementos à direita têm variações diferentes. Então isso vai ajudar muito. Na verdade, este designer moveu um pouco este botão à esquerda. Então esta é outra técnica. E aqui você pode ver. Aqui temos isto. Você pode ver o quê? Aqui? Estas imagens, elas são estendidas para fora desta seção ou cabeça. Da mesma forma, eu te disse que você tem dois. Muito. Seu layout. Você tem que mudar as coisas. Por exemplo, Você pode ver aqui esta seção aqui está terminando com esta linha fora de direção. Então, à direita, Deixamos eu desenhar algo aqui, por exemplo, Retângulo. Então, na verdade, essa é a direção em que eu estava movendo quando saímos disso. Ok, então nós temos que, uh, linhas fora. Movimento um é este e segundo, este. Então este ele manteve ao longo de elementos em movimento. Elementos estão alinhados nesta linha aqui, mas aqui, na verdade, na verdade, ele moveu tudo para fora desta linha. Então é assim que você vai criar apenas em seu design. Basta olhar para estas duas seções. Está bem? Então você tem a idéia de como, na verdade nós estamos indo para usar fora da caixa layout de forma semelhante no próximo passo, e agora você pode ver hey, realmente tentou dedo variado ou ele ou ela quem quer que o designer é este É um grande design. Acho que peguei do B Haas. Não, eu não me lembro onde realmente está a UL ou qualquer que seja o design. Esse nome é eso Aqui temos novamente a mesma coisa. Mas você pode ver o arranjo fora. As imagens foram alteradas. Então aqui temos 12312 E aqui temos 12 e três na direção vertical. Então esta é uma grande mudança por aqui. Além disso, você pode ver o layout devido a mudar a direção da imagem. Parece claro de novo. Temos algo aqui que está quebrando o layout para que você possa ver esta imagem estendida por aqui. Agora a próxima seção está começando e tomando isso assim para que você possa ver que você pode entender o que eu estou tentando fazer. Digo-lhe o ponto aqui novamente, você pode ver que isso está estendido fora da caixa em, e isso é tudo. por isso que quis mostrar-vos este exemplo. Porque é um grande exemplo variando. Seu layout está saindo da caixa. Vamos ver mais alguns exemplos. Está bem. Então, ao invés de pensar que você está sempre não tem que mover sua imagem ou coisas para fora da caixa. Mas você pode usar uma técnica semelhante que é realmente usada aqui. Você pode ver nesta seção aqui. Vamos ampliar um pouco. Então, nesta seção aqui, você pode ver que eu também chamo isso de técnica fora da caixa. Por quê? Porque você pode ver que isso mostra o movimento. Agora, aqui temos algum patrono na parte de trás desta caixa, esta imagem aqui e está se movendo na direção esquerda e superior. Então é realmente ter alguns antecedentes, um pouco de fundo fora deste patrono ou ajuda. E também está fazendo isso fora da caixa. Por quê? Porque você pode ver que esta é a linha fora do local. Então aqui os usos LA, um olhos estão se movendo em destruição. Mas para quebrar isso, ele usou este pequeno patrono ou aqui. Então eu realmente amei essa técnica. Esta é outra técnica que você tem dedo do pé mostrar alguma coisa, alguma cor. Algum patrono. Você pode usar algum fundo. Eu já vi isso muitas vezes. Da mesma forma, aqui, você pode ver neste cabelo que tem algum padrão. Tem algumas folhas que estão se estendendo para fora desta caixa. Pode ver se desenha uma caixa aqui. Vamos desenhar uma caixa. Então, se desenharmos uma caixa, vocês podem ver que esta é a saída da caixa. Então este é outro exemplo, Lexie. Poucos mais. E aqui temos alguns exemplos de esperança. Tragam outros elementos. Ok, então aqui temos outro design que é um design muito simples. E você pode ver que todo esse texto a bordo está sobreposto nesta imagem. Então esta é outra técnica que temos, que eu lhe disse que sobreposição em outros elementos de design. Da mesma forma, se descermos aqui novamente, teremos duas imagens sobrepostas. Em vez de ter o texto sobrepondo a imagem, temos a imagem sobrepondo a imagem. Então esta é outra técnica que eu mostrei a vocês. E aqui temos a mesma técnica. O que é que você pode ver se estamos saindo daqui. Isto é de uma linha fora do local. Então esta é a caixa. E na próxima seção, você pode ver hey movido à esquerda e um espaço diferente tomando por aqui. Então agora o nosso grande é, na verdade, desta forma, temos dois blocos um em cima do outro. Uma é a direção vertical da Grã-Bretanha. Um deles é um pouco em uma direção horizontal. Isso é novamente variando seu layout, tendo layouts diferentes muitas vezes fora da caixa e movendo coisas ao redor. Então isso vai criar muito interesse em seus projetos. Agora, vindo para o APS móvel você pode, você não pode ver muitas coisas aqui, mas, hum, eu tenho que mostrar algo que está se sobrepondo para que você possa ver esse fardo. Seu cabelo cair sobre, e ele está olhando muito bom porque ele tinha ele está se sobrepondo metade do ah, a metade fora. O fardo está sobreposto sobre esta imagem. Portanto, este é um conceito muito importante. Você pode usar o comeu, e ele vai criar um monte de interesse, até mesmo seus laboratórios móveis. Então vamos ver mais alguns exemplos aqui. Temos novamente sobreposição de texto aqui. Se você olhar nesta seção aqui, nós temos um monte de raças diferentes e caminhadas fora de blocos diferentes apenas para mudar. Você pode dizer o monótono fora do seu projeto. Vamos passar para este. Ok, então aqui temos a imagem no fundo e o texto é sobreposto nele. Está parecendo muito bom. Ah, efeito. E vou mostrar-vos alguns exemplos e conceitos. Então, só para abrir sua mente, então aqui temos novamente a mesma coisa. E este é um design muito bom. Temos um bloco azul, vermelho e laranja e em cima disso, temos investigações novas. Então este é um artigo que você pode ver aqui ele ler artigo aqui. Você pode ver à esquerda aqui você pode ver esta imagem foi sobreposta pelo bloco de pilhas e está olhando muito legal. Então isso é que eu às vezes chamo de esconder e mostrar ou esconder e procurar algo assim. É uma técnica muito agradável. Você tem o dedo se sobrepõe aos seus elementos. Você tem dedo do pé, mova-os como você pode ver aqui. Estes três aqui não estão alinhados com esta imagem. Estão a sair desta imagem. Então isso está parecendo realmente legal aqui novamente, nós temos sobreposição de imagens e imagens de texto sobrepostas no bloco de impostos Mais aqui novamente, nós temos a mesma técnica esta pequena imagem cada ponto está se sobrepondo nesta imagem grande , estas texturas se sobrepõem nesta grande imagem. Então esta é uma ótima técnica que você tem dedo do pé ele usá-lo algum dia. Agora, aqui temos um design muito mínimo e vocês podem ver novamente, estamos vendo os mesmos clientes que estavam aqui, que está se sobrepondo. Então esse novo credo parece está se sobrepondo aqui, faça as pazes. E, hum, tudo está em 33 quarteirões, três colunas , e ainda tentam hum, tudo está em 33 quarteirões, três colunas, e ainda tentam dividir a segunda coluna do meio em duas. E o interessante é que eles estão movendo coisas para cima e para baixo. Então eu vou falar sobre o momento em que podem ser as próximas lições. Até lá, você tem que ler de qualquer maneira, então este é outro. Este é um projeto experimental, mas vou mostrar algumas coisas aqui. Um deles é que você pode ver. Isto é quase centralmente fora. Temos alguns impostos à esquerda e alguns fora da carta aqui. Você pode ver que está por trás dessa imagem, que é, eu acho, eu acho, elfo marqueador de geleia. Algo assim. Então, mas eu não recomendo que você contrate isso. Você esconde muito das suas cartas. Talvez um ou dois sejam no máximo. Mas este é um projeto experimental. Agora eu realmente amo como toda essa loja na loja de lojas, que é, na verdade, na verdade, eu acho que a navegação está em destruição. Então pode ser terrível ou móvel. Algo assim. De qualquer forma, então aqui temos novamente escondendo alguns fora do texto por trás desta imagem. Então este é um layout que está na verdade em destruição, movendo-se, destruição do topo esquerdo para baixo. Certo? Mas eu realmente gosto. É, hum, usar muitas coisas criativas aqui de qualquer maneira. Então, novamente, temos tamanhos de blocos diferentes. Nós temos muito estranho. Temos alguma margem à direita e à esquerda, e depois temos novamente no meio. Ok, então o que eu queria te mostrar é que essas pilhas se escondem atrás disso? Então, isso é tudo. Espero que tenha entendido a ideia de sobrepor coisas e tirar coisas da caixa . E eu espero que você goste de usá-lo em seus projetos. Se tiver alguma pergunta para me fazer, vamos para a próxima lição. 24. Design de layout sobreposição: Agora eu vou te dar um dedo do pé de tarefa. Crie um layout onde você usaria sobreposição. Então você pode ver neste design esta imagem de menina está se sobrepondo. Idiota Os vestidos ou vestidos curtos aqui O texto eso Este é um exemplo Além disso, deixe-me mostrar-lhe. Aqui está o meu exemplo. Eu acho que você já viu isso, que eu estou sobrepondo este formulário aqui nas duas seções também, ele está saindo do fundo fora desta imagem. Ok, então aqui temos um exemplo aqui é outro que você pode ver se você olhar de perto aqui nesta seção, você pode ver isso. Estes quatro ícones destes quatro recursos fora de nossos serviços estão realmente sobrepostos Esta seção no topo, que é este cabeçalho também, eu acho que deixe-me mostrar-lhe mais um. Este é outro exemplo que você pode ver aqui. Estou sobrepondo a imagem aqui. Deixa-me mostrar-te. Então isso está se sobrepondo na próxima seção ou aqui. Então isso é apenas para criar algum bom efeito em um layout para que você possa usar ou projetar algo assim e me mostrar como você está indo para usar esta técnica de sobreposição, você pode usar sobreposição de imagem sobre texto ou você pode usar sobreposição em outra seção. Então, estou ansioso para ver suas tarefas. Então vamos começar a fazer alguma técnica de sobreposição e usar a técnica deles e me mostrar seus projetos. 25. Como usar a ênfase no design de layout: nesta lição, eu vou realmente um fora das minhas técnicas secretas, que eu aprendi através. Você pode dizer que eu realmente continuo analisando diferentes designs, e então eu aprendi algo que é muito único no design de camadas. Então, se você está projetando algo e você quer que ele crie interesse, então você vai usar escala e ênfase em seu layout corretamente. Então escala é na verdade um fora do design. Você pode sentar técnicas onde você tenta enfatizar um ou destacar para um item mais do que outros. Então você pode ver se você tem, tipo, três ou quatro características fora do seu AB ou algo assim. Você vai destacar ou fazer um off, um deles maior e maior em tamanho. Da mesma forma, se tivermos, como quatro blocos de impostos, podemos tentar mudar o fundo de um fora dos blocos. Então isso vai criar algum interesse, e vai ter um efeito muito único no seu layout. Então eu vou mostrar a vocês algumas coisas que você vai realmente desfrutar e amar. Então vamos ver alguns padrões e então vamos dar exemplos diferentes. Agora suponha que tínhamos quatro blocos de recursos. Oh, algum processo de negócios ou algo assim? Não. Pela primeira vez, quando você tenta projetar algo, você vai tirar isso aborrecido fora, tendo dividi-los em quatro blocos semelhantes e vai parecer realmente chato. Qualquer um pode fazer isso, até mesmo uma criança ao ar qualquer um. Se você der a eles quatro coisas que lhes dizem para organizá-los, eles estão indo para o pé. Organize-os assim. Então, em vez de fazer isso, vamos ter algo muito diferente. Vamos destacar um deles e vamos mudar o layout deles. Então vamos ver como eles vão ficar agora. Agora, este é o mesmo layout de quatro blocos, mas nós mudamos o layout. Agora, um elemento à esquerda aqui está tendo muita ênfase. Quer se trate de um recurso ou qualquer coisa, vamos destacá-lo. É o melhor recurso entre esses quatro recursos, e queremos alterar o layout. Nós não queremos aquele velho chato para layout de bloco, então esta é a resposta para ele. Então nós destacamos e escalamos e fazemos este maior e à direita. Temos três recursos que estão listados na ordem de cima para baixo assim. Então, além de ter velho chato quer 34 Brocks horizontais da esquerda, direita, nós mudamos o layout. Este é um conceito muito, muito importante. Se você puder entendê-lo e usá-lo, isso criará o Senhor fora do interesse em seu projeto. Da mesma forma, você pode ver que eu tenho três itens. Por exemplo, eu tenho três itens no meu design. Por exemplo, temos três caixas na parte inferior. Então o primeiro layout que vem sobre o meu são essas três caixas dividindo-as em três caixas. Então, ao invés de dividi-los em três caixas, o que vamos fazer é destacar uma delas. Por exemplo, ele está dirigindo ou algo assim, e eu vou para a direção e alguns cabelos têxteis muito grandes. Eu vou torná-lo maior e alguns dos detalhes ou talvez alguns artigos relacionados a este que eu vou colocar aqui. Então este é outro em apenas interessante fora fora se você tem três itens. Então eu tenho destacado e escalado um deles e eu tenho Ah, os outros dois que são um pouco que você pode dizer. Não muito destacado. Não tenho tanta ênfase. Então esta é uma ótima técnica. Não. Vou mostrar-lhe alguns exemplos que vão esclarecer a sua mente como realmente usar esta técnica. Não, aqui está um design feito por um designer incrível. Eu não sei de qualquer maneira, então o que eu queria mostrar aqui é como você pode ver nesta seção. Nós estamos aqui. A segunda seção deste site. Na verdade, temos três quarteirões de itens. Um é este, este quarteirão. Então temos este quarteirão aqui. E depois temos este quarteirão aqui. Então você pode ver aqui. O que? Na verdade, estamos usando. Estamos usando escala. Estamos usando ênfase. Estamos colocando ênfase em um bloco de toda esta seção e temos um grande rumo. Temos alguns sub-slogan no topo. Temos algumas cores aqui. Você pode ver que isso é totalmente diferente dos estilos e texto aqui à direita. Então temos cores aqui, muito escuras e muito atraente de grande tipografia. E à direita, não temos a mesma coisa acontecendo. Então aqui temos nesta seção, temos mais ênfase. Nós o tornamos maior em tamanho. Usamos tipografia maior, tamanhos de deck e usamos alguns médicos. Então esta é a técnica que eu estava falando. Então deixem-me mostrar-vos mais alguns exemplos. Aqui está outro exemplo de fusão de ênfase e em seu layout, e você pode ver ou ouvir este designer. Eles têm, tipo, quatro quarteirões, na verdade, cinco quarteirões das coisas aqui. Um é este senhor da cidade aqui. Então, ao invés de, você sabe, ter quatro blocos no topo na mesma linha e ter um botão de download na parte inferior. Este designer, o que odiava é que ele usou este bloco muito diferente aqui e usou este quatro quarteirões aqui e um maior e sua habilidade no layout dele. Então temos um. Faz três e quatro quarteirões aqui e um quarteirão maior aqui. Então temos, tipo, tipo, cinco quarteirões. Então tente pensar desta forma, em vez de você saber, usando layout simples como 1234 blocos e, em seguida, baixar botão na parte inferior. Você pode fazer algo assim, então tente muito seu layout como este, e você ficará satisfeito com seu design. Outras pessoas vão adorar. Então este é realmente o ponto fora do interesse. Eu queria mostrar-lhe que você tem que criar um ponto fora do interesse em seu design ou seção que você está projetando. Vou fazer um exercício para a mesma seção. Você tem que projetar algo assim. Então, só para aprimorar suas habilidades, vamos ver mais alguns exemplos. Ok, então aqui temos outra seção que está usando a mesma técnica que eu realmente descrevi, que é usar escala em seu design ou layout. Você pode vê-lo aqui. Aqui temos esta seção, que é Ah, um pouco maior. Então temos quatro qualidades ou quatro serviços ou seja lá o que for que lhes chamem no passeio. Então, na verdade, nós temos cinco seções, cinco elementos, e nós os organizamos em reboque como este em vez de ter vindo para cá do que nós temos quatro blocos ou lá embaixo. E nós temos um grande fardo aqui, que vai ter um layout muito simples, simples, que você já viu muitas vezes. Da mesma forma, você pode ver nesta seção ou aqui novamente, este designers está usando a mesma coisa aqui. Então temos um quarteirão. Esta é também uma sobreposição do dedo do pé relacionada e sair da caixa. Então você é realmente este designers misturando duas técnicas saindo da caixa e novamente tempo ao mesmo tempo usando habilidades. Então nós temos um elemento muito grande aqui do que nós temos quatro blocos à esquerda como este. E depois temos um quarteirão aqui como este. Então este é um ótimo layout. Isto é, eu acho, um grande uso fora design layout nesta informação exibindo esta informação parece criar, você pode ver que ele também está usando ícones com algum texto. Não tente pensar sempre em apenas quatro caixas que temos. Temos que alinhar tudo assim para não precisarmos alinhar tudo assim. Temos que mudar nossos layouts novamente. Este é outro projeto de um off meus designers favor sobremesa que eu tendem a seguir em. Seja Haas. Não sei qual era o nome da luta. Eu esqueci de qualquer maneira, então aqui de novo. Você pode ver a mesma coisa que está acontecendo. Um quarteirão, grande bloco. Então temos quatro blocos menores. Então esta é a ideia. Eu acho que você já está destruído, então eu não quero explicar de novo. Mas há muitas situações em que você pode usá-lo. Ele vai dedo do pé ter um monte de grande impacto em seu design. Então este é outro exemplo. Você pode ver que isso é, ah, serviço de lavagem de carros. E é projetado por laboratórios Quantico da Polônia. Eu realmente amo muitos designers da Polônia porque eu acho que eles têm muita criatividade deste lado da Europa. Vi muitos dos seus designers concordarem desse lado. De qualquer forma, um, então você pode ver que temos uma imagem e dois recursos contatados e melhor lavagem de carros. Então, na verdade, eles têm, tipo, quatro quarteirões. Mas você pode ver aqui que foi organizado de uma maneira totalmente diferente. Nós temos que decidir no topo aqui, e isso é isso no meio. Então temos imagem aqui e alguma textura. Todos aqui. Então temos de novo dois quarteirões aqui. Três quarteirões, que são totalmente diferentes. Eu realmente amo esse layout. Então você I O que eu normalmente faço é eu realmente usar uma ferramenta chamada Jing e eu capturá-los em e mantê-los em minhas idéias de design de layout. Então, sempre que eu tenho um dedo desenhado algo, eu uso isso da mesma forma, nesta seção uma grande imagem à esquerda, quatro características como esta. Então isso é novamente usar fora da escala. Temos uma imagem muito grande ou aqui do que temos quatro características aqui. Eso Isso é realmente de novo. Se você olhar para ele aqui de novo, a escala está sendo usada. Esta imagem é um pouco maior do que todos eles aqui. E é um ótimo layout para todas essas imagens. E este é um tipo fora de alvenaria medicina muito fora. Mas está ótimo por aqui. Então isso é tudo sobre esta técnica. E espero que tenham gostado desta escala. E, ah, um grande ponto de ênfase fora do seu design em cada seção ou em todo o seu design. Isso é tudo sobre isso. Se tiver alguma pergunta para me fazer, vamos para a próxima lista. 26. Como usar o movimento no Design de layout: Nesta lição, vou discutir outra técnica secreta que vou compartilhar com vocês, que é muito simples. E você pode criar muito interesse em seu layout e em seu design usando o movimento. Então, como você tem que fazer o seu movimento. Não pense que suas caixas ou o que quer que seus contêineres que estão continuando elementos diferentes em sua página eles são estáticos. Você pode movê-los para cima e para baixo. Você pode movê-los da esquerda para a direita. Você pode movê-los em um vapor diagonal, então há muitas opções ou truques que você pode fazer. Então o movimento vai criar um monte de interesse no seu dia de design, e ele vai movê-los de, hum, você pode dizer caixas estáticas chatas para algo que criar em apenas Então eu vou compartilhar com vocês para alguns fora do opções de layout, e então eu vou compartilhar com vocês apenas para guardar três exemplos porque eu sou incapaz de encontrar mais exemplos. Talvez sejam, você pode dizer, mas na minha pasta de inspiração. Então eu acho que isso vai esclarecer sua mente sobre o uso de movimento para o seu layout e como você vai fazer isso para criar apenas em seu design. Então você começou com essas quatro caixas. Agora parece muito chato para mim, e eu acho que isso não vai funcionar para mim. Então, em vez disso, vamos fazer isso. Agora você pode ver que este é o mesmo design. Mas eu adicionei movimento toe minhas caixas em vez de eles são caixas estáticas. Agora estão se movendo. Então temos um movimento como o movimento Jane indo para cima e para baixo em direções diferentes, e isso vai criar algum interesse em sua camada. Então esta é uma ideia. Outro poderia ser este, então você pode movê-los na direção diagonal. Dedo. Só não pense que você tem que movê-los para cima e para baixo são pode ser da esquerda para a direita. Você pode entrar em diferentes formas como diagonal e outras naves, como um triângulo. Você pode fazer isso também. Aqui está outra representação fora do movimento. Você pode ver por aqui. Eu tenho uma caixa muito grande ou uma seção de conteúdo grande, talvez uma imagem aqui à esquerda. E eu tenho duas imagens que estão se sobrepondo e alguns impostos aqui à direita. Então temos um cabeçalho e as três linhas de quatro linhas de texto, então há muitas variações que você pode fazer. Então, estes são alguns truques usando o seu movimento em seu projetado para criar algum interesse. Então eu sei que vou mostrar a vocês dois ou três exemplos. Então ficamos melhores nessa coisa de movimento em nosso design. Agora, este é um projeto de Andrew Lo assunto fora da Letônia, e este é um design muito simples, muito único. E você pode ver o que eu quero te mostrar. Aqui está o movimento. Então você pode ver aqui nas imagens e no texto. Então movimento é que ele está realmente invertendo o efeito em cada seção. Então nós temos imagem vontade aqui do que nós temos textural aqui. E então temos imagem. Estamos aqui. Texto na imagem direita à direita, texto à esquerda, imagem à esquerda, texto à direita. Então isso é realmente um movimento de corrente, mas feito como você pode ver que estamos aqui. Isto é como uma fortuna de corda, como aqui. E está na direção de cima para baixo. Aquele que te mostrei Waas na direção direita esquerda. Então você pode ver que isso vai criar um monte de interesse em seu design. Então, se este designer apenas manteve todas as imagens à direita e todo o texto à esquerda, pode parecer muito chato. Muito estático. Então temos que criar algum interesse usando movimento em nosso layout. Da mesma forma, temos esse design. É por várias honras Smoove todos. Acho que é uma agência de design. Mas eu realmente gosto de seu este design muito minimalista, onde criamos muito script muito limpo e você pode ver ou ouvir nesta seção, você pode ver embora pareça um lei flor fora do pé me. Mas ainda assim você verá como os ícones e o texto diferente têm movimentos diferentes. Então aqui temos. Ah, este ícone no topo e este texto na parte inferior e esquerda. Então, temos que fazer as coisas nessa direção. Então aqui, este corredor, é este Ah, direção está nisso. Então aqui temos um texto. Então temos essa linha de liderança e está levando em direção a este ícone. Então nós temos deixado através desta direção diagonal do que temos isso então nós temos algo como isso. Então temos algo assim. Então temos algo assim. Então isso é realmente movimento. Eles podem ter ícones apenas no topo e no meio e no centro. Eles podem ter usado o texto, mas em vez de usar esta maneira simples de colocar ícones e este texto, este designer usou algum movimento na nuvem. Então eles têm alguns movimentos diagonais acontecendo em quase todos esses ícones e este texto. Então este é Ah, ótimo uso fora do movimento em seu layout. Da mesma forma, se você olhar para este design, nós temos esses ícones aqui, e estes são todos ícones diagonais. São como colmeias. Mas o que quero mostrar aqui é que temos movimento aqui. Então temos esse movimento de corrente acontecendo. Então isso é que eu fiquei na esquerda e eu fiquei no topo no meio. Então por aqui e por aqui, por aqui, por aqui. Então não é Ah, se o usuário pode. Este designer pode fazer o layout em apenas ah, nove ou 10 caixas. Mas o que eles fizeram foi usar movimento. Então você pode ver. Ele realmente funciona bem com até mesmo os números são. Então temos 123456789 nove caixas e elas estão ótimas. Este layout é ótimo. Então vamos ampliar e ver. Certo, então aqui temos esses ícones. Então, este é novamente um grande uso fora do movimento em seu layout. Agora, neste exemplo, que eu não sei quem é o designer. De qualquer forma, este é um grande design, e você pode ver nesta seção do meio ou aqui nós temos sugestão mãe filha e você pode ver aqui como este designer usou movimento aqui para criar interesse assim eles podem ter essas caixas alinhadas. Mas o que? Essa designer, ela assistiu. É. Ela realmente moveu um deles um pouco para baixo para criar alguns interesses. Além disso, há esta temperatura aqui, que é outra técnica que mostrei antes de sair das caixas. Então este selo está saindo desta seção só para criar algum interesse aqui. Então, estas são duas técnicas que você pode combinar para criar layout olhando e espero que isso resolva um monte de seus problemas. Se tiver alguma pergunta para me fazer, vamos para a próxima lição. 27. Centrado com a técnica de design de alinhamento esquerda: nesta lição, eu vou discutir uma técnica muito simples e técnica muito elegante que você pode misturar e usar em sua camada. Projetado para criar muitos layouts e designs interessantes. Muitos designers que eles não sabem que eles podem usar ou mover as coisas quase no meio, além de usar alinhado à esquerda junto com ele. Então você tem reboque, alinhe tudo à esquerda. Vocês são todos elementos projetados e mover todo o bloco quase no meio. Então esta é uma técnica muito simples para criar interesse. Vou mostrar-vos esses layouts e depois vamos ver alguns exemplos. Agora você pode ver no topo eu tenho bloco branco, que vai ser um texto muito grande. Então, qualquer site que você está projetando, nós temos , tipo, duas ou três linhas, texto muito grande e ousado que vai mostrar o que fazemos. Nosso serviço e este bloco branco você pode ver ou ouvir que tudo será Seu texto será alinhado à esquerda para que todas as linhas de texto seria começar a partir daqui. E o que fazemos é que você pode ver que parece muito estranho, mas parece realmente ótimo se você tentar fazer isso em seu layout, eu deixei como duas colunas daqui e três colunas daqui. Então isso vai funcionar muito. Por isso, está quase no meio e deixou uma linha. Então tente mover as coisas, mantendo o elemento alinhado esquerdo aqui estão em seus elementos de design e ele vai olhar criar. Vamos ver, mais um arranjo. Agora aqui está outro. Então você pode ver aqui. Aqui, temos rumo. Então temos uma linha de subposição ou ouvimos algum dext. Então temos quatro características diferentes ou algo assim. Qualquer tipo de recursos ou talvez alguns serviços. E você pode ver que temos um ícone, um cabeçalho uma linha um ícone, um cabeçalho uma linha e você pode ver que eles estão quase no meio. E lá todo o seu contêiner está realmente no meio. Então,se Então, conseguirmos esse quarteirão inteiro, é no meio. Mas se olharmos individualmente cada bloco, eles estão alinhados à esquerda. Você pode ver isso é o que eu quero dizer que sempre que você está tentando algo assim, você tem reboque. Alinhe seus elementos internos à esquerda e todo o bloco bloco bloco fora desses elementos no meio. Então isso vai criar um monte fora confiando seus projetos e nós temos botão na parte inferior. Temos cabeçalho em dados de texto no meio e, em seguida, esses quatro recursos, eles são todos alinhados à esquerda. Mas eles estão no meio, todo o bloco, todo o recipiente para esses recursos ou para esses serviços, eles estão no meio. Então isso é realmente combinando linha central, mais esquerda Align. Agora vamos ver alguns exemplos do meu trabalho e também de outros artistas ou designers. E vamos ver como. Na verdade, isso funciona na vida real ou projetos de sites ou projetos de aplicativos móveis. Agora, este é um exemplo desta página de destino que eu projetei e vocês podem ver aqui. Se você olhar para esta seção, isso é ouvir um rial, depoimentos de alívio de impostos, e eu vou ligar minhas notas e você pode ver que essas caixas do meio aqui eles não estão alinhados com nenhuma ganância. Em vez disso, eles estão no meio de todo esse contêineres no meio e o texto e você pode ver ou ouvir. Ouvir. Nós ouvimos Davi sobre e este texto este testemunho, é uma linha à esquerda. Então, se desenharmos um bloco aqui, você pode ver que ele está alinhado assim. Eu mudei a cor para que você possa ter a idéia. Então, tudo dentro deste recipiente está alinhado à esquerda. Mas todo o recipiente ou bloco está no meio. Então é isso que eu realmente quis dizer. E deixa-me mostrar-te mais uma. Certo, então aqui temos novamente o mesmo acordo. Tudo está à esquerda. Alinhar. Eu conjurei assim. E todo este quarteirão está no meio desta 12 colunas. Então este é outro exemplo do que temos. Deixa-me mostrar-te esta. Então vamos esconder isso e você pode ver ou ouvir. Trata-se de serviços fiscais disponíveis e, novamente, o mesmo conceito. Isto é no meio. Isto é no meio. Então novamente, este é todo este bloco está no meio e dois quarteirões. Eles são deixados. Alinhe ícones de texto inteiro lá, linha esquerda. Eu não estou usando um meio alinhado com ele. Então temos linha central mais elementos alinhados à esquerda. Então isso vai funcionar um grande. Da mesma forma, temos este. Então sua próxima tarefa será você ter que criar algo como este, quatro ou cinco recursos. E você tem que usar algo assim, que vai ser alinhamento médio e linha central mais alinhamento esquerdo. Então você pode ver o dedo de cima aqui que este imposto e esta rubrica é a linha central. E se formos nesta próxima seção onde temos diferentes penalidades e impostos feitos diferentes ofertas e temos tudo à esquerda. Então todos esses ícones, todos os passos que eles são linha esquerda, mas todo o bloco na parte inferior. Então, se selecionarmos este bloco, ele está no meio. Então esta é outra técnica que eu já vi muitas vezes, mas eu acho que a maioria dos designers eles não percebem esta. Então aqui temos isso e espero que você entenda melhor. Vamos ver mais alguns exemplos. Aqui está outro projeto de quem é esse? Ok, então eu não posso tirar o nome desse Christian Randall de qualquer maneira. Então, se você olhar para esta seção aqui. É um design. E se você olhar para aqui, você pode ver este texto e as pilhas aqui no vermelho. Isto é realmente alinhamento do meio e linha esquerda. Então isto, designers usando linha média e linha esquerda, vocês podem ver aqui nós temos duas colunas que sobraram aqui. Aqui de novo. Temos duas colunas. Você pode ver. Estas são quase linhas de grade em que estão seguindo estas para este experimento. E ele deixou duas colunas aqui. Duas colunas aqui. Portanto, é quase no meio, mas ele usou esquerda alinhado com ele. Então você pode ver que é assim que parece. Então temos um quarteirão aqui, um quarteirão aqui. Alguns escuros aqui. E isso está realmente ótimo. Então isto é outra vez. Se olharmos para esta seção acima, vamos ampliar. Esta é a mesma técnica. Isso nem sempre significa que você tem que alinhar seu texto ou seu bloco quase no meio da sua página. Você pode fazer isso movendo-o à esquerda para então novamente é a linha esquerda. Um monte de espaço à esquerda e é linha esquerda, e está olhando grande. Vamos ver mais alguns exemplos. Certo, então aqui temos mais um exemplo. E se você olhar para esta seção onde temos as ferramentas que você precisa Ok, então nós temos tudo. Uma linha à esquerda aqui. Então temos que ir no meio. Então temos um pequeno slogan no meio do centro. E todos esses recursos recursos 123456789 recursos. São todas uma linha à esquerda. E mais uma coisa interessante que eu vi ou aqui essas características diferentes são esses serviços diferentes. Eles estão em três seções diferentes. Esta é a seção um, dedo três. E o que este designer fez é, na verdade , uh, vamos ver quem é vários proprietários. Ok, então nós temos agência de design ou cabeça de qualquer maneira, então você pode ver que este texto este cabeçalho à esquerda está na verdade alinhado à direita. Por isso, está a tocar nesta linha. Isto é costurar esta linha. Então, é realmente, eu acho que o uso criativo fora do alinhamento em seu layout. Então estes são alguns exemplos que eu realmente queria compartilhar com vocês. Vamos ver mais um exemplo que está usando um aplicativo móvel. Então, sempre que você está projetando um aplicativo móvel, eu acho que você pode não ter notado uma parte. A maioria deles eles usam linha esquerda com recipiente de alinhamento do meio. Então nós temos você pode ver como este cartão branco aqui e todo o têxtil aqui está. E o botão Oh, aqui está ele nesta direção. Então temos alinhado tudo e todo este recipiente que está contendo todos esses elementos, é no meio. Então temos a mesma margem, a direita e a esquerda. Assim, você pode ver de forma semelhante se você olhar para esta tela, esta é a tela inicial. E este é um simples empréstimo de casa on-line. Tudo deixou a linha. Tudo é deixado forro quando você pode ver Sim, eu vejo regulado. Também é deixada uma linha. Mas você pode ver no meio que temos uma caixa ou recipiente que está no meio. Então essas são as coisas que você vai usar no seu você pode dizer em seus layouts para criar , realmente criar Lee ou então eu vou compartilhar com vocês mais um, que é este que eu acho que eu mostrei a você em lições anteriores. Fronteira. E você pode ver que eu realmente amo como eles têm usado muito pobre, muito organizado, tipo fora design simples. Não é nada complexo, apenas equipes de produtos. Parte é uma maneira visual simples de definir parques puros estão resultando em uma organização mais alinhada . Então você pode ver um botão muito bom, um link simples. Mas o que eles estão usando realmente deixou a linha com quase uma linha do meio. Portanto, não é um puramente no meio, mas ainda é comércio à esquerda, mas junto com o seu uso de alinhamento esquerdo. Então isso está parecendo muito, muito legal do que eles têm essa imagem que está gastando quase todo o espaço. E então eles têm usado novamente esta técnica centro central central alinhado todo este recipiente e tudo é uma linha à esquerda. Então impostos eu linha à esquerda. Ele está olhando realmente grande e simples. Vamos ver se conseguimos encontrar mais um exemplo. Ok, então aqui temos de novo. Linha do meio e o texto é deixado uma linha. Olhe atentamente. Eu acho que você deve ser capaz de fazer isso agora, até agora, e, hum, eu acho que é isso. Se eu tentasse encontrar mais alguns exemplos, vamos ver se eu tenho Ah, mais alguns exemplos do meu trabalho anterior. Certo, aqui tenho meu próprio site de design, que estou redesenhando agora. Não sei qual é a versão. Final ou o que quer que seja. Então deixe-me ver se eu usei Sim. Ok. Então você pode ver aqui. Isto é, na verdade, vamos esconder este. Vamos esconder isto. Então, nesta seção, fora de avaliações de usuários ou minhas avaliações de alunos, você pode ver o que os alunos estão dizendo. Então, isso é realmente dirigindo britânico, que é no meio. E estes todos estes testemunhos. São todas uma linha à esquerda, imagens à esquerda. Dex é uma linha à esquerda, mas você pode ver que parece muito bom. Eu não quero, você sabe, ter apenas um meio alinhar um elemento, e isso vai tornar este design muito chato. Então, se eu tivesse um como este no meio, poderia torná-lo um pouco derramado. Então eu usei o alinhamento esquerdo com o alinhamento do meio. Hum isso. Veja se eu o usei em outro lugar. Ok, então aqui temos de novo. Aqui. Você pode ver este endereço e contato. Este quarteirão está quase no meio. Não acho que seja quase no meio, mas um pouco à direita. Mas estou usando o alinhamento esquerdo. Então esta é uma ótima técnica. Você pode usar isso em seus projetos e você pode criar Ah, realmente interessantes características tipo off ou seções de depoimento ou seções de serviços, coisas assim. Da mesma forma, eu usei aqui quase. Isso não é uma linha no meio, mas estou usando esse bloco inteiro, que está quase no meio dessas seis colunas aqui. Vamos tentar ter algo assim. Então nós temos nossa grade ligada e você pode ver que está quase no meio de toda essa hora aqui, ok? E está usando a linha esquerda. Então, não tudo o que você tem que alinhar no meio da página inteira ou todo o seu design. Mas você também pode usar algo assim. Eu tenho o habitual aqui. Então isso parece Deixe-me dureza. Então isso parece ótimo, se tivermos. Se tentarmos usar algo e fazer algo assim, vamos ver se usei em outro lugar. Ok, então aqui temos de novo. Isso é difícil. Estes para que você possa estar ouvindo muito dos meus ruídos do teclado de qualquer maneira, então você pode ver que este título está à esquerda. Então, novamente, esta seção esta sua seção cursos de design é realmente no meio, e não é realmente totalmente no meio. Tem um pouco. Você pode ver que tudo está alinhado à esquerda. Então, temos alinhamento médio ou alinhamento central com alinhamento combinado com alinhamento esquerdo. Então isto é outra vez. Temos cabelo, dois pratos, e temos aqui dois pratos. Então este vai ser o novo design para o meu de sitedeterra. Você é excitante. Eu também vou dar o meu logotipo redesenhado para algum outro designer, e eu espero que você, uh, uh, mostrar o que eu sei que eu não tenho tempo para, você sabe, você sabe, cortejar isso sozinho. Então eu vou contratar eu já contratei outro quarto. Então, hum, eu acho que da mesma forma você pode ver neste celular. Deixe-me mostrar-lhe este. Então nós temos essa interface móvel e se eu descer aqui, você pode ver esta seção aqui está no meio, e é uma linha à esquerda. Então isso parece muito bom. Então, uh, é assim que você pode usar esse alinhamento do meio com o alinhamento esquerdo e criar designs incríveis . Espero que tenham gostado desta lição. Se tiver alguma pergunta, pode sempre me perguntar. Vamos passar para a próxima lição. 28. Agradecemos a pessoas a: 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.