Me faça Pensar

PROJETO FINAL DE GRADUAÇÃO

LUCAS LUZ

PUC-Rio / Departamento de Artes e Design 2017-2 PROJETO FINAL DE GRADUAÇÃO POR Lucas Luz

ORIENTADORES Izabel de Oliveira Luiz Ludwig Roberta Portas

SUMÁRIO

06

Introdução

08 09

PROCESSO DE HOMOGENEIZAÇÃO UX

11

Templates

12

Características da homogeneização

32

OS EXPERIMENTOS

34

Tipografia

40 Botões 48 Estrutura 56 Janela 62 PARÂMETROS TÉCNICOS 63 Escolhas como designer

16 17 19

O PENSAMENTO NO MEIO DIGITAL Livro – Não Me Faça Pensar Manifesto

64 Webflow 66 Especificações 72 Unidade gráfica entre os experimentos 62

20

SITE

21

Conceitos

24

Primeiros estudos

26

Estrutura do site

30 Estrutura dos experimentos

CONCLUSÃO

44 Referências bibliográficas 78 Lista de figuras

6

INTRODUÇÃO

INTRODUÇÃO | 7

O avanço acelerado das tecnologias vêm transformando os meios de comunicação, afetando o nosso dia-a-dia.

Esse fato muda a forma com que vemos os objetos no mundo e também a maneira como o designer trabalha.

Boa parte dessas mudanças decorrem da forte presença da internet, que transformou a maneira como nos comunicamos, consumimos e temos acesso à informação.

Cresci nesse meio hiperconectado e, desde que me recordo, eu interajo com plataformas e suportes digitais. Sempre fui entusiasta das novas tecnologias e fascinado pelo impacto delas sobre as pessoas. Comecei a observar questões relacionadas a forma e como os layouts digitais vêm se estruturando nos últimos anos. É comum encontrar sites e aplicativos de instituições totalmente diferentes entre si usando arranjos de layout e elementos visuais muito similares, abrindo mão de uma personalização e subjetividade que poderiam interessar ao Design. A padronização desses meios não condiz com as possibilidades que o universo digital oferece.

Nesse cenário, nasce o projeto Me Faça Pensar, que pretende expandir os limites da interação na Web, provocando um novo olhar para os usuários e para os criadores nesse suporte. Por meio de experimentos irônicos e metalinguísticos, o projeto subverte a usabilidade, agindo de forma disruptiva à corrente homogeneizadora da web.

Trata-se de uma provocação que estimula a quebra do fluxo da produção digital atual, que sofre influência dos paradigmas dos processos tradicionais de usabilidade e das ferramentas de template — projetos pré-moldados.

PROCESSO DE HOMOGENEIZAÇÃO | 9

01

Apesar das possibilidades tecnológicas estarem cada vez mais avançadas e já permitirem praticamente qualquer tipo de composição de interface, o que se observa é a padronização da produção digital. Há alguns fatores principais que colaboram para essa padronização; entre eles está a conformidade às regras tradicionais de usabilidade (UX) e o crescente uso de templates.

PROCESSO DE HOMOGENEIZAÇÃO UX

UX é uma abreviação de user experience, termo em inglês usado para descrever a área de estudo do Design responsável pela experiência do usuário. É um campo de grande relevância no processo de concepção de objetos digitais: sites, apps, sistema e outros.

Nos últimos anos, houve uma intensa pesquisa nessa área de usabilidade com a ajuda das ferramentas de análise que identificaram padrões nos comportamentos dos usuários ao interagirem com as peças digitais.

Estabeleceram-se, assim, convenções do que seria considerado a forma ideal de projeto. O paradigma criado é que o usuário “não precisa pensar” e que tudo deve ser exposto da maneira mais rápida e mais clara possível, até assemelhando-se a ideias funcionalistas do Design modernista.

10 | PROCESSO DE HOMOGENEIZAÇÃO

PROCESSO DE HOMOGENEIZAÇÃO | 11

TEMPLATES Esses padrões atendem muito bem aos interesses comerciais, pois direcionam os usuários a determinadas tarefas, como clicar em um link ou prestar atenção a um banner publicitário dentro de um site. É possível afirmar que a aplicação dos conceitos de usabilidade é funcional em determinadas situações. O problema é que esse processo contribui para a padronização da forma e da funcionalidade dos sistemas digitais e reduz as possibilidades de inovação do próprio meio.

Nesse tweet feito por @jongold, ele pergunta qual dos dois modelos de sites você está fazendo agora.

Essa pergunta está sendo feita com tom irônico, já que muitas páginas seguem uma dessas duas estruturas de layouts apresentadas na imagem.

