Description

This is a concise, clear, and practical course for learning modern web design, UI/UX design, and mobile app design using the Figma tool. There are various exercises to practice and learn navigating through the course; there are no hardcore prerequisites to join this course.

Figma is a vector graphics editor and prototyping tool that is primarily web-based, with additional offline features enabled by desktop applications for macOS and Windows. The Figma mobile app for Android and iOS allows viewing and interacting with Figma prototypes on real-time mobile devices. This course will teach you everything you need to know about modern web design using Figma, one of the best design programs. The course is beginner-friendly-we will take it step by step and learn through fun exercises. You will look at UI and UX-all the essential principles you have to know. You will learn about responsive design: transform the desktop version into the mobile version. Check how to prepare the design for coding: make coders and clients happy. See different design principles that can be applied to any project. Finally, find out what clients want from you-what assets/deliverables and in what format. You will also use Zeplin to bridge the gap between designers and engineers. It takes designs from Figma and exports them into a format that generates code snippets, design specs, and assets. By the end of this course, you will become a well-versed and confident individual to create modern web designs using Figma. You can get freelance projects in this arena and open up a new world in the field of web designing. All the resource files are added to the GitHub repository at: https://github.com/PacktPublishing/Figma-for-UI-UX-Master-Web-Design-in-Figma

What You Will Learn

Create beautiful website designs in Figma
Transform the desktop version of the website to the mobile one
Prepare the design for the client and coders
Look at important design principles that can be applied to any web design project
Learn how to start any website project the right way
Get inspiration and design resources the correct way

Audience

This course is great for both beginners and advanced users that want to learn modern web design. Website developers that want to learn how to design websites and individuals that want to know how to transform the desktop version of a website to the mobile one can get the most out of this course. This will also help designers that don't know the latest web design trends and principles and anyone who wants a life skill they can depend on-whether for a new career or another income stream.

Figma is totally free. All you need is a computer and a bit of time.

Approach

This is a step-by-step and practical course on web designing using Figma. The course is designed keeping in mind the beginners in this field covering the basics of web designing and handholding with the Figma tool from scratch. There are various case studies to help you grasp the concepts and understand the issues and resolutions to real-world scenarios.

Key Features

Work on real-world projects that are actually live and have visitors and clients * Discover the best tips and tricks that will take you from beginner to advanced user in a very short time * Explore case studies where the author explains in detail the most common mistakes

Github Repo

https://github.com/PacktPublishing/Figma-for-UI-UX-Master-Web-Design-in-Figma

About the Author

Cristian Doru Barin

Chris Barin is a seasoned web and app designer with extensive Photoshop experience. As an Adobe Certified Instructor and Photoshop Expert, he has gained the trust of over 270,000 students worldwide. Chris's courses are practical and result-driven, emphasizing efficiency. From his freelance beginnings to running a successful Android design studio, he has earned over $50k and amassed 100 million app downloads. Passionate about teaching, Chris shares his experiences vocally, offering top-rated/best-selling courses on Udemy. His responsiveness, clear explanations, and effective teaching style have a huge fan following. He loves to connect with learners to enhance their learning experience and gain valuable insights into the design industry.

Course Outline

1. Introduction to the Course

1. Introduction

This video provides an overview of the course.

2. What Is Figma and Why Is it Better than Other Design Programs?

This video explains Figma and why it is better than other design programs.

3. How to Get Help Fast

This video demonstrates how to get help fast in Figma.

4. The Welcome Screen in Figma

This video navigates you through the Welcome screen in the Figma tool.

5. Getting Started with Figma

This video helps you with getting started with Figma.

6. Best Ways to Move Around in Figma

This video explains the best ways to move around in Figma.

7. Exercise: How to Move Elements Around

This is the exercise video on how to move elements around.

8. Solving the Exercise and a Few Pro Tips

This video helps in solving the exercise and talks about a few pro tips.

9. Discover Figma's Interface and Why Professionals Use It

This video explores through Figma's interface and why professionals use it.

10. Create Your First Mini Website

This video helps you create your first mini website.

11. Editing Icons: Colors and Size

This video explains the editing icons: colors and size.

12. Here Is Why So Many Beginners Give Up

This video talks about the reasons why so many beginners give up.

13. Why I Don't Code (And I Don't Plan To)

This video explains why the author doesn't code (and why he doesn't plan to).

2. Discover the Most important Things about Figma

1. Introduction

This video provides an overview about the section.

2. Difference Between Figma and Other Programs

This video talks about the difference between Figma and other programs.

3. Here's How You Create Buttons in Figma

This video demonstrates how you can create buttons in Figma.

4. The Basics of Working with Color

This video explains the basics of working with color.

