This massive UI design course teaches you to build beautiful and well-functioning user interfaces using HTML and CSS. It's filled with interactive tutorials to ensure that the knowledge sticks with you. Created by Gary Simon, the most popular online instructor on this subject.

您将学到什么
User Interface Design
您将获得的技能
要了解的详细信息

添加到您的领英档案
12 项作业
了解顶级公司的员工如何掌握热门技能

积累特定领域的专业知识
- 向行业专家学习新概念
- 获得对主题或工具的基础理解
- 通过实践项目培养工作相关技能
- 获得可共享的职业证书

该课程共有12个模块
The course introduction module provides an overview of the Learn UI Design course, outlining its objectives, curriculum, and the benefits it offers to learners interested in perfecting the art of user interface (UI) design.
涵盖的内容
1个作业4个插件
1个作业•总计10分钟
- Course Introduction Quiz•10分钟
4个插件•总计7分钟
- Welcome to interactive lessons!•1分钟
- Who I am, What we'll Learn & Prerequisites•2分钟
- Subjectivity vs. Objectivity•2分钟
- Tools to Use•2分钟
Familiarize yourself with the fundamentals of UI design and get to grips with essential principles and techniques to create visually appealing and user-friendly interfaces.
涵盖的内容
1个作业14个插件
1个作业•总计30分钟
- UI Design Fundamentals Quiz•30分钟
14个插件•总计64分钟
- Introduction•1分钟
- White Space•5分钟
- Alignment•3分钟
- Design Challenge: 1•4分钟
- Contrast•4分钟
- Scale•4分钟
- Design Challenge: 2•7分钟
- Typography•6分钟
- Color•6分钟
- Design Challenge: 3•4分钟
- Visual Hierarchy•8分钟
- Design Challenge: 4•6分钟
- The Final Challenge•5分钟
- Wrapping Up•1分钟
Discover how to create a basic UI layout, covering key concepts such as multi-columns and working with photographs.
涵盖的内容
1个作业7个插件
1个作业•总计10分钟
- Building a Simple Layout Quiz•10分钟
7个插件•总计39分钟
- Building a simple layout - intro•1分钟
- Keeping it Ultra Simple•6分钟
- Making our Layout Dark•6分钟
- Challenge 1•7分钟
- Multi-Columns•5分钟
- Working with Photographs•6分钟
- Final Chapter Lesson•8分钟
This module explores the principles and techniques of responsive design, equipping learners with the skills to create websites and applications that adapt and display effectively across various devices and screen sizes.
涵盖的内容
1个作业9个插件
1个作业•总计10分钟
- Responsive Design Quiz•10分钟
9个插件•总计53分钟
- Introduction•1分钟
- Defining the HTML•7分钟
- Mobile First CSS (Part 1)•7分钟
- Mobile First CSS (Part 2)•6分钟
- Mobile First CSS (Part 3)•6分钟
- Responsive Design (Part 1)•5分钟
- Responsive Design Challenge 1•7分钟
- Finishing Up•8分钟
- Final Chapter Challenge•6分钟
Equip yourself yourself with the necessary skills to create adaptive and user-friendly navigation systems that seamlessly adapt to different screen sizes and devices.
涵盖的内容
1个作业8个插件
1个作业•总计30分钟
- Responsive Navigations Quiz•30分钟
8个插件•总计36分钟
- Introduction to responsive navigations•2分钟
- Writing the HTML (real)•4分钟
- Mobile CSS (Part 1)•6分钟
- Mobile CSS (Part 2)•4分钟
- Responsive CSS (Challenge 1)•6分钟
- Making the Mobile Menu Work•4分钟
- Animating the Mobile Menu•2分钟
- Sub Menu Design Challenge•8分钟
This module guides you through the process of refactoring a UI project, providing techniques and best practices to improve the code structure, maintainability, and overall efficiency of the user interface.
涵盖的内容
1个作业7个插件
1个作业•总计15分钟
- Full Project Refactoring Quiz•15分钟
7个插件•总计43分钟
- Project Refactoring: Introduction & Defining the HTML•6分钟
- Fixing the Color & Contrast•4分钟
- Fixing the Type & Visual Hierarchy•7分钟
- Fixing White Space•6分钟
- Initial Media Queries•6分钟
- Tablet Media Queries•5分钟
- Desktop Media Query•9分钟
Flex your new UI design skills by building a hands-on tea website. Apply essential design principles and techniques to create an engaging and visually appealing user interface.
涵盖的内容
1个作业9个插件
1个作业•总计10分钟
- Tea UI Design Project Quiz•10分钟
9个插件•总计46分钟
- The TeaPlace landing page challenge•4分钟
- Defining the HTML•6分钟
- Challenge 1: Mobile UI Design•3分钟
- Challenge 1: My Solution (Mobile Header & Navigation)•8分钟
- Challenge 1: My Solution (Completing the Mobile Design)•9分钟
- Challenge 2: Tablet Challenge•2分钟
- Challenge 2: My Solution•5分钟
- Challenge 3: Desktop Design•2分钟
- Challenge 3: My Solution•7分钟
Explores the effective use of shadows in UI design, and learn how to utilize various shadow techniques to enhance depth, hierarchy, and visual appeal.
涵盖的内容
1个作业6个插件
1个作业•总计30分钟
- Shadows Quiz•30分钟
6个插件•总计27分钟
- Shadows 101•2分钟
- Drop Shadow Playground Setup•5分钟
- Challenge 1: Hard & Soft Drop Shadows•7分钟
- Challenge 2: Using Shadows to Define Containers•5分钟
- Challenge 3: Colored Shadows•5分钟
- Quick Tip: Multi-Layered Shadows•3分钟
Delve into the creative application of gradients in UI design. Leverage the power of color transitions to add depth, visual interest, and enhance the overall aesthetic of user interfaces.
涵盖的内容
1个作业6个插件
1个作业•总计30分钟
- Gradients Quiz•30分钟
6个插件•总计30分钟
- Introduction•1分钟
- Challenge 1: Basic Gradient•7分钟
- Challenge 2: Button Gradient•7分钟
- Challenge 3 Setup HTML & CSS•7分钟
- Challenge 3: Card Gradients•4分钟
- Challenge 4: Card Gradients (Light Variation)•4分钟
Discover how to to craft captivating and user-friendly forms through a combination of best practices, innovative techniques, and user experience considerations.
涵盖的内容
1个作业7个插件
1个作业•总计15分钟
- Forms Quiz•15分钟
7个插件•总计53分钟
- Forms 101•3分钟
- HTML Form Setup•8分钟
- CSS Form Setup (Progress Design)•6分钟
- Challenge 1: Form Design CSS•10分钟
- Challenge 2: Responsive Form Design•6分钟
- Challenge 3: Radio Buttons•11分钟
- Challenge 4: Checkboxes•9分钟
Bring user interfaces to life with engaging and seamless animations that enhance usability, delight users, and elevate the user experience.
涵盖的内容
1个作业5个插件
1个作业•总计30分钟
- UI Animation Quiz•30分钟
5个插件•总计31分钟
- Introduction•2分钟
- Defining the HTML•4分钟
- Defining the Initial CSS for Mobile•8分钟
- Challenge 1: Responsive Design•11分钟
- Challenge 2: A Simple Hover•6分钟
The final project module of the comprehensive UI Design course challenges learners to apply their acquired knowledge and skills, culminating in the creation of a polished and innovative user interface design project that demonstrates their expertise in design principles, creativity, and user-centric approach.
涵盖的内容
1个作业15个插件
1个作业•总计30分钟
- Final Project Quiz•30分钟
15个插件•总计87分钟
- Project Introduction•2分钟
- Defining the HTML•7分钟
- Defining the HTML (Part 2)•5分钟
- Defining the Navigation CSS•6分钟
- Defining the Hero Section CSS (Part 1)•7分钟
- Defining the Hero Section CSS (Part 2)•7分钟
- Defining the Features Section•4分钟
- Finishing the Mobile CSS•8分钟
- Challenge: Small Tablet Responsive Design•7分钟
- Challenge: Desktop Responsive Design•8分钟
- Challenge: Testimonials on Desktop•5分钟
- Defining the Sub Page HTML•5分钟
- Challenge: Style the Sub Page•8分钟
- Challenge: Animating the UI•5分钟
- Bonus: Pattern Libraries, Style Guides & Design Systems 101•3分钟
获得职业证书
将此证书添加到您的 LinkedIn 个人资料、简历或履历中。在社交媒体和绩效考核中分享。
位教师

人们为什么选择 Coursera 来帮助自己实现职业发展

Felipe M.

Jennifer J.

Larry W.



