Curso completo de Princípios de Design: Alinhamento

Fala turma! Sejam muito bem vindos a mais um episódio do nosso curso de Princípios de Design. E nessa aula a gente vai falar sobre o segundo princípio que é o cara o princípio do alinhamento.

Beleza? Então vamos direto aqui para a tela do computador. Então, para a gente poder usar como material de sabedoria para começar esse curso, tem mais uma frase muito pertinente da Robin Williams, que é o seguinte.

Designers novatos tendem a colocar texto e imagens na página onde quer que tenha espaço. Você já fez isso alguma vez? muitas vezes sem prestar atenção a outros itens da peça, o que cria um efeito de cozinha meio bagunçada.

Essa é uma coisa que a gente estava discutindo, inclusive na aula anterior, nessa nóia da gente querer preencher todo espaço que está disponível numa peça e nem sempre isso é necessário. Na verdade, a maioria das vezes é o oposto. A gente tem que usar o menos espaço possível para sempre deixar as coisas respirarem e a informação fica ainda mais clara.

Beleza? Então vamos dar segmento aqui. Então, o que a gente vai falar sobre essa lei do alinhamento?

Então? Que nada deve ser colocado de maneira arbitrária, arbitrária, na página. A gente não pode simplesmente decidir arbitrariamente colocar ou não coisas.

Então, cada item deve ter uma conexão visual com o outro elemento. Você precisa ter consciência que simplesmente não pode jogar as coisas na sua peça e esperar que eles façam sentido para o seu leitor. Não pode esperar que você vai simplesmente jogar as coisas e esperar que as pessoas entendam sobre o que você está querendo falar.

Então, quando os itens são bem alinhados em uma página, o resultado é uma unidade coesa, forte e que transmite a mensagem de forma clara e profissional. E é isso que a gente vai explorar bastante aqui, nesse princípio, que é um princípio que eu e todos os quatro em princípio, são extremamente importantes. Mas particularmente, o alinhamento é uma coisa que eu vejo muito comumente acontecendo de errado entre os alunos.

Tem sempre alguém mandando lá na nossa comunidade de alunos algumas coisas que estão erradas relacionadas a isso. Por isso que eu tô querendo explorar, tá? E é sempre bom te lembrar também que o material vocês estão na Academia de Criadores que você tem acesso aqui abaixo do vídeo, aqui na plataforma de alunos que você vai poder baixar essa apresentação para você também seguir aqui comigo.

Beleza? Muito bem ali, invisível, que conecta tudo. Embora você possa ter separado alguns elementos para indicar a não relação entre eles, que é o princípio da proximidade que a gente viu na aula anterior.

O princípio do elemento diz que mesmo os elementos estando distantes, eles fazem parte da mesma peça. Então parece ser um pouco contraproducente a gente imaginar que na aula anterior eu disse que a gente tem que separar os elementos. Só que nessa aula eu estou falando que você tem que beleza separar os elementos, há que manter eles de uma maneira coesa pra ele fazer sentido como uma peça única.

A gente vai explorar, eu vou te mostrar e você vai entender sobre o que eu estou querendo dizer aqui. Exatamente porque mesmo quando os elementos alinhados estão fisicamente separados uns dos outros, deve sempre haver uma linha invisível que conecta tanto o seu olho como a sua mente. Você vai entender esse exemplo a seguir que eu tenho para te mostrar aqui.

Então a gente vai usar o mesmo exemplo do cartão de visita do princípio anterior que a gente explorou. Só que agora a gente vai começar a dar uma analisada naquele primeiro exemplo do cartão que estava um pouco ruim, porque, repara, só tem cinco, tem cinco alinhamentos nessa página. Repara que parte do problema dele não ficar tão bom é que ele não está alinhado com nada.

Então, nesse pequeno espaço tem três alinhamentos diferentes que está para a direita, para a esquerda e para o centro. Então vamos lá, vamos, Deixa eu ilustrar para você de uma maneira mais simplificada. Então a gente vai pegar a nossa ferramente em que a gente tem esse primeiro alinhamento.

