Learn UI Design from Coursera

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.

While we can all clearly recognize what a great user interface looks like, it's actually really hard to build one!

That's exactly what this course is all about. In it, Gary Simon will turn you into a UI design master. He'll teach you UI design from the ground up, and give you the skills you need to make sure that your next project both looks good and feels good to use. 

 It starts from the very basics, so you don't need any UI design experience to join, just basic HTML and CSS skills. 

What's inside

Syllabus

Course Introduction

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.

UI Design Fundamentals

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.

Building a Simple Layout

Discover how to create a basic UI layout, covering key concepts such as multi-columns and working with photographs.

Responsive Design

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.

Responsive Navigations

Equip yourself yourself with the necessary skills to create adaptive and user-friendly navigation systems that seamlessly adapt to different screen sizes and devices.

Full Project Refactoring

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.

Tea UI Design Project

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.

Shadows

Explores the effective use of shadows in UI design, and learn how to utilize various shadow techniques to enhance depth, hierarchy, and visual appeal.

Gradients

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.

Forms

Discover how to to craft captivating and user-friendly forms through a combination of best practices, innovative techniques, and user experience considerations.

UI Animation

Bring user interfaces to life with engaging and seamless animations that enhance usability, delight users, and elevate the user experience.

Final Project

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.

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Taught by Gary Simon, who is recognized for their work in this topic of UI design

Explores responsive design, which is standard in modern UI design practices

Develops basic UI design skills, which are core for UI Design professionals

Taught using HTML and CSS, which are common tools in the UI design industry

Guides the creation of a hands-on project, allowing learners to apply their knowledge and develop their portfolio

Provides opportunities to experiment with various UI design techniques and tools, including shadows, gradients, and animations

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Learn UI Design with these activities:

Follow Webflow UI Design Tutorials

Show steps

Gain practical skills in UI design by following step-by-step video tutorials that teach you how to use Webflow.

Browse courses on Webflow

Show steps

Sign up for a free Webflow account.
Browse the available UI design tutorials.
Choose a tutorial that aligns with your interests or skill level.
Follow the video instructions and recreate the UI design in Webflow.

Practice CSS Grid and Flexbox Challenges

Show steps

Reinforce your understanding of CSS Grid and Flexbox by working through interactive challenges.

Browse courses on CSS Grid

Show steps

Visit the CSS Grid and Flexbox Challenges website.
Select a challenge that matches your skill level.
Read the instructions and write the necessary CSS code to create the desired layout.
Test your solution and iterate until you meet the challenge criteria.

Study Material UI and React Tutorial

Show steps

Develop proficiency in building responsive UI components using Material UI and React.

Browse courses on Material UI

Show steps

Set up a React development environment.
Install and import Material UI into your project.
Follow the tutorial steps to create different UI components using Material UI.
Experiment with different component styles and configurations.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Read 'Atomic Design' by Brad Frost

Show steps

Enhance your understanding of UI design principles and best practices by reading this comprehensive guide.

View Atomic Design on Amazon

Show steps

Purchase or borrow a copy of 'Atomic Design'.
Read the book thoroughly, paying attention to the concepts of atoms, molecules, and organisms.
Take notes and highlight key insights.

Design a landing page for a personal project

Show steps

Put your UI design skills to the test by creating a fully functional landing page for a project you're passionate about.

Browse courses on UI Design

Show steps

Identify the purpose and target audience of your landing page.
Sketch out a wireframe or prototype of your page layout.
Design the visual elements, including typography, color scheme, and imagery.
Implement your design using HTML, CSS, and JavaScript.
Test and refine your landing page to ensure it meets user needs.

Read 'Design of Everyday Things' by Don Norman

Show steps

Gain insights into the principles of human-centered design and how they apply to UI design.

View Things That Make Us Smart: Defending Human... on Amazon

Show steps

Purchase or borrow a copy of 'Design of Everyday Things'.
Read the book, paying attention to the seven principles of design.
Reflect on how these principles can be applied to UI design.

Collaborate on a UI design project with peers

Show steps

Enhance your teamwork skills and learn from others by collaborating on a UI design project.

Browse courses on UI Design

Show steps

Form a team of fellow UI designers.
Choose a project brief and define the design goals.
Brainstorm ideas and create prototypes together.
Divide responsibilities and work on different aspects of the project.
Provide feedback and iterate on the design until you're satisfied with the outcome.

