Modal de preview do código
A proposta desse modal parece ser a visualização do código, principalmente para entender como ele é aplicado. Nesse sentido, tem alguns pontos que considero inconvenientes:
- O efeito de tilt aplicado ao modal deixa a leitura instável, já que o ângulo e a posição mudam constantemente com o movimento do ponteiro.
- O código está em uma única linha, o que dificulta a leitura e consome mais espaço horizontal. Seria muito mais legível com quebra de linhas, separando elementos e possivelmente classes, pra poder usar mais do espaço vertical disponível e deixar mais agradável pra leitura, como é em uma IDE (código vertical + horizontal) por exemplo.
- Há um excesso de animações e interatividade (como mudanças de cor no fundo), que distraem do foco principal: o conteúdo do código e atrapalham a leitura, que é o intuito principal desse modal, já que a opção de copy já fica em um botão ao lado.
Container de preview dos componentes
O container onde os próprios elementos são apresentados também tem algumas questões de usabilidade:
- Cada item possui fundos diferentes, com animações, transparência e degradês.
- Isso torna difícil comparar os elementos lado a lado e também prejudica a visualização como um todo.
- Um fundo neutro ajudaria a dar mais destaque ao que realmente importa, no caso o componente em si. Também seria muito melhor de visualizar e fazer comparativos entre os componentes.
Exemplo
Um problema visível de contraste que surge exatamente do que disse. O texto do input é do mesmo tom de cor que o fundo do container.
Percebe como aqui, em fundos neutros, é muito mais visível, agradável e de fácil comparação?
Submit nos botões dos forms
Nas previews, alguns botões do form estão com type submit, o que faz que quando cliquemos nos botões pra ver a preview e checar se eles tem algum efeito ou algo do tipo, acaba dando o submit no formulário e o refresh na página, o que não seria ideal pra preview:
Modal de preview do código
A proposta desse modal parece ser a visualização do código, principalmente para entender como ele é aplicado. Nesse sentido, tem alguns pontos que considero inconvenientes:
Container de preview dos componentes
O container onde os próprios elementos são apresentados também tem algumas questões de usabilidade:
Exemplo
Um problema visível de contraste que surge exatamente do que disse. O texto do input é do mesmo tom de cor que o fundo do container.
Percebe como aqui, em fundos neutros, é muito mais visível, agradável e de fácil comparação?
Submit nos botões dos forms
Nas previews, alguns botões do form estão com type submit, o que faz que quando cliquemos nos botões pra ver a preview e checar se eles tem algum efeito ou algo do tipo, acaba dando o submit no formulário e o refresh na página, o que não seria ideal pra preview:
