Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/robleto/design-resources

A curated list of top tools and resources for designers and developers to elevate their projects.
https://github.com/robleto/design-resources

Last synced: about 1 year ago
JSON representation

A curated list of top tools and resources for designers and developers to elevate their projects.

Awesome Lists containing this project

README 

          

![image](https://images.unsplash.com/photo-1533640750342-723c1a4912e2?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb)



# Design Resources



_A collection of links to articles, sites and resources that have shaped my professional designing and personal development curated by Greg Robleto (robleto.com)._  



## Table of Contents



Design



1. [Design 101](/1da1d6503f7c4bdd9f2d1caa643708fd#0a019ad7be244195947ef068da5e5095)

2. [Design Strategies and Frameworks](/1da1d6503f7c4bdd9f2d1caa643708fd)

3. [Design Inspiration](/1da1d6503f7c4bdd9f2d1caa643708fd)

4. [Artwork and Assets](notion://www.notion.so/robleto/Robleto-s-Recommended-Resources-1da1d6503f7c4bdd9f2d1caa643708fd#artwork-and-assets)

5. [Typography](/1da1d6503f7c4bdd9f2d1caa643708fd)

6. [Design Blogs and Online Publications](notion://www.notion.so/robleto/Robleto-s-Recommended-Resources-1da1d6503f7c4bdd9f2d1caa643708fd#design-blogs-and-online-publications)

7. [Design Books](notion://www.notion.so/robleto/Robleto-s-Recommended-Resources-1da1d6503f7c4bdd9f2d1caa643708fd#design-books)

8. [Website Building](notion://www.notion.so/robleto/Robleto-s-Recommended-Resources-1da1d6503f7c4bdd9f2d1caa643708fd#website-building)

9. [CSS Styling](notion://www.notion.so/robleto/Robleto-s-Recommended-Resources-1da1d6503f7c4bdd9f2d1caa643708fd#css-styling)

10. [UX in Motion](notion://www.notion.so/robleto/Robleto-s-Recommended-Resources-1da1d6503f7c4bdd9f2d1caa643708fd#ux-in-motion)

11. [CSS Animation](notion://www.notion.so/robleto/Robleto-s-Recommended-Resources-1da1d6503f7c4bdd9f2d1caa643708fd#css-animation)

12. [Everything Else](/1da1d6503f7c4bdd9f2d1caa643708fd)



---



![image](https://images.unsplash.com/photo-1471666875520-c75081f42081?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb)



## 01.  Design 101



> 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.



### 1.1 Design Principles



- [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.

- [Principles.Design](https://principles.design/): A curated collection of design principles that guides smarter, user-focused decision-making.

- [Laws of UX](https://lawsofux.com/): Essential psychology principles for creating designs that feel natural and intuitive.

- [Principles of Grids](https://grids.obys.agency/): Obys Agency's engaging exploration of grid systems, featuring real-world examples from their daily practice.

- [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.



---



![image](https://images.unsplash.com/photo-1531403009284-440f080d1e12?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb)



## 02.  Design Strategies & Frameworks



> 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.



### **2.1 Design Thinking** 



- [IBM Design Thinking](https://www.youtube.com/watch?v=pXtN4y3O35M&feature=youtu.be): A practical framework that puts users at the center of problem-solving through collaborative innovation.

- [Design Thinking & 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.

- [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.

- [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.

- [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.



### **2.2 Double Diamond**



- [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.

- [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.



### **2.3 Human-Centered Design**



- [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.

- [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.

- [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.



### 2.4 Jobs to be Done



- [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.

- [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.

- [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.



### **2.5 Lean UX**



- [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.

- [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.

- [Design Sprints: A Practical Guide](http://www.gv.com/sprint/): GV outlines their proven five-day sprint method for rapid prototyping and idea validation.



---



![image](https://images.unsplash.com/photo-1496449903678-68ddcb189a24?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb)



## 03. Design Inspiration



> Explore a world of creative inspiration through expertly curated collections featuring exceptional designs, innovative interfaces, and transformative digital experiences.



### 3.1  Dark Mode Inspiration



- [Dark Design](https://www.dark.design/): A curated collection of the finest dark-themed websites, handpicked by designers for designers.

- [Dark Mode Design](https://www.darkmodedesign.com/): An elegant showcase of dark mode websites that illuminates the best in low-light design.



### 3.2  Email Inspiration



- [Really Good Emails](https://reallygoodemails.com/): A curated gallery of exceptional email designs.



### 3.3  Illustration Inspiration



- [Illustration Universe](https://illustrationuniverse.com/): A curated gallery of stunning product illustrations from around the world.



### 3.4  Landing Page Inspiration



- [Landingfolio](https://landingfolio.com/): A vast library of landing page designs, templates, and components.

- [Landings](https://landings.dev/): A curated gallery of landing pages with customizable filters.

- [Lapa Ninja](https://www.lapa.ninja/): Daily-updated collection of landing page designs.



### 3.5  Logo / Brand Inspiration



- [Logobook](https://www.logobook.com/): A searchable archive of over 5,000 logos organized by designer, shape, object, and style.

- [Logo System](https://logosystem.co/): A collection of 900+ logo designs spanning minimalist marks and wordmarks.



### 3.6. Onboarding Inspiration



- [Refero's Trending User Flows](https://refero.design/search?flow_types%5Bid%5D%5B%5D=1&order=trending): A curated collection of contemporary user flow designs from across the digital landscape.



### 3.7. Portfolio Inspiration



- [Killer Portfolio](https://killerportfolio.com/): A showcase where exceptional portfolio websites come together.

- [PersonalSit.es](https://personalsit.es/): A directory where individuals share their personal websites and digital spaces.

- [Prettyfolio](https://prettyfolio.com/): A collection celebrating remarkable portfolio designs from across the web.



### 3.8. Website Inspiration



- [One Page Love](https://onepagelove.com/): Features single-page website designs, templates, and resources.

- [Navbar Gallery](https://www.navbar.gallery/): Displays navigation bar designs from across the web.

- [404s](https://www.404s.design/): Shows creative approaches to error page design.

- [Footer Design](https://www.footer.design/): Presents website footers organized by category.

- [Refero](https://refero.design/): Houses design references from web applications.

- [Siteinspire](https://siteinspire.com/): Exhibits web designs across various industries.



---



![image](https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb)



## 04. CSS 



### 🗺️ Cheat Sheets



- [CSS Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/): Essential reference for Flexbox properties fro CSS Tricks, examples, and browser support.

- [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/): Complete CSS Grid reference from CSS Tricks with examples and compatibility information.



### 📚 Books



### Design Collections



1. [Dribbble](https://dribbble.com/)

2. [Behance](https://www.behance.net/search/projects?field=ui%2Fux)



### 



---



# 

04. Artwork and Assets



[bookmark](https://www.figma.com/file/1QJt81Dfgwo85nXJ6yHX35/Dribbble-Case-study-(Copy)?node-id=1415%3A1947&t=ukSSTNM8qK8hjZt9-1)



### **Mockups**



[Canva Smartmockups](https://www.canva.com/smartmockups) - Pro feature



[Things](https://things.morflax.com/) - Generator



### **Stock photos & videos**



[Unsplash](https://unsplash.com/) - Royalty free images



[Coverr](http://coverr.co/) - Free stock video footage



[Pexels](https://www.pexels.com/) - Royalty free images and videos



[Stocksy](https://www.stocksy.com/) - High quality stock photos



[Artgrid](https://artgrid.io/) - High quality royalty free videos



### **Icons and Illustrations**



[Blush – Illustrations for everyone](https://blush.design/)



[The Noun Project](https://thenounproject.com/)



[Undraw](https://undraw.co/)



### **Backgrounds**



[Haikei](https://app.haikei.app/) 



[Animated Abstract Shapes](https://ui8.net/anton-mishin/products/loops?rel=uxhunt)



### **Maps**



[Map styles with google](https://mapstyle.withgoogle.com/)



### **Colors**



[Material design the color system](https://material.io/design/color/the-color-system.html#color-usage-and-palettes)



[Web Gradients](https://webgradients.com/)



### **Patterns**



[https://patterncollect.com/](https://patterncollect.com/)



---



![image](https://images.unsplash.com/photo-1461958508236-9a742665a0d5?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb)



# 05. Typography



> 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.



###  📝 Resources & Articles



- [Butterick's Practical Typography](https://practicaltypography.com/): A clear, comprehensive guide to typography fundamentals and best practices for better text presentation.

- [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.

- [Typeface Mechanics 002](https://frerejones.com/blog/typeface-mechanics-002/): A deeper look into how weight distribution shapes the harmony of typeface design.

- [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.

- [Typelist](https://typelist.upstatement.com/): A handpicked showcase of typefaces in action, perfect for designers seeking fresh typography ideas.



### 💡 Inspiration/Miscellaneous



- [Discover Typography](https://discover.typography.com/): An interactive gallery for exploring and discovering diverse typefaces.

- [Behance Typography](https://www.behance.net/search/projects?field=typography&sort=recommended): A curated showcase of typography projects from designers worldwide.

- [Typewolf](https://www.typewolf.com/): A curated collection of fonts in real-world use, with expert recommendations and examples.

- [Font Review Journal](https://fontreviewjournal.com/): Thoughtful, detailed reviews of typefaces exploring their design, history, and uses.

- [100 Days of Fonts](http://100daysoffonts.com/): A daily showcase of creative font combinations to inspire your typography choices.

- [Fonts in Use](https://fontsinuse.com/): A comprehensive archive documenting typography in real-world design across all media.

- [Awwwards Free Fonts](https://www.awwwards.com/awwwards/collections/free-fonts/): A carefully selected collection of high-quality free fonts.



### 🛠️ Tools



- [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.

- [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.



### 📚 Books



- [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.

- [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.

- [Designing News](http://www.francescofranchi.com/designingnews) by Francesco Franchi: A deep dive into the intersection of visual storytelling and editorial design.

- [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.

- [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.



### 🆓 Free Fonts



- [Atipo Foundry](http://atipofoundry.com/): Features distinctive free and commercial typefaces with modern designs.

- [Open Foundry](https://open-foundry.com/fonts): Curates high-quality open-source fonts for designers.

- [Google Fonts](https://fonts.google.com/): Offers an extensive collection of free, open-source fonts for both web and print use.



---



# 

06. Design Blogs & Online Publications



### **Online Design Publications**



[bookmark](https://www.smashingmagazine.com/)



1. [Smashing Magazine](https://www.smashingmagazine.com/)

2. [A List Apart](https://alistapart.com/)

3. [UX Design](https://uxdesign.cc/)

4. [Design Better](https://www.designbetter.co/)

5. [Medium Design](https://medium.com/topic/design)

6. [UX Design Weekly](https://uxdesignweekly.com/)

7. [Interaction Design Foundation](https://www.interaction-design.org/)



### **Portals & Reading**



[bookmark](https://uxdesign.cc/)



1. [UX Design](https://uxdesign.cc/)

2. [Nielsen Norman Group](https://www.nngroup.com/)

3. [A List Apart](https://alistapart.com/)

4. [Smashing Magazine](https://www.smashingmagazine.com/)

5. [UX Design Weekly](https://uxdesignweekly.com/)

6. [UX Planet](https://uxplanet.org/)

7. [UX Collective](https://uxdesign.cc/)

8. [UX Design Blog](https://uxdesign.blog/)

9. [The Year of the Looking Glass](https://medium.com/the-year-of-the-looking-glass)

10. [It's Nice That](https://www.itsnicethat.com/)

11. [Desk Magazine](https://vanschneider.com/blog/)

12. [HeyDesigner](https://heydesigner.com/)

13. [MindSparkle Magazine](https://mindsparklemag.com/)



---



# 

07. Design Books



[bookmark](https://sensible.com/dont-make-me-think/)



### Business



1. [Inspired: How to Create Tech Products Customers Love](https://www.amazon.com/Inspired-Create-Products-Customers-Love/dp/149197196X) by Marty Cagan



### 

**Product Designer**



1. [Hooked](https://www.amazon.com/Hooked-How-Build-Habit-Forming-Products/dp/1591847788) by Nir Eyal

2. [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

3. [Don’t Make Me Think](https://www.amazon.com/Dont-Make-Think-Revisited-Usability/dp/0321965515) - Steve Krug

4. [Designing Interactions](https://www.amazon.com/Designing-Interactions-Bill-Moggridge/dp/0738999320) by Bill Moggridge

5. [The Design of Everyday Things](https://www.amazon.com/Design-Everyday-Things-Revised-Expanded/dp/0465050654) by Donald A. Norman

6. [The Shape of Design](https://www.amazon.com/Shape-Design-Frank-Chimero/dp/1940282050) by Frank Chimero

7. [Rework](https://www.amazon.com/Rework-Jason-Fried/dp/0307463745) by Jason Fried and David Heinemeier Hansson

8. [Sprint](https://www.amazon.com/Sprint-Solve-Big-Problems-Little-Time/dp/150112174X) by Jake Knapp, John Zeratsky, and Braden Kowitz

9. [The Inmates are Running the Asylum](https://www.amazon.com/Inmates-Running-Asylum-Insane-Situations/dp/0133173586) by Alan Cooper

10. [Lean UX](https://www.amazon.com/Lean-UX-Designers-Developers-Collaboration/dp/1491953608) by Jeff Gothelf and Josh Seiden

11. [The Lean Product Playbook](https://www.amazon.com/Lean-Product-Playbook-Launch-Brilliant/dp/1491974514) by Dan Olsen

12. [The Design Thinking Playbook](https://www.amazon.com/Design-Thinking-Playbook-Practical-Innovators/dp/1119431052) by Michael Lewrick, Patrick Link, and Larry Leifer

13. [Universal Principles of Design](https://www.amazon.com/Universal-Principles-Design-William-Lidwell/dp/159253008X) by William Lidwell, Kritina Holden, and Jill Butler

14. [Scaling Up Excellence](https://www.amazon.com/Scaling-Up-Excellence-Settling-Less/dp/0804141213) by Robert Sutton and Huggy Rao

15. [Build Better Products](https://www.amazon.com/Build-Better-Products-Centered-Development/dp/1491971444) by Laura Klein



### 

**UX Researcher**



1. [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

2. [The Design of Everyday Things](https://www.amazon.com/Design-Everyday-Things-Donald-Norman/dp/0465067107) by Don Norman

3. [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

4. [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

5. [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

6. [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

7. [Designing for Emotion](https://www.amazon.com/Designing-Emotion-Aarron-Walter/dp/0321725544) by Aarron Walter

8. [100 Things Every Designer Needs to Know About People](https://www.amazon.com/Things-Every-Designer-Needs-Know/dp/0321767535) by Susan M. Weinschenk

9. [The User is Always Right](https://www.amazon.com/User-Always-Right-Experience-Centered/dp/0321658701) by Steve Mulder

10. [Laws of UX](https://www.amazon.com/Laws-UX-Jon-Yablonski/dp/173209897X) by Jon Yablonski

11. [Bottlenecks: Aligning UX Design with User Psychology](https://www.amazon.com/Bottlenecks-Aligning-Design-Psychology-User/dp/0128171896) by David Evans

12. [Designing for Behavior Change](https://www.amazon.com/Designing-Behavior-Change-Applied-Psychology/dp/1449307728) by Stephen Wendel



### 

**Interaction Designer**



1. [The Design of Everyday Things](https://www.amazon.com/Design-Everyday-Things-Revised-Expanded/dp/0465067107) by Don Norman

2. [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

3. [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

4. [Designing Interfaces](https://www.amazon.com/Designing-Interfaces-Patterns-Effective-Interaction/dp/1449379702) by Jenifer Tidwell

5. [The Art of Interaction Design](https://www.amazon.com/Art-Interaction-Design-John-Zimmerman/dp/0131428479) by John Zimmerman

6. [Designing Interactions](https://www.amazon.com/Designing-Interactions-Bill-Moggridge/dp/0262134748) by Bill Moggridge

7. [Emotional Design: Why We Love (or Hate) Everyday Things](https://www.amazon.com/Emotional-Design-Why-Everyday-Things/dp/0465051343) by Don Norman

8. [Interaction Design: Creating Innovative Applications and Devices](https://www.amazon.com/Interaction-Design-Creating-Innovative-Applications/dp/0123736023) by Dan Saffer

9. [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

10. [Seductive Interaction Design: Creating Playful, Fun, and Effective User Experiences](https://www.amazon.com/Seductive-Interaction-Design-Playful-Experiences/dp/0321725568) by Stephen Anderson

11. [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



### 



**User Interface Designer**



1. [The Design of Everyday Things](https://www.amazon.com/Design-Everyday-Things-Donald-Norman/dp/0465067107) by Don Norman

2. [The Inmates Are Running the Asylum](https://www.amazon.com/Inmates-Running-Asylum-Industrys-Crazy/dp/0672326140) by Alan Cooper

3. [About Face](https://www.amazon.com/About-Face-Interaction-Design-Essentials/dp/1118766571) by Alan Cooper and Robert Reimann

4. [Designing with Web Standards](https://www.amazon.com/Designing-Web-Standards-Jeffrey-Zeldman/dp/0321616952) by Jeffrey Zeldman

5. [Rocket Surgery Made Easy](https://www.amazon.com/Rocket-Surgery-Made-Easy-Usability/dp/0321657292) - Steve Krug

6. [Universal Principles of Design](https://www.amazon.com/Universal-Principles-Design-William-Lidwell/dp/1592530084) by William Lidwell, Kritina Holden, and Jill Butler

7. [Designing Interactions](https://www.amazon.com/Designing-Interactions-Bill-Moggridge/dp/0735619670) by Bill Moggridge

8. [Designing Visual Interfaces](https://www.amazon.com/Designing-Visual-Interfaces-Techniques-User/dp/0134399318) by Kevin Mullet and Darrell Sano

9. [Sketching User Experiences](https://www.amazon.com/Sketching-User-Experiences-Interactive-Techniques/dp/0123814642) by Bill Buxton

10. [Designing Interfaces](https://www.amazon.com/Designing-Interfaces-Jennifer-Tidwell/dp/1491927400) by Jenifer Tidwell



### 

**Beginner Designer 101**



1. [Universal Principles of Design](https://www.amazon.com/Universal-Principles-Design-William-Lidwell/dp/1592530020) by William Lidwell

2. [Designing Interactions](https://www.amazon.com/Designing-Interactions-Bill-Moggridge/dp/0785342650) by Bill Moggridge

3. [100 Things Every Designer Needs to Know About People](https://www.amazon.com/Things-Designer-Needs-About-People/dp/0132790426) by Susan M. Weinschenk

4. [Design Is a Job](https://www.amazon.com/Design-Job-Mike-Monteiro/dp/1937557131) by Mike Monteiro

5. [The User Experience Team of One](https://www.amazon.com/User-Experience-Team-Leah-Buley/dp/1933820074) by Leah Buley

6. [Designing with Type](https://www.amazon.com/Designing-Type-James-Craig/dp/0471445228) by James Craig

7. [Graphic Design Thinking: Beyond Form and Function](https://www.amazon.com/Graphic-Design-Thinking-Beyond-Function/dp/1616890775) by Ellen Lupton

8. [The Shape of Design](https://www.amazon.com/Shape-Design-Frank-Chimero/dp/1457188101) by Frank Chimero

9. [Solving Product Design Exercises](https://www.amazon.com/Solving-Product-Design-Exercises-Dashinsky/dp/098678631X) by Artiom Dashinsky

10. [Design for Real Life](https://www.amazon.com/Design-Real-Life-Empathy-Technology/dp/1933820617) by Eric Meyer and Sara Wachter-Boettcher

11. [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

12. [The Vignelli canon](https://www.amazon.com/Vignelli-Canon-Massimo-Vignelli/dp/372120055X) by Massimo Vignelli

13. [The UX Design Process: A Beginner's Guide](https://www.amazon.com/UX-Design-Process-Beginners-Guide/dp/0789751514) by Nick Babich

14. [The Design Sprint](https://www.amazon.com/Design-Sprint-Solve-Problems-Validated/dp/0636920051305) by Jake Knapp, John Zeratsky, and Braden Kowitz

15. [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

16. [The Power of Color in UI Design](https://www.amazon.com/Power-Color-Design-Nick-Babich/dp/0134670048) by Nick Babich

17. [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

18. [How to be a Graphic Designer Without Losing Your Soul](https://www.amazon.com/How-Graphic-Designer-Without-Losing/dp/1786270875) by Adrian Shaughnessy



### **Design Manager**



1. [Managing Humans](https://www.amazon.com/Managing-Humans-Humorous-Software-Development/dp/1484231147) by Michael Lopp

2. [The Lean Product Playbook](https://www.amazon.com/Lean-Product-Playbook-Launch-Products/dp/1491973760) by Dan Olsen

3. [Scaling Up Excellence](https://www.amazon.com/Scaling-Up-Excellence-Getting-More/dp/0804137382) by Robert Sutton and Huggy Rao

4. [Drive: The Surprising Truth About What Motivates Us](https://www.amazon.com/Drive-Surprising-Truth-About-Motivates/dp/1594484805) by Daniel H. Pink

5. [The Manager's Path](https://www.amazon.com/Managers-Path-Leaders-Navigating-Growth/dp/1491973897) by Camille Fournier

6. [Inspired: How To Create Tech Products Customers Love](https://www.amazon.com/Inspired-Create-Products-Customers-Love/dp/149197196X) by Marty Cagan

7. [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

8. [The Power of Intentional Leadership](https://www.amazon.com/Power-Intentional-Leadership-Create-Organization/dp/1633694418) by Joanne Miller

9. [The Design Thinking Playbook](https://www.amazon.com/Design-Thinking-Playbook-Practical-Innovation/dp/1119555179) by Michael Lewrick, Patrick Link, and Larry Leifer

10. [Org Design for Design Orgs](https://www.amazon.com/Org-Design-Design-Organizations-Experience/dp/1491953283) by Peter Merholz

11. [Design Leadership](https://www.amazon.com/Design-Leadership-Creating-Organizations-Experience/dp/1491953286) by Richard Banfield



---



# 

08. Website Building



### 11ty



[Installing Node and NPM](https://radixweb.com/blog/installing-npm-and-nodejs-on-windows-and-mac)



[Bulding a site with 11ty](https://11ty.rocks/posts/create-your-first-basic-11ty-website/)



[Getting Started in 11ty in 3 minutes [video]](https://www.youtube.com/watch?v=BKdQEXqfFA0)



[Setting up SCSS on 11ty](https://egghead.io/lessons/11ty-add-sass-compiling-and-watch-for-changes-in-eleventy-11ty)



[11ty Resources](https://11ty.rocks/)



[11ty Image Optimizer Plugin](https://www.brycewray.com/posts/2021/04/using-eleventys-official-image-plugin/)



### 

Strapi CMS



[Building a blog with 11ty and Strapi](https://strapi.io/blog/building-a-blog-with-11ty-and-strapi)



[Consuming a headless CMS GraphQL API with Eleventy](https://www.webstoemp.com/blog/headless-cms-graphql-api-eleventy/)



[11ty x Strapi](https://github.com/malgamves/11ty-x-strapi) (Github repo) 



[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)



### 

DNS Settings



[What’s my DNS?](https://www.whatsmydns.net/)  (check DNS settings around the globe)



[DNS Checker](https://dnschecker.org/) (similar to What’s my DNS?)



### 



---



# 

09. CSS Styling



### CSS Gradients



- [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.

- [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.

- [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.



### Flexbox



- [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.

- [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.



### CSS Grid



- [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.



### Fluid Typography



- [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.

- [Simplified Fluid Typography](https://css-tricks.com/simplified-fluid-typography/) - A beginner-friendly guide to creating fluid, responsive typography.

- [Modern Fluid Typography Editor](https://modern-fluid-typography.vercel.app/) - A quick editor to test and tweak fluid typography values in real-time.

- [min(), max(), and clamp()](https://web.dev/min-max-clamp/) - Use CSS math functions to make typography (and more) ultra-flexible and adaptive.



---



# 

10. UX in Motion



[bookmark](https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc)



### 

Animation Basics



[Animation that matters adding value to your interface](https://uxplanet.org/animation-that-matters-adding-value-to-your-interface-65496fe4c182)



[The UX in Motion Manifesto](https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc)



### Animation Resources



[Rive](https://rive.app/community/)



---



# 

11. CSS Animation



[Animation Tag Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/animation)



[Animation Fill Mode [making animation stop]](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode)



[AnimateSS collection of CSS animations](https://xsgames.co/animatiss/)



### **Scrolling**



[Practical CSS ScrollSnap [CSS Tricks]](https://css-tricks.com/practical-css-scroll-snapping/)



[Scroll Animation](https://css-tricks.com/books/greatest-css-tricks/scroll-animation/)



[Binding CSS Keyframe animation to Scroll [demo]](https://codepen.io/chriscoyier/pen/NWxpJVx)



[How to Trigger a CSS Animation to Scroll](https://coolcssanimation.com/how-to-trigger-a-css-animation-on-scroll/)



[Using IntersectionObserve API](https://stackoverflow.com/questions/27462306/css3-animate-elements-if-visible-in-viewport-page-scroll)



[Animate on Scroll with IntersectionObserver](https://dev.to/keefdrive/animate-on-scroll-using-intersectionobserver-5dg1)



[Master the IntersectionObserver API in Single Page Navigation](https://www.hweaver.com/intersection-observer-single-page-navigation/)



[Reserve Scrolling Columns](https://www.bram.us/2022/01/01/reverse-scrolling-columns-with-css-scroll-timeline/)



[Frame by Frame Moving Image Scroll Effect](https://levelup.gitconnected.com/how-to-create-frame-by-frame-moving-image-on-scroll-effect-30ce577c63c2)



[Smooth Scrolling](https://css-tricks.com/snippets/jquery/smooth-scrolling/) The auto-scroll back-to-top effect.



[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)



### **Parallax**



[Pure CSS Parallax ](https://medium.com/@dailyfire/pure-css-parallax-simple-tricks-da102d0ffdb9) [[demo]](https://codepen.io/alvarotrigo/pen/OJxOrOg)



[Full-page Parrallax scrolling [demo]](https://codepen.io/eehayman/pen/qdGZJr)



### **Carousels**



[Owl Carousel](https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html)



[Avada Image Carousel](https://avada.theme-fusion.com/element/image-carousel/)



[Monumentum Slider](https://codepen.io/lmgonzalves/pen/djEgmv)



[Make a basic carousel with HTML, CSS and JS](https://www.section.io/engineering-education/how-to-make-an-image-carousel-for-your-website/)



### **Transitions and Transforms**



[CSS Transitions and Transforms for Beginners](https://thoughtbot.com/blog/transitions-and-transforms)



[Cubic Bezier tool](https://cubic-bezier.com/#0,.44,.44,1)



---



# 12. Designers to Follow



### Design Leaders



[Andy Budd](https://twitter.com/andybudd)



[Dan Mall](https://twitter.com/danmall)



[Chris Coyier](https://twitter.com/chriscoyier)



### 

Designers



[Orman Clark](https://twitter.com/ormanclark)



[Nick Hammond](https://twitter.com/NHammondDesign)



[Kent C. Dodds](https://twitter.com/kentcdodds)



[Helen Tran](https://twitter.com/tranhelen)



[Emma Bostian](https://twitter.com/EmmaBostian)



### CSS Artists



[Lynn Fisher](https://twitter.com/lynnandtonic)



[T. Afif at CSS Challenges](https://twitter.com/ChallengesCss)



[Álvaro Montoro](https://twitter.com/alvaro_montoro)



[jhey](https://twitter.com/jh3yy)



[Kass Sanchez](https://twitter.com/KassandraSanch/)



[Asyraf Hussin](https://twitter.com/asyrafhussin4)



---



# 12. Everything Else



[Brian Feroldi’s Recommended Resources](https://docs.google.com/spreadsheets/d/1IiDH9l_Jnr_b0JDdA8QbEzdHQRCD8IViUdJ45H_68pA/edit#gid=1841532980)



Newsletter Writing



[https://www.newsletterwizard.io/#pricing](https://www.newsletterwizard.io/#pricing).  Exploring



Sankey charts



[https://sankeymatic.com/build/](https://sankeymatic.com/build/)



### Figma



[Best Practice Guides](https://www.figma.com/best-practices/guides/)



[My ro.ble.to shortio links](https://app.short.io/users/dashboard/539355/links)



### My Social Links



[My Linktree](https://linktr.ee/robleto)



[My Topmate.io](https://topmate.io/robleto)- Consulting solutions



[Topmate inspriration](/52fb6d1e7bf8431a9265c424297771e1)



[My Buy Me a Coffee](https://www.buymeacoffee.com/robleto)



[My Robleto.com Blog Admin](https://www.robleto.com/admin/#/collections/Here%27s%20the%20Thing...)



### **Award Sites**



[bookmark](https://www.awwwards.com/)



1. [Awwwards](https://www.awwwards.com/)

2. [CSS Design Awards](https://www.cssdesignawards.com/)

3. [Webby Awards](https://www.webbyawards.com/)

4. [FWA](http://www.thefwa.com/)

5. [Web Design Awards](https://www.webdesign-awards.com/)

6. [Webdesign Inspiration](https://www.webdesign-inspiration.com/)

7. [The Best Designs](https://www.thebestdesigns.com/)

8. [CSS Winner](https://www.csswinner.com/)

9. [Web Design Served](https://www.webdesign-served.com/)

10. [Siteinspire](https://www.siteinspire.com/)

11. [Land-Book](https://land-book.com/)

12. [Bestfolios](https://www.bestfolios.com/home)

13. [Godly](https://godly.website/)