UI/UX Design Principles

kurs ist nicht verfügbar in Deutsch (Deutschland)

Wir übersetzen es in weitere Sprachen. Sehen Sie sich die Sprachen an, die wir anbieten.

UI/UX Design Principles

Dieser Kurs ist Teil von Microsoft Front-End Developer (berufsbezogenes Zertifikat)

Dozent: Microsoft

2.490 bereits angemeldet

Bei enthalten

Mehr erfahren

4 Module

Verschaffen Sie sich einen Einblick in ein Thema und lernen Sie die Grundlagen.

Stufe Anfänger

Empfohlene Erfahrung

3 Wochen zu vervollständigen

unter 10 Stunden pro Woche

Flexibler Zeitplan

In Ihrem eigenen Lerntempo lernen

4 Module

Verschaffen Sie sich einen Einblick in ein Thema und lernen Sie die Grundlagen.

Stufe Anfänger

Empfohlene Erfahrung

3 Wochen zu vervollständigen

unter 10 Stunden pro Woche

Flexibler Zeitplan

In Ihrem eigenen Lerntempo lernen

Kompetenzen, die Sie erwerben

Kategorie: Prototyping
Kategorie: User Centered Design
Kategorie: User Interface and User Experience (UI/UX) Design
Kategorie: Web Content Accessibility Guidelines
Kategorie: Mockups
Kategorie: Microsoft Copilot
Kategorie: Responsive Web Design
Kategorie: Wireframing
Kategorie: User Experience
Kategorie: User Interface (UI)
Kategorie: Mobile Development

Werkzeuge, die Sie lernen werden

Kategorie: Figma (Design Software)
Kategorie: Cascading Style Sheets (CSS)
Kategorie: Adobe XD

Wichtige Details

Zertifikat zur Vorlage

Zu Ihrem LinkedIn-Profil hinzufügen

Bewertungen

28 Aufgaben

Unterrichtet in Englisch

Erfahren Sie, wie Mitarbeiter führender Unternehmen gefragte Kompetenzen erwerben.

Weitere Informationen zu Coursera für Unternehmen

Logos von Petrobras, TATA, Danone, Capgemini, P&G und L'Oreal

Erweitern Sie Ihr Fachwissen im Bereich Mobile and Web Development

Dieser Kurs ist Teil der Spezialisierung Microsoft Front-End Developer (berufsbezogenes Zertifikat)

Wenn Sie sich für diesen Kurs anmelden, werden Sie auch für dieses berufsbezogene Zertifikat angemeldet.

Lernen Sie neue Konzepte von Branchenexperten
Gewinnen Sie ein Grundverständnis bestimmter Themen oder Tools
Erwerben Sie berufsrelevante Kompetenzen durch praktische Projekte
Erwerben Sie ein Berufszertifikat von Microsoft zur Vorlage

In diesem Kurs gibt es 4 Module

This course introduces key UI/UX design concepts and tools. You'll learn to create user-centered, responsive designs, using wireframing, prototyping, and Microsoft Copilot to enhance CSS and improve workflows.

By the end of this program, you will be able to… Define the basic concepts of UI/UX design, design tools, and responsive design. Explain fundamental design principles, wireframing, prototyping, and responsive design testing techniques. Describe user-centered design, accessibility considerations, high-fidelity mockups, and mobile-first design principles. Use Microsoft Copilot to write and enhance CSS, generate responsive design suggestions, and improve UI/UX design in practical workflows.

In this module, you will delve into the essential principles of UI/UX design and their application in creating intuitive, user-friendly interfaces. You'll learn the foundational concepts of design, including user-centered approaches and key accessibility considerations. By the end, you’ll understand the design thinking process and how to implement these principles to craft engaging and inclusive user experiences.

Das ist alles enthalten

25 Videos12 Lektüren9 Aufgaben1 Unbewertetes Labor1 Plug-in

25 Videos Insgesamt 106 Minuten

