LiftKit - um framework de UI para perfeccionistas

• Framework de UI open source que resolve problemas de simetria e proporção, com uma estrutura em que todos os elementos derivam da proporção áurea
• Corrige automaticamente o equilíbrio visual e a sensação de espaço em botões, cards, campos de entrada e outros elementos, mantendo proporções naturais
• Com base em um fator de escala global, realiza cálculos precisos de proporção em nível de subpixel para garantir harmonia consistente
• Com um painel modular de controle de cores, permite visualização de cores em tempo real e ajuste de temas, além de oferecer suporte a configurações detalhadas como tipografia, materiais e escalonamento
• Mesmo na fase de MVP, oferece alta qualidade visual, destacando-se como uma ferramenta para elevar o nível do design inicial

---

Visão geral do LiftKit

• O LiftKit é um framework de UI open source que resolve problemas de simetria
  • Seu principal objetivo é ajustar automaticamente o equilíbrio visual entre componentes de UI
  • Está na fase “Extremely Early Access”, uma versão inicial e experimental
• Todas as proporções do framework derivam da proporção áurea (golden ratio), fazendo com que margens, tamanhos de fonte, raios de borda e outros elementos sejam renderizados de forma harmoniosa
• Usa um único fator de escala global (global scale factor) para calcular proporções com precisão em nível de subpixel

Principais componentes e recursos

• O componente de botão corrige automaticamente o desequilíbrio visual de padding que surge quando há ícones
  • Ajusta dinamicamente o padding de acordo com o tamanho da fonte para manter o equilíbrio entre os lados
• O componente de card oferece a propriedade opticalCorrection para compensar o desequilíbrio de espaço causado pelo espaçamento entre linhas (line-height) do conteúdo
• O campo de entrada (Input) é apresentado com um formato “com espaço para respirar”, graças a um design de espaçamento baseado na proporção áurea

Proporções e satisfação visual

• O LiftKit usa um sistema de proporções derivado de um único fator de escala para criar proporções “oddly satisfying”
• Todos os componentes são calculados com precisão de subpixel (subpixel accuracy), minimizando pequenos desequilíbrios visuais
• Essa abordagem oferece uma “sensação natural e harmoniosa” que é difícil de explicar, mas fácil de perceber

Controle de cores e temas

• O LiftKit oferece um painel modular de controle de cores (modular control panel)
  • Pode ser adicionado ao arquivo durante o trabalho para permitir visualização de cores em tempo real
  • Suporta diversos ajustes, desde mudanças sutis de tonalidade até inundações intensas de cor
• Além das cores, também é possível ajustar diretamente no CSS os seguintes itens
  • Typography: controle tipográfico global detalhado, indo além da família tipográfica
  • Custom Materials: criação de novos materiais com base em presets como glass, flat e rubber
  • Scaling: não apenas o texto, mas também o espaçamento e os demais elementos são escalados em conjunto
  • Component-specific configs: permite ajustar de forma independente a aparência de componentes individuais

Detalhes minuciosos e qualidade de design

• O LiftKit foi projetado para entregar alta qualidade visual mesmo na fase de MVP
  • “Make MVP’s that don’t look like MVP’s”
• Por padrão, oferece espaçamento perceptualmente preciso (perceptually accurate spacing), maximizando a sensação de equilíbrio percebida pelo usuário
• Esses detalhes minuciosos produzem resultados que “são difíceis de explicar, mas parecem melhores”

[roxie]

Na landing page tem uma comparação de antes e depois, mas ambos parecem bons ..

[heal9179]

Normalmente não se usa major second (1.125) em vez da proporção áurea..?

[GN⁺]

Comentários do Hacker News

• Ao projetar o Chrome, o minimalismo era o ponto central
  Era uma época em que as telas eram pequenas, então gastamos muito tempo reduzindo o espaço vertical
  Se eu explicasse a proporção entre a faixa de abas, a barra de ferramentas e a barra de título como sendo a proporção áurea, havia menos discussão, mas na verdade não era proporção áurea coisa nenhuma
  Elementos como luz, cor, arredondamento e intensidade visual eram muito mais importantes

  • Meu meme de design favorito é quando alguém faz o logo e depois acrescenta figuras da proporção áurea dizendo que foi resultado de uma “reflexão profunda”
    Na prática, se você ajustar um pouquinho, dá para encaixar qualquer coisa na proporção áurea. Esse tipo de coisa funciona especialmente bem com quem gosta de uma estética mais “espiritual”
  • Eu gostava muito do minimalismo do Chrome antigo
    Mesmo agora que as telas ficaram maiores, não quero desperdiçar espaço
  • Ironicamente, muitas vezes o site usado como exemplo de proporção áurea tem um design pior do que o comparado
    No fim, parece ser uma questão de gosto
  • Conceitos como “ritmo vertical” e “escala modular” na web parecem quase superstições sem sentido
    São úteis no impresso, mas no digital acabam até prejudicando a legibilidade
    Forçar ícones a terem a mesma forma ou remover as cores também reduz a distinguibilidade
  • Também apareceu a piada de que “a proporção áurea era um amigo que encontramos na rua”