Certo? Que o alinhamento que está com a rua Galgos, que não da com o meu nome, que deveria pelo menos tem esse elemento junto que esse mapa despenteado deveria pelo menos tá alinhado com esse primeiro, mas não está. Então a gente tem esse segundo ponto aqui, né?

Tem esse cara que repara que está cortando, tem esse terceiro alinhamento, que já é o alinhamento da Academia de Criadores, certo, que é o nome. Tem o quarto alinhamento aqui, que é o elemento do telefone que não está alinhado com o São Paulo e tem o quinto elemento de São Paulo. Então repare que a gente tem cinco pontos de alinhamento aqui, certo?

E três tipos de três tipos de deslocamento, que é um deslocamento pra esquerda, certo? Um deslocamento para direita e o deslocamento ao centro, que é o da Academia de Criadores. Esse é o tipo de coisa que a gente vai explorar pra entender e aprender como não cometer esses tipos de erros.

Nessa aula, vamos seguir aqui. Então repara só, eu peguei esse primeiro cartão de visita que tá ruim, não tá legal esse exemplo do cartão de visita e agora eu converti ele em dois modelos que ficaram muito melhores que o primeiro que o alinhamento totalmente à direita. Repara que agora a gente tem não mais aqueles cinco pontos de elementos, mas agora somente um ponto de alinhamento.

Aqui, beleza que tem a Academia de Criadores, tudo numa ordem lógica. Então, se eu simplesmente passar todos os elementos para a direita, a informação fica imediatamente mais organizada, porque agora fica claro para ler, fica simples de se ler. Ou também a gente pode criar um alinhamento ao centro, como foi o caso que eu te mostrei na aula anterior também.

Então, aqui o texto foi alinhado ao centro. Embora seja um elemento que funciona, você não vê realmente a força da linha, então o alinhamento ao centro é o tipo de alinhamento que eu digo para você pode usar, mas com bastante parcimônia, com bastante cuidado, porque embora tenha o alinhamento claro e que funcione sim, ele não tem tanta força, ele não fica tão claro para o leitor como, por exemplo, um alinhamento que está esse à direita. Tá vendo que fica mais fácil de ser observado e ser percebido?

Vamos seguir aqui para você entender melhor. Embora o alinhamento centralizado geralmente funcione, ele pode parecer um pouco fraco na maioria dos casos. Se o texto estiver alinhado à direita ou à esquerda, a linha invisível que conecta os elementos será muito mais forte.

Repare que tem esse alinhamento aqui, certo? E ele está funcionando. Só que é indiscutivelmente, indiscutivelmente mais claro o alinhamento num caso desse que está à direita.

Tá vendo? Então esse tem a mesma lógica de organização do cartão ao lado. Ele tem a mesma lógica de elementos.

Dois, com princípio de alinhamento aplicado, só que com o alinhamento à direita você consegue ver se consegue ver que a borda fica bem mais clara e bem mais evidente. À direita. Então, há uma forte linha invisível ligando as margens desses dois grupos de texto.

A força dessa imagem é justamente o que dá força a todo esse layout e por isso que eu destaquei essa mensagem aqui para você nessa aqui. Nesse caso, que a força dessa imagem é justamente o que dá força todo o layout, então geralmente bons layouts estão sempre alinhado ou para direita ou pra esquerda. Em alguns casos o alinhamento ao centro também funciona, mas geralmente a direita ou a esquerda fica muito mais fácil de ser lido, porque já é o que o ser humano naturalmente se comporta no seu processo de leitura, certo?

A gente tem mais coisa pra explorar aqui, então você tende a centralizar tudo. O elemento centralizado é o mais utilizado e o mais utilizado pelos iniciantes. Se você faz parte desse grupo, não se preocupe, porque eu já tive nesse grupo também no passado, porque ele parece confortável e seguro e realmente é porque ele funciona e ele faz parte do princípio.

O elemento centralizado cria um visual mais formal, sereno, mas como é claro, também mais tedioso. É por isso que eu tento te encorajar a parar de ficar utilizando esse tipo de alinhamento ao centro. Observe e observe designes que você gosta.

