Skip to content

MLSC-BSOITR/UI-UX-Resources

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
README.md
README.md
 
 

Repository files navigation

MLSC BSIOTR - UI/UX Learning Resources

Curated list for people choosing UI/UX as a field in Tech

Beginners

Table of Contents

Designers to Follow

   

Softwares

   

Fundamentals of UX

Goals

Beginners should be able to:

  1. Distinguish between User Interface Design and User Experience Design
  2. Understand problem solving using User Experience Design
  3. Diffrentiate between "Good UX" and "Bad UX"
  4. Know the diffrent areas of UX (career-wise)
  5. 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:

  1. Understand the UX Design process end to end
  2. Know the basics of the design thinking
  3. Empathize with users
  4. Figure out user pain points
  5. 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:

  1. Digest and understand what information architecture
  2. Understand concept like site mapping, user flow, user journey etc.
  3. 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:

  1. Importance of usability testing
  2. Carry out usability testing
  3. Have understanding of usability methods and how to carry them out
  4. Use heuristics evaluation to test products
  5. 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:

  1. Digest and understand what user interview is
  2. Understand the methodology of preparing users interview.
  3. 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:

  1. Understand the principle of good design
  2. Understand Visual Hierarchy & UI Patterns
  3. Understand the concept of wireframing (low, and mid)
  4. Interact with Figma, Adobe XD or Sketch interface
  5. Put mood boards together
  6. 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

  1. Design three mobile screens of Intagram & Facebook UI (mid-fidelity wireframe only)
  2. 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:

  1. Understand the concept of responsive design
  2. Build components and naming convention
  3. Design interfaces using layouts and grids
  4. Create local style guides
  5. Use auto layout

Books

  • Practical Responsive Web Design - CORE Download
  • Web Design Style Guide - Carleton College Download

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

  1. #Exploration - Fashion Website by Dwinawan for Paperpillar on Dribble
  2. #Exploration - More Screens - Fashion Mobile App by Dwinawan for Paperpillar on Dribble
  3. Create a local style guide using components, auto layout etc. for the dribble projects

   

Design Systems

Goals

Interns should be able to:

  1. Design using existing design systems
  2. Create projects from deconstructing user stories
  3. 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

  1. Dribble - Discover the World's Top Designers & Creative Professionals
  2. Behance :: For You
  3. Design Resource
  4. The Best Design Example and Inspiration | LandingFolio
  5. 3649 Landing Page Design Inspiration - Lapa Ninja

Tasks

  1. 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:

  1. Create clickable prototypes of their existing projects
  2. Manoeuvre animations in prototype - use Fade, Slide, Push, Overlay
  3. Handover Prototype to developers for Dev Testing
  4. Manoeuvre animations in prototype

Books

  • How to Prototype Download
  • How to Prototype: The Rapid Prototyping Process Download

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

  1. Figma
  2. Proto.io - Prototyping for all
  3. Online Mockup, Wireframe & UI Prototyping Tool · Moqups
  4. 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:

  1. Understand the process of writing a case study
  2. Write case studies for their own projects
  3. Understand and create their own design briefs
  4. 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

  1. How to Write a UX Case Study: Template and Examples - AdobeXD
  2. 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

More by MLSC

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

Table of Contents

Community

Design tools

Fonts:

Colors:

Illustrations:

Wireframes

Design Systems

UI Kits

Affinity Diagrams

Blob Maker:

Usability tests:

Build your portfolio:

Showcase your work:

Templates:

Resources

Designing for Accesibility

Design critique guide

Case Studies and Portfolios

Design Laws and Principles

UI UX programs to follow

UI UX blogs to Follow

Design inspiration

Videos

Courses

Unrelated design

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
Namnso Ukpanah https://www.linkedin.com/in/namnsoukpanah/ Figma Africa (Community lead) @namnsoukpanah

Learn from others by ansh mehra

About

No description, website, or topics provided.

Resources

Readme
Activity
Custom properties

Stars

2 stars

Watchers

0 watching

Forks

1 fork
Report repository

Releases

No releases published

Packages

No packages published