{"id":261217,"date":"2024-03-10T06:36:00","date_gmt":"2024-03-10T03:36:00","guid":{"rendered":"https:\/\/inform.click\/quando-e-como-usar-o-minimalismo-no-design-do-site\/"},"modified":"2024-03-10T06:36:00","modified_gmt":"2024-03-10T03:36:00","slug":"quando-e-como-usar-o-minimalismo-no-design-do-site","status":"publish","type":"post","link":"https:\/\/inform.click\/pt-pt\/quando-e-como-usar-o-minimalismo-no-design-do-site\/","title":{"rendered":"Quando e como usar o minimalismo no design do site"},"content":{"rendered":"

\n Vamos primeiro tirar do caminho um equ\u00edvoco sobre o minimalismo. S\u00f3 porque h\u00e1 menos para ver n\u00e3o significa que seja mais f\u00e1cil. Na verdade, \u00e9 exatamente o oposto. Quanto menos voc\u00ea tiver, mais tempo precisar\u00e1 gastar para garantir que cada elemento que voc\u00ea tem esteja certo.\n<\/p>\n

\n Afinal, se voc\u00ea tiver uma interface lotada, se algo estiver alinhado ligeiramente \u00e0 esquerda do centro ou uma fonte que n\u00e3o seja ideal para o que voc\u00ea est\u00e1 usando, provavelmente nem ser\u00e1 notado entre os outros detalhes.\n<\/p>\n

\n No entanto, isso n\u00e3o ser\u00e1 verdade se voc\u00ea estiver usando um design minimalista da web, pois n\u00e3o h\u00e1 nada para o seu erro ou m\u00e1 escolha se esconder atr\u00e1s. Eles se destacam em detalhes gritantes \u2013 como um letreiro de n\u00e9on em uma casa japonesa. O que isso significa \u00e9 que, se voc\u00ea est\u00e1 apenas tentando montar uma p\u00e1gina, o minimalismo n\u00e3o \u00e9 o caminho a seguir. O minimalismo \u00e9 para os perfeccionistas, o obsessivo-compulsivo, o tipo de web designer focado no laser, que fica acordado at\u00e9 as tr\u00eas da manh\u00e3 para obter o t\u00edtulo certo. Se isso n\u00e3o \u00e9 voc\u00ea, ent\u00e3o n\u00e3o \u00e9 para voc\u00ea.\n<\/p>\n

\n Se for, continue a ler, continue a ler! Descemos pela toca do coelho.\n<\/p>\n

\n Espa\u00e7o negativo
\n<\/h4>\n

\n Vamos come\u00e7ar observando o que um site minimalista ter\u00e1 ao m\u00e1ximo – espa\u00e7o negativo, embora voc\u00ea possa conhec\u00ea-lo como ‘o plano de fundo'. Exceto, \u00e9 claro, que no design minimalista n\u00e3o est\u00e1 “de volta” de forma alguma. Em vez disso, est\u00e1 na frente e no centro, onde desempenha um papel vital, na medida em que manipula o fluxo visual do usu\u00e1rio.\n<\/p>\n

\n O poder do espa\u00e7o negativo \u00e9 que quanto mais voc\u00ea tiver dele, mais qualquer outra coisa que voc\u00ea tenha na p\u00e1gina aparecer\u00e1. \u00c9 por isso que os designers industriais costumam usar layouts minimalistas. Dessa forma, seus produtos, em vez de se desvanecer em todo o resto, receber\u00e3o a aten\u00e7\u00e3o que est\u00e3o procurando. E como \u00e9 isso que eles est\u00e3o tentando vender ou pelo menos exibir, isso torna essa abordagem altamente atraente para eles e para qualquer outra pessoa que tenha objetos est\u00e1ticos para mostrar, como designers de interiores e fot\u00f3grafos.\n<\/p>\n

\n O espa\u00e7o negativo pode ser uma ferramenta poderosa para criar um o\u00e1sis de calma, bem como para fazer com que os usu\u00e1rios n\u00e3o se sintam sobrecarregados. \u00c9 por isso que spas e centros de bem-estar costumam escolher esse tipo de layout.\n<\/p>\n

\n Observe que o espa\u00e7o negativo n\u00e3o significa que n\u00e3o h\u00e1 nada l\u00e1. Obviamente, o espa\u00e7o tem que ser preenchido com alguma coisa e, embora o branco seja uma escolha \u00f3bvia, est\u00e1 longe de ser a \u00fanica. Al\u00e9m disso, cores diferentes t\u00eam efeitos completamente diferentes nos usu\u00e1rios, portanto, gaste algum tempo fazendo a pesquisa. Uma coisa que gostaria de salientar \u00e9 que voc\u00ea n\u00e3o deve escolher uma cor muito saturada. Este \u00e9 um erro b\u00e1sico que muitos designers iniciantes cometem. O problema \u00e9 que pode ser bastante doloroso para os usu\u00e1rios, o que torna uma das grandes vantagens do minimalismo nula e sem efeito.\n<\/p>\n

\n Fotos
\n<\/h4>\n

\"\"<\/a><\/p>\n

\n Se apenas uma cor \u00e9 boa demais, \u00e9 claro que existe a op\u00e7\u00e3o de tirar uma foto de algum tipo. Claro, se voc\u00ea escolher uma imagem, certifique-se de que ela esteja de acordo com o esp\u00edrito de minimalismo que voc\u00ea est\u00e1 buscando. A imagem n\u00e3o precisa estar muito ocupada.\n<\/p>\n

\n Quero dizer isso de duas maneiras.\n<\/p>\n

    \n
  1. Obviamente, certifique-se de que a foto n\u00e3o esteja excessivamente cheia de objetos ou pessoas, pois isso prejudicar\u00e1 todo o prop\u00f3sito do seu design minimalista.\n <\/li>\n
  2. Isso n\u00e3o \u00e9 suficiente, no entanto, pois a implica\u00e7\u00e3o de movimento r\u00e1pido ou perigo \u00e9 capaz de atrair a aten\u00e7\u00e3o para a imagem e afast\u00e1-la do elemento principal que voc\u00ea est\u00e1 tentando exibir. Na verdade, at\u00e9 mesmo a demonstra\u00e7\u00e3o de uma emo\u00e7\u00e3o negativa pode distrair as pessoas do que voc\u00ea realmente quer que elas foquem.\n <\/li>\n<\/ol>\n

    \n Por isso, ao navegar por sites minimalistas, voc\u00ea ver\u00e1 muitas fotos com fundos muito neutros e est\u00e1ticos. Aqui est\u00e3o alguns grandes exemplos<\/a>.\n<\/p>\n

    \n Tipografia
    \n<\/h4>\n

    \"\"<\/a><\/p>\n

    \n Voc\u00ea pode cortar muitas coisas de sua p\u00e1gina minimalista, como uma barra de menu, bot\u00f5es de m\u00eddia social e an\u00fancios, mas uma coisa que voc\u00ea n\u00e3o pode prescindir s\u00e3o as palavras. Eventualmente, voc\u00ea vai precisar de alguns. Mas como apresent\u00e1-los? Voc\u00ea deve considerar com muito cuidado qual fonte voc\u00ea decide usar (e se voc\u00ea decidir fazer a sua pr\u00f3pria), especialmente porque diferentes fontes evocam diferentes emo\u00e7\u00f5es e diferentes estados de esp\u00edrito.\n<\/p>\n

    \n Por exemplo, fontes com serifa (aquelas em que os bits rabiscados se destacam abaixo e acima da linha) s\u00e3o lidas com mais flu\u00eancia do que fontes sem serifa e, portanto, s\u00e3o consideradas mais f\u00e1ceis de compreender. Da mesma forma, como as instru\u00e7\u00f5es s\u00e3o escritas em fontes mais limpas e leg\u00edveis (como Ariel, por exemplo) s\u00e3o vistas como mais compreens\u00edveis do que aquelas escritas em op\u00e7\u00f5es de fonte mais confusas e mais ocupadas, o que significa que essas instru\u00e7\u00f5es s\u00e3o consideradas mais f\u00e1ceis de executar.\n<\/p>\n

    \n Mas \u00e9 claro que a legibilidade n\u00e3o \u00e9 a \u00fanica coisa que precisa ser considerada, voc\u00ea tamb\u00e9m precisa pensar nas emo\u00e7\u00f5es que as fontes provocam. Sim, \u00e9 isso mesmo, fontes diferentes afetam as pessoas de maneira diferente, com tipos de fonte como Times New Roman mais frequentemente associados a emo\u00e7\u00f5es como ‘engra\u00e7ado' e ‘irritado' do que Ariel.\n<\/p>\n

    \n Eu avisei que o minimalismo n\u00e3o era para os fracos de cora\u00e7\u00e3o!\n<\/p>\n

    \n Outra coisa a considerar \u00e9 quais tipos de fonte voc\u00ea usa onde, pois obviamente n\u00e3o precisa usar a mesma fonte o tempo todo. E como n\u00e3o h\u00e1 mais nada para distrair seu p\u00fablico, se voc\u00ea usar estilos de fonte e tipografias diferentes, seu usu\u00e1rio ter\u00e1 muito mais chances de not\u00e1-los.\n<\/p>\n

    \n Essa pode, portanto, ser uma estrat\u00e9gia muito eficaz para fazer com que seu p\u00fablico preste aten\u00e7\u00e3o em \u00e1reas espec\u00edficas. Por exemplo, considere escrever o texto que voc\u00ea deseja que os usu\u00e1rios leiam primeiro em negrito, com tra\u00e7os grossos, enquanto as partes que devem ser notadas posteriormente escritas em fontes mais neutras. A aten\u00e7\u00e3o do usu\u00e1rio ser\u00e1 imediatamente atra\u00edda para o texto em negrito, enquanto o outro texto ser\u00e1 consumido posteriormente.\n<\/p>\n

    \n Contraste e Posicionamento
    \n<\/h4>\n

    \"\"<\/a><\/p>\n

    \n Uma das ferramentas mais poderosas dispon\u00edveis para um web designer minimalista \u00e9 o contraste. Se voc\u00ea quiser usar o contraste em seu melhor efeito, ter\u00e1 que optar por fundos de cores claras \u2013 o branco \u00e9 a escolha predominante, pois permite o melhor efeito. \u00c9 por isso que as p\u00e1ginas minimalistas costumam usar fundo preto sobre fundo branco, pois essas linhas r\u00edgidas s\u00e3o visualmente extremamente atraentes. Aqui est\u00e1 um bom exemplo<\/a>. Al\u00e9m do mais, o menor peda\u00e7o de cor, como um toque de amarelo, pode ser altamente eficaz. Pense no casaco da garota em A Lista de Schindler.\n<\/p>\n

    \n Um designer pode criar um contrato com muitas coisas diferentes, incluindo cor, forma, localiza\u00e7\u00e3o, escala e tamanho. Se usado corretamente, pode ser incrivelmente \u00fatil para levar o usu\u00e1rio \u00e0quelas partes em que ele deve prestar aten\u00e7\u00e3o primeiro (assim como expliquei em termos de tipografia acima, quando discuti textos em negrito versus textos mais neutros). N\u00e3o \u00e9 f\u00e1cil, por\u00e9m, e para utiliz\u00e1-lo da melhor forma \u00e9 necess\u00e1rio ter um entendimento b\u00e1sico de como os usu\u00e1rios consomem as p\u00e1ginas da internet.\n<\/p>\n

    \n Os estudos do movimento dos olhos nos deram uma grande vis\u00e3o sobre onde as pessoas olham primeiro, com elas geralmente come\u00e7ando no canto superior esquerdo e depois, dependendo se h\u00e1 muito texto ou n\u00e3o, escaneando a p\u00e1gina em um ‘F' ou um padr\u00e3o ‘Z', respectivamente.\n<\/p>\n

    \n Como sua p\u00e1gina minimalista n\u00e3o ter\u00e1 muito texto, voc\u00ea desejar\u00e1 organizar os aspectos mais importantes de sua p\u00e1gina em um padr\u00e3o tipo Z, com as coisas que seus usu\u00e1rios devem notar primeiro (voc\u00ea \u00e9 suas op\u00e7\u00f5es de menu) geralmente levando uma posi\u00e7\u00e3o mais no canto superior esquerdo da sua p\u00e1gina, enquanto as coisas que devem ser observadas posteriormente (por exemplo, suas reivindica\u00e7\u00f5es de direitos autorais) ficam mais abaixo e mais \u00e0 direita. Dessa forma, voc\u00ea far\u00e1 com que o consumo da sua p\u00e1gina seja mais fluente e natural.\n<\/p>\n

    \n O bot\u00e3o de hamb\u00farguer e outros layouts
    \n<\/h4>\n

    \"\"<\/a><\/p>\n

    \n A \u00fanica coisa que \u00e9 importante lembrar com o design minimalista \u00e9 que s\u00f3 porque n\u00e3o h\u00e1 muito para ver por p\u00e1gina, n\u00e3o significa que n\u00e3o haja muito conte\u00fado geral; na maioria das vezes, todas essas informa\u00e7\u00f5es est\u00e3o escondidas em submenus e p\u00e1ginas secund\u00e1rias. Uma maneira popular (embora controversa) de fazer isso \u00e9 por meio do que \u00e9 conhecido como ‘bot\u00e3o de hamb\u00farguer', ou as tr\u00eas linhas que voc\u00ea v\u00ea agora em todo o lugar, como no cromo no canto superior direito e no iPhone. E sim, se voc\u00ea tomou alguns drinques, parece um hamb\u00farguer (n\u00e3o inventei o nome).\n<\/p>\n

    \n Pessoalmente, n\u00e3o sou um grande f\u00e3, pois isso vai contra meus instintos minimalistas. Qual \u00e9 o sentido de criar uma p\u00e1gina organizada se voc\u00ea vai criar um menu confuso para navegar pelo resto do seu site? Para mim, uma estrat\u00e9gia muito melhor \u00e9 subdividir seu bot\u00e3o de hamb\u00farguer em v\u00e1rias op\u00e7\u00f5es de menu que sejam \u00f3bvias e facilmente compreendidas e que envolvam seus leitores, mas, em \u00faltima an\u00e1lise, depende de voc\u00ea.\n<\/p>\n

    \n Um fator importante a considerar quando voc\u00ea est\u00e1 pensando em criar v\u00e1rios itens de menu ou usar um bot\u00e3o \u00e9 a idade do seu p\u00fablico. Quanto mais velhos eles forem, menos familiarizados estar\u00e3o com esse design e, portanto, mais prov\u00e1vel que n\u00e3o encontrem seus submenus, o que pode tornar sua p\u00e1gina in\u00fatil. Ent\u00e3o, sua p\u00e1gina \u00e9 voltada principalmente para a gera\u00e7\u00e3o do mil\u00eanio? v\u00e1 em frente e use. Voc\u00ea atende aposentados? Provavelmente \u00e9 s\u00e1bio pensar novamente.\n<\/p>\n

    \n Estilo visual
    \n<\/h4>\n

    \"\"<\/a><\/p>\n

    \n E depois h\u00e1 como sua p\u00e1gina deve ser apresentada. Quando voc\u00ea decide escolher um estilo minimalista, voc\u00ea precisa escolher um estilo de layout e ficar com ele. Isso ocorre porque seu p\u00fablico come\u00e7ar\u00e1 imediatamente a fazer suposi\u00e7\u00f5es inconscientes sobre como sua p\u00e1gina da Web se encaixa e, se voc\u00ea violar essas suposi\u00e7\u00f5es, seus usu\u00e1rios sentir\u00e3o que sua p\u00e1gina est\u00e1 ‘bagun\u00e7ada' e ‘desorganizada'. Isso \u00e9 uma senten\u00e7a de morte para o minimalismo (e para a maioria das outras p\u00e1ginas tamb\u00e9m, verdade seja dita).\n<\/p>\n

    \n Por esse motivo, voc\u00ea precisa selecionar uma grade, que basicamente significa as colunas nas quais voc\u00ea dividiu sua p\u00e1gina, e ficar com ela. Quantas colunas voc\u00ea quer? Como ser\u00e3o espa\u00e7ados? Quanto espa\u00e7o negativo ser\u00e1 deixado entre eles? Todas essas s\u00e3o perguntas importantes que voc\u00ea precisa responder antes mesmo de come\u00e7ar a criar a p\u00e1gina.\n<\/p>\n

    \n A ideia aqui n\u00e3o \u00e9 que as imagens n\u00e3o possam exceder os limites dessas linhas de grade. Freq\u00fcentemente, as imagens se espalhar\u00e3o por toda a sua p\u00e1gina. Neste caso, o texto sobre a imagem apresentada abaixo dela estaria disposto nas colunas que voc\u00ea selecionou. Da mesma forma, se voc\u00ea tiver v\u00e1rias imagens em sua p\u00e1gina, elas devem seguir a grade que voc\u00ea criou para que sua p\u00e1gina pare\u00e7a limpa e profissional.\n<\/p>\n

    \n Vale a pena adotar o minimalismo?
    \n<\/h5>\n

    \n Isso honestamente depende do que voc\u00ea est\u00e1 tentando fazer (e, claro, do t\u00f3pico da sua p\u00e1gina). Se voc\u00ea est\u00e1 tentando reduzir seu trabalho, como j\u00e1 foi dito, o minimalismo n\u00e3o \u00e9 para voc\u00ea. Se, por outro lado, esse tipo de layout atrai voc\u00ea instintivamente e se encaixa no tipo de produto que voc\u00ea est\u00e1 promovendo, esse \u00e9 o caminho a seguir.\n<\/p>\n

    \n O problema \u00e9 que o minimalismo exige um conjunto de habilidades diferente do design padr\u00e3o, pois voc\u00ea n\u00e3o pode simplesmente usar pe\u00e7as comuns e encaix\u00e1-las para criar uma p\u00e1gina. Se voc\u00ea tentar fazer isso, vai acabar com algo que n\u00e3o \u00e9 visualmente atraente ou muito informativo. O pior, em outras palavras, dos dois mundos.\n<\/p>\n

    \n Em vez disso, voc\u00ea ter\u00e1 que gastar algum tempo aprendendo como subverter seus instintos b\u00e1sicos que voc\u00ea aprendeu em designs de p\u00e1ginas anteriores que voc\u00ea fez. Ent\u00e3o voc\u00ea ter\u00e1 que sentar e descobrir o que \u00e9 essencial para sua p\u00e1gina.\n<\/p>\n

    \n E voc\u00ea ter\u00e1 que lidar com contratos, tipos de fonte e fotos como nunca antes. \u00c9 quase como se voc\u00ea estivesse aprendendo uma nova linguagem de design. Isso pode ser dif\u00edcil.\n<\/p>\n

    \n O problema de aprender um novo idioma, no entanto, \u00e9 que ele faz voc\u00ea perceber coisas sobre seu idioma original que nunca havia notado antes. E isso \u00e9 igualmente verdadeiro com o aprendizado de web design minimalista. O pr\u00f3prio ato de tentar aprender a projetar dessa maneira far\u00e1 com que voc\u00ea perceba coisas sobre design que nunca soube antes.\n<\/p>\n

    \n E isso pode muito bem fazer todo o suor e trabalho duro valer a pena.\n<\/p>\n

    \n Esquecendo por um momento que as p\u00e1ginas minimalistas s\u00e3o simplesmente lindas, \u00e9 claro.\n<\/p>\n<\/p>\n

    \n Fonte de grava\u00e7\u00e3o: instantshift.com\n<\/div>\n","protected":false},"excerpt":{"rendered":"

    Vamos primeiro tirar do caminho um equ\u00edvoco sobre o minimalismo. S\u00f3 porque h\u00e1 menos para ver n\u00e3o significa que seja mais f\u00e1cil. Na verdade, \u00e9 exatamente o oposto. Quanto menos voc\u00ea tiver, mais tempo precisar\u00e1 gastar para garantir que cada elemento que voc\u00ea tem esteja certo. Afinal, se voc\u00ea tiver uma interface lotada, se algo estiver alinhado ligeiramente \u00e0 esquerda do centro ou uma fonte que n\u00e3o seja ideal para o que voc\u00ea est\u00e1 usando, provavelmente nem ser\u00e1 notado entre os outros detalhes. Isso n\u00e3o ser\u00e1 verdade se voc\u00ea estiver usando uma web minimalista\u2026<\/p>\n","protected":false},"author":1,"featured_media":149268,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[358,228,397,59],"tags":[],"class_list":["post-261217","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-entretenimento","category-livros-didaticos","category-projeto","category-web-e-wordpress-2"],"_links":{"self":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/261217","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/comments?post=261217"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/261217\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/media\/149268"}],"wp:attachment":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/media?parent=261217"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/categories?post=261217"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/tags?post=261217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}