Curso completo de Princípios de Design: Proximidade

fala Turma seja muito bem-vindos a mais um episódio do nosso curso de princípios de design e nessa aula a gente vai falar tudo sobre o primeiro princípio que é o princípio da proximidade certo então vamos direto aqui pra tela do computador pra gente não perder tempo princípio da proximidade pessoal pra gente poder entender basicamente o que a gente vai estar vendo nas próximas aulas Vamos ler uma coisa que é importante que Inclusive a gente já viu na apresentação anterior que é o seguinte depois que você aprende a dar nome a uma coisa você tem consciência

da existência dela você pode dominá-la você manda nela você tem poder sobre ela essa é uma frase que é dita pela própria hobin Williams no seu livro designer para quem não é designer que é inspirado também para esse curso que diz o seguinte pessoal uma vez a tem muita coisa que você tá fazendo no seu dia a dia como designer que você já aplica algum dos princípios provavelmente só que você ainda não tem consciência do Por que você tá aplicando e tem outra situação que pode ser que você justamente por não conhecer o princípio nem

esteja aplicando nos seus projetos e por isso que talvez eles estejam ficando com um pouco de falta de Harmonia certo então é importante a gente ter isso em mente pra gente poder seguir paraas próximas etapas aqui para você entender basicamente principalmente Como que o princípio da da proximidade opera certo e o princípio da proximidade a lei da proximidade diz o seguinte que devemos agrupar itens relacionados Ou seja é muito comum que em trabalhos de designers iniciantes as palavras frases e imagens se espalhem sem uma organização lógica dentro dessa página que a gente tá fazendo certo

preenchendo cantos ou ocupando mais espaço do que é necessário existe uma noia de designer iniciante que é de que tem que preencher tudo que tem na tela Putz A gente tem uma tela 16 por9 como essa da apresentação não eu preciso preencher tudo aqui não pode est área em branco não pode tá sobrando área em branco aqui e o designer iniciante acaba não se dando conta que é justamente a área em branco que é sua maior aliada é área em branco que justamente cria uma Harmonia visual pra gente poder criar coisas bonitas repara só esse

exemplo ó se eu fosse um designer iniciante eu ficaria desesperado de deixar áreas em branco como essa daqui simplesmente aparecendo no projeto tá vendo isso daqui me daria desespero se eu fosse um designer iniciante eu teria a necessidade canônica de querer preencher tudo isso daqui que tem disponível na tela e a gente vai entender aqui nas próximas aulas que é justamente o oposto disso na verdade é justamente áa em branco que é a sua maior aliada e principalmente é a maior amiga daqui da nossa lei de proximidade Tá bom então vamos ver o seguinte ó

não se engane com uma coisa tá quando os elementos de um design estão espalhados a página frequentemente parece desorganizada e a informação que deveria ser a mais importante nem sempre fica acessível em primeira vista pro leitor quando a gente espalha as coisas na nossa página de forma sem ter uma organização lógica o a pessoa o leitor entra na sua página Tenta olhar as coisas e não consegue compreender por onde que ele tem que começar o que que é mais importante naquela página e quando isso se Alia há muita informação dentro do seu design a pessoa

P acaba perdendo interesse pelo seu texto pelo seu conteúdo e acaba indo embora então você acaba perdendo um cliente você acaba perdendo um leitor você acaba perdendo um lead potencial que poderia trazer dinheiro pra empresa que você tá prestando serviço ou pro seu eh pra sua própria empresa certo então a gente deve agrupar itens relacionados aproximando eles fisicamente Para que sejam vistos como um grupo coeso em vez de um monte de pedaços sem relação Então se as coisas são parecidas são relacionadas Elas têm que est agrupadas e também quando não estão agrupadas elas têm que

est distantes então da mesma forma itens ou grupos que não estejam relacionados não devem também estar próximos porque isso dá o leitor uma dica visual de que a página está organizada e faz a o leitor entender o que que realmente é importante de cada parte do bloco certo vamos ver o exemplo a seguir pra gente entender melhor esse é o primeiro exemplo aqui pra gente poder explorar melhor esse tema deixa eu jogar minha imagem para cá acho que aqui tá bom beleza seguinte ó a gente tem essas duas imagens né uma imagem muito simples e

você vai reparar que nos próximos nas próximas aulas eu vou sempre dar exemplos com fundo bem cinza com foco bem na matéria do conteúdo eu não quero que você fique olhando o cor fique se distraindo pela peça em si eu quero que a peça seja uma ferramenta de explicação então todas as peças que a gente vai est vendo é sempre bom destacar que você vai est vendo eh Fontes mais simples com exceção de quando a gente entrar nas aulas de fontes e também com fundo cinza claro como esse que você tá vendo aqui aqui pra

