UI/UX Learning Resources
Curated list for people choosing UI/UX as a field in Tech
Beginners
Table of Contents
- Softwares
- Fundamentals of UX
- Design Thinking
- Information Architecture
- User Testing and Heuristics Evaluation
Designers to Follow
- Ademola Adekanbi: Twitter
- Josiah Endurance: Twitter
- Jaden Tega: Twitter
- UX Collective: Twitter
- George Moller: Twitter
- Druids: Twitter
- Kigsley Iheonye: Twitter
- Timothy Achumba: Twitter
- Olamide Towobola: Twitter
- Sunil Kumar: Twitter
- Victor Onazi: Twitter
- Akin Boluwatife: Twitter
- Ravin: Twitter
- Tunbosun Tobilola: Twitter
- Daniel Abayomi: Twitter
- Hammed Taiwo: Twitter
- Femi : Twitter
- Akin: Twitter
- Ari Alasah: Twitter
- Fiyin : Twitter
- Fele Omolola: Twitter
- Namso Ukpanah: Twitter
- Joey Banks: Twitter
- Seyi Martins: Twitter
- Sam Adekunle: Twitter
- Seyi Oniyitan: Twitter
Softwares
- Figma: Website
- Sketch(MacOS): Website
- InVision: Website
- Adobe XD: Website
- ProtoPie: Website
- Principle(MacOS): Website
- Framer: Website
Fundamentals of UX
Goals
Beginners should be able to:
- Distinguish between User Interface Design and User Experience Design
- Understand problem solving using User Experience Design
- Diffrentiate between "Good UX" and "Bad UX"
- Know the diffrent areas of UX (career-wise)
- Have a good understanding of some laws of UX
Books
- UX Fundamentals for Non-UX Professionals: User Experience Principles for Managers, Writers. Download
- UX Design Principle Fundamentals for Non-Designers. Download
Articles
- An Introduction to User Experience Design by Ben Ralph. View
- Laws of UX. View
- UI, UX: Who Does What? A Designer’s Guide To The Tech Industry. View
- What Is User Experience (UX) Design? Everything You Need To Know To Get Started. View
- An Introduction to User Experience Design. (One) View
- An Introduction to User Experience Design. (Two) View
- An Introduction to User Experience Design. View
- An Introduction to User Experience Design. View
Videos
- UX Crash Course | Getting Started in User Experience Design Watch
- The Laws of UX - 19 Psychological Design Principles Watch
- What is UI vs. UX Design? A Practical Example in Under 6 Minutes Watch
- What Is UX Design? - An Introduction (2021) Watch
- 9 Tips for Becoming a GREAT UI Designer Watch
Design Thinking
Goals
Beginners should be able to:
- Understand the UX Design process end to end
- Know the basics of the design thinking
- Empathize with users
- Figure out user pain points
- Understand and build personas
Books
- Basics Design: Design Thinking. Download
- Design Thinking: New Product Development Essentials from the PDMA. Download
Articles
- What is Design Thinking? View
- What is Design Thinking? – IDEO U View
- What Exactly Is Design Thinking? (Updated Guide for 2021) View
- Putting Personas to Work in UX Design: What They Are and Why They’re Important. View
- Personas – A Simple Introduction View
- How to Define a User Persona View
- The design thinking process for better UX - Justinmind View
- 5 Stages in the Design Thinking Process View
Videos
- What Is Design Thinking? An Overview (2020) Watch
- Design Thinking Full Course | Design Thinking Process | Design Thinking For Beginners | Simplilearn Watch
- Stanford Webinar - Design Thinking = Method, Not Magic Watch
- Design Thinking 101 Watch
- 9 Tips for Becoming a GREAT UI Designer Watch
Information Architecture
Goals
Beginners should be able to:
- Digest and understand what information architecture
- Understand concept like site mapping, user flow, user journey etc.
- Understand and write user stories and epics
Books
- Information Architecture: The Design and Integration of Information Spaces. Download
- Information Architecture for the World Wide Web Download
Articles
- A Beginner's Guide To Information Architecture in UX (2021) View
- Information Architecture (IA) | Learn & Explore | Adobe XD Ideas View
- Information Architecture. Basics for Designers. | by tubik View
- What Are User Flows In UX Design? (A full beginner's guide) View
- A Beginner's Guide To User Journey Mapping | by Nick View
- User Stories and User Story Examples by Mike Cohn View
- How to create a UX Sitemap: a simple guideline | by Jennifer View
Videos
- A Beginner’s Guide To Information Architecture Watch
- Introduction and Tutorial to UX Sitemap: UI UX Design | Miro | 2021 Watch
- How to do User Story Mapping Watch
- Customer Journey Map WorkshopWatch
- UX Design - Why you NEED to know User Flows! Watch
User Testing and Heuristics Evaluation
Goals
Beginners should be able to:
- Importance of usability testing
- Carry out usability testing
- Have understanding of usability methods and how to carry them out
- Use heuristics evaluation to test products
- Carry out competitive analysis
Books
- The UX Book: Process and Guidelines for Ensuring a Quality User Experience Download
- Advances in Usability and User Experience Download
Articles
- What is User Testing? - Learn UX - Keep It Usable View
- 6 Simple Steps to Conduct User Testing | Adam Fard Studio View
- 10 Usability Heuristics for User Interface Design View
- Usability Testing 101 - Nielsen Norman Group View
- User & Usability Testing | Methods & Tips | Adobe XD Ideas View
- 8 Usability Testing Methods That Work View
- A Guide to Competitive Analysis for UX Design | Adobe XD View
Videos
- User Testing Tutorial Watch
- You need to know Usability Testing (with Maze) Watch
- Heuristic Evaluation of User Interfaces Watch
- Intro to Usability Testing and Heuristic Evaluations Watch
- Usability Testing Tips & Tools: Powerful UX Research Method Watch
Intermediate
Table of Contents
User Interview
Goals
Interns should be able to:
- Digest and understand what user interview is
- Understand the methodology of preparing users interview.
- Should to carry out user interview (minimum of 10 questions in regards to what you're building)
Books
- Starter questions for User research interviews | Havard University Download
- The User Interview - OakenDoor Download
- Interview Techniques for Ux Practitioners. A User-Centered Design Method Download
Articles
- What are User Interviews? | Interaction Design Foundation View
- User Interviews: How, When, and Why to Conduct Them View
- User Interview Example Questions | Usability & Web DesignView
- Usability Testing 101 - Nielsen Norman Group View
- A Cheatsheet for User Interview and Follow Ups Questions by Stephanie Walter View
- User Interviews: Guide To An Insightful UX Interview View
- How to Conduct a User Interview That Actually Gets Insights | Shopify View
Videos
- How To Conduct User Interviews Like A Pro (UX Design) Watch
- How to Conduct a User Interview for UX Designers (in 10 Minutes) - FREE Template Provided Watch
- The 3 Types of User Interviews: Structured, Semi-Structured, and Unstructured Watch
- Eric Migicovsky - How to Talk to Users at YCombinator Watch
- Lecture 16 - How to Run a User Interview (Emmett Shear) Watch
- Performing a Research Interview: An Interview Example Watch
Introduction to UI Design 1
Goals
Interns should be able to:
- Understand the principle of good design
- Understand Visual Hierarchy & UI Patterns
- Understand the concept of wireframing (low, and mid)
- Interact with Figma, Adobe XD or Sketch interface
- Put mood boards together
- Understand each and every elements on your design software
Books
- Fundamentals of Good UI Design - Uday Gajendar Download
- User Interface Design Download
- The New Web Typography: Create a Visual Hierarchy with Responsive Web Design Download
- Web UI Design Patterns Download
- Mobile UI Design Patterns Download
- WEB UI DESIGN BEST PRACTICES Download
- Mobile Design Pattern Gallery: UI Patterns for Smartphone Apps Download
Articles
- What is User Interface Design? | Interaction Design View
- What are User Interface (UI) Design Patterns? | Interaction Design View
- The Principles of Design and Their Importance | Toptal View
- Visual Hierarchy in Design: Key Principles & Examples | Adobe XD View
- UI Moodboard Template & Example - Milanote View
- 13 basic mobile UI patterns to know about | by Kate View
- Web Design Pattern View
Videos
- The 2019 UI Design Crash Course for Beginners | DesignCourse Watch
- Free Figma Tutorial: Designing Wireframes with Figma Watch
- Understanding Visual Hierarchy in UI Design - Live Project Follow-Along Watch
- UI Design Live: UI Patterns, Visual Hierarchy and Iterations Watch
- How to Create a Better Mood Board for UI | Mobile and Web Design Watch
- Performing a Research Interview: An Interview Example Watch
- Learn Adobe XD in 2021 by Example (Crash Course) Watch
- Intro to Sketch for Beginners | Sketch Tutorial (2020) Watch
Tasks
- Design three mobile screens of Intagram & Facebook UI (mid-fidelity wireframe only)
- Design low fidelity wireframe for Apple Website (Landing Page) & Whatsapp Web (Landing screen and chat interface)
Resources
Wireframe Kits gotten from Figma Community
Introduction to UI Design 2
Goals
Interns should be able to:
- Understand the concept of responsive design
- Build components and naming convention
- Design interfaces using layouts and grids
- Create local style guides
- Use auto layout
Books
Articles
- Layout Grid - Figma Handbook - Design+Code View
- Create scalable web page layouts in Figma | UX Collective View
- Consistency Is Key – How to Build a Figma Design System | Toptal View
- Auto Layout in Figma - Figma Handbook - Design+Code View
- Working with Layout Tools in Adobe XD View
Videos
- Figma Tutorial: Layout Grids Watch
- Figma Tutorial: Setup a Responsive Grid Layout for UI & Web Design (IN 11 MINUTES) Watch
- Figma Tutorial: Variants in 11 minutes (With Demo File & Real Examples) Watch
- Figma Tutorial: Creating Styles Watch
- Figma in 5: Auto Layout Watch
- Performing a Research Interview: An Interview Example Watch
- Learn Adobe XD in 2021 by Example (Crash Course) Watch
- Figma Shoe Ordering Mobile App Design (Figma Mobile Design 2020) Watch
Tasks
Redesign two dribble projects
- #Exploration - Fashion Website by Dwinawan for Paperpillar on Dribble
- #Exploration - More Screens - Fashion Mobile App by Dwinawan for Paperpillar on Dribble
- Create a local style guide using components, auto layout etc. for the dribble projects
Design Systems
Goals
Interns should be able to:
- Design using existing design systems
- Create projects from deconstructing user stories
- Draw out user flow for a product
Books
- Practical UI Patterns for Design Systems Download
Articles
- A comprehensive guide to design systems | Inside Design Blog View
- Everything you need to know about Design Systems by Audrey Hacq View
Videos
- What is a Design System? Design Systems 101 for Designers Watch
- Build it in Figma: Create a Design System — FoundationsWatch
- Design Systems, Pattern Libraries & Style Guides... Oh My! Watch
Resources
Here are websites for design inspiration
- Dribble - Discover the World's Top Designers & Creative Professionals
- Behance :: For You
- Design Resource
- The Best Design Example and Inspiration | LandingFolio
- 3649 Landing Page Design Inspiration - Lapa Ninja
Tasks
- Put together a moodboard for concept recipe app Design a recipe concept app using "Pegasus" design systems Pegasus Design Systems (Community) - Figma
- Users should be able to login/signup via Google or Facebook
- Users should be able to sign up by inputting their email and creating a password
- Users should be able to read step by step procedure for their chose recipe
- Users should be able to watch videos tutorials of recipes
- Users should be able to rate recipes and also comment them
Advanced
Table of Contents
Prototyping
Goals
Interns should be able to:
- Create clickable prototypes of their existing projects
- Manoeuvre animations in prototype - use Fade, Slide, Push, Overlay
- Handover Prototype to developers for Dev Testing
- Manoeuvre animations in prototype
Books
Articles
- 14 best prototyping tools for UI/UX designers | Webflow Blog View
- 4 Steps to Build Your Product's First Prototype | Athgo View
- A Complete Introduction to Prototyping (Stage 4 of the Design Thinking Process) View
- Prototyping: Learn Eight Common Methods and Best Practices View
- Perfect Your UX Design Process – A Guide to Prototype Design View
- Guide to prototyping in Figma View
Videos
- Figma Tutorial - Prototyping in Figma Watch
- Horizontal & Vertical Scrolling | Figma Tutorial Watch
- Figma Tutorial: Smart Animate and Drag Triggers Watch
- Figma Tutorial: Prototyping Watch
- Figma Tutorial: Prototyping & Transitions Watch
- Food App Design | UX/UI ( Wireframe, Prototype, Export) Watch
- Figma tutorial: Handoff seamlessly to developers [8 of 8] Watch
- Figma For Beginners: Prepare for Handoff (4/4) Watch
Resources
Here are websites for prototyping softwares
- Figma
- Proto.io - Prototyping for all
- Online Mockup, Wireframe & UI Prototyping Tool · Moqups
- MockFlow - Online Wireframe Tools, Prototyping Tools, Online
Tasks
Design and prototype two dribbble posts
Prototype your recipe concept app
Case Studies
Goals
Interns should be able to:
- Understand the process of writing a case study
- Write case studies for their own projects
- Understand and create their own design briefs
- Approach new or existing projects with ease
Books
- Writing Case Studies Download
- PREPARING A CASE STUDY:A Guide for Designing and Conducting a Case Study for Evaluation Input Download
- WRITING CASE STUDIES: A MANUAL Download
- DESIGNING CASE STUDIES | David E. GrayDownload
- A UI Design Case Study and a Prototype of a Travel Search Engine Project Report Download
Articles
- How to write a UX case study | Inside Design Blog - InVision View
- Use This Guide To Write An Awesome UX Case Study View
- How to create the perfect structure for a UX case study View
- How to write a UX case study to showcase your process & skills View
Videos
- How To Write A UX Case Study Watch
- How to Outline & Write your UX Case Study | real example! Watch
- UX Portfolio | How to Create a UX Case Study Watch
- Writing the Perfect UI/UX Case Study Watch
- Creating a Design Brief Watch
- How to Write an Awesome Design Brief | Building Better Brands | Episode 11 - YouTube Watch
Resources
Here are websites for resources on case studies
- How to Write a UX Case Study: Template and Examples - AdobeXD
- Create A Killer UX Design Portfolio With These Pro Tips - YouTube
Tasks
Read and digest two case studies on food
Note any new thing you learnt or any thing that got you confused
Project - UX Phase
Tasks
Design a tenant finder and communication app that will allow landlords to find and communicate with potential tenants directly without any dealer. It will also allow tenants to communicate with their existing landlords regarding property issues, maintenance requirements, pay rents, etc.
- Use the UX techniques you’ve been taught since week one (i.e user research, user stories, user flow, wireframing etc.) to carry out this exercise. Once you’ve gotten all you need, begin writing a case study on what you were able to discover.
- Your case study should have the problem statement, personas, information architecture, wireframes, and your UX design process in general.
Project - UI Phase
Tasks
- Convert your wireframes into high fidelity screens
- Prototype your high fidelity screens
- Complete your case study
Project - Testing and Publishing
Tasks
- Test your prototype with users to look out for usability issues
- Test your work against the heuristics evaluations
- Document your findings in your case study
- Publish your work on your portfolio
Apply for that dream job as a Product Designer!
Contributing
I'll be more than pleased if you contribute to this resource. Read Contribution Doc