Usabilidade

Esses sites são ótimos recursos para quem deseja aprofundar conhecimentos em UX/UI Design, estudando padrões de uso, heurísticas, comportamento do usuário e boas práticas aplicadas ao design de interfaces digitais:

UI-Patterns: reúne uma extensa coleção de padrões de design de interface com explicações sobre o propósito, contexto e uso adequado de cada elemento (como formulários, carrosséis, tooltips, navegação, etc). Ideal para encontrar soluções recorrentes já testadas e aprovadas por outros produtos digitais. Acesse: https://ui-patterns.com

Nielsen Norman Group – NN/g: referência mundial em usabilidade, experiência do usuário (UX) e pesquisa com usuários. Oferece artigos, estudos de caso, vídeos e cursos sobre heurísticas de Nielsen, arquitetura da informação, design responsivo, acessibilidade e muito mais. Acesse: https://www.nngroup.com

Inspiração Visual e Criação de Portfólio

Esses sites são ideais para encontrar referências visuais de design, UI/UX, arte digital, branding e desenvolvimento criativo. Muitos deles também funcionam como portfólio online, permitindo que você publique seus próprios projetos e ganhe visibilidade:

Dribbble – Freebies: reúne uma coleção de recursos gratuitos de design, como UI kits, ícones, mockups e ilustrações. Também funciona como uma rede social de designers para publicar portfólios e projetos. Acesse: https://dribbble.com/search/freebie

Behance: plataforma da Adobe para exposição de projetos criativos. Muito usada por designers gráficos, fotógrafos, ilustradores e desenvolvedores UI/UX. Também serve como portfólio pessoal e é acompanhada por recrutadores. Acesse: https://www.behance.net

Pinterest: ideal para salvar referências visuais em painéis organizados por tema. Muito usado para encontrar tendências de design, combinações de cores, ilustrações, branding e layouts. Acesse: https://www.pinterest.com

Lapa Ninja: coleção curada de landing pages de alta qualidade, com foco em design moderno e usabilidade. Ótimo para encontrar inspiração para interfaces web. Acesse: https://www.lapa.ninja

Awwwards: premia os melhores sites do mundo em design, criatividade e inovação. Além da inspiração, também funciona como vitrine para quem deseja submeter projetos e ganhar reconhecimento internacional. Acesse: https://www.awwwards.com

UI Movement: comunidade voltada para interfaces de usuário (UI), onde você pode explorar animações, botões, formulários, navegação e outros padrões visuais de design digital. Acesse: https://uimovement.com

Designspiration: mistura de Pinterest com foco em design gráfico, web e tipografia. Permite salvar ideias, pesquisar por cor ou tema, e seguir artistas e projetos. Acesse: https://www.designspiration.com

Outras opções:

Download de Imagens, Ícones e Vetores

Esses sites oferecem recursos visuais como fotos, vetores, ícones, ilustrações e arquivos PSD, ideais para compor interfaces, apresentações, materiais gráficos e projetos web/mobile:

Imagens

FreeImages – PSDs: galeria com arquivos em formato PSD (Photoshop) prontos para edição. Inclui mockups, layouts e elementos gráficos personalizáveis. Ideal para quem trabalha com design visual. Acesse: https://www.freeimages.com/psd?ref=365psd

Freepik: oferece milhões de vetores, PSDs, ícones e imagens em alta resolução. Ótimo para projetos gráficos e de UI/UX. É gratuito com atribuição, mas também possui planos premium. Acesse: https://www.freepik.com

Unsplash: plataforma com uma vasta coleção de fotos de alta qualidade e uso livre, enviadas por fotógrafos do mundo todo. Excelente para compor layouts, sites e materiais institucionais. Acesse: https://unsplash.com

Cupcake: oferece uma coleção pequena, mas charmosa de fotos gratuitas e de alta qualidade, com foco em cenas naturais e urbanas. Todas as imagens são de uso livre, sem necessidade de atribuição. Acesse: https://cupcake.nilssonlee.se

Pexels: alternativa ao Unsplash, oferece fotos e vídeos de alta qualidade com licença gratuita para uso comercial, sem necessidade de atribuição (embora recomendada). Acesse: https://www.pexels.com

Undraw: Open-source illustrations for any idea you can imagine and create. Acesse: https://undraw.co/

Open Doodle: A Free Set of Open-Source Illustrations! Acesse: https://www.opendoodles.com/ 

