🎨 Tutorial: Tipos de UI que todo designer deveria conhecer
Nível 1 · 🪷 Lotófagos · ⏱️ ~15 min · Pré-requisitos: nenhum📌 Pra que serve
Esse conteúdo lista 9 estilos de UI (Liquid Glass, Bento Grid, Spatial, Claymorphism, Neomorphism, Glassmorphism, Skeuomorphism, Minimalism, Maximalism). Serve como um mapa mental pra designers reconhecerem tendências visuais e escolherem a abordagem certa dependendo do usuário e do dispositivo.🛠️ Passo a passo
1️⃣ Faça uma lista de referência com os 9 estilos citados no post — mantenha ela à mão como checklist de vocabulário visual.
2️⃣ Antes de começar um projeto, defina pra quem é a interface (público jovem, corporativo, app mobile, dashboard etc.) e em qual dispositivo ela vai rodar.
3️⃣ Compare o contexto do projeto com os estilos da lista — a ideia central do post é que conhecer os tipos ajuda a criar experiências melhores pra usuários e dispositivos diferentes.
4️⃣ Escolha 1 ou 2 estilos que fazem sentido pro seu produto (o post não detalha as características técnicas de cada um, só apresenta os nomes — vale pesquisar exemplos visuais de cada estilo antes de aplicar).
5️⃣ Pergunte-se, como no post: "
🔗 Links e instalação
📎 Fonte: https://www.instagram.com/reel/Dac5UYzsxHC/?igsh=aHRqZ2x3d2NveWI5
Ferramentas para prototipar e explorar os estilos citados:
- Figma (comunidade tem plugins e templates de Glassmorphism, Neomorphism, Bento Grid): https://www.figma.com
- Adobe XD: https://www.adobe.com/br/products/xd.html
- Sketch: https://www.sketch.com
Comando para gerar CSS de Glassmorphism/Neomorphism via geradores web (não requer instalação, apenas acesso ao navegador):
https://hype4.academy/tools/glassmorphism-generator
https://neumorphism.io
⚠️ Esse tutorial é conceitual/visual — não envolve instalação de pacotes ou SDKs. As ferramentas acima são apenas apoio para prototipagem e teste visual dos estilos mencionados no post original.