Course Introduction 2 Minuten
Instructor Introduction 2 Minuten
The What’s What of the Course 3 Minuten
Completing the Guided Labs 4 Minuten
Introducing the AI Tool: Microsoft Copilot 3 Minuten
How to Be Successful in This Program 5 Minuten
Introduction to the Project 4 Minuten
Introduction to Principles of UI/UX 2 Minuten
What is UI/UX Design? 4 Minuten
The Relationship Between UI and UX 7 Minuten
The Importance of UI/UX Design 6 Minuten
Balance and Contrast 7 Minuten
Alignment and Proximity 5 Minuten
Hierarchy and Repetition 3 Minuten
User Needs in Front-End Development 4 Minuten
Creating and Using User Personas 4 Minuten
Designing for Usability 5 Minuten
Accessibility in UI/UX 6 Minuten
Accessibility Guidelines for Front-End Engineers 4 Minuten
Practical Accessibility Techniques 6 Minuten
Enhancing Accessibility of an Existing Web Page with CSS and HTML 7 Minuten
Design Thinking for Front-End Engineers 5 Minuten
Stages of the Design Thinking Process 3 Minuten
Applying Design Thinking to Real-World Front-End Challenges 4 Minuten
Conclusion: Principles of UI/UX Design 2 Minuten

12 Lektüren Insgesamt 180 Minuten

Course Syllabus 10 Minuten
Completing the Guided Labs 30 Minuten
Microsoft Tools for Front-End Development 10 Minuten
UI/UX Design Concepts 10 Minuten
Essential Principles of UI/UX Design 10 Minuten
Activity: CSS in Front-End Engineering - Answer Key 30 Minuten
Activity: Create a User Persona - Answer Key 30 Minuten
User-Centered Design Principles for Front-End Engineers 10 Minuten
Accessibility Guidelines for Front-End Engineers 10 Minuten
Practical Accessibility Techniques 10 Minuten
You Try It! Enhancing Accessibility of an Existing Web Page with CSS and HTML - Answer Key 10 Minuten
Applying Design Thinking in Front-End Development 10 Minuten

9 Aufgaben Insgesamt 245 Minuten

Graded Quiz: Principles of UI/UX Design 50 Minuten
Practice Quiz: UI/UX Design Concepts 20 Minuten
Activity: CSS in Front-End Engineering 30 Minuten
Practice Quiz: Essential Principles of UI/UX Design 20 Minuten
Activity: Create a User Persona 30 Minuten
Practice Quiz: User-Centered Design Principles for Front-End Engineers 20 Minuten
Practice Quiz: Accessibility Best Practices for Front-End Engineers 25 Minuten
Activity: Addressing UI/UX Challenges 30 Minuten
Practice Quiz: Applying Design Thinking in Front-End Development 20 Minuten

1 Unbewertetes Labor Insgesamt 60 Minuten

You Try It! Enhancing Accessibility of an Existing Web Page with CSS and HTML 60 Minuten

1 Plug-in Insgesamt 15 Minuten

Guided Lab: Enhancing Accessibility of an Existing Web Page with CSS and HTML 15 Minuten

This module explores the foundational principles of prototyping and interaction design, focusing on tools like Figma and Adobe XD. You’ll learn how to create wireframes, design high-fidelity mockups, and leverage design tools for collaboration and sharing. By the end, you’ll be equipped to build and refine user-focused designs, applying industry-standard techniques and tools.

Das ist alles enthalten

17 Videos6 Lektüren9 Aufgaben

17 Videos Insgesamt 76 Minuten

Introduction to Using Design Tools like Figma or Adobe XD for Mockups 2 Minuten
Prototyping 4 Minuten
Principles of Interaction Design 3 Minuten
Prototyping for Front-End Development 4 Minuten
Introduction to Design Tools 6 Minuten
Key Features of Figma and Adobe XD 5 Minuten
Using Design Tools for Development 5 Minuten
The Role of Wireframes in Design 4 Minuten
Tools and Techniques for Creating Wireframes 4 Minuten
Best Practices in Wireframing 3 Minuten
From Wireframes to High-Fidelity Mockups 6 Minuten
Key Elements of High-Fidelity Mockups 6 Minuten
Tools for Creating High-Fidelity Mockups 5 Minuten
The Importance of Collaboration in Design 5 Minuten
Tools for Collaboration and Feedback 5 Minuten
Best Practices for Collaborative Design 5 Minuten
Conclusion: Using Design Tools like Figma or Adobe XD for Mockups 2 Minuten

6 Lektüren Insgesamt 80 Minuten