• Eu sou o criador do LiftKit
  Este projeto ainda está em um estágio bem inicial e estou fazendo sozinho como hobby
  É open source e gratuito → link do GitHub
  A maior parte do feedback já está sendo discutida no tópico do Reddit
  No momento, a prioridade é reconstruir com Radix primitives e melhorar a documentação
  Também dá para ver uma visão geral no vídeo do YouTube

  • Acho o projeto muito legal. As críticas também são um feedback profissional, então deveriam ser vistas até como elogio
    É impressionante que você tenha realmente implementado o “sistema de design perfeitamente consistente” com que a maioria dos desenvolvedores front-end sonha
  • No Reddit, 7 meses atrás, você disse que “renderização de componentes era a próxima prioridade”, mas agora isso nem é mencionado
    É difícil confiar em um framework de UI que não consegue renderizar componentes na própria documentação
  • A ideia é boa e a homepage é visualmente satisfatória
    Tentei aplicar a proporção áurea em um app iOS e gostaria que você compartilhasse o processo de criação
  • Recomendo olhar também para Base UI ou React Aria em vez de Radix
  • Na imagem comparativa, tratar o framework concorrente com baixo contraste de propósito não foi justo

• Ao mostrar capturas de tela de antes e depois, é melhor permitir alternância imediata por botão em vez de usar um slider arrastável
  Assim, ao clicar, os olhos percebem diretamente a diferença
  Referência relacionada: resposta de Andrei Herasimchuk no Quora

  • Mesmo do ponto de vista de quem criou, o slider atual está péssimo em tela sensível ao toque
    Quando tento mover para os lados, ele escorrega para cima e para baixo. Obrigado pelo feedback, com certeza vou corrigir isso
  • Para comparação de fotos, slider é o padrão, mas dá para melhorar colocando rótulos à esquerda e à direita e mostrando o original por um instante ao clicar
    Exemplo em vídeo: LUTLab Viewer
  • Eu também fiquei confuso no começo sobre qual lado era o LiftKit
  • Parecia um jogo de “qual dos dois parece melhor?”
  • Se cada imagem tivesse rótulos como “material-style” e “liftkit”, ocultados conforme o slider se move, ficaria mais claro

• No começo achei que esse site fosse uma paródia
  Fiquei surpreso ao ver que era real, e os elementos pareciam desalinhados no centro, com o peso visual desequilibrado

  • Eu também sempre pensava “esse está melhor”, mas depois percebia que era sempre o lado antes (before)
  • Proporções matematicamente perfeitas nem sempre são bonitas
    Na prática, é preciso ajustar alguns pixels para que pareça natural aos olhos
  • No geral, tudo parece meio fora do lugar
  • A proporção 1.618 é espaçada demais para design real

• Sobre “optical correction none/top”, fiquei curioso se isso é ajustado medindo diretamente a altura das maiúsculas ou se usa as métricas da fonte como estão
  É difícil confiar nos números internos da fonte, e os glifos reais não seguem necessariamente esses valores
  Esse tipo de coisa vira um pesadelo no trabalho com fontes

• É difícil confiar em um framework de UI que mostra todos os componentes apenas como imagem

  • Cliquei no dropdown e não tinha nem imagem
  • Talvez seja para evitar que as pessoas copiem o CSS real e proteger o “código secreto da proporção áurea”
  • Também passa a impressão de que você deveria contratar especialistas para ajudar
  • No Firefox, há queda de frames ao rolar a página
  • O fato de a UI não ser renderizada diretamente e depender de React ou Next.js parece inadequado para um UI kit

• Fui procurar o preço e só tinha “Contact Sales”, então tive que usar a calculadora logo de cara
  Ao calcular com 10 páginas principais + 5 subpáginas, apareceu $16,500, e isso me surpreendeu

  • Essa é uma calculadora para serviço de agência. O LiftKit em si é gratuito
    Foi você, por acaso, que mandou o formulário com “[e-mail]”?
  • Isso mesmo, na verdade é uma biblioteca open source e pode ser usada de graça

• Há um ponto que a maioria das bibliotecas de UI deixa passar
  Quando caixas com cantos arredondados ficam aninhadas, é preciso somar ao border-radius o valor do espaçamento
  Caso contrário, fica uma sensação de desalinhamento visual
  Exemplos: componente Snackbar, captura de tela do layout de abas do Chrome

• Também existe um artigo acadêmico relacionado → link do artigo na PMC)

• Na descrição do LiftKit havia a frase “todos os elementos derivam da proporção áurea para alcançar uma harmonia perfeita”, e não sei dizer se isso era ironia ou sinceridade

  • Mas, assim que abri a página, os botões pareceram estranhamente visualmente satisfatórios
    Parece haver ali algum tipo de harmonia sensorial que vai além da teoria