Career center

Learners who complete Learn UI Design will develop knowledge and skills that may be useful to these careers:

UI Designer

UI Designers are responsible for the design of the user interface of a website or application. They work with Front End Developers to ensure that the user interface is both visually appealing and user-friendly. This course can help UI Designers develop the skills they need to create beautiful and functional user interfaces that meet the needs of their users.

See salaries and explore the career path for UI Designer

Visual Designer

Visual Designers are responsible for the visual appearance of a website or application. They work with UI Designers and Front End Developers to ensure that the user interface is both visually appealing and user-friendly. This course can help Visual Designers develop the skills they need to create beautiful and functional user interfaces.

See salaries and explore the career path for Visual Designer

Web Designer

Web Designers are responsible for the overall look and feel of a website. They work with clients to understand their needs and then create a website that meets those needs. This course can help Web Designers develop the skills they need to create beautiful and functional websites that meet the needs of their clients.

See salaries and explore the career path for Web Designer

Interaction Designer

Interaction Designers are responsible for the design of the interactions between users and products. They work with UI Designers and Front End Developers to ensure that the user interface is both visually appealing and user-friendly. This course can help Interaction Designers develop the skills they need to create interactions that are both intuitive and engaging.

See salaries and explore the career path for Interaction Designer

Front-End Developer

A Front End Developer is responsible for the design and implementation of the user interface of a website or application. They work closely with UI designers to ensure that the user interface is both visually appealing and user-friendly. This course can help Front End Developers build a strong foundation in UI design principles and techniques, which will enable them to create more effective and engaging user interfaces.

See salaries and explore the career path for Front-End Developer

UX Designer

UX Designers are responsible for the user experience of a website or application. They work with UI Designers and Front End Developers to ensure that the user interface is both visually appealing and user-friendly. This course can help UX Designers develop the skills they need to create websites and applications that are both beautiful and easy to use.

See salaries and explore the career path for UX Designer

Motion Designer

Motion Designers are responsible for the design of animations and other visual effects. They work with UI Designers and Front End Developers to create animations that are both visually appealing and user-friendly. This course can help Motion Designers develop the skills they need to create beautiful and effective animations.

See salaries and explore the career path for Motion Designer

Graphic designer

Graphic Designers are responsible for the design of visual elements, such as logos, brochures, and websites. They work with clients to understand their needs and then create visual elements that meet those needs. This course can help Graphic Designers develop the skills they need to create beautiful and effective visual elements.

See salaries and explore the career path for Graphic designer

Product Designer

Product Designers are responsible for the design of the overall product experience, including the user interface, user experience, and overall functionality of the product. This course can help Product Designers develop the skills they need to create products that are both beautiful and functional.

See salaries and explore the career path for Product Designer

Software Engineer

Software Engineers are responsible for the design, development, and maintenance of software applications. They work with clients to understand their needs and then create software applications that meet those needs. This course can help Software Engineers develop the skills they need to create beautiful and effective software applications.

See salaries and explore the career path for Software Engineer

Business Analyst

Business Analysts are responsible for the analysis of business processes and systems. They work with clients to understand their needs and then create solutions that meet those needs. This course may be useful for Business Analysts who are interested in learning more about UI design principles and techniques.

See salaries and explore the career path for Business Analyst

Data Scientist

Data Scientists are responsible for the collection, analysis, and interpretation of data. They work with clients to understand their needs and then create data-driven solutions that meet those needs. This course may be useful for Data Scientists who are interested in learning more about UI design principles and techniques.

See salaries and explore the career path for Data Scientist

Project Manager

Project Managers are responsible for the planning, execution, and delivery of projects. They work with clients to understand their needs and then create projects that meet those needs. This course may be useful for Project Managers who are interested in learning more about UI design principles and techniques.

See salaries and explore the career path for Project Manager

Technical Support Specialist

Technical Support Specialists are responsible for providing technical support to users of software applications. They work with clients to understand their needs and then provide solutions that meet those needs. This course may be useful for Technical Support Specialists who are interested in learning more about UI design principles and techniques.

See salaries and explore the career path for Technical Support Specialist

Technical Writer

Technical Writers are responsible for the creation of technical documentation, such as user manuals and white papers. They work with clients to understand their needs and then create documentation that meets those needs. This course may be useful for Technical Writers who are interested in learning more about UI design principles and techniques.

See salaries and explore the career path for Technical Writer