Prototyping and Interaction Design Principles for Front-End Engineers 10 Minuten
Leveraging Design Tools for UI/UX Development 10 Minuten
Activity: Using Microsoft Copilot to Generate UI/UX Code Snippets - Answer Key 30 Minuten
Creating Effective Wireframes for UI/UX Design 10 Minuten
Designing High-Fidelity Mockups for Realistic UI Representation 10 Minuten
Collaborating and Sharing UI/UX Designs Effectively 10 Minuten

9 Aufgaben Insgesamt 255 Minuten

Graded Quiz: Using Design Tools like Figma or Adobe XD for Mockups 50 Minuten
Practice Quiz: Prototyping and Interaction Design Principles for Front-End Engineers 20 Minuten
Activity: Using Microsoft Copilot to Generate UI/UX Code Snippets 30 Minuten
Practice Quiz: Leveraging Design Tools for UI/UX Development 20 Minuten
Activity: Creating a Wireframe 30 Minuten
Practice Quiz: Creating Effective Wireframes for UI/UX Design 30 Minuten
Activity: High Fidelity Mockup 30 Minuten
Practice Quiz: Designing High-Fidelity Mockups for Realistic UI Representation 25 Minuten
Practice Quiz: Collaborating and Sharing UI/UX Designs Effectively 20 Minuten

In this module, you will learn the core principles of responsive design and how to apply them using CSS. You'll explore media queries, mobile-first design strategies, and techniques for creating adaptive layouts. By the end, you’ll understand how to test and refine your designs to ensure they function seamlessly across various devices and screen sizes.

Das ist alles enthalten

19 Videos8 Lektüren7 Aufgaben2 Unbewertete Labore2 Plug-ins

19 Videos Insgesamt 88 Minuten

Introduction: Implementing Responsive Design Using CSS 1 Minute
Responsive Design 4 Minuten
Describe the Key Benefits of Implementing Responsive Design 3 Minuten
Differences Between Responsive and Adaptive Design Approaches 6 Minuten
Media Queries 6 Minuten
Common Use Cases for Media Queries 4 Minuten
Best Practices for Writing Media Queries 5 Minuten
Creating a Responsive Webpage Using Media Queries 4 Minuten
Using Flexbox for Responsive Design 6 Minuten
Using CSS Grid for Responsive Design 6 Minuten
Combining Flexbox and Grid for Complex Layouts 6 Minuten
Building Responsive Layouts with Flexbox and Grid 5 Minuten
What is Mobile-First Design? 3 Minuten
Benefits of Mobile-First Design 4 Minuten
Implementing Mobile-First Design in Practice 9 Minuten
Tools for Testing Responsive Design 6 Minuten
Best Practices for Responsive Testing 5 Minuten
Documenting and Addressing Responsive Issues 5 Minuten
Conclusion: Implementing Responsive Design Using CSS 1 Minute

8 Lektüren Insgesamt 80 Minuten

Responsive Design Principles 10 Minuten
Mastering Media Queries for Responsive Design 10 Minuten
You Try It! Creating a Responsive Webpage Using Media Queries - Answer Key 10 Minuten
Using Flexbox for Responsive Design 10 Minuten
Using CSS Grid for Responsive Design 10 Minuten
You Try It! Building Responsive Layouts with Flexbox and Grid - Answer Key 10 Minuten
Principles of Mobile-First Design 10 Minuten
Testing and Validating Responsive Designs 10 Minuten

7 Aufgaben Insgesamt 175 Minuten

Graded Quiz: Implementing Responsive Design using CSS 50 Minuten
Practice Quiz: Responsive Design Principles 20 Minuten
Practice Quiz: Mastering Media Queries for Responsive Design 20 Minuten
Practice Quiz: Techniques for Building Responsive Layouts 15 Minuten
Practice Quiz: Principles of Mobile-First Design 20 Minuten
Activity: Test Responsive Layouts 30 Minuten
Practice Quiz: Testing and Validating Responsive Designs 20 Minuten

2 Unbewertete Labore Insgesamt 120 Minuten

You Try It! Creating a Responsive Webpage Using Media Queries 60 Minuten
You Try It! Building Responsive Layouts with Flexbox and Grid 60 Minuten

2 Plug-ins Insgesamt 30 Minuten