Garanto que eles não estão centralizados e passa uma pegada de mais sofisticação. Repara, tenta navegar na internet, pausa essa aula e tenta navegar e procurar por designers que você curte. Provavelmente todos eles tem e terão algum alinhamento para direita, para esquerda e provavelmente quase nunca ao centro.

Beleza, eu sei que é difícil no início você se render a você, não se render ao centro porque é confortável e seguro, só que tenta se esforçar a usar um alinhamento à direita e à esquerda e você vai ficar impressionado com o resultado que você vai alcançar no seu design, certo? É muito comum. De novo, repito, que os alunos iniciantes tendam a criar suas peças, seus flácidos, suas áreas pra mídia, esses conteúdos no Photoshop.

Não mostrei tudo, tudo centralizado, porque ele é seguro, ele é confortável. Só que ele passa uma mensagem de muita formalidade que na maioria dos casos não é o ponto de necessidade, certo? Então vou te dar um exemplo aqui ó, a típica capa de relatório.

Não dá para ser um exemplo mais chato como esse e é para você ver como é bom você se prender a um alinhamento a direita ou à esquerda. Então, o típico o que o designer típico faria seria colocar um texto normal, com tamanho padrão, plano de negócio para novos empreendedores, tudo centralizado. Deixa eu trocar aqui para você ver de novo.

Tudo centralizado. Tá vendo no blocão aqui, só que tudo centralizado, mas, mas aqui num design corajoso. Agora a gente passou para um deslocamento toda esquerda e trabalhou melhor com texto.

Então eu pus esse texto aqui para deixar bem claro ou se misture na manada, simplesmente fazendo mais do mesmo. Se você quer ser só mais um designer sem graça, sem muito impacto, sem muita mensagem que não transmita muita força no que você faça, é só você entrar na manada e fazer mais do mesmo, certo que é sempre uma parada ao centro, que você não precisa nem ser designer, você pode ser o funcionário da empresa que está criando uma capa de relatório como essa. Se você simplesmente centralizar o centro, você vai ser só mais um funcionário.

Enquanto num design corajoso como esse, você já se porta como uma pessoa mais profissional, tá? Então, eu gosto do exemplo da capa do relatório para ilustrar como é fácil você parecer amador e até mesmo colocar a qualidade do seu trabalho em dúvida, simplesmente criando uma capa com o elemento ao centro. Uma pessoa que pega um relatório como esse do que será que ela vai estar esperando desse relatório?

Quase nada. Só vai saber, só vai sentir que vai ser mais do mesmo. Mais um relatório no meio de todos os outros.

Enquanto se uma pessoa pegar um relatório com esse tipo de alinhamento aqui, aí a pessoa pára Opa, pera aí, tem alguma coisa diferente? O sentimento passa disso. Então, por outro lado, com um forte elemento à esquerda, veja como o relatório já fica com uma impressão mais sofisticada e mais profissional, mesmo com o nome da autora aqui embaixo.

Repara só você ainda percebe a relação dela com o conteúdo por conta do elemento invisível que liga os dois blocos que o elemento invisível que é esse, vou te mostrar aqui. Repara só, ele está aqui. O alinhamento é visível, parecendo que está vendo como o elemento está perfeitamente harmônico entre o plano da parte de cima, como da parte de baixo, o que é muito comum acontecer nesses casos que eu vejo de alunos e o aluno criar um alinhamento aqui, mas não prestar atenção e errar no alinhamento.

Aqui embaixo tem ferramentas no Photoshop, Illustrator que eu vou te mostrar nos cursos que dá para criar esse elemento, pra não correr o risco de você alinhar errado, às vezes puxar uns dois cinco pixels para lateral e que fica fora do alinhamento. Uma pessoa tem o visual um pouco mais treinado, acaba percebendo, certo? Então no nariz, nos curso de Photoshop, eu vou te mostrar como é que você faz isso de uma maneira bem fácil para você não cometer esse tipo de erro que é bem comum de se ver em trabalhos de iniciantes.

Beleza, então a gente pode seguir para outros exemplos. Aqui a gente não precisa necessariamente se prender a quebra da direita e esquerda, só que padronizar tinha. Então, outro exemplo de papéis timbrados e as tantas opções de design que esse modelo oferece.

