← ← ← 8/9/2024, 8:16:36 PM | Posted by: Felippe Regazio
O Designer Musab Alfawal (@musabalfawal) postou no Twitter (X) um vídeo demonstrando uma tela (UI/UX) que ele prototipou (Provavelmente no Figma). A tela abaixo:
E por diversão decidi recriar esse comportamento da maneira mais aproximada possível utilizando tecnologias Vanilla somente (basicamente um arquivo HTML com CSS e JS puros, sem lib, sem framework).
É claro que sem acesso ao protótipo de design muitas coisas se perderam como algumas proporções, espaçamentos, font family, icons, etc. Por se tratar de um port de uma tela mobile para o browser, alguns aspectos da experiência também foram reduzidos como animações pregressivas acompanhando o slider. Porém o resultado foi bastante satisfatório pra uma brincadeira feita "de olho". Veja:
Ao mostrar esse vídeo algumas pessoas se interessaram no processo de coding dessa tela, por isso decidi fazer essa série em vídeo explicando todos os aspectos de criação dessa experiência utilizando apenas tecnologias Vanilla:
Você pode acessar todo o código fonte da aplicação nesse repositório: https://github.com/felippe-regazio/notbad.
Para uma versão live dessa experiência acesse https://felippe-regazio.github.io/notbad/.
Para acessar a video-aula 01 sobre a construção dessa tela, acesse o link: https://drive.google.com/file/d/1HsnGQx7TddNVgTUjTbjO1n5PsQrTQRZe/view?usp=sharing
Under Construction