Learn UI Design: Quickly create an On-boarding Web App | Brian White | Skillshare

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

Brian White, User Interface & Brand Designer

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



14

Students

--

Projects

  • --
  • Beginner
  • Intermediate
  • Advanced
  • All Levels
  • Beg/Int
  • Int/Adv

Level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

Brian White

User Interface & Brand Designer


As creative director of Brian White Design in Lawrence Kansas, Brian White directs the studio's strategic and creative growth while also serving as senior designer on pivotal client projects. Brian has over 20 years of experience in design and communication arts with a focus on User-Interface design. Enthralled by branding via color, layout, pattern and typography, Brian devotes his time to applying this outlook to clients and business. With an abundance of national branding ...

See full profile

Report class