Papel timbrado é uma coisa maravilhosa que dá pra fazer tanta coisa legal com papel timbrado, né? Então seja corajoso, seja corajoso, seja usado no seu design. Agora que você conhece o princípio do alinhamento, certo?

Então repara, tem esse antes, que é o clássico do que a gente já costuma ver, que é o clássico do alinhamento ao centro. Repara que tem um elemento forte que é o centro, mas agora repara que no depois da versão um a gente tem um alinhamento aqui à esquerda padrão e já cria um aspecto diferente pra esse papel timbrado. Mas também também tem esse outro tipo de alinhamento aqui, que pode ser um alinhamento à direita, só que um alinhamento que não fica realmente ao canto, mas ele joga as peças para o lado, ou essa versão três, que é o elemento à direita aqui, só que tudo jogado para a direita com a imagem do chefe com desfoque.

Mas aqui no fundo tá vendo? Tem tantas formas de se testar, tem tantas formas de de se brincar, então dá para se experimentar se experimentar coisas diferentes o tempo inteiro. Aqui no design é só você tomar um pouco de cuidado.

É conhecer algumas referências legais aqui. Durante o curso a gente vai ter uma aula que é sobre dicas, essas de criatividade, diagramação. A gente vai chegar nela em breve, mas aqui já são maneiras que dá pra eu te apresentar de uma maneira simples.

Como você pode também trabalhar com os elementos de uma maneira um pouco diferente, tá? Vamos seguir aqui. Vamos falar um disclaimer importante para você tomar um café tomar importante Pessoal, eu não estou sugerindo que você nunca deva centralizar nada.

Você nunca vai me ouvir falar que você nunca deve centralizar nada. Eu só estou apenas te alertando pra você ter consciência do efeito que o alinhamento centralizado tem. Beleza é o visual que você quer criar.

Um visual centralizado? Sim, Então manda ver, Seja feliz! Para alguns casos funciona, certo?

Por exemplo, casamentos e convites de casamento geralmente são eventos formais e a formalidade denota um alinhamento ao centro. Então centraliza e seja feliz. Ou às vezes um notificado talvez extrajudicial e sei lá o quê de advogado.

OAB Às vezes você quer a formalidade no documento que você está criando, então você pode centralizar, sendo feliz, Mas tenha consciência de quando você está fazendo isso e as causas e os efeitos que isso gera para o seu design. Beleza, Então você nunca vai me ver falando pra você não centralizar nada ao centro, mas tenha em mente dos efeitos que ele causa. Legal que agora a gente pode prosseguir aqui.

Opa, me perdi aqui. Beleza, Agora vamos falar um pouco mais sobre textos Que textos é um fator muito importante do alinhamento. Eu imagino que você já esteja acostumado a trabalhar com alinhamento de texto.

Provavelmente você já faz isso nos seus projetos, mas ah, mas até você tem mais prática. Siga minha orientação de usar um único tipo de alinhamento na página. Beleza?

O texto deve estar toda esquerda, toda direita ou todo ao centro. Então, só para você entender de que tipo de alimento eu estou querendo dizer, esse aqui é um alinhamento todo a esquerda repara que ele está todo deslocado para cá. Beleza, todo deslocado, vem para cá.

A gente tem todo um alinhamento, o elemento que pode ser todo a direita. Então repara que a gente tem o alinhamento aqui e ele está bem deslocado para cá e a gente tem o clássico alinhamento ao centro, certo? Então, se eu travar aqui o relógio, repara que está tudo alinhado ao centro aqui nesse conjunto.

Então tem basicamente esses três tipos de alinhamento de texto que a gente vai está utilizando, que você vai utilizar nos seus projetos toda a direita, de esquerda ou todo o centro. Mas sempre se apegue a um tipo de elemento somente por página que você for criar. Evita de colocar dois tipos de elemento que por exemplo, 1A1 à direita e um todo à esquerda.

Não que não possa pode fazer. Eu vou te dar exemplos mais adiante, mas você que é iniciante, você corre menos risco de errar quando você faz só um tipo de elemento no seu projeto. Beleza?

