UI-UX-resources

KO | EN

gitlite — search

#javascript #python #hacktoberfest #typescript #llm #machine-learning #rust #deep-learning #nodejs #macos #java #mcp #ios #openai

UI-UX-resources

(★ 34)

📔 📚 A curated list of awesome resources: articles, books, videos, tools, podcasts about UI/UX.

UI-UX-resources Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# UI/UX Resources
📔 📚 A curated list of awesome resources : articles, books, videos, tools, podcasts about UI/UX.
![](https://res.cloudinary.com/pediomo/image/upload/v1607170403/UI_UX_resources_qbtjhk.png)

> The “UI” in UI design stands for “user interface.” The user interface is the graphical layout of an application, while the “UX” stands for “user experience.” A user’s experience of the app is determined by how they interact with it. ~ [UX Planet](https://uxplanet.org/what-is-ui-vs-ux-design-and-the-difference-d9113f6612de)

## Table of Contents
- [Community](#community)
- [Design Tools](#design-tools)
- [Resources](#resources)
- [Case Studies and Portfolios](#case-studies-and-portfolios)
- [Design Laws and Principles](#design-laws-and-principles)
- [UI UX programs to follow](#ui-ux-programs-to-follow)
- [UI UX blogs to Follow](#ui-ux-blogs-to-follow)
- [Design inspiration](#design-inspiration)

- [Courses](#courses)
- [Videos](#videos)
- [Conferences](#conferences)
- [Speaker Decks](#speaker-decks)
- [Books](#books)
- [UI UX schools](#ui-ux-schools)
- [Product designers and UI UX designers to follow](#product-designers-and-ui-ux-designers-to-follow)
- [Podcasts](#podcasts)
- [Unrelated design](#unrelated-design)

## Community
* [Jupiter Design Community](https://chat.whatsapp.com/Ku4SUjSmc4zIAg5XzffEcs)
* [UX Design Hangout](https://designerhangout.co?mwr=3a1f1519/)
* [Figma Africa](https://foflagos.slack.com/)
* [UX Guide](https://ux.guide/)
* [Interaction Design Foundation](https://www.interaction-design.org/career) (Paid)
* [Clicked](https://beta.clicked.com/create-clicked-account/?ref=322) (An invite only community)
* [UX Her](https://www.uxher.com/)
* [UX/UI Design Projects](https://www.facebook.com/groups/uxuidesignprojects)
* [List of UX Communities, mostly Slack](https://www.designerslack.community/type/ux)

## Design tools

Fonts:

* [Google Fonts](https://fonts.google.com/)

Colors:

* Contrast checker: [WebAim](https://webaim.org/resources/contrastchecker/)
* Colour picker: [Chrome Extenion](
https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?hl=en)
* Colour palletes: [Colour Hunt](https://colorhunt.co/)
* Colour pallete generator: [Muzli](https://colors.muz.li/)
* [Coolors](coolors.co)
* [Who Can Use](https://whocanuse.com/)

Illustrations:
* [Undraw](undraw.co)
* [Storyset](https://storyset.com/)
* [Drawkit](https://www.drawkit.io/)
* [Ouch!](https://icons8.com/illustrations)
* [In fact, this is a longer list for illustrations](https://www.producthunt.com/search?q=illustrations)

Wireframes
* [Printable mobile phone outlines for wireframes and prototypes](https://drive.google.com/file/d/1ot_E9DJ9EYkhvtkxp90mRv_4c9hK1G93/view)
* [Printable grid paper template](https://www.vertex42.com/WordTemplates/printable-graph-paper.html)

Design Systems
* [Google's Material Design](https://material.io/resources)
* [Shopify's Design System Polaris](https://polaris.shopify.com/)
* [Microsoft's Fluent Design System](https://www.microsoft.com/design/fluent/#/), [Microsoft: documentation (design)](https://docs.microsoft.com/en-us/windows/uwp/design/)
* [AirBnb' Design System](https://airbnb.design/building-a-visual-language/)
* [The US Web Design System](https://designsystem.digital.gov/)

UI Kits
* [Shopify's UI kit](https://www.figma.com/@shopify)
* [Microsoft's UI kit](https://www.figma.com/@microsoft)
* [Atlassian's UI kit](https://www.figma.com/@atlassian)
* [Uber's UI kit](https://www.figma.com/@uber)

Affinity Diagrams
* [Jamboard.Google](https://jamboard.google.com/)
* [Notely](http://note.ly/#)
* [Miro](https://miro.com/) - Paid tool
* [Padlet](https://padlet.com/)

Blob Maker:
* [Blob Maker](https://www.blobmaker.app/)

Usability tests:
* [UXCAM](https://uxcam.com/)
* [WatchSend](http://new.watchsend.com/)
* [UserZoom](http://new.watchsend.com/) — Paid.
* [Scala Preview](https://bjango.com/mac/skalapreview/)

Build your portfolio:
* [Semplice](https://www.semplice.com/)
* [Carbon made](https://carbonmade.com/)
* [Dunked](https://dunked.com/)
* [Uxfolio](https://www.uxfol.io/)

Showcase your work:
* [Dribbble](https://dribbble.com/)
* [Behance](https://www.behance.net/)

Templates:

* [Sketch App Sources](https://www.sketchappsources.com/)
* [Design Sprint Template](https://docs.google.com/document/d/1WYvwHVjc-9JZTm-0_CK3rmUG--F4bNRC6K-rbSn7094/edit)

## Resources
* [Core design resource 1](https://www.designresourc.es/)
* [Core design resource 2](https://medium.com/@calderaricaio/growing-list-of-design-resources-67c72a5d4f56)
* [Core design resource 3](https://www.notion.so/Design-Resources-0e19f815785245ac9cf6a50355f2cb10)
* [Material.io](http://material.io/)
* [Shopify Design Resource](https://polaris.shopify.com/content/actionable-language#navigation)
* [Design System Checklist](https://designsystemchecklist.com/)
* [How to design a graph](https://www.youtube.com/watch?v=eVy36sR29g4)
* [Complete list of UX deliverables](https://uxplanet.org/a-complete-list-of-ux-deliverables-d62ccf1de434)
* [UI Design Process](https://medium.com/nyc-design/ux-ui-design-process-for-beginner-753952bb2241)
* [User Interphace Pack for beginners](https://drive.google.com/drive/u/0/folders/1YkVOIKL3zMxXSnd4Grcc6wOAc366-MGi?sort=13&direction=a)
* [How to create an Empathy Map](https://www.nngroup.com/articles/empathy-mapping/)
* [Treford Resource Pack 1](https://docs.google.com/document/d/1RLv5XBRUo42xLMkcQQAw51mWP7jcsyg4ivwNPbNwLdE/edit)
* [How to create a mockup for your design on photoshop](https://www.loom.com/share/305be6c1da5c4d2b9a9737a751e0a4d5)
* [How to develop an effective multi-device UX strategy](https://xd.adobe.com/ideas/principles/web-design/ux-design-strategy-for-multiple-devices/)
* [Design for offline](https://design.google/library/offline-design/)
* [UX for the Next Billion Users](https://design.google/library/ux-next-billion-users/)
* [A Product Designer's Guide to Competitive Analysis](https://www.toptal.com/product-managers/freelance/product-designer-guide-to-competitive-analysis)
* [UX Challenges: links to courses and exercises](https://uxtools.co/challenges)
* [Sound Style Guide](https://www.toptal.com/designers/ux/ux-sounds-guide)
* [How to write a UX case study](https://www.invisionapp.com/inside-design/how-to-write-a-ux-case-study/)
* [UX Case study Template](https://xd.adobe.com/ideas/perspectives/leadership-insights/ux-case-study-template/)
* [How to build a portfolio on Notion: Video](https://www.youtube.com/watch?v=S-tBuTQ7Ks0)[Article](https://uxplanet.org/building-your-portfolio-in-notion-part-1-2222f31210eb)
* [Design Handoff](https://www.abstract.com/blog/developer-handoff-for-designers)
* [How to collaborate on Adobe XD](https://www.adobe.com/products/xd/learn/collaborate/stakeholder-review/working-with-teams.html)
* [A beginner's guide to Information Architecture](https://xd.adobe.com/ideas/process/information-architecture/introductory-guide-to-information-architecture/)
* [A tale of UX auditing and designing](https://blog.prototypr.io/trip-tribe-a-tale-of-ux-auditing-and-designing-through-gifs-4a878d405765)
* [Patterns](http://www.heropatterns.com/)

Designing for Accesibility
* [Google guidelines](https://material.io/design/usability/accessibility.html#understanding-accessibility)
* [Understanding the need for accessibility](https://www.youtube.com/watch?v=eFkhFxJZvho), [How the blind use technology to see the world](https://www.youtube.com/watch?v=0EQOZRIA-nA)
* [IBM resource on accessibility](https://www.ibm.com/able/toolkit/)

Design critique guide
* [Mastering Design Critiques](https://uxdesign.cc/design-critique-design-better-products-through-team-collaboration-4c4f26a7be5f)
* [Design Critique: Where do we start?](https://uxplanet.org/design-critique-where-do-we-start-c8c5cbffb069)

## Case Studies and Portfolios

* [Cool and hillarious case study](https://rafa.design/)
* [Case study club](https://www.casestudy.club/case-studies/quill-app-case-study)
* [Mosope_Adebowale's_Healthwise_CaseStudy](https://mosopeadebowale.com/wp-content/uploads/2019/09/Mosope_Adebowale_Healthwise_CaseStudy.pdf)
* [Buhari Jemil's portfolio](http://buhari-jemilu.com/)
* [Google Mentor Design Case Study](https://www.behance.net/gallery/90958309/Google-Mentor-Design-Case-Study)
* [Money Transfer Case Study](https://www.behance.net/gallery/95491533/Money-transfer-A-Better-Way-to-Handle-Your-Money)
* [Medical Design Case Study](https://www.behance.net/gallery/91410737/Medico-Online-Medical-Services-Case-Study)
* [Designing an Application for Saving & Investment — A UX Case Study](https://dedamioloketuyi.medium.com/designing-an-application-for-saving-investment-tailored-to-millenials-a-ux-case-study-b83403648932)
* [UX Portfolio Case Study template (plus examples from successful hires)](https://uxplanet.org/ux-portfolio-case-study-template-plus-examples-from-successful-hires-86d5b0faa2d6)
* [Case study: Designing an in-app messaging feature](https://medium.com/design-bootcamp/a-ux-case-study-on-carbon-an-in-app-messaging-feature-7b5c819982aa)
* [Case study: Designing an Online Marketplace: Sellfast](https://medium.com/design-bootcamp/ui-ux-case-study-sellfast-2537fcb05872)
* Entry level UX Portfolios mentioned in the Google UX Design Certification Course: [Lisa's portolio](http://www.lisasuefischer.com/), [Dane's portfolio](https://danegalbraith.com/), [Shabi's portfolio](https://www.shabnamkashani.com/), [Nichola's portfolio](https://www.nicolaspellegrino.com/), [Josh's portfolio](https://joshglucas.com/)
* [TongFanf Sun' Case study](https://www.tongfangsun.xyz/)
* [Andrew Sibert's case study](http://andrewsibert.com/portfolio_halo.html)
* [Saschais' Portfolio](https://saschas.ai/)
* [Rama (Portfolio on notion)](https://www.notion.so/Hey-I-m-Rama-Krushna-53ebad1b8bb04bd491108cac9c293be9)
* Like to check out the UX portfolios of interns at FAANG companies? Click this link: [Cofolios](https://cofolios.com/)
* [Bestfolios](https://www.bestfolios.com/casestudy)

* [Full Website Design 1](https://www.behance.net/gallery/95636783/Enclave-Online-Dating-App)

* BONUS >>> [GET MENTORSHIP](https://adplist.org/mentors)
* [Case study template](https://uxdesign.cc/case-study-template-8832941a9d1b?source=bookmarks---------5----------------------------)
* Don't know what problem to solve for your UX case study? Check here: [Design challenges](https://www.notion.so/Design-Challenges-cb988fb821fc403ebaad9c5b9b7f3077)

## Design Laws and Principles
* [Design principles](https://principles.design/)
* [Laws of UX](https://lawsofux.com). You can also check this [article](https://medium.com/swlh/ux-laws-with-practical-examples-c418b4738d20) for examples of how the laws apply. Like to watch a video of the laws of UX instead? [Click here](https://www.youtube.com/watch?v=fYs2Mdyasuc).
* [Adobe (UX Rules)](https://xd.adobe.com/ideas/process/ui-design/4-golden-rules-ui-design/)

* [UX design Principles](https://99designs.com/blog/web-digital/ux-design-principles/)
* [User Experience](https://www.nickkolenda.com/user-experience/)

## UI UX programs to follow
* [100 days of UI](https://www.dailyui.co/) — (You can also generate tasks from: [Sharpen](https://sharpen.design/))
* [UI/UX Female Bootcamp](http://howican.tech/)
* [UX/ Product Design Internship Opportunities](https://interns.design/)

## UI UX blogs to Follow
* [Career Foundry](https://careerfoundry.com/en/blog/ux-design/)
* [UX Planet](https://uxplanet.org/)
* [The Nielsen Norman Group](https://www.nngroup.com/articles/)
* [UX Collective](https://uxdesign.cc/)
* [Prototypr](https://blog.prototypr.io/)
* [Muzli blog](https://medium.muz.li/)
* [Sitepoint](https://www.sitepoint.com/design-ux/)
* [Ux Pin](https://www.uxpin.com/studio/blog/guide-design-consistency-best-practices-ui-ux-designers/)

## Design inspiration
* [Awwwards](https://www.awwwards.com/)
* [UI Jar](https://uijar.com/)

## Videos
* [Bulding Amazing Things](https://www.youtube.com/channel/UCbVPTU8fv7e0EjGeQFbIsJA) (Youtube Channel)
* [The Futur](https://www.youtube.com/user/TheSkoolRocks) (Youtube Channel)

## Courses
* [Google UX Design Certification Course](https://grow.google/uxdesign/#?modal_active=none)

## Unrelated design
* [Graphics design resource](https://mega.nz/folder/tkxC2IbS#tuCovFzaVY8rAVYBU3VR4g)

## Product designers and UI UX designers to follow
| Name              | Link to Blog/Content profile                                                     | Niche                       | Link to Twitter                                       |
|-------------------|--------------------------------------------------------------------------|----------------------------------|-------------------------------------------------------|
| Chris Do   |https://thefutur.com/team/chris-do               | CEO, TheFutur | [@theChrisDo](https://twitter.com/theChrisDo)     |
| Namnso Ukpanah    | https://www.linkedin.com/in/namnsoukpanah/        | Figma Africa (Community lead) | [@namnsoukpanah](https://twitter.com/namnsoukpanah)     |

## Contributing
Found an awesome product designer, UI/UX designer, resource, article, blog, tool, video, speaker deck etc.? Please send me a pull request and follow the [contributors guidelines](/CONTRIBUTING.md).

UI-UX-resources

UI-UX-resources Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

UI-UX-resources

UI-UX-resources Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README