4 Foundational UI Design Principles | C.R.A.P.
Вставка
- Опубліковано 16 тра 2024
- These 4 foundational design principles can be used for any visual design but are especially important for UI designers... Remember to Subscribe goo.gl/6vCw64
0:00 - Intro
0:25 - CRAP
0:40 - Contrast
3:16 - Repetition
4:48 - Alignment
6:56 - Proximity
🏆 //////////// Join my members community to get access to perks:
You can get this starting and ending design file
designchamps.io/
👋 ////////// Join the Discord Server and meet other creatives
/ discord
------------------------------------------------------------------------------------
🤝 //////////// My Courses, Templates, Free E-Books, & 1:1 Mentorship
www.jesseshowalter.com/
👋 ////////// Follow me on Social
Instagram: / imjesseshow
Twitter: / imjesseshow
📫 ////////// Sign up for my Monthly Newsletter
www.jesseshowalter.com/newsletter
------------------------------------------------------------------------------------
🖥️ ////////// I build most of my websites using Webflow
webflow.grsm.io/4495884
💻 ////////// I host all my websites with Hostinger
www.hostg.xyz/SH5fF
🎵 ////////// Musicbed is the best place to get music for your films. Get your first month free when you purchase an annual subscription by using my coupon code JESSE at checkout.
share.mscbd.fm/imjesseshow
📸 ////////// The Equipment I use
www.amazon.com/shop/jesseshow...
As a fullstack (mainly backend) dev, i find these videos really helpful. Now I just have to find the time to master figma and stop making my apps look like they were made for the first version of theinternet .......wish me luck
Feelz.
You know anything about a LEMP stack?
Same here
Update when? 🤣🤣
Those principles are very important in editorial design as well! I’m glad to see I can use the skills I’ve developed in my 10+ years career in graphic design to transition to UI/UX a bit more seamlessly :) thanks for all the tips, love your videos.
For Contrast, consider using a contrast checker for WCAG if the foreground and background color combination passes the WCAG standard. A yellow colored text is barely readable on a white background, and it failed the WCAG contrast checker.
yea i thought the same, using yellow on white while explaining contrast was ironic
ua-cam.com/video/HRfkdcrp2Mk/v-deo.htmlsi=yH1ml5wzD5QdjxlC
Jesse’s content is addictive. You start with a small video, then you go to another one, then you see another interesting title and holy C.R.A.P. where did 5 hours go?😅😅 Keep them coming, Jesse, you have great educational content ❤
Jesse, you're changing the way I learn UX design every single day. I'm extremely grateful for your videos, please keep the tips and tricks coming! Much love brother!
❤️❤️❤️
ua-cam.com/video/HRfkdcrp2Mk/v-deo.htmlsi=yH1ml5wzD5QdjxlC
The satisfaction I got looking at how everything came together 🙌
You've definitely helped me become a better designer and I subbed to your channel!
This video changed my way of understanding layouts. Thanks you !
Thanks for this. I’m an old print guy making the transition to digital. Started as a flexo plate maker. Became a graphic designer… Now I’m diving into the world of digital. Subbed!
What an inspiration for a young designer like me, you're always learning, good luck!
@@mfachryofficial Thanks, you're too kind. Be grateful for resources like these. I had to learn so much thru trial, error and old fashioned experience...
wrr
Great vid ! I'll try to implement those principles in my design works. I'm still a student in ui design bachelor degree so your videos are very useful for me
Your contents are really easy to understand. deserved the subscribe
Thanks for the video! Very informative!
I learned a LOAD OF C.R.A.P. in this video! Thank you!
Yeah!! 🔥
Thank you so much for this video. Super helpful and well-presented. Your time and effort is most appreciated!
i love what you did there! love the video!
I have gained a lot from this video, and I strongly believe it will help me in my design field.
Thanks.
No fluff, love it
Nicely explained. Thanks
much love for this gentel man 🥰😘
Thank your for this video Jesse, super helpful. Thanks a lot
Great tips!
Just one thing, It may be good to consider accessibility.
Thanks for sharing.
BTW, Do you have any tips on how to animate stackable widgets?
Thanks, Jesse
Tutorial is very useful, thanks a lot ^^
this is truely amazing
Well done! I appreciate all the effort you put into your videos!
Excellent video Jesse. *thumbs up* indeed
i learned something today , thanks a lot
Wow you made it so simple
Excellent tips, especially for beginners or solopreneurs doing things on their own 🎉
Thank you very much for sharing 👍👍👍
Thank you for sharing
Thanks for the awesome. Learn a lot
Great work explaining CRAP!
I know they’re often presented as core principles of design, but I find it important to recognise them more specifically as principles of composition, which is only one aspect of visual design.
I’d suggest using CRAP to decide where and why to use contrast, repetition, alignment and proximity. Learn and use other principles to determine the what.
Comments on accessibility highlight this well. Yellow on white doesn’t violate the contrast principle of CRAP - it’s just that CRAP is not intended to help with that decision.
I think designers that have been doing this for a while, on learning about CRAP, think it’s a great way to communicate the essential principles to novices, but that’s only because they are taking even more essential principles for granted.
Stellar advice!
Thank you 👏🏼 super informative!
ua-cam.com/video/HRfkdcrp2Mk/v-deo.htmlsi=yH1ml5wzD5QdjxlC
great stuff man
Great Vide my dude!
Thanks for this Jesse. Real Help🙏❣
ua-cam.com/video/HRfkdcrp2Mk/v-deo.htmlsi=yH1ml5wzD5QdjxlC
Nice C.R.A.P. bro!
So good!
Thank you for this very useful video!
Glad it was helpful!
loved it
So glad you did!! 💛
This video is really helpful, I am a newbie trying to find my way in the world of ui ux design nd tech
You would love my course www.30dayui.com/ it’s currently 50% off
Thanks man
One question that I don't know if you've covered somewhere else. Is there an ideal size for cards like this? A width/height ratio perhaps? I never seem to get my card dimensions right. Thanks.
I like the contrast principle, I do the same thing using freehand... But I think overall it's good to establish some "rules" for the sake of constancy.
I love riding my bicycle outsode!
Thank u so much
I design powerbi reports for executive dashboards and everyone else in the company just places tables on white backgrounds. This is very helpful to make my stuff stand out. Thank you
ua-cam.com/video/HRfkdcrp2Mk/v-deo.htmlsi=yH1ml5wzD5QdjxlC
2:00
Website: fixie
Image: bike with rear derailleur
Me: *snort*
I enjoyed the Bob Ross-style commentary at 8:00 "This guy looks like a distant relative. Let's make him part of the family". 😊
nice, thanks
Great video! Whats the name of the font you are using?
Good job
🇧🇷 Conteúdo incrível!
Sola Fide 🙌
🙏
ua-cam.com/video/HRfkdcrp2Mk/v-deo.htmlsi=yH1ml5wzD5QdjxlC
Same principles I am using in traditional layout design for years.
Right on
Thanks Nice video content
Lovely video
Good! but I see some of the interesting designs who breaks these principles and looks stunning and unique!
I love your content.....
❤❤❤❤
This is actually the design principles
Great !!!!!!!!!!!!!
Hey! I love your channel. I made a study group in discord so that people can work through your content together. Can you please tell your audience about it so more people can see it?
What are you column dimensions , gutter and margin please?
Talks about emphasizing contrast. Makes yellow font on white.
What's the website you are using..?
what is the app he's using?
Hiii the way you teach we easily understand Please continue make such kind of videos . If you don't mind can you. Suggest me whether I take right kr wrong decision my career goal become a Ui UX designer . Please help me
I want. To work a Ux designer
Good
Sorry but the yellow text doesn’t meet accessibility guidelines
wow
misspelled "rhythm" under alignment; misspelled outside multiple times; the plural for axis is axes, not axises; yellow is not a contrasting colour against white; proximity has to make sense...50% off black friday makes more sense under a shopping button than under a sign up botton
Yellow and white? I don't know about it. I think it's a bad decision about contrast. (In my opinion)
OUTSIDE with I
There is a video of china's which also conveyed this in 08/04/2022
my design was crap now its CRAP
Hi jesse how i can make whatsapp on ADOBE XD
hierarchy should be treated as a separate principle
no such thing as friend x or have or like or proximity or appropriate or purpose or why or not
NOted
C.R.A.B.P. or B Crap. Missing B for balance.
Who thought it was a good idea to put 'CRAP' in the title and then translate the title to other languages?
Bro, I didn't understand proximity