gente poder explorar a técnica por trás do que tá regindo o conteúdo Tá bom só um disclaimer importante porque a gente vai estar vendo bastante peças parecidas com essas nas próximas aulas então é o seguinte ó você presume que elas TM alguma relação entre si Porque elas estão próximas umas das outras certo a gente tem aqui Um catálogo de flores a gente vem aqui a a gente vê a eh calêndula Amor Perfeito crisântemo Madre Silva Margarida a gente vê todas essas peças aqui e a gente presume que todas elas são relacionadas porque todas elas estão

no mesmo alinhamento e todas elas estão alinhadas juntas numa coisa só certo enquanto quando a gente vê esse segundo exemplo aqui a gente já passa a observar o oposto né parece que as últimas quatro flores são diferentes das outras por quê Porque elas estiveram um alinhamento diferente repara só deixa eu bloquear aqui pra gente ver ó repara que a gente tem um conjunto de bloco de texto aqui certo só que agora a gente também um a gente tem um conjunto de bloco de texto aqui o que que isso tá dando de dica visual para nós

é que tem duas categorias de flores aqui certo tem duas categorias que essa é a primeira categoria que engloba essas essas essas plantas e essa segunda categoria que engloba essas outras plantas Então essa é uma informação relevante pra gente entender porque isso daqui rege todo o tipo de conteúdo que a gente for fazer daqui por diante porque a proximidade é uma coisa simples que você acaba entendendo instantaneamente simplesmente olhando pra página Então nem sempre você tem consciência disso mas ela tá lá nem sempre você olha para uma peça e fala beleza são duas categorias mas

no seu subconsciente você consegue automaticamente bater o olho numa coisa e categorizar ela simplesmente por ter essa separação visual Tá certo então mais um exemplo aqui para você entender ó como na vida a proximidade indica uma relação não é mesmo então por que que eu tô dizendo isso por causa do seguinte ó se você vê um grupo de meninas na escola você imagina que elas são amigas ou que se conhecem certo porque elas estão em Grupo Elas estão juntas então você presume inconscientemente que elas se conhecem que elas são amigas ou se você vê pessoas

pegando no mesmo ônibus no final da tarde você presume que todas elas moram no mesmo bairro porque todas elas é um grupo de pessoas que estão juntos que estão entrando no mesmo ônibus então você presume que elas estão indo pra mesma direção não é uma coisa que você fica pensando eh conscientemente é uma coisa que tá no seu subconsciente só que é uma coisa que eu quero que você entenda para você entender o primeiro princípio da proximidade certo desse dessa desse princípio de agrupamento então se você vê pessoas sentadas juntas no restaurante Você imagina que

elas compartilham algum tipo de intimidade elas se conhecem Porque elas estão sentadas juntas numa mesma mesa não é mesmo então isso é uma dica para você entender como que funciona o princípio da proximidade por causa do seguinte vamos pegar como exemplo um clássico dos designers que é o cartão de visita eu fiz um cartão de visita muito simples aqui sem muita Firula Só pra gente entender o seguinte ó para eh repara vamos Vamos explorar uma coisa aqui ó Quantos elementos separados você consegue ver nesse pequeno espaço você consegue identificar Quantos elementos tem vamos ver ó

deixa eu pegar aqui de novo o meu marcador a gente presume que tem um bloco do 3 quatro e cinco blocos certo porque tem cinco informações espalhadas aqui na página Então você passou por cinco blocos quando você tentou ler essa página Provavelmente sim não é mesmo eh onde você começou a ler se você pudesse ter uma se eu pudesse dar uma dica para você por onde você eh perguntar por onde você começou a ler você saberia me responder Provavelmente você me diria que você começou a ler pelo meio certo por quê Porque é o texto

maior e porque também tá em então um texto maior numa peça acaba chamando mais atenção Uma Peça em acaba chamando mais atenção quando você cai de imediato nela certo em qual e depois que você leu a academia de criador Qual foi a ordem que você tomou para Aler as outras quatro restantes dos blocos provavelmente da esquerda paraa direita não é mesmo por quê Porque a gente tá condicionado a ler nessa ordem na no padrão eh Romano né no padrão do alfabeto e nacional americano e de muitos outros a gente lê da da esquerda paraa direita

então provavelmente a gente leu depois da academia de credor a gente passou pelo meu nome pelo telefone pela rua e por São Paulo só que depois você sentiu que você ficou lendo tendo que ler mais de uma vez para ter certeza que você não perdeu nada Provavelmente por quê Porque a gente tem blocos muito separados entre si e sem um alinhamento Claro se a gente tentar inserir uma linha aqui nesse bloco só para você entender ó se a gente tentar inserir uma linha aqui tem uma linha que rege aqui tem outra linha Opa Tem outra

