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