Os templates são uma alternativa de fácil implementação de sites. Como o domínio da linguagem de programação é um conhecimento específico ainda não estudado amplamente pelos designers, esses modelos préproduzidos se mostram úteis para muitos projetos. É notório que a democratização da produção de sites proporcionada por essas ferramentas é interessante, contudo é importante salientar que esses projetos já moldados limitam as possibilidades de experimentação.

Para efeitos de comparação, é como se ao diagramar um livro, o designer usasse um arquivo com todos os tamanhos e hierarquias de textos já definidos, assim como as estruturas de grid e o formato da publicação.

Isso poderia causar um certo incômodo para alguns profissionais. Analogamente é o que se vê na produção do Design digital.

12 | PROCESSO DE HOMOGENEIZAÇÃO

CARACTERISTICAS DA HOMOGEINIZAÇÃO

PROCESSO DE HOMOGENEIZAÇÃO | 13

Para ilustrar como esse processo de homogeneização se reflete nos layouts, levantei uma série de características recorrentes entre sites. Apesar de terem origens diferentes, os sites compartilham de escolhas estruturais semelhantes.

Painel de sites.

!

PADRÃO LISTRADO

Uma recorrência entre os exemplos pesquisados foi a repetição da estrutura em seções claramente definidas. Em todos os casos, elas são separadas por uma diferenciação de contraste, que formam uma espécie de padrão listrado, empilhando o conteúdo.

Comparação entre a mancha gráfica dos sites.

Painel de sites com contraste entre as partes destacado.

14 | PROCESSO DE HOMOGENEIZAÇÃO

15

!

CONVENÇÕES Foto ao fundo e texto dentro de caixa

Lista com alguns elementos recorrentes em sites.

Texto centralizado

Logo no canto superior esquerdo

Botão de chamada para ação na primeira parte

Links para redes sociais na parte de baixo Mais chamadas para ação no fim da página Funcionalidades ou serviços da empresa separados em 3 caixas

O PENSAMENTO NO MEIO DIGITAL | 17

02

O PENSAMENTO NO MEIO DIGITAL

LIVRO “NÃO ME FAÇA PENSAR”

Uma referência bibliográfica sobre UX me chamou muito a atenção devido ao seu título — ‘Não Me Faça Pensar’ — escrito por Steve Krug. Esse livro é um cânone quando o assunto é UX. Como é citado pelo próprio autor, o livro “é usado como leitura obrigatória em alguns cursos de design”.

O principal argumento do livro é facilitar as tarefas do usuário a ponto de fazer com que ele não ‘pense’ ao navegar por um site. Na minha visão, o papel do designer vai muito além de ‘facilitar as coisas’, ele deve ser responsável por elaborar uma estrutura que provoque pensamento, que traga reflexão e explore as capacidades cognitivas das pessoas para quem projeta. O designer não deve tratar as pessoas como usuários médios, desconsiderando as particularidades individuais. Também não deve calcular ações e entender a efetividade dos projetos somente por meio de números: acessos, cliques, visualizações e tantos outros números que o *Google Analytics pode gerar.

*

Google Analytics, criado no final de 2005, é a ferramenta da web mais utilizada para obtenção de dados partir da análise quantitativa da interação dos usuários com os sites.

18 | O PENSAMENTO NO MEIO DIGITAL

O PENSAMENTO NO MEIO DIGITAL | 19

MANIFESTO

O autor do livro elabora algumas regras básicas do que seria o projeto de usabilidade ideal para internet. Nessas 6 afirmações, Krug cita conceitos que tem como objetivo facilitar a navegação do usuário e entregar de forma simplificada o conteúdo.

Tire proveito das convenções.

Minimize a confusão.

Para traduzir o argumento principal do projeto, elaborei o seguinte texto manifesto que está presente na página inicial do site:

Crie uma hierarquia visual clara em cada página.

Deixe óbvio o que pode ser clicado.

Formate o conteúdo para quem está de passagem.

Em contraposição ao pensamento do autor do livro, o projeto estimula a reflexão nas pessoas ao navegar pelo site, usando métodos estéticos e funcionais nãoconvencionais.

Capa do livro — Não me faça pensar. Por Steve Krug.

Para subverter convenções estabelecidas na internet buscando criar novas possibilidades, e, com isso, estimular novas descobertas, o design na internet não pode ser usado apenas como um facilitador de conteúdo. Ele precisa expandir a percepção de quem interage com a tela, estimulando o pensamento. O design tem potencial de despertar sentimentos e de levantar questionamentos que não podem ser medidos por meio de números.

O SITE | 21

03

O projeto se desdobrou em um site, que é uma coletânea de experimentos, funcionais e estéticos, por meio dos quais espera-se propagar um movimento inverso ao que se instaurou como convenção de usabilidade na internet.

O SITE

