OpenCourser brand icon
Sign in
We may earn an affiliate commission when you visit our partners.

Practical UIUX Projects-Figma

shepherdd-X - and Jacqueline Dede Asare-Dartey

User interface design(UI) and user experience design(UX) is a very crucial parts of determining the final output of software, applications, or process. User interface design and user experience design(UI/UX) has lots of benefits since they have a greater impact on influencing how users might use or uninstall an app or the retention rate of an app or software and the like. Welcome to this course future designers, in this course, we will be learning to design Interfaces using Figma as the primary design tool. You'll be introduced to some useful resources/ links to help you thrive in an ever-changing world. Figma makes it fun and easier to get your designs up to speed with positive outcomes especially when you use a creative approach to doing what you love doing best. In this lesson, you'll learn to use shapes(components) and tools to create stunning user interfaces. Some fundamental design principles would be taught and demonstrated in the course. The main course projects includes several steps to learning to build or design a  contact app user interface. The course is for anybody who would like to get started with User interface design. This course is in collaboration with Jacqueline Asare Dartey a UI/UX expert in using Figma and Adobe XD.

Enroll now

What's inside

Learning objectives

  • Design user interfaces for websites
  • Design user interfaces for apps
  • Make use of tools in figma
  • Design smartly

Syllabus

What User Experience Design
Introduction

⚠️Notice⚠️

Figma made an update to position the toolbar which use to be at the top to the bottom of the interface as indicated in green.

Read more
Why take the course
Design Fundamental
Consistency
Whitespacing
Contrast
Color
Visual Hierarchy
Read-Laws of UIUX
Design Fundamentals 2
Scale
Complexity and Simplicity
Useful Links
Prototyping
Wireframing
Interface Walkthrough
Figma Interface Walkthrough 1
Figma Interface Walkthrough 2
Hotel Website UI Design
Hotel Landing page UI -Part 1
Hotel Landing page UI -Part 2
Hotel Landing page UI -Part 3
Hotel Landing page UI-part 4
Icon Design
Icon Design-Part 1
Icon Design-Part 2
Interactive Agency Landing Page-UI
Interactive UI part 1
Interactive UI part 2
Interactive UI part 3
Interactive UI part 4
Interactive Hover-Effect
Interactive Hover Effect
Background image remover
Contact UI
Contact 1
Contact 2
Contact UI 3
Contact UI 4
Contact UI 5
Contact UI 2
Contact UI 6
Contact UI 7
Contact UI 8
Contact UI 9
Contact UI 10
News App UI
News Feed App 1
News Feed App 2
News Website UI
News Web UI 1
News Web UI 2
News Web UI 3
News Web UI 4
Ecommerce Landing UI Page
Ecommerce Landing UI Page 1
Ecommerce Landing UI Page 2
Ecommerce Landing UI Page 3
Ecommerce Landing UI Page 4
Ecommerce Landing UI Page 5
Ecommerce Landing UI Page 6
Animations
Introduction to Lottie
Lottie project 2
Lottie project 3
Design Intuitively Faster
Figma Component
Live Sessions
Login/signup UI-Part1
Login/signup UI-Part2
Login/signup UI-Part3
Login/signup UI-Part4
Login/signup UI-Part5
Login/signup UI-Part6
socials

Save this course

Save Practical UIUX Projects-Figma to your list so you can find it easily later:
Save

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 Practical UIUX Projects-Figma with these activities:
Review Design Principles
Reviewing fundamental design principles like consistency, whitespace, contrast, and visual hierarchy will strengthen your ability to create effective UI/UX designs in Figma.
Show steps
  • Read articles and watch videos on design principles.
  • Analyze existing websites and apps, identifying how these principles are applied.
  • Practice applying these principles in small design exercises.
Review 'Don't Make Me Think, Revisited'
Reading 'Don't Make Me Think' will provide valuable insights into usability principles and how to apply them to your Figma designs.
View Don't Make Me Think, Revisited: A Common Sense... on Amazon
Show steps
  • Read a chapter of 'Don't Make Me Think'.
  • Identify usability issues in existing websites or apps.
  • Brainstorm solutions to improve usability.
Review 'Refactoring UI'
Reading 'Refactoring UI' will provide practical techniques for improving the visual design of your Figma projects.
View Melania on Amazon
Show steps
  • Read a chapter of 'Refactoring UI'.
  • Apply the techniques learned to a Figma project.
  • Reflect on the impact of the changes.
Four other activities
Expand to see all activities and additional details
Show all seven activities
Recreate UI Components
Practicing recreating UI components from popular websites or apps in Figma will improve your proficiency with Figma's tools and your understanding of UI design patterns.
Show steps
  • Choose a UI component (e.g., a button, form, or navigation bar).
  • Analyze the component's design and structure.
  • Recreate the component in Figma.
