UX/UI Design Principles Compact (Theory + Figma Exercise)

Learn about user experience and user interface design principles such as heuristic rules and best practices.

4.68 (803 reviews)
Udemy
platform
English
language
User Experience
category
2,777
students
2 hours
content
Mar 2022
last update
$54.99
regular price

What you will learn

Improve the structure of your design by understanding UX theory

Improve your Design by understanding UI theory

Improve communication with you UX or UI team

Improve an existing website for you or your clients

Description

Today, we're going to learn about UX/UI Design Principles.

When looking at UI Design, we can usually tell which design works better, but when you start working on your own designs, it's suddenly not that easy anymore.


What is the secret behind a smooth process and perfect distribution that seems so pleasing to us?


In under two hours, I will show you the UX/UI Design principles and what, how, and why they make a difference.


In this course, I combine theory concepts, real-life examples, and final practical exercises to make sure it's not just theory but a skill you can apply to your wireframes web and app designs right away. However, please be aware that this is an overall theory class!


This course is divided into two parts:


Part 1: Principles of User Experience Design

In the first part, we will dive into UX Design principles, this will be loosely based on the Nielsen Heuristics:

  1. Real-world references, mental models, and how to use them

  2. Jakob's Law - why other pages are important to your own

  3. Consistency is key

  4. Hick's Law - working with choice and limitation

  5. The magic number is 4 !

  6. Common page positioning & scanning patterns

  7. Feedback and system status

  8. Error prevention

  9. Error handling

  10. A word on dopamine & ethical design

  11. EXERCISE(+Figma File)--> We are building a wireframe with Figma!


Part 2: Principles of User Interface Design

In the second part, we will learn about UX Design Principles. This part is mainly based on Gestalt Theory:


  1. Aesthetic-Usability Effect – Why even bother?

  2. What is Visual Hierarchy?

  3. Law of Prägnanz – Simplicity is key!

  4. Law of Similarity – use colour, size, and shape to create a design system

  5. A little more on text- and touch target size

  6. Law of Proximity – Spacing systems and grids

  7. Law of Common Region – Creating sections and adding structure to your layout

  8. Von Restorff Effect – Drawing attention where you need it

  9. Law of Common Fate – Behavioural prediction

  10. Visceral reaction – Emotion in your design

  11. EXERCISE(+Figma File)--> We are transforming a wireframe to UI Design with Figma.

Part 3: A few little extras

As a little gift, here are some extras from my other courses to dive a little deeper into some of the subjects we have touched. Enjoy!


This course is for you if you're new to UX design, want to brush up on your skills.


This is a class by moonlearning.

Content

Before We Start

What is UX & UI

UX Design Principles

UX Introduction
Real World References and Mental Models
Jakob's Law - Other Pages
A Little Favor
Consistency Is Key
Hick's Law - Choice and Limitation
The Magic Number Is 4
Page Positioning Scanning Patterns
Feedback and System Status
Error prevention
Error Handling
A Word About Dopamine and Ethical Design
Course Material
EXERCISE: Co-working space wireframe

UI Design Principles

UI Design and a Word on Gestalt Theory
Aesthetic-Usability Effect Why We Even Bother
What is Visual Hierarchy?
Law of Praegnanz Simplicity is key
Law of Similarity Colour Size and Shape
A Little More on Text- And Touch Target Size
Law of Proximity Spacing Systems and Grids
Law of Common Region Creating Sections in Your Layout
Von Restorff Effect Drawing Attention Where You Need It
Law of Common Fate Behavioural Prediction
Course Material (Reminder)
EXERCISE: Co-working Figma Design

Extra: Understanding 8pt Spacing System

How and Why We Use 8pt Spacing
Difference of Hard & Soft 8pt Grid Approach
Spacing Summary

Extra: Intro to Grids

Understanding Columns Gutter and Margin
Adding Elements to the Grid
Making the Grid Responsive – Breakpoints
Responsive vs. Adaptive Grids

Extra: Scaling Typography in UI Design

Setting Up a Typescale
Different Scaling Systems for Your Typescale

Screenshots

UX/UI Design Principles Compact (Theory + Figma Exercise) - Screenshot_01UX/UI Design Principles Compact (Theory + Figma Exercise) - Screenshot_02UX/UI Design Principles Compact (Theory + Figma Exercise) - Screenshot_03UX/UI Design Principles Compact (Theory + Figma Exercise) - Screenshot_04

Reviews

Curtis
July 24, 2023
Good brief course on the basics of design. It could have touched on the basics of figma though. I've never used it, so that was an issue for me.
Saul
July 13, 2023
Very complete course! It gives you a good overview of the all key parts for UX/UI. It's very well structured and the length of the lessons is optimized so you can take the course along the days and still feel engaged with its content.
Mariana
July 11, 2023
Great class! Amazing overview on UX/UI with engaging teaching and beautiful voice! Thank you so much!
Kseniia
July 6, 2023
Great slides animation, easy to understand and follow. Highly recommend to everyone who is interested in UI UX basics and beyond.
Layal
June 9, 2023
The class or crash course was fantastic! It was concise, informative, and enjoyable. The instructor's voice was great too. Overall, it was an excellent learning experience.
Hamza
June 7, 2023
You won't believe how much valuable knowledge you can gain from this course in just 2 hours! I absolutely love how the videos are concise and get straight to the point. The content is incredibly rich, and I've learned so much from it. Trust me, this course is a must-have recommendation!
Prasad
June 6, 2023
Nothing of Figma; Need real life example or screenshots to clarifying topic rest of is quite good content in this course.
Anna-Katharina
June 6, 2023
Wirklich ein super UI/UX Kurs, perfekt für Entwickler, die gerne eine Grundlage der wichtigsten UI/UX Prinzipien erlernen möchten! Kann ich nur weiterempfehlen!
Chris
May 28, 2023
Content is good. Explanations clear. Useful resources. A step-by-step project incorporating each lesson/ section would have been a good way to practice.
Motahar
May 22, 2023
It's one of the best courses I have ever seen regarding UX/UI design, it's brief and needs your attention every second. Watch it at 1X speed. if you watch it on 2X you will definitely lose some super valuable point! Check out the resources section and you will get tons of useful materials.
Chirag
May 1, 2023
Well, it was one of the best theoretical courses I have enjoyed. It made me clear most of my doubts related to the principles of UX and UI designing. I am looking forward to more courses from your side.
Guen
April 27, 2023
That was an awesome course, learned a lot about layout in terms of UI design as well as the basic pysch about it. Thanks!
Lanqi
April 20, 2023
I‘ve found Christine's courses including this one that I just completed very well arranged and explained, and full of useful information!! I'm looking forward to taking more new courses from her!
Design
March 22, 2023
Great course! Well-structured, informative, and explained very well. I received a lot of valuable tips and useful information!
Marilena
March 3, 2023
Trully helpul! Exact what I was searching for, without being boring. Grat introduction, great examples and of cource nice presentation.

Charts

Price

UX/UI Design Principles Compact (Theory + Figma Exercise) - Price chart

Rating

UX/UI Design Principles Compact (Theory + Figma Exercise) - Ratings chart

Enrollment distribution

UX/UI Design Principles Compact (Theory + Figma Exercise) - Distribution chart
4592070
udemy ID
3/11/2022
course created date
3/18/2022
course indexed date
Bot
course submited by