> For the complete documentation index, see [llms.txt](https://recife.gitbook.io/wwcode-front-end-study-group/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://recife.gitbook.io/wwcode-front-end-study-group/ui-ux/ui-ux/referencias.md).

# Referências

**Livros**

* [Melhores Livros de UI/UX](https://qubstudio.com/blog/best-40-ux-ui-books-free-paid-versions/)
* [Free UX Books](https://www.uxpin.com/studio/ebooks/?ref=uigoodies.com)

**Cursos online e gratuitos**

* [IDEO U: Design Thinking](https://www.ideou.com/pages/design-thinking#ldt)
* UX e UI Design com Edu Agni
* [Introdução ao Design Thinking](https://cursos.trampolim.academy/p/curso-introducao-ao-design-thinking)
* [Introdução ao Figma](https://www.cursae.com.br/play-course/figma-criando-interfaces-do-zero-ate-o-prototipo-final/introducao-ao-figma)
* <https://www.coursera.org/learn/ux-ui-design-de-interface>
* <https://www.udemy.com/course/ux-para-quem-ainda-nao-e-de-ux/>

**Cursos Pagos**

* [Google UX Design](https://www.coursera.org/professional-certificates/google-ux-design)
* [Meiuca Design](https://www.meiuca.design/bootcamp-live)
* [UILAB](https://uilab.com.br/)
* Mergo
* [Aela](https://aela.io/)

**Blogs**

* [Nielsen Group](https://www.nngroup.com/)
* [UX.Blog](https://uxdesign.blog.br/)
* [UX Collective Brasil](https://brasil.uxdesign.cc/)
* [Design Better](http://designbetter.co/)
* [Inside Design](https://www.invisionapp.com/inside-design/)

**Canais do Youtube**

* [UX Now](https://www.youtube.com/channel/UCgfaifzmqadwKyCd0lagylQ)
* [UX Lab](https://www.youtube.com/channel/UCw-CQYphBIs_nplLNJuz44w)
* [Design Team](https://www.youtube.com/channel/UCTkZTDIq25Czsazq2N493Cg)
* [UX Unicórnio](https://www.youtube.com/channel/UCiq0W1B5CuFaWLXfL8M6lSQ)
* [UXConf BR (palestras de edições passadas)](https://www.youtube.com/channel/UChnVB_OSHF_h5ank_d-49vg)

**Instagram**

* [@adritq.design](https://www.instagram.com/adritq.design/)
* [UI Lab](https://www.instagram.com/uilabschool/)
* [UX Lore](https://instagram.com/uxlore)
* [UX Bites](https://instagram.com/uxbites)
* [UX Unicórnio](https://www.instagram.com/uxunicornio/)
* [Pixel Cast](https://www.instagram.com/pixelcastbr/)
* [Nina Talks](https://www.instagram.com/nina_talks/?hl=pt-br)

**Tutoriais**

* [Freecodecamp](https://www.freecodecamp.org/news/ui-ux-design-tutorial-from-zero-to-hero-with-wireframe-prototype-figma/)

**Design Thinking - Artigos**

* <https://www.designkit.org/methods>
* <https://www.ibm.com/design/research/>

**Diretrizes de acessibilidade**\
<https://www.w3.org/TR/WCAG21/>\
<http://colorsafe.co/>\
<https://www.color-blindness.com/coblis-color-blindness-simulator/>\
<https://www.intechnic.com/blog/icon-usability-best-ux-tips-and-design-guidelines/>\
\
**UI Designer**\
<https://www.usability.gov/what-and-why/visual-design.html>\
[Figma Grid](https://www.figma.com/best-practices/everything-you-need-to-know-about-layout-grids/layout-grid-basics/)\
[Figma Crash Course](https://www.youtube.com/watch?v=Gu1so3pz4bA)\
[UI Designer Flux](https://www.youtube.com/channel/UCN7dywl5wDxTu1RM3eJ_h9Q)\
[UI Designer CharlieMarieTV](https://www.youtube.com/user/charlimarieTV)\
[UI Designer AJ\&Smart](https://www.youtube.com/channel/UCeB_OpLspKJGiKv1CYkWFFw)\
[UI Designer Maex](https://www.youtube.com/channel/UCSdp5logiFTM3SyLJrHabOQ)\
[Inspiration UI Designer](https://screenlane.com/)\
[Google Fonts](https://fonts.google.com/icons)\
[Creating Icons Figma](https://www.youtube.com/watch?v=B_KeOTlDdSQ)\
[Trends UX Designer](https://trends.uxdesign.cc/about)\
[Responsive Grid Designer](https://medium.muz.li/responsive-grid-design-ultimate-guide-7aa41ca7892?gi=bb9d1dea45af)\
[UI Goodies](https://uigoodies.com/)

**Design System - Aprenda com o Figma**\
\
[Video 1 - Foundations](https://www.youtube.com/watch?v=EK-pHkc5EL4\&list=PLXDU_eVOJTx6ZQswH9nVKVMCsK83OzhoV) (55 minutos) que o ajudará a começar a projetar um sistema de design do zero, incluindo tipografia e cores.)\
\
[Video 2 - Components](https://www.youtube.com/watch?v=9xUXTFzDDCo\&list=PLXDU_eVOJTx6ZQswH9nVKVMCsK83OzhoV\&index=2)\
(55 minutos) onde você adicionará ao seu sistema de design, construindo componentes fundamentais e os organizando usando páginas, quadros, nomes e descrições.\
\
[Video 3 - Components continued](https://www.youtube.com/watch?v=XCsVDvvlz4E\&list=PLXDU_eVOJTx6ZQswH9nVKVMCsK83OzhoV\&index=3)\
(55 minutos) que apresentará componentes mais complexos, como cartões, objetos de mídia, diálogos, navegações e formulários, para incluir em seu sistema de design.\
\
[Video 4 - Testing](https://www.youtube.com/watch?v=UtXKFaLAbXM\&list=PLXDU_eVOJTx6ZQswH9nVKVMCsK83OzhoV\&index=4)\
(57 minutos) onde você verificará se sua biblioteca de componentes é robusta o suficiente em cenários do mundo real.\
\
[Video 5 - Documentation](https://www.youtube.com/watch?v=Yp_qfB1FA0Y\&list=PLXDU_eVOJTx6ZQswH9nVKVMCsK83OzhoV\&index=5)\
(61 minutos) que compartilha as melhores práticas para documentar seu sistema de design usando Figma e outras ferramentas.\
\
***Obs: Esses vídeos são longos, mas as coisas que você aprender valerão bem o investimento de tempo!***\
\
**Portfólio**\
<https://dribbble.com/>\
<https://www.behance.net/>

<br>