linha que rege aqui aí tem outra linha que rege aqui e outra linha que rege aqui ou seja não tem um alinhamento Claro das informações certo Por que que a gente eh explorou esse ponto porque agora eu vou te mostrar no próximo exemplo como que poderia ficar melhor se a gente simplesmente aplicar o princípio da proximidade no meu cartão de visita repara só a gente pegou um cartão de antes que tinha cinco pontos de leitura que você começar a valer provavelmente pelo centro e agora a gente centralizou todo mundo com uma Cadência de informações de

prioridade que começa pelo nome da empresa pelo nome da do profissional e depois os seus dados de contato certo Então pergunta Tem alguma dúvida por onde você deveria começar a ler esse cartão no seu depois provavelmente não porque você vai ler de cima para baixo de uma maneira imediata porque a gente tem aqui basicamente uma linha imaginária que organiza todos os elementos Tá certo Então você sente que você também terminou de ler mais rapidamente essa informação do que em relação a esse outro esse outro cartão de visita Provavelmente sim também justamente porque a gente não

precisou ficar passando por múltiplos blocos aqui para poder terminar a leitura que a gente tem uma leitura mais fluida simplesmente porque tem um alinhamento aqui Central que organiza tudo tá bom então vamos lá com o simples princípio da proximidade esse cartão agora tá organizado visualmente e suas informações também ficaram mais Claras não é mesmo e com isso ele comunica com muito mais clareza e e transmite mais credibilidade ao profissional Porque pensa o seguinte eh julgando somente pelo cartão sem conhecer o profissional quem que você julgaria que seria o melhor profissional esse com esse cartão tudo

desorganizado ou um cartão mais direto ao ponto como esse no exemplo do depois aqui eu no meu caso eu diria que seria esse certo não sei você mas provavelmente esse daqui seria transmitiria uma maior credibilidade então quando vários itens Estão próximos uns dos outros ele se Torn uma unidade visual em vez de várias unidades separadas certo então como na vida a proximidade indica uma relação Então existe uma relação lógica nesse cartão de visita então ao agrupar os elementos similares em uma unidade diversas coisas acontecem ao mesmo tempo como a página fica mais organizada então a

gente conseguiu observar que tem uma maior organização aqui certo você entende imediatamente por onde tem que começar a ler então a gente sabe exatamente por onde que a gente tem que começar a ler que é de cima para baixo e também os espaços em branco ao redor das Letras também fica com uma sensação de mais organização repara uma coisa importante sobre as zonas em branco aqui que eu tenho para te mostrar Deixa eu voltar nesse exemplo de novo ó repara que nesse bloco Aqui nós temos ó a gente tem as áreas em branco que estão

vazando pela lateral Tá certo repara só que a gente tem as áreas em branco todas vazando pela lateral não tem área presa aqui dentro Em contrapartida aqui repara que aqui o Mara em branco Ela tá presa entre dois blocos Aqui também tá presa entre dois blocos Aqui também está presa repara que quando a gente não tem um alinhamento Claro a gente começa a prender eh o branco área em branco área vazia entre os elementos e isso acaba separando mais ainda eles então é por isso que quando a gente tem uma organização lógica de elementos os

a área em branco vasa paraas laterais da peça Sem ela ter que ficar se prendendo com exceção daqui só que aqui tem uma organização lógica então a gente fica claro também sem muita dificuldade esses pontos aqui tá certo então é por isso que é importante a gente também ter eh essa sensação que o espaço em branco ao redor também tá com maior organização Beleza então um outro exemplo que eu posso estar te dando para você entender bem os princípios que eu tenho para te mostrar aqui é com o exemplo do cabeçalho informativo então uma dica

importante que eu tenho para te dar por isso que eu até destaquei em azul aqui para você ver é que sempre tira um tempo nas suas páginas para decidir quais itens devem ser agrupados e quais itens deve ser separado Essa é um uma dica importante que a gente quando a gente tá falando de alinhamento é que você tem que tirar um tempinho ali para saber categorizar as coisas para não ficar com a sensação que tá tudo muito bagunçado repara nesse antes e depois aqui que vai vai ilustrar bem o que eu tô querendo dizer com

isso ó aqui ó é um é um é um é um uma headline provavelmente um é um é um cabeçalho de um de uma peça de um livro Pode ser que tá escrito o seguinte ó as artes liberais Da Lógica gramática e retórica entendendo trivium o trivium para quem não conhece é um livro de gramática basicamente de português E latim muito útil recomendo até para para você aprender a escrever melhor até para você também diagramar melhor as coisas então entendendo o trío volume 26 número 9 26 de outubro então repara que a gente tem peças

aqui só que aqu ela tá meio presa na lateral a logo tá bem dentro do bloco que tá competindo com tudo em maiúsculo certo então é repara que não tá legal tá tá estranha essa arte porque parece que tá tudo desorganizado e tá tudo muito preso dentro dele mesmo justamente por causa daquelas zonas em brancas que a gente estava conversando nesse depois o que que eu fiz de diferente ó repara só que eu mudei o texto de caixa alta para Caixa Baixa o que me deu mais espaço para aumentar o preenchimento o que que é