Então vamos lá para você. Entendeu? Tem como usar dois elementos na mesma página?

Tem certo. Às vezes pode ser que dê certo. Há dois tipos de alinhamentos na mesma página.

No entanto, ainda assim você precisa alinhá los de alguma forma. Então, por mais que você tenha um tipo dois tipos de alinhamento no seu projeto, você tem que ter consciência que você precisa alinhá los de alguma forma. Então repara nesse antes e esse antes.

A gente tem o títulos que estão alinhados, mas a descrição ficou centralizada, então a gente tem os títulos aqui que está alinhada à esquerda, mas a descrição ficou ao centro. Tá vendo? Repare que não existe um elemento em comum entre os dois textos, ou seja, não fica realmente claro que existe uma ligação entre esses textos.

Repare que a gente tem um peso muito grande de forma aqui nesse canto. Ele está puxando o elemento todo para a esquerda aqui e está desbalanceado. A peça, porque tem um tantão de coisa que não ficou simétrico nesse lado.

Tá vendo? Então, isso é o tipo de erro comum que se que ocorre aqui com os nossos projetos é que você tem que tomar cuidado para evitar que aconteça com você, enquanto nesse depois aqui. Repare que eu mantive o alinhamento a esquerda para cá, só que na descrição eu joguei o alinhamento para a direita.

Então veja que embora ainda haja dois tipos de alinhamentos, a linha que separou o título criou uma margem imaginária que seria o contexto abaixo, deslocando à direita. O que tu queria dizer com isso? Repare que aqui eu tenho tanto então o meu alinhamento à esquerda como à direita, certo?

Só que agora eles tem essa linha de base que unifica todo o conjunto numa parada que está parecendo um bloco. Tá vendo? Então é esse tipo de coisa que você tem que ficar atento.

Por isso que eu desmarquei bem as linhas para ficar claro, para você compreender. Então, mesmo que você tenha dois tipos de alinhamento no seu projeto, eu só peço que você alinhe os de alguma forma. Mesmo assim, então funciona muito bem o alinhamento direito com a esquerda.

Como está esse caso? Você criando uma linha de base, você vai ver que sempre a linha de base vai ajudar a equilibrar, equilibrar o design sempre evita usar um elemento aí a direita com o centro ou esquerdo com o centro, que geralmente é mais difícil de fazer funcionar bem. Tá certo?

Então vamos prosseguir aqui, no próximo, aqui então, de novo, repetindo uma regra canônica e básica, que é o seguinte nada deve ser colocado de maneira arbitrária, arbitrária no seu projeto. Quando você coloca outros itens na página que não sejam necessariamente textos, você ainda deve alinhá los de alguma forma. Eles, seja com suas bases, com blocos, entre os elementos gráficos ou qualquer outro tipo de coisa que traga alguma unidade entre eles.

Então, de novo, eu peguei um exemplo super chato, que é um diagrama elétrico. Que cara, eu vou ser muito feliz de ter um aluno que é eletricista. Talvez, e que consiga usar isso na prática no seu dia a dia, porque eu vejo que isso é muito comum.

Eu fui técnico por muito tempo antes de eu virar designer gráfico e então eu convivia com esse tipo de situação frequentemente. Mas repara que mesmo quando a gente está falando de um diagrama elétrico sem graça como esse daqui, ainda assim a gente precisa melhorar as coisas, trazendo um elemento claro para o conjunto. Por quê?

Repare que às vezes você pode achar que está confortável esse design porque a gente criou esses blocos visuais aqui, não é mesmo? Então a gente tem o primeiro, segundo e o terceiro bloco aqui. Só que repara que não existe um alinhamento entre eles necessariamente.

Esse é o problema, tá vendo? Não tem o alinhamento desse cara. Por exemplo, com esse cara aqui ou desse, desse com esse daqui.

Tá vendo? Não tem um alinhamento. Lógico que tem esse tipo de coisa que a gente tem que tomar cuidado.

Repara só o que a gente pode fazer para melhorar. Então, alinhar os conjuntos põe tudo na mesma coluna. Olha só como fica mais bonito o design.

