Introduction

Sizing, spacing, and positioning touch targets

Custom or default guides?

Building your own collection of components

Consistent shadows and light sources

Have a break! Make a cup of tea

Judging visual weight and alignment

Align text, not the bounding box

Proximity in design

Designing for the worst case scenario

Matching nested border radiuses

Envato Tuts+

In this UI Design tutorial, we’re going to be jumping into Adobe XD, focusing on UI design for beginners (you can use other UI design tools, like Figma, to follow along too).
► Download creative UI kits and more from Envato Elements: https://elements.envato.com/graphic-templates/ux-and-ui-kits?utm_campaign=yt_tutsplus_N-xuqy6x1Bw&utm_medium=referral&utm_source=youtube.com&utm_content=description

We’ll start by wireframing a fictional app, then we’ll add a design layer and pick some colors. There’ll be plenty of design theory and UI design tips sprinkled throughout.

► Download source files: https://bit.ly/ui-design-beginners

UI Design Tips to Bookmark:

00:00:00 Introduction
00:20:40 Sizing, spacing, and positioning touch targets
00:22:13 Custom or default guides?
00:29:55 Building your own collection of components
00:33:13 Consistent shadows and light sources
00:42:24 Have a break! Make a cup of tea
00:44:27 Judging visual weight and alignment
00:55:51 Align text, not the bounding box 
00:59:05 Proximity in design
01:01:29 Designing for the worst case scenario
01:07:56 Matching nested border radiuses

► Download unlimited photos, fonts, and templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_N-xuqy6x1Bw&utm_medium=referral&utm_source=youtube.com&utm_content=description

Read hundreds of free UI design tutorials on Envato Tuts+: https://webdesign.tutsplus.com/categories/ui-design?utm_campaign=yt_tutsplus_N-xuqy6x1Bw&utm_medium=referral&utm_source=youtube.com&utm_content=description

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com/?utm_campaign=yt_tutsplus_N-xuqy6x1Bw&utm_medium=referral&utm_source=youtube.com&utm_content=description

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_N-xuqy6x1Bw&utm_medium=referral&utm_source=youtube.com&utm_content=description

► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus
► Follow Envato Tuts+ on Twitter: https://twitter.com/tutsplus
► Follow Envato Tuts+ on Facebook: https://www.facebook.com/tutsplus
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

UI Design for Beginners | FREE COURSE

UI Design for Beginners | FREE COURSE

UI Design for Beginners | FREE COURSE

Get Full Course Access

Highly Recommended Courses

Explore top skills

In-demand Careers

Popular Topics

Creative Skills

Business Skills

Choose your learning path