caixa alta para quem não sabe caixa alta é quando a gente tem um texto escrito tudo em maiúsculo Então tudo um texto Todo escrito em maiúsculo é um texto em caixa alta certo e contrapartida Caixa Baixa é um texto que tá escrito sem tá maiúsculo Beleza então a primeira coisa que eu fiz aqui repara que as artes liberais Da Lógica gramática e retórica eu pus em Caixa Baixa que ele já me deu mais espaço troquei a fonte dela e que me deu também mais espaço para trabalhar o restante dos elementos eu mudei o bloco do

Canto arredondado para um quadrado para dar mais força e limpeza ao conjunto repara que aqui ele tá com os cantos arredondados no meu elemento não que esteja ruim ou que esteja péssimo isso daqui só que quando a gente coloca um bloco quadrado mais forte a gente fortalece a circunferência da logo tá então a gente não vai est criando dois elementos competindo entre si porque a gente criou esse elemento mais uniforme e eu não tive medo nenhum de catar a logo e jogar ela um pouco para fora para fazer o contorno da do bloco isso também

trouxe mais organização e mais espaço também para o que vinha a seguir certo então eu aumentei a logo e sobrepus com a caixa isso deu uma sensação de que tudo tá relacionado com a logo porque tá tudo Mirando paraa logo repara só que se eu Inserir a peça aqui e pôr uma organização aqui com a linha ó repara que tá tudo aqui bem alinhadinho certo ó tá tudo bem alinhado E tá tudo meio que indicando para essa direção da logo tá tudo jogando a visão aqui para logo certo simplesmente por causa desse ponto aqui então

eu troquei a fonte do texto complementar também para facilitar a leitura então o que que eu fiz também de diferente ó repara que tava tudo com a mesma fonte de texto tá vendo agora Em contrapartida aqui no depois eu só mantive a fonte o entendendo trinel da mesma maneira só que aí as f a as as informações que são secundárias aqui eu tirei um pouco de destaque delas e troquei a fonte também para uma para uma sem serifa para ficar com uma legibilidade melhor também em telas a gente vai falar sobre serifa e serif e

sem serifa na aula de tipografia mas aqui já é uma dica visual de como que você pode começar a organizar suas coisas certo e também organizei as informações de forma mais clara e em ordem de prioridade repara que agora a gente tem aqui no antes ó Provavelmente você leria para cá só que aí você pularia para cá tentaria ler depois desceria para ver o que que era mais importante e ficaria tudo bagunçado aqui com a organização a pessoa já cai direto nesse texto entendendo trivio e já entende que são Artes liberais Da Lógica gramática e

retórica você já entende que Qual qual é o volume o número e a data do provavelmente do que o evento vai est sugerindo aqui certo Então esse é um outro exemplo de cabeçalho que a gente acaba entendendo como a organização de alinhamento é importante pra gente poder criar respiro pra nossa peça Né repara só como a gente Perdia o respiro nesses pontos aqui né aqui ó ó como competia por espaço também essa peça ó como essa peça ficava brigando aqui com os elementos agora com contrapartida com esse daqui de baixo ó eu joguei a logo

aqui pro lado tem um alinhamento Claro das informações aqui e tudo aqui ó se você reparar todas essas inform que estão aqui estão indicando aqui para logo ó repara que tá tudo tendo essa harmonia visual também certo muito bom então exemplo agora com flyers e folhetos o mais importante aqui foi aplicar um pouco do contraste para separar os elementos de forma visual então uma maneira que a gente pode também ter um uma separação dos elementos separa nesse antes que basicamente tava tudo alinhado só que sem categor categorização em blocos repara que tava tudo linear aqui

tá vendo sem uma separ ação então para quem tá vendo e essa informação acho que tá tudo meio que correlacionado enquanto no depois eu simplesmente criei esse espaço simplesmente inserir deixa eu trocar aqui o bloquinho simplesmente inserir esses espaços entre os elementos principalmente aqui isso já criou uma Harmonia maior pro conjunto certo e é uma coisa importante que eu tenho para destacar você pode estar vendo isso daqui pode estar falando pô Mateus mas isso daqui eu já meio que faço sim Provavelmente você já faz isso só que eu sei que agora você faz essas essa

eu sei que provavelmente você faz essas organizações de uma forma mais instintiva só que eu quero é que você passe a fazer com consciência do que tá aplicando com com o princípio de proximidade eu quero que você tenha a partir desse momento quando você for criar suas peças quando você for fazer as coisas comigo no photoshop no ilustrator você faça por uma razão por um motivo por uma decisão e não simplesmente porque foi um instinto de separação que você aplicou certo porque quando você começa a separar os elementos em suas páginas daqui por diante eu

