13 UI/UX Design Tips To RADICALLY IMPROVE Your Designs
Вставка
- Опубліковано 7 лип 2024
- UI/UX design tips you can implement today to radically improve your user experience and user interfaces.
Here's a collection of 13 UI/UX design tips that I use in almost all of my design work to help create a fantastic user experience for site visitors.
Start using these UI/UX design tips in your workflow today and benefit from more professional designs every single time.
- Don’t use Pure Black
- Limit fonts used to 2 (varying weights is fine)
- Use consistent font weights
- Consistent font sizes
- Left-aligned text (larger blocks of text)
- Using whitespace to allow for the design to breath
- Consistent spacing
- Using the 8 point grid system
- Use visual hierarchy
- Use contrast to your advantage
- 60/30/10 colour rule
- Use optimal line height - recommended 1.5x font size by WCAG
- Pattern repetition - Be consistent in your design
Links:
✅ 8 Point Grid: / the-comprehensive-8pt-...
✅ 60/30/10 - uxdesign.cc/how-the-60-30-10-...
✅ Design System Mini-Course: designsystem101.com
#UIUXDesign #UIDesign #UXDesign
Take your WordPress website and skills to the next level!
► THE TOOLS I LOVE ◄
If you like what we do and would like to support us, please consider using these affiliate links when purchasing any of the plugins covered in our tutorials. Thank you for your support.
► EXCLUSIVE WPTUTS DISCOUNTS ◄
✅ WPVivid Backup Pro: jo.my/vividpro (use WPTUTS20 for 20% off)
✅ Project Huddle: jo.my/etafyp (WPTUTS for 20% off - Exclusive)
► MY PREFERRED HOSTING PROVIDERS ◄
✅ CloudWays: jo.my/1feeng8
✅ SiteGround: jo.my/sgwptuts
► WORDPRESS VISUAL PAGE BUILDERS ◄
✅ ELEMENTOR PRO: jo.my/1s0t2s2
✅ Brizy Pro: bit.ly/2Ji97r8
✅ DIVI 3 Page Builder: bit.ly/2HiiDcE
► WORDPRESS THEMES ◄
✅ GeneratePress Premium: bit.ly/2Ydn1SE
✅ OCEANWP: bit.ly/2fRHBr0
✅ DIVI Theme: bit.ly/2G8JMiA
✅ Astra Pro: bit.ly/2zruoKn
► WORDPRESS TOOLS ◄
✅ SMART SLIDER 3: bit.ly/2G0G1vB
✅ CSSHERO: bit.ly/2qbrRl6
► WORDPRESS PLUGINS ◄
✅ SEOPress Pro: jo.my/seopress
► SUBSCRIBE ◄
bit.ly/2rX7rhu
► LETS CONNECT: ◄
👉 Twitter: / wptutz
👉 Facebook Group: wptuts.co.uk/facebook
SUPPORT: Our website offers additional information and perks. Please check it out! wptuts.co.uk - Навчання та стиль
You just summarized perfectly EVERY Design Principle that's being taught by dozens of books and subjects (seminars etc.). What an immense value this video has ! Simply AMAZING !
Every time you release a video, my website gets better. Thank you and keep em coming!
Now, that's what I like to hear. :)
This is so helpful. There's no use to in building websites if you don't follow these simple rules I think. Thank you!
Hi Paul!
Your style of explaining things is undoubtedly one of the best to be found here on UA-cam. Part of the reason I'm particularly excited about your announcements of new videos regarding GeneratePress/GenerateBlocks and UX/UI.
I've been writing websites for twenty years and (very!) much of what you say in your videos I can agree with a 100%. I hope to see many more of your videos.
8pt for life Paul!
Good to heaer you like the 8-Point System... so useful once you start using it.
Great stuff! 8 points grid video. Excited about it!
The 8-Point Grid is a great way to easily scale your design and create a sense of design consistency. Combine it with EMS or REMS and you can scale so easily, it's crazy. :)
Wow ! Thank you for this Paul. Looking forward to implementing these. Another easy to follow tutorial. Much appreciated.
WOW - super-duper informative, keeped my attention the whole time. Video save to my favourites. 👍👍 Please keep them coming.
Awesome to hear you enjoyed the video and got value form it - there will be a new video coming each week on UI/UX. ;)
Fully value-packed video from start to finish. Very informative on how to make great designs. Thanks for sharing Paul.
Thank you ! Great Job!
Great video, Paul, thanks. Some good practical advice there!
These are all great tips to learn and be reminded of. The way you explain these UI/UX principles in an easy-to-understand way is really impressive.
Thank you David. I do try to explain the concepts in a clear and easy to understand way where possible. :)
This was so helpful and has had such an impact on my design! Thank you so much
Thanks Paul, great advice as always!
I love the video, so detailed and gave UI/UX tips in a glance
Very useful and excellently combined tips. Thanks for sharing, Paul!!
Excellent presentation. I learned a lot and was reminded of a few things I had forgotten. Keep up the good work!
That was super helpful 🤩 thanks man 🥰👏👏👏
Paul, this video pulls so many important things together. Very well explained - every web developer should watch it in order to broaden his/her design skills.
Thank you Christian - it's always good to know the 'rules' so you can break them when needed to great effect.
Super useful! Excellent summary and illustration of basic design principles. I'll be recommending this video.
Helpful and great video btw
This has been surprisingly useful for my videogame UI/UX. Thank you
Awesome to hear. The techniques are certainly not limited to web design. 🤘🏻
Hello Paul, you are a gran master in explaining complex things!!! Thank you so much for teaching us, how to be better web designers!!
great vid. thanks mate
Dude, this was awesome! Thanks for the insights.
My pleasure. Happy to hear that you found the video useful. :)
I loved this video. Super helpful and educational. Thank you for sharing this essential knowledge!
Excellent video. Very thorough.
Thank you Maria. :)
Thanks! Just implemented the 8 point spacing on my site and it does look a lot better. Yay!
Awesome! Great to hear that it's already making an impact. :)
Great vid. Subbed
Incredible!! The amount of great information in this video is incredible!! Thanks greatly!!!
Thanks Benjamin; it's great to hear you got a lot of value from the video. :)
There are new UI/UX videos coming each week.
Paul, great video! I'm developing a few new websites but now need to go back and "enhance" the designs based on this video. Excellent recommendations that will take things to the next level!
Great to hear that you're already finding value in this video and the topic in general - I have so much more content to come to hopefully help everyone who watches add those little refinements that make a huge difference overall. :)
Thank you for this, I really gain from it
Great to hear that Adewole. :)
Brilliant.
Great video for beginners, easy to understand descripiton with nice coherent examples, even though I would consider all mentioned tips to be UI, not UX.
Surely the UI will affect the UX? A bad UI makes for a bad UX and vice versa. 😉
A lot of great points. I raced back to my websites to check them out.
Nice! I hope you found some of the points raised useful and something you can implement moving forward. :)
Hey could you do a UA-cam video on how to come up with great compositions and layouts to design content in UI design ? Basically on how to structure/layout content and images and elements for the design in way that beautiful and also interesting ? Like what are the best spots on a page to place content past the hero section ? How to compose and structure content in a way that's pleasing to the eye and still functional and easy for the user?
Great video, simple rules, no buzzwords, solid advice!
Buzzwords just confuse people for no reason - I come from the school of KISS :)
@@WPTuts 100% agree, I think they need to reinvent the wheel every couple of years to sell things to people.
Absolutely a very well put together video tut Paul!
People need to understand that by using consistent fonts as you illustrated, this helps reduce the cumulative shift on a page, which will reflect in better scoring from the Google gods when performing any speed testing! Particularly on mobile devices!
It's like the gift that keeps on giving. lol
Glad you enjoyed the video Greg - many more on UI/UX to come. :)
@@WPTuts when you were discussing rules of 8, will you cover using Clamp Functions or ensuring correct deliverability of fonts on all device sizes? I’m trying to wrap my head around that function!
Great stuff! Never heard of the 8 point system. Kinda funny how Elementor uses 20 px for the default spacing in sections. I guess they don't know about it either lol
Maybe their maths isn't too good.. lol
@@WPTuts Indeed! Do you recommend changing the content width from 1140 to something that is more compatible with the 8pt grid? 1136 or 1144 are the closest I think (my maths isn't too good either!). Or is there a way to get the 1140 width working with an 8 point grid that I've missed?!
Great video! That is what I really needed and even didn't know about it..;-)
Hi Paul. Great Tutorial as usual. However, I think you might have thrown in a bit on choosing Type and Type pairing and proofreading is important. Do it more than once. And the Number One Rule in UI/UX Design: KNOW YOUR AUDIENCE. Cheers!
Nice job! 👍 I'm gonna have to pin this video. It's really useful not online for web developers but also for graphic designers.
Can you please do more videos on the 8-point grid? 🙏 Thanks
I do plan on some more detail on the 8 point system as it's super useful for sure. :)
Would you use the 8-point grid system for fonts & line-height?
PS: this is an amazing video, thanks for putting all the great ideas into the one place.
... Those posters though...
Good
But what line height should I use for headings? 1.5em looks too much for me.
Hi sir, I really appreciate your work, if you want to make a video about ecoomers with a (mobile user interface) using the crocoblock family from logging in to the thanks page,
warm greetings 🙏
Great like always, may you introduce some sources to get some ideas of standard ui designs?
I'm already planning a video on my top design inspiration resources - keep an eye out for it over the next few weeks. :)
@@WPTuts 😍 im waiting...
U just make our life easier
@@mehdimoradi603 that's my aim. :)
When’re link to description this video
Which link are you referring to?
I love the video, so detailed and gave UI/UX tips in a glance