Class Links: [ Ссылка ]
We will be going over the steps of designing a simple on-boarding process for a web application and how to make it fun and interesting to keep potential users clicking onward. Once they land on your dashboard design they will be hooked. We will start with a simple horizontal navigation design with simple components. We will use the basic grid system to align text, and flush out a few sign-up, onboarding pages with swappable icons. The final design will be a quick but solid dashboard design. After the design is complete we will tie the pages together to create a simple but usable clickable prototype to share with a potential client.
This class is geared towards people that have working knowledge of InVision, XD, or sketch and wanting to try out Figma. Figma is a strong, fast and free browser based UI design application that has incredible strengths in components (symbols), responsive web behavior, and co-working.
The skills you will learn in this class are important and will create a foundation for you to build and grow your UI design skills quickly and in an organized and easy to use manner.
LESSON BREAKDOWN
1. Basics of the app, a list of the pages and designs we will be tackling and what you will come away with in skills and product.
2. Setting up the workspace and Splash page with size, spacing, grid, typography, and color. Setting up your first component and Form Elements. Creating component buttons with states.
3. Setting up an on-boarding template with component navigation. Vertical and Horizontal navigation help frame the 8 quick pages we will create for the on-boarding area.
4. The last page we will tackle is the dashboard. Through the build of this page we will create overview cards, a tab menu, and a table with easy to edit details. This video focuses on the card area at the top.
5. Dashboard page lesson focusing on the table components at the bottom of the page.
6. This lesson focuses on how to quickly grab design from the dashboard to showcase it subtly on your initial splash page.
7. When the design is done and it’s time to show off to the client, we create a working click-through prototype.
Brian is a Pro Builder for Elementor which he uses for all his WordPress custom builds. [ Ссылка ]
Want to be the first to know about new resources including classes and bonus content and design resources (and freebies)? Sign up for my email news alerts here [ Ссылка ]
Follow along with me at [ Ссылка ] and [ Ссылка ] and [ Ссылка ].
