Learn from a beginner-friendly and highly practical course on everything you need to know about modern web design using Figma.
About This Video
In Detail
Figma is a vector …
Learn from a beginner-friendly and highly practical course on everything you need to know about modern web design using Figma.
About This Video
In Detail
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.
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.
Chapter 1 : Introduction to the Course
Introduction
What Is Figma and Why Is it Better than Other Design Programs?
How to Get Help Fast
The Welcome Screen in Figma
Getting Started with Figma
Best Ways to Move Around in Figma
Exercise: How to Move Elements Around
Solving the Exercise and a Few Pro Tips
Discover Figma’s Interface and Why Professionals Use It
Create Your First Mini Website
Editing Icons: Colors and Size
Here Is Why So Many Beginners Give Up
Why I Don’t Code (And I Don’t Plan To)
Chapter 2 : Discover the Most important Things about Figma
Introduction
Difference Between Figma and Other Programs
Here’s How You Create Buttons in Figma
The Basics of Working with Color
How to Work with Color Like a Pro
How to Add Images: Frames Versus Rectangles
Create a Gallery / Collage in Figma
How to Mask in Figma
Here Are the Three Types of Text in Figma
Discover the Properties of Text Layers
How to Work with Text Like a Pro
Effects in Figma: Blur, Shadows, and More
Everything You Need to Know about Grids
An Overview of Components
Drafts and Projects in Figma
Here’s What Makes You a Good Web Designer
Conclusions
Chapter 3 : First Web Design Project
Introduction
Set Up the Desktop Version the Correct Way
Create the Header
Create the Main Menu
Set Up The Search Box
Create a Dropdown Menu
Create the Most Important Item – The Card
How to Improve the Cards
Set Up Secondary Navigation
Create the Pagination
Create the Foundation for the Footer
Adding Content in the Footer
How to Handle Visual Imperfections
Here’s What You Need to Remember
Chapter 4 : The First Key to Great Web Design
Introduction
Best Settings and Website Components
Case Study: Non-Standard Layouts
Exercise: Create a Standard Website Layout
How to Size Your Web Elements Correctly
My Formula for Perfect Text
Case Study: Text Layers
What You Need to Know about Color Contrast
Case Study: Colors – Part 1
Case Study: Colors – Part 2
How to Align Elements in the Hero Area
Three Rules for Web Design Icons
Case Study: Visual Balance
Final Thoughts
Chapter 5 : The Second Key to Great Web Design
Introduction
What’s the Point of the Website?
The User Versus the Business Owner
Analytics in Web Design
Templates and Website Builders – The Web Designer’s Death?
Case Study: Four Versions of the Same Website
Ecommerce Homepage Layout
Ecommerce Product Details
Ecommerce Checkout
Why Aren’t Websites Perfect?
Case Studies: The Client’s Needs
Landing Page Versus a Website
Lead Generation in Landing Pages
Why Landing Pages Have a Bad Reputation
Digital Product Landing Page
Testing Landing Pages
Case Study: My Landing Page
Final Thoughts about the Client’s Needs
Chapter 6 : The Third Key to Great Web Design
Introduction
What’s UX?
The Best Example of Good UX and Attention to Detail
Improve the Checkout Process to Double Sales
Improve the Mobile Version to Double Sales
Seven Website Tweaks that Show Attention to Detail
Upgrading the Mobile Product Page
Doing 1-on-1 Sessions with a Coder
Here’s What You Need to Remember
Chapter 7 : Redesign an Ecommerce Business
The Most Important Question When Starting a New Project
How to Research/Find Inspiration for Your Project
Set Up the Foundation of the Project
Create the Top Bar
Set Up the Header
Decide on a Styling for the Header
Create the Most Important Part – The Hero Area
Create the Secondary Navigation – Product Categories
Here’s Where Sales Are Made…Or Not!
Create the First Version of the Card
Set the Style for the Card
Finishing Touches for the Card Design
Don’t Forget about This Important Detail!
Create the FAQ Section
Here’s Why Auto-Layout Is Awesome
Create a Newsletter Sign Up Form
Set Up the Footer’s Foundation
Finishing the Footer
Explore Variations and Improve Your Design
How to Approach the Interior Pages
Set the Top Area for the Product’s Page
Adding Content to the Product’s Page
How to Add Clear Calls to Action for Visitors
Main Content Area
Create a Table for the Sidebar
Conclusions
Chapter 8 : Responsive Design: From Desktop to Mobile
Introduction to the Mobile Version
How to Start the Mobile Version for the Homepage
Create the Header for the Mobile Version
How to Rearrange the Hero Area
Set Up the Card for the Grid of Products
Don’t Skip This Step When Creating Product Cards
Arrange the FAQ Section for the Mobile Version
Recreate the Newsletter in a Narrow Space
Create the Footer for the Mobile Version
Conclusions
Chapter 9 : Discover How the Design Gets Transformed to the Live Version
Preparing the Design for Coding
Zeplin - The Missing Link!
How to Set Up the Project for the Coder/Client
Server-Side Content and Multi-Layer Graphics
Here’s What Developers Want from Your Design
Here’s Why It’s Essential You Deliver What’s Needed
Final Thoughts and What’s Next