Os experimentos são o resultado de análises críticas às citações do livro ‘Não Me Faça Pensar’ e também dos usos subversivos dos elementos de interação na web. A retórica é feita por meio dos conceitos do projeto.

O projeto não pretende ser uma seleção de exemplos, tampouco ditar regras de como as coisas devem ser feitas. A disfuncionalidade dos experimentos é o fator que provoca a reflexão acerca da homogeneização da web.

CONCEITOS Quatro

conceitos-chave foram usados para elaborar o tom do projeto

AFIRMATIVO

Afirmativo Bem-humorado Direto Marginal

O tom afirmativo carrega consigo características de um manifesto. O projeto ‘Me faça pensar’ se apropriou do tom de afirmação, para se contrapor às regras tradicionais de usabilidade. O projeto apresenta reflexões críticas para as pessoas que interagem com a web. Ele tem opinião e não tem medo de apontá-las.

22

| O SITE

O SITE | 23

BEM-HUMORADO

exemplos de memes da internet.

DIRETO

Alguns características do alfabeto de Emojis.

MARGINAL

A ideia é discutir questões de design usando uma abordagem bem humorada e irônica que traz reflexões sobre usabilidade e boas risadas. Como a proposta é não levar as regras instauradas tão a sério, a irreverência do discurso nesse contexto é uma boa ferramenta. Além disso, o humor se conecta à linguagem da internet, que é famosa, por exemplo, por memes.

As colocações do projeto levam as pessoas a pensarem sobre a usabilidade de maneira diferente por meio de experimentos subversivos ao senso comum. Eles são rebeldes às regras tradicionais, podendo ser relacionados a estética das linhas de comando.

A comunicação por meio da internet é direta e simples.

As pessoas cada vez mais se comunicam com emojis, que são expressões sintéticas de ideias que podem ser complexas de serem explicadas por texto. Da mesma forma que os emojis*, o discurso do projeto é direto em suas colocações.

*

Emoji é de origem japonesa.

Ele simplifica o texto e transmite a ideia de uma palavra ou frase em apenas uma pequena imagem.

Terminal – software de escrever comandos de computador por meio de código

Compilado dos primeiros experimentos.

24 | O SITE

PRIMEIROS ESTUDOS

Desde o começo da pesquisa do projeto, diversos experimentos foram feitos. Eles me ajudaram a descobrir até onde eu poderia avançar e se, realmente, seriam testes relevantes.

Nesse momento foi preciso entender quais eram os principais gatilhos - as formas mais básicas com as quais um usuário interage com o conteúdo - para então pensar em formas de usá-los de maneira não tradicional.

Os Gatilhos escolhidos foram: Clique — Quando o ponteiro do mouse seleciona um objeto na tela como um link, texto ou botão.

Posição — A posição do ponteiro na janela do navegador.

Hover — Ponteiro sobrepondo um objeto sem clique Rolagem da tela — O uso da barra de rolagem para exibir informações escondidas abaixo da primeira tela.

Tamanho da Janela — Relação entre a altura e o comprimento da janela de navegação.

Tempo — A relação dos objetos com o tempo.

Até então os experimentos eram uma resposta direta às colocações de Steve Krug no livro “Não Me Faça Pensar”.

Havia predominância de preto nos experimentos e seus arranjos de layout tentavam traduzir de modo direto o conceito que estava sendo discutido.

O SITE | 25

26 | O SITE

O SITE | 27 2

ESTRUTURA DO SITE

Segunda página do site

Os 14 experimentos desenvolvidos estão agrupados em 4 categorias (Tipografia, Botões, Estrutura, Janela). O site foi criado para instigar o visitante a descobrir aos poucos os caminhos de navegação e experimentar o conteúdo em um ritmo desacelerado.

4

2

Todas as páginas do site foram programadas usando as tecnologias da web — HTML, CSS e Javascript — com o auxílio do Webflow. As páginas estão funcionando e podem ser acessadas através do endereço www.mefacapensar.com. Um requisito importante do projeto foi programar os experimentos, tornando-os funcionais, fora do âmbito da simulação.

3

2

Primeira página do site 5 1

2 1

1 2

Frase “a internet não precisa ser chata” em constante movimento.

1 3

Cartões com links para os experimentos.

Trechos de texto escondidos, revelados somente quando o ponteiro do mouse está sobre eles.

4

Simbolo do sorriso invertido girando de acordo como a posição do mouse.

5

Botão que revela todos os trechos do texto que estavam ocultos.

28 | O SITE

6

O SITE | 29

Créditos do projeto.

7

Links de contato e instagram do projeto.

ESTRUTURA DOS EXPERIMENTOS

Terceira página do site

Com o avanço do projeto, julguei necessário trazer mais interesse visual a cada um dos experimentos. Para tal, abri espaço para a entrada de novos elementos gráficos e cores. Isso possibilitou layouts mais complexos e enfatizou elementos conceituais de cada um deles, como mostrarei posteriormente.

