UI Design for Beginners | FREE COURSE

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).

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.

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

[vishal.moondkar]

As a UX UI learner this is exactly what i was looking for. Only real juice, no time waste. Keep it up. Wonderful job team! 😀

[plastique]

I can't wait! These Envato courses are REALLY amazing!

[adarshsahux]

Oh my god thankyou so much I'm just looking for a complete ui ux design course but can't find one! Now you surprise me

[tutorialpocket]

I love that you created all the icons in the app simply and elegantly.

[janediaz]

Wow I just watched this for fun but that felt like free therapy! Thanks for this video, I hope there's more :D

[sabaaghaie]

That was really fun to watch I enjoyed watching you turn this into a clean nice design and I learned a lot! Thank you❤️

[danofcalifornia]

I was hoping this would be more of a design tutorial, not a how-to-use XD tutorial. I guess I'll have to keep looking.

[MultiSciGeek]

Not bad at all! I like your process and many useful tips in this.

[ravicloudnine]

OMG! This is what I have been looking for. Thank you for the tutorial.

[abhishekwagdre]

As a learner I think I'm in right place ❤

[yp]

Thank you so much, this has been really helpful. Please continue to make more UX/UI courses.

[AaronGayah-drlu]

This was an enjoyable experience. Thank you.

[hassanmushtaq]

I really loved this tutorial and its totally worth watching. Great thing is, this tutorial not just focuses only on UI part but UX part as well and how the instructor followed the UX design part to come up with an excellent UI design.

Looking forward to such exciting courses ahead. GREAT WORK, APPRECIATED!

Thank you!

[MAKRelaxingMusic]

I am happy to see your video. Thank you ☺️

[nicocxz]

Thank you Corey! ur a great teacher and excellent Singer! <3

[Aishaali-jh]

Thanks alot. Your tricks were very helpful

[notdam]

you know if you say a beginner you should start by telling someone what UI design is

[akamadmanfire]

I just wanted to ask, you said to do the spacing from the text and not the bounding box. But if you was to say hand the design over to dev, doesn’t html text have a bounding box? If so wouldn’t the spacing now be different from the design version. Hope this makes sense. Thanks

[EmilianEKAMA]

Hi Daniel I love the tutorial, am a beginner it’s really helped but if you are making a video for beginners pls try and slow down with the designs, I have to watch the videos 4 times to see what you are actually clicking on

[Nemluva]

So if I get it right best way to start learning UI design is to just try doing some random fictional project? At least it seems so