{"id":23316919,"url":"https://github.com/robleto/design-resources","last_synced_at":"2025-04-07T03:53:01.987Z","repository":{"id":267123200,"uuid":"900321709","full_name":"robleto/design-resources","owner":"robleto","description":"A curated list of top tools and resources for designers and developers to elevate their projects.","archived":false,"fork":false,"pushed_at":"2025-03-31T04:07:16.000Z","size":1061,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-31T04:24:50.935Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/robleto.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-08T13:37:16.000Z","updated_at":"2025-03-31T04:07:19.000Z","dependencies_parsed_at":"2024-12-08T14:32:07.105Z","dependency_job_id":"fe36a311-b9ee-49c1-a6eb-8ac5f22a7c3f","html_url":"https://github.com/robleto/design-resources","commit_stats":null,"previous_names":["robleto/design-resources"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robleto%2Fdesign-resources","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robleto%2Fdesign-resources/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robleto%2Fdesign-resources/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robleto%2Fdesign-resources/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/robleto","download_url":"https://codeload.github.com/robleto/design-resources/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247589833,"owners_count":20963022,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-20T16:18:27.704Z","updated_at":"2025-04-07T03:53:01.971Z","avatar_url":"https://github.com/robleto.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/robleto"],"categories":[],"sub_categories":[],"readme":"\n![image](https://images.unsplash.com/photo-1533640750342-723c1a4912e2?ixlib=rb-4.0.3\u0026q=85\u0026fm=jpg\u0026crop=entropy\u0026cs=srgb)\n\n\n# Design Resources\n\n\n_A collection of links to articles, sites and resources that have shaped my professional designing and personal development curated by Greg Robleto (robleto.com)._  \n\n\n\n## Table of Contents\n\nDesign\n\n1. [Design 101](/1da1d6503f7c4bdd9f2d1caa643708fd#0a019ad7be244195947ef068da5e5095)\n2. [Design Strategies and Frameworks](/1da1d6503f7c4bdd9f2d1caa643708fd)\n3. [Design Inspiration](/1da1d6503f7c4bdd9f2d1caa643708fd)\n4. [Artwork and Assets](notion://www.notion.so/robleto/Robleto-s-Recommended-Resources-1da1d6503f7c4bdd9f2d1caa643708fd#artwork-and-assets)\n5. [Typography](/1da1d6503f7c4bdd9f2d1caa643708fd)\n6. [Design Blogs and Online Publications](notion://www.notion.so/robleto/Robleto-s-Recommended-Resources-1da1d6503f7c4bdd9f2d1caa643708fd#design-blogs-and-online-publications)\n7. [Design Books](notion://www.notion.so/robleto/Robleto-s-Recommended-Resources-1da1d6503f7c4bdd9f2d1caa643708fd#design-books)\n8. [Website Building](notion://www.notion.so/robleto/Robleto-s-Recommended-Resources-1da1d6503f7c4bdd9f2d1caa643708fd#website-building)\n9. [CSS Styling](notion://www.notion.so/robleto/Robleto-s-Recommended-Resources-1da1d6503f7c4bdd9f2d1caa643708fd#css-styling)\n10. [UX in Motion](notion://www.notion.so/robleto/Robleto-s-Recommended-Resources-1da1d6503f7c4bdd9f2d1caa643708fd#ux-in-motion)\n11. [CSS Animation](notion://www.notion.so/robleto/Robleto-s-Recommended-Resources-1da1d6503f7c4bdd9f2d1caa643708fd#css-animation)\n12. [Everything Else](/1da1d6503f7c4bdd9f2d1caa643708fd)\n\n---\n\n\n![image](https://images.unsplash.com/photo-1471666875520-c75081f42081?ixlib=rb-4.0.3\u0026q=85\u0026fm=jpg\u0026crop=entropy\u0026cs=srgb)\n\n\n## 01.  Design 101\n\n\n\u003e Design fundamentals shape every aspect of the field. Core principles, terminology, and methods create the essential framework behind effective design decisions. These resources illuminate the foundations of good design.\n\n\n### 1.1 Design Principles\n\n- [10 Principles for \"Good Design\"](https://www.vitsoe.com/rw/about/good-design): Dieter Rams' influential guide to what makes design truly good—hint: simplicity trumps flash.\n- [Principles.Design](https://principles.design/): A curated collection of design principles that guides smarter, user-focused decision-making.\n- [Laws of UX](https://lawsofux.com/): Essential psychology principles for creating designs that feel natural and intuitive.\n- [Principles of Grids](https://grids.obys.agency/): Obys Agency's engaging exploration of grid systems, featuring real-world examples from their daily practice.\n- [Design KPIs](https://www.linkedin.com/posts/vitalyfriedman_design-business-kpis-activity-7021371065578737664-EalQ/): Vitaly Friedman explores how to measure design success through metrics that connect creative work to business outcomes.\n\n\n\n\n\n---\n\n\n![image](https://images.unsplash.com/photo-1531403009284-440f080d1e12?ixlib=rb-4.0.3\u0026q=85\u0026fm=jpg\u0026crop=entropy\u0026cs=srgb)\n\n\n## 02.  Design Strategies \u0026 Frameworks\n\n\n\u003e From Design Thinking to Lean UX, proven frameworks guide teams through complex design challenges with systematic, user-centered approaches that transform ideas into impactful solutions.\n\n\n### **2.1 Design Thinking** \n\n- [IBM Design Thinking](https://www.youtube.com/watch?v=pXtN4y3O35M\u0026feature=youtu.be): A practical framework that puts users at the center of problem-solving through collaborative innovation.\n- [Design Thinking \u0026 Ethics](https://www.figma.com/resources/learn-design/ethics/): Figma's guide to incorporating ethical considerations into design, focusing on responsible and inclusive decision-making.\n- [IDEO Design Kit Methods](https://www.designkit.org/methods): [IDEO.org](http://ideo.org/)'s comprehensive toolkit of human-centered design methods for effective problem-solving.\n- [How to use Design Thinking for Productive Kickoffs](https://ux.shopify.com/how-to-use-design-thinking-for-productive-kickoffs-4646b802127d): Shopify's practical guide to using design thinking principles for better team alignment and project starts.\n- [A Product Design Process for the Real World](https://www.tedgoas.com/blog/product-design-process/?ref=sidebar): A hands-on approach to product design that balances real-world constraints with effective team collaboration.\n\n### **2.2 Double Diamond**\n\n- [The Double Diamond: A Design Process for Everyone](https://www.designcouncil.org.uk/news-opinion/double-diamond): A foundational framework from the Design Council that maps out the essential stages of design thinking—from problem discovery to solution delivery.\n- [The Double Diamond: A Design Thinking Framework](https://www.interaction-design.org/literature/article/the-double-diamond-a-design-thinking-framework): A clear breakdown of how the Double Diamond model guides designers through alternating phases of expansive and focused thinking.\n\n### **2.3 Human-Centered Design**\n\n- [Design Kit, the HCD Toolkit](https://www.ideo.com/post/design-kit): A comprehensive guide from [IDEO.org](http://ideo.org/) that illuminates human-centered design through practical methods and real-world examples.\n- [What is Human-Centered Design?](https://www.interaction-design.org/literature/topics/human-centered-design): An essential exploration of empathy-driven design that shows how to create solutions that truly connect with users' needs.\n- [Using HCD to Solve the Right Problems](https://aveus.com/use-human-centered-design-to-solve-the-right-problems/): A strategic look at how human-centered design helps teams identify and address fundamental challenges.\n\n### 2.4 Jobs to be Done\n\n- [Jobs to Be Done Framework](https://www.intercom.com/blog/the-jobs-to-be-done-framework): Intercom's practical guide to understanding what truly motivates customers in product development.\n- [Jobs-to-be-Done: A Design Thinking Framework](https://uxdesign.cc/jobs-to-be-done-a-design-thinking-framework-5c6b5c848f1e): A clear guide to blending JTBD with design thinking for better user solutions.\n- [Jobs-to-be-Done: A Beginner's Guide](https://www.productschool.com/blog/jobs-to-be-done-a-beginners-guide/): Product School breaks down JTBD essentials with hands-on insights for product teams.\n\n### **2.5 Lean UX**\n\n- [Applying Lean Principles to Improve User Experience](https://www.amazon.com/Lean-UX-Applying-Principles-Experience/dp/1449311652): Jeff Gothelf's \"Lean UX\" shows how to blend Lean and Agile methods to create meaningful user experiences.\n- [A Beginner's Guide to Lean UX](https://www.invisionapp.com/inside-design/lean-ux/): InVision offers a clear introduction to Lean UX principles with actionable tips for your design workflow.\n- [Design Sprints: A Practical Guide](http://www.gv.com/sprint/): GV outlines their proven five-day sprint method for rapid prototyping and idea validation.\n\n---\n\n\n![image](https://images.unsplash.com/photo-1496449903678-68ddcb189a24?ixlib=rb-4.0.3\u0026q=85\u0026fm=jpg\u0026crop=entropy\u0026cs=srgb)\n\n\n## 03. Design Inspiration\n\n\n\u003e Explore a world of creative inspiration through expertly curated collections featuring exceptional designs, innovative interfaces, and transformative digital experiences.\n\n\n### 3.1  Dark Mode Inspiration\n\n- [Dark Design](https://www.dark.design/): A curated collection of the finest dark-themed websites, handpicked by designers for designers.\n- [Dark Mode Design](https://www.darkmodedesign.com/): An elegant showcase of dark mode websites that illuminates the best in low-light design.\n\n### 3.2  Email Inspiration\n\n- [Really Good Emails](https://reallygoodemails.com/): A curated gallery of exceptional email designs.\n\n### 3.3  Illustration Inspiration\n\n- [Illustration Universe](https://illustrationuniverse.com/): A curated gallery of stunning product illustrations from around the world.\n\n### 3.4  Landing Page Inspiration\n\n- [Landingfolio](https://landingfolio.com/): A vast library of landing page designs, templates, and components.\n- [Landings](https://landings.dev/): A curated gallery of landing pages with customizable filters.\n- [Lapa Ninja](https://www.lapa.ninja/): Daily-updated collection of landing page designs.\n\n### 3.5  Logo / Brand Inspiration\n\n- [Logobook](https://www.logobook.com/): A searchable archive of over 5,000 logos organized by designer, shape, object, and style.\n- [Logo System](https://logosystem.co/): A collection of 900+ logo designs spanning minimalist marks and wordmarks.\n\n### 3.6. Onboarding Inspiration\n\n- [Refero's Trending User Flows](https://refero.design/search?flow_types%5Bid%5D%5B%5D=1\u0026order=trending): A curated collection of contemporary user flow designs from across the digital landscape.\n\n### 3.7. Portfolio Inspiration\n\n- [Killer Portfolio](https://killerportfolio.com/): A showcase where exceptional portfolio websites come together.\n- [PersonalSit.es](https://personalsit.es/): A directory where individuals share their personal websites and digital spaces.\n- [Prettyfolio](https://prettyfolio.com/): A collection celebrating remarkable portfolio designs from across the web.\n\n### 3.8. Website Inspiration\n\n- [One Page Love](https://onepagelove.com/): Features single-page website designs, templates, and resources.\n- [Navbar Gallery](https://www.navbar.gallery/): Displays navigation bar designs from across the web.\n- [404s](https://www.404s.design/): Shows creative approaches to error page design.\n- [Footer Design](https://www.footer.design/): Presents website footers organized by category.\n- [Refero](https://refero.design/): Houses design references from web applications.\n- [Siteinspire](https://siteinspire.com/): Exhibits web designs across various industries.\n\n---\n\n\n![image](https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.0.3\u0026q=85\u0026fm=jpg\u0026crop=entropy\u0026cs=srgb)\n\n\n## 04. CSS \n\n\n### 🗺️ Cheat Sheets\n\n- [CSS Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/): Essential reference for Flexbox properties fro CSS Tricks, examples, and browser support.\n- [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/): Complete CSS Grid reference from CSS Tricks with examples and compatibility information.\n\n### 📚 Books\n\n\n### Design Collections\n\n1. [Dribbble](https://dribbble.com/)\n2. [Behance](https://www.behance.net/search/projects?field=ui%2Fux)\n\n### \n\n\n---\n\n\n# \n04. Artwork and Assets\n\n\n[bookmark](https://www.figma.com/file/1QJt81Dfgwo85nXJ6yHX35/Dribbble-Case-study-(Copy)?node-id=1415%3A1947\u0026t=ukSSTNM8qK8hjZt9-1)\n\n\n### **Mockups**\n\n\n[Canva Smartmockups](https://www.canva.com/smartmockups) - Pro feature\n\n\n[Things](https://things.morflax.com/) - Generator\n\n\n### **Stock photos \u0026 videos**\n\n\n[Unsplash](https://unsplash.com/) - Royalty free images\n\n\n[Coverr](http://coverr.co/) - Free stock video footage\n\n\n[Pexels](https://www.pexels.com/) - Royalty free images and videos\n\n\n[Stocksy](https://www.stocksy.com/) - High quality stock photos\n\n\n[Artgrid](https://artgrid.io/) - High quality royalty free videos\n\n\n### **Icons and Illustrations**\n\n\n[Blush – Illustrations for everyone](https://blush.design/)\n\n\n[The Noun Project](https://thenounproject.com/)\n\n\n[Undraw](https://undraw.co/)\n\n\n### **Backgrounds**\n\n\n[Haikei](https://app.haikei.app/) \n\n\n[Animated Abstract Shapes](https://ui8.net/anton-mishin/products/loops?rel=uxhunt)\n\n\n### **Maps**\n\n\n[Map styles with google](https://mapstyle.withgoogle.com/)\n\n\n### **Colors**\n\n\n[Material design the color system](https://material.io/design/color/the-color-system.html#color-usage-and-palettes)\n\n\n[Web Gradients](https://webgradients.com/)\n\n\n### **Patterns**\n\n\n[https://patterncollect.com/](https://patterncollect.com/)\n\n\n---\n\n\n![image](https://images.unsplash.com/photo-1461958508236-9a742665a0d5?ixlib=rb-4.0.3\u0026q=85\u0026fm=jpg\u0026crop=entropy\u0026cs=srgb)\n\n\n# 05. Typography\n\n\n\u003e Typography goes beyond fonts to create visual harmony and enhance readability. These resources explore the craft and science, providing insights, inspiration, and tools that elevate design.\n\n\n###  📝 Resources \u0026 Articles\n\n- [Butterick's Practical Typography](https://practicaltypography.com/): A clear, comprehensive guide to typography fundamentals and best practices for better text presentation.\n- [Typeface Mechanics 001](https://frerejones.com/blog/typeface-mechanics-001/): Tobias Frere-Jones explores why optical adjustments in typeface design matter more than mathematical precision.\n- [Typeface Mechanics 002](https://frerejones.com/blog/typeface-mechanics-002/): A deeper look into how weight distribution shapes the harmony of typeface design.\n- [Signifier Design Information](https://klim.co.nz/blog/signifier-design-information/): An inside look at the development and inspiration behind the Signifier typeface by Kris Sowersby.\n- [Typelist](https://typelist.upstatement.com/): A handpicked showcase of typefaces in action, perfect for designers seeking fresh typography ideas.\n\n### 💡 Inspiration/Miscellaneous\n\n- [Discover Typography](https://discover.typography.com/): An interactive gallery for exploring and discovering diverse typefaces.\n- [Behance Typography](https://www.behance.net/search/projects?field=typography\u0026sort=recommended): A curated showcase of typography projects from designers worldwide.\n- [Typewolf](https://www.typewolf.com/): A curated collection of fonts in real-world use, with expert recommendations and examples.\n- [Font Review Journal](https://fontreviewjournal.com/): Thoughtful, detailed reviews of typefaces exploring their design, history, and uses.\n- [100 Days of Fonts](http://100daysoffonts.com/): A daily showcase of creative font combinations to inspire your typography choices.\n- [Fonts in Use](https://fontsinuse.com/): A comprehensive archive documenting typography in real-world design across all media.\n- [Awwwards Free Fonts](https://www.awwwards.com/awwwards/collections/free-fonts/): A carefully selected collection of high-quality free fonts.\n\n### 🛠️ Tools\n\n- [WhatFont](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en): A browser extension that instantly identifies fonts on any webpage, making it an essential tool for designers.\n- [Wordmark.it](http://wordmark.it/): A simple tool that displays your text in all fonts installed on your computer, helping you compare and choose the perfect typeface.\n\n### 📚 Books\n\n- [The Elements of Typographic Style](https://www.goodreads.com/book/show/44735.The_Elements_of_Typographic_Style) by Robert Bringhurst: The definitive guide to typography that masterfully combines historical insights with practical wisdom.\n- [New Perspectives in Typography](https://www.goodreads.com/book/show/22676114-new-perspectives-in-typography): A fresh look at modern typographic design through diverse contemporary examples.\n- [Designing News](http://www.francescofranchi.com/designingnews) by Francesco Franchi: A deep dive into the intersection of visual storytelling and editorial design.\n- [The Intelligent Lifestyle Magazine](https://gestalten.com/products/the-intelligent-lifestyle-magazine) by Francesco Franchi: A masterclass in crafting sophisticated magazine layouts and editorial design.\n- [Thinking with Type](https://www.goodreads.com/book/show/69736.Thinking_with_Type) by Ellen Lupton: An essential primer on typography fundamentals and their practical application in design.\n\n### 🆓 Free Fonts\n\n- [Atipo Foundry](http://atipofoundry.com/): Features distinctive free and commercial typefaces with modern designs.\n- [Open Foundry](https://open-foundry.com/fonts): Curates high-quality open-source fonts for designers.\n- [Google Fonts](https://fonts.google.com/): Offers an extensive collection of free, open-source fonts for both web and print use.\n\n---\n\n\n# \n06. Design Blogs \u0026 Online Publications\n\n\n\n### **Online Design Publications**\n\n\n[bookmark](https://www.smashingmagazine.com/)\n\n1. [Smashing Magazine](https://www.smashingmagazine.com/)\n2. [A List Apart](https://alistapart.com/)\n3. [UX Design](https://uxdesign.cc/)\n4. [Design Better](https://www.designbetter.co/)\n5. [Medium Design](https://medium.com/topic/design)\n6. [UX Design Weekly](https://uxdesignweekly.com/)\n7. [Interaction Design Foundation](https://www.interaction-design.org/)\n\n### **Portals \u0026 Reading**\n\n\n[bookmark](https://uxdesign.cc/)\n\n1. [UX Design](https://uxdesign.cc/)\n2. [Nielsen Norman Group](https://www.nngroup.com/)\n3. [A List Apart](https://alistapart.com/)\n4. [Smashing Magazine](https://www.smashingmagazine.com/)\n5. [UX Design Weekly](https://uxdesignweekly.com/)\n6. [UX Planet](https://uxplanet.org/)\n7. [UX Collective](https://uxdesign.cc/)\n8. [UX Design Blog](https://uxdesign.blog/)\n9. [The Year of the Looking Glass](https://medium.com/the-year-of-the-looking-glass)\n10. [It's Nice That](https://www.itsnicethat.com/)\n11. [Desk Magazine](https://vanschneider.com/blog/)\n12. [HeyDesigner](https://heydesigner.com/)\n13. [MindSparkle Magazine](https://mindsparklemag.com/)\n\n\n\n\n\n---\n\n\n# \n07. Design Books\n\n\n[bookmark](https://sensible.com/dont-make-me-think/)\n\n\n### Business\n\n1. [Inspired: How to Create Tech Products Customers Love](https://www.amazon.com/Inspired-Create-Products-Customers-Love/dp/149197196X) by Marty Cagan\n\n### \n**Product Designer**\n\n1. [Hooked](https://www.amazon.com/Hooked-How-Build-Habit-Forming-Products/dp/1591847788) by Nir Eyal\n2. [Ux Strategy: How to Devise Innovative Digital Products that People Want](https://www.amazon.com/Ux-Strategy-Innovative-Digital-Products/dp/0134056445) by Jaime Levy\n3. [Don’t Make Me Think](https://www.amazon.com/Dont-Make-Think-Revisited-Usability/dp/0321965515) - Steve Krug\n4. [Designing Interactions](https://www.amazon.com/Designing-Interactions-Bill-Moggridge/dp/0738999320) by Bill Moggridge\n5. [The Design of Everyday Things](https://www.amazon.com/Design-Everyday-Things-Revised-Expanded/dp/0465050654) by Donald A. Norman\n6. [The Shape of Design](https://www.amazon.com/Shape-Design-Frank-Chimero/dp/1940282050) by Frank Chimero\n7. [Rework](https://www.amazon.com/Rework-Jason-Fried/dp/0307463745) by Jason Fried and David Heinemeier Hansson\n8. [Sprint](https://www.amazon.com/Sprint-Solve-Big-Problems-Little-Time/dp/150112174X) by Jake Knapp, John Zeratsky, and Braden Kowitz\n9. [The Inmates are Running the Asylum](https://www.amazon.com/Inmates-Running-Asylum-Insane-Situations/dp/0133173586) by Alan Cooper\n10. [Lean UX](https://www.amazon.com/Lean-UX-Designers-Developers-Collaboration/dp/1491953608) by Jeff Gothelf and Josh Seiden\n11. [The Lean Product Playbook](https://www.amazon.com/Lean-Product-Playbook-Launch-Brilliant/dp/1491974514) by Dan Olsen\n12. [The Design Thinking Playbook](https://www.amazon.com/Design-Thinking-Playbook-Practical-Innovators/dp/1119431052) by Michael Lewrick, Patrick Link, and Larry Leifer\n13. [Universal Principles of Design](https://www.amazon.com/Universal-Principles-Design-William-Lidwell/dp/159253008X) by William Lidwell, Kritina Holden, and Jill Butler\n14. [Scaling Up Excellence](https://www.amazon.com/Scaling-Up-Excellence-Settling-Less/dp/0804141213) by Robert Sutton and Huggy Rao\n15. [Build Better Products](https://www.amazon.com/Build-Better-Products-Centered-Development/dp/1491971444) by Laura Klein\n\n### \n**UX Researcher**\n\n1. [Don’t Make Me Think: A Common Sense Approach to Web Usability](https://www.amazon.com/Dont-Make-Think-Common-Usability/dp/0321965515) by Steve Krug\n2. [The Design of Everyday Things](https://www.amazon.com/Design-Everyday-Things-Donald-Norman/dp/0465067107) by Don Norman\n3. [Understanding Users: A Practical Guide to User Research Methods](https://www.amazon.com/Understanding-Users-Practical-Research-Methods/dp/0123848690) by Kathy Baxter and Catherine Courage\n4. [Observing the User Experience, Second Edition: A Practitioner's Guide to User Research](https://www.amazon.com/Observing-User-Experience-Second-Practitioners/dp/0123848681) by Mike Kuniavsky\n5. [The Elements of User Experience: User-Centered Design for the Web](https://www.amazon.com/Elements-User-Experience-Centered-Design/dp/1933820249) by Jesse James Garrett\n6. [A Project Guide to UX Design: For User Experience Designers in the Field or in the Making](https://www.amazon.com/Project-Guide-UX-Design-Experience/dp/0321815386) by Russ Unger and Carolyn Chandler\n7. [Designing for Emotion](https://www.amazon.com/Designing-Emotion-Aarron-Walter/dp/0321725544) by Aarron Walter\n8. [100 Things Every Designer Needs to Know About People](https://www.amazon.com/Things-Every-Designer-Needs-Know/dp/0321767535) by Susan M. Weinschenk\n9. [The User is Always Right](https://www.amazon.com/User-Always-Right-Experience-Centered/dp/0321658701) by Steve Mulder\n10. [Laws of UX](https://www.amazon.com/Laws-UX-Jon-Yablonski/dp/173209897X) by Jon Yablonski\n11. [Bottlenecks: Aligning UX Design with User Psychology](https://www.amazon.com/Bottlenecks-Aligning-Design-Psychology-User/dp/0128171896) by David Evans\n12. [Designing for Behavior Change](https://www.amazon.com/Designing-Behavior-Change-Applied-Psychology/dp/1449307728) by Stephen Wendel\n\n### \n**Interaction Designer**\n\n1. [The Design of Everyday Things](https://www.amazon.com/Design-Everyday-Things-Revised-Expanded/dp/0465067107) by Don Norman\n2. [Interaction Design: Beyond Human-Computer Interaction](https://www.amazon.com/Interaction-Design-Beyond-Human-Computer-Interaction-ebook/dp/B00KPYG3VY) by Jenny Preece, Helen Sharp, Yvonne Rogers\n3. [About Face 3: The Essentials of Interaction Design](https://www.amazon.com/About-Face-Essentials-Interaction-Design/dp/1118766571) by Alan Cooper, Robert Reimann, David Cronin, and Christopher Noessel\n4. [Designing Interfaces](https://www.amazon.com/Designing-Interfaces-Patterns-Effective-Interaction/dp/1449379702) by Jenifer Tidwell\n5. [The Art of Interaction Design](https://www.amazon.com/Art-Interaction-Design-John-Zimmerman/dp/0131428479) by John Zimmerman\n6. [Designing Interactions](https://www.amazon.com/Designing-Interactions-Bill-Moggridge/dp/0262134748) by Bill Moggridge\n7. [Emotional Design: Why We Love (or Hate) Everyday Things](https://www.amazon.com/Emotional-Design-Why-Everyday-Things/dp/0465051343) by Don Norman\n8. [Interaction Design: Creating Innovative Applications and Devices](https://www.amazon.com/Interaction-Design-Creating-Innovative-Applications/dp/0123736023) by Dan Saffer\n9. [The UX Book: Process and Guidelines for Ensuring a Quality User Experience](https://www.amazon.com/UX-Book-Process-Guidelines-Ensuring/dp/0123848695) by Rex Hartson and Pardha Pyla\n10. [Seductive Interaction Design: Creating Playful, Fun, and Effective User Experiences](https://www.amazon.com/Seductive-Interaction-Design-Playful-Experiences/dp/0321725568) by Stephen Anderson\n11. [The UX Book: Process and Guidelines for Ensuring a Quality User Experience](https://www.amazon.com/UX-Book-Process-Guidelines-Ensuring/dp/0123848695) by Rex Hartson and Pardha Pyla\n\n### \n\n**User Interface Designer**\n\n1. [The Design of Everyday Things](https://www.amazon.com/Design-Everyday-Things-Donald-Norman/dp/0465067107) by Don Norman\n2. [The Inmates Are Running the Asylum](https://www.amazon.com/Inmates-Running-Asylum-Industrys-Crazy/dp/0672326140) by Alan Cooper\n3. [About Face](https://www.amazon.com/About-Face-Interaction-Design-Essentials/dp/1118766571) by Alan Cooper and Robert Reimann\n4. [Designing with Web Standards](https://www.amazon.com/Designing-Web-Standards-Jeffrey-Zeldman/dp/0321616952) by Jeffrey Zeldman\n5. [Rocket Surgery Made Easy](https://www.amazon.com/Rocket-Surgery-Made-Easy-Usability/dp/0321657292) - Steve Krug\n6. [Universal Principles of Design](https://www.amazon.com/Universal-Principles-Design-William-Lidwell/dp/1592530084) by William Lidwell, Kritina Holden, and Jill Butler\n7. [Designing Interactions](https://www.amazon.com/Designing-Interactions-Bill-Moggridge/dp/0735619670) by Bill Moggridge\n8. [Designing Visual Interfaces](https://www.amazon.com/Designing-Visual-Interfaces-Techniques-User/dp/0134399318) by Kevin Mullet and Darrell Sano\n9. [Sketching User Experiences](https://www.amazon.com/Sketching-User-Experiences-Interactive-Techniques/dp/0123814642) by Bill Buxton\n10. [Designing Interfaces](https://www.amazon.com/Designing-Interfaces-Jennifer-Tidwell/dp/1491927400) by Jenifer Tidwell\n\n### \n**Beginner Designer 101**\n\n1. [Universal Principles of Design](https://www.amazon.com/Universal-Principles-Design-William-Lidwell/dp/1592530020) by William Lidwell\n2. [Designing Interactions](https://www.amazon.com/Designing-Interactions-Bill-Moggridge/dp/0785342650) by Bill Moggridge\n3. [100 Things Every Designer Needs to Know About People](https://www.amazon.com/Things-Designer-Needs-About-People/dp/0132790426) by Susan M. Weinschenk\n4. [Design Is a Job](https://www.amazon.com/Design-Job-Mike-Monteiro/dp/1937557131) by Mike Monteiro\n5. [The User Experience Team of One](https://www.amazon.com/User-Experience-Team-Leah-Buley/dp/1933820074) by Leah Buley\n6. [Designing with Type](https://www.amazon.com/Designing-Type-James-Craig/dp/0471445228) by James Craig\n7. [Graphic Design Thinking: Beyond Form and Function](https://www.amazon.com/Graphic-Design-Thinking-Beyond-Function/dp/1616890775) by Ellen Lupton\n8. [The Shape of Design](https://www.amazon.com/Shape-Design-Frank-Chimero/dp/1457188101) by Frank Chimero\n9. [Solving Product Design Exercises](https://www.amazon.com/Solving-Product-Design-Exercises-Dashinsky/dp/098678631X) by Artiom Dashinsky\n10. [Design for Real Life](https://www.amazon.com/Design-Real-Life-Empathy-Technology/dp/1933820617) by Eric Meyer and Sara Wachter-Boettcher\n11. [The UX Book: Process and Guidelines for Ensuring a Quality User Experience](https://www.amazon.com/UX-Book-Process-Guidelines-Ensuring/dp/0123848695) by Rex Hartson and Pardha Pyla\n12. [The Vignelli canon](https://www.amazon.com/Vignelli-Canon-Massimo-Vignelli/dp/372120055X) by Massimo Vignelli\n13. [The UX Design Process: A Beginner's Guide](https://www.amazon.com/UX-Design-Process-Beginners-Guide/dp/0789751514) by Nick Babich\n14. [The Design Sprint](https://www.amazon.com/Design-Sprint-Solve-Problems-Validated/dp/0636920051305) by Jake Knapp, John Zeratsky, and Braden Kowitz\n15. [The Handbook of Usability Testing: How to Plan, Design, and Conduct Effective Tests](https://www.amazon.com/Handbook-Usability-Testing-Effective-Techniques/dp/0470185477) by Jeffrey Rubin\n16. [The Power of Color in UI Design](https://www.amazon.com/Power-Color-Design-Nick-Babich/dp/0134670048) by Nick Babich\n17. [UX Design for Beginners: A Crash Course in 100 Short Lessons](https://www.amazon.com/UX-Design-Beginners-Crash-Course/dp/1119538050) by James Royal-Lawson, Per Axbom\n18. [How to be a Graphic Designer Without Losing Your Soul](https://www.amazon.com/How-Graphic-Designer-Without-Losing/dp/1786270875) by Adrian Shaughnessy\n\n### **Design Manager**\n\n1. [Managing Humans](https://www.amazon.com/Managing-Humans-Humorous-Software-Development/dp/1484231147) by Michael Lopp\n2. [The Lean Product Playbook](https://www.amazon.com/Lean-Product-Playbook-Launch-Products/dp/1491973760) by Dan Olsen\n3. [Scaling Up Excellence](https://www.amazon.com/Scaling-Up-Excellence-Getting-More/dp/0804137382) by Robert Sutton and Huggy Rao\n4. [Drive: The Surprising Truth About What Motivates Us](https://www.amazon.com/Drive-Surprising-Truth-About-Motivates/dp/1594484805) by Daniel H. Pink\n5. [The Manager's Path](https://www.amazon.com/Managers-Path-Leaders-Navigating-Growth/dp/1491973897) by Camille Fournier\n6. [Inspired: How To Create Tech Products Customers Love](https://www.amazon.com/Inspired-Create-Products-Customers-Love/dp/149197196X) by Marty Cagan\n7. [Crucial Conversations: Tools for Talking When Stakes are High](https://www.amazon.com/Crucial-Conversations-Talking-When-Stakes/dp/0071771328) by Kerry Patterson, Joseph Grenny, Ron McMillan, Al Switzler\n8. [The Power of Intentional Leadership](https://www.amazon.com/Power-Intentional-Leadership-Create-Organization/dp/1633694418) by Joanne Miller\n9. [The Design Thinking Playbook](https://www.amazon.com/Design-Thinking-Playbook-Practical-Innovation/dp/1119555179) by Michael Lewrick, Patrick Link, and Larry Leifer\n10. [Org Design for Design Orgs](https://www.amazon.com/Org-Design-Design-Organizations-Experience/dp/1491953283) by Peter Merholz\n11. [Design Leadership](https://www.amazon.com/Design-Leadership-Creating-Organizations-Experience/dp/1491953286) by Richard Banfield\n\n\n\n\n\n---\n\n\n# \n08. Website Building\n\n\n### 11ty\n\n\n[Installing Node and NPM](https://radixweb.com/blog/installing-npm-and-nodejs-on-windows-and-mac)\n\n\n[Bulding a site with 11ty](https://11ty.rocks/posts/create-your-first-basic-11ty-website/)\n\n\n[Getting Started in 11ty in 3 minutes [video]](https://www.youtube.com/watch?v=BKdQEXqfFA0)\n\n\n[Setting up SCSS on 11ty](https://egghead.io/lessons/11ty-add-sass-compiling-and-watch-for-changes-in-eleventy-11ty)\n\n\n[11ty Resources](https://11ty.rocks/)\n\n\n[11ty Image Optimizer Plugin](https://www.brycewray.com/posts/2021/04/using-eleventys-official-image-plugin/)\n\n\n### \nStrapi CMS\n\n\n[Building a blog with 11ty and Strapi](https://strapi.io/blog/building-a-blog-with-11ty-and-strapi)\n\n\n[Consuming a headless CMS GraphQL API with Eleventy](https://www.webstoemp.com/blog/headless-cms-graphql-api-eleventy/)\n\n\n[11ty x Strapi](https://github.com/malgamves/11ty-x-strapi) (Github repo) \n\n\n[How to publish your blog posts from Strapi to Multiple Platforms - Dev.to, Hashnode, and Medium](https://dev.to/strapi/how-to-publish-your-blog-posts-from-strapi-to-multiple-platforms-devto-hashnode-and-medium-4me3)\n\n\n### \nDNS Settings\n\n\n[What’s my DNS?](https://www.whatsmydns.net/)  (check DNS settings around the globe)\n\n\n[DNS Checker](https://dnschecker.org/) (similar to What’s my DNS?)\n\n\n### \n\n\n\n---\n\n\n# \n09. CSS Styling\n\n\n\n### CSS Gradients\n\n- [CSS Gradient Generator](https://angrytools.com/css-generator/gradient/) - A handy tool for creating custom gradients with smooth transitions, perfect for getting just the right blend for your design.\n- [Deep Dive into Radial and Conic Gradients](https://www.smashingmagazine.com/2022/01/css-radial-conic-gradient/) - Get your gradients looking sharp with this deep dive into radial and conic styles.\n- [CSS Mix Blend Mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) - Learn how to layer and blend CSS elements for visually striking effects.\n\n### Flexbox\n\n- [Vertically Centering Text](https://www.w3docs.com/snippets/css/how-to-vertically-center-text-with-css.html#use-css-flexbox-8) - Flexbox makes it surprisingly easy to get text perfectly centered, vertically and horizontally.\n- [Using Align-Self](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) - Tweak the alignment of individual flex items without breaking the whole layout.\n\n### CSS Grid\n\n- [A Complete Guide to CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) - Your one-stop resource for mastering the art of CSS Grid layouts.\n\n### Fluid Typography\n\n- [Modern Fluid Typography Using CSS Clamp](https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/) - Scale your text smoothly across all screen sizes with modern CSS techniques.\n- [Simplified Fluid Typography](https://css-tricks.com/simplified-fluid-typography/) - A beginner-friendly guide to creating fluid, responsive typography.\n- [Modern Fluid Typography Editor](https://modern-fluid-typography.vercel.app/) - A quick editor to test and tweak fluid typography values in real-time.\n- [min(), max(), and clamp()](https://web.dev/min-max-clamp/) - Use CSS math functions to make typography (and more) ultra-flexible and adaptive.\n\n\n\n\n\n---\n\n\n# \n10. UX in Motion\n\n\n\n[bookmark](https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc)\n\n\n### \nAnimation Basics\n\n\n[Animation that matters adding value to your interface](https://uxplanet.org/animation-that-matters-adding-value-to-your-interface-65496fe4c182)\n\n\n[The UX in Motion Manifesto](https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc)\n\n\n### Animation Resources\n\n\n[Rive](https://rive.app/community/)\n\n\n\n\n\n\n---\n\n\n# \n11. CSS Animation\n\n\n[Animation Tag Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/animation)\n\n\n[Animation Fill Mode [making animation stop]](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode)\n\n\n[AnimateSS collection of CSS animations](https://xsgames.co/animatiss/)\n\n\n### **Scrolling**\n\n\n[Practical CSS ScrollSnap [CSS Tricks]](https://css-tricks.com/practical-css-scroll-snapping/)\n\n\n[Scroll Animation](https://css-tricks.com/books/greatest-css-tricks/scroll-animation/)\n\n\n[Binding CSS Keyframe animation to Scroll [demo]](https://codepen.io/chriscoyier/pen/NWxpJVx)\n\n\n[How to Trigger a CSS Animation to Scroll](https://coolcssanimation.com/how-to-trigger-a-css-animation-on-scroll/)\n\n\n[Using IntersectionObserve API](https://stackoverflow.com/questions/27462306/css3-animate-elements-if-visible-in-viewport-page-scroll)\n\n\n[Animate on Scroll with IntersectionObserver](https://dev.to/keefdrive/animate-on-scroll-using-intersectionobserver-5dg1)\n\n\n[Master the IntersectionObserver API in Single Page Navigation](https://www.hweaver.com/intersection-observer-single-page-navigation/)\n\n\n[Reserve Scrolling Columns](https://www.bram.us/2022/01/01/reverse-scrolling-columns-with-css-scroll-timeline/)\n\n\n[Frame by Frame Moving Image Scroll Effect](https://levelup.gitconnected.com/how-to-create-frame-by-frame-moving-image-on-scroll-effect-30ce577c63c2)\n\n\n[Smooth Scrolling](https://css-tricks.com/snippets/jquery/smooth-scrolling/) The auto-scroll back-to-top effect.\n\n\n[Detecting if an element is in the Viewport with jQuery](https://medium.com/talk-like/detecting-if-an-element-is-in-the-viewport-jquery-a6a4405a3ea2) [[demo]](https://codepen.io/BoyWithSilverWings/pen/MJgQqR)\n\n\n### **Parallax**\n\n\n[Pure CSS Parallax ](https://medium.com/@dailyfire/pure-css-parallax-simple-tricks-da102d0ffdb9) [[demo]](https://codepen.io/alvarotrigo/pen/OJxOrOg)\n\n\n[Full-page Parrallax scrolling [demo]](https://codepen.io/eehayman/pen/qdGZJr)\n\n\n### **Carousels**\n\n\n[Owl Carousel](https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html)\n\n\n[Avada Image Carousel](https://avada.theme-fusion.com/element/image-carousel/)\n\n\n[Monumentum Slider](https://codepen.io/lmgonzalves/pen/djEgmv)\n\n\n[Make a basic carousel with HTML, CSS and JS](https://www.section.io/engineering-education/how-to-make-an-image-carousel-for-your-website/)\n\n\n### **Transitions and Transforms**\n\n\n[CSS Transitions and Transforms for Beginners](https://thoughtbot.com/blog/transitions-and-transforms)\n\n\n[Cubic Bezier tool](https://cubic-bezier.com/#0,.44,.44,1)\n\n\n---\n\n\n# 12. Designers to Follow\n\n\n### Design Leaders\n\n\n[Andy Budd](https://twitter.com/andybudd)\n\n\n[Dan Mall](https://twitter.com/danmall)\n\n\n[Chris Coyier](https://twitter.com/chriscoyier)\n\n\n### \nDesigners\n\n\n[Orman Clark](https://twitter.com/ormanclark)\n\n\n[Nick Hammond](https://twitter.com/NHammondDesign)\n\n\n[Kent C. Dodds](https://twitter.com/kentcdodds)\n\n\n[Helen Tran](https://twitter.com/tranhelen)\n\n\n[Emma Bostian](https://twitter.com/EmmaBostian)\n\n\n### CSS Artists\n\n\n[Lynn Fisher](https://twitter.com/lynnandtonic)\n\n\n[T. Afif at CSS Challenges](https://twitter.com/ChallengesCss)\n\n\n[Álvaro Montoro](https://twitter.com/alvaro_montoro)\n\n\n[jhey](https://twitter.com/jh3yy)\n\n\n[Kass Sanchez](https://twitter.com/KassandraSanch/)\n\n\n[Asyraf Hussin](https://twitter.com/asyrafhussin4)\n\n\n---\n\n\n# 12. Everything Else\n\n\n\n[Brian Feroldi’s Recommended Resources](https://docs.google.com/spreadsheets/d/1IiDH9l_Jnr_b0JDdA8QbEzdHQRCD8IViUdJ45H_68pA/edit#gid=1841532980)\n\n\nNewsletter Writing\n\n\n[https://www.newsletterwizard.io/#pricing](https://www.newsletterwizard.io/#pricing).  Exploring\n\n\n\nSankey charts\n\n\n[https://sankeymatic.com/build/](https://sankeymatic.com/build/)\n\n\n### Figma\n\n\n[Best Practice Guides](https://www.figma.com/best-practices/guides/)\n\n\n[My ro.ble.to shortio links](https://app.short.io/users/dashboard/539355/links)\n\n\n### My Social Links\n\n\n[My Linktree](https://linktr.ee/robleto)\n\n\n[My Topmate.io](https://topmate.io/robleto)- Consulting solutions\n\n\n[Topmate inspriration](/52fb6d1e7bf8431a9265c424297771e1)\n\n\n[My Buy Me a Coffee](https://www.buymeacoffee.com/robleto)\n\n\n[My Robleto.com Blog Admin](https://www.robleto.com/admin/#/collections/Here%27s%20the%20Thing...)\n\n\n### **Award Sites**\n\n\n[bookmark](https://www.awwwards.com/)\n\n1. [Awwwards](https://www.awwwards.com/)\n2. [CSS Design Awards](https://www.cssdesignawards.com/)\n3. [Webby Awards](https://www.webbyawards.com/)\n4. [FWA](http://www.thefwa.com/)\n5. [Web Design Awards](https://www.webdesign-awards.com/)\n6. [Webdesign Inspiration](https://www.webdesign-inspiration.com/)\n7. [The Best Designs](https://www.thebestdesigns.com/)\n8. [CSS Winner](https://www.csswinner.com/)\n9. [Web Design Served](https://www.webdesign-served.com/)\n10. [Siteinspire](https://www.siteinspire.com/)\n11. [Land-Book](https://land-book.com/)\n12. [Bestfolios](https://www.bestfolios.com/home)\n13. [Godly](https://godly.website/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobleto%2Fdesign-resources","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobleto%2Fdesign-resources","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobleto%2Fdesign-resources/lists"}