14 dicas de UI para interfaces mais eficientes
Transforme suas interfaces com 14 princípios práticos de UI Design. Aprenda espaçamento, contraste, acessibilidade e muito mais com exemplos reais.
Ler artigo63 posts
Transforme suas interfaces com 14 princípios práticos de UI Design. Aprenda espaçamento, contraste, acessibilidade e muito mais com exemplos reais.
Ler artigoDomine CSS Logical Properties para layouts inclusivos e multilíngues. Crie interfaces que se adaptam automaticamente a diferentes idiomas e preferências.
Ler artigoEntenda min-content, max-content e fit-content em CSS completamente. Guia completo sobre dimensionamento intrínseco para layouts flexíveis e responsivos!
Ler artigoDescubra as novas viewports CSS: Large, Small e Dynamic. Unidades lvh/svh/dvh para resolver problemas com barras móveis flutuantes. Use agora!
Ler artigoTécnica avançada de dark mode usando variáveis de luminosidade invertida. Implemente modo escuro com LCH e variáveis CSS de forma inovadora.
Ler artigoImplemente navegação âncora com smooth scroll usando apenas CSS puro. Aprenda scroll-behavior nativo sem JavaScript para rolagem suave perfeita. Veja como!
Ler artigoA verdade sobre dark mode baseada em estudos científicos. Descubra por que modo escuro pode não ser tão benéfico para saúde quanto muitos alardeiam!
Ler artigoImplemente dark mode com CSS de forma simples e eficiente. Técnica prática para adicionar modo escuro responsivo às preferências do usuário.
Ler artigoGlider.js: slider/carousel ultra leve e responsivo. Alternativa moderna sem dependências jQuery para galerias e carrosséis mobile-first. Use agora!
Ler artigoCrie barras de progresso circular impressionantes com CSS puro e Sass. Técnica diferenciada usando linear-gradient para 100 níveis de preenchimento radial!
Ler artigoCrie menu dropdown com CSS puro sem JavaScript. Técnica acessível usando :hover e :focus para menus suspensos nativos e responsivos. Aprenda!
Ler artigoListas HTML com caption e label para melhor acessibilidade. Técnicas semânticas avançadas para descrições e legendas em listas. Melhore HTML!
Ler artigoCrie bordas personalizadas e responsivas com CSS puro facilmente. Técnica surpreendente usando background-repeat: space e round para efeitos únicos. Incrível!
Ler artigoAprenda a criar menu off-canvas da maneira mais fácil. Navegação lateral responsiva que desliza da lateral para mobile. Técnica e código completo!
Ler artigoCrie animações de loading leves e performáticas com CSS puro facilmente. Elimine gifs pesados e melhore performance sem bibliotecas JavaScript. Otimize!
Ler artigoCores e variáveis CSS: box-shadow-color existe de verdade?! Técnicas avançadas para sombras e cores dinâmicas com custom properties CSS. Truque incrível!
Ler artigoSlanted Shapes: crie formas diagonais em CSS. Técnicas criativas para backgrounds, seções e layouts com ângulos inclinados impressionantes. Domine!
Ler artigoNeumorfismo (Neumorphism): tendência moderna de UI design. Efeitos soft UI inspirados em skeuomorphism com sombras sutis e elegantes. Experimente!
Ler artigoMelhore seu processo de design com grayscale. Descubra por que começar em preto e branco resulta em layouts mais limpos e usabilidade superior.
Ler artigoExplore ApexCharts, Sal.js, Moveable, Cropper.js e FilePond no dpw expo. Gráficos modernos, scroll animations e upload/crop de imagens profissional. Teste!
Ler artigoMelhores práticas para input de telefone em formulários. UX aprimorada, validação, formatação automática e acessibilidade em campos telefônicos. Otimize!
Ler artigoExplore International Telephone Input, Focus Overlay e JustGage no dpw expo. Input telefone internacional, overlays de foco e gauges animados. Confira!
Ler artigoExplore Roughviz.js, Free-for.dev e Swiper no dpw expo. Gráficos estilo sketch artístico, recursos grátis para devs e slider mobile moderno. Teste!
Ler artigoDescubra a função CSS element() que renderiza qualquer parte de um site como imagem ao vivo. Crie efeitos avançados com reflexos e dobras 3D.
Ler artigoExplore React Bolt, Butter Cake e Browserhacks no dpw expo. Componentes React ultra rápidos, CMS headless moderno e hacks de navegadores. Descubra!
Ler artigoUX em botões de cancelar: boas práticas essenciais. Aprenda posicionamento correto, hierarquia visual e comportamento ideal de ações secundárias. Melhore!
Ler artigoExplore React Spinners CSS, SimpleBar e CopyPalette no dpw expo. Loaders React elegantes, scrollbar customizada minimalista e paletas de cores. Teste!
Ler artigoExplore Can I Email, Clipboard.js e Flawwwless UI no dpw expo. Compatibilidade HTML email, copiar para clipboard fácil e galeria de designs. Confira!
Ler artigoExplore Filesize.js, Radial Menu e UI Interactions no dpw expo. Formatação de tamanhos de arquivo, menus radiais e coleção de micro-interações. Veja!
Ler artigoEntenda a evolução dos botões-fantasma no web design. Descubra quando usar, impacto na conversão e a transição do skeuomorfismo para flat design.
Ler artigoExplore Gradient Magic, Text Stripes e Git Pending no dpw expo. Gradientes CSS prontos incríveis, efeitos de texto e gerenciamento de commits pendentes. Teste!
Ler artigoHack Flexbox com flex-grow: 9999 para layouts super inteligentes. Técnica avançada para quebra de linha automática sem media queries. Truque incrível!
Ler artigoFundamentos essenciais para criar interfaces intuitivas e eficazes. Descubra 19 princípios de UI Design para melhorar a experiência do usuário.
Ler artigoExplorações criativas em design visual para web moderna. Tendências, técnicas avançadas e experimentos para criar interfaces impactantes. Inspire-se agora!
Ler artigoVariáveis CSS são melhores que loops de Sass? Compare custom properties com preprocessadores para geração dinâmica de estilos. Veja exemplos!
Ler artigoDomine steps e jumps em animações CSS para efeitos únicos. Crie animações frame-by-frame incríveis e efeitos escalonados com timing functions discretas. Anime!
Ler artigoDescubra 10 dicas para criar menus de navegação responsivos eficientes. Aprenda a priorizar conteúdo e otimizar experiência mobile dos usuários. Navegue!
Ler artigoCurso completo de Flexbox: guia definitivo e prático. Domine o sistema de layout unidimensional mais poderoso do CSS com exemplos práticos. Aprenda tudo!
Ler artigoResponsive Components com Container Queries revolucionárias. Componentes que respondem ao próprio tamanho, não à viewport. Revolução no CSS moderno!
Ler artigoRelembre 2017 no dpw: JavaScript this, Motion UI, microinterações e o polêmico DOM. Veja os artigos que marcaram o ano e impactaram a web brasileira!
Ler artigoMito mobile desmistificado: simplicidade vs complexidade em UI. Nem sempre simples é melhor - contexto e propósito definem boa UX mobile. Repense!
Ler artigoMinicurso grátis de Sass Placeholders completo. Aprenda a usar @extend corretamente e evite armadilhas comuns em pré-processadores CSS. Aprenda agora!
Ler artigoMito desmistificado: sites mobile precisam ter menos features. Descubra por que funcionalidades completas também são importantes em mobile. Repense UX!
Ler artigoPrimeiro curso brasileiro de CSS Grid Layout. Aprenda o sistema definitivo de layouts web com exemplos práticos, técnicas modernas e abordagens reais.
Ler artigoMito desmistificado: usuários mobile estão sempre com pressa. Compreenda diferentes contextos de uso e necessidades variadas em dispositivos móveis. Repense!
Ler artigoCurso completo de CSS avançado: OOCSS, SMACSS, BEM, Sass e arquitetura CSS profissional. Eleve seu código ao próximo nível com técnicas de experts.
Ler artigoImagem de largura total em layout com largura limitada. Técnica CSS para breakout de imagens full-width sem quebrar grid ou container. Truque incrível!
Ler artigoDomine CSS @supports (Feature Queries) para detectar suporte nativo. Melhore compatibilidade cross-browser sem JavaScript ou prefixos vendor. Use agora!
Ler artigoEntenda redução progressiva e decaimento de experiência. Aplique graceful degradation para garantir funcionalidade em todos os navegadores. Essencial!
Ler artigoDomine unidades viewport para controle tipográfico responsivo. Use vw, vh, vmin/vmax para textos que escalam perfeitamente com a tela. Aprenda!
Ler artigoMenu Cortina (Curtain Menu): navegação mobile inovadora e elegante. Alternativa criativa ao tradicional hamburger menu para interfaces modernas. Inove!
Ler artigoGuia completo de Flexbox: sistema de layout unidimensional do CSS. Domine todas as propriedades, alinhamento e distribuição de elementos flexíveis. Aprenda!
Ler artigoEvite erros comuns em design responsivo. Aprenda sobre performance, conteúdo, contexto e experiência mobile para criar sites verdadeiramente adaptáveis.
Ler artigoConheça o framework Alloy UI baseado em YUI3 robusto. Explore componentes front-end profissionais usados por empresas como Cisco e Volkswagen. Descubra!
Ler artigoAprenda Jetstrap com o primeiro livro mundial sobre a ferramenta. Crie protótipos rápidos com Bootstrap visual e exporte código HTML pronto. Acelere workflow!
Ler artigoDescubra as novas regras da web responsiva moderna. Container queries, aspect-ratio e técnicas atuais de responsive design em CSS. Atualize-se!
Ler artigoTwitter Bootstrap: o framework front-end mais popular do mundo. Grid system flexível, componentes prontos e desenvolvimento rápido de interfaces responsivas!
Ler artigoGuia completo de filtros CSS3 (filter effects). Aprenda blur, brightness, contrast, saturate e outros efeitos visuais nativos impressionantes. Domine!
Ler artigoDicas e truques essenciais para textarea HTML. Resize controlado, contagem de caracteres, auto-height e melhorias de UX em campos. Otimize agora!
Ler artigoCrie gradientes CSS cross-browser sem imagens. Técnica completa para degradês compatíveis com todos os navegadores usando CSS puro. Funciona mesmo!
Ler artigoConheça os 6 componentes essenciais de um sistema de navegação web eficiente: áreas clicáveis, indicadores visuais, ferramentas e feedback. Navegue bem!
Ler artigoGuia completo sobre CSS float para layouts: o que é, para que serve, problemas comuns e técnicas de clearfix. Domine layouts tableless clássicos na web!
Ler artigoFerramentas essenciais para identificar fontes de imagens e sites. Descubra tipografias desconhecidas facilmente com recursos online e extensões. Identifique!
Ler artigo