quero que você pense OK agora eu tô o princípio da proximidade não vai ser não precisa ser sempre que você vai est fazendo isso mas eu quero que você se esforce para você ter consciência de quando aplicar princípios como esse certo para você conseguir entender o por você tá fazendo as coisas simplesmente para você saber que você não tá fazendo as coisas simplesmente da sua cabeça certo e assim aplicando um princípio que é fundamental aqui para design beleza vamos ver o próximo aqui que é o exemplo do informativo fazer uma pausa Pro café a parada

é o seguinte aqui pessoal no exemplo do informativo a gente tá pegando um antes Aqui que tá bem bastante informação né então tem clube da sexta-feira programação da leitura e verão e tá com um monte de informação aqui provavelmente a gente tá perdido nesse tanto de coisa que a gente tem para ver aqui então essa página é chata de se olhar você concorda Por quê Porque nada agrada é além de ser muito difícil de encontrar as informações repara que tá tudo junto então se você se perguntasse onde vai ser você saberia eh me dizer rapidamente

eh baseado nesse texto provavelmente não né quando vai ser também não saberia que horas exatamente cada coisa vai acontecer a gente também não sabe porque tá tudo muito junto então a ideia da proximidade não significa que literalmente tudo tenha que estar junto que nem é o caso disso daqui significa apenas que elementos intelectualmente ligados geralmente funcionam muito melhor se ficarem próximos então lembre-se que a aproximação ou a falta dela sempre vai indicar alguma coisa certo então aqui eh Talvez o designer aqui pecou pelo excesso porque ele quis categorizar tudo junto e acabou mais atrapalhando do

que ajudando repara só num depois do que eu fiz que que aconteceu nesse depois aqui ó vamos de novo no antes certo tudo junto e no depois olha só como rapidamente a gente entende como Aonde a sobre o que é sobre para quem é onde e quando certo então na dúvida foque sempre em transmitir uma uma comunicação Clara acima de qualquer coisa na dúvida foque sempre em transmitir a comunicação Clara se você tá na dúvida se você precisa priorizar o design ou priorizar a informação sempre priorize a informação porque é a informação que importa no

final das contas para todo para toda peça bem criada de design certo então você reparou como é rápido passar entre as informações e o e o leitor simplesmente entende eh basicamente sobre o que trata a leitura então o objetivo do princípio da proximidade é bem simples Tá ele deve indicar de forma rápida e Clara o o que quem onde e quando se você consegue aplicar no princípio da proximidade essa regra do que quem onde e quando você basicamente domina Esse princípio então com isso não corremos o risco de perder prováveis leitores ou clientes porque eles

desistiram de procurar pelo vasto campo de texto vamos supor esse exemplo anterior de novo e tem esse clube de da sexta-feira que é uma programação de leitura Então vamos supor que tem uma pessoa que tá interessada em entrar num clube de leitura Será que olhando para isso daqui a pessoa sei lá pessoa tá passando por uma rua viu um chamativo de uma é de um clube para ele participar desse clube de leitura Será que ele pararia de andar para ficar lendo e entendendo tudo provavelmente não agora se ele passasse por aqui ele já passaria e

já entenderia beleza O primeiro livo é Celino depois é contos de inverno depois noites de reis e depois ele já vê o local e tudo as informações de data e hora tudo esclarecido certo então o design amador começa a melhorar imediatamente quando ele prioriza prioriza a clareza acima de qualquer outra coisa então na dúvida sempre priorize a informação no seu design então é por isso que a gente trabalhou de uma maneira muito mais dedicada com muito mais cuidado essa parte aqui pra gente poder categorizar essas informações com blocos separados de texto Né repara só que

a gente tem aqui Um bloco Lógico que tem aqui um outro bloco Lógico que tem aqui um outro bloco aqui e repara que teve esse elemento que tá deslocado pra lateral porque ele é um bloco menos importante que traz a a leitura do leitor com mais seriedade para ele saber onde que vai tá acontecendo tá certo então esse é um exemplo muito útil também pra gente aprender como é que faz essa parte também de respiro repara só esse outro exemplo aqui se a gente observar Ó aqui tá tudo preso ó o respiro tá tudo espremido

na lateral tá difícil tá vendo tá muito complicado agora no próximo exemplo aqui quando a gente passa olha só como a gente tem um respiro fluido na nossa peça Olha só como as coisas fogem pra lateral sem ter que ficar se prendendo a nada é sobre isso a proximidade é sobre isso também que a área em branco é porque que a área em branco é tão importante tá certo vamos para um segundo exemplo de informativo aqui que esse daqui também é legal que é quer ser um conhecedor certo é um outro informativo aqui que agora