Olha como a gente inseri uma linha lógica para cá e uma linha lógica para cá. Já muda o conjunto. Deixa o relógio pra você ver de novo.

A gente tem um elemento aqui, um elemento aqui e pronto. Olha como fica mais harmônico. Então, em qualquer peça com bom design, é possível desenhar linhas imaginárias entre os objetos.

Começa a pegar os designers que você já criou, os que o que você for criar daqui por diante e tenta criar linhas imaginárias, como é o caso do que eu criei aqui. Vê se existe uma correlação. Se não tiver, provavelmente tem alguma coisa errada.

Cuidado Quando colocar as peças de forma arbitrária, você pode errar facilmente. Repare como é fácil errar num caso desses, porque a gente acha que a gente está seguro por causa desses blocos. Aqui, não é mesmo?

A gente acha que a gente não tem que alinhar nada porque a gente já tem blocos e não é verdade. A gente tem que tomar cuidado e você não precisa entender de eletrônica para fazer uma boa distribuição dos elementos. Você não precisa ser um ótimo eletrônico para distribuir os elementos, porque repara que eu trabalhei com os blocos aqui, mas eu também trabalhei com as unidades.

Repara que eu tive um trabalho com cuidado também, mais interno. Então a falta de elemento é de longe a maior causa de um visual desagradável em documentos. E a coisa mais comum que a gente vê aí é empresas em instituições, que é a falta de cuidado com a diagramação de seus próprios documentos.

Então, para você no seu dia a dia, você vai ver que você que está passando a utilizar bastante esse tipo de coisa e você vai ver que sua credibilidade no serviço vai aumentar simplesmente para aplicar um princípio simples desse, que é no caso do alinhamento. Beleza? Então, seguindo o sitio o sutil problema do alinhamento, eu trouxe esse exemplo aqui, porque cara, isso daqui é uma beleza para a gente errar é uma beleza porque parece que não tem como melhorar uma parada que é complicada como essa de fazer um panfleto, né?

Então, o problema de muitos designers iniciantes é com a falta sutil de alinhamento com os títulos, subtítulos centralizados e parágrafos com recuo. O que você vê de errado então, com essa página? Fazendo um disclaimer rápido aqui, pessoal, que eu vejo também que a galera costuma errar bastante e tem dois temas que as pessoas misturam que é designer e designer.

O designer é o que você cria. Você não é designer, você é designer. Pode parecer absurdo, é só que tem muitas pessoas que falam ah, eu sou designer, não existe, eu sou designer.

Design é uma peça, é uma criação. Você é um designer que cria designers para os seus clientes? Então é uma coisa aí, porque eu vejo que tem muitos alunos que acabam cometendo esse e o que é uma coisa trivial, às vezes, às vezes você sabe, mas se você não sabe ainda fica com esse ponto de atenção, porque eu sempre fico mencionando designer e designer o tempo todo e são coisas bem diferentes, então cuidado pra não misturar.

Então continuando aqui o Repara só, essa é uma situação mais comum que você pode imaginar, certo? Então a gente tem os títulos aqui, estão centralizados, o texto tem elemento à esquerda e os parágrafos tem recuo de máquina de escrever. Então vamos lá para ilustrar para você ver melhor.

Repara, os títulos aqui tem uma centralização entre ele. Opa, deixa lá em casa, peça por essa forma. Tem o centralizar a centralização no título.

Repara que eles estão centralizados, certo? Agora a gente tem uma alinhamento à esquerda pro texto. Então a gente tem o alinhamento à esquerda do texto aqui.

Repara, já que está bem marcado os elementos do texto, mas tem o recuo de máquina de escrever, Então vamos lá. O recuo de máquina de escrever isso que é o que geralmente a primeira, a primeira palavra do bloco de texto. Geralmente a gente desloca ele para a direita.

Tem uma coisa importante que eu tenho que destacar para vocês sobre certo é a imagem, certo? A ilustração está centralizada em uma coluna. Repara que tem o alinhamento centralizado na coluna, então ele centraliza junto com o título a imagem também.

