Skip to content
Jordan Goulart

Neomot

Tecnologia de edifícios inteligentes que finalmente parece o que é. Site de marca e produto para uma fabricante de elevadores da Serra Gaúcha, casa do primeiro elevador do Brasil que funciona com Alexa.

Neomot, interface

Papel

UI/UX Designer

Ano

2022

Status

No ar

Stack

Figma, Next.js
LinksNo ar

Problema

A Neomot faz elevadores e tecnologia para edifícios em Caxias do Sul, incluindo o primeiro elevador do Brasil que funciona com Alexa. O problema é a categoria. Os sites desse meio são todos iguais: ficha técnica, foto de banco de imagem, um monte de PDF. Nada ali diz "empresa de tecnologia", e nada separa o elevador com Alexa de qualquer outro.

Abordagem

Então desenhei o site como um produto, não como catálogo. Azul profundo, um toque de ciano elétrico, uma sans confiante e uma frase pra segurar tudo: soluções tecnológicas para edifícios. Isso coloca a Neomot onde ela é, uma empresa de tecnologia que por acaso faz elevadores. As três linhas (Elevadores, Motom, Cubo) falam a mesma linguagem visual, então a oferta se lê como uma plataforma, não três produtos soltos. O elevador com Alexa entra como prova, não como nota de rodapé numa lista de recursos. Os produtos foram criados em OpenGL, dando ao visitante uma visão real de cada um: na página do elevador dá pra trocar o papel de parede, o piso e o recorte do teto e ver o resultado na hora, tudo pra trazer mais imersão e fidelidade ao produto final. O movimento existe pra dar vida ao edifício, não pra enfeitar.

Resultado

O site foi construído em Next.js e está no ar em neomot.com. A Neomot enfim se lê como o que é, uma empresa de tecnologia para edifícios, com o elevador Alexa, a calculadora de tráfego e a linha inteira sob uma identidade única, calma e técnica.

O que aprendi

  • As convenções da categoria eram o verdadeiro briefing. As telas não foram o difícil. Recusar o template de catálogo que o setor inteiro repete foi.
  • Um diferencial só conta se o design o trata como tal. Colocar o elevador com Alexa no centro, e não numa lista de recursos, foi a decisão que mais importou.
  • Desenhar para um parceiro de build é desenhar o sistema, não só as telas. Entregar ao time de desenvolvimento uma linguagem coerente rendeu mais do que qualquer tela isolada.

Só design: o sistema de marca e produto no Figma, construído em Next.js. O losango ao lado do logotipo é a única marca geométrica numa identidade que, no resto, é tipográfica. Um aceno discreto à cabine do elevador, e a uma empresa cujo trabalho inteiro é mover as coisas para cima.

O sistema

O sistema que construí para a Neomot. Um fundo azul profundo, um golpe de ciano elétrico e a DM Sans carregando tudo, do título à ficha técnica. Uma empresa de tecnologia que por acaso faz elevadores.

Tipografia

A Neomot

DM Sans

Display e títulos

Bold, 700

Soluções tecnológicas

DM Sans

Corpo, UI e fichas

Regular, 400

Paleta

Azul profundo

#002850

Fundo e primária

Ciano elétrico

#14a5eb

Acento

Branco

#ffffff

Superfície e texto invertido

Tinta

#000000

Texto

Cinza-azulado claro

#f1f5f9

Superfície clara

Home: hero azul profundo com soluções tecnológicas para edifícios, a frase do primeiro elevador do Brasil com Alexa, imagem aérea da fábrica, o acordeão Soluções Neomot e o rodapé azul vivo Vamos conversar?
Página A Neomot: o manifesto da marca, fotos de interiores de elevador iluminados em verde, o bloco Neomot em números e a linha do tempo da empresa
Página de produto Elevadores: a cabine em 3D renderizada em OpenGL que o visitante pode configurar, com amostras de acabamento e piso rebaixado para o revestimento escolhido, ao lado da grade de diferenciais e da ficha técnica
Página de produto CUBO: render 3D em OpenGL do armazenador de energia CUBO sobre fundo azul profundo, com a grade de conexões e a ficha técnica