6 7

Os experimentos foram separados em 4 categorias: TIPOGRAFIA

BOTÕES

ESTRUTURA

JANELA 6

Nesse conjunto de experimentos, a tipografia ganha outras dimensões. Criei experimentos usando a física, movimento e novas possibilidades de leitura.

Aqui se discute a própria função do botão e do menu, que podem ser usados para além de um simples clique.

Esses experimentos discutem composições de layout.

Nunca mais a marca vai estar na parte superior esquerda de um site.

Redimensionamento da tela, que até então tinha como objetivo apenas ajustar o conteúdo a diferentes tamanhos de tela, agora ganha novas funções.

30 | O SITE

O SITE | 31

Cada um dos experimentos possui 3 níveis de informação: 1

O ASSUNTO PRINCIPAL

Espaço onde a tipografia, cor, composição e interação se misturam para discutir o argumento principal do projeto.

2

CONSTRUÇÃO

Os elementos pontilhados servem para explicitar a estrutura de cada experimento. Em todos os casos esses elementos não são claros a ponto de serem didáticos. Eles dão dicas de como é o funcionamento e/ou quais conceitos estão relacionados a ele. Sempre são apresentados por meio de uma linha pontilhada, sem preenchimento e não são clicáveis.

3

CAMPO TEXTUAL

2 3

2

1

Sobre cada um deles há uma janela com um texto que ajuda a guiar o ponto principal da crítica. Esse campo não esclarece tudo, mas mostra caminhos com os quais o visitante pode elaborar seu próprio pensamento.

2

Exemplo da estrutura do experimento.

33

04

OS EXPERIMENTOS

Os experimentos foram projetos para serem vistos em telas de computadores (desktop).

34 | OS EXPERIMENTOS

O conteúdo não precisa ser estático, esperando que seja lido. Nesse experimento as letras ganham movimento, o que faz com que outras possibilidades de layout surjam.

TIPOGRAFIA

| TIPOS MÓVEIS

01

O QUE É

É um conjunto de caixas que comportam letras e palavras em movimento. Elas reagem ao movimento do mouse de acordo com as posições vertical e horizontal.

OS EXPERIMENTOS | 35

36 | OS EXPERIMENTOS

E se o layout existisse no mundo físico? Cada uma dessas letras possui um peso e, de acordo com as regras da gravidade, formam aleatoriamente uma composição, mantendo somente suas curvas e espaços.

TIPOGRAFIA

| GRAVIDADE

02

O QUE É

Várias letras presentes na palavra gravidade nesse cenário se comportam como se respondessem às leis da física, com peso e interagindo entre si.

OS EXPERIMENTOS | 37

38 | OS EXPERIMENTOS

OS EXPERIMENTOS | 39

O arquivo da fonte pode ter outros objetivos além de mostrar o desenho da letra. Aqui ele é usado para causar irritação.

TIPOGRAFIA

| FONTE

03

Ts xfsdzxvh cbgfsrrc

O QUE É

É um experimento que embaralha o texto durante a escrita. Ao digitar uma letra, outra aparece em seu lugar.

40 | OS EXPERIMENTOS

BOTÕES

| BOTÃO ÓBVIO

04 “Deixe óbvio o que pode ser clicado” é um trecho do livro ‘Não Me Faça Pensar’ que serviu de provocação para criar o botão ‘mais óbvio possível’, localizado isoladamente ao centro da página, deixando claro que se trata de um elemento clicável. Mas, na verdade, ao invés de facilitar o clique, ele dificulta, pois esse botão escapa toda vez que o ponteiro do mouse se aproxima, tornando impossível o clique. Aqui se discute a própria função do botão que pode ser usado para além de um simples clique. Nesse caso ele é um elemento que causa desconforto.

O QUE É

É uma página que tem um único botão centralizado. Ao tentar clicar sobre ele, sua posição é deslocada fazendo com que seja impossível de se clicar.

OS EXPERIMENTOS | 41

42 | OS EXPERIMENTOS

E, se além de levar a lugares, os menus pudessem funcionar como suportes para texto? Esse experimento usa o dropdown menu como um elemento de descoberta do texto.

BOTÕES

| DROPDOWN

05

O QUE É

É um menu dropdown gigantesco, com várias camadas de conteúdo. Ao abri-lo surge o texto.

OS EXPERIMENTOS | 43

44 | OS EXPERIMENTOS

Existem centenas de estilos de botões na internet e de tempos em tempos um deles vira tendência. Esse lugar é um repositório dos botões esquecidos, empilhados na expectativa de algum dia serem usados novamente.

BOTÕES

| FEIRA DE BOTÕES

