title
Want your layouts to look GREAT?! Try Adding DEPTH
description
https://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):
https://dribbble.com/shots/18753108-Unlock-Password-Manager-Landing-Page
https://dribbble.com/shots/18747434-Design-concept-for-Lorgar-company-Site-for-gaming-accessories
https://dribbble.com/shots/18746958-Stereotape-Landing-Page-Hero
Asset used in the UI design:
https://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: https://designcourse.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro's Twitter: http://twitter.com/designcoursecom
Join my Discord! https://discord.gg/a27CKAF
^-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!
detail
{'title': 'Want your layouts to look GREAT?! Try Adding DEPTH', 'heatmap': [{'end': 88.958, 'start': 72.748, 'weight': 0.876}, {'end': 143.96, 'start': 129.655, 'weight': 0.953}, {'end': 939.925, 'start': 901.992, 'weight': 0.733}], 'summary': 'Explore the significance of adding depth in design for visual appeal, with a 22% discount on a ui/ux course. learn to create layered designs for landing pages, simple ui designs, and glass morphism chat blips, enhancing visual interest and unique design.', 'chapters': [{'end': 133.536, 'segs': [{'end': 34.58, 'src': 'embed', 'start': 0.069, 'weight': 1, 'content': [{'end': 1.81, 'text': 'what is up everybody, Gary Simon here.', 'start': 0.069, 'duration': 1.741}, {'end': 7.593, 'text': "so today we're going to talk about depth and creating depth with layers in your design.", 'start': 1.81, 'duration': 5.783}, {'end': 8.814, 'text': 'so what do I mean by this?', 'start': 7.593, 'duration': 1.221}, {'end': 10.435, 'text': 'check out some of these examples.', 'start': 8.814, 'duration': 1.621}, {'end': 16.458, 'text': "I'm going to show you some considerations and we're going to build a landing page essentially from scratch,", 'start': 10.435, 'duration': 6.023}, {'end': 20.32, 'text': "and I'm going to add depth continually throughout this example,", 'start': 16.458, 'duration': 3.862}, {'end': 24.603, 'text': "and I think it's really going to help you add what I call visual interest in your UI designs.", 'start': 20.32, 'duration': 4.283}, {'end': 34.58, 'text': "so, as always, make sure to subscribe if you haven't yet, and let's get started now.", 'start': 24.603, 'duration': 9.977}], 'summary': 'Learn to create depth in design for visual interest.', 'duration': 34.511, 'max_score': 0.069, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evqUWEh46AA/pics/evqUWEh46AA69.jpg'}, {'end': 72.668, 'src': 'embed', 'start': 45.95, 'weight': 0, 'content': [{'end': 52.836, 'text': "I've created a UI UX course that will help you go from designing layouts that I might rate a four or five up to eight and beyond.", 'start': 45.95, 'duration': 6.886}, {'end': 57.981, 'text': 'but, more important than that, as a better designer, this means that you can land higher paying clients in jobs.', 'start': 52.836, 'duration': 5.145}, {'end': 65.665, 'text': 'this course includes over 16 hours of video for the interactive UI design tests and even mentorship, where I personally take a look at your work,', 'start': 57.981, 'duration': 7.684}, {'end': 72.668, 'text': 'that you submit, I review it and many times I also revise it, providing you with great feedback to help you become a better designer.', 'start': 65.665, 'duration': 7.003}], 'summary': 'Ui ux course offers over 16 hours of video, mentorship, and the potential to land higher paying clients and jobs.', 'duration': 26.718, 'max_score': 45.95, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evqUWEh46AA/pics/evqUWEh46AA45950.jpg'}, {'end': 99.907, 'src': 'heatmap', 'start': 72.748, 'weight': 0.876, 'content': [{'end': 77.55, 'text': 'Now, for this video, I want you to use the coupon code UI2022, and that will give you 22% off at checkout.', 'start': 72.748, 'duration': 4.802}, {'end': 80.251, 'text': 'all right.', 'start': 80.031, 'duration': 0.22}, {'end': 88.958, 'text': "so I have a new design document here in figma and we're going to start off with a frame and that is going to be the desktop frame preset.", 'start': 80.251, 'duration': 8.707}, {'end': 91.801, 'text': "but we're going to make this a little bit larger.", 'start': 88.958, 'duration': 2.843}, {'end': 99.907, 'text': "for the width we're going to go at around 1650, so 1650 all right, and the height we're going to push to like 11 30..", 'start': 91.801, 'duration': 8.106}], 'summary': 'Use coupon code ui2022 for 22% off. creating a new design document in figma with a larger frame size of 1650x1130.', 'duration': 27.159, 'max_score': 72.748, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evqUWEh46AA/pics/evqUWEh46AA72748.jpg'}], 'start': 0.069, 'title': 'Creating depth in design', 'summary': 'Emphasizes the significance of adding depth in design for visual appeal, introduces a ui/ux course with a 22% discount, and illustrates creating a layered design for a landing page.', 'chapters': [{'end': 133.536, 'start': 0.069, 'title': 'Creating depth in design', 'summary': 'Discusses the importance of creating depth in design to add visual interest, offers a ui/ux course with a 22% discount code, and demonstrates building a landing page with considerations for depth and layers in design.', 'duration': 133.467, 'highlights': ['The importance of creating depth in design to add visual interest and improve UI designs, potentially leading to higher-paying clients and jobs is emphasized.', "Offering a UI/UX course with over 16 hours of video content, interactive design tests, and mentorship, with a 22% discount code 'UI2022' provided in the video.", 'Demonstrating the process of building a landing page with considerations for depth and layers in design, using Figma and emphasizing the use of background color and layering techniques.']}], 'duration': 133.467, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evqUWEh46AA/pics/evqUWEh46AA69.jpg', 'highlights': ["Offering a UI/UX course with over 16 hours of video content, interactive design tests, and mentorship, with a 22% discount code 'UI2022' provided in the video.", 'Demonstrating the process of building a landing page with considerations for depth and layers in design, using Figma and emphasizing the use of background color and layering techniques.', 'The importance of creating depth in design to add visual interest and improve UI designs, potentially leading to higher-paying clients and jobs is emphasized.']}, {'end': 642.054, 'segs': [{'end': 183.864, 'src': 'embed', 'start': 134.356, 'weight': 0, 'content': [{'end': 137.177, 'text': "And I'm going to have a very, very simple navigation.", 'start': 134.356, 'duration': 2.821}, {'end': 140.258, 'text': "So I'm just going to go ahead and paste that in right there.", 'start': 137.397, 'duration': 2.861}, {'end': 143.96, 'text': "We're going to have a headline.", 'start': 141.478, 'duration': 2.482}, {'end': 147.104, 'text': 'So that headline is going to go right here.', 'start': 144.581, 'duration': 2.523}, {'end': 152.351, 'text': 'So your UI learning experience just leveled up.', 'start': 147.284, 'duration': 5.067}, {'end': 156.917, 'text': "Now the reason UI learning wasn't there by default is because we're going to do something interesting with that type.", 'start': 152.431, 'duration': 4.486}, {'end': 162.853, 'text': "We'll also have a simple uh.", 'start': 158.039, 'duration': 4.814}, {'end': 166.495, 'text': "sub headline right there and, by the way, the font i'm using is called inter.", 'start': 162.853, 'duration': 3.642}, {'end': 174.399, 'text': "uh, it's, it's a part of uh, it's one of the fonts that comes with figma, i believe um, fairly certain, but anyhow, um,", 'start': 166.495, 'duration': 7.904}, {'end': 180.382, 'text': "we're also gonna have a couple cards, um, and so i'm just gonna paste both of those cards.", 'start': 174.399, 'duration': 5.983}, {'end': 182.683, 'text': "they're super, super, super simple.", 'start': 180.382, 'duration': 2.301}, {'end': 183.864, 'text': "um, they're gonna go right here.", 'start': 182.683, 'duration': 1.181}], 'summary': 'Creating simple navigation, headline, subheadline, and cards for ui learning experience.', 'duration': 49.508, 'max_score': 134.356, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evqUWEh46AA/pics/evqUWEh46AA134356.jpg'}, {'end': 239.596, 'src': 'embed', 'start': 210.283, 'weight': 1, 'content': [{'end': 213.844, 'text': "And right now, as you can see, there's no depth occurring really.", 'start': 210.283, 'duration': 3.561}, {'end': 215.965, 'text': "Nothing's kind of overlapping each other.", 'start': 214.004, 'duration': 1.961}, {'end': 221.247, 'text': 'And it looks fine as is, but obviously with exception to this big empty area.', 'start': 216.505, 'duration': 4.742}, {'end': 225.448, 'text': "But this is where we're going to begin discussing depth here.", 'start': 221.687, 'duration': 3.761}, {'end': 232.331, 'text': 'So one way you can add depth is to overlap your content, especially like your type-based content, like these cards, for instance.', 'start': 225.648, 'duration': 6.683}, {'end': 239.596, 'text': "And when I say overlap, I just mean kind of like lay on top of or break outside of the box, so to speak, is to have like a rectangle, let's say.", 'start': 232.891, 'duration': 6.705}], 'summary': 'Transcript discusses adding depth by overlapping content for visual enhancement.', 'duration': 29.313, 'max_score': 210.283, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evqUWEh46AA/pics/evqUWEh46AA210283.jpg'}, {'end': 374.876, 'src': 'embed', 'start': 346.379, 'weight': 3, 'content': [{'end': 348.64, 'text': "You'd have an illustration or a photograph of some sort.", 'start': 346.379, 'duration': 2.261}, {'end': 356.724, 'text': 'So a great way is to use a photograph with a transparent background, which will allow you to do this sort of layering depth effect.', 'start': 349.34, 'duration': 7.384}, {'end': 363.067, 'text': 'So this is a fictional app that has something to do with UI gaming, whatever that means.', 'start': 357.825, 'duration': 5.242}, {'end': 367.83, 'text': "And we're going to take a look at Unsplash.", 'start': 364.728, 'duration': 3.102}, {'end': 374.876, 'text': 'which is a free plugin you can install, and Unsplash allows you to search for 100% free-to-use images.', 'start': 368.43, 'duration': 6.446}], 'summary': 'Using unsplash, a free plugin, to search for 100% free-to-use images.', 'duration': 28.497, 'max_score': 346.379, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evqUWEh46AA/pics/evqUWEh46AA346379.jpg'}], 'start': 134.356, 'title': 'Ui design and adding depth', 'summary': 'Covers creating a simple ui design and navigation with a specific font using figma. it also discusses adding depth to designs through methods such as overlapping content, layering effects, and transparent background images.', 'chapters': [{'end': 209.602, 'start': 134.356, 'title': 'Simple ui design and navigation', 'summary': "Discusses creating a simple ui design and navigation, including adding a headline, sub headline, and cards with the font 'inter' using figma.", 'duration': 75.246, 'highlights': ["The chapter discusses creating a simple UI design and navigation, including adding a headline, sub headline, and cards with the font 'inter' using figma.", "The font used is 'inter' which comes with figma.", 'The UI learning experience is enhanced with the new design.']}, {'end': 642.054, 'start': 210.283, 'title': 'Adding depth to design', 'summary': 'Discusses adding depth to designs using methods such as overlapping content and layering effects, as well as using transparent background images for creating depth and visual interest in design.', 'duration': 431.771, 'highlights': ['Using overlapping content and layering effects to add depth to designs The speaker explains the concept of adding depth by overlapping content, particularly type-based content like cards, and demonstrates creating a low-contrast rectangle with slightly lighter color to add depth.', 'Utilizing transparent background images for creating depth in design The chapter highlights the use of transparent background images, obtained using tools like Unsplash and remove.bg, to add a layering depth effect in designs, demonstrating the process of selecting, downloading, and adding a transparent background to an image for visual interest.']}], 'duration': 507.698, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evqUWEh46AA/pics/evqUWEh46AA134356.jpg', 'highlights': ["The chapter discusses creating a simple UI design and navigation, including adding a headline, sub headline, and cards with the font 'inter' using figma.", 'Using overlapping content and layering effects to add depth to designs The speaker explains the concept of adding depth by overlapping content, particularly type-based content like cards, and demonstrates creating a low-contrast rectangle with slightly lighter color to add depth.', "The font used is 'inter' which comes with figma.", 'Utilizing transparent background images for creating depth in design The chapter highlights the use of transparent background images, obtained using tools like Unsplash and remove.bg, to add a layering depth effect in designs, demonstrating the process of selecting, downloading, and adding a transparent background to an image for visual interest.', 'The UI learning experience is enhanced with the new design.']}, {'end': 1079.888, 'segs': [{'end': 731.983, 'src': 'embed', 'start': 642.594, 'weight': 0, 'content': [{'end': 649.859, 'text': "So another thing we can do is, this one I will do from scratch just to show you how to, we'll get some glass morphism in here.", 'start': 642.594, 'duration': 7.265}, {'end': 653.361, 'text': "And so we're going to have like little chat blips that are on top of this person.", 'start': 650.319, 'duration': 3.042}, {'end': 663.088, 'text': "So what we'll do is I'm just going to say, let's see, holy crap, that was really awesome.", 'start': 653.901, 'duration': 9.187}, {'end': 668.492, 'text': "And we're dealing with really large type here, but we're going to make this very small now at 16.", 'start': 663.168, 'duration': 5.324}, {'end': 670.153, 'text': "And we'll also make this regular.", 'start': 668.492, 'duration': 1.661}, {'end': 671.094, 'text': 'All right.', 'start': 670.173, 'duration': 0.921}, {'end': 673.176, 'text': "So let's just put this like right here.", 'start': 671.775, 'duration': 1.401}, {'end': 676.878, 'text': "And then, by the way, I'm gonna go ahead and lock that.", 'start': 674.056, 'duration': 2.822}, {'end': 680.72, 'text': 'And we also wanna select this person and lock them as well.', 'start': 677.719, 'duration': 3.001}, {'end': 692.167, 'text': "Okay, so now we're gonna take our rectangle tool and we'll just wrap this around and we'll give it a little bit of border radius.", 'start': 680.96, 'duration': 11.207}, {'end': 697.85, 'text': "All right, and then what we'll do is we're gonna take.", 'start': 694.749, 'duration': 3.101}, {'end': 708.973, 'text': "I think we're going to go mid gray for now, but then we're going to add an effect and this is going to be a background blur,", 'start': 700.63, 'duration': 8.343}, {'end': 711.874, 'text': "and we'll take the opacity down.", 'start': 708.973, 'duration': 2.901}, {'end': 715.756, 'text': "Now let's get both of these elements on top.", 'start': 713.095, 'duration': 2.661}, {'end': 716.656, 'text': 'There we go.', 'start': 716.176, 'duration': 0.48}, {'end': 720.498, 'text': "So there's still not enough contrast for my liking.", 'start': 718.057, 'duration': 2.441}, {'end': 731.983, 'text': 'Um, now we can take the settings here of this background blur and make it maybe like yeah, maybe like 10, but also um was,', 'start': 720.918, 'duration': 11.065}], 'summary': 'Creating glass morphism effect with chat blips and background blur at 10% opacity.', 'duration': 89.389, 'max_score': 642.594, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evqUWEh46AA/pics/evqUWEh46AA642594.jpg'}, {'end': 947.689, 'src': 'heatmap', 'start': 901.992, 'weight': 2, 'content': [{'end': 903.814, 'text': 'And this would work well.', 'start': 901.992, 'duration': 1.822}, {'end': 911.237, 'text': "But let's take it another step further, just to show you how to add even more depth, just to have fun with this.", 'start': 904.594, 'duration': 6.643}, {'end': 918.501, 'text': "I think probably doing this would be a little bit too much, but let's get rid of this and we're gonna take UI Learning.", 'start': 911.337, 'duration': 7.164}, {'end': 919.481, 'text': 'paste this in right here.', 'start': 918.501, 'duration': 0.98}, {'end': 922.793, 'text': "Notice how it's kind of like at an angle.", 'start': 921.212, 'duration': 1.581}, {'end': 939.925, 'text': 'And one of the things that really helps separate a really experienced UI designer from one that perhaps is not is when they try to really make and tailor their design make it unique in relation to,', 'start': 923.774, 'duration': 16.151}, {'end': 941.286, 'text': "however they're designing the layout.", 'start': 939.925, 'duration': 1.361}, {'end': 947.689, 'text': "that's probably bad verbiage on my part, but just to show you this, this one's like your ui learning experience, just leveled up.", 'start': 941.966, 'duration': 5.723}], 'summary': 'Demonstrating advanced ui design techniques to create unique and dynamic layouts.', 'duration': 45.697, 'max_score': 901.992, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evqUWEh46AA/pics/evqUWEh46AA901992.jpg'}, {'end': 1079.888, 'src': 'embed', 'start': 1065.486, 'weight': 6, 'content': [{'end': 1067.067, 'text': 'And so hopefully that has helped you.', 'start': 1065.486, 'duration': 1.581}, {'end': 1069.491, 'text': 'All right, everybody, hopefully you found that interesting.', 'start': 1067.728, 'duration': 1.763}, {'end': 1071.134, 'text': 'If you did, make sure to subscribe.', 'start': 1069.631, 'duration': 1.503}, {'end': 1077.063, 'text': "If you haven't, check it out, designcourse.com as well, where you can learn UI UX in an interactive setting.", 'start': 1071.174, 'duration': 5.889}, {'end': 1079.287, 'text': 'And I will see you all very soon.', 'start': 1077.724, 'duration': 1.563}, {'end': 1079.888, 'text': 'Goodbye.', 'start': 1079.647, 'duration': 0.241}], 'summary': 'Learn ui/ux on designcourse.com. subscribe for more!', 'duration': 14.402, 'max_score': 1065.486, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evqUWEh46AA/pics/evqUWEh46AA1065486.jpg'}], 'start': 642.594, 'title': 'Creating glass morphism chat blips and ui design depth', 'summary': 'Demonstrates creating glass morphism chat blips with a 16px font size and regular style, and discusses adding depth and layering in ui design, resulting in an enhanced visual interest and unique design.', 'chapters': [{'end': 697.85, 'start': 642.594, 'title': 'Creating glass morphism chat blips', 'summary': 'Demonstrates creating glass morphism chat blips by designing a small chat blip with a 16px font size and a regular style, and wrapping it with a rounded rectangle.', 'duration': 55.256, 'highlights': ['The chapter demonstrates designing a small chat blip with a 16px font size and a regular style.', 'The chapter shows wrapping the chat blip with a rounded rectangle using the rectangle tool.']}, {'end': 1079.888, 'start': 700.63, 'title': 'Ui design depth and layering', 'summary': 'Discusses creating depth and layering in ui design, including adding background blur, avatar design, and creating unique elements, resulting in an enhanced visual interest and unique design.', 'duration': 379.258, 'highlights': ['The chapter discusses creating depth and layering in UI design through techniques such as adding background blur, avatar design, and unique elements, resulting in a visually enhanced and unique design.', 'The speaker demonstrates the process of adding background blur and adjusting opacity to achieve the desired contrast and visual effect in the design.', 'The detailed tutorial includes using the pen tool to create unique design elements and layering them to add depth and visual interest to the overall UI design.', 'The speaker emphasizes the importance of tailoring the design to make it unique, showcasing the use of creative elements like wireframes and Bezier curves to enhance the visual interest of the UI design.', 'The chapter concludes by encouraging viewers to subscribe and visit designcourse.com for interactive UI/UX learning opportunities.']}], 'duration': 437.294, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/evqUWEh46AA/pics/evqUWEh46AA642594.jpg', 'highlights': ['The chapter demonstrates designing a small chat blip with a 16px font size and a regular style.', 'The chapter shows wrapping the chat blip with a rounded rectangle using the rectangle tool.', 'The chapter discusses creating depth and layering in UI design through techniques such as adding background blur, avatar design, and unique elements, resulting in a visually enhanced and unique design.', 'The detailed tutorial includes using the pen tool to create unique design elements and layering them to add depth and visual interest to the overall UI design.', 'The speaker emphasizes the importance of tailoring the design to make it unique, showcasing the use of creative elements like wireframes and Bezier curves to enhance the visual interest of the UI design.', 'The speaker demonstrates the process of adding background blur and adjusting opacity to achieve the desired contrast and visual effect in the design.', 'The chapter concludes by encouraging viewers to subscribe and visit designcourse.com for interactive UI/UX learning opportunities.']}], 'highlights': ["Offering a UI/UX course with over 16 hours of video content, interactive design tests, and mentorship, with a 22% discount code 'UI2022' provided in the video.", 'Demonstrating the process of building a landing page with considerations for depth and layers in design, using Figma and emphasizing the use of background color and layering techniques.', 'The importance of creating depth in design to add visual interest and improve UI designs, potentially leading to higher-paying clients and jobs is emphasized.', "The chapter discusses creating a simple UI design and navigation, including adding a headline, sub headline, and cards with the font 'inter' using figma.", 'Using overlapping content and layering effects to add depth to designs The speaker explains the concept of adding depth by overlapping content, particularly type-based content like cards, and demonstrates creating a low-contrast rectangle with slightly lighter color to add depth.', 'Utilizing transparent background images for creating depth in design The chapter highlights the use of transparent background images, obtained using tools like Unsplash and remove.bg, to add a layering depth effect in designs, demonstrating the process of selecting, downloading, and adding a transparent background to an image for visual interest.', 'The chapter demonstrates designing a small chat blip with a 16px font size and a regular style.', 'The chapter discusses creating depth and layering in UI design through techniques such as adding background blur, avatar design, and unique elements, resulting in a visually enhanced and unique design.', 'The detailed tutorial includes using the pen tool to create unique design elements and layering them to add depth and visual interest to the overall UI design.', 'The speaker emphasizes the importance of tailoring the design to make it unique, showcasing the use of creative elements like wireframes and Bezier curves to enhance the visual interest of the UI design.', 'The speaker demonstrates the process of adding background blur and adjusting opacity to achieve the desired contrast and visual effect in the design.', 'The chapter concludes by encouraging viewers to subscribe and visit designcourse.com for interactive UI/UX learning opportunities.']}