Want your layouts to look GREAT?! Try Adding DEPTH

Рет қаралды 105,892

Күн бұрын

bit.ly/3Vdhslj 👈 Learn UI/UX Today. Use "UI2022" for 22% Off!
-- Today, I'm going to show you a UI design technique that will add a lot of visual interest to your designs. I'll show you a few different approaches to adding depth, and in the process, we'll create a fairly nice looking little landing page!
Assets shown/used:
(First 3 examples shown in the intro):
dribbble.com/shots/18753108-U...
dribbble.com/shots/18747434-D...
dribbble.com/shots/18746958-S...
Asset used in the UI design:
unsplash.com/photos/HI6gy-p-WBI
0:00 - Introduction
0:34 - Learn UI/UX Today
1:19 - Getting Started with the Layout
2:14 - Placing the Basic Layout Elements
3:32 - Depth Technique 1
5:37 - Depth Technique 2
10:13 - Depth Technique 3
15:04 - Depth Technique 4
17:48 - Final Thoughts
Let's get started!
#uiux #uidesign #figma
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!

Пікірлер: 146

@DesignCourse Жыл бұрын

Hey all. What do you find most difficult in UI design?

@developer_hadi Жыл бұрын

the idea, the content🙃

@natanchs3885 Жыл бұрын

@@developer_hadi right

@anamkhuram9596 Жыл бұрын

Making unique but intuitive layouts

@arunachalamkaruppaiah8486 Жыл бұрын

Making unique layouts

@n1leq3 Жыл бұрын

I haven't seen many UI design videos for ordered or unordered lists. Most of mine come out somewhat dull.

@khalilup1 Жыл бұрын

it's all fun and games until someone has to code that

@coffeeandthefox Жыл бұрын

Hey! I really like the tips here! Just one thing as a developer all I can think of it's how much of a nightmare would be to fully adapt this on an actual website and making sense in across devices sizes hahaha

@kashanahmad8014 Жыл бұрын

Not really that difficult hehe. Native CSS would do but with tailwind, it will be such a breeze.

@ohnudes Жыл бұрын

Hey gary, making your content about this kind of details really step up your channel! I think it's really tricky to get creative when you don't know how or where to get the inspiration and these type of vids really come helpful to also train the eye. See you around mate!

@karenhanretty3280 Жыл бұрын

I design a lot of fact sheets, and making them stand out can be challenging. I've started to incorporate a lot of your concepts, and it has upped my game. I really like the idea of subtle layering. This is a great tutorial.

@CrackerJayherber Жыл бұрын

Thanks, Gary. You always make helpful videos. I can't wait to join your design course.

@tethron. Жыл бұрын

Man that page looks great. Love the colored borders, and the font.

@MasterDesignss Жыл бұрын

That was so cool, just like when you put the WOAH in the background! I did understand that one line can change everything and the look of the whole website, even though I didn't see the WOAH clearly but it looks attractive :)...

@DesignwithCracka Жыл бұрын

Depths really do improve the visuals on a web page. thanks for the awesome tips!

@charlesngalasa224 Жыл бұрын

been watching your videos for 4 years now I have improved significantly thank you

@developer_hadi Жыл бұрын

best designer on KZfaq

@xxxxdddddss Жыл бұрын

not even close lol

@dragonflyjones5023 Жыл бұрын

@@xxxxdddddss who gets your vote?

@Mopark25 2 ай бұрын

@@xxxxdddddssthen who's the best? Why would you say something like "not even close" and not offer an alternative? Is it because you don't have an alternative and just disagreed for the sake of it? Because you're braindead?

@la_bellabianca3412 Жыл бұрын

This was sooo kool! i love this video! i def would love to see more videos like this. I have been losing inspiration and after watching this video definitely has boost my creative. thanks so much. still taking your design course! 🥰

@mattc3510 Жыл бұрын

Impressed with your channel and love your designs 👍

@flowluap123 Жыл бұрын

