Topics

Note: If you find this relevant, head over to www.usable.community, you can sign

What is Design?

The concept of Design Thinking.

Heuristics of UX Design
WEEK 1
Introduction to UX Design
Explore the meaning of Design, the
common terminologies within the
design industry and many more.

Interaction Design

Usability

UX vs UI

White Space

Layouts & Grid

Typography

WEEK 2
UI Basics.

What do humans see when they look

 Typography

WEEK 2
UI Basics.

What do humans see when they look Visual Hierarchy

at an interface.
The goal of this section is to ensure
you can identify the various
features/components that come
together to make an interface
Colors

Accessibility

Copy. Because, Words Matter

USER EXPERIENCE DESIGN

Role of Context in Design

Design for Mobile (& Web)

WEEK 3
Context Matters: Web, Mobile,
Voice, VR & More
What are the things to consider when Web
designing for various platforms
WEEK 3
Context Matters: Web, Mobile,
Voice, VR & More
What are the things to consider when
designing for various platforms

Design for Voice

Design for Argumented Reality (AR) or

Virtual Reality (VR)

What is UX Research & Types

WEEK 4
Introduction to UX Research
If the premise of design is to solve
problems for the user, then the user
should be at the center of every
design. This section is focused on
various methods/tools you can use to
understand a user. The main goal
with this section is to know your
options so you can at least identify
when you need to conduct a
qualitative or quantitative research.
Turning research outcomes to
actionable insights

What is design thinking

Business Value of Design Thinking

The Design Thinking process

The Design Thinking process: 1.

Empathize

The Design Thinking process: 2. Define

The Design Thinking process: 3. Ideate

WEEK 5 - 7
Introduction to Design Thinking
 WEEK 5 - 7
Introduction to Design Thinking

The Design Thinking process: 4.

Prototype

The Design Thinking process: 5. Test

Some related videos

Introduction: User Interface Design

Sum of the Parts.

Week 8 Breaking interfaces into smaller
Moving Pixels: Interface Design
The goal with this module is to be
able to break every website or app
into smaller, identifiable components
or patterns.
Designing for Everyone: Accessibility
USER INTERFACE DESIGN

Week
‍♂
♂
‍️‍‍️️ ️️ 9 - ‍️ Learn by Doing: FigmaFor
Getting
this Started
part of the
withprocess,
Figma the focus is on improving your UI Design skills w

UI Design Exercises/Examples
 Supporting Resources Goals
head over to www.usable.community, you can sign up and connect with other people interested in starting or growing their design careers.

https://medium.com/google-design/the-meaning-of-design-44f1a82129a8
https://shakuro.com/blog/the-meaning-of-design-what-design-is-and-why-its-important
https://usabilitypost.com/2010/11/17/the-design-of-everyday-things/?ref=hackdesign

https://www.youtube.com/watch?v=gHGN6hs2gZY
https://www.interaction-design.org/literature/article/5-stages-in-the-design-thinking-process
https://www.ideou.com/blogs/inspiration/what-is-design-thinking
https://hbr.org/2018/09/why-design-thinking-works

https://www.nngroup.com/articles/ten-usability-heuristics/
https://www.youtube.com/watch?v=sIP71g8ueK0
https://www.behance.net/gallery/62185697/Psychological-Laws-of-User-Experience
https://behaviormodel.org/?ref=hackdesign

https://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/?ref=hackdesign

https://www.nngroup.com/articles/usability-101-introduction-to-usability/
https://www.designforusability.org/about/an-introduction-to-usability

https://careerfoundry.com/en/blog/ux-design/the-difference-between-ux-and-ui-design-a-laymans-guide/
https://xd.adobe.com/ideas/process/ui-design/ui-vs-ux-design-understanding-similarities-and-differences/

https://blog.prototypr.io/importance-of-white-space-in-design-5a40c0e65bfd
https://themeisle.com/blog/white-space-design/
https://designforhackers.com/blog/whitespace-113/

https://webdesign.tutsplus.com/articles/a-comprehensive-introduction-to-grids-in-web-design--cms-26521
https://www.designer-daily.com/the-use-of-grids-in-website-design-6639
https://www.youtube.com/watch?v=TDRhwSfxYkg
https://en.99designs.nl/blog/web-digital/website-layout-fundamentals/
https://material.io/design/layout/understanding-layout.html#
https://markboulton.co.uk/journal/five-simple-steps-to-designing-grid-systems-preface/?ref=hackdesign

https://careerfoundry.com/en/blog/ui-design/beginners-guide-to-typography/#:~:text=2.-,Why%20is%20typography%20impor
https://betterwebtype.com/articles/2018/10/15/rhythm-in-web-typography/
https://medium.com/swlh/everything-you-need-to-know-about-designing-for-web-typography-69cec6ca8230
https://www.youtube.com/watch?v=OUp7ale49lI
http://www.merttol.com/articles/web/checklist-for-better-web-typography.html

https://webdesign.tutsplus.com/articles/understanding-visual-hierarchy-in-web-design--webdesign-84
https://en.99designs.nl/blog/tips/6-principles-of-visual-hierarchy/
http://vanseodesign.com/web-design/visual-hierarchy/?ref=hackdesign

https://webflow.com/blog/color-theory
https://en.99designs.nl/blog/creative-inspiration/psychology-color-web-design/
https://en.99designs.nl/blog/tips/how-color-impacts-emotions-and-behaviors/
https://www.youtube.com/watch?v=UuPt4RpV4Xc

