Kit Gratuito de Componentes UI Bubble

Fala pessoal!

Uso o Bubble há alguns anos, e já criei diversos aplicativos aqui, alguns de uso interno para empresas, e outros SaaS com planos de assinatura.

Uma das coisas mais importantes que aprendi é a importância do design e do UI (User Interface, ou como o software interage com o usuário).

No começo eu não dava muita bola para a parte visual, e me concentrava mais em criar as soluções inovadoras no backend e no funcionamento do aplicativo.

Mas à medida que eu ia colocando em teste para os primeiros usuários em beta, eu percebia que os olhos deles não brilhavam, eles não tinham vontade de usar um aplicativo “feio” ou com cara de ultrapassado.

Por isso fui aprendendo cada vez mais a desenvolver o front-end do aplicativo com um visual bacana, e fui aprendendo as boas práticas de design.

E toda essa experiência que fui criando, fui compilando em uma coleção de elementos (alertas, botões, cards, checkbox, input de formulários, paginação, popovers, popups), que eu sempre uso como template pra quando vou criar um aplicativo do zero.

E agora, compartilho com vocês essa coleção.

Acho que vai ajudar tanto os que estão começando e aprendendo a desenvolver apps no Bubble, mas também os mais experientes que, apesar de conhecerem bem a plataforma, não são tão ligados na parte visual e de front-end.

Segue o link:
https://semcodar.bubbleapps.io/free-ui-kit
Espero que gostem.

Se encontrarem qualquer bug ou problema de responsividade, favor me informem.

Abraços!

Renato Asse
Meus tutoriais de Bubble no YouTube: https://www.youtube.com/channel/UCvNQuM8oPy-oO-5RZ80vf8Q
Meu tutoriais de Bubble no Blog: https://www.semcodar.com.br

4 Likes

Mto bacana Renato, e parabéns pelo trabalho! :slight_smile:

1 Like

Legal os botões com animação que você fez!

O checkbox com o smiley é muito bom! :no_mouth: -> :smiley:


A coisa mais difícil pra mim é aprender a pensar como um UX designer (sem ter que investir anos de estudo e prática). Um cara com quem eu aprendi muito é o cara do Refactoring UI (em inglês).

A dica que eu mais uso é começar com tudo em preto & branco e só adicionar cores no final.

Refactoring UI

Fala @rico.trevisan,

Sim, não é à toa que tantos apps feitos aqui no Bubble são show de bola em funcionalidades, mas muito feios.

Eu uso essa mesma dica que você, começo desenhando tudo preto e branco, senão a gente se perde e perde muito tempo.

Eu uso uma ferramenta de gestão de tempo chama Toggl (toggl.com), onde descubro por exemplo que às vezes passei 4 horas (!) desenhando um formulário, só desenhando mesmo, margens, cores, fundo, sombra.

E aí deixava em segundo plano as funcionalidades core do app. Vacilo.

Então agora meu primeiro passo é desenhar um layout bem por cima, tudo monocromático.

Desenhando o app eu já vou sacando qual vai ser a necessidade de banco de dados.
Quando termino o layout parto pro segundo passo: monto o database.

E por fim, com layout montado (mesmo que bem ordinário) e banco de dados pronto, terceiro passo: faço o workflow.

E aí com a função básica do app funcionando, por fim, começo a embelezar ele.
Gosto muito de buscar inspiração no Behance (behance.com) e Dribble (dribble.com), busco uma cores bacanas, e começo a deixar mais bonito.

Uso também o materialpalette.com pra pegar escalas de cores bonitas prontas, o uigradients.com pra pegar gradientes, e o freefrontend.com pra pegar inspiração de elementos. A maioria dos elementos que montei no UI Kit que postei foram do Freefrontend.

Abraços!

Renato Asse
Meus tutoriais de Bubble no YouTube: https://www.youtube.com/channel/UCvNQuM8oPy-oO-5RZ80vf8Q
Meu tutoriais de Bubble no Blog: https://www.semcodar.com.br

2 Likes

Atualizando, mudei o link do Kit e fiz um vídeo pra apresentar:

Kit Gratuito de Componentes UI - Bubble:

Link do Editor Bubble (para copiar e colar no seu aplicativo):

1 Like