Ícones e vetores

The Noun Project: enorme biblioteca de ícones vetoriais (SVG e PNG) criados por designers do mundo todo. Ideal para uso em apps, sites e apresentações. Gratuito com atribuição ou planos pagos sem créditos. Acesse: https://thenounproject.com

Creative Market – Free Goods: toda semana disponibiliza uma seleção de itens criativos gratuitos, como fontes, templates, mockups, ícones e arquivos vetoriais. Requer conta gratuita para download. Acesse: https://creativemarket.com/free-goods

Flaticon: repositório com milhões de ícones vetoriais em SVG, PNG e outros formatos, organizados por categorias e estilos. Gratuito com atribuição e planos pagos para uso sem créditos. Acesse: https://www.flaticon.com

Material Icons: Google: coleção oficial de ícones do Material Design, com suporte a diferentes estilos (outlined, filled, rounded, etc). Disponível em SVG, PNG e como fonte web para fácil uso em projetos web e mobile. Acesse: https://fonts.google.com/icons 

Lucide Icons: Beautiful & consistent icons made by the community. Acesse: https://lucide.dev/ 

SVG logos: logos famosas para desenvolvimento em svg. Acesse: https://svglogos.dev/  

Hero Icons: Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS. Acesso: https://heroicons.com/ 

Radix-ui: A crisp set of 15×15 icons. Tem tanto o arquivo em Figma quanto para componentes React. Acesse: https://www.radix-ui.com/icons 

Remix Icon: Simply Delightful Icon System. Open-source neutral-style system symbols elaborately crafted for designers and developers. All of the icons are free for both personal and commercial use. Acesse: https://remixicon.com/ 

Tabler Icons: Esse é ótimo para copiar SVGs. https://tablericons.com/ 

Huge Icons: Skip the setup. Load icons instantly. No downloads and no installations. Works like your own personal Hugeicons CDN. Just copy one line of code, and start using icons instantly! Acesse: https://hugeicons.com/ 

Hero Patterns: SVGs de padrões de fundo. Acesse: https://heropatterns.com/  

Sapiens: gera ilustrações online de acordo com sua necessidade. Fica bem legal. Vale a pena testar! Acesse: https://sapiens.ui8.net/ 

Pixel True: Ilustrações animadas. Acesse: https://www.pixeltrue.com/packs 

Tipografias (fontes)

Essas plataformas ajudam a escolher, combinar e aplicar fontes tipográficas de forma harmônica e acessível, considerando contraste, legibilidade e estilo. São ideais para projetos de design gráfico, editorial, interfaces web e mobile:

W3Schools – Font Pairings: apresenta combinações de fontes populares para web, com exemplos visuais de títulos e parágrafos. Ideal para iniciantes que estão aprendendo sobre CSS e tipografia na prática. Acesse: https://www.w3schools.com/css/css_font_pairings.asp

Monotype – Font Pairing Playground: ferramenta interativa para testar combinações de fontes profissionais, com visualização imediata e opções de personalização. Excelente para explorar pares de fontes com equilíbrio e estilo editorial. Acesse: https://www.monotype.com/font-pairing#/playground

Fontpair: galeria com combinações de fontes do Google Fonts, organizadas por categorias como serif + sans-serif, display + body, etc. Permite copiar o código HTML/CSS para usar direto no seu projeto. Acesse: https://www.fontpair.co/all

Google Fonts: o maior repositório de fontes gratuitas para web, com suporte direto ao CSS e preview ao vivo. Oferece filtros por estilo, peso, idioma e categoria. Acesse: https://fonts.google.com

Font Squirrel: reúne fontes gratuitas para uso comercial, organizadas por categoria e com visualização interativa. Também oferece um gerador de @font-face e detector de fontes. Acesse: https://www.fontsquirrel.com

Beautiful Web Type: vitrine curada de fontes do Google Fonts com ótima aplicação prática, com foco em beleza tipográfica e legibilidade. Ótimo para quem busca inspiração mais refinada. Acesse: https://hellohappy.org/beautiful-web-type/

Ferramentas

svgomg: abrir SVG online e fazer algumas modificações. 

Remove.bg: remove fundo de imagens.

Achou algo errado ou quer contribuir com um novo item?

Envie um e-mail com a sugestão ou correção: lana.mesquita@ufc.br . 

Muito obrigada por colaborar. 🙂‍↕️