Write a UI/UX Design Blog Post
Writing a blog post about a specific UI/UX design topic will help you solidify your understanding and share your knowledge with others.
Show steps
  • Choose a UI/UX design topic.
  • Research the topic and gather relevant information.
  • Write a clear and concise blog post.
  • Include visuals and examples to illustrate your points.
Design a Mobile App Interface
Starting a project to design a complete mobile app interface in Figma will allow you to apply the concepts learned in the course and build a portfolio piece.
Show steps
  • Define the app's purpose and target audience.
  • Create wireframes for the app's key screens.
  • Design the UI in Figma, incorporating design principles and best practices.
  • Prototype the app's user flow.
Follow Advanced Figma Tutorials
Following advanced Figma tutorials on topics like auto layout, components, and prototyping will help you master Figma's advanced features.
Show steps
  • Find advanced Figma tutorials online.
  • Follow the tutorials step-by-step.
  • Experiment with the techniques learned in your own projects.

Career center

Learners who complete Practical UIUX Projects-Figma will develop knowledge and skills that may be useful to these careers:
User Interface Designer
A User Interface Designer focuses on the visual elements of a digital product, ensuring it is aesthetically pleasing and easy to navigate. This course helps build a foundation in UI design principles through practical projects using Figma, a leading design tool. You will learn to create intuitive and engaging interfaces for websites and applications. The course's emphasis on using shapes and components to create designs will be invaluable in your role as a User Interface Designer, as will the sections on interactive elements and animations.
See salaries and explore the career path for User Interface Designer
User Experience Designer
As a User Experience Designer, your goal is to make digital products usable, accessible, and enjoyable. This course helps in understanding the importance of user experience and its impact on software and application success. Learning to use Figma, as taught in this course, allows you to prototype and wireframe designs, creating user flows and interactive elements. The syllabus's coverage of design fundamentals and interface walkthroughs may boost your ability to create user-centered designs. This course is an excellent starting point for anyone aspiring to be a User Experience Designer.
See salaries and explore the career path for User Experience Designer
Web Designer
Web Designers create the layout and visual appearance of websites, balancing aesthetics with usability. This course, with its focus on UI design using Figma, helps you develop the skills to design visually appealing and functional websites. The course projects, such as the hotel website UI design, news website UI design, and ecommerce landing page UI design, may provide experience in creating diverse web interfaces. The design fundamentals modules help you create effective web designs, making this course a beneficial stepping stone to a Web Designer role.
See salaries and explore the career path for Web Designer
Mobile App Designer
A Mobile App Designer specializes in creating user interfaces and experiences for mobile applications. This course's focus on UI design with Figma helps you create intuitive and engaging mobile interfaces. The course projects, including the contact app UI and news feed app, may provide insights into designing mobile-specific interfaces. Furthermore, this course, in teaching you the use of interactive elements and animations, would be helpful in creating modern, dynamic mobile applications as a Mobile App Designer.
See salaries and explore the career path for Mobile App Designer
Interaction Designer
Interaction Designers focus on how users interact with digital products, designing the behavior and responses of interfaces. This course helps build a solid foundation in UI design, which is crucial for creating effective interactions. The course modules on prototyping and interactive UI design, including hover effects, helps you in understanding how to create engaging and responsive interfaces. The focus on Figma will be a strong asset as an Interaction Designer.
See salaries and explore the career path for Interaction Designer
UI Developer
A UI Developer translates designs into functional code, working closely with designers to bring interfaces to life. While this course focuses on design using Figma, it may provide a strong understanding of UI principles and design workflows. This foundation helps you better understand design specifications and collaborate effectively with designers. The skills acquired in this course may enable you to implement designs more accurately and efficiently as a UI Developer.
See salaries and explore the career path for UI Developer
Product Designer
Product Designers are involved in the entire product development lifecycle, from ideation to launch, focusing on user needs and business goals. This course's emphasis on UI and UX design helps you understand how to create user-centered products. The course modules on design fundamentals and interface walkthroughs help you to make informed design decisions. This course may enhance your ability to contribute to product strategy and design effective solutions as a Product Designer.
See salaries and explore the career path for Product Designer
UX Researcher
UX Researchers conduct user research to understand user behaviors, needs, and motivations, informing design decisions. While this course primarily focuses on UI design, it may provide an understanding of design principles and the importance of user-centered design. This awareness helps you frame research questions and interpret findings in the context of design. This course may be a useful starting point for aspiring UX Researchers.
See salaries and explore the career path for UX Researcher
Design Strategist
Design Strategists align design decisions with business goals, creating design strategies that drive business value. While this course centers on UI and UX design skills, it may give you insights into the design process and the role of design in achieving business objectives. This understanding helps you develop effective design strategies and communicate the value of design to stakeholders. This course may be a valuable asset for those pursuing a career as a Design Strategist.
See salaries and explore the career path for Design Strategist
Front-End Developer
Front End Developers implement the user interface of websites and applications using code. While this course focuses on UI design using Figma, it helps you understand the visual aspects of front end development. This knowledge allows you to translate designs into code more effectively and collaborate with designers. The focus on UI design helps you appreciate the importance of aesthetics and usability in front end development.
See salaries and explore the career path for Front-End Developer
Graphic designer
Graphic Designers create visual concepts that communicate ideas, inspire, inform, or captivate consumers. While this course hones in on UI/UX design, the lessons on visual hierarchy, color, and contrast as well as design fundamentals more generally may inform your choices as a graphic designer and improve your overall design sense. The projects in the syllabus may also inspire you to create similar projects in your work as a Graphic Designer.
See salaries and explore the career path for Graphic designer
Animator
Animators create moving images for various media, including films, television, and websites. While this course primarily focuses on UI design, it introduces animations using Lottie. This introduction may spark an interest in animation and provide a foundation for further exploration. This course may be a stepping stone for aspiring Animators.
See salaries and explore the career path for Animator
Content Strategist
Content Strategists plan, develop, and manage content across various platforms. While this course focuses on UI/UX design, understanding design principles may influence how content is presented and organized. Knowledge of visual hierarchy, whitespace usage, and other design elements helps you make informed decisions about content layout and presentation. This may be useful for those seeking to improve their content's user experience.
See salaries and explore the career path for Content Strategist
Digital Marketer
Digital Marketers develop and implement marketing campaigns across various digital channels. While this course centers on UI and UX design, it helps you appreciate the importance of user-friendly interfaces in marketing materials. This understanding allows you to create more effective marketing campaigns that engage users and drive conversions. This course may be a valuable asset for Digital Marketers.
See salaries and explore the career path for Digital Marketer
Instructional Designer
Instructional Designers create learning experiences, designing curricula and educational materials. While this course centers on UI/UX design, it may give valuable insight into how to make digital interfaces user-friendly and intuitive. This course will help you design educational materials that are accessible and engaging for learners, as well as to create materials that make use of whitespace, visual hierarchy, and color.
See salaries and explore the career path for Instructional Designer