Things i would have added or done differently: - mirror the Box "UI Learning" to go up on the right side - it reflects the wording in "going up" rather than going down. - in the textbox, round the lower triangle to match the box border and not be so sharp - on the textbox "woahhh I can't" add a shadow from the person, as the light is coming from the light --> would give even more depth. - build a scroll effect with a parallax, in which the text-boxes float up, but the box in the back is slower than the ones in the front

@goodshiro10 Жыл бұрын

parallax effect = the most depth and improvement in UI

@AhmedMubarak255 Жыл бұрын

Wonderful! you are an excellent designer, I love how you make these great designs effortlessly

@peternicholson26 Жыл бұрын

Sweet little layout that mate. Depth is definitely coming into my builds

@Beast80K Жыл бұрын

*Sir* it's Teachers Day in India !! *Happy Teachers Day!!* Sir, Thanks for sharing your knowledge, I'm not a UI UX designer but a programmer, I just felt that my programs UI UX needs some improvements so I started designing just as an hobby, later applied various tricks that I was able to pick from your KZfaq videos to my projects.

@Beanaification Жыл бұрын

Love this tutorial, it gave me a lot of inspiration-thank you

@nicolasfourie5184 Жыл бұрын

Subscribed! Awesome channel!

@julianp3244 Жыл бұрын

Holy crap, that was awesome!

@yoprobro806 Жыл бұрын

Lol I'm here from that epic monitor enclosure you posted on reddit 😎 you're doing great!

@GoddessofWarr Жыл бұрын

OMG This video is AWESOME ! You are the best teacher on the internet

@tamtran3030 Жыл бұрын

Wow that looks amazing thanks

@Mouthofthearchitect Жыл бұрын

Great video. Remove BG also has a Figma plugin. Mac OS even has a quick action, just right click the image > quick tasks > remove background. I KNOOOOOW!

@Fabrizio1226 Жыл бұрын

Always love your class session❤♥🍾🏆

@johnlin6121 Жыл бұрын

Love it. Thanks!

@ekkamailax Жыл бұрын

This is similar to music mixing. We’ll low pass certain instruments and use reverb t make it sound like they’re “behind” the lead vocal for more depth

@mikelannen Жыл бұрын

You are are a gentleman and a scholar. Amazing video. Excellent teaching style man.

@saeentist-hb Жыл бұрын

that was so cool 😻

@j0hannes5 Жыл бұрын

Thank you this was great!

@dominiqueterry9474 Жыл бұрын

this was super inspiring, thanks! also your voice sounds like patton oswalt

@NavesNiche Жыл бұрын

Awesome stuff!

@laughlord1 Жыл бұрын

Love your vids

@christianachleitner9439 Жыл бұрын

awesome, awesome stuff :D

@burak9857 11 ай бұрын

I'm not a designer yet exploring and my friend you make it look easy 😅

@lalasmith2137 Жыл бұрын

Hey Gary, amazing design I really liked it. Would love if you could program it so I'll learn how to do all the complicated stuff like what you did in the end with the figma prototype line connected to the UI Learning and more. Thank you!

@djdx2 Жыл бұрын

im thinking I should create coding videos, doing exactly what u said!! Step by step HTML & CSS on how to setup this webpage, going through issues/solutions, etc..

@MegaOsama99 Жыл бұрын

Big love and respect 🙌💐👏

@solomonakinbiyi Жыл бұрын

What can we do without your insights! 💥

@outpost31737 Жыл бұрын

Nice one Gaz.

@otunmartins2414 Жыл бұрын

Very great content!

@chewingwildflower Жыл бұрын

Amazinggg!!!

@giovannicaianiello7669 Жыл бұрын

congratulations for the videos I often follow your tutorials and news but this time I have a different question to ask myself, what about that light receiver during your intros? 😄

@ArifMatubber-km4nv Жыл бұрын

Thank you so much

@ikennamanagwu9646 Жыл бұрын

Not going to lie bro.. Really loving the look..

@garethellison01 Жыл бұрын

very cool! 😎

@matolns Жыл бұрын

What font are you using here? Looks great.

@njengathegeek Жыл бұрын

remove bg has a figma plugin which works so nicely. Thanks Gary, waiting to see you @ 1M subs