é o seguinte ó agora que você tem consciência que usa esse princípio e que entende que já fazia isso de forma instintiva há muito tempo me responda você conhece Esse princípio em todo o seu potencial ao ponto de realmente torná-lo eficaz Beleza a gente entendeu o princípio da proximidade sem pular pro pro próximo slide Vamos tentar observar esse elemento e vamos tentar pensar o que que a gente poderia fazer para melhorar essa peça Então vamos observar as coisas mais canônicas que tem aqui ó a gente tem o título certo e a gente tem então que

é uma cópia que tá fazendo uma chamada paraa pessoa poder participar Então a gente tem múltiplos blocos aqui se a gente parar para ver né tem esses blocos que tá tendo essa pequena separação do elemento aqui entre um e outro então você gostaria de p pá você pode imaginar E aqui no final o designer ainda tentou ser criativo e tentou jogar um desenho aqui uma imagem para poder ilustrar a peça só que como que você faria isso melhor então provavelmente você deslocaria tudo para um alinhamento único aqui talvez melhoraria o contraste faria os blocos mais

separados só isso então vamos ver na próxima peça vamos ver o que que foi feito de diferente aqui ó repara só como que melhorou de um antes para depois primeira coisa que eu fiz que é mais tá mais na cara aqui né é o livro é a ilustração é a imagem vem tá pessoal é por isso que o nosso trabalho como designer gráfico é muito importante pra gente poder priorizar e categorizar imagens como essa que você tá vendo aqui justamente pra gente poder pegar um elemento que ficaria preso espremido pequenininho com pouco destaque e a

gente possa Então a partir de agora dar um destaque Grande para ele só que sem perder a prioridade da informação Então o que foi que eu fiz diferente aqui ó aproximei os títulos dos parágrafos relacionados então repara que eu mudei aqui a cor e o tamanho da fonte do que é mais importante você gostaria de T você pode imaginar t e se eu pudesse t tá vendo tudo isso bem claro pro leitor poder pegar também aqui em informação o telefone e e-mail ficar em linhas separadas no final isso fez com que elas se destacassem como

informações importantes repara só que depois da pessoa ver todo esse conjunto do bloco aqui ela automaticamente cai nessa leitura e consegue compreender que tem uma prioridade de informação principalmente porque ela tá no rodapé da página e geralmente informações no rodapé são importantes com particularidade daquele disclaimer de comercial que tem uma promessa mirabolante no começo só que tem o rodap pezinho então o ser humano já tá condicionado a procurar coisa importante no rodapé e aqui que a gente tem então o telefone a gente tem o e-mail daqui pra pessoa poder ter mais informações desse evento certo

e mudei o alinhamento descentralizado pra esquerda repara só que aqui a gente tem um alinhamento todo Centralizado todas as informações aqui estão centralizadas enquanto para cá a gente tem um forte alinhamento à esquerda de todos os elementos tá vendo Então esse é um princípio de alinhamento que a gente vai ver também na próxima aula no próximo princípio de design que a gente tem para explorar só que eu quero que você entenda que o que que foi que causou realmente a diferença nesse bloco primeiro eh a organização ficou muito mais clara certo tá muito mais clara

a organização dos elementos o espaço em branco não está mais preso entre os elementos repara como o espaço em branco de novo tá livre tá fluindo aqui pelas peças mesmo que tenha bastante informação o espaço em branco tá sempre fluindo tá vendo ele tá sempre escapando pelas laterais tá vendo Em contrapartida que aqui tá tudo preso ó repara como ele fica preso ó um grande espaço em branco que tá espremido aqui ó tá vendo Então esse tipo de coisa que a gente tem que ficar atento e é por isso que quando a gente Deixa fluir

o branco o espaço vazio o espaço o espaço e livre de texto de conteúdo ele acaba ajudando a gente a categorizar e ter uma organização mais clara do que a gente tem para explorar aqui tá bom próximo e dica muito importante a proximidade no final das contas nada mais é do que ter mais consciência do que você já faz F naturalidade provavelmente dependendo do seu nível de conhecimento de design talvez você já aplique algumas coisas que eu tô te mostrando aqui só que agora eu quero que você tenha consciência para você poder aplicar ainda mais

ela com naturalidade porque depois que você entende a importância das relações entre linhas textos e imagens você começa a observar o efeito disso e começa a sentir uma necessidade de organizar as coisas em conjuntos lógicos certo então é por isso que você vai ver nas aulas de Photoshop de Illustrator que vai ter nos próximos cursos que tem aqui na academia de Criadores você vai ver que eu tenho a noia de sempre organizar por exemplo dentro do Photoshop as coisas em pastas sempre nomear as camadas sempre deixar tudo organizado por quê Porque eu tenho essa noia

