{"id":602,"date":"2019-05-29T11:47:04","date_gmt":"2019-05-29T14:47:04","guid":{"rendered":"https:\/\/fabianelima.com\/blog\/?p=602"},"modified":"2019-05-30T11:01:58","modified_gmt":"2019-05-30T14:01:58","slug":"design-editorial-e-linguagem-grafica-na-web","status":"publish","type":"post","link":"https:\/\/fabianelima.com\/blog\/design-editorial-e-linguagem-grafica-na-web\/","title":{"rendered":"Design editorial e linguagem gr\u00e1fica na web"},"content":{"rendered":"\n
\"\"<\/figure><\/div>\n\n\n\n

No design de interfaces gr\u00e1ficas, met\u00e1foras ajudam a orientar os usu\u00e1rios: atrav\u00e9s de s\u00edmbolos e a\u00e7\u00f5es, elas comunicam as fun\u00e7\u00f5es e os usos poss\u00edveis do programa a partir de analogias feitas com o mundo material. Assim, pictogramas de lixeiras sinalizam o diret\u00f3rio onde se pode descartar arquivos que n\u00e3o s\u00e3o mais \u00fateis, enquanto que pictogramas de lupas indicam a possibilidade de fazer pesquisas no conte\u00fado dispon\u00edvel. <\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

A maioria dessas met\u00e1foras funciona mais como \u00edndices<\/strong> das a\u00e7\u00f5es poss\u00edveis, pois nem sempre representam a realidade das a\u00e7\u00f5es dos seus significantes no mundo real. Elas apenas acrescentam uma camada a mais de abstra\u00e7\u00e3o no uso de dispositivos eletr\u00f4nicos. O uso literal de algumas dessas representa\u00e7\u00f5es pode ser tentador para o designer iniciante, mas tamb\u00e9m pode proporcionar uma experi\u00eancia de uso pior em ambiente eletr\u00f4nico, principalmente se esbarrar em alguma limita\u00e7\u00e3o da plataforma. Uma dessas met\u00e1foras tentadoras \u00e9 a do page flip<\/em> [1], que tenta simular o folhear de p\u00e1ginas de um c\u00f3dice impresso. O projeto de interfaces para web, no entanto, n\u00e3o precisa estar circunscrito ao formato de uma m\u00eddia que n\u00e3o comporta as suas caracter\u00edsticas.<\/p>\n\n\n\n

Isso n\u00e3o significa que o designer de interfaces n\u00e3o possa se valer das linguagens da m\u00eddia impressa \u2014 e do repert\u00f3rio e do conhecimento pr\u00e9vio dos usu\u00e1rios \u2014 na manipula\u00e7\u00e3o de outras m\u00eddias. \u00c9 preciso conhecer as possibilidades<\/em> da m\u00eddia para usar com sabedoria e criatividade essas ferramentas.<\/p>\n\n\n\n

No in\u00edcio dos anos 2000, muitas limita\u00e7\u00f5es \u2014 incluindo a\u00ed a menor capacidade de tr\u00e1fego de dados na rede e a falta (do uso) de padr\u00f5es de desenvolvimento influenciavam os projetos nos meios digitais, reduzindo as possibilidades de designers e desenvolvedores. Com o tempo, o design para web foi cada vez mais emprestando a linguagem da m\u00eddia impressa conforme o uso de imagens e novas tipografias foi se tornando poss\u00edvel.<\/p>\n\n\n\n

Essa viragem se deu a partir de meados da primeira d\u00e9cada dos anos 2000 e se consolidou em fins desse mesmo per\u00edodo, quando os designers gr\u00e1ficos come\u00e7aram a experimentar com a linguagem visual de seus blogs pessoais. Eu mesma participei desse movimento, me inspirando em outros blogs que tamb\u00e9m embarcaram na onda dos art<\/a> directed<\/a> blog<\/a> posts<\/a><\/em> [2] ou blogazines<\/em>.<\/p>\n\n\n\n

Infelizmente, na \u00e9poca, foi um recurso dif\u00edcil de manter: exigia a instala\u00e7\u00e3o de um plugin bugado desenvolvido por um \u00fanico programador e o projeto gr\u00e1fico levava muito mais tempo para ser constru\u00eddo, uma vez que exigia conhecimentos razo\u00e1veis de HTML e CSS. Al\u00e9m disso, nenhum designer est\u00e1 a fim de perder horas desenvolvendo layout para um conte\u00fado ruim, principalmente em se tratando de um blog pessoal com o objetivo de divulgar o trabalho desse designer. Isso levava-nos a s\u00f3 diagramar conte\u00fado especial de vez enquando, ou a criar uma folha de estilo mais simples para os posts sem tanta exig\u00eancia.<\/p>\n\n\n\n

Em fins da d\u00e9cada passada, essa linguagem come\u00e7ou a sair dos “guetos” das comunidades de designers e desenvolvedores e passou a ser adotada em mat\u00e9rias especiais de grandes ve\u00edculos de m\u00eddia. Isso culminou no chamado “Efeito Snowfall<\/a>“, por causa de um especial jornal\u00edstico hom\u00f4nimo<\/a> publicado em 2012, que influenciou jornais de todo o mundo [3] a publicarem conte\u00fado especial na web com o mesmo cuidado na linguagem gr\u00e1fica que esses conte\u00fados recebiam quando eram publicados nos cadernos impressos.<\/p>\n\n\n\n

Essa linguagem gr\u00e1fica, ainda que trabalhosa de ser aplicada pela vasta maioria dos usu\u00e1rios, influenciou e motivou o surgimento de novos servi\u00e7os. O usu\u00e1rio leigo agora pode ampliar as possibilidades de seus conte\u00fados com servi\u00e7os como o Medium<\/a> ou o editor Gutenberg<\/a>. Sem nenhum conhecimento de c\u00f3digo, \u00e9 poss\u00edvel usar os blocos compositivos dessas ferramentas para criar elementos tipogr\u00e1ficos tradicionais da m\u00eddia impressa, como por exemplo boxes, t\u00edtulos, gravatas, vinhetas e olhos. Mesmo os sites sem foco em conte\u00fado textual agora possuem ferramentas de constru\u00e7\u00e3o autom\u00e1ticas, que permitem a qualquer um desenvolver um site pessoal com aspecto profissional<\/em>.<\/p>\n\n\n\n

Em pouco mais de dez anos, o Estilo Tipogr\u00e1fico da web se desenvolveu e consolidou. Qualquer usu\u00e1rio em posse de uma conta em um servi\u00e7o de publica\u00e7\u00e3o de conte\u00fado pode ter acesso \u00e0s “manhas” de um designer, sem ter de recorrer a qualquer tipo de treinamento ou conhecimento pr\u00e9vio maior que o do uso de uma interface gr\u00e1fica, sem precisar apelar \u00e0 contrata\u00e7\u00e3o dos servi\u00e7os de um profissional. O designer que trabalha na web migrou para atividades mais espec\u00edficas e voltadas \u00e0s plataformas. E os blogs pessoais em plataformas independentes\u2026 o meu acho que continuar\u00e1 aqui por mais algum tempo. \ud83d\ude42<\/p>\n\n\n\n

\n\n\n\n

Este texto foi baseado nas reflex\u00f5es que apresentei em sala de aula<\/a> em 2018 na disciplina de “Webdesign” do curso de Tecnologia em Design Gr\u00e1fico da UTFPR.<\/p>\n\n\n\n

\n\n\n\n

Notas<\/h4>\n\n\n\n

[1] Caso voc\u00ea queira passar por esta n\u00e3o t\u00e3o agrad\u00e1vel experi\u00eancia de uso, clique aqui<\/a>. H\u00e1 quem argumente que possa funcionar em alguns contextos, como por exemplo<\/a> na visualiza\u00e7\u00e3o de documentos PDF. Mas a\u00ed eu argumento de volta que o PDF est\u00e1 mais pr\u00f3ximo do impresso que uma interface mais flex\u00edvel.<\/small><\/p>\n\n\n\n

[2] Note como alguns desses layouts n\u00e3o sobreviveram a mudan\u00e7as mais profundas que inevitavelmente acontecem ao longo do tempo em um site. O \u00fanico que manteve a mesma estrutura de quando foi publicado foi o do Jason Santa Maria<\/a>, que mant\u00e9m arquivos de vers\u00f5es separadas dos seus sites pessoais conforme eles foram mudando ao longo do tempo.<\/small><\/p>\n\n\n\n

[3] Na Gazeta do Povo, tivemos o nosso pr\u00f3prio Snowfall. Participei diretamente do projeto, mas infelizmente o especial agora est\u00e1 dispon\u00edvel somente atrav\u00e9s da Wayback Machine<\/a>. Levamos um Malofiej de infografia online por causa desse projeto em 2014, mas a pr\u00f3pria listagem da edi\u00e7\u00e3o do pr\u00eamio desse ano n\u00e3o est\u00e1 dispon\u00edvel no site<\/a>.<\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

No design de interfaces gr\u00e1ficas, met\u00e1foras ajudam a orientar os usu\u00e1rios: atrav\u00e9s de s\u00edmbolos e a\u00e7\u00f5es, elas comunicam as fun\u00e7\u00f5es e os usos poss\u00edveis do programa a partir de analogias feitas com o mundo material. Assim, pictogramas de lixeiras sinalizam o diret\u00f3rio onde se pode descartar arquivos que n\u00e3o s\u00e3o mais \u00fateis, enquanto que pictogramas … <\/p>\n

Continue reading “Design editorial e linguagem gr\u00e1fica na web”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":606,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[107,157,57,106],"class_list":["post-602","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-conteudo","tag-design-editorial","tag-internet","tag-web","entry"],"_links":{"self":[{"href":"https:\/\/fabianelima.com\/blog\/wp-json\/wp\/v2\/posts\/602","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fabianelima.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fabianelima.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fabianelima.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fabianelima.com\/blog\/wp-json\/wp\/v2\/comments?post=602"}],"version-history":[{"count":10,"href":"https:\/\/fabianelima.com\/blog\/wp-json\/wp\/v2\/posts\/602\/revisions"}],"predecessor-version":[{"id":615,"href":"https:\/\/fabianelima.com\/blog\/wp-json\/wp\/v2\/posts\/602\/revisions\/615"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fabianelima.com\/blog\/wp-json\/wp\/v2\/media\/606"}],"wp:attachment":[{"href":"https:\/\/fabianelima.com\/blog\/wp-json\/wp\/v2\/media?parent=602"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fabianelima.com\/blog\/wp-json\/wp\/v2\/categories?post=602"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fabianelima.com\/blog\/wp-json\/wp\/v2\/tags?post=602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}