06

O QUE É

São vários botões empilhados um em cima do outro, cada um com sua característica própria.

OS EXPERIMENTOS | 45

46 | OS EXPERIMENTOS

BOTÕES

| MENU BATATA

07 “Tire proveito das convenções” é um trecho do livro de Steve Krug que diz que o projeto de usabilidade tem que se aproveitar de convenções já estabelecidas. Dentre várias convenções usadas na web, o menu hambúrguer (ícone com três listras) é muito usado para organizar a navegação. O excessivo uso dele motivou o desenvolvimento desse experimento, que mostra de forma irônica que, além do hambúrguer, muitos outros alimentos podem ser usados como elemento de navegação.

O QUE É

É um menu que no momento inicial traz as opções empilhadas, mas, ao passar o mouse sobre ele, os elementos se recompõem de forma aleatória.

OS EXPERIMENTOS | 47

48 | OS EXPERIMENTOS

“Formate o conteúdo para quem está de passagem” é uma frase do livro em resposta à velocidade com que os leitores na internet consomem o conteúdo. Para o autor, as pessoas sempre estão correndo na internet, surfando de links em links de modo acelerado. Esse experimento é uma espécie de vingança do conteúdo para os usuários mais desatentos. Neste caso, quem corre é o próprio texto.

ESTRUTURA

| LEITURA RÁPIDA

08

O QUE É

É uma página com um único botão. Ao clicar no botão, o conteúdo atravessa de um lado para o outro, ficando visível por um curto intervalo de tempo.

OS EXPERIMENTOS | 49

50 | OS EXPERIMENTOS

Os textos escritos para a internet tendem a ficar cada vez mais curtos. Isso acontece pois entendese que as pessoas não gostam de ler coisas longas na tela. E esse texto é exatamente isso: uma coisa longa. Para ser lido, o visitante precisa descobrir a lógica do funcionamento para então definir o ritmo que deseja para sua leitura.

ESTRUTURA

| TEXTO LONGO

09

O QUE É

É um texto que vai rolando da direita para esquerda conforme o visitante move o mouse no eixo X.

OS EXPERIMENTOS | 51

52 | OS EXPERIMENTOS

O texto, único elemento da página, foi isolado, não compartilhando espaço com nenhum outro elemento. Para visualizá-lo é preciso clicar e arrastar em uma determinada área da página.

O usuário passa por um momento inicial de desconforto até conseguir fazer esta descoberta.

ESTRUTURA

| CONTEÚDO OCULTO

10

O QUE É

É uma página com um texto oculto. No primeiro momento em que o usuário entra na página, não é possível ver nada. O texto torna-se legível apenas quando selecionado.

OS EXPERIMENTOS | 53

54 | OS EXPERIMENTOS

ESTRUTURA

| SCROLL

11 A rolagem da página está presente na maioria dos sites atuais. Ela normalmente serve para mostrar um conteúdo que não está visível na janela naquele momento. Aqui o ‘scroll’ é levado muito a sério. Por quase um minuto o visitante irá rolar a página para descobrir o texto. Mas no final ele não terá nenhuma surpresa.

O QUE É

É um texto empilhado, que é possível lê-lo ao rolar a página.

OS EXPERIMENTOS | 55

56 | OS EXPERIMENTOS

O meio digital permite mais ação acontecendo nas 3 dimensões. O eixo z traz profundidade ao conteúdo e faz o visitante imergir na página.

JANELA

| ESPAÇO

12

O QUE É

Nesse experimento os elementos aparentam estar dispostos em um espaço tridimensional.

OS EXPERIMENTOS | 57

58 | OS EXPERIMENTOS

Diferente dos layouts para objetos físicos, no meio digital é difícil prever com precisão a posição dos elementos. Eles sofrem influência direta do espaço disponível na janela do navegador.

JANELA

| COLUNAS

13

O QUE É

São 4 colunas com textos que se rearranjam conforme o tamanho da janela.

OS EXPERIMENTOS | 59

60 | OS EXPERIMENTOS

Aqui se discute a relação entre a distância de leitura. É intuitivo que as pessoas se aproximem para ler um texto com tipografia pequena. Nesse caso a intuição é quebrada, pois a tipografia cresce somente ao se afastar.

JANELA

| PERTO OU LONGE

14

O QUE É

É um parágrafo de texto que diminui cada vez que o visitante se aproxima e aumenta conforme ele se afasta.

OS EXPERIMENTOS | 61

PARÂMETROS TÉCNICOS | 63

04

PARÂMETROS TÉCNICOS

ESCOLHAS COMO DESIGNER

