Bootcamp, Semana 1: Composição

1. Introdução ao UI Bootcamp: Bem-vindo ao design da interface do usuário Bootcamp. Você aprenderá a tornar seus designs de interface de usuário esteticamente bonitos. O maior fator que influencia a experiência do usuário se seu aplicativo for o quão bom ele parece. Então, vamos acertar isso. 95% da sua aplicação é topografia. Então, estaremos procurando fazer isso certo primeiro, vamos expor alguns dos mitos comuns que você ouve sobre legibilidade. Você aprenderá sobre a história dos tipos de letra, como eles são frequentemente interpretados e, em seguida, criará seu próprio sistema tipográfico. Você receberá atividades para melhorar seu uso intuitivo da cor. Em seguida, você seguirá exercícios práticos para desenvolver uma paleta de cores para sua aplicação. Alinhar seus elementos a uma grade é a maneira mais rápida que vi para um designer júnior melhorar instantaneamente suas criações. Você seguirá novamente os exercícios para treinar seus olhos e melhorar intuitivamente suas habilidades de composição. E você seguirá os exercícios para criar uma grade que funcione no desenvolvimento web moderno baseado em componentes. Ao entender os bits sobre como os sites são construídos, você criará grades que funcionam nos cenários do mundo real, muitas vezes negligenciadas por elementos de design da interface do usuário. Este curso tem uma tonelada de teoria, mas é principalmente prático e incentiva você a colocar seu aprendizado em prática. Você terá um melhor olho e intuição para o design da interface do usuário. As apostas são decisões estéticas em seus designs de interface de usuário. E você terá um melhor entendimento e vocabulário para poder comunicar essas decisões com sua equipe ou cliente. Esta primeira semana tem tudo a ver com composição. Cada vídeo será construído sobre o último, ensinando os elementos que fazem uma composição do belo projeto de sua classe será fazer o upload um rabisco muito simples de cada vídeo. É muito importante fazer isso porque esses rabiscos constroem sua intuição para torná-lo melhor em ver e trabalhar com composições. É ótimo fazer isso antes de começar a se preocupar com todos os elementos da página da web. Se você quiser começar a criar belos designs de interface de usuário, essa é a etapa que você precisa para começar. Então, vamos rabiscar. 2. Composição: Quando estamos falando de projetar um aplicativo ou um site, uma grande parte do que estamos falando é projetar uma composição. E realmente, podemos nos inspirar muito no mundo da arte para começar. Aqui está uma pintura de John Constable há cerca de 200 anos. John Constable era bastante famoso porque ele foi uma das primeiras pessoas a fazer algo em que ele iria para o campo e ele desenharia uma vaca, e ele desenharia uma árvore, e ele desenharia uma ponte. Mas então ele levava todos esses desenhos de volta para o estúdio e descobriria como encaixá-los na página. Qual é a maneira mais visualmente agradável também? Organize-os nesta tela. Então, na realidade, talvez essas vacas não estivessem nessa posição. Talvez esse edifício tenha sido, e Deus sabe o que mais nesta pintura não estava realmente neste lugar exato. Essas são simplesmente as posições em que John Constable acredita que ficariam bem. Na minha opinião, a coisa mais dominante naquela pintura era essa vaca. No canto inferior esquerdo da imagem. Essa vaca era? Por que esse era um bom lugar para colocar essa vaca? Definitivamente queremos que haja uma coisa na foto. Essa é a primeira coisa que as pessoas percebem que chama a atenção deles primeiro. E essa vaca foi o que John confortável decidiu. Mas não chamaria mais atenção se estivesse no meio? E isso não teria mais impacto se a vaca fosse maior caso você não consiga dizer. Essas eram perguntas retóricas. Não sei a resposta. E a resposta também dependerá em grande parte do que mais está na imagem. Ao longo deste primeiro módulo, vou lhe dar muitos exercícios muito, muito curtos. Você pode fazê-los com um lápis e um pedaço de papel. Você pode fazê-los enquanto estiver no telefonema para alguém. Você provavelmente poderia fazê-los enquanto assiste TV. Esses exercícios são para ajudar a treinar e construir nossos músculos mentais para identificar o que será uma boa composição quando começamos a adicionar topografia, adicionar cores e adicionar imagens a nosso site, se quisermos ser capazes criar intuitivamente uma boa composição, quando estamos criando um site, precisamos ser capazes de fazê-lo muito bem antes de termos 1000 pensamentos em nossa cabeça sobre que tipo de letra estamos usando e de que cor algo é. Então, durante este módulo, não falaremos sobre botões e textos de cabeçalho e ilustrações. Também nem sequer falaremos de vacas, edifícios e rios. Vamos apenas falar sobre formas, linhas e marcas. E vamos construí-lo lentamente. Vamos construí-lo muito devagar, um passo de cada vez e melhorar gradualmente nossas composições. Mas isso não significa que você precise gastar muito tempo em cada exercício. Na verdade, exorto você a resistir a essa necessidade irritante de perfeccionismo. Não importa se eles são um pouco feios, se eles são apenas rabiscos na parte de trás de um guardanapo é absolutamente bom. Vamos treinar nossos olhos e nossa intuição, então ele está lá quando precisarmos disso mais tarde. Portanto, certifique-se de que você realmente faça esses exercícios antes de adicionarmos qualquer coisa a esta página, eu pelo menos quero que você aprecie que isso seja genuinamente uma composição. Esta página branca simples é uma boa composição. E, na verdade, muitos artistas ao longo dos anos criaram peças de arte que são apenas uma tela branca e salgadas por um bom dinheiro. Essa composição nunca preencherá os requisitos do seu site ou do aplicativo da web. Mas esteja atento ao fato de que, se você não precisar adicionar algo à sua composição, provavelmente não deve adicionar algo à sua composição. A próxima composição mais simples que poderíamos criar se acabássemos adicionar uma única linha reta no meio da nossa página. Isso também é, sem dúvida, uma composição. Eu disse que iríamos ir devagar. Agora, provavelmente ter essa linha reta no meio é um pouco chato demais. Vamos movê-lo para o lado em algum lugar. Isso pode tornar nossa composição mais interessante, como não colocaríamos a vaca no meio da foto. Agora, embora não queiramos que as coisas sejam muito chatas, não queremos que isso seja muito louco. Se movermos a linha muito perto da borda, ela pode parecer desconfortável. Pode haver algum sentimento de que vai cair ou ter sido impresso errado ou algo assim. Talvez isso não pareça completamente confortável e talvez às vezes é o que queremos. Talvez pareça diferente se a leveza de um lado da página e não do outro, sem pensar demais ainda o que cada uma dessas composições fará, podemos reconhece que há um sentimento um pouco diferente que obtemos de cada dessas composições quando é literalmente apenas uma linha no meio de um quadrado. Agora, atualmente, isso é um pouco simplista demais para você se preocupar em tirar seu lápis ainda. Existe uma variável e esse é o eixo x, quão longe esta linha está. Mas você pode ver nesses exemplos coloquei na tela que eles mudam a sensação da composição para sua primeira tarefa, o que eu quero que você faça é enquadrar um quadrado. Veja quantas maneiras diferentes você pode fazer este exercício muito simples de posicionar um quadrado dentro de uma caixa. Pense nisso como se você estivesse enquadrando uma fotografia. Agora, um truque comum que as pessoas fazem quando enquadram é que elas realmente deixam um pouco de espaço extra na parte inferior do que no topo. Talvez haja mais espaço de um lado do que o outro lado. Talvez o R-square seja muito, muito pequeno. Então, basta usar o tamanho e a posição aqui e ver quantas composições diferentes você pode criar. Acho que isso é interessante porque você pode ter um único elemento em uma única página da Web. E há 100 mil maneiras diferentes você potencialmente fazer isso. Então, para o seu primeiro exercício, quero que você enquadre alguns quadrados. Você vai passar dois minutos pegar um pedaço de papel, desenhar tantos quadrados quanto puder caber nele. Estes serão seus quadros e , em seguida, você vai desenhar um quadrado para dentro. Pode haver tamanhos diferentes. Eles podem ter distâncias diferentes das bordas e ver quantas variações você pode obter. Imagine que é uma página da Web que tem um elemento nela. Para onde vai o elemento e quão grande ele é? Eles não precisam ficar bem. Isso é só para nos começar. É só para fazer nosso cérebro funcionar um pouco. Veja quantos quadrados diferentes você pode enquadrar em dois minutos. 3. Expressão: No próximo módulo, vamos começar a falar sobre tipografia. Mas, por enquanto, quero que você olhe para esses dois A's. Agora, eles não falam na mesma voz, não é? Eles têm sentimentos e emoções muito diferentes e transmitem coisas muito diferentes. Às vezes, as pessoas tentam encontrar cartas que parecem não se comunicar tanto, que parecem muito padrão e pensam que isso não diz nada. Mas se, é claro, você está sempre transmitindo algum tipo de mensagem com essas decisões. Há todos os tipos de detalhes sutis na carta. O contraste entre linhas grossas e finas, os ângulos que os espaços ocupam, tudo aumenta a personalidade das letras. Mas antes de nos preocupar com todas essas coisas, vamos construir isso lentamente. Vamos ver se podemos construir alguma emoção com apenas R-square. Esta composição que criei aqui à esquerda e essa composição à direita tem uma sensação muito diferente delas. Algo sobre quantos espaços ao seu redor, quanta variação de tamanho existe. Há todos os tipos de coisas que agora temos controle sobre essa mudança como elas se sentem. Se você tivesse que olhar para essas duas imagens e dizer o que elas fizeram você sentir ou que tipo de personalidade você acha que elas têm. Você provavelmente teria respostas um pouco diferentes para mim, mas você provavelmente inventou algo vagamente semelhante. Agora, em um momento, vou pedir que você faça esse exercício para criar uma composição apenas usando quadrados que transmita uma emoção ou um sentimento. E nem todos vocês vão criar a mesma composição. Não há uma resposta certa ou errada. Vamos criar composições muito diferentes das mesmas palavras Lu, o propósito real do exercício é fazer com que você pense nas composições como expressando uma emoção. Então, com o pensamento sobre o que cada forma, sua posição e seu ângulo transmitem o que eles comunicam. E queremos pensar sobre isso de forma muito simples por conta própria antes de começarmos a pensar em qualquer outra coisa, para que fique intuitivamente disponível quando estamos criando nossas composições, que estamos sempre pensando sobre isso em algum nível consciente ou inconsciente quando começamos a construir o resto das coisas. Para este primeiro exemplo, eu me dei a palavra bêbado. Gostei muito da ideia de ter muito peso em um lado da página e o outro não, faz com que pareça desconfortável e acrescenta a essa sensação de que vai cair como acontece, é claro, tendo as formas mais pesadas em direção ao topo e as formas mais claras em direção à parte inferior, faz com que pareça muito pesado. Dá essa sensação instável, como se pudesse cair. E os ângulos e tamanhos diferentes dão uma certa sensação de energia. Parece um pouco enérgico. Nós raramente usaríamos um ângulo em um design de página da Web, mas atualmente estamos pensando em como expressar um significado com as formas. Em segundo lugar, eu me dei a palavra claustrofóbica. E havia algo que encontrei bastante ansiedade indutora sobre ter uma linha de blocos muito ordenada. E havia algo que muitos também se sentem um pouco desconfortáveis em ter algo que era um trabalho tão estranho com um pouco incompleto no meio. E então, é claro, esse espaço em branco preso no meio é muito pequeno e faz você se sentir muito fechado ao olhar para ele. E agora você pode não concordar com o meu raciocínio em nenhuma dessas composições, mas tudo bem. Na verdade, partes de ter que explicar por que você acha que algo transmite uma emoção é uma parte muito importante desta Tarefa 2, porque isso é sempre uma conversa que você pode acabar tendo com um cliente ou membro da equipe. E se você é uma pessoa de mente lógica, nunca estudou na escola de arte ou estudou. Isso provavelmente tudo parece um pouco lavatório, mas fique comigo no momento e dê uma festa a isso. Então, seu exercício ao pensar em expressão é criar rapidamente algumas composições usando palavras descritas. E quanto a conflitos ou êxtase? Você pode escolher suas próprias palavras ou escolher esses dois exemplos que dei. E muito, muito rapidamente rabiscou alguns quadrados em uma composição que você acha que transmite essa mensagem. E pontos de bônus completos. Veja se você pode justificar por que você fez essas escolhas. Veja se você pode explicar por que seu arranjo de formas significa êxtase. há absolutamente nenhuma resposta certa ou errada para eles. Então sinta-se à vontade para enlouquecer. E, claro, quanto mais vezes você tentar esse experimento, e como eu disse anteriormente, você poderia fazer isso enquanto estiver em um telefonema. Quanto melhor, melhor você vai conseguir nisso. 4. Equilíbrio: Uma emoção que quase sempre vamos querer transmitir é a estabilidade. Nossa marca, nossa, nossa aplicação pode ter uma emoção, foram um pouco selvagens, liberais e criativas. Ou talvez tenha a sensação de ser muito sensato, conservador e seguro. Mas qualquer um desses opostos polares ainda quer se sentir estável. Vamos ficar com o mundo da arte por um pouco mais. Imagine que você está pintando uma árvore. Agora, se você pintasse a árvore, então todos os galhos estivessem de um lado, isso daria ao espectador uma sensação desconfortável, porque em algum nível inconsciente, eles poderiam pensar que estão olhando algo que está prestes a cair ou, e essa é uma teoria importante que apoiará muitas coisas sobre as quais falaremos neste curso. Eles vão sentir o que estão olhando, algo que não é natural e que nos dá uma sensação desconfortável. Gostaríamos de entender o mundo ao nosso redor. Então, para ser gentil com nossos espectadores, quaisquer que sejam as características que a árvore tenha, ainda vamos querer que ela tenha uma quantidade igual de ramos de um lado do outro. Ou se tivermos um grande ramo pesado de um lado, talvez tenhamos alguns ramos mais leves do outro. Criar equilíbrio não significa necessariamente torná-lo conservador. Isso não significa fazer uma aparência chata, e certamente não significa que temos que torná-lo simétrico. Significa simplesmente fazer parecer que existe no mundo real e obedece às leis da física. Se começamos criando essa composição realmente simples, ela só tem uma caixa grande e pesada no lado esquerdo. E queremos agora contrariar isso porque está fazendo com que nossa página seja ponderada de um lado. Assim, poderíamos, por exemplo, colocar uma caixa menor no lado direito se estivesse mais longe do centro. Imagine por um segundo que as páginas em uma gangorra, se uma forma menor estiver mais longe do centro, vai equilibrar bem a forma maior. Então, talvez essa pequena caixa à direita seja convertida para essa composição em algo um pouco mais equilibrado. Como alternativa, poderíamos ter caixas ainda menores no lado direito, mas talvez apenas mais delas. Então, isso criará peso adicional nesse lado. E para o bem deste próximo exercício, vou sugerir que você possa brincar com o quão claras ou escuras as caixas também são. Porque se fizermos a caixa à esquerda, por exemplo, um pouco menos escura, ela tem menos contraste com o fundo, e isso também lhe dá menos peso. E, finalmente, podemos, é claro, equilibrar nossa composição simplesmente tornando-a simétrica. Claro, no mundo real da criação de um site, você raramente terá a oportunidade de fazer uma composição que simplesmente equilíbrio simétrico na criação de uma composição significa que deve seja uma quantidade igual de sinal visual em ambos os lados. E realmente vale a pena praticar isso agora, porque quando colocamos mais elementos em nossa composição, todas as cores e formas e densidades diferentes, vai se tornar muito, muito difícil conseguir isso equilíbrio certo. Então, quanto mais o praticarmos agora, mais nossa intuição será capaz de trabalhar com ela mais tarde. Então, seu exercício para este vídeo é muito simples. Vamos criar algumas composições usando quadrados, usando pelo menos dois ou três quadrados onde a composição parece equilibrada. Podemos brincar com a forma, podemos brincar com o quão escuro eles são. Podemos jogar com algumas coisas diferentes para tentar criar um equilíbrio na página e ver quantas você pode criar em alguns minutos. 5. Contraste: Se você é um pouco inteligente demais para sua própria circunferência, provavelmente percebeu que pode criar uma composição equilibrada simplesmente desenhando absolutamente nada no salário, bem feito. Mas sua equipe de marketing provavelmente não ficará muito feliz com isso como um design, mas eles provavelmente não ficariam super felizes com esse completamente simétrico. Também. As pessoas naturalmente gostam de ambientes Benin e observam designs que não os confundem, mas são complexidade visual muito baixa, paleta de cores muito limitada, quantidade muito limitada de formas na página. Mas também não percebemos essas coisas. Nós realmente não prestamos muita atenção. Não nos lembramos deles e não nos envolvemos muito com eles. Nós os achamos relaxantes e agradáveis. Então, mesmo quando estamos apenas projetando um formulário de entrada simples em uma página da Web, queremos que isso seja algum contraste com. Queremos que a árvore pareça equilibrada, mas não completamente equilibrada. preciso haver um pouco de tensão e pequenos pedaços de desconforto que mantenha nossos usuários acordados e interessados. Para fazer isso, sempre garantimos que nossos projetos tenham alguns elementos de caos, algum elemento de contrastes entre o que está na composição. Por exemplo, se tivermos um quadrado em um lado da página, talvez o equilibremos com a forma que é tão grande que nem sequer cabe na página. E uma forma que tem atributos visuais muito diferentes do quadrado. Agora temos algo que mantém as pessoas olhando para isso. Ele mantém o cérebro estimulado mais do que se tivéssemos apenas as duas caixas. E poderíamos usar qualquer uma das técnicas que usamos quando falamos sobre equilíbrio, mas talvez brincar um pouco com elas. Esses círculos agora estão organizados de uma forma que os torna bem diferentes de um quadrado, mas a página ainda tem uma quantidade razoável de saldo. Contrastar um quadrado com um círculo é bastante bom porque um quadrado é muito rígido e um círculo parece muito orgânico, mas podemos ser muito mais orgânicos do que um círculo. E se eu contrastasse com essa folha? Falaremos muito mais sobre cores contrastantes depois, mas essa folha é verde. Talvez façamos a caixa uma cor muito diferente. Talvez o façamos vermelho. Acho que isso parece muito bom. Mas em algum momento, especialmente se tivéssemos mais elementos em nossa página, chegaremos ao ponto em que temos muito contraste. Só queremos um pouco de contraste. Queremos que ele se sinta bastante conformado, desconfortável. Então, que tal limitarmos a quantidade de atributos que variam entre essas duas formas. Agora que incluímos uma imagem também, podemos brincar com a ideia de que talvez mantemos a mesma forma que o quadrado, mas usamos a textura da imagem. Então, já podemos ver coisas como forma, cor e textura podem ser usadas para criar algum contraste em nossa composição para torná-las visualmente mais interessantes. Também poderíamos organizar algumas das formas em um tipo de padrão. Se quiséssemos, poderíamos brincar com a qualidade dessas linhas. Estes parecem muito rígidos, mas pode haver um pouco áspero. Eles poderiam ser curvos, podiam parecer desenhados à mão, semelhante à nossa folha. Se criássemos uma composição como essa, seria muito fácil para nós criar muito contraste para as duas áreas da página parecessem pertencer a mundos diferentes. E lembre-se, queremos que nosso usuário em um nível inconsciente se sinta confortável, sinta que é uma coisa real natural que eles estão olhando e que eles entendam e veem padrões nela. Portanto, não queremos limitar apenas a quantidade de atributos que temos contraste, então podemos querer criar outras restrições para, se estivermos apenas tentando criar contraste na página, estamos muito rapidamente vai fazer algo que é quase repulsivo de se olhar, que as pessoas se sintam desconfortáveis mesmo olhando para ele. Portanto, neste exemplo exato, usei apenas linhas da mesma espessura, do mesmo comprimento e apenas vertical, horizontal ou um ângulo específico. Também temos contraste nessa composição exata porque o lado esquerdo ainda tem muitos espaços em branco ao redor dele. É muito limpo. E quanto mais bagunça ficarmos, mais queremos ter certeza de que temos muito espaço ou coisa redonda. Ao tentar criar algum contraste em sua composição, tente manter essa sensação de equilíbrio. E o que você notará é que, à medida que você começa a adicionar formas, no momento em que você adicionou três ou quatro formas à composição, vai começar a parecer um pouco mais caótico. E isso vai ajudar se você começar a criar algum tipo de regras, como talvez apenas usar um certo número de formas ou usar apenas um certo número de cores. Ou, claro, pode ser bom começar a pensar em como eles se alinham dentro da composição. Neste ponto, não se preocupe muito com a criação dessas diretrizes ou qualquer coisa assim. Apenas reconheça que adicionar mais formas à composição, você começa a criar regras mentais sobre quais tamanhos elas podem ser e quais cores são permitidas. Você tende a começar a criar regras para manter esse sentimento de conformidade em sua composição. Mas o que você vai fazer é começar com uma composição com um elemento nele e, em seguida, tentar com dois, e depois tentar criar outra composição com três elementos e certifique-se de eles têm algum elemento de contraste, mas garante que ele não comece a parecer louco também. Este foi um vídeo razoavelmente curto, mas é um tópico muito importante para você praticar. Portanto, certifique-se de gastar um pouco mais nisso do que os anteriores. Quero que você crie muitas e muitas composições diferentes onde há um elemento de contraste. Formas contrastantes, cores contrastantes, tamanhos contrastantes, grandes e pequenas, texturas suaves e duras, padrões criam alguma forma de contraste. Comece pequeno, três formas. E então, para formas, construir e torná-las mais complexas. À medida que você os torna mais complexos, você não precisa criar regras intencionalmente, mas apenas reconheça que, para fazê-las parecer boas, você começa a criar algum tipo de regras para manter um senso de conformidade nessas composições. 6. Formulário: Este é um exercício criado por Kandinsky, onde ele pediu aos alunos tentassem combinar as características das cores com as características das formas. Vou colocar um link nos recursos para que você possa ir sozinho. Não vou clicar em Enviar, então não estrago a surpresa se você acertar ou não. Não tenho certeza se concordo necessariamente com idéias dele sobre quais formas são as personalidades, quais são as cores personalidades. Mas provavelmente podemos concordar que formas diferentes podem comunicar coisas diferentes e podem ser melhores para diferentes marcas ou emoções diferentes, situações diferentes. Vamos pegar o triângulo, por exemplo. Agora, o triângulo tem pontos muito precisos nas bordas. E eu acredito que isso comunica uma mensagem de marca muito boa se você estiver criando um aplicativo para uma empresa de engenharia talvez, mas isso mudaria completamente seu significado se nós então arredondou as bordas deste triângulo. Agora parece totalmente diferente. Na verdade, ele comunica uma mensagem totalmente diferente. Ou se desenhássemos as bordas à mão, poderia ter bordas um pouco mais ásperas e, em seguida, definitivamente não funcionaria para uma empresa de engenharia. O que pensamos quando dizemos que a palavra triângulo pode significar coisas muito diferentes que comunicam coisas muito diferentes. Eles têm personalidades muito diferentes. A forma de uma forma simples pode mudar bastante. Mas e quando entramos em algo ainda mais complicado, como esses padrões ou texturas, vimos um pouco no último vídeo. Eu baixei essas texturas da Internet em algum lugar e elas têm muito caos e muitas sensações texturais ásperas para elas. Mas se eu apenas trouxer isso de volta ao mundo real de projetar um aplicativo novamente, provavelmente usaria algo mais parecido com isso, um pouco mais sutil. Digamos que eu estava criando um aplicativo móvel para ajudar os músicos a se encontrarem. Agora, a música é muito visceral. É muito tipo de coisa natural que flui. Então eu não gostaria de algo tão angular e tão chato com tão pouco contraste. Mas eu poderia facilmente fazer essa pequena mudança e realmente melhorar o aplicativo. Estou usando essas linhas de sensação fluidas, naturais e orgânicas como uma textura no fundo muito sutilmente. E sinto que isso funciona muito bem para comunicar música e comunidade. Obviamente, também falamos sobre o contraste com, e provavelmente queremos pensar sobre a forma de nossas formas e estamos olhando para o contraste. A forma desta caixa é realmente angular e rígida. E a forma dessas linhas fluidas contrasta perfeitamente com aquela caixa de uma forma em que meu exemplo anterior de um círculo completo talvez não tenha sido tão bem. Digamos que se, em vez de ter uma caixa aqui, temos alguns textos que acabaram de dizer formulário. Agora isso gosta de contrastes muito, muito bem porque o texto aqui é muito geométrico e angular, semelhante à caixa que acabamos de ter. Se eu tentasse fazer o mesmo texto, as mesmas letras, mas com uma forma ligeiramente diferente. Parece mais fluente e natural e talvez ao invés de contrastar com as formas à direita, meio que se choca com elas. Então este vídeo foi um pouco recapitulado do que falamos até agora, mas também olhamos um pouco para a forma e como você pode ter um triângulo, e parecer muito diferente apenas por ajustando um pouco as linhas e as bordas. E assim como no nosso primeiro exercício, falamos sobre como queríamos expressar emoção e algumas características com nossa composição, com as formas exatas na composição, podemos nos comunicar um pouco disso também. Então eu quero que você volte ao primeiro exercício em que criamos algumas composições que expressaram uma palavra específica ou você poderia criar algumas novas do zero, se desejar. E desta vez, quero que você pegue o que aprendemos desde então. Eu quero que você os recrie para que eles tenham um certo elemento de equilíbrio lá dentro, mas também um certo elemento de contraste. E você pode usar formas contrastantes agora duas formas diferentes, mas também texturas e padrões diferentes que ajudam a comunicar a coisa que você está tentando expressar. Se você quisesse criar dois novos, talvez tente expressar um sentimento de segurança com uma composição e, em seguida, tente expressar um sentimento de liberdade com uma composição. 7. Hierarquia: Até agora, analisamos o equilíbrio e o contraste, que garantirão que nossas composições fiquem boas. Analisamos a expressão e a forma, o que garante que eles se comuniquem ou falem no tom certo de voz. Agora vamos construir isso com algumas técnicas que tornarão nossas composições um pouco mais úteis. Não vamos criar arte. Eventualmente, estaremos criando desenhos e eles vão pensar nos EUA para aquela pintura de John Constable com a vaca sobre ela. Agora, havia outro objeto, acho que talvez um edifício do outro lado do rio e outra árvore, talvez houvesse uma hierarquia óbvia dentro dessa composição. Isso facilitou saber o que olhar primeiro e o que olhar para o segundo, maioria dos artistas terá algum tipo de hierarquia dentro sua composição ao formar o espectador o que olhar primeiro, segundo, às vezes até mesmo usando linhas reais ou até mesmo setas dentro de padrões para guiar o olho em torno da composição e mantê-lo dentro dos limites dessa imagem. Se, por exemplo, tomarmos a composição novamente. Eles tinham sido apenas duas vacas de igual tamanho na minha composição. Já sabemos que isso não cria um contraste particularmente agradável em nossa composição, embora crie um equilíbrio muito bom, também deixa o espectador se perguntando qual desses dois é o mais importante que eles devem olhar primeiro. E há uma certa quantidade de conflito e desconforto dentro do subconsciente deles. O artista ou designer que cria a composição tem muito mais informações para decidir o que alguém talvez deva olhar primeiro, a pessoa olhando para ela não pode decidir dentro de uma fração de segundo, que é a coisa mais importante a se olhar. Eu criei um exemplo de página inicial de Notícias que eu poderia criar se alguma vez tivesse um blog. E há rotas relativamente óbvias que você pode olhar para esta página. Em primeiro lugar, você notaria esta história sobre os direitos. Ele tem o texto maior. Parece diferente de todas as outras histórias, hum, e está bem alto na página. E então talvez haja duas áreas diferentes que você pode olhar em seguida porque uma é um pouco maior e usa mais espaço, mas a outra tem layouts um pouco mais exclusivos aqui. Então, essas potencialmente duas coisas que você pode ver depois disso. Os sites de notícias são ótimas fontes para analisar como as pessoas usam hierarquia visual porque normalmente têm muitas informações. Eles estão tentando entrar em uma quantidade muito pequena de espaço. Mas primeiro vamos olhar para algo em que maioria dos não doenças entra começaria a pensar em hierarquia. Se você já escreveu um ensaio em um documento do Word, você sem dúvida tinha um título grande na parte superior com alguns textos e texto menor abaixo dos parágrafos. Nesse caso, talvez um marcador para uma página de conteúdo porque esse é o plano de fundo que todos temos na criação de uma hierarquia. Novos designers sempre pensam no tamanho do texto ao tentar tornar algo mais importante. E, potencialmente, pense em mover as coisas para cima na página ao tentar torná-la mais importante. Se olharmos para este documento, tenho aqui, há um cabeçalho e cinco links para artigos abaixo. O cabeçalho. As últimas notícias não são extremamente informativas, especialmente para alguém que viu essa página muitas vezes. Portanto, não queremos que isso seja realmente grande. Provavelmente queremos que ele fique mais alto na hierarquia. Então talvez pudéssemos fazer disso uma cor diferente. Então, ele se destaca, mas na verdade o torna muito menor. Então, está fora do caminho depois disso. Ter cinco títulos é, na verdade, um pouco demais. É muito difícil para as pessoas tomarem uma decisão entre cinco coisas ou certamente mais de cinco. Então, talvez queiramos guiá-los direção a um para, pelo menos, fazê-los começar a ler manchetes, em vez de ficarem assustados com a indecisão e nunca realmente lê-las. Então, gostaríamos de evitar ter cinco coisas exatamente da mesma importância e talvez apenas mover uma para fora. Se pudéssemos escolher um aleatoriamente ou pudéssemos decidir o que achamos mais importante e arrastá-lo para fora, faça o texto muito maior, tornando esta a hierarquia mais alta. E poderíamos tornar isso mais importante ainda movendo-o para fora da lista. Atualmente está em. Dê uma olhada neste design. Acabei de criar esta página inicial de notícias e ver se você consegue identificar qual é a coisa mais importante na página. Qual é a coisa que você percebe primeiro? Talvez encomende-os a partir de 1, 2, 3, 4 em ordem de como você os percebe, veja se você consegue identificar o que é que faz algo na página. A primeira coisa que você percebe ou a segunda coisa que você percebe, provavelmente não é apenas o tamanho. E então, quando terminar de olhar para isso, vá e olhe para o seu jornal favorito que você normalmente olha e veja quais técnicas eles usaram. E talvez até olhe algumas composições de artistas e veja quais poços de hierarquia eles usaram para fazer você olhar primeiro para uma composição de caminho e olhar para uma parte de segundo. Agora, vamos voltar a criar nossas composições. Como ponto de partida para isso, sinta-se à vontade para ver qualquer um dos que você criou para os exercícios anteriores. E eu quero que você adicione formas, pensando no contraste e no equilíbrio. Mas desta vez, começou a pensar na hierarquia. Certifique-se de que há uma coisa e a composição que é a coisa mais importante. E então uma segunda coisa, que é a segunda coisa mais importante. À medida que trabalhamos mais abaixo na hierarquia, há problema em ter algumas coisas no mesmo nível, mas mais alto, isso deve ser apenas uma coisa mais importante. Tente usar algumas das técnicas que você identificou ao olhar para jornais e outras peças de arte e veja se você pode usá-las para criar composições diferentes com diferentes hierarquias, talvez pegue um que você esteja feliz com o cabelo. Eu usei bastante o contraste de cores. Os cinzas mais claros são menos proeminentes. Mas talvez se eu deixar um mais escuro e de repente tornar essa peça realmente muito mais importante na composição. Ou se de fato eu mudei de cor e mude essa forma, isso vai torná-lo muito mais importante nessa competição. Em seguida, tente criar algumas composições que não têm hierarquia. O óbvio seria apenas uma lista de quadrados como este e depois ver se você pode brincar com ele para fazer uma coisa se destacar, para torná-la mais importante. Como em todos os nossos exercícios anteriores, não há caminho certo ou errado. E você não está tentando necessariamente fazê-los parecer incríveis agora. O que você está tentando fazer é treinar sua intuição para que, quando estiver lidando com mais elementos, sejam mais coisas que você precisa pensar na página. Você pode criar naturalmente essa hierarquia em seus designs. Sinto muito, isso foi um pouco longo. Mas apenas recapitular seu exercício para isso é criar uma composição. Você pode usar cores, formas e tudo o que usamos até agora. Mas certifique-se de que existe uma hierarquia visual para a primeira, basta criar três elementos em sua composição e depois tentar com quatro e continuar adicionando-os e veja se você pode ter um hierarquia coerente em suas composições. 8. Relações: Então, em nosso vídeo anterior, estávamos falando de hierarquia, que é em grande parte sobre fazer algo se destacar da multidão. O que torna algo a coisa mais importante e mais óbvia na página. Mas o inverso disso é como agrupamos as coisas para mostrar que elas pertencem juntas? Se olharmos para trás para esse design aqui, podemos ver que esses três artigos à esquerda estão obviamente relacionados de alguma forma. Eles têm um nível de importância semelhante. Eles provavelmente têm algum tipo de relação entre si. Da mesma forma, esses artigos no canto inferior esquerdo ou esses artigos no canto inferior direito, tendo mais artigos seguindo exatamente o mesmo padrão no canto inferior direito, diz que eles são menos importantes para que eles não chamem nossa atenção tão rapidamente. Mas também nos diz quando começamos a olhar para eles, que há algo semelhante neles, que eles pertencem juntos por algum motivo. Então, se você olhar para trás para esse design ou qualquer jornal, ou mesmo se você gosta de uma composição artística, você pode tentar identificar como certos elementos foram feitos para parecer que fazem parte do mesmo padrão que eles pertencem juntos. E então tente criar nossas próprias composições usando essas técnicas. Por exemplo, se eu tivesse um círculo e quisesse equilibrar isso no lado direito da composição. Eu poderia semelhante a esses artigos de notícias na página da Web, usar algo como três quadrados empilhados igualmente partes. Tem o mesmo tipo de peso que o círculo, mas eles parecem menos importantes porque seguem o mesmo padrão e parecem se relacionar um com o outro. Sabemos que eles têm algo em comum. Poderíamos ter duas formas que não se encaixam tanto em um padrão quanto uma na outra, mas talvez elas estejam contidas dentro de outra forma. Essa é outra maneira de podermos dizer que essas duas formas estão relacionadas. E mesmo que essas formas se tornem círculos, por exemplo, ainda parece que as formas à direita estão mais relacionadas entre si do que a esquerda. Porque há tamanho semelhante e eles são relativamente próximos um do outro. Talvez pareçam pertencerem mais do que aquele à esquerda. De qualquer forma, vamos tentar fazê-los parecer mais relacionados. Eles poderiam simplesmente ser conectados por ter uma linha real conectando as formas que funcionam. Ou talvez haja algum tipo de forma abstrata que ambos se sobrepõem que os faz sentir como se pertençam a uma terceira forma. Ou, claro, pode haver todos os tipos de qualidades que as formas têm forma diferente que tornam óbvio que elas estão relacionadas de alguma forma. Então você provavelmente adivinhou. Quero que faças exatamente a mesma coisa que fez no último exercício. Crie uma composição com hierarquia. Mas agora vamos tentar relacionar alguns dos elementos menos importantes na página. E, claro, talvez relacionar alguns dos elementos muito importantes com alguns dos elementos menos importantes. Porque, é claro, quando começamos a criar designs, você pode ter um título muito importante com alguns elementos um pouco menos importantes abaixo dele. 9. Alinhamento: Como mencionamos um pouco antes, uma vez que você tenha muitos elementos em sua página, as coisas começarão a ficar um pouco caóticas. E assim, naturalmente começaremos a criar algumas regras para adicionar alguma conformidade. Portanto, há apenas uma pequena área de espaço para o caos criativo. Por exemplo, podemos limitar a quantidade de cores que podemos usar. Talvez digamos que há apenas três cores específicas que podemos usar para essas formas em nossa composição. Falaremos mais sobre cores mais tarde no curso. Mas, por enquanto, vamos falar sobre nosso layout de composição. Agora, mais cedo, eu disse que você poderia começar a criar um tipo de grade em sua mente ou certificar-se de que as coisas estão alinhadas para tentar reduzir esse caos. Também falaremos sobre grades mais tarde no curso também. Mas, por enquanto, você está começando a criar algumas composições. E alguns deles têm muitos elementos. Eles estão começando a parecer um pouco caóticos. Queremos ter certeza de que estamos mantendo as coisas alinhadas umas com as outras. Então eu queria sugerir algumas coisas que podem ajudar esses alinhamentos a ficarem bem. Então, na tela, tenho três caixas de tamanho igual são da mesma cor e elas se encaixam perfeitamente nessa grade imaginária. Eu coloquei sobre isso. Se eu adicionei uma quarta caixa, idealmente, não quero que ela não esteja alinhada a essa mesma grade limitando as posições em que eles são elementos podem aparecer na minha composição. Estou dando a ele uma sensação de conformidade, o que lhe dá um bom padrão satisfatório para o usuário olhar. No entanto, talvez eu queira criar alguns interesses visuais e talvez eu queira algum caos, nesse caso talvez um elemento não apareça alinhado ao resto da grade. Mas mesmo assim, eu gostaria de governar dizendo que apenas um elemento na minha composição pode ser alinhado à grade. Mas essas regras vão mudar dependendo da composição que estamos criando. Muitas vezes dependendo do tipo de sentimento que queremos que a composição incutir na pessoa que a olha. Poderíamos criar algo assim onde ele tem um bom equilíbrio para a composição, mas também tem um pouco de contraste entre a esquerda e a direita, e simplesmente fazendo a maior forma alinhada duas diferentes dentro da grade para que seja maior. Onde isso vai começar a ficar um pouco mais complicado é quando começamos a introduzir formas diferentes, mas queremos aplicá-las à mesma grade de alinhamento. Se, por exemplo, queremos a composição assim, onde estamos equilibrando um quadrado e um círculo ligeiramente mais leve. O círculo não vai parecer que se encaixa nessa grade, o mesmo que o quadrado, porque não tem os cantos preenchidos como um quadrado. O círculo não tem uma bela borda plana para ficar nivelado com a grade de alinhamento. Então, para que nosso círculo se encaixe dentro dessa mesma grade de alinhamento, nós realmente queremos expandi-lo um pouco. Queremos empurrar seu peso ligeiramente para fora. E agora talvez isso pareça um pouco mais como se estivesse alinhado à mesma grade que o quadrado. No último vídeo, estávamos falando sobre formar relações com formas se elas pertencem juntas ou há algum tipo de relação entre o que essas formas significam para a página. Se nós, por exemplo, quiséssemos que este quadrado e o círculo fossem alinhados e também se relacionassem de alguma forma. Talvez nós os alinhássemos com base no ponto central das duas formas. Agora, digamos que queríamos, por algum motivo alinhar o círculo com a linha de base do quadrado em vez do centro do quadrado, como acabamos de dizer sobre dimensioná-lo, vamos empurrá-lo um um pouco sobre essa linha. Gosto de imaginar como se essas linhas tivessem um pouco de gênero esponjoso para elas. Agora vamos fazer a mesma coisa com uma forma ligeiramente diferente com um triângulo. Se tivéssemos o triângulo desta forma, ele provavelmente ficaria na mesma linha de base. Mas se o virarmos, então está em um ponto muito, muito afiado que provavelmente vai empurrar um pouco por causa da ponderação central disso. E se quiséssemos alinhar centralmente o quadrado e o triângulo, o triângulo tem a maior parte de sua espera no lado maior, obviamente. Então, na verdade, vamos empurrar isso um pouco para baixo e tratar isso como se os pontos centrais do triângulo estivessem os pontos centrais do triângulo um pouco mais longe do mais poíntimo. E pense em onde o centro do peso da forma é em vez do centro real. E, finalmente, se pararmos de pensar linhas de grade ou linhas de alinhamento por um segundo e pensarmos em um monte de formas em uma sequência espaçada igualmente. Você pode ver que eu realmente fiz o círculo um pouco maior e o triângulo um pouco maior para, para empurrar sobre essas linhas de base e aquela linha superior. Mas eu quero falar sobre como eles estão horizontalmente espaçados pela tela. Bem, agora, o que eu fiz semelhante às linhas de grade anteriormente, é que coloquei um espaço igual entre a borda de cada uma dessas formas. Agora, o problema aqui, novamente é que os quadrados têm uma borda muito plana. Eles estão sentados contra essa lacuna. Enquanto o triângulo e o círculo têm pontos muito precisos que estão tocando na borda do espaço. Em vez de espaçar essas formas, estou muito mais preocupado com a área do espaço entre cada forma. Se eu olhar para os três espaços entre as formas, perceberei rapidamente que esse espaço à esquerda é muito, muito menor. Então eu quero empurrar esse círculo e que o espaço à direita é um pouco menor. Então eu só quero esmagar esse triângulo para a esquerda um pouco. E agora, se eu colorir essas formas de volta, fico muito mais feliz com o quão bem espaçadas elas estão. Claro, você ainda está trabalhando com papel e caneta. Então você estará imaginando as linhas de grade ou imaginando essas áreas entre elas. E eu peço que você continue trabalhando com papel e caneta porque estamos treinando nossos olhos e estamos treinando nossa intuição criando cada uma dessas composições. Pegue as composições que você criou para as duas últimas seções e recrie-as, mas demore um pouco mais de tempo sobre elas agora talvez faça-as um pouco maiores e gaste tempo para pensar sobre o alinhamento, exatamente o quão perto cada forma está uma da outra, e por que a composição como criamos neste exercício parecerá quase exatamente a mesma que as duas anteriores. Mas acredite em mim, isso vai fazer uma enorme e enorme diferença. Sempre que vejo um iniciante, designer gráfico ou web designer começar a usar uma grade e pensar em alinhamento. É honestamente a coisa número um que faz com que essas composições pareçam muito mais profissionais. 10. Sequência e Ritmo: Com todas as coisas que acabamos de falar, hierarquia, relações e depois alinhamento. Estamos falando muito sobre a criação um senso de ordem na página. Ainda criamos muito caos com a expressão e o contraste. E então nós apenas criamos uma boa ordem. ordem é sobre a função da página, mas o ritmo é um pouco mais sobre o violino. Vamos falar sobre ritmo um pouco mais agora. Se você imagina música, é claro que a música tem um ritmo. Olhe para essas caixas na tela. Eles estão bem espaçados em um ritmo muito específico. Imagine uma música que tenha apenas batidas repetitivas. Esta composição é muito semelhante a uma música que tem apenas uma batida repetitiva contínua ao longo da música. Agora, uma música com batidas repetitivas contínuas pode ser bastante satisfatória. Podemos gostar, mas vamos ficar entediados rapidamente. Vai ficar monótono. E onde vamos desligá-lo para o nosso cérebro vai dormir. Na verdade, pode ser muito bom para dormir. O que faremos com uma composição é muito semelhante ao que faremos com a música. Talvez nós apenas removamos algumas dessas batidas. Talvez um deles seja abatido ou sincopado. Talvez tenhamos alongado algumas dessas batidas, ou talvez façamos com que ela tenha um som diferente ou, nesse contexto , é claro, seria uma cor diferente. Claro, se adicionarmos uma grade sobre nossa composição, criamos de forma anormal uma forma de ritmo. Estamos naturalmente criando batidas onde certos elementos se sentam em nosso design. O que estamos pensando um pouco mais neste vídeo é, a posição dessas batidas cria um ritmo interessante? Existe um bom ritmo na página? E isso é praticamente impossível se estamos falando sobre esse ritmo horizontal indo da esquerda para a direita. E isso porque, é claro, sabemos que usamos nossos celulares às vezes em nosso iPad. E a largura do design, a composição vai mudar drasticamente e muitos bits vão se mover de lugar e, portanto, praticamente vai arruinar esse ritmo horizontal. Além disso, se você estiver procurando em um celular, não há muita diferença da esquerda para a direita. Então, se começarmos a retornar ao mundo do web design, realmente queremos pensar em nosso ritmo de cima para baixo, o ritmo vertical. Para o último exercício neste módulo, quero que você trabalhe com uma tela vertical, algo que se parece uma área branca na tela aqui, se você desenhar em caixas em um pedaço de papel ou qualquer outra coisa está absolutamente boa. Agora, antes de tudo, imagine que ele tenha essa batida repetitiva devido a descer a página. Ou você pode desenhar levemente lápis sobre sua composição. E então vamos construir uma composição onde adicionamos elementos que apenas uma linha a essas batidas iniciais. Agora, obviamente, poderíamos tê-los todos do mesmo tamanho alinhados, descendo a página assim. Mas isso vai ser muito chato e fará com que nosso usuário adormeça. Então, em vez disso, vamos tentar construir essas formas de tamanhos diferentes e cores ligeiramente diferentes para tentar dar uma peça interessante na página, mas ainda assim alinhadas a essas batidas subjacentes. Experimente algumas versões diferentes. Experimente formas diferentes, se quiser. Mas tente perceber quando algo está funcionando melhor e quando não está, por exemplo, essa laranja, não ocupa muito espaço, mas se tivéssemos uma grande forma laranja, pode ser um pouco demais. Pode assumir toda a composição, um ritmo com o qual você está feliz e, em seguida, tente adicionar alguns outros elementos à composição. Pensando em todas as outras coisas sobre as quais falamos neste curso. Pensando em como as coisas se relacionam entre si e se a composição é bem equilibrada e se há algum contraste. Tire um pouco de tempo para construir essas composições finais para incorporar tudo o que aprendemos ao longo do módulo. Então, passe um pouco mais de tempo neste e sinta-se à vontade para usar um programa gráfico neste momento. Se você se sentir mais confortável fazendo isso, quero que você tenha certeza de que sua tela, a forma que você está criando, a composição interna do é vertical. São retratos. É, é maior do que é longo. Desenhe levemente algumas linhas através dele com uma lacuna consistente entre eles, imagine que esta é a sua batida subjacente da sua página, o ritmo. E, em seguida, use essas batidas para criar caixas de tamanhos diferentes que serão o fundo da sua composição e torná-las diferentes cores e alturas diferentes. Por fim, use tudo o resto que aprendemos em todo o resto deste módulo para adicionar três ou quatro outros elementos à composição. E esta pode ser sua última oportunidade criar algo em que você não tem nenhum outro objetivo em mente é jogar e se divertir um pouco e tentar identifique o que você acha que pode parecer bom. Portanto, certifique-se de se divertir um pouco com este. 11. Resumo: Através desses primeiros vídeos, trabalhamos em vários exercícios rápidos , mas muito práticos que cada um se baseia no último, treinando nossos olhos e treinamos nossa intuição para criar conversas melhores. Retornou a eles quantas vezes quiser. Tenha a composição com boa aparência antes de começar a pensar sobre o conteúdo, a marca ou qualquer outra coisa. Quando trabalhamos com o posicionamento do conteúdo real na página mais tarde, estaremos pensando em outras 100 coisas e então ficará muito difícil para nós identificar se a composição geral é bem equilibrado, bem visualmente interessante, ou mesmo que a própria composição comunique a mensagem certa trabalhando nesses exercícios independentemente do conteúdo da página. Agora é uma segunda natureza para nós. Ele vem até nós naturalmente quando precisamos dele, e não precisamos pensar conscientemente nisso para que nossas composições funcionem bem.