Learn to design a complete decentralized app (project included).
What you’ll learn
- 5 hours of valuable content that will land you a high paying job.
- Learn how to build a project from scratch..
- Build a complete project you can add to your portfolio..
- Ability to navigate across Figma using shortcuts and tips.
- Learn how to create basic animations using Smart Animate..
- Ability to build design system as component from scratch.
- Ability to understand and bisect a design brief when handling a freelance job..
- You will learn where to get design inspiration to speed up your workflow..
- Learn ability to wireframe easily.
- Master Figma interfered quickly.
- Learn the typography and color systems.
- Learn how to build a design system from scratch.
- Learn about grid layout and its importance.
- Learn how to combine your pages and turn them into a prototype..
Course Content
- Fundamentals –> 5 lectures • 4min.
- Introduction to figma –> 1 lecture • 2min.
- Common problems faced by designers –> 1 lecture • 9min.
- Figma interface –> 5 lectures • 38min.
- Design system –> 5 lectures • 28min.
- Animation –> 1 lecture • 18min.
- Wireframing –> 1 lecture • 24min.
- Project overview –> 1 lecture • 9min.
- Login page –> 1 lecture • 33min.
- Landing page –> 4 lectures • 1hr 26min.
- Details page –> 3 lectures • 30min.
- Success page –> 3 lectures • 21min.
- Complete Prototype –> 2 lectures • 19min.
Requirements
The aim of this course is to teach you how to build a complete project from start to finish.
The only way to learn is by doing.
Before building the project, we are going to be covering some basics of UI and UX design for best understanding.
Take a moment to go through the outline below.
1. Fundamentals
- Introduction to UI UX Design
- What is UI UX Design
- Importance of UI UX Design
- Difference between UI/ UX Design
- Why learn UI UX design
2. Introduction to Figma
- What is Figma use for
- Tools used for UI UX design
- Why Figma
3. Common problems faced by designers….
- Where to get inspiration from
- Understanding a design brief
- Importance design system
- Importance of wireframe
4. Figma interface
- Design Tab
- Understanding the align tools
- Working with text
- Saving and sharing Project/Saving your Figma file
- Shortcut and tips
5. Design system
- Typography
- Saving your design system
- Creating Color system,
- Layouts Grids
- Importance of layout grid.
6. Animation
7. Wireframing in Figma
8. Project OVERVIEW
9. Login page
10. Landing page I
- Landing page continuation II
- Landing page continuation III
- Landing page done
11. Details page
- Details page footer correction
- Details page icon correction
12. Success page
- Fixing images and title text
- Fixing images for other pages
- Adding blur effect to our background
13. Complete Prototype
After taking this course, you will be able to create wireframes, animations, and fully interactive prototypes.
You will also get a project design you can add to your portfolio.
It is time to be a Figma Pro. See you on the course.