layout | title | permalink |
---|---|---|
post |
Resources |
/resources/ |
This is a showcase of the many websites and platforms where you can find openly licensed icons, fonts, image, tools and other resources. You can use them for any purpose, also commercial (some works have specific licenses, so always make sure it’s fine to use).
- Mozilla, makers of the Firefox browser. Have a UX blog
- GNOME desktop environment. Design blogs, Design wiki
- GitLab Git hosting and code collaboration. UX Team
- Nextcloud data sync & sharing, have a Design page
- Fedora, Design blogs, Design Team wiki
- Canonical (Ubuntu), Design blog
- WordPress, Design discussion and handbook
- Drupal, usability group, UI standards
- Diaspora decentralized social network, UI issues on GitHub
- MediaGoblin media platform
- BeWelcome hospitality platform
- Mailpile mail interface, Design ideas on GitHub
- Ghost simple blogging platform
- Terms of Service; Didn’t Read contract rating
- Libre Office, Design Community
- Patternfly A UI framework for enterprise web applications
- Trustroots hospitality platform
- Automattic the company behind WordPress.com, WooCommerce.com, Jetpack.com. Design blog
- XWiki development platform. Design wiki
- Elementary OS Linux distribution. Design wiki, Design blog
- Plasma desktop environment by KDE. Design page, Human Interface Guidelines
- Bitcoin Icons Open source icons made for Bitcoin applications, free to use. MIT licensed.
- Circum Icons Consistent open source icons as SVG for React, Vue and Svelte.
- FontAwesome The iconic font and CSS toolkit. Free to use. CDN. GitHub.
- Font Fabulous A fabulous iconset packaged as a font. Free to use. GitHub.
- IcoMoon CC icons and free to use icon-font creation software.
- IconMonstr A large collection of glyph icons from a German artist. Free to use without attribution and free to modify.
- Iconoir SVG. MIT licensed.
- Inkscape Open Symbols Open source icon sets to use as Inkscape symbols.
- Mono Icons A simple, consistent open-source icon set designed to be used in a wide variety of digital products. MIT licensed. GitHub
- Pictogramas Open source free icons
- Remix Icons Huge repo of consistent neutrally styled icons. GitHub
- React Icons SVG react icons of popular icon packs. GitHub
- React Feather Icons Collection of simply beautiful open source icons for React.js. GitHub
- Styled Icons Icon packs like Font Awesome, Material Design, and Octicons, available as React Styled Components. GitHub
- The Noun Project CC and purchasable icons. for personal and commercial purposes.
- ToIcon All icons are licensed under a Creative Commons.
- Tabler Icons Open source SVG icons in a visually consistent style. MIT licensed. GitHub
- The League of Movable Type
- Open Font Library
- Google Web Fonts
- Libre Fonts by Womxn
- Open Foundry
- Open Source Publishing Foundry
- Velvetyne
- Use & Modify
- FontForge font editor
- Metaflop parametric font editor
- Prototypo parametric font editor (source code)
- Metapolator font editor
- Type:Bits collaborative type design workshop
Some of these platforms also take submissions, so if you designed a font with an open license, submit it there!
- Pixabay
- Flickr Creative Commons
- Gratisography
- The Stocks
- FreeImages
- StockSnap
- FindA.Photo
- New York Public Library Public Domain Images
- unDraw
- Interfacer
- Open Doodles
- Unsplash
- Use a pen & paper for mockups and prototypes. No hi-fi Photoshop work needed.
- Draw.io (diagrams, mockups)
- Pencil (mockups)
- Penpot (mockups)
- Quant UX (mockups, UX testing, heatmaps)
- Krita (art, digital painting)
- Blender (3d rendering, animation, textures)
- darktable (photo workflow)
- RawTherapee (photo workflow)
- digiKam (photo management)
- GIMP (image manipulation, compositing)
- Inkscape (vector elements, print export)
- Synfig for animation
- Natron (compositing, VFX, motion graphics)
- Scribus (page layout, desktop publishing)
- DisplayCAL (color calibration)
- Kdenlive (video editing)
- Figma (UI Design,wireframes,prototypes)
- Design discussion on the issue tracker of the project. For example at GitHub – get an account, identify design issues, participate, and open new issues. Establish a »Design« tag on the tracker to group these issues, for example like in the Nextcloud issues.
- Blend: CSS gradient generator.
- Leonardo.io by Adobe: Color contrast generator.
- Tanaguru: For finding complementary colors.
- colors.lol: Overly descriptive color palettes.
- colorhunt.co : Color Palettes for Designers and Artists
- Bootstrap Fully featured mature HTML, CSS (LESS) & Javascript.
- Foundation Fully featured mature HTML, CSS (Sass) & Javascript.
- BASCSS Lightning-Fast, Modular CSS for Designers.
- Bourbon A simple and lightweight mixin library for Sass.
- Kickoff A lightweight front-end framework for creating scalable, responsive sites.
- Space Base A sass-based responsive css framework.
- Rebar Simple lightweight HTML, CSS (LESS)
- PatternFly A community of designers and developers collaborating to build a UI framework for enterprise web applications.
- First Rule of Usability? Don’t Listen to Users by Jakob Nielsen (2001)
- 10 Heuristics for User Interface Design by Jakob Nielsen (1995)
- 19 Principles of User Interface Design by Joshua Porter
- ten principles for good design by Dieter Rams (1970s)
- A Beginner’s Guide to Finding User Needs
- Don't Make Me Think
- The Design of Everyday Things
- Design principles for UI/UX
- Design x Us
- Humane by Design
- Human Flourishing Design Guide
- Designing for Trust
- Inclusive Design: Cards for Humanity
- Free Software UI (2002)
- How Not To Design a Portfolio
- Open Design Now book.
- Coordinating usability & testing in Free Software (2011) thesis.
- How to get designers (or anyone) to work on your open source project recent article on Design Open.
- Barriers Faced by newcomers to open source projects: a systematic review Research Paper.
- An Exploration of Fedora's Online Open Source Development Community Research Paper.
- Designers and women in open source Why designing is difficult for Open Source.
- Designers, Women, and Hostility in Open Source Project Follow up to the above article.
- Barriers for Designers What barriers designers face when contributing to Open Source.
- Libre Graphics magazine print magazine.
- Libre Projects collection of nice open source web apps.
- Libre Graphics World
- Libre Graphics Meeting conference.
- Beautiful Open Beautiful sites for Open Source projects.
- Open Design and Hardware Group. OKFN open design and hardware group.
- PIXLS.US Free/Open Source Photography.
- Photos of Design Research on Wikimedia Commons
- Checklist Design A collection of the some UX and UI practices.
- Untools Tools for better thinking.
Focused on HTML, CSS, Javascript. Ideally, to be able to implement your own suggestions. But also to better discuss with developers and be understand why and how certain things work and don’t work.
- WebPlatform web development resources.
- Mozilla Developer Network for great web dev documentation.
- Unheap a tidy repository of jQuery plugins.
- Transitional Interfaces, Coded for good animations.
- Codecademy with interactive tutorials.
- Try Git also with interactive tutorials.
- code.org
- Code School learn even more.
- Egghead to learn the Angular framework.
- Tota11y a bookmarklet to check that your website is a11y compliant.
Learn about design concepts! :)
- Hack Design Free design lessons by inspirational designers.
- Design Lab Design course with mentorship and projects.
- Voice and Tone Learn about writing good copy.