5 Simple Tricks That Have Made Me a Better Designer (anyone can do it!)
HTML-код
- Опубликовано: 4 июн 2024
- The difference between a good design and a great design often lies in the details. In this video, I’ll walk you through five simple yet impactful design rules that can make a huge difference in your web designs. These easy-to-implement tweaks will help you elevate the look and feel of your projects right away!
In this video, you'll learn:
1. Optimizing Button Padding: Learn how adjusting button padding can create a more balanced and visually pleasing design.
2. Effective Use of Uppercase Text: Discover how to use letter spacing to improve the readability of uppercase text, and the importance of using text-transform.
3. Avoiding Pure Black and Pure White: Understand why avoiding pure black and white can enhance the readability of your content, and how to use tints effectively.
4. Creating Visual Hierarchy with Background Colors: See how adjusting background colors can create a sense of depth and hierarchy in your designs.
5. Simplifying Font Weights for Clarity: Find out why skipping font weights can make your typography clearer and more effective.
By the end of this video, you'll have practical tips that can turn your good designs into great ones with just a few minor adjustments!
---
Read the written version of this video: theadminbar.com/5-ez-tricks/
💻 Visit Our Website: theadmin.bar/yt-tab
🗨 Join Our Free Community: theadmin.bar/yt-community
📨 Get the Best of The Admin Bar Delivered: theadmin.bar/yt-tfc
🔁 Sell More Care Plans: theadmin.bar/yt-wom
🧮 Use My Website Price Calculator: theadmin.bar/yt-calculator
📜 Get My Proposal Template: theadmin.bar/yt-proposal
☑️ Get More Done with My Checklists: theadmin.bar/yt-checklists
🔴 Live Event Schedule: theadmin.bar/yt-events
🔧 The Tools I Use: theadmin.bar/yt-tools
⚡ My Agency, OGAL Web Design: theadmin.bar/yt-agency 
Хобби
If you haven't already, consider subscribing 🙏 New videos every Wednesday!
As a designer you don't really want button paddings to scale with text for the most part, if you read the Refactoring UI book it'll show the correct way of handling buttons, that is because buttons adjusting to text proportionately look more like it is being zoomed in and out instead of the button actually feeling smaller or bigger, here are the proper scaling examples for paddings written in the book
font: xlarge 20px
padding: 15px 30px
font: large 16px
padding: 12px 16px
font: medium 14px
padding: 8px 10px
font: small 12px
padding: 6px 8px
the padding numbers can be adjusted depending on the typeface
I have a tendency to use pure black and pure white too often, so that's the most important tip I learned. Thanks for another great tutorial, Kyle.
I hope it helps spruce up the future designs! If you Google "Dont use pure black", you'll find this argument being made with lots of evidence to back it up :)
Same here lol… always learning here 😆
Today I was () years old when I learned the expression "eyebrow text" !!
I'm not sure if it's an official term 😅
Need to go trim my preheadings now
@@TheAdminBar It's absolutely an official term, many of my bigger clients use it. I was very confused the first time I heard it, but fortunately I was able to figure out what they were on about. Great video, thank you
This was great, Kyle! The button padding is my favorite, such a noticeable difference.
Love it. Thanks Kyle. Great tips!
Glad you enjoyed it! Thanks Susan!
Thanks Kyle. Really appreciate these short form actionable videos. These combined with all your other recent design snippets are invaluable.
Thanks so much! 🙌 Really please to hear its helpful!
Thanks for calling out the use of the "em" unit for button padding. Avoid pixels at all costs.
Give me em or give me death!
Great tips Kyle! I especially liked the letter spacing on ALL CAPS one!
Thanks, Kyle. Awesome stuff as usual. 👍🏼🙏🏼
Glad you enjoyed it! 🙌
Really enjoyed the ending where you put all tips together in a real example :)
Excellent tutorial. The tip about the screen readers was gold, I'll use CSS from here out. These tips and the previous video about color use have really helped me level up my designs. Thank you! 👍
So pumped to hear that 🙌 Thanks for the support!
I never really used em and so much time I could have saved!! Time to change it! Thank you !!!
All great tips! Some of these I do without even thinking why. I like the black and white vs slightly different whites, or blacks, and the use of "em"s.
Thanks Kyle! I really like your advice of thinking in 3D and making the background darker than the items on top.
Between this and your 60-30-10 color video my designs have already leveled up!
So glad it's been helpful 🙌 Thanks for the support!
Kyle delivering quality content as usual. Legend! Thanks!
Glad you enjoyed it 🙌
Excellent tips. Really, really useful!
Thanks, Andrew! Glad you enjoyed it!
spot on with not using #000 and #fff
good info
Thanks Kyle, can you give us spacing hints for other elements than buttons, and spacing in between elements?
AWESOME :-)
Thanks Taylor!
This is awesome - I love how such subtle changes can make such a big difference!
Thanks, Hans 🙌 You're right - it's nuts. And once you know the secrets, things just come together easier and easier!
make video new blog post desgin
For #4, I didn't see much difference on my phone.
Yeah, a screen recording of my screen being uploaded to RUclips, then displayed on your screen makes it difficult to see nuances 😅 If you grab those hex codes, I guarantee you'll see the difference on your own monitor.