5. How to Work with Color Like a Pro

This video explains how to work with color like a pro.

6. How to Add Images: Frames Versus Rectangles

This video explains how to add images: frames versus rectangles.

7. Create a Gallery / Collage in Figma

This video demonstrates creating a gallery / collage in Figma.

8. How to Mask in Figma

This video explains how to mask in Figma.

9. Here Are the Three Types of Text in Figma

This video explains the three types of text in Figma.

10. Discover the Properties of Text Layers

This video explores the properties of text layers.

11. How to Work with Text Like a Pro

This video explains how to work with text like a pro.

12. Effects in Figma: Blur, Shadows, and More

This video explains effects in Figma: blur, shadows, and more.

13. Everything You Need to Know about Grids

This video explains everything you need to know about grids.

14. An Overview of Components

This video provides an overview of the components.

15. Drafts and Projects in Figma

This video talks about drafts and projects in Figma.

16. Here's What Makes You a Good Web Designer

This video helps you understand what makes you a good web designer.

17. Conclusions

This video talks about the conclusion part.

3. First Web Design Project

1. Introduction

This video provides an introduction to the section.

2. Set Up the Desktop Version the Correct Way

This video demonstrates setting up the desktop version the correct way.

3. Create the Header

This video explains how to create the header.

4. Create the Main Menu

This video explains how to create the main menu.

5. Set Up The Search Box

This video explains setting up the search box.

6. Create a Dropdown Menu

This video helps you create a dropdown menu.

7. Create the Most Important Item - The Card

This video demonstrates creating the most important item - the card.

8. How to Improve the Cards

This video shows how to improve the cards.

9. Set Up Secondary Navigation

This video explains setting up secondary navigation.

10. Create the Pagination

This video helps you create the pagination.

11. Create the Foundation for the Footer

This video demonstrates creating the foundation for the footer.

12. Adding Content in the Footer

This video explains adding content in the footer.

13. How to Handle Visual Imperfections

This video explains how to handle visual imperfections.

14. Here's What You Need to Remember

This video talks about the things you need to remember.

4. The First Key to Great Web Design

1. Introduction

This video provides an introduction to the section.

2. Best Settings and Website Components

This video demonstrates the best settings and website components.

3. Case Study: Non-Standard Layouts

This is a case study video on non-standard layouts.

4. Exercise: Create a Standard Website Layout

This is an exercise video to create a standard website layout.

5. How to Size Your Web Elements Correctly

This video explains how to size your web elements correctly.

6. My Formula for Perfect Text

This video explains the author's formula for perfect text.

7. Case Study: Text Layers

This is the case study video on text layers.

8. What You Need to Know about Color Contrast

This video explains what you need to know about color contrast.

9. Case Study: Colors - Part 1

This is the first video of the two-part case study video on colors.

10. Case Study: Colors - Part 2

This is the second video of the two-part case study video on colors.

11. How to Align Elements in the Hero Area

This video explains how to align elements in the hero area.

12. Three Rules for Web Design Icons

This video talks about the three rules for web design icons.

13. Case Study: Visual Balance

This is the case study video on visual balance.

14. Final Thoughts

This video talks about final thoughts.

5. The Second Key to Great Web Design

1. Introduction

This video provides an introduction to the section.

2. What's the Point of the Website?

This video explains the point of the website.

3. The User Versus the Business Owner

This video talks about the user versus the business owner.

4. Analytics in Web Design

This video explains analytics in web design.

5. Templates and Website Builders - The Web Designer's Death?

This video talks about templates and website builders - the web designer's death.

6. Case Study: Four Versions of the Same Website

This is the case study video that demonstrates the four versions of the same website.

7. Ecommerce Homepage Layout

This video demonstrates the ecommerce homepage layout.

8. Ecommerce Product Details

This video demonstrates the ecommerce product details part.

9. Ecommerce Checkout

This video demonstrates the ecommerce checkout part.

10. Why Aren't Websites Perfect?

This video explains why websites are not perfect.

11. Case Studies: The Client's Needs

This is the case study video on different aspects of the client's needs.

12. Landing Page Versus a Website

This video explains the difference between the landing page and a website.

13. Lead Generation in Landing Pages

This video explains lead generation in landing pages.

14. Why Landing Pages Have a Bad Reputation

This video explains why landing pages have a bad reputation.

15. Digital Product Landing Page

This video talks about the digital product landing page.

16. Testing Landing Pages

This video helps you with testing landing pages.

17. Case Study: My Landing Page

This is the case study video, and the author will help you with navigating to his landing page.

18. Final Thoughts about the Client's Needs

This video will help you with the final thoughts about the client's needs.

6. The Third Key to Great Web Design

1. Introduction