de organizar as coisas em conjuntos lógicos e eu acho que esse é um grande diferencial de um bom designer que é pegar uma coisa e saber organizar ela saber categorizar ela saber colocar ela em blocos certo por exemplo eu tenho um bloco de livros aqui que são pertinentes só que eu tenho um bloco separado por que que esse livro aqui tá separado desses outros é simplesmente porque eu queria dar mais destaque para ele também mas porque também esse livro é tudo sobre é motion design pra gente poder expliqu a gente vai explorar no curso de

After Effects e aqui são livros totalmente voltados para design gráfico e marketing então é por isso que teve essa categoria de organização tá vendo Então tudo na vida pode ser categorizado tudo na vida traz um ar de organização visual E você começa a ter essa noia de querer organizar as coisas em conjuntos lógicos e esse é o meu maior objetivo aqui provavelmente com esse com esse primeiro princípio tá te deixar tão louco da organização quanto eu sou Beleza então o próximo exemplo Esse é o exemplo do cardápio que é um exemplo bem legal porque esse

daqui é o pesadelo de todo o designer beleza cardápio é o bicho para ser criado e é por isso que eu achei importante de trazer um exemplo como esse pra gente eh poder explorar aqui então Eh vamos ver tem esse cardápio que é o nosso Antes aqui tá uma bagunça né o o o dono desse restaurante até tentou né separar aqui os entradas só que tá tudo muito junto você não sabe dar nome pros pratos não sabe fazer nada certo então você pode olhar esse cardápio aqui falar pô Mateus Mas você tá exagerando nesse exemplo

do cardápio não é possível que tem um cardápio ruim desse jeito meu amigo Experimenta visitar alguns restaurantes populares aí da sua região e você vai ver que tem modelos muito parecidos com esse daqui por toda a parte que você for Beleza então é por isso que eu trouxe esse exemplo aqui pra gente poder explorar ele vamos lá vamos fazer uma pequena melhoria aqui né a gente tem esse antes que tá tudo uma bagunça uma loucura e nesse Depois deixa eu jogar minha imagem aqui para cima deixar aqui tem apresentação para você poder pegar aqui na

na abaixo do vídeo tá cobrindo um pouquinho aqui mas não tem problema tá cortando um pouco aqui com o vídeo mas não pega nada que é o seguinte ó O que que foi melhorado aqui primeiramente foi colocado mais espaço entre entre cada item do cardápio certo então se você reparar aqui tava tudo junto Enquanto aqui a gente começou a separar os elementos individualmente certo depois foi removida a caixa alta de todos os textos designer iniciante tem essa noia também de usar caixa alta para tudo cara caixa alta ocupa muito espaço desnecessário e tudo fica importante

dentro da caixa alta porque ele te força a ler letra por letra Então cansa o visual cansa a leitura se você tem anoia de querer ficar usando tudo muito em caixa alta para de fazer isso porque isso te atrapalha Beleza então foi a primeira coisa uma das coisas que eu também fiz removi a caixa alta do os elementos para facilitar a leitura diminui a leta dos ingredientes para enfatizar o nome do prato aqui por quê quando a gente vai no restaurante a gente não quer saber necessariamente Qual é o ingrediente o ingrediente é uma informação

importante só que primeiramente a gente quer saber o nome do prato então por isso que a gente tem que dar o destaque por exemplo em negrite em ó famoso pão de cebola do Gertrude certo ou aqui salada de tomate Summer Garden e só em depois depois embaixo a gente vai querer ler o que que tem no no ingrediente que é tomates amarelos e vermelhos maduros fatiados com muçarela fresca e vinagre balsâmico com manjericão Beleza então são coisas secundárias quando são coisas secundárias a gente pode eh diminuir a fonte beleza diminui a letra dos ingredientes para

enfatizar o nome do prato Beleza então os ingredientes foram diminuidos a letra e troquei a fonte di Arial para uma uma associate SS que é outra coisa também a gente fica sempre noiado em querer sempre usar as mesmas Fontes paraos nossos projetos Vamos tentar Inovar Vamos tentar variar vamos fugir do Aral do times New home vamos fazer coisa legal a gente é designer gráfico a partir de agora a gente tem que começar a a explorar novas fontes a gente vai falar um pouco mais sobre Fontes na aula de fontes que a gente vai ter aqui

nos princípios Mas é uma coisa importante que eu também já tô aplicando aqui beleza então o que que foi melhorado e corrigido ó o maior problema do cardápio original é que não há Separação das informações repara que esse primeiro aqui Não Existe uma separação lógica a gente só sabe que tem anpassa e entrada agora não a gente tem uma separação lógica dos caras no Photoshop Illustrator aprenda a formatar para deixar espaço suficiente antes e depois de cada elemento então quando a gente tiver dentro do Photoshop do ilustrator vou est te dando exemplos práticos durante as

