UX/UI Designs Note

UX

(click to expand/hide)

• UX explaination
• UX design process
• User Research
  • An article on why user research forms a critical part of the design process
  • Nielsen Norman Group’s list of user research tips
• Personas
  • Articles and video guide to creating personas
  • Articles guide to creating personas
  • A practical guide to relating scenarios and personas
  • A little bit about personas
• User stories
  • How to write user stories
  • The difference between user stories and use cases
• Scenarios
  • Why you need scenarios
  • Two part article which offers a firm understanding of the concept of Scenarios (Part 1)
  • Two part article which offers a firm understanding of the concept of Scenarios (Part 2)
  • A concise summary card on user scenarios complete with instructions
    • Book: The Persona Lifecycle: Keeping People in Mind Throughout Product Design (John Pruitt, Tamara Adlin)
• Storyboarding
  • Storyboards in website design

UI

(click to expand/hide)

• UI design principles and tips for creating great UI
• A comprehensive guide to the discipline of UI design
• User research
  • UI at its worst, an amusing but infuriating example of UI design .. Worth a look!
  • A description on what Is UI Design
  • Basic methodologies
• Use Figma for design prototype(wireframing)

UX vs UI

(click to expand/hide)

• An article about What Is Empathy and Why Does It Matter in Design Thinking?
• Another article on the similarities and differences between UX and UI design?

(User Research) Evaluation Cheat Sheets

Heuristic Evaluation Report by Manuel Ryan Espinsa

Design for Accessibility

(click to expand/hide)

Additional Resources for Design tips & methods

• Designing for accessibility top tips to get you started

• Designing for accessibility top tips to get you started

• Good tips to help Improve any Online Form

• Usability methods

• Component design and ways of using them

• An article on form design and best principles

• Design systems explained in detail

• Current inspirational design systems

Form Design Practices

(click to expand/hide)

Design principles

• An article on form design and best principles

• Design systems explained in detail

• Current inspirational design systems

Design tips

• Good tips to help improve any online form

• Component design and ways of using them

Navigation Best Practices

(click to expand/hide)

User research

• Navigation menu icons : some nice examples

• Principles of Icon Design

• Usability Evaluation

• Evaluating interactive design

Figma 101

Grids and constraints

• Video on grids and constraints
• How to use grids to improve visual hierarchy

Typography

• 10 Principles for Typography in UI Design: Typography in Design Systems
• Typography and best practice

Wireframing

• What is wireframing?

Usability testing

(click to expand/hide)

Usability test cheat sheet

Usability test template and Guide

• Usability testing methodology
• How to write a usability test top tips
• Usability testing methods
• How to plan a usability test

Design Elements and Principles

Prototyping

• High-Fidelity & Low-Fidelity Prototyping.
• What is prototyping?
• Types of Prototyping

UI components

• Creating a UI Component Design System
• The architecture of a component

Mood boards

• Mood boards in design
• What are mood boards and How it is Important in UX Design World?
• How to make a mood board step by step

User interface elements

• User interface elements

Design System

• Design System notes
• Design System examples
  • Design, manage, and deploy your design systems with Figma
  • What is a design system?
  • This page contains several links to Design System resources
  • Best practices for form design
  • Design Systems: A Practical Guide to Creating Design Languages for Digital Products

Material Design

• Examples of Ease of Use and Tools
• Atlassian: an example of comprehensiveness
• Polaris from Shopify: the incorporation of design into the workflows of designers and developers.
• IBM did incredible work on the Design language.

Form Design

• Nathan Curtis: components and design systems

Micro-interactions and micro-animations

Micro-animations with Figma tutorial

• Micro-Animations with Figma Tutorial
• How to test your prototype and gather feedback