How to use Negative Space in UI Design
ฝัง
- เผยแพร่เมื่อ 19 ก.ค. 2024
- New Videos Every Tuesday, Thursday & Saturday!
Learn UI/UX Design and Adobe XD 👩💻👨💻(60% OFF)
Learn: www.udemy.com/ui-ux-design-us...
Have a Great Day! Join the Notification Squad: click the bell 🔔
Subscribe: th-cam.com/users/CalerEdwa...
Join the channel and become a Member ❤️
Get exclusive content from me and help support the channel.
Join: / @caleredwards
SOCIAL: @CalerEdwards 💙
Dribbble- dribbble.com/CalerEdwards
Instagram- / caleredwards
Twitter- / caleredwards
Behance- behance.net/CalerEdwards
Website- caleredwards.com
Hangout on the Discord server! 💜
Discord: / discord
▶ Music: Epidemic Sound 🎹
In this video we will look at negative space in UI/UX design, web design and app design. How negative space effects design and how to use negative space in design. I will give some tips and show you how you can use negative space to your advantage. Enjoy the video :D - บันเทิง
![แฉ [2/4] 17 ก.ค. 67 “ลิลลี่ เหงียน” เปิดใจหลัง “เอิร์ก เลเดอเรอร์” ตอกกลับเรื่องโกงเงิน 50 ล้าน](http://i.ytimg.com/vi/s8KapfEO5NI/mqdefault.jpg)
![The Wall Song ร้องข้ามกำแพง | EP.202 | ตั้ม วราวุธ / เบสท์ คำสิงห์ | 18 ก.ค. 67 [1/5]](http://i.ytimg.com/vi/cwIoA7XHqnE/mqdefault.jpg)
5:48 RECAP - For header + body: have half the height of the header as spacing before the body.
If using a tagline, have the tagline’s height between it and the header. Then group those two, divide by 2, and that’s how much spacing you want to have before your body text.
Amazing ..... I am a self taught front-end developer and designer and learning design so far i found that if you get your sizing and spacing right and even everything else wrong, the design still looks amazing ( in a weird way though, kind of like modern art.).
Shoutout to the UX google course for brining me here. Would love to join the discord group to learn more!
Great video 👍
Maybe a "How to use Typography in UI Design" next?
that's really cool, keep up bro, please keep this UI design fundamentals videos it's really helpful... big respect
Thanks :D
Dude your content is TH-cam gold, thanks for creating! You deserve way more recognition. I would choose a social platform (either Instagram or Twitter) and try to put way more content towards there, if I were you. I can see you have both but neither is super active, so I'd just pick one and focus on it, otherwise takes too much energy. I think you could do really cool short snippets of your videos there and try to funnel people to your youtube that way, cause your voice is great, your scripts are clean and you get straight to the point.
Nice video! I use geometric progression to add spaces. Adding the right amount of space always improves composability.
AWESOME video! This goes beyond the basics and gives helpful tips. The video is engaging and easy to follow. Subscribed & looking forward to weekly challenges next. Thanks :)
This video was awesome. Thank for the tips my man, keep it up!
Wow, your explanation is stellar!
I'm currently learning front-end development, and I think knowing some UI/UX design is great to improve the aesthetics of my web pages. I'm glad I came across your channel.
Definitely subbed, and keep on making amazing content! 👊
Thank you :D
Great tip on spacing and dividing the height! Gonna apply that to my designs
First Two minutes explained it all for a newbie using wordspace! Thank you!
This helped me out so much!!! Thank you!
Great lessons in Negative/White space. I took away some great tips. Thanks Caler!
As soon as you got into the first tip my mind just exploded, crazy good content bro 🔥🔥🔥
This info is legit! Thanks for being here Caler. So many people miss this very crucial fundamental concept
Thank you :D
Phenomenal value in all your videos, we appreciate it!
Thank you so much :D
Really appreciated this video. All designers should heed your advice 😎
More video tips like this please!
great video i needed this!! Thank you so much!
Thank you Caler for this video.
Such good information that we often forget. Thank you!!!
Excellent presentation. You've earned yourself a new subscriber. Thanks for the info!
That was awesome. Great job man!
Lovely video. I always wonder how it looks so fantastic in your design. Great! Thanks again for sharing your knowledge video
This is great! Thanks a lot
Good video. Enjoyed it. I don't do UI still found it really informative, keep it up
Fundamentals!!! Big props i love your channel
Super creative yaaay! your content is so damn premium, the way you explained negative space is just brilliant! thank you !
Thank you :D
Keep going..
It's awesome to find out tutorial like this.
Explained with clarity and excellence.
It really helps a lot, Please make video on Grid in UI design.
Very well explained thank you
Thanks, Caler, nice and informative video. PS: when would you start taking after effect classes and you consider teaching on skillshare
Great vidéo, i like the fact that you improve the quality of the video by adding motion design ! Keep up the good work!
Thank you 😀
Hey Caler Thanks for the great tutorials Awesome as always keep it up.
just one Q. can you elaborate what did you mean by Height of your Heading 06:05? the size in pixels? or the total height measuring from the highest letter?
Cheers,
Thumbs up and Thank you for teaching so well that negative space
Amazing knowledge thank you
Thanks a lot sir!
Great video! could you please share some good resources talking about spacing between elements?
good way to find best line hight is to multiplicate size of text by 1,2~1,5. So for example if your text size is 12 pt you will find best line hight between 14,4 (its good to round up those sizes so 15) to 18.
Nice tip! Thanks :D
Great video ! Thank you so much !
Thanks :D
Great stuff!
Awesome! Would you pls tell more on grids for minimalistic web design? :)
Thank you for this video!😊
You just gained a subscriber! 🎉🎉
Welcome! :D
This video deserve more views! Great explanations, thank you!
Very helpful, thank you
Glad it was helpful!
Thank you ☺☺
Great video, Caler!
Thanks :D
For this tutorial you deserve 1M subscribers
You are great ! Keep teaching 😊
Thank you, I will :D
great! thank you
I have been looking for this information long time , But I was not able to know how to access such like this I know when I desing UI these but never now how to control as u explain it thanks alot )
Excellent Video!
Thank you very much!
Very informative. Good video
Thank you :D
that's a great video
Thanks.
I multiply the font size by 1.5 and keep that value as the minimum line-height for paragraphs.
Can you share your
Mobile UI style guide for Adobe Xd
Awesome video .
can you resume UiDaily Challenge playlist 😔
Sou Muito seu fãn
Where have you been all my life? Good. Shit! CALER!
Hey Caler, can you go more in depth with base font size and typographic scales please??????
Great video
Thanks!
love you
Thanks my g
😆
Did you make this presentation on keynote? Good stuff btw Caler
Thank you! I just used after effects but I will check that software out
Love it 💊💊💊💊🎓
Any good website for this Spacing techniques? Please let me know. I'm struggling with it.
LOVE IT
:D
;)
what font is it that you used for this video ?
*_10 seconds into this video_*
*SUBBED*
What is the name of the typography of this thumbnail video? The video is so great! Thank you!
cool
what program is he using?
+Caler Edwards discovered the name negative space, bravo you win the novel price. I call it black space.
Super
Thanks
great info, thank you. the discord link is expired though.
A robot took over on 2:28 :D
🤣
@@CalerEdwards Forgot to add: great video man. Becasue of you, XD is my main design tool now :D
Hey! Id' love to join your discord group, but there's an issue with the flow of it. I can't register for an account. It asks for a username, but doesn't allow me to create a password. It wants me to verify, so I put in a phone number. I get the code and put it in and then it asks me to put in my password. However, I don't have a password because it didn't ask me to create one.
Google ui/ux coursera brought me here :P
4:50 Aren't you changing the vertical spacing ?
Hi! I was not able to join to your Discord group, it says "invitation invalid".
Any chance you can update the discord server link? It doesn't seem to be working 🤷♂
I can’t access the discord invite link
Oh no, please use the 8px grid system
what is the discord address.
Hmm. I might join the discord. I’ve been feeling really disillusioned so it could be good for me.
3rd
🔔🔥
Discord link broken
I no longer have the discord sorry.
Why do I keep on hearing the word "heigth" instead of "height"
Who else got sent here from Coursera?
Google chose this video!
Why is the black in you video not true black
2 nd
🔔🔥
1st
🔔🔥
when you work at vimeo or any other news article websites you HAVE to abuse these.
Design > Readability
It’s been four years,and the link has expired🍀
"You'll see that this is very unreadable because the text is really close together." Nah, that'd be because it's in latin
lol it's Lorem
>ui design
>uses pt
This so good but, All these name you are give
negative space: white space
Micro space : padding
Macro space: margin
Please don't make another video confusing people with names. Stick to the norm.