aulas do curso de Photoshop L trator como criar essas peças mas eu quero que você tenha uma atenção importante para aprender a deixar espaço entre as coisas certo aprenda a criar esses espaços aqui Aprenda a dar espaço nas coisas deixar o branco fluir ele é seu amigo não tenha medo dele Pode deixar espaço em branco você vai ver como isso daqui vai te ajudar certo e por último e provavelmente mais importante não tem problema nenhum em usar um tamanho de fonte um pouco menor do que o o 12 o de 12 pontos Pode acreditar Não

tenha medo a a pessoa vai conseguir ler seu seu conteúdo certo é e Inclusive tem pesquisas de comportamentais que demonstra que quando você coloca um texto pequeno só que consegue manter a atenção do leitor você consegue inclusive fazer ele prestar mais atenção no que você tá falando às vezes um texto grandão não causa tanta tanto Impacto e tanta atenção do leitor quanto um texto pequenininho então não tem anoia de querer sempre deixar a fonte eh o tamanho da fonte de 12 para cima pode deixar menos pode deixar oito dependendo tá Como foi o caso que

eu pus aqui não tenha meda medo tá de deixar suas fontes menores do que o pessoal fica falando que tem que ser de 12 aí porque não é real beleza e depois melhorando ainda mais um pouco a gente fez mais uma melhoria aqui que foi o seguinte recuei Cada sessão de forma distinta pro leitor saber que existe dois conjuntos lógicos e também aumentei a fonte da aumentei o tamanho da fonte para criar mais contraste então tanto o antepasto como entrada aqui foi deslocada paraa esquerda depois eu criei os blocos aqui para separar os conjuntos pra

gente saber que tinha uma relação e aumentei o tamanho da fonte repara que agora com o tamanho da fonte maior agora a gente sabe que tem duas categorias bem Claras dos elementos e agora para finalizar Melhorei mais uma coisa ainda que depois foi jogar todos os no toque final todos os valores os preços tudo paraa lateral aqui pra gente criar uma Harmonia de uma uma linha visual aqui que separa e que unifica tudo num bloco Lógico tá vendo ó aqui criou criou-se um blocão lógico bem legal só que ainda assim preservando as áreas em branco

com a legibilidade bem tranquila aqui também nessa parte Tá certo repara que eu quebrei as linhas aqui para criar mais espaço então eu joguei o preço pra direita para deixar as coisas menos apertadas para não ter que ficar espremendo tudo na mesma no mesmo no mesmo lugar e também joguei os ingredientes levemente pra direita para facilitar ainda mais a leitura do conjunto pra gente poder categorizar ainda mais as coisas pra gente poder sempre criar esses blocos lógicos aqui de leitura só que todos eles convergindo para um bloco maior e mais importante de organização Tá certo

então são pequenos detalhes que a gente vai aprendendo a aplicar que eu espero que você comece a perceber a partir de agora que torna um projeto muito mais harmônico e muito mais bonito Beleza então a gente já pode seguir pra conclusão aqui que a finalidade básica da proximidade então é organizar as coisas beleza os outros princípios também ajudam na organização você vai ver principalmente o contraste ajuda muito na organização mas a proximidade é a que causa mais Impacto e a que o designer iniciante mais deve prestar atenção no começo beleza é por isso que ela

é a primeira regra porque a regra que o designer iniciante mais comete de erro porque ele sempre fica na noia de querer preencher tudo e deixar tudo muito junto não é o caso é na verdade o extremo oposto beleza e o que que você tem que evitar a todo custo dentro dessa regra é não coloque elementos nos cantos ou no centro só porque parece que tá vazio certo não fica com medo de áreas inv vazio evite muitos elementos separados em uma página evita separar muitas coisas sem uma organização lógica isso é importante também evite deixar

esse espaços em brancos do mesmo tamanho entre os elementos então repara que aqui tem espaços em brancos só que tem espaços em brancos em tamanhos variados repara que varia os espaços em branco Tá vendo como tem espaços em brancos diferentes Enquanto aqui por exemplo parece que tá tudo com o mesmo tamanho tá vendo os espaços em brancos existem só que tá tudo meio que no mesmo tamanho então não não se cria uma prioridade também e não crie relações entre elementos que não devem estar juntos então se um elemento não tem relação com com o outro

que tá na mesma página separa ele não deixa ele junto tá porque senão vai parecer que eles estão relacionados isso pode criar algum tipo de confusão pro leitor que tiver vendo a sua peça Beleza então basicamente Esse é o princípio da proximidade Espero que tenha esclarecido para você a gente vai ver mais desses exemplos de novo aplicados a outras regras aqui na próxima aula mas isso daqui é a parte canônica mais básica que eu espero que você tenha entendido a gente vai aplicar bastante esses princípios nos cursos de Photoshop ilustrator principalmente Mas agora você entendeu

qual é o primeiro princípio de proximidade Beleza então bora pra próxima aula