Então ela tem o centro da coluna, então a gente tá uma bagunça. Esse projeto a gente precisa melhorar ele, certo? Todas essas pequenas falhas de alinhamento fazem com que a página pareça extremamente bagunçada e é o tipo de coisa que a gente tem que tomar cuidado para fazer, porque é muito comum da gente errar.

Então vamos seguir pro próximo caso aqui. Repara só o que a gente fez de medir de melhoria nesse ponto. Encontre um elemento forte e prenda se a ele.

Então é uma regra básica quando você tem muito texto, encontre um elemento forte na sua página e se prenda a ele. Então, no caso, eu disse tem um elemento forte à esquerda. Então, se o texto tem um elemento à esquerda ali, os títulos e subtítulos e os subtítulos também na esquerda.

Então repara só que agora tá tudo alinhado. A esquerda tá vendo? Agora a gente organizou muito melhor o projeto.

O recuo nos parágrafos é coisa de máquina de escrever. Hoje em dia não precisamos mais isso para saber quando se inicia um novo parágrafo, especialmente quando a gente tem uma boa diagramação, então acaba com esses recuos. Repara que aqui não tem o recuo da primeira palavra, então tem que ficar atento também essas coisas, porque tem gente que até hoje que eu vejo que fica querendo recuei.

Parágrafo é a coisa tipo de coisa que não precisa. A gente não tá em 1800, então não precisa mais disso. É coisa.

A gente faz uma boa diagramação, resolve qualquer tipo de problema de legibilidade, certo? Se houver fotografias ou imagens, há linhas em uma margem ou linha de base. Então, no caso da imagem aqui, eu também alinhei na linha de base.

Só que repara que também dentro do bloco ela também está alinhada. Você está vendo como tem o elemento no bloco? Esse é o tipo de coisa que a gente tem.

Fica atenta e a gente faz um elemento bem melhor, bem mais homogêneo para o projeto, tá. E um disclaimer importante é que eu deixei errado aqui só para você ficar atento e deixe a margem direita o mais suave possível. Então palavras curtas na direita pode soar deslocadas como o restante do texto.

Repare que às vezes, no final do texto, a gente tem uma palavra como eu, certo? Deixa marcar outras aqui pra você ver. Tem esse eu aqui, esse em mim e esse cede às vezes, pode ser?

Tá vendo? Aqui está colorindo um texto em latim padronizado, só pra a gente poder preencher texto certo que eu não quero que você fique se distraindo com texto necessariamente. Repare que essas palavrinhas que ficam soltas no final, às vezes ficam com a sensação que estão deslocadas.

Então, nesses casos, dentro do Photoshop, Illustrator também. De novo, eu vou estar te mostrando como é que você desloca esse bloco de texto para esses essas letrinhas não ficar parecendo certo. Ou você simplesmente pode dar um backspace no seu teclado, que daí você quebra essa linha para baixo, que daí você evita de trazer uma sensação de falta de elementos simplesmente por causa de uma forminha como essa.

É um ponto de atenção importante. Então repito novamente se prenda a uma linha forte. Esse é o seu melhor amigo no alinhamento certo?

Procure no seu design a presença de uma imagem, uma lateral marcante, tá? Existe uma linha forte na margem esquerda no texto ou uma linha forte na esquerda da imagem? Se prenda a ele.

O pontilhado rosa ajuda nessa visualização, mas entre o texto e a imagem existe uma zona branca que está presa entre os espaços. Repara só que esse nosso. Antes que eu peguei aqui o exemplo do Padre Pio, certo?

Repara que tem um textão aqui que a gente tem esse conjunto, só que olha como tem ar em branco presa nesse conjunto, tem muita em branco presa que isso não pode acontecer de jeito nenhum, certo? A gente tem que também tem que tomar cuidado com esse, com esse conjunto também, porque quando existe áreas vazias presas entre elementos, isso acaba afastando ainda mais os elementos entre si. Esse elemento três que eu tenho destacado aqui, ele separa ainda mais o conjunto da imagem do Padre Pio, certo?