A etapa de programação do site é quando todo o layout criado ganha vida. Nesse momento, os movimentos e as interações passam a fazer sentido. Muitos designers ainda não enxergam as vantagens de ter conhecimento técnico de como escrever código nas linguagens da web, acrescentam ao projeto. Existe um certo repúdio ao código no meio do Design, pois pode parecer algo muito específico ou matemático e que não dialoga com as questões criativas da nossa área. Na verdade, o que se observa é um crescente avanço nas ferramentas que facilitam a escrita do código, fazendo com que a curva de aprendizagem seja muito mais curta.

Ao programar o site, deparei-me com algumas questões pertinentes ao trabalho do designer e não necessariamente do programador. Somente participando dessa etapa como designer pude descobrir isso.

64 | PARÂMETROS TÉCNICOS

WEBFLOW

Usei um software chamado Webflow, que é uma plataforma que ajuda a escrever o código com auxílio de elementos visuais. Ele foi construído para facilitar o processo de programação para designer que já estão acostumados com ferramentas de desenho e edição, como Illustrator e Photoshop, e também para programadores que querem agilizar o processo de escrita do código. A diferença dessa ferramenta para outras como o Muse - software da Adobe para criar sites - é que o Webflow usa as tecnologias da web - HTML, CSS e JavaScript - de maneira não complexa, permitindo a edição e leitura sem grandes complicações. Outras ferramentas – Macaw, Wix e outras – usam algoritmos para interpretar o layout criado em código e, com isso, acabam tornando complexa a interpretação dos códigos nos *navegadores.

PARÂMETROS TÉCNICOS | 65

Para exemplificar, um quadrado como esse criado com a ajuda do Webflow usa apenas algumas linhas de código HTML e CSS para formar o desenho. Já no Muse são necessários muitas mais linhas para a mesma tarefa.

Quadrado

Desenho de um quadrado.

Interface de criação do Webflow.

Volume de código gerado pelo Webflow. * Navegadores são programas usados para acessar a internet, os mais usados são o Chrome, Safari e Firefox.

Volume de código gerado pelo adobe Muse.

66 | PARÂMETROS TÉCNICOS

ESPECIFICAÇÕES

PARÂMETROS TÉCNICOS | 67

MEDIDAS DIGITAIS MAIS COMUNS

Não creio que a programação seja uma habilidade essencial ao designer que trabalha com o meio digital, mas ter conhecimento suficiente para fazer as escolhas da melhor maneira, certamente enriquece o projeto.

As unidades de medida relativas são um bom exemplo disso. Normalmente, no design gráfico usamos medidas constantes nos layouts, como os centímetros ou milímetros para formatos e pontos para tamanho de letra.

Até mesmo os grids possuem relações de tamanho fixas.

Já no meio digital é preciso pensar na responsividade, projetando para vários tamanhos de tela.

Variedades de tamanhos de tela disponíveis para navegar pela internet.

EM

Essa medida é relativa ao tamanho de letra do elemento. Se eu definir que o elemento tem 14px de tamanho ao usar 2em, essa medida será multiplica por 2 ficando, com 24px.

REM

Parecida com a EM, porém é relativa a uma variável - um valor qualquer - definido anteriormente no começo do código.

VW

Medida relativa a 1% da largura da janela de exibição (viewport).

VH

Medida relativa a 1% da altura da janela de exibição (viewport).

%

Fonte: w3schools.com

Elas são responsáveis por definir o tamanho dos elementos do site, como caixa de texto, botões, linhas e também os tamanhos da tipografia.

PX

Medida que se relaciona a algum elemento. Posso definir que uma caixa mede 100x100px e, ao criar uma outra caixa dentro dessa, dizendo que ela tem 50% de largura e 20% de altura, essa segunda caixa vai ter de medir no final 50x20px.

Um pixel é uma unidade com tamanho fixa, ele é aproximadamente 0,01041% de uma polegada. O pixel varia de tamanho de exibição dependendo da resolução da tela, por exemplo: um computador com alta densidade de pixel exibirá mais pixel do que um com resolução tradicional e consequentemente irá exibir o pixel em um tamanho menor.

68 | PARÂMETROS TÉCNICOS

PARÂMETROS TÉCNICOS | 69

Os cartões das categorias não estão encaixados em um grid fixo, eles estão fixados nas extremidades do site. Por exemplo, o cartão da categoria estrutura tem sua posição definida de acordo com as extremidades inferior e direta. Assim toda vez que a janela mudar de proporção ele permanece próximo ao lugar projetado.

O texto da página inicial do site ‘mefacapensar.com’ usa a unidade VW para definir o tamanho a letra.

Toda vez que a janela muda de largura, o texto se reajusta para manter o layout projetado.

Largura atual: 900px

Extremidade direita

Largura atual: 1700px

Extremidade inferior

70 | PARÂMETROS TÉCNICOS

FORMAS DE INTERAÇÃO

