Proximidade, noções básicas de design. [01/04]

─ ┄┄┄ ───   [ 𝗇𝖾𝗐 ოɑԍıɕ 𝗐𝖺𝗇𝖽 ! ]   ─┐

띦넌긘    +   ε♡з    🥝 :thought_balloon:   ⍺ℓℓ ოıꬻᧉ   𖦹 !      ★

⏜︵͡⏜⏜︵͡⏜⏜︵͡⏜⏜︵͡⏜⏜

(๑•́᎔ ก๑̀ )   ⡳   :tea:    𝗐𝗁𝗒 𝖼𝖺𝗇 𝗐𝖾?    ♡   ๑̈   ༄⃨

┄┄┄┄ ⊹ ┄┄┄┄ ★ ┄┄┄ ⊹ ┄┄┄┄

┄ ⊹    [ :house_with_garden: :thought_balloon: ]   +    𝖿𝗋𝗂𝖾𝗇𝖽𝗌, 𝗋𝗂𝗀𝗁𝗍?    깅꺵긳   🩹

꩜̤      ─ ❥      ı ოᧉ⍺ꬻ...    𝗂𝗇𝗍𝗋𝗈   ♡᤻᤻᤻ˀ   :tea: 🥢 ☆

︶͜⏝︶͜⏝︶͜⏝︶͜⏝︶͜⏝︶͜⏝︶͜⏝︶

⠀⠀⠀⠀⠀[🧺🗞] +   Olá, nesse blog irei comentar sobre os

⠀⠀⠀⠀⠀princípios básicos do design. Embora essas

⠀⠀⠀⠀⠀"regras" tenham serventia principalmente no

⠀⠀⠀⠀⠀desenvolvimento de sites, esses conceitos

⠀⠀⠀⠀⠀ajudam a dar ao design um ar mais organizado,

⠀⠀⠀⠀⠀profissional e bonito.

⠀⠀⠀⠀⠀Para não ficar muito maçante, vou separar o

⠀⠀⠀⠀⠀conteúdo em quatro partes. Nesse blog falaremos

⠀⠀⠀⠀⠀sobre proximidade.

⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀┄ ⊹   :thought_balloon: :house_with_garden:

┄ ⊹    [ :house_with_garden: :thought_balloon: ]   +    𝖿𝗋𝗂𝖾𝗇𝖽𝗌, 𝗋𝗂𝗀𝗁𝗍?    깅꺵긳   🩹

꩜̤      ─ ❥      ı ოᧉ⍺ꬻ...    Proxim.   ♡᤻᤻᤻ˀ   :tea: 🥢 ☆

︶͜⏝︶͜⏝︶͜⏝︶͜⏝︶͜⏝︶͜⏝︶͜⏝︶

⠀⠀⠀⠀⠀[🧺🗞] +   Já notou que quando iniciantes em

⠀⠀⠀⠀⠀design, costumávamos espalhar coisas

⠀⠀⠀⠀⠀aleatoriamente para preencher espaços? Como se

⠀⠀⠀⠀⠀tivéssemos medo de deixar um espaço em branco?

⠀⠀⠀⠀⠀Sendo seu caso ou não, quando fazemos

⠀⠀⠀⠀⠀isso deixamos um aspecto desorganizado,

⠀⠀⠀⠀⠀deixando informações espalhadas e às vezes

⠀⠀⠀⠀⠀incompreensíveis.

⠀⠀⠀⠀⠀[🧺🗞] +   Conceito de "Proximidade":

⠀⠀⠀⠀⠀Itens relacionados devem ser agrupados

⠀⠀⠀⠀⠀e visualmente próximos uns dos outros.

⠀⠀⠀⠀⠀Não entendeu? Vejamos o exemplo a seguir, uma

⠀⠀⠀⠀⠀lista de flores.

⠀⠀⠀⠀⠀Na lista à esquerda parece que as flores têm

⠀⠀⠀⠀⠀alguma relação entre si, certo? E na lista à

⠀⠀⠀⠀⠀direita? As três últimas flores parecem se distinguir

⠀⠀⠀⠀⠀das outras. Isso porque estão fisicamente

⠀⠀⠀⠀⠀separadas do resto da lista.

⠀⠀⠀⠀⠀Assim como na vida, proximidade implica relação.

⠀⠀⠀⠀⠀[🧺🗞] +   Agora vamos a outro exemplo, observe

⠀⠀⠀⠀⠀o cartão abaixo e conte quantas vezes seus

⠀⠀⠀⠀⠀olhos pararam (ou mudaram de direção) para

⠀⠀⠀⠀⠀obter uma informação.

⠀⠀⠀⠀⠀[🧺🗞] +   Pelo fato de terem cinco elementos

⠀⠀⠀⠀⠀independentes, seus olhos pararam cinco vezes.

⠀⠀⠀⠀⠀Mas por onde você começou a leitura?

⠀⠀⠀⠀⠀provavelmente pelo centro, a fonte está em

⠀⠀⠀⠀⠀negrito e é visivelmente maior, tem mais peso.

⠀⠀⠀⠀⠀E o que você leu a seguir?

⠀⠀⠀⠀⠀Nosso sentido de leitura normalmente é da

⠀⠀⠀⠀⠀esquerda para direita.

⠀⠀⠀⠀⠀O que aconteceu quando você terminou de ler?

⠀⠀⠀⠀⠀Seus olhos ficaram vagando para ver se não

⠀⠀⠀⠀⠀tinham perdido nenhuma informação?

⠀⠀⠀⠀⠀[🧺🗞] +   Estando minhas previsões certas ou

⠀⠀⠀⠀⠀não, o que temos que tirar desse exemplo é que,

⠀⠀⠀⠀⠀novamente, itens que dependem uns do outros

⠀⠀⠀⠀⠀precisam estar próximos. Vários itens próximos

⠀⠀⠀⠀⠀formam uma unidade.

⠀⠀⠀⠀⠀[🧺🗞] +   Quando formamos unidades damos

⠀⠀⠀⠀⠀um sentido certo à leitura, você sabe onde ela

⠀⠀⠀⠀⠀começa e termina. Não ficamos com a sensação

⠀⠀⠀⠀⠀de perda de informação.

⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀┄ ⊹   :thought_balloon: :house_with_garden:

┄ ⊹    [ :house_with_garden: :thought_balloon: ]   +    𝖿𝗋𝗂𝖾𝗇𝖽𝗌, 𝗋𝗂𝗀𝗁𝗍?    깅꺵긳   🩹

꩜̤      ─ ❥      ı ოᧉ⍺ꬻ...    𝗂𝗇𝗍𝗋𝗈   ♡᤻᤻᤻ˀ   :tea: 🥢 ☆

︶͜⏝︶͜⏝︶͜⏝︶͜⏝︶͜⏝︶͜⏝︶͜⏝︶

⠀⠀⠀⠀⠀[🧺🗞] +   É provável que você já use esse conceito

⠀⠀⠀⠀⠀inconscientemente, mas saber sobre ele faz com

⠀⠀⠀⠀⠀você obtenha um resultado geral melhor.

⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀┄ ⊹   :thought_balloon: :house_with_garden:

⠀⠀⠀⠀⠀ ⠀⠀⠀⠀⠀⠀ ⠀⠀⠀⠀﹫ 𝖼𝖺𝗉𝗈 on EA

⠀⠀⠀⠀⠀

est. por capo.

As   informações   foram   retiradas   do   livro:

Design para quem não é designer de Willian Robin.