# 1. UI/UX Inspiration - [Dribbble - Show and tell for designers](https://dribbble.com/) - [SaaS Examples - Huge Gallery of SaaS designs, UI and emails](https://divbyzero.com/tools/saas/) - [Browse iOS Apps](https://mobbin.com/browse/ios/apps) - [Themes - Overview - iOS Human Interface Guidelines](https://developer.apple.com/ios/human-interface-guidelines/overview/themes/) - Newsletters - [Under Glass](https://www.underglass.io/) - [UIDB.io - The User Interface Database](http://uidb.io/) - StackOverflow for Designers - [Graphic Design Stack Exchange](https://graphicdesign.stackexchange.com/) # 2. Concepts ## Product design checklists & tips - [How to not suck at design, a 5 minute guide for the non-designer.](https://medium.com/startup-grind/how-to-not-suck-at-design-a-5-minute-guide-for-the-non-designer-291efac43037) - [7 Practical Tips for Cheating at Design - Refactoring UI - Medium](https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886) - [Visual hierarchy - 3 ways to improve your visual design skills -- uxdesign.cc](https://uxdesign.cc/3-ways-to-improve-your-visual-design-skills-fa9dc8e583ff) - [Redesigning Laravel.io - Refactoring UI - Medium](https://medium.com/refactoring-ui/redesigning-laravel-io-c47ac495dff0) - [Transitional Interfaces -- Pasquale D'Silva -- Medium](https://medium.com/@pasql/transitional-interfaces-926eb80d64e3) - [50 Things You (Probably) Forgot To Design -- UX Power Tools -- Medium](https://medium.com/ux-power-tools/50-things-you-probably-forgot-to-design-7a288b0ef914) - [Checklist Design - best UI elements for the best UX practice](https://www.checklist.design/) - [🔥 Design Tips / Twitter](https://twitter.com/i/events/994601867987619840) - [[50_ui_tips.pdf]] ## Design Lessons ### Best references - [Hack Design - Lessons](https://hackdesign.org/lessons) - [Design Lessons 101 - Hack Design](https://hackdesign.org/lessons101) - [Tony Fadell: The first secret of design is ... noticing | TED Talk | TED.com](https://www.ted.com/talks/tony_fadell_the_first_secret_of_design_is_noticing) - [Startups, This Is How Design Works -- by Wells Riley](https://startupsthisishowdesignworks.com/) - [uxtoast | Learn the fundamentals of UX & UI Design](https://www.uxtoast.com/) ### Principles - [Gestalt principles - Sidebar: Visual Design Principles | Web Style Guide 3](http://webstyleguide.com/wsg3/7-page-design/4-visual-design-principles.html) - [White Space - Designing with White Space: Why 1+1=3 - Design for Hackers](https://designforhackers.com/blog/whitespace-113/) - [UI Design Do's and Don'ts - Apple Developer](https://developer.apple.com/design/tips/) - [Crash Course: UI Design -- HH Design -- Medium](https://medium.com/hh-design/crash-course-ui-design-25d13ff60962) ### Interaction design & layouts - [Responsive Layouts, Responsively Wireframed](http://www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop) - [The Anatomy of a Grid -- UX Collective](https://uxdesign.cc/the-anatomy-of-a-grid-c955d5355fae) - [First Principles of Interaction Design (Revised & Expanded) | askTog](http://asktog.com/atc/principles-of-interaction-design/) ### Atomic design - [L'atomic design, une méthode de co-création prometteuse](https://medium.com/@audreyhacq/l-atomic-design-une-m%C3%A9thode-de-co-creation-prometteuse-bd9d5fc2b2ad) - [Atomic Design Methodology | Atomic Design by Brad Frost](http://atomicdesign.bradfrost.com/chapter-2/) ## Typography - [Checklist for Better Web Typography | Mert TOL](http://www.merttol.com/articles/web/checklist-for-better-web-typography.html) - Pro tip: the 8-point rule - Google design guidelines recommends using multiples of 8 pixels for every size, margin and space. It’s a good rule of thumb to ensure that your proportions are regulated, and that you aren’t always asking yourself “what size should I use?”. ### Best books about typography - [The Elements of Typographic Style - Robert Bringhurst - Amazon](https://www.amazon.fr/Elements-Typographic-Style-Robert-Bringhurst/dp/0881791326) - [The Design of Everyday Things: Donald A. Norman, Peter Berkrot: - Amazon.com](https://www.amazon.com/Design-Everyday-Things-Donald-Norman/dp/1452654123) - [The Elements of Typographic Style Applied to the Web - a practical guide to web typography](http://webtypography.net/) ### Fonts - [Beautiful Web Type --- the best typefaces from Google Fonts](http://beautifulwebtype.com/) - [Google Webfonts that Don't Suck | SachaGreif.com](http://v3.sachagreif.com/google-webfonts-that-dont-suck/) - [Best Sellers « MyFonts](https://www.myfonts.com/bestsellers/) - [Modular scale - Font size ratio](http://www.modularscale.com/?1&em&1.618) - [Chrome extension that instantly helps you identify any webfont](http://www.chengyinliu.com/whatfont.html) - [25 Must-Have Free Fonts for Entrepreneurs and Designers](http://www.entrepreneur.com/article/238243) - [15 Best Font Pairing Tools for Designers - Hongkiat](https://www.hongkiat.com/blog/font-pairing-tools/) - [Odin Rounded Font Family - 1001 Fonts](http://www.1001fonts.com/odin-rounded-font.html#license) ## Colors - Use 1 highly recognizable color for your primary call to actions and links - Use a second, softer color for secondary CTA’s and links. - Then white, black and grey for the rest. ### Theory, Color Palettes, Wheels & Schemes - RGB/Hex - [Flat UI Colors](http://flatuicolors.com/) - [Color Theory, The Color Wheel And Color Schemes - Vanseo Design](http://vanseodesign.com/web-design/color-theory/) - [Color wheel | Color schemes - Adobe Color CC - Free](https://color.adobe.com/create/color-wheel/) - [Color Wheel - Color Calculator | Sessions College - Free](https://www.sessions.edu/color-calculator/) - [Coolors.co - The super fast color schemes generator !!](https://coolors.co/) - [ColorFavs - Create and Discover Beautiful Color Palettes and Colors.](http://www.colorfavs.com/) ### OKLCH - A better way to define colors in CSS (than RGB and HSL) - [OKLCH Color Picker & Converter](https://oklch.com/#91.18,0.057,105.88,100) - [OKLCH in CSS: why we moved from RGB and HSL—Martian Chronicles, Evil Martians’ team blog](https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl) - [APCA Contrast Calculator](https://www.myndex.com/APCA/) # 3. Design Tools ## UI Kits / Design system ### Shadcn UI - [shadcn/ui](https://ui.shadcn.com/) ### FloatUI - [Float UI - Introduction](https://floatui.com/components) ### Material Design - [Material icons - Material Design](https://material.io/icons/) - [The world's most popular React UI framework - Material-UI](https://material-ui.com/) ### Web Design - Landing - [Design Blocks | Froala](https://www.froala.com/design-blocks) ### Free figma UI components - [Nucleus UI v1.0 – Figma](https://www.figma.com/file/P0wBQZtYJfuohxKvB2P7MS/Nucleus-UI-v1.0?node-id=770%3A5839) - [Tools and Resources | Facebook Design](http://facebook.design/toolsandresources/) - [Free Figma UI Kit and Design System | Untitled UI](https://www.untitledui.com/free-figma-ui-kit) ## Free Icons & Illustrations - Illustrations - [unDraw - Open source illustrations for any idea](https://undraw.co/) - [DrawKit - Beautiful free vector illustrations](https://www.drawkit.io/) - [Iconfinder - 460+ high-quality illustrations](https://www.iconfinder.com/illustrations) - [Illustrations Gallery - ManyPixels - # 2,000+ royalty-free illustrations](https://gallery.manypixels.co/) - [Humaaans: Mix-&-Match illustration library](https://www.humaaans.com/) - [Open Peeps, Hand-Drawn Illustration Library](https://openpeeps.com/) - [Storyset | Customize, animate and download illustration for free](https://storyset.com/) - Icons - [NounProject](http://thenounproject.com/) - Free vector icons - [Iconbuddy — 200K+ open source free svg icons](https://iconbuddy.app/) - [Free vector icons - SVG, PSD, PNG, EPS & Icon Font - Thousands of Free Icons](http://www.flaticon.com/) - [Endless Icons | Free Icon Library](http://www.endlessicons.com/) - [Free icons by first-class designers - IconStore](https://iconstore.co/) ## Images & Photos - Free stock photos - [Unsplash | Free High-Resolution Photos](https://unsplash.com/) - [Pixabay - Images gratuites et libres de droit](http://pixabay.com/) - [StockSnap.io - Beautiful Free Stock Photos (CC0)](https://stocksnap.io/) - [Free stock photos - Pexels](https://www.pexels.com/) - [Stock Up - 13,000+ Free Stock Photos](https://www.sitebuilderreport.com/stock-up) - [Stock photos that don't suck -- Dustin Senos ✌️ -- Medium](https://medium.com/@dustin/stock-photos-that-dont-suck-62ae4bcbe01b) - Free background images - [Free background images - Subtle Patterns](https://www.toptal.com/designers/subtlepatterns/) - [MockDrop](https://mockdrop.io/) - Product Mockup - Mockup with backgrounds - [Devices | Facebook Design](http://facebook.design/devices) - Remove background on images - [Bonanza - Background burner](https://www.bonanza.com/background_burner) ## Add high-quality animations to any native app - [Lottie](http://airbnb.design/lottie/) - Lottielab (different of the one above) - [7 ways to use Lottielab to create slick animations for sites and apps / X](https://twitter.com/drewosophy/status/1714666472822214919) - [LottieFiles - Free lightweight animations for website & apps.](https://lottiefiles.com/) ## Mockups tools 1. [Excalidraw](https://excalidraw.com/): for 5 to 30 min prototypes. Drawing in your browser with shareable links, for free 2. [Galileo AI](https://www.usegalileo.ai/explore): Mockups generated with AI 3. [Balsamiq:](https://balsamiq.com/) or [Frame0](https://frame0.app/): for basic/quick prototypes 4. [Figma](https://www.figma.com): for 'polished'/pixel-perfect prototypes - [Origami Studio - Design Prototyping](https://origami.design/) (compatible with Figma), to animate prototypes ## Videos ### Free stock footage - Video - [Free Stock Video and HD video clips - Videvo.net](https://www.videvo.net/) ### Record app demo - [Recordit: Record screencasts fast & free! with GIF Support!](http://recordit.co/) - [Appetize.io](https://appetize.io/)