@letmesay2035 Жыл бұрын

tbh i liked this white color txt in the background, i would just change optacity

@tsarprince Жыл бұрын

Great quality content

@malachiatkinson4121 Жыл бұрын

Iconify background remover plugin in figma is perfect way to speed up the process

@waspishbobfish Жыл бұрын

Hey, Great video! How would you replicate the blue box and lines from the UI Learning title at the end of the video? I was thinking some kind of div with a background colour for the blue box, add some rotation - but I'm not sure how you'd achieve the lines connected to it? Thanks!

@fiufiu9356 Жыл бұрын

Thats nice

@muhammadk23 Жыл бұрын

great video, waiting for the coding part too, it will be really cool if you do the coding too.

@phisit8813 6 ай бұрын

what makes a good designer is your imagination and creativity.

@anantharamanomkarabindusam3441 Жыл бұрын

That hero image is looks floating so further we can put some shadow or any light contrast background ? 🤔 Waiting for your reply😀

@trentcox9239 Жыл бұрын

i came for the lesson. i stayed for the haircut. glorious. 👌

@wolfisraging Жыл бұрын

don't you dare to believe that I didn't notice the new freaking moving camera shit you've got there

@rajufarajee4281 Жыл бұрын

it to multi-track record. I would play with an effect or two on my recordings, but I never touched the soft role or the step sequencer.

@shaderone07 Жыл бұрын

This was soo cool 🤩, btw 6:52 a plugin is available for that *Remove bg*

@ArielBenichou Жыл бұрын

Do you recommend the Kemper?

@TheProductivityDoctor Жыл бұрын

How do you create an highlight like this in a website builder like Webflow?

@jeremyderrt6862 Жыл бұрын

Clearly genius

@HonestAuntyElle Жыл бұрын

Dunno if it's KZfaq encoding, but my phone can barely render the colour difference let alone notice it in the background

@EnglishWithSushma Жыл бұрын

I like the way you code. Easy to understand. Please make tutorials for React/JavaScript with 2 to 3 projects. I am a beginner and wanted to start my career after 6 years. So,I I looked for so many options on KZfaq and udemy but I found yours best. Sometimes KZfaq recommends a lot of good things. Glad to found your channel. Your videos are simple and understandable. I wanted to know, are you working for some company or freelancing?

@Lipiec-hi2fd Жыл бұрын

How do you code that chat boxes? It will be an image or you will code that in html? I am wondering how it will look on different screens sizes.

@DesignwithCracka Жыл бұрын

Ideally, if the text on the chat boxes don't have semantic relevance, but are meant to be decorative element, then they should be used together with the chat box as SVGs, contained within a div with the image placed absolutely. For different screen sizes, that would depend on how the designer wants it. I think it would be better if they don't show up on smaller screens, unless the design makes a good provision for it.

@KoplinJenkins Жыл бұрын

there's a remove bg figma plugin that works amazingly

@whatthefunction9140 Жыл бұрын

You ha e epic hair. Can you do a video on how to be so epic?

@o_o_f_c_i4822 Жыл бұрын

I love this design

@screamtwice Жыл бұрын

This is great an all, until you have to consider AA and sometimes AAA Level of Accessibility for the website. You'd be dinged everywhere for low contrast. Love the designs tho!

@AntiAtheismIsUnstoppable Жыл бұрын

Isn't there a media query for high contrast like there is for animation and dark/light theme? I can only see one thing possible elsewise to make it more accessable if the standard design itself is not changed and that would be on hover, to make it high contrast there. But it's always the problem with lower contrast designs, they look extremely nice, but the text is just hard to make readable for everyone. Else, you should bump up the paragraph text more in size to compensate for lower contrast.

@meg6pat Жыл бұрын

great video, 1 question: how do you fast add avatar 12:33? To me it was only creating the circle then boom → image inside , it's unsplash image but how?

@jamiewallaceux Жыл бұрын

Figma avatar plugin such as UIFaces

@AlbyTheMovieCreator Жыл бұрын