https://www.interaction-design.org/literature/topics/accessibility
https://uxplanet.org/a-primer-to-web-accessibility-for-designers-2c548448c612

https://signalvnoise.com/posts/3404-reminder-design-is-still-about-words?ref=hackdesign
https://medium.com/nyc-design/the-importance-of-copy-in-ux-2b1ed8aecd92
https://www.toptal.com/designers/ux/ux-copy

https://uxdworld.com/2020/08/13/importance-of-context-in-design/#:~:text=The%20context%20of%20a%20product,going%2
https://www.shopify.com/partners/blog/97802374-designing-with-the-users-context-in-mind
https://uxdesign.cc/contextual-ux-5ef5db68d869
https://www.youtube.com/watch?v=eemOZfsrKdg
https://www.youtube.com/watch?v=qV6yPErbjCg

https://www.interaction-design.org/literature/topics/mobile-ux-design
https://medium.com/@richardomolo/context-and-notifications-in-mobile-app-ux-design-a1e1e6e6b6a1
https://www.toptal.com/designers/ux/mobile-ux-design-best-practices

https://webflow.com/blog/web-design-for-beginners
https://www.youtube.com/watch?v=kDuN9siqvE0
https://uxdesign.cc/contextual-ux-5ef5db68d869

https://www.interaction-design.org/literature/article/how-to-design-voice-user-interfaces
https://www.youtube.com/watch?v=8OXN0ZDpwrM

https://xd.adobe.com/ideas/principles/emerging-technology/ux-design-principles-for-augmented-reality/
https://www.youtube.com/watch?v=v0c5P3prpMM
https://www.youtube.com/watch?v=rqAxyxEYdp8

https://www.nngroup.com/articles/which-ux-research-methods/
https://www.nngroup.com/articles/ux-research-cheat-sheet/
https://www.toptal.com/designers/user-research/guide-to-ux-research-methods
https://maze.co/guides/ux-research/
https://www.youtube.com/watch?v=zGCRhd3r4fE

https://www.uxmatters.com/mt/archives/2012/02/communicating-user-research-findings.php
https://uxplanet.org/communicating-ux-research-98df0b0f8d16
https://uxdesign.cc/4-pillars-of-communicating-the-value-of-user-research-ffcb3bfb0771
https://www.youtube.com/watch?v=esg5iUALAJM
https://www.youtube.com/watch?v=kodg6tBRsPA

https://www.ideou.com/blogs/inspiration/what-is-design-thinking
AJ&Smart: https://www.youtube.com/watch?v=gHGN6hs2gZY

https://hbr.org/2018/09/why-design-thinking-works

https://www.youtube.com/watch?v=_r0VX-aU_T8

https://careerfoundry.com/en/blog/ux-design/empathy-and-ux-design/
https://www.youtube.com/watch?v=q654-kmF3Pc
https://www.youtube.com/watch?v=QwF9a56WFWA

https://careerfoundry.com/en/blog/ux-design/stage-two-design-thinking-define-the-problem/
https://www.youtube.com/watch?v=TNAdanuvwtc&t=0s

https://careerfoundry.com/en/blog/ux-design/what-is-ideation-in-design-thinking/
workshopper.com/post/design-thinkings-exciting-third-phase-ideating
https://www.youtube.com/watch?v=zbLxs6te5to&t=0s

https://careerfoundry.com/en/blog/ux-design/design-thinking-stage-four-prototyping/
https://careerfoundry.com/en/blog/ui-design/the-value-of-prototyping-in-ui-design/
https://www.youtube.com/watch?v=Q4MzT2MEDHA&t=0s

https://www.workshopper.com/post/design-thinking-phase-5-how-to-test-effectively
https://www.youtube.com/watch?v=UVEQCNM6X-A&t=0s
https://www.youtube.com/watch?v=OrYYdVyyc8s

https://www.youtube.com/watch?v=UQYoWwHg3qA
https://www.youtube.com/watch?v=ZBxZC9I6xyk
https://www.youtube.com/watch?v=cJQh9dTp1OE

https://www.interaction-design.org/literature/topics/ui-design#:~:text=User%20interface%20(UI)%20design%20is,e.g.%2C%2

https://sparkbox.com/foundry/web_design_process_decomposition_exercise
https://getflywheel.com/layout/design-for-web-using-design-patterns-how-to/
https://www.youtube.com/watch?v=aB6us_txi54
https://www.youtube.com/watch?v=_7LZ14xtfOc

https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94
https://www.youtube.com/watch?v=mp1PfL3m_hI
https://medium.com/slacktime/introduction-to-ui-design-8b54cd355a7b

https://www.youtube.com/watch?v=jk1T0CdLxwU
https://www.youtube.com/watch?v=FTFaQWZBqQ8
https://www.youtube.com/watch?v=1MbQaYCCzzI

Landing Pagehttps://www.youtube.com/watch?v=tNp7EA73Y2A
Uber Eats Designhttps://www.youtube.com/watch?v=GDjEvZ3wpSs
Additional Comments
design thinking for businesses and measuring business
impact. We will cover this lightly in a seperate section Note We need to discuss this topic.
Related Activities
Some Additional Resources
UI Patterns @UX Library: https://www.uxlibrary.org/explore/ui-design/ui-patterns-and-inspiration
ReallyGood UX - https://www.reallygoodux.io/
UI Recipes - https://uirecipes.com/
Page Flows - https://pageflows.com/