Estética e Personalidade

Foi pensado um visual para a interface com influências estéticas dos cinemas drive-in, populares na década de 60 e que possuíam letreiros em cores neon e eram bastante chamativos. A partir disso, houve a tentativa de emular algo nessa linha estética, escolhendo as cores “tealish” e “darkish-pink” em alusão aos extintos óculos 3D de papel, no qual uma das lentes era azul/ciano e a outra lente era vermelha. Também foram escolhidas cores escuras para gerar contraste e para lembrar o efeito dos letreiros neon. Ao mesmo tempo, tentou-se atribuir uma visão mais moderna à interface, com o uso do gradiente e da transparência, uma tipografia sem serifa nos textos principais e com uma iconografia mais minimalista, utilizando o desenho de linha em vez de optar por formas esqueuomórficas.

A aplicação apresenta apenas duas famílias tipográficas. A Circular Std é uma família de tipos sem serifa com boa legibilidade e é bastante flexível, sendo encontrada em diversos tipos de texto, desde títulos a blocos grandes no corpo.
A segunda família é a IBM Plex Mono, uma monoespaçada serifada egípcia, no estilo das "typewriters", que foi escolhida por remeter à tipografia dos roteiros de filmes, geralmente representada pela Courier New. Optou-se por aquela família em vez desta última porque ela apresenta melhor leiturabilidade, é mais condensada e possui traços mais uniformes, oferecendo também melhor legibilidade.

A paleta de cores foi gerada a partir de ideias presentes em um moodboard (figura 2) criado pela equipe contendo imagens variadas de interfaces e outras peças gráficas. Nele foi visto uma certa repetição de cores que gerava uma possível paleta e, a partir disso, foi analisado se ela realmente se adequava à proposta da interface.

Figura 2 - Moodboard criado para inspirações do design.

Com isso, as cores utilizadas foram escolhidas devido às suas fortes intensidades que simulam o efeito dos letreiros dos cinemas antigos de drive-in. Além disso, optou-se por cores como a “tealish” e a “darkish-pink” para fazer referência aos óculos 3D antigos de papel, no qual uma das lentes era azul/ciano e a outra lente era vermelha. Também foram escolhidas cores escuras para gerar contraste e para lembrar os letreiros neon.

Figura 4 - Paleta de cores da interface da aplicação.

A paleta foi criada com foco nas cores “tealish”e “darkish-pink” e depois foram escolhidas cores que gerassem bons contrastes com elas, como visto na figura 3. Finalmente, as cores foram classificadas da seguinte forma:

• Cor Principal: "tealish" (#28B5C1)
• Cor Secundária: "dark-blue-grey" (#111D38)
• Cor de Base: "dark" (#2D243F)
• Cor do Texto: "white" (#FFFFFF)
• Cor de Alerta: "cherry" (#DB002A)
• Cor de Sucesso:  "shamrock-green" (#00DB5D)
• Cor de Mouseover:  "darkish-pink" (#DD3060)

A seguir estão algumas telas do nosso protótipo de alta fidelidade, sendo aplicado tanta tipografia quanto paleta de cores.

Figura 3 - Tela inicial com as cores utilizadas.

Figura 4 - Tela inicial com as cores e tipografia utilizadas.