You don't need to learn all of this, it's a lot of links.
These links will always be here for you when you need them in the future.
Are we missing a great set of exercises? Send a PR!
- What is Empathy?
- Empathy can be Learned
- interaction-design.org
- Inclusion
- Use Empathy to Build Software Products
- Soft Skills for Hardcore Developers
- EDD - Empathy Driven Development
- Integrating Empathy 1
- Integrating Empathy 2
- Some Practical Tips
- FreeCodeCamp
- Structured, Semi-Structured, Unstructured
- How to talk to Users
- designkit.org
- Stephanie Walter
- How to run a User Interview (twitch)
- Career Foundry
- Service Design Show
- interaction-design.org
- Design Thinking Process:
Sprouts,Stanford
- Empathize
- Define
- Ideate
- Prototype
- Test
- invisionapp
- Creative Confidence (TED)
- First Step: Noticing (TED)
- Design Thinking (TED)
- Collaboration & Innovation (TED)
- Visualize It (TED)
- interaction-design.org
- dschool.stanford.edu
- The Wallet Challenge
- The Coffee Filter Challenge
- Process Guides:
- Design Thinking Process
- 9 Tips
- Design Thinking vs. Agile
- Waterfall vs Agile vs DT
- Ultimate Guide to UI/UX Design
- Big Data & DT
- Longer, Detailed Talk
- Beware the User!
- next level: Art Thinking
- designnotes (huge repository of sites with design resources, inspiration…)
- designinspiration
- Learn Design with Me
- design resources for developers
- uxchecklist.github.io - Complete list of methods and techniques used in UX design
- Jacob Nielsen’s Heuristics
- Short videos on YouTube about UX, UI, explaining all concepts of the design field.
- The (condensed) basics of UX and UI design
- Usability.gov
- UXBooth
- UXMovement
- UXCollective
- InsideDesign by InVision
- A List Apart
- UX Planet
- https://spotify.design/stories/process
- https://uxmag.com/
- https://www.nngroup.com/
- https://www.canva.com/learn/gestalt-theory/
- www.87seconds.com - lesson-from-our-designers-gestalt-principles
- interaction-design.org
- nngroup.com UI Principles
- Conceptual Integrity: safnet, CSEWeb, DZone, deep read
- https://color.adobe.com/nl/create
- http://khroma.co/
- https://picular.co/
- http://paletton.com
- https://htmlcolorcodes.com/
- https://thenounproject.com/
- https://www.flaticon.com/
- https://icons.mono.company/
- https://remixicon.com/
- https://fontjoy.com/
- https://fonts.google.com/
- https://www.grillitype.com/free\_trials
- https://www.fontsquirrel.com/
- https://www.supremo.co.uk/typeterms/
- https://velvetyne.fr/
- https://www.fonts.ninja/ - Try and discover fonts
- https://betterwebtype.com/web-typography-resources/ - Everything you need to know about web typography
- https://typographyhandbook.com/
- https://www.fontshop.com/glossary - All the terms of typography
- https://typespiration.com/ - Collection and inspiration of typography combinations
- Style Guide Guide by Brad Frost
- https://icons8.com/vector-creator
- https://icons8.com/illustrations
- https://www.drawkit.io/
- https://undraw.co/
- https://www.awwwards.com/
- https://httpster.net/2020/aug/
- http://mindsparklemag.com/
- https://medium.muz.li/
- https://dribbble.com/
- https://www.behance.net/
- https://www.invisionapp.com/talks - Talks and interviews about UX and Design.
- Hack Design Free design lessons by designers.
- Design Lab Design course with mentorship and projects.
Web based tool for interface design, collaborative, add plugins from community (free, up to 2 editors and 3 projects)
Video explanation of Figma features on their official YouTube channel.
- Build reusable components
- Create reusable color styles
- Create a shareable team library
- Collaborate in real-time with multiplayer
- Build and present interactive prototypes
- Handoff seamlessly to developers
- Explore Design Features in Figma
- https://www.figma.com/templates/
- https://www.uistore.design/types/figma/
- https://www.figmafreebies.com/
- https://www.figmafinder.com/
- Spell checker for Figma
- Accessibility checker for Figma
- Adobe XD: Interface design and prototyping tool, shared docs, 2GB cloud storage (free, up to 2 editors and 1 shared document)
- Sketch: Interface design / UX and prototyping tool, collaborative (paid, 30 days trial)
- MindMeister: Flowcharts and mind maps (free, up to 3 maps)
- Draw.io: Flowcharts (paid, 30 days trial)
- Don't Make Me Think, by Steve Krug [Suggested study]
- The User Experience Team of One: A Research and Design Survival Guide, by Leah Buley
- Information Architecture for the World Wide Web, by Louis Rosenfeld and Peter Morville
- Universal Principles of Design, by William Lidwell, Kritina Holden, and Jill Butler
- Information Architecture for the World Wide Web, by Louis Rosenfeld and Peter Morville
- Atomic Design, by Brad Frost
- Design Systems by Alla Kholmatova
- HTML&CSS design and build websites - Jon Duckett (Free PDF) (Official website)
- Free Online book on Design Engineering
- What is Accessibility?
- Human accessibility: Empathy Prompts, Using a screen reader
- Technological accessibility: Throttling & Emulation
- FAC: Web Accessibility
- A quick video intro
- What is ARIA and why is it important?
- ARIA tutorial series
- ARIA Playlist
- Web applications and ARIA FAQ
- Bonus knowlegde: Practical guide for developers on how to add accessibility information to HTML elements using the ARIA specification
- grids example
- Official Best Practices
- Using Firefox's Accessibility Inspector
- Auditing Accessibility with FireFox
- Accessibility Scoring
- Helpful rules
- Throttling & Emulation
- Wave
- Tota11y: Chrome/Chromium Firefox
- a11y: Chrome/Chromium Firefox
- VSCode: Web Accessibility
- Disable CSS and try navigating with only your keyboard
- NoCoffee: Chrome/Chromium Firefox
- ChromeVox
- https://hackyourfuture.github.io/study/#/html-css/accessibility
- https://www.w3.org/WAI/WCAG21/quickref/
- https://www.w3.org/WAI/standards-guidelines/wcag/
- https://webaim.org/
- https://www.microsoft.com/design/inclusive/
- https://accessibility-for-teams.com/
- https://www.a11yproject.com/
- https://www.nngroup.com/articles/keyboard-accessibility/
- https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility/
- https://wave.webaim.org/ - Browser plugin
- https://chrome.google.com/webstore/detail/arc-toolkit/chdkkkccnlfncngelccgbgfmjebmkmce?hl=en - Chrome extension
- https://developers.google.com/web/tools/lighthouse - Chrome dev tool
- https://www.deque.com/axe/ - Chrome extension
- HYF modules are often updated, recordings from past classes may not match this gitbook
- When sending a PR's with recording links please ...
- Indicate which class you were teaching
- Which week it was (if the module is more than 1 week)
- a helpful title or description
- Week 1: User Empathy & Design Thinking
- Week 2: User Interface Design & Figma
- Week 1: User Empathy & Design Thinking
- Week 2: User Interface Design & Figma
Axxes-team
- week 1: User Empathy & Design Thinking
- Week 2: User Interface Design & Figma