Learn UI Design: Quickly create an On-boarding Web App

Brian White, UI & Brand Designer / Painter & Printer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Lessons (49m)
    • 1. Introduction

      0:57
    • 2. Setup & splash page

      7:47
    • 3. On-boarding templates

      15:43
    • 4. Dashboard Cards

      14:51
    • 5. Dashboard Table Area

      4:28
    • 6. Screen shot and finishing touches

      1:45
    • 7. Prototyping

      3:27

About This Class

This User Interface Design (UI) class will help you build your design arsenal with swappable icons, state selections, and a flushed out dash board complete with card sections, tabs, and tables.

98ec3b4d

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.

** Don't forget to post your class projects to the chat! Happy designing!

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 https://www.instagram.com/brianwhitedesign/ and https://twitter.com/BWhiteDesign and https://dribbble.com/BrianWhite

44ffc733