This video provides an introduction to the section.

2. What's UX?

This video explains about the UX (User Experience).

3. The Best Example of Good UX and Attention to Detail

This video helps you with the best example of good UX and attention to detail.

4. Improve the Checkout Process to Double Sales

This video explains how to improve the checkout process to double sales.

5. Improve the Mobile Version to Double Sales

This video explains how to improve the mobile version to double sales.

6. Seven Website Tweaks that Show Attention to Detail

This video explains seven website tweaks that show attention to detail.

7. Upgrading the Mobile Product Page

This video explains about upgrading the mobile product page.

8. Doing 1-on-1 Sessions with a Coder

This video demonstrates 1-on-1 sessions with a coder.

9. Here's What You Need to Remember

This video helps you with things to be remembered.

7. Redesign an Ecommerce Business

1. The Most Important Question When Starting a New Project

This video talks about the most important question when starting a new project.

2. How to Research/Find Inspiration for Your Project

This video explains how to research/find inspiration for your project.

3. Set Up the Foundation of the Project

This video explains setting up the foundation of the project.

4. Create the Top Bar

This video explains how to create the top bar.

5. Set Up the Header

This video demonstrates setting up the header.

6. Decide on a Styling for the Header

This video helps you decide on a styling for the header.

7. Create the Most Important Part - The Hero Area

This video demonstrates creating the most important part - the hero area.

8. Create the Secondary Navigation - Product Categories

This video helps you create the secondary navigation - product categories.

9. Here's Where Sales Are Made...Or Not!

This video explains the areas where the sales are made and looks at a few insights.

10. Create the First Version of the Card

This video demonstrates creating the first version of the card.

11. Set the Style for the Card

This video explains how to set the style for the card.

12. Finishing Touches for the Card Design

This video helps you with finishing touches for the card design.

13. Don't Forget about This Important Detail!

This video explains some important details about mobile app design.

14. Create the FAQ Section

This video explains how to create the FAQ section.

15. Here's Why Auto-Layout Is Awesome

This video explains why auto-layout is awesome.

16. Create a Newsletter Sign Up Form

This video explains creating a newsletter sign up form.

17. Set Up the Footer's Foundation

This video explains setting up the footer's foundation.

18. Finishing the Footer

This video explains finishing the footer.

19. Explore Variations and Improve Your Design

This video helps you explore variations and improve your design.

20. How to Approach the Interior Pages

This video demonstrates how to approach the interior pages.

21. Set the Top Area for the Product's Page

This video demonstrates setting the top area for the product's page.

22. Adding Content to the Product's Page

This video helps you with adding content to the product's page.

23. How to Add Clear Calls to Action for Visitors

This video explains how to add clear calls to action for visitors.

24. Main Content Area

This video explains the main content area.

25. Create a Table for the Sidebar

This video explains how to create a table for the sidebar.

26. Conclusions

This video talks about the conclusion of the section.

8. Responsive Design: From Desktop to Mobile

1. Introduction to the Mobile Version

This video provides an introduction to the mobile version.

2. How to Start the Mobile Version for the Homepage

This video explains how to start the mobile version for the homepage.

3. Create the Header for the Mobile Version

This video explains how to create the header for the mobile version.

4. How to Rearrange the Hero Area

This video explains how to rearrange the hero area.

5. Set Up the Card for the Grid of Products

This video explains setting up the card for the grid of products.

6. Don't Skip This Step When Creating Product Cards

This video explains the steps you should follow when creating product cards.

7. Arrange the FAQ Section for the Mobile Version

This video talks about the FAQ section for the mobile version.

8. Recreate the Newsletter in a Narrow Space

This video demonstrates recreating the newsletter in a narrow space.

9. Create the Footer for the Mobile Version

This video explains how to create the footer for the mobile version.

10. Conclusions

This video talks about conclusions.

9. Discover How the Design Gets Transformed to the Live Version

1. Preparing the Design for Coding

This video demonstrates preparing the design for coding.

2. Zeplin - The Missing Link!

This video talks about Zeplin - the missing link.

3. How to Set Up the Project for the Coder/Client

This video explains how to set up the project for the coder/client.

4. Server-Side Content and Multi-Layer Graphics

This video explains about the server-side content and multi-layer graphics.

5. Here's What Developers Want from Your Design

This video explains about the things/requirements developers want from your design.

6. Here's Why It's Essential You Deliver What's Needed

This video explains why it's essential you deliver what's needed.

7. Final Thoughts and What's Next

This video talks about final thoughts and what's next.

Course Images

Figma for UI/UX: Master Web Design in Figma

By Packt

Booking options

Highlights

Description

Course Content

About The Provider

Tags

Reviews