Os objetos podem ter suas características alteradas de acordo com uma ação feita pelo usuário. Isso permite diversos tipos de experimentações. Segue alguns exemplos desses gatilhos de ações:

PARÂMETROS TÉCNICOS | 71

acima da tela

3 Iniciar alguma ação condicionada ao objeto estar ou não aparecendo na tela.

tela

abaixo da tela Exemplo de ações/gatilhos.

4 1

Enquanto o usuário estiver rolando a página.

Ao clicar em algum elemento

5 Após o carregamento da página.

2 Ao passar o ponteiro do mouse sobre algum elemento 6

De acordo com a posição X e Y na janela.

y

x

72 | PARÂMETROS TÉCNICOS

UNIDADE GRÁFICA ENTRE OS EXPERIMENTOS

PARÂMETROS TÉCNICOS | 73

Usar uma unidade gráfica ajudou a criar consistência entre os experimentos, que mesmo sendo diferentes entre si, se conectam por meio de elementos visuais compartilhados.

SÍMBOLO

O primeiro ponto é o uso do preto como cor de fundo que dialoga com a estética dos softwares de escrever códigos, como os terminais de comando.

O símbolo do sorriso invertido remete ao processo de desconstrução proposto pelo projeto e também carrega um ar irônico. Esse símbolo também pode ser encontrado no alfabeto emoji, ele normalmente é usado quando a pessoa quer expressar ironia.

A escolha de uma da família tipográfica com uma grande variedade de pesos permite uma maior liberdade na criação dos experimentos e mantém a unidade do desenho da letra.

Os elementos gráficos em pontilhado ajudam a enfatizar a lógica construtiva das páginas e acrescenta outra camada de informação sobre o conteúdo principal.

Alguns pesos da família tipografica usada.

Símbolo do sorriso invertido.

NOME

Exemplo de elementos pontilhados.

Assinatura Me Faça Pensar.

O nome do projeto ‘Me Faça Pensar’ é uma referência direta ao nome do livro de Steve Krug ‘Não Me Faça Pensar’. Esse nome ajuda a comunicar o objetivo do projeto. Por ser um livro famoso no meio de usabilidade, isso facilita a conexão crítica ao autor pelos os profissionais do campo.

CONCLUSÃO | 75

05

CONCLUSÃO

Por se tratar de um projeto investigativo, ainda existem vários caminhos a serem explorados. O projeto ‘Me Faça Pensar’ não é uma plataforma fechada. Ela foi projetada para comportar mais experimentos e mais conteúdo.

A homogeneização da web é algo que me incomoda e, ter a oportunidade de fazer esse projeto me deixa contente, pois tenho a sensação de que de alguma forma estou colaborando com a comunidade do design. Não tenho a pretensão de que os experimentos que desenvolvi irão mudar a maneira como o design digital é feito, mas acredito que o projeto possa servir para abrir a discussão acerca da produção de sites na atualidade.

76 | REFERÊNCIAS BIBLIOGRÁFICAS

REFERÊNCIA BIBLIOGRÁFICA

REFERÊNCIAS BIBLIOGRÁFICAS | 77

KRUG, Steve . Não me faça pensar atualizado. 2014 Rio de Janreiro, RJ.

machines-e84dda7eb01d. Acessado em: 04 maio 2017.

ADAMS, P. The dribbblisation of design - Inside Intercom. Inside Intercom. disponivél em: https://blog.intercom.com/the-dribbblisation-ofdesign/ Acessado 18 Jun. 2017.

POYNOR, Rick Poynor. No más normas: diseño gráfico y posmoderno.

México: GG, 2014. 192 p.

ABEHSERA, Michael. Dribbble and The Creation of The Useless Designer – uxdesign.cc. Disponivel em: https://uxdesign.cc/dribbble-andthe-creation-of-the-useless-designer-3caf85805fa Acessado 17 Jun. 2017.

Alejandro Vrojas. 2017. Disponível em: http://alejandrovrojas.com/.

Acessado em: 25 junho 2017.

ARCEMENT, Katherine. The hottest trend in Web design is making intentionally ugly, difficult sites, 2016. Disponível em: https://www. washingtonpost.com/news/the-intersect/wp/2016/05/09/the-hottesttrend-in-web-design-is-intentionally-ugly-unusable-sites/?utm_ term=.675b6a0f257c. Acessado em: 06 junho 2017.

CAUDURO, Flávio Vinicius . Design gráfico & pós-modernidade, 2000.

DOUGLAS, Nick . It’s Supposed to Look Like Shit: The Internet Ugly Aesthetic. Los Angeles.

HALL, Stuart. A Identidade Cultural na Pós-Modernidade. Rio de Janeiro: DP&A, 2004.