Reading list

We've selected two books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Practical UIUX Projects-Figma.
Cover image
Think and Grow Rich - English : For Personal Growth...
Save
Provides practical advice on improving UI design through specific refactoring techniques. It's a valuable resource for learning how to make subtle changes that significantly enhance the visual appeal and usability of interfaces. The book focuses on practical application, making it ideal for translating design principles into tangible improvements within Figma. It serves as a great reference for UI/UX designers.
Melania
Hardcover
$$
From Here to the Great Unknown: Oprah's Book Club:...
Hardcover
$$
War
Hardcover
$$
The Message
Hardcover
$$
Good Energy: The Surprising Connection Between...
Hardcover
$$
Be Ready When the Luck Happens: A Memoir
Hardcover
$$
The Anxious Generation: How the Great Rewiring of...
Hardcover
$$
Onyx Storm (Deluxe Limited Edition) (The Empyrean,...
Hardcover
$$
Spooky Cutie: Coloring Book for Adults and Teens...
Paperback
$
The Leaf Thief: (The Perfect Fall Book for Children...
Paperback
$$
Cover image
Don't Make Me Think, Revisited
Save
Classic guide to web usability, offering practical advice on making websites and apps easy to use. It emphasizes the importance of intuitive design and clear navigation. This book is valuable for understanding the user's perspective and creating designs that are user-friendly. It is commonly used as a textbook in UI/UX design courses.
Don't Make Me Think, Revisited: A Common Sense...
Paperback
$$
Don't Make Me Think, Revisited : A Common Sense...
Hardcover
$$$
Don't Make Me Think, Revisited: A Common Sense...
Kindle Edition
$$

Share

Help others find this course page by sharing it with your friends and followers:
Facebook
LinkedIn
Reddit
X
Link
Email

Similar courses

Similar courses are unavailable at this time. Please try again later.
Effort
7 total hours
Via
Udemy
Instructors
shepherdd-X -
Jacqueline Dede Asare-Dartey
Language
English
Share and help others discover this course.
Facebook LinkedIn X Reddit Link Email
Don't miss out
Enroll today to gain access to this course
Enroll in this course
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2025 OpenCourser