Guided Lab: Creating a Responsive Webpage Using Media Queries 15 Minuten
Guided Lab: Building Responsive Layouts with Flexbox and Grid 15 Minuten

In this module, you will learn how to use Microsoft Copilot to streamline your CSS and design workflow. You’ll explore how to generate and enhance CSS code, create responsive design suggestions, and improve UI/UX design with Copilot’s intelligent assistance. By the end, you’ll be able to integrate Copilot into your design process, applying its capabilities to practical design challenges.

Das ist alles enthalten

14 Videos3 Aufgaben1 peer review

14 Videos Insgesamt 81 Minuten

Introduction: Using Microsoft Copilot for Generating CSS and Design Suggestions 2 Minuten
Introduction to Using Copilot for CSS 4 Minuten
Generating Advanced CSS Techniques with Copilot 9 Minuten
Optimizing Existing CSS Code 7 Minuten
Responsive Design with Copilot 3 Minuten
Implementing Copilot's Responsive Design Suggestions 9 Minuten
Evaluating Responsive Design Enhancements 8 Minuten
Enhancing User Interaction with Copilot 3 Minuten
Improving Visual Aesthetics with Copilot 9 Minuten
Incorporating Feedback to Optimize UI/UX 8 Minuten
Integrating Copilot into Daily Workflow 4 Minuten
Using Copilot for Project Management 9 Minuten
Finalizing a Design Project with Copilot 4 Minuten
Course Conclusion: UI/UX Principles 2 Minuten

3 Aufgaben Insgesamt 90 Minuten

Activity: Writing and Enhancing CSS with Microsoft Copilot 30 Minuten
Activity: Generate Responsive Design Suggestions with Microsoft Copilot 30 Minuten
Activity: Enhancing UI/UX Design Using Microsoft Copilot 30 Minuten

1 peer review Insgesamt 60 Minuten

Submit Your Project 60 Minuten

Erwerben Sie ein Karrierezertifikat.

Fügen Sie dieses Zeugnis Ihrem LinkedIn-Profil, Lebenslauf oder CV hinzu. Teilen Sie sie in Social Media und in Ihrer Leistungsbeurteilung.

Dozent

Microsoft

287 Kurse 2.371.284 Lernende

von

Microsoft

Mehr von Mobile and Web Development entdecken

Coursera
UX Design: Research, Prototyping, Accessible Interactions
Kurs
Coursera
User Interface Design: Principles, Prototyping, Practices
Kurs
Meta
Principles of UX/UI Design
Kurs
Xbox
Interaction Design and UX/UI Principles
Kurs

Warum entscheiden sich Menschen für Coursera für ihre Karriere?

Felipe M.

Lernender seit 2018

„Es ist eine großartige Erfahrung, in meinem eigenen Tempo zu lernen. Ich kann lernen, wenn ich Zeit und Nerven dazu habe.“

Jennifer J.

Lernender seit 2020

„Bei einem spannenden neuen Projekt konnte ich die neuen Kenntnisse und Kompetenzen aus den Kursen direkt bei der Arbeit anwenden.“

Larry W.

Lernender seit 2021

„Wenn mir Kurse zu Themen fehlen, die meine Universität nicht anbietet, ist Coursera mit die beste Alternative.“

Chaitanya A.

„Man lernt nicht nur, um bei der Arbeit besser zu werden. Es geht noch um viel mehr. Bei Coursera kann ich ohne Grenzen lernen.“

Neue Karrieremöglichkeiten mit Coursera Plus

Unbegrenzter Zugang zu 10,000+ Weltklasse-Kursen, praktischen Projekten und berufsqualifizierenden Zertifikatsprogrammen - alles in Ihrem Abonnement enthalten

Mehr erfahren

Bringen Sie Ihre Karriere mit einem Online-Abschluss voran.

Erwerben Sie einen Abschluss von erstklassigen Universitäten – 100 % online

Erkunden Sie die Abschlüsse

Schließen Sie sich mehr als 3.400 Unternehmen in aller Welt an, die sich für Coursera for Business entschieden haben.

Schulen Sie Ihre Mitarbeiter*innen, um sich in der digitalen Wirtschaft zu behaupten.

Mehr erfahren

Häufig gestellte Fragen

To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.

When you enroll in the course, you get access to all of the courses in the Certificate, and you earn a certificate when you complete the work. Your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.