HARVEY, David. Condição Pós-moderna: uma pesquisa sobre as origens da mudança cultural. São Paulo: Edições Loyola, 2009.

Ilarila Amanen. 2017. Disponível em: http://ilarilaamanen.com/. Acessado em: 25 junho 2017.

Johanna Jaskowska. 2017. Disponível em: http://jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjj.jjaskowska.com/. Acessado em: 25 junho 2017.

PLOEG, Theo . The New Aesthetic: zwaaien naar machines, 2016.

Disponível em: https://frnkfrt.net/the-new-aesthetic-zwaaien-naar-

KOTERBAY, Scott Contreras. The new Aesthetic and art. Amsterdam, 2015.

Maricade Michele. 2017. Disponível em: http://www.maricademichele. com/. Acessado em: 25 junho 2017.

MILLER, Christian. How To Brutalize The Web, 2016. Disponível em: https://blog.attackthefront.io/how-to-brutalize-the-web-e06b22f7de57.

Acessado em: 04 maio 2017.

Nubank. 2017. Disponível em: http://www.informant.com.br/ blog/2013/12/03/user-centric-design-o-que-e-e-por-que-importa/ Acessado em: 26 junho 2017.

Sebastian ly Serena. 2017. Disponível em: http://sebastianlyserena.dk//.

Acessado em: 25 junho 2017.

STARY, Carolina. 2015 . VAPORWAVE: TUDO O QUE É SÓLIDO SE DESMANCHA NO AR.Disponível em: STERLING, Bruce. An Essay on the New Aesthetic, 2012. Disponível em: https://www.wired.com/2012/04/an-essay-on-the-new-aesthetic/.

Acessado em: 22 junho 2017.

Twitter Bootstrap Usage Statistics. 2017. Disponível em: https://trends. builtwith.com/docinfo/Twitter-Bootstrap . Acessado em: 25 junho 2017.

User Centric Design: o que é e por que importa. 2013. Disponível em: http://www.informant.com.br/blog/2013/12/03/user-centric-design-o-quee-e-por-que-importa/ Acessado em: 21 junho 2017.

78 | LISTA DE FIGURAS

LISTA DE FIGURAS

LISTA DE FIGURAS | 79

Figura 01 — Tweet @jongold

10

Figura 25 — Experimento 08 – Leitura Rápida

49

Figura 02 — Painel de sites

13

Figura 26 — Experimento 09 – Texto Longo

51

Figura 03 — Painel de sites com contraste

13

Figura 27 — Experimento 10 – Conteúdo Oculto

53

Figura 04 — Sobreposição painel de sites

12 + 13

Figura 28 — Experimento 11 – Scroll

55

Figura 05 — Exemplo de convenções parte 1

14

Figura 29 — Experimento 12 – Espaço

57

Figura 06 — Exemplo de convenções parte 2

15

Figura 30 — Experimento 13 – Colunas

59

Figura 07 — Capa do livro “Não me faça pensar”

18 + 19

Figura 31 — Experimento 14 – Perto ou longe

61

Figura 08 — Bandeira com sorriso invertido

20 + 21

Figura 32 — Interface do Webflow

63

Figura 09 — Memes da internet

22

Figura 33 — Quadrado em HTML

65

Figura 10 — Alfabeto de emojis

22

Figura 34 — Código Webflow

65

Figura 11 — Terminal de comando

23

Figura 35 — Código Muse

65

Figura 12 — Compilado dos primeiros estudos

25

Figura 36 — Variedade de tamanho de telas

66

Figura 13 — Primeira página do site

26

Figura 37 — Janela com 1700px

68

Figura 14 — Segunda página do site

27

Figura 38 — Janela com 900px

69

Figura 15 — Terceira página do site

28

Figura 37 — Exemplo de ação 1

70

Figura 16 — Exemplo de estrutura de um experimento

31

Figura 38 — Exemplo de ação 2

70

Figura 17 — Compilado dos experimentos

33

Figura 39 — Exemplo de ação 3

71

Figura 18 — Experimento 01 – Tipos Móveis

35

Figura 40 — Exemplo de ação 4

71

Figura 19 — Experimento 02 – Gravidade

37

Figura 41 — Exemplo de ação 5

71

Figura 20 — Experimento 03 – Fonte

39

Figura 42 — Exemplo de ação 6

71

Figura 21 — Experimento 04 – Botão Óbvio

41

Figura 43 — Fámilia Tipografica GT America

72

Figura 22 — Experimento 05 – Dropdown

43

Figura 44 — Amostras de linhas pontilhadas

72

Figura 23 — Experimento 06 – Feira de Botões

45

Figura 45 — Símbolo do soriso

73

Figura 24 — Experimento 07 – Menu Batata Frita

47

Figura 46 — Assinatura ‘Me faça pensar’

73