E esse alinhamento aqui não tem elemento com nada. Então também é o tipo de coisa que a gente tem que ficar atento. Como a gente pode fazer para melhorar essa peça.

Então, no próximo exemplo, repara só como que melhora agora? Simplesmente a gente se prendendo a um alinhamento marcante e forte, certo? Então, linhas fortes aproximando as cria um ótimo senso de proximidade e alinhamento.

A gente tinha. A gente já tinha esse alinhamento forte do próprio bloco de imagem daqui do Padre Pio. Então por que não a gente deslocar todo o texto também para a direita, como foi o caso?

E a palavra dele também aqui. Repare que a gente cria um alinhamento forte, único, coeso, que alinha todo o espaço em branco, agora deixando todo espaço em branco livre vazando pelas laterais. Repara só que agora a gente tem tudo vazando pela lateral.

Não tem nada preso. Esse único espaço em branco que está aqui cria uma coluna poderosa, com visual mais marcante. Olha a diferença desse tipo de alinhamento, certo?

Para esse tipo de elemento. Olha como passa mais profissionalismo, mais austeridade ao projeto, simplesmente a gente fazendo um ajuste que parece trivial como esse. É por isso que o alinhamento é um grande amigo.

É por isso que quando a gente tiver diagramas e blocos, quando você repara que tem uma linha marcante no seu design, no seu projeto que você tá montando como uma imagem como essa, se prenda nela, cria ela e evita esses tipos de áreas em branco que ficam presas entre os elementos. Tá certo? Então é uma ótima dica que te ajuda muito e no finalzinho aqui ainda, pois uma linha de base que unificou ainda mais o conjunto para criar esse senso de bloco mesmo.

Repara que agora ele tem essa linha de base, cria um bloco aqui, daí também dá para alinhar com o nome dele aqui no conjunto. Cara, eu acho que é um exemplo prático bem interessante de se ver. Como que dá para melhorar uma coisa que parece que não dava pra se melhorar é o exemplo de igreja.

No caso aqui eu vejo que é muito comum em frases de igreja isso acontecer. Um erro muito comum que eu espero que se você estiver fazendo um trabalho voluntário social, ir pra igreja que você não como esse tipo de eu tá muito bem, então. Conclusão a finalidade básica do alinhamento é unificar e organizar, certo?

Essa finalidade básica do alinhamento. O princípio básico é o mesmo de quando você recolhe os brinquedos bagunçados do seu filho ou do seu cachorro da sala e coloca dentro de uma caixa certa. É basicamente o mesmo princípio.

Às vezes o Guilherme e a Elisa bagunça tudo aqui em casa e a gente tem que juntar tudo na caixa pra dar respiro pra gente ver que está tudo organizado pra ver que as áreas da sala estão mais harmônicas mesmo. Então geralmente você aproveita uma linha forte do design e se prende a ela para fazer um visual sofisticado, formal, divertido ou sério, dependendo da diretriz que você estiver tomando com o seu a sua peça de criação, certo? E o que você deve evitar a todo o custo?

Mais um tipo de alinhamento de texto para a mesma página tenta evitar, especialmente no começo. Mais pra frente, quando você tiver domínio dos princípios. Daí você pode fugir deles, experimentar coisas novas, mas inicialmente tenta se prender somente a um tipo de elemento, prender áreas em brancos entre elementos.

Isso separa ainda mais eles entre si. Cuidado com ele com elementos que estão presos a áreas em branco que estão presas. Se você identificar que tem elas, tenta dar um jeito de soltá las pra elas não ficar com a sensação de preso, tá?

E elemento centralizado cria uma vibe formal. Use com consciência dos efeitos que ele traz. Não estou dizendo de novo que você não deve centralizar as coisas, mas quando centralizar, saiba o porquê você está fazendo isso.

Beleza é jogar os elementos de forma aleatória na página. Geralmente não dá certo, então toma cuidado com o tipo de coisa que você está jogando na página. Saiba alinhar as coisas de uma maneira intencional e lógica.

Beleza. Com isso a gente explora. Então termina a exploração do princípio dois em alinhamento.

Espero que ele te ajude também aí no seu designer. Bora para o próximo princípio.