← ← ← 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. Leve em consideração que este código foi feito de forma experimental por pura diversão. Apesar de estar razoávelmente estruturado, ele não segue padrões de industria como uso de framweworks, aplicação de testes, ou utilização de ferramentas, o ponto deste projeto foi somente didatismo de forma divertida e prática quanto aos aspectos fundamentais da estruturação e criação de uma aplicação interativa. Porém o resultado foi bastante satisfatório pra uma brincadeira feita "a olho nu". 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