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).
► Download creative UI kits and more from Envato Elements: elements.envato.com/graphic-t...
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: 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
► Read more on Envato Tuts+: webdesign.tutsplus.com/ui-des...
► Download unlimited photos, fonts, and templates with Envato Elements: elements.envato.com/?...
Read hundreds of free UI design tutorials on Envato Tuts+: webdesign.tutsplus.com/catego...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: tutsplus.com/?...
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: elements.envato.com/?...
► Subscribe to Envato Tuts+ on KZbin: / tutsplus
► Follow Envato Tuts+ on Twitter: / tutsplus
► Follow Envato Tuts+ on Facebook: / tutsplus
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

[@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! 😀

[@Epikht]

The course I’ve been waiting for 👏🏼🔥

[@plastique45]

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

[@susanthejew6351]

great to learn the basics, but figma is free and has an online repository of free designs you can use also it snaps perfectly

[@electrickittylikestea9647]

Do you import and export?

[@janediaz3390]

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

[@tutorialpocket1846]

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

[@envatotuts]

Thank you! 😊

[@yp8666]

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

[@ravicloudnine]

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

[@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

[@AaronGayah-dr8lu]

This was an enjoyable experience. Thank you.

[@lifexplorer7]

Wow, Let's begin! 😉

[@hiyaworld2170]

I am so exited :)

[@kartikeyshukla9181]

Love You Team Envato ❤❤

[@danielnewton5867]

I love Danski’s tuts!

[@MultiSciGeek]

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

[@danofcalifornia1043]

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.

[@wawfleu]

thanks for the heads up, not gonna waste my time with this one

[@MAKRelaxingMusic]

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

[@huntervargo4237]

Can't wait

[@its.albert.510]

this was nice to watch!

[@abhishekwagdre1919]

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

[@Gostokom]

Thanks, i got an idea how to start

[@edwardjohn7644]

Ooh dansky ft envato = bang! 💣🔥.... 😊

[@draketeeth117]

amezing course i ever seen befor

[@user-ie8wj6kw7z]

that was wonderful🤩❤‍🔥

[@SudarminDamir]

Cant wait

[@nicocxz3186]

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

[@envatotuts]

Thanks so much!

[@hassanmushtaq8032]

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!

[@envatotuts]

Glad it helped!

[@Aishaali123-j7h]

Thanks alot. Your tricks were very helpful

[@envatotuts]

Most welcome 😊

[@abdollahmemar9170]

tnx for your video

[@islamaz2305]

Thaaaaaaaaaankssss alot 👍🏻👍🏻👍🏻👍🏻

[@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

[@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

[@V1RU5Zuk]

Is this software just for designing how the UI will look? Or does it also lead to making working buttons and links etc?

[@notdam7508]

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

[@ikamustika8763]

❤

[@tahamohamady-du6vq]

I'm wondering how a figma design will be transformed to a website (I mean the front end side specially html and css)

[@tokyo_taxi7835]

Thanks a lot! Now I've got another piece to add to my portfolio. :D

[@envatotuts]

Great!

[@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

[@amrkhaled9073]

Can i watch this video with figma ?

[@mastergamers6991]

Sir plz make a ux

[@mastergamers6991]

Sir i want ux design course also plzplz plz

[@builtfromashes9447]

Hello, I cannot find Adobe XD anywhere, I think it has been discontinued. Are there any other substitutes for making a UI?

[@davidsharlsamhon9038]

طيب فكرنى بين الشوطين نفكه ونجيبه جنب البيت عندى هناك، علشان مكسل أروح فى المواصلات 🥱

[@deejoy09]

I'm a beginner too, please which app is this?

[@envatotuts]

He is using Adobe XD.

[@kundagoonda]

12:12

[@warrioryt7037]

Which softwar is this??

[@icebwoy8158]

Adobe xd

[@onfireclips]

Hey it's danski

[@chuky422]

how is this begginer when you're going in timeline mode?

[@buziyborni]

This is not a beginners course the video was fast and I don't know what's been selected