What You Will Learn

5 Lessons

Introduction

13 Lessons

Design Basics

13 Lessons

Adobe Xd

15 Lessons

UI Elements

4 Lessons

Wireframing

3 Lessons

Application Design

7 Lessons

Real-life Project

2 Lessons

Portfolio / Client

About Your Trainer

Roman Leinwather is a senior application designer with more than 15 years of experience.

Roman is a proud member of the top 3% of internet talent - Toptal.

He studied web design and development at Oxford Computer College, London followed by various programming and design courses in City University, London. He has been working for several startups, digital and government agencies in London.

He has been working as an independent freelancer for the last 10 years in Prague.

His work is used daily by millions of people around the world.

Roman’s toolbox: Adobe Xd, Adobe Photoshop, Adobe Illustrator, HTML, CSS, Java-script, Django, Ruby on Rails, PHP

Prerequisites

Anyone interested in learning or furthering their knowledge of application design can enroll.

Candidates should have a computer with an internet access, basic computer knowledge, working with internet browser.

The course uses single software Adobe XD, which can be installed on Microsoft Windows as well as Apple computers for free. You can download it here.

Support

Every student receives an budget of answer time. Students can use build-in messaging platform to ask questions and receive answers by email. The total answer time is limited to two hours.

Course Syllabus - 8 Modules | 62 Lessons

11 hours of video content, 30 downloadable resources.

  • 01 Introduction
    • Course structure - 02:18
    • Inspiration - 01:26
    • Tools - 01:11
    • Future - 00:59
    • Benefits - 01:48
  • 02 Design Basics
    • Grid System - 02:15
    • Spacing - 02:55
    • Separation - 02:27
    • Visual Noise - 01:36
    • Balance - 02:23
    • Iconography - 01:37
    • Typography - Foundation - 01:46
    • Typography - Scale - 02:04
    • Color Contrast - 01:35
    • Color Palette - 01:39
    • Composition - 03:49
    • Consistency - 07:00
    • Resources - 01:51
  • 03 Adobe Xd
    • Artboards & Layers - 07:14
    • History Tool - 01:47
    • Zoom Tool - 02:44
    • Rectangle Tool - 03:08
    • Elipse Tool - 02:04
    • Line Tool - 01:23
    • Color - 02:06
    • Gradient - 02:51
    • Drop Shadow - 03:43
    • Transparency - 01:55
    • Masking - 03:05
    • Text Tool - 03:10
    • Font icons - 02:08
  • 04 UI Elements
    • Text Fields - 07:13
    • Buttons - 06:06
    • Sliders - 07:22
    • Selection Controls - 13:31
    • Chips - 10:19
    • Tooltips - 07:25
    • Cards - 11:25
    • Dialogs - 09:47
    • Lists - 17:29
    • Tables - 09:16
    • Navigation - 07:13
    • Charts - 14:06
    • Menus - 08:50
    • Steps - 09:19
    • Snackbars - 03:20
  • 05 Wireframing
    • Basics - 07:09
    • Inteface - 22:43
    • User Flows - 04:48
    • Prototype - 01:57
  • 06 Application Design
    • Sample Mobile App. - Instagram - 48:51
    • Sample Web App. - Facebook - 47:14
    • Iterations - 07:27
  • 07 Real-life Project
    • Spec - 02:39
    • Wireframes - 02:03:44
    • User Flows - 15:22
    • Prototype - 06:55
    • Design - 37:50
    • Design Guide - 01:33:29
    • Files Hands Off - 01:37
  • 08 Portfolio & Client
    • Portfolio - 02:27
    • Client - 02:17

Sample Applications You Will Design

Replicating other designers work is a great way of learning the craft. We have picked Instagram and Facebook as sample projects, but we will create our own version of these mobile and web applications during the course.

You will be following video lessons and replicating the designer's process step by step, stopping the video until you have it exactly the way the instructor has it on its screen.

UI Elements You Will Create

We will go through the full list of UI elements and create them all one by one in Adobe XD. This will give you a complete set of building blocks which you can use in any application design.

Examples of UI Elements you will learn through out the course: Cards, Steps, Dialogs, Controlls, Sliders, Buttons, Navigations, Tables and many more...

Real-life Project Study

You will be following along the realistic scenario of a real-life project. Plane tickets booking application. Based on the specifications received from a client we will be creating a set of 9 wireframes followed by user flow creation and clickable prototype. We will design all the views of the application and extract all the UI elements into practical design guide and prepare the assets for handoff.

Example of wireframe and final mockup of single view - Ticket booking / Seat selection.