When you make those designs on figma, how do you make them "reality" in a website? is there a way to export it in html/css once done with the design? I'm trying to simplify my website design and I'm interested in figma but I don't understand if it's like a canva where I do my design and then code the website myself or if it can avoid me the coding process. thanks to anyone willing to reply

@bhBlacky82 Жыл бұрын

wouldnt it be a nightmare adding those bezier lines in HTML attached to the UI Learning? I mean, especially in a fluid responsive layout?

@thedesignguy1241 Жыл бұрын

Make your site in webflow. - remove those lines on mobile.

@RyudoFanel Жыл бұрын

@@thedesignguy1241 "cReAte YoUr deSIgn In WebFLoW" ... How about "Learn to code yourself properly"?

@jessymartineau8406 Жыл бұрын

100% I make the sickest soft in my head all day long then the mont I open a DAW...

@mtwata Жыл бұрын

Unrelated but the Dave Mustaine looks rocks lol

@EhteshamShahzad Жыл бұрын

But... how would it scale down to smaller screens?

@forsh2966 Жыл бұрын

As a frontend developer I got scared by this UI 😨😨 but at the same time this is seems fun to do.

@adnanjam Жыл бұрын

As a frontnend developer, this is giving me anxiety haha, but nice design though!

@zee_designs Жыл бұрын

as a frontend dev I'm crying badly

@ivchonek Жыл бұрын

Благодарим ви!

@gfrsolutions8042 Жыл бұрын

How to turn this in html/css ?

@poooooow Жыл бұрын

Nightmares, thinking about it. #responsivHell 😂

@zee_designs Жыл бұрын

@@poooooow a lot of extra code cuz of these depths

@ImanuelBenny Жыл бұрын

Yeah really good design, thumb up. But as web developer, need more times to apply this design. hahaha

@zee_designs Жыл бұрын

sooooo true

@ezedavis7760 Жыл бұрын

Can you do a video on JavaScript pls??

@miussendunker Жыл бұрын

how the hell do you implement the last thing

@kylevandeusen Жыл бұрын

Chap lip? Is that what you called that?

@mlizomayila6680 Жыл бұрын

During the entire quarantine period, I learned how to write soft at soft soft. TNice tutorials is not to say that self-isolation is a pleasant tNice tutorialng,

@_loss_ Жыл бұрын

now how do i do this in css html

@gamesnews4440 Жыл бұрын

From my 20 years of experience in design: don't let the subjects stand in the air. It's better to put the subject on something. Overall looks good!

@AntiAtheismIsUnstoppable Жыл бұрын

It was actually placed on the slightly lighter box at the bottom, but whether that is enough I think is a matter of taste. I tend to like it as he did it, but I understand your point.

@ryd3v Жыл бұрын

What is happening at @1:44 ?

@chrisbergr Жыл бұрын

Congratulations on this killer hairstyle! :) On topic, it's always easy to get creative in these programs. But the implementation in HTML and CSS is complicated. Your layout is relatively simple, but how this angled box "UI Learning" with the curves in the background and the anchor points in the foreground can be implemented is not clear to me right now.

@MerkieAE Жыл бұрын

here’s how i would do it. have your header tag with the hero text then create a span for the “UI learning” part. place both wire SVGs or images inside of the span. set the span to have a relative position and rotate it with the transform css property. then, set both the wire elements to have absolute positioning and use top and bottom to place the wires on the top and bottom of the element. then use media tags to fix any issues your design has when making the screen smaller. use the z-index property to layer your elements to recreate the desired effect

@AntiAtheismIsUnstoppable Жыл бұрын

transform translate and ::before and ::after. It will be kind of hell to find the right size, but it seems to be the most obvious way to do it.

@phenovision Жыл бұрын

the problem with blurry elements in web design is that it'll load the page a bit slower :(

@jacques_bruwer Жыл бұрын

Since when is Russle Crow on youtube Inkscape?

@rashaddahanni5845 Жыл бұрын

Any free Discord / subReddits for designers that just show and talk about their ui designs ? i wanna find that space and learn even more about ui/ux and better myself thanks in advance