├── LICENSE └── README.md /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Hosna Qasmei 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Awesome Design Resources 2 | 3 | A curated list of awesome things to elevate your design skills. 4 | 5 | ## Table of Contents 6 | 7 | - [UI Component Libraries](#ui-component-libraries) 8 | - [AI Generated Designs Resources](#ai-generated-designs-resources) 9 | - [Design Inspiration & Resources](#design-inspiration--resources) 10 | - [Design-Focused Twitter Accounts](#design-focused-twitter-accounts) 11 | - [Design Courses](#design-courses) 12 | - [Design-Focused YouTube Channels](#design-focused-youtube-channels) 13 | - [Design Tools & Software](#design-tools--software) 14 | - [Design Podcasts](#design-podcasts) 15 | - [Design Books & Publications](#design-books--publications) 16 | - [Design Blog Posts](#design-blog-posts) 17 | 18 | ## UI Component Libraries 19 | 20 | | Website                             | Description | 21 | | --------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | 22 | | [Magic UI](https://magicuikit.com/) | UI library for Design Engineers | 23 | | [SyntaxUI](https://syntaxui.com/) | Free-to-use UI elements designed for rapid development | 24 | | [Aceternity UI](https://ui.aceternity.com/) | Copy paste the most trending components and use them in your websites without having to worry about styling and animations | 25 | | [shadcn/ui](https://ui.shadcn.com/) | Beautifully designed components that you can copy and paste into your apps | 26 | | [daisyUI](https://daisyui.com/) | The most popular component library for Tailwind CSS | 27 | | [tremor raw](https://raw.tremor.so/docs/getting-started/installation) | React components to build charts and dashboards | 28 | | [Copy UI](https://copyui.com/) | We create stunning world-class components and templates, making them easily accessible to everyone | 29 | | [Grayscal.es](https://grayscal.es/components) | Beautiful, ready-to-use components built with Shadcn UI that you can copy and paste into your project | 30 | | [CodeUI](https://www.codeui.co.in/) | Beautifully designed mobile responsive components that you can directly copy paste into your projects | 31 | | [motion-primitives](https://motion-primitives.com/) | Build beautiful animated components | 32 | | [Luxe](https://luxe.guhrodrigues.com/) | Library of components copy and paste to illuminate your applications with elegance and sophistication | 33 | | [NextUI](https://nextui.org/) | Beautiful, fast and modern React UI library | 34 | | [Edil Ozi](https://www.edil-ozi.pro/) | Component Library for Developers | 35 | | [LunarUI](https://lunarui.dev/) | Lunar UI is a collection of interactive Tailwind CSS components built for React and Vue.js. | 36 | | [DynaUI](https://www.dynaui.design/) | Animated UI Library designed for Developers | 37 | | [Just D.](https://getjustd.com/) | A chill set of React components, built on top of React Aria Components, all about keeping the web accessible. | 38 | | [Tailus UI React](https://ui.tailus.io/) | Highly customizable React components for crafting modern, personalized websites and applications. | 39 | 40 | ## AI Generated Designs Resources 41 | 42 | | Website                             | Description | 43 | | --------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | 44 | | [v0](https://v0.dev/) | Generate UI with shadcn/ui from simple text prompts and images | 45 | | [Magic Patterns](https://www.magicpatterns.com/) | Iterate on components & designs in our AI-native editor. Export to React or Figma | 46 | 47 | ## Design Inspiration & Resources 48 | 49 | | Website                             | Description | 50 | | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | 51 | | [Landings](https://landings.dev/) | Discover hundreds of landing pages created by leading companies for your design inspiration | 52 | | [Dribbble](https://dribbble.com/) | A platform for designers to showcase their work and find inspiration | 53 | | [Behance](https://www.behance.net/) | A network for creatives to display their portfolios and discover new talent | 54 | | [Awwwards](https://www.awwwards.com/) | Honors and showcases the best of web design and development | 55 | | [Mobbin](https://www.mobbin.design/) | A library of the latest mobile design patterns, hand-picked from the best apps | 56 | | [PageFlows](https://pageflows.com/) | Design better user flows by learning from proven products | 57 | | [CollectUI](https://collectui.com/) | Daily UI inspiration from daily ui challenges and beyond | 58 | | [UXArchive](https://uxarchive.com/) | UX Archive is a collection of user experiences from real companies | 59 | | [One Page Love](https://onepagelove.com/) | Curation of 8445 Single Page websites | 60 | | [Framerize](https://framerize.co/) | Discover beautifully designed Framer components | 61 | | [GreatFrontEnd](https://www.greatfrontend.com/projects) | A platform to build high quality project challenges with beautiful & modular designs | 62 | | [Vercel Design](https://vercel.com/design) | Vercel Brand Features & Products | 63 | 64 | ## Design-Focused Twitter Accounts 65 | 66 | | Account                             | Description | 67 | | --------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | 68 | | [Ran Segall](https://x.com/ransegall) | Helping people make a living as designers. Building Flux Academy | 69 | | [Amjad](https://x.com/Amjaddsn) | Multidisciplinary Designer & Founder | 70 | | [shadcn](https://x.com/shadcn) | The GOAT | 71 | | [Dillion Verma](https://x.com/dillionverma) | Creator of Magic UI | 72 | | [Chetan Verma](https://x.com/chetanvermaaa) | Design & Development partner for fast-growing startups and agencies | 73 | | [Julien Thibeaut](https://x.com/Ibelick) | Design Engineer | 74 | | [Namya Khan](https://x.com/namyakhann) | Building high-converting websites for founders who can’t afford to fail | 75 | | [Logan Liffick](https://x.com/logan_liffick) | Design Engineer | 76 | | [Emil Kowalski](https://x.com/emilkowalski_) | Design Engineer | 77 | | [Nanda](https://x.com/nandafyi) | Engineer at ▲, writes about computers and stuff @nan.fyi | 78 | | [Glenn Hitchcock](https://x.com/glennui) | Director of Design Engineering ▲ | 79 | | [Julien Thibeaut](https://x.com/ibelick) | Design Engineer | 80 | | [JohnPhamous](https://x.com/JohnPhamous) | Lead design engineer at ▲ | 81 | | [Paco Coursey](https://x.com/pacocoursey) | Design engineer at Linear | 82 | | [Mariana Castilho](https://x.com/mrncst) | Product design and code at @pierredotco | 83 | | [Chan Karunamuni](https://x.com/chan_k) | Human Interface designer at Apple | 84 | | [T. Costa](https://x.com/tcosta_co) | Designer/Cofounder of https://fey.com | 85 | 86 | ## Design-Focused Twitter Accounts 87 | 88 | | Account                             | Description | 89 | | --------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | 90 | | [Ran Segall](https://x.com/ransegall) | Helping people make a living as designers. Building Flux Academy | 91 | | [Amjad](https://x.com/Amjaddsn) | Multidisciplinary Designer & Founder | 92 | | [shadcn](https://x.com/shadcn) | The GOAT | 93 | | [Dillion Verma](https://x.com/dillionverma) | Creator of Magic UI | 94 | | [Chetan Verma](https://x.com/chetanvermaaa) | Design & Development partner for fast-growing startups and agencies | 95 | | [Julien Thibeaut](https://x.com/Ibelick) | Design Engineer | 96 | | [Namya Khan](https://x.com/namyakhann) | Building high-converting websites for founders who can’t afford to fail | 97 | | [Logan Liffick](https://x.com/logan_liffick) | Design Engineer | 98 | | [Emil Kowalski](https://x.com/emilkowalski_) | Design Engineer | 99 | | [Nanda](https://x.com/nandafyi) | Engineer at ▲, writes about computers and stuff @nan.fyi | 100 | | [Glenn Hitchcock](https://x.com/glennui) | Director of Design Engineering ▲ | 101 | | [Julien Thibeaut](https://x.com/ibelick) | Design Engineer | 102 | | [JohnPhamous](https://x.com/JohnPhamous) | Lead design engineer at ▲ | 103 | | [Paco Coursey](https://x.com/pacocoursey) | Design engineer at Linear | 104 | | [Mariana Castilho](https://x.com/mrncst) | Product design and code at @pierredotco | 105 | | [Chan Karunamuni](https://x.com/chan_k) | Human Interface designer at Apple | 106 | | [T. Costa](https://x.com/tcosta_co) | Designer/Cofounder of https://fey.com | 107 | 108 | ## Design Courses 109 | 110 | | Courses                             | Description | 111 | | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | 112 | | [Animations on the web](https://animations.dev/) | The interactive learning experience that teaches you how to build animations on the web. | 113 | | [Interactive SVG](https://www.svg-animations.how/) | A text-based mini-course on making whimsical, playful SVG animations by [Nanda Syahrasyad](https://x.com/nandafyi). | 114 | 115 | ## Design Tools & Software 116 | 117 | | Tool                             | Description | 118 | | ------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------- | 119 | | [Figma](https://www.figma.com/) | A collaborative design tool for creating user interfaces and prototypes | 120 | | [Adobe Creative Cloud](https://www.adobe.com/creativecloud.html) | A suite of design and creative applications, including Photoshop, Illustrator, and InDesign | 121 | | [Canva](https://www.canva.com/) | A versatile design tool that makes it easy to create visuals for various purposes | 122 | | [smashing.tools](https://smashing.tools/design-kit) | A collection of design tools and resources for developers and designers | 123 | | [BrandBird](https://www.brandbird.app/studio) | The powerful image editor for beautiful screenshots | 124 | | [CleanShot X](https://cleanshot.com/) | Capture your Mac’s screen like a pro | 125 | | [Shots](https://shots.so/) | Create Amazing Mockups | 126 | | [CustomGradient](https://customgradient.com/) | A web app that let's you customize your background gradient | 127 | | [Fffuel](https://www.fffuel.co/) | A collection of color tools and free SVG generators for gradients, patterns, textures, shapes & backgrounds | 128 | | [Trending Color Palettes](https://coolors.co/palettes/trending) | Crie a paleta perfeita ou inspire-se com milhares de belos esquemas de cores | 129 | | [Lordicon](https://lordicon.com/) | Lordicon is a growing library full of carefully crafted, high-quality static and animated icons you won’t find anywhere else. | 130 | 131 | ## Design Podcasts 132 | 133 | | Podcast                             | Description | 134 | | --------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | 135 | | [Design Details](https://www.designdetails.fm/) | A podcast about the people who design our digital future, hosted by Brian Lovin and Marshall Bock | 136 | | [99% Invisible](https://99percentinvisible.org/) | A podcast about all the thought that goes into the things we don't think about, hosted by Roman Mars | 137 | 138 | ## Design Books & Publications 139 | 140 | | Book                             | Description | 141 | | --------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | 142 | | [The Design of Everyday Things](https://www.amazon.com/Design-Everyday-Things-Revised-Expanded/dp/0465050654) | A classic book by Don Norman that explores the principles of good design and how to create products that are user-friendly and intuitive | 143 | | [Universal Principles of Design](https://www.amazon.com/Universal-Principles-Design-Revised-Updated/dp/1592535879) | A comprehensive reference that covers 125 fundamental design principles, theories, and methodologies | 144 | | [Storytelling with Data](https://www.amazon.com/Storytelling-Data-Visualization-Business-Professionals/dp/1119002257) | Storytelling with Data teaches you the fundamentals of data visualization and how to communicate effectively with data | 145 | 146 | ## Design Blog Posts 147 | 148 | | Blog Post                             | Description | 149 | | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 150 | | [4 Rules for Intuitive UX](https://www.learnui.design/blog/4-rules-intuitive-ux.html) | This article outlines four essential rules for creating intuitive user experiences | 151 | | [ui.land - Nanda](https://ui.land/interviews/nanda) | An interview with Nanda, Engineer at Vercel, writes about computers and stuff @nan.fyi | 152 | | [Good Design](https://shud.in/posts/good-design) | The article addresses the evolution of good design, emphasizing that complexity does not necessarily improve the quality of a project | 153 | | [Creating New, Not More](https://www.wking.dev/logs/creating-new-not-more) | The author shares his strategy of studying great designers and exploring different visual references to develop a "creative muscle" that allows him to create new patterns